Создал мини курс по программе для векторной графики Inkscape в 2022.
Рубрика «Работа с иконками»
Inkscape с 0 до Pro за 5 дней
2022-08-19 в 14:23, admin, рубрики: inkscape, веб-дизайн, векторная графика, векторные иконки, векторные операции, векторный, графика, графические редакторы, графический дизайн, графический интерфейс пользователя, Работа с векторной графикой, Работа с иконками, Учебный процесс в ITКак и почему эмодзи портят онлайн-переписку
2021-04-06 в 7:10, admin, рубрики: emoji, Блог компании VDSina.ru, Научно-популярное, переписка, Работа с иконками, Смайл, смайлики, Социальные сети и сообщества, типографика, эмодзи
Разве могут эти милые значки испортить ваши отношения с подписчками или навредить в личной переписке? А что на счёт онлайн-переписки с коллегами в условиях дистанционной работы? Автор статьи на всё отвечает «да». Более того, между многобукаф и многосмайлоф он выбирает первое, считая это за меньшее зло. Почему?
Чтобы ответить на этот вопрос, он вводит критерии качества общения и выстраивает соответствующую аргументацию.
Несколько недель назад я опубликовал в Instagram Stories саморекламы пост. Через полчаса я обнаружил, что подписчики положительно отреагировали на него. Вроде бы всё хорошо, но давайте посмотрим внимательнее.Читать полностью »
Забытые корни популярных иконок
2021-02-05 в 9:12, admin, рубрики: apple, bluetooth, ethernet, ShareThis, UI, ui/ux, UX, Xerox, Xerox Star, Блог компании VDSina.ru, гамбургер, дизайн, иконка-гамбургер, иконки, интерфейсы, история иконок, история интерфейсов, История ИТ, катушечные магнитофоны, магнитофоны, Работа с иконками
Популярная шутка утверждает, что наши дети воспримут 3,5-дюймовую дискету как распечатанный на 3D-принтере значок сохранения. Действительно, растёт поколение, не знающее объекта, с которого срисовали эту пиктограмму.
Но забытый формат хранения данных — далеко не единственный символ, память о происхождении которого мы теряем. Символы берут начало не только в исчезающих объектах реальности: некоторые из них зародились в устаревших стандартах, а иногда для нового объекта или явления нужен запоминающийся значок, автор которого не получает заслуженную славу. Постепенно иконки входят в нашу жизнь, и мы уже и сами не можем сказать, куда они уходят корнями.
В этом посте мы попытаемся отследить этимологию наиболее простых иконок, которые прочно вошли в наш графический язык.
Читать полностью »
Фавиконы в 2021 году: шесть самых важных файлов
2021-01-15 в 16:29, admin, рубрики: favicon, ruvds_перевод, Блог компании RUVDS.com, Работа с иконками, разработка, Разработка веб-сайтовПришло время переосмыслить используемый нами подход к подготовке наборов фавиконов для современных браузеров и остановить безумие генераторов фавиконов. В наши дни фронтенд-разработчикам приходится иметь дело с более чем 20 статическими PNG-файлами только для того чтобы вывести на вкладке браузера или на сенсорном экране миниатюрный логотип сайта. В этом материале раскрывается более разумный подход к работе с фавиконами, который направлен на подбор минимального количества файлов, использование которых способно решить большинство «фавиконных» задач, стоящих перед современным веб-разработчиков.
Известно, что создание фавиконов — это гораздо сложнее, чем многим хотелось бы. Поэтому я, чтобы не мучить тех, кто уже достаточно от всего этого настрадался, кто точно знает, что делать, собрал всю суть статьи в паре примеров кода. Но я, всё равно, советую читать этот материал целиком.
Читать полностью »
Генерация дефолтных Github аватарок
2021-01-06 в 18:52, admin, рубрики: github, python, аватар, аватарки, генерация изображений, Работа с иконкамиВ данной статье я покажу и расскажу, как можно сгенерировать аватарки как на Github.
Для начала нужно понять, как устроена аватарка с Github'а. На первый взгляд, это просто случайный набор закрашенных квадратов (далее, блоков) в удачном порядке на сером фоне.
Поймут ли ваши иконки пользователи из других стран? Обзор научных исследований
2020-08-11 в 8:35, admin, рубрики: Блог компании Tinkoff, дизайн, иконки, исследование, культурные различия, Работа с иконками
Дизайнеры часто используют иконки для того, чтобы помочь пользователю быстрее находить нужные функции. Кажется, что иконки универсальнее, чем текст. Даже на браслете путешественника изображены иконки, потому что язык люди другой культуры не поймут, а в картинках разберутся.
Читать полностью »
Рендеринг текста вас ненавидит
2019-09-30 в 15:46, admin, рубрики: harfbuzz, svg, браузеры, Глиф, лигатура, Работа с векторной графикой, Работа с иконками, Разработка веб-сайтов, рендеринг, субпиксельное смещение, типографика, хинтинг, эмодзиОглавление
- 1. Терминология
- 2. Стиль, вёрстка и форма зависят друг от друга?
- 3. Текст — это не отдельные символы
- 4. Эмодзи ломают цвет и стиль
- 5. Сглаживание — это ад
- 6. Эзотерика
- 6.1. Шрифты могут содержать SVG
- 6.2. Символы могут быть чертовски большими
- 6.3. Выделение — это не рамка, а текст идёт во всех направлениях
- 6.4. Как написать то, что невозможно написать?
- 6.5. Стиль является частью шрифта (за исключением случаев, когда это не так)
- 6.6. Нет идеального текстового рендеринга
- 7. Дополнительные ссылки
Рендеринг текста: насколько сложным он может быть? Оказывается, невероятно сложным! Насколько мне известно, буквально ни одна система не выводит текст «идеально». Где-то лучше, где-то хуже.
Предположим, вы хотите произвольный текст с произвольными шрифтами, цветами и стилями, с переносом строк и поддержкой выделения текста. По сути, это минимальные требования для правильного отображения сложного текста, окна терминала, веб-страницы и т. д.
В общем, сразу скажем: здесь нет последовательных правильных ответов, всё намного важнее, чем вы думаете, и всё влияет на всё остальное.
Мы обсудим темы, которые не объединяются в рамках какой-то единой концепции, это просто вопросы, с которыми мне пришлось столкнуться за несколько лет работы над рендерингом текста в Firefox. Например, не будем слишком подробно обсуждать проблемы сегментации текста или управления различными текстовыми библиотеками для конкретной платформы, поскольку этим я не слишком интересуюсь.
Читать полностью »
Сказ о старинных иконках. Загадка 18-и цветов. Прозрачный и инверсный цвета
2018-09-06 в 11:22, admin, рубрики: cur, ico, Работа с иконкамиМало кому ныне не плевать на лишние килобайт-другой. Но такие люди есть, и как раз для такого задрота человека эта заметка и написана. )
В тех единичных случаях, когда мне нужно было записать выразительную иконку (.ico) приложения и одновременно следовало сэкономить байты, я пользовался следующим хаком: записывал изображение в 16-цветном режиме — но! — не в обычной фиксированной палитре, а в адаптивной.
Что это даёт? Иконка 48х48, 1-битовая прозрачность, 256 цветов = 3774 байта, она же в 16 цветах = 1662 байт. Выигрыш – 2 килобайта, при незначительном падении качества изображения.
Пример. Слева — направо:
- 256-цветный оригинал
- фиксированная стандартная 16-цветная палитра (причем здесь пару минут подбирал штриховку, чтоб изображение имело хоть сколько-нибудь приличный вид)
- адаптивная 16-цветная палитра + штриховка (dithering).
Как это работает? Как ни странно, 16-цветная иконка всегда носит в себе палитру. То есть, 99.9% старинных иконок несут в себе абсолютно одинаковую 64-байтную таблицу цветов (4 байта на цвет). И, да – оказывается, её можно перепрограммировать.
Читать полностью »
Этот SVG всегда показывает сегодняшнюю дату
2018-03-06 в 11:45, admin, рубрики: javascript, svg, веб-дизайн, Календарь, Работа с векторной графикой, Работа с иконкамиДля своей странички с контактными данными нужна была стандартная иконка календаря, чтобы люди просматривали мой ежедневник. Такие иконки почти всегда делают наподобие бумажного календаря. Но мне стало интересно, можно ли сделать календарь чуть полезнее, если добавить динамическую иконку.
И вот он, SVG-календарь, который всегда показывает сегодняшнюю дату:
Фоновое изображение сделано на основе иконки Twitter TweMoji Calendar — CC-BY
Поддержка текста в SVG слегка неудобная, так что позвольте объяснить, как я это сделал.
Читать полностью »