Как стать автором
Обновить
0

Работа с иконками *

Размер имеет значение

Сначала показывать
Порог рейтинга
Уровень сложности

Его Величие Смайлик :-)

Уровень сложностиСредний
Время на прочтение11 мин
Количество просмотров2.8K

Общепринято что иконка «смайлика» пришла к нам из телефона, и возникла когда‑то, как‑то и как бы сама собой. Но давайте разберемся, был ли «первооткрыватель» самого узнаваемого символа в мире. Кем он являлся и какие обстоятельства дали волю изобретателя смайлика представить образ обществу?

Сколько создателей :) было на самом деле?
Всего голосов 12: ↑12 и ↓0+12
Комментарии2

Новости

Как организовывала IT-сходку комьюнити для EdTech проекта

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров1.2K

Как организовывала IT-сходку для EdTech проекта.

В одном из проектов была задача: организовать встречу студентов и выпускников EdTech проекта по обучению айти специальностями. Визуализировала я её так: Ребята общаются в неформальной барной обстановке. Студенты расспрашивают выпускников о трудоустройстве, общаются о компаниях и мире IT.

Читать далее
Всего голосов 11: ↑5 и ↓6-1
Комментарии2

Пошаговая инструкция: как с Node.js организовать иконки из Figma в проекте

Время на прочтение28 мин
Количество просмотров6.9K


Эта статья подробно описывает создание небольшого скрипта на Node.js для выгрузки векторных иконок из Figma в проект, а также универсального компонента для разных видов иконок, который удобно использовать в своём приложении.


Скрипт может пригодиться командам, которые ещё не определились с общим подходом к использованию и хранению иконок в проекте, и тем, кто стремится автоматизировать этот процесс.


Под катом – довольно длинный (мы предупредили!) и подробный текст, но с большим количеством полезного кода.

Читать дальше →
Всего голосов 5: ↑5 и ↓0+5
Комментарии2

Иконки приложений как товарный знак: ожидание и реальность

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров2.6K

В эпоху бурного развития цифровой экономики бизнес неизменно выходит в онлайн: сегодня все больше участников рынка имеют собственные мобильные и десктопные приложения, в раскрутку которых вложены немалые средства. В этой связи желание бизнеса защитить имиджевые составляющие от копирования вполне закономерно, и регистрация иконок приложения (пиктограмм) в качестве товарных знаков — явление трендовое и часто используется для зонтичной защиты бренда.

Какой должна быть иконка, чтобы получить заветное согласие экспертов — разбираем в нашей статье.

Читать далее
Всего голосов 4: ↑3 и ↓1+2
Комментарии2

Истории

Inkscape с 0 до Pro за 5 дней

Время на прочтение17 мин
Количество просмотров41K

Создал мини курс по программе для векторной графики Inkscape в 2022.

Разработал методические материалы для изучения темы «Кодирование и обработка графической и мультимедийной информации» в школьном курсе информатики.

«Векторные графические редакторы позволяют пользователю создавать и редактировать векторные изображения непосредственно на экране компьютера, а также сохранять их в различных векторных форматах, например, CDR, AI, EPS, WMF или SVG». «Inkscape - редактор векторной графики, аналогичный по своим возможностям таким программам, как Adobe Illustrator, Corel Draw и другим».

Читать далее
Всего голосов 78: ↑77 и ↓1+76
Комментарии42

4 способа добавить иконки на сайт из Figma — все плюсы и минусы

Время на прочтение6 мин
Количество просмотров36K

Проверяя html-макеты верстальщиков и разработчиков наблюдаю проблемы с добавлением иконок на сайт. Они их добавляют чёрт пойми как… Могут добавить их как png изображения, а могут вообще использовать не иконки из макета, а похожие иконки, использовав, к примеру, FontAwesome. Это жестко, скажу я вам.

В связи с этим я хочу расставить все точки над И в этой теме и рассказать достаточно подробно о том, как лучше всего добавлять иконки на сайт.

Читать далее
Всего голосов 7: ↑5 и ↓2+3
Комментарии8

Design Sapiens: путь к дизайн-системе, которой удобно пользоваться

Время на прочтение6 мин
Количество просмотров4.4K

Я UX/UI-дизайнер, уже два года работаю в ISPsystem. Одной из глобальных моих задач все это время было сделать нашу дизайн-систему удобной для использования.Полноценная дизайн-система — с гайдами, состояниями и борьбой с разработчиками — испытание не только для новичка в дизайне, но и для опытного проектировщика. Сейчас мы на пути к идеальной дизайн-системе, но решили поделиться опытом ее проработки - кому-то может помочь избежать наших ошибок :)

Для чего все затевается

ISPsystem создает программное обеспечение для управления IT-инфраструктурой: физическим оборудованием, серверной виртуализацией, веб-сервером и сайтами. Сейчас существует четыре продукта со схожей дизайн-системой (VMmanager, DCImanager, ISPmanager и BILLmanager) и один — со своей собственной (billix).

Читать далее
Всего голосов 5: ↑5 и ↓0+5
Комментарии3

Компактные Vue компоненты из самописных SVG иконок

Время на прочтение10 мин
Количество просмотров6.8K


История вопроса


В этой статье пойдёт речь о том, как я пришёл к тому, чтобы взяться писать плагин, создающий на лету vue компоненты из самописных svg иконок во время сборки проекта, о том, как я это делал, и о том, что в итоге получилось.


Мне уже давно и прочно нравится мир Vue. Особенно завораживает скорость, с которой в нём рождаются новые возможности писать код более лёгким и понятным. Недавно появились Composition API, VueUse, Vite… По ходу освоения этих новых инструментов я нашёл шаблон Vitesse, буквально насыщенный удобными средствами — и для управления макетами (layout), и для маршрутизации, и для локализации и ещё для много чего… Возможно, есть смысл написать отдельный обзор этого арсенала по русски (чего в Интернете пока ещё нет). Но сейчас речь не об этом.

Читать дальше →
Всего голосов 4: ↑4 и ↓0+4
Комментарии11

Приятная капча и ее решение

Время на прочтение5 мин
Количество просмотров4K

В статье пойдет речь о решении визуально привлекательной капчи, решение которой не только немного расслабляет и погружает в транс медитации, но также позволяет немного стряхнуть пыль с фреймворка selenium для python, а также пакета opencv. Именно эти инструменты и будут использоваться на капче, которая относится к так называемому виду капч «с перетаскиванием». Но, для начала, присказка.
Читать дальше →
Всего голосов 7: ↑5 и ↓2+3
Комментарии2

Как и почему эмодзи портят онлайн-переписку

Время на прочтение8 мин
Количество просмотров36K

Разве могут эти милые значки испортить ваши отношения с подписчками или навредить в личной переписке? А что на счёт онлайн-переписки с коллегами в условиях дистанционной работы? Автор статьи на всё отвечает «да». Более того, между многобукаф и многосмайлоф он выбирает первое, считая это за меньшее зло. Почему?

Чтобы ответить на этот вопрос, он вводит критерии качества общения и выстраивает соответствующую аргументацию.

Несколько недель назад я опубликовал в Instagram Stories саморекламы пост. Через полчаса я обнаружил, что подписчики положительно отреагировали на него. Вроде бы всё хорошо, но давайте посмотрим внимательнее.
Читать дальше →
Всего голосов 57: ↑47 и ↓10+37
Комментарии81

Забытые корни популярных иконок

Время на прочтение9 мин
Количество просмотров28K


Популярная шутка утверждает, что наши дети воспримут 3,5-дюймовую дискету как распечатанный на 3D-принтере значок сохранения. Действительно, растёт поколение, не знающее объекта, с которого срисовали эту пиктограмму.

Но забытый формат хранения данных — далеко не единственный символ, память о происхождении которого мы теряем. Символы берут начало не только в исчезающих объектах реальности: некоторые из них зародились в устаревших стандартах, а иногда для нового объекта или явления нужен запоминающийся значок, автор которого не получает заслуженную славу. Постепенно иконки входят в нашу жизнь, и мы уже и сами не можем сказать, куда они уходят корнями.

В этом посте мы попытаемся отследить этимологию наиболее простых иконок, которые прочно вошли в наш графический язык.
Читать дальше →
Всего голосов 77: ↑75 и ↓2+73
Комментарии122

Генерация дефолтных Github аватарок

Время на прочтение2 мин
Количество просмотров18K

В данной статье я покажу и расскажу, как можно сгенерировать аватарки как на Github.

Читать далее
Всего голосов 30: ↑29 и ↓1+28
Комментарии14

Создание изображений в runtime (favicon, watermark, нарезка картинок) #golang

Время на прочтение6 мин
Количество просмотров4.8K

В Go есть возможность создавать файлы изображений.

С помощью этого мы можем создавать картинки на лету (в runtime).

Где же это может пригодится?

Читать далее
Всего голосов 6: ↑4 и ↓2+2
Комментарии2

Ближайшие события

Weekend Offer в AliExpress
Дата20 – 21 апреля
Время10:00 – 20:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн

Что плохо в новых значках Google

Время на прочтение6 мин
Количество просмотров61K


Компания Google «переосмыслила» G Suite как Google Workspace и выродила удивительное семейство разноцветных логотипов вместо всем привычных, узнаваемых, а в случае Gmail — даже культовых — иконок. На их месте появились маленькие радужные капли, которые мы теперь будем изо всех сил пытаться отличить друг от друга на вкладках браузера. Компании любят громко и много разглагольствовать о фирменном дизайне, поэтому в качестве противоядия попробую просто на пальцах объяснить, почему эти иконки такие плохие и почему они не продержатся долго.

Во-первых, я понимаю намерение Google. Они пытаются унифицировать визуальный язык различных приложений в своём наборе. Это может быть важно, особенно для такой компании, которая отказывается от приложений, сервисов, языков проектирования и других вещей, словно сбрасывая балласт с падающего воздушного шара (удивительно удачное сравнение, на самом деле).
Всего голосов 136: ↑132 и ↓4+128
Комментарии186

Поймут ли ваши иконки пользователи из других стран? Обзор научных исследований

Время на прочтение5 мин
Количество просмотров14K


Дизайнеры часто используют иконки для того, чтобы помочь пользователю быстрее находить нужные функции. Кажется, что иконки универсальнее, чем текст. Даже на браслете путешественника изображены иконки, потому что язык люди другой культуры не поймут, а в картинках разберутся.
Читать дальше →
Всего голосов 55: ↑54 и ↓1+53
Комментарии51

Пора обновить ваш монитор

Время на прочтение16 мин
Количество просмотров174K

Иллюстрация: Юлия Прокопова

Я программист. Я не занимаюсь цифровой живописью, обработкой фотографий, видеомонтажом. Меня действительно не волнует широкая гамма или даже правильная цветопередача. Я провожу большую часть своих дней в текстовом браузере, текстовом редакторе и текстовом терминале, глядя на едва движущиеся буквы.

Поэтому я оптимизирую настройки, чтобы показывать действительно, действительно хорошие буквы. Для этого необходим хороший монитор. Не просто нужен, а ОБЯЗАТЕЛЕН. А под «хорошим» я имею в виду настолько хороший, насколько это возможно. Это мои мысли, основанные на моём собственном опыте того, какие мониторы лучше подходят для программирования.
Читать дальше →
Всего голосов 181: ↑148 и ↓33+115
Комментарии991

Рендеринг текста вас ненавидит

Время на прочтение14 мин
Количество просмотров29K

Рендеринг текста: насколько сложным он может быть? Оказывается, невероятно сложным! Насколько мне известно, буквально ни одна система не выводит текст «идеально». Где-то лучше, где-то хуже.

Предположим, вы хотите произвольный текст с произвольными шрифтами, цветами и стилями, с переносом строк и поддержкой выделения текста. По сути, это минимальные требования для правильного отображения сложного текста, окна терминала, веб-страницы и т. д.

В общем, сразу скажем: здесь нет последовательных правильных ответов, всё намного важнее, чем вы думаете, и всё влияет на всё остальное.

Мы обсудим темы, которые не объединяются в рамках какой-то единой концепции, это просто вопросы, с которыми мне пришлось столкнуться за несколько лет работы над рендерингом текста в Firefox. Например, не будем слишком подробно обсуждать проблемы сегментации текста или управления различными текстовыми библиотеками для конкретной платформы, поскольку этим я не слишком интересуюсь.
Читать дальше →
Всего голосов 113: ↑112 и ↓1+111
Комментарии19

В чём уникальность BeOS и HaikuOS

Время на прочтение9 мин
Количество просмотров22K
Первое, на что следует обратить внимание в бета-версии Haiku — это работа с пакетами.

Когда мы говорим просто «пакеты», то подразумеваем только запуск пакетного менеджера на GNU/Linux, и т.д., но Haiku умеет гораздо больше.

Как я уже упоминал в обзоре Haiku Beta, это первый официальный релиз функции управления пакетами. Если сформулировать вкратце, то представьте PackageFS как нечто похожее (но не такое же) на старую систему модулей Slax 6, но со всеми обычными инструментами для «пакетов».

Систему управления пакетами можно описать в пяти кратких пунктах:

  • универсальные инструменты командной строки (как и следовало ожидать);
  • HaikuDepot;
  • средство обновления программ;
  • мониторинг состояния пакетов и/или системы;
  • PackageFS (где все пакеты плавно монтируются и подключаются при загрузке), с побочным эффектом — аккуратным слоем безопасности.
Читать дальше →
Всего голосов 49: ↑48 и ↓1+47
Комментарии20

Сказ о старинных иконках. Загадка 18-и цветов. Прозрачный и инверсный цвета

Время на прочтение4 мин
Количество просмотров5.9K
Мало кому ныне не плевать на лишние килобайт-другой. Но такие люди есть, и как раз для такого задрота человека эта заметка и написана. )

В тех единичных случаях, когда мне нужно было записать выразительную иконку (.ico) приложения и одновременно следовало сэкономить байты, я пользовался следующим хаком: записывал изображение в 16-цветном режиме — но! — не в обычной фиксированной палитре, а в адаптивной.

Что это даёт? Иконка 48х48, 1-битовая прозрачность, 256 цветов = 3774 байта, она же в 16 цветах = 1662 байт. Выигрыш – 2 килобайта, при незначительном падении качества изображения.



Пример. Слева — направо:

  • 256-цветный оригинал
  • фиксированная стандартная 16-цветная палитра (причем здесь пару минут подбирал штриховку, чтоб изображение имело хоть сколько-нибудь приличный вид)
  • адаптивная 16-цветная палитра + штриховка (dithering).

Как это работает? Как ни странно, 16-цветная иконка всегда носит в себе палитру. То есть, 99.9% старинных иконок несут в себе абсолютно одинаковую 64-байтную таблицу цветов (4 байта на цвет). И, да – оказывается, её можно перепрограммировать.
Читать дальше →
Всего голосов 31: ↑31 и ↓0+31
Комментарии5

Этот SVG всегда показывает сегодняшнюю дату

Время на прочтение2 мин
Количество просмотров30K
Для своей странички с контактными данными нужна была стандартная иконка календаря, чтобы люди просматривали мой ежедневник. Такие иконки почти всегда делают наподобие бумажного календаря. Но мне стало интересно, можно ли сделать календарь чуть полезнее, если добавить динамическую иконку.

И вот он, SVG-календарь, который всегда показывает сегодняшнюю дату:


Фоновое изображение сделано на основе иконки Twitter TweMoji Calendar — CC-BY

Поддержка текста в SVG слегка неудобная, так что позвольте объяснить, как я это сделал.
Читать дальше →
Всего голосов 85: ↑80 и ↓5+75
Комментарии57
1
23 ...
Изменить настройки темы

Вклад авторов