Как рисовать иконки – Как нарисовать иконки для лендинга в сервисах Canva и Crello
05.12.2019 
Разное
Рисуем четкую иконку дома в 32×32 (аля FatCow) / Habr
Как правильно нарисовать иконку (размер 32х32, часть I)
Хочу предложить вашему вниманию урок по созданию иконок размером 32х32 в программе Adobe Photoshop. Данный урок позволит научиться рисовать иконки не прилагая много усилий – в итоге вы поймете что рисование иконок для интерфейсов не такая уж и сложная задача, нужно лишь запастись терпением, и знать представление о работе в программе Adobe Photoshop.
Итак, начнем! В первую очередь, чтобы иконки не выбивались из размера и были похожи по стилю, нужно сделать шаблон, на основе которого мы будем рисовать серию иконок.
Первым делом запустим программу Adobe Photoshop, далее заходим в меню File > New, либо нажмем сочетание клавиш Ctrl+N, и создаем изображение размером 32х32 пикселя, и разрешением 72 dpi.
Далее, чтобы у наших иконок были четкие неразмытые края, и в дальнейшем они выглядели четко и контрастно, нам нужно настроить отображение сетки (Grid), благодаря которой мы будем ориентироваться при рисовании – ведь изображение состоит из пикселей, соответсвенно нам нужно чтобы у нас отображалась сетка с шагом в один пиксель.
Теперь у нас создан шаблон, на основе которого мы будем создавать наши маленькие шедевры. Так как у нас в иконках подразумевается тень, то это нужно учесть. Размер тени я планирую сделать на 2 пикселя снизу от иконки и по 1-му пикселю с каждой стороны, следовательно, иконка у нас получится 30х30 плюс тень. Для удобства давайте поставим направляющие, которые позволят нам в дальнейшем видеть границы между изображением иконки и тенями, на которые мы отвели соответствующее пространство.
В итоге наш шаблон готов, и теперь можно приступить непосредственно к рисованию иконок.
Иконка Home
Чтобы четко видеть формы, которые мы рисуем, я буду использовать черную заливку. Итак с помощью инструмента Pen Tool (K) рисуем основу для иконки Home.
Далее, чтобы придать нужный цвет и контур идем в меню Layer > Layer Style > Gradient Overlay… и делаем градиентную заливку от цвета eae6c9 до цвета cbcfba
После, чтобы форма была в будущем контрастной мы присвоим этой форме контур. Для этого идем в меню Layer > Layer Style > Stroke… и делаем линию толщиной 1 пиксель и с цветом 868686
Вот что у нас должно получиться
Теперь с помощью того же инструмента Pen Tool (K) рисуем основу для крыши
Теперь придадим ей нужный цвет — идем в меню Layer > Layer Style > Gradient Overlay… и делаем градиентную заливку от цвета b06a00 до цвета 8c4d00.
Получаем вот такой результат
Ну вот, уже кое-какие очертания у нас появились, теперь будем дополнять нашу форму деталями – с помощью инструмента Rectange Tool (U) рисуем трубу
Назначаем на трубу градиентную заливку от цвета eae6c9 до цвета cbcfba, только градиент на этот раз направляем горизонтально
Как и ранее, добавляем контур толщиной 1 пиксель и с цветом 868686
Получаем…
Теперь прячем трубу на задний план, и с помощью инструмента Rectange Tool (U) рисуем еще один элемент крыши
Назначаем градиент от цвета ce9128 до цвета b06a00…
… и добавляем контур толщиной 1 пиксель и с цветом a86600
Смотрим…
Прячем готовый элемент так же как и трубу на задний план, и опять же с помощью инструмента Rectange Tool (U) рисуем дверь
И выполняем уже знакомую нам операцию с градиентом от цвета b06a00 до цвета
… и не забываем про линию… толщина 1 пиксель, цвет a75700
Смотрим результат…
Получился, вполне симпатичный домик, но мы продолжим наполнять нашу иконку деталями – жмем Rectange Tool (U) и рисуем чердачное окно
Ну, и, опять же, градиент – с цвета 2e8ce0 до цвета 7cc6fd
Назначаем контур толщиной в 1 пиксель, и цветом 4381c8
Оцениваем результат…
Наш домик почти готов, но он смотрится слишком плоским – будем добавлять объем с помощью бликов.
Создаем новый слой, и с помощью инструмента Pencil (B) рисуем две линии
Идем в меню Layer > Layer Style > Gradient Overlay… и делаем градиентную заливку от цвета 000000 до цвета ffffff. Обратите внимание на параметр Blend Mode – я поставил значение Screen
Должен получиться следующий результат
Для того чтобы добиться нужного нам эффекта, нужно к слою применить следующие манипуляции
В результате, мы получаем вот такой эффект
Теперь сделаем блик под крышей. Создаем новый слой, и с помощью того же инструмента Pencil (B) рисуем следующее
Так как градиент у нас на этом объекте будет точно такой как и на прошлом, то имеет смысл сэкономить время и просто скопировать стиль со слоя, который мы сделали до этого. Чтобы скопировать стиль, жмем правой кнопкой мыши на слое с первыми бликами и в выпадающем меню выбираем Copy Layer Style. Теперь жмем так же правой кнопкой мыши на слой с бликом под крышей, и в меню выбираем Paste Layer Style. Таким образом мы скопировали стиль с черно-белым градиентом – осталось произвести манипуляции с самим слоем
Результат будет следующим
Продолжаем добавлять блики. Хочу заметить что каждый блик должен быть на отдельном слое, так будет легче манипулировать со стилями… Рисуем еще четыре блика – каждый в отдельном слое
Предлагаю сэкономить время – копируем стиль со слоя, на котором мы делали первый блик. Далее, назначаем на скопированный стиль на каждый из последних четырех слоев. Так же для каждого слоя производим соответствующие манипуляции
В результате у нас должно получиться следующее
На этом этапе домик смотрится завершенным, но я все же позволю себе нанести последние штрихи, подчеркнув фундамент. Для этого с помощью инструмента Pencil (B), выбрав цвет f3f3ea, рисуем следующее
Почти готово. Ниже добавим еще одну линию только с цветом b5b8a3.
Осталось нашему домику добавить тень. Для этого выделяем все слои, и группируем их в одну группу – это будет наш исходник. Далее делаем копию группы, и в этой копии сжимаем все слои в один – идем в меню Layers > Merge Layers (Ctrl + E). Это будет слой к которому мы применим тень, а наш исходник мы сделаем невидимым
Далее идем в меню Layer > Layer Style > Drop Shadow… и назначаем тень со следующими параметрами
И, в итоге получаем готовую к использованию иконку!
Надеюсь, мой урок был вам полезен. Чем кончилось и откуда началось.
habr.com
Как сделать свой первый набор векторных иконок
Статья с поэтапной инструкцией для создания вашего первого набора векторных иконок.
Будет полезно почитать всем дизайнерам, а также желающим понять принцип создания верного набора иконок для использования, а также для продажи в дизайнерских магазинах.
Шаг первый: Тема
Определиться с тематикой вашего будущего сэта иконок, например: новы год, какое-то массовое событие, иконки одежды для интернет- магазина или кухонные приборы.
by Oliver’s Creative Agency
by Justas Galaburda
Но можно и не выбирать общую тему и нарисовать самые распространенные иконки, вроде бургербаттона, иконки письма, и остальные…те образы, которые можно встретить почти на всех сайтах.
by Cole Bemis
Шаг второй: Стиль
На dribbble я создал папку под названием “стили иконок” и собираю туда стили, в которых я хочу нарисовать следующий сэт. Так же я показываю ее клиентам которые не знают, какой стиль им нужен.
Все иконки можно поделить на такие классы: силуэтные или залитые, обводкой по контуру (outline icon), сложные или комплексные (мини иллюстрации). Комплексный стиль иконок может сочетать в себе залитые элементы и обводку.
Шаг третий: Образы
Выбрав тему и стиль, приступаем к отрисовке скетчей; уровень детализации для новичков должен быть максимальным, потом вам будет проще отрисовать все в иллюстраторе.
Опытные чуваки могут вообще не рисовать скетчей, а сделать себе список образов и сразу работать с вариациями.
Если вы рисуете иконки под заказ, рисуйте скетчи, так избежите лишней работы при отрисовке, показав предварительно свои образы заказчику.
Шаг четвертый: Размер
Это вообще самое важное: определиться с минимальным размером.
Для чего это нужно? Если вы хотите, чтобы ваши иконки были с четкими краями, pixel perfect и масштабировались правильно, нужно определиться с размером и толщиной объектов в самом маленьком размере (x1). Рекомендую использовать черные размеры иконки.
Шаг пятый: Процес
Создайте документ со значениями.
Spacing — расстояние между артбордами.
Width и Height — высота и ширина артборда.
Raster Effects — разрешение (ppi) для иконок подойдет 72
Align New Objects… — эта галочка отвечает за привязку точек к пиксельной сетке. Советую включать, но в ходе работы, ее всегда можно выключить.
1. Выберите первый артборд, в нем будет делать все иконки, а готовые будет вставлять на соседние артборды.
2. Создайте квадрат под размер рабочей области.
3. Расставьте направляющие, чтобы облегчить процесс рисования.
4. Используйте Pixel Preview
5. Отмечайте готовые иконки в списке образов, так наглядно можно следить за своим прогрессом.
6. Придерживайтесь советов и прошлой статьи о 5-ти простых правилах создания красивых иконок.
7. Не делайте свой первый сэт слишком большим, можно быстро устать и бросить это дело на половине. Нормальной скоростью будет около 20 иконок в день, потом они могут быстро надоесть…
8. Оформите исходник, и не забудьте навести порядок в слоях, подготовить файл для фотошопа и sketch например.
9. Подготовьте шот для dribbble и behance, оформите пост для социальных сетей. Это лучший пиар для ваших работ и выход на новые заказы. Не забудьте о хэштегах: #design #best #mamalubitmenya #kupiteikonky
Где можно продавать иконки
graphicriver.net — свободная площадка для торговли любым цифровым контентом.
creativemarket.com — что бы создать здесь аккаунт у вас попросят показать аккаунты на других магазинах и свое порфолио.
thenounproject.com — сайт наверно с самой большой базой иконок, они распространяются на выбор: или бесплатно или за единичный платеж, еще есть функция месячной подписки, но я бы не ставил на этот сервис если вы хотите заработать.
icons8.com — ничего не знаю про этот магазин, если у кого то есть опыт, поделитесь им в комментариях.
Лекции на тему создания иконок
Тарас Шипка — «Иконочки: как делать все четко и красиво»
Дмитрий Новиков — «Основы создания иконок в Adobe Illustrator»
Источник: medium
infogra.ru
Рисуем набор иконок в Фотошоп / Фотошоп-мастер
что получится в итоге
В этом уроке мы создадим набор иконок в Фотошопе. Набор иконок должен иметь одинаковый фон и одну тему. Для тренировки мы создадим иконки с солнцем, снежинкой и значком RSS. Давайте начнём.
1. Подготовка рабочей области
Шаг 1
Начнём с создания нового документа размером 350 px на 350 px. Кликните в белом квадрате возле настройки Содержимое фона (Background Contents), чтобы выбрать новый цвет фона рабочей области.
Шаг 2
В диалоговом окне Цветовая палитра (Color Picker) выберите серый цвет фона рабочей области (#e0e0e2).
Шаг 3
Всегда хорошо, когда работа с самого начала структурирована. Создайте группу слоёв и назовите её «Солнце» (Sun). Там будут размещаться все слои, относящиеся к созданию иконки с солнцем.
2. Создаём основу
Шаг 1
С помощью инструмента «Прямоугольник со скруглёнными углами» (Rounded Rectangle Tool ) нарисуйте прямоугольник с размерами 83 px × 64 px и установите радиус 8 px. Для получения более точного результата воспользуйтесь панелью Свойства (Properties). Здесь вы сможете просто ввести точные размеры.
Шаг 2
Удерживайте Shift, а затем нарисуйте ещё один прямоугольник со скруглёнными углами. Эта новая фигура будет добавлена к предыдущей. Установите её размер 36 px × 36 px с радиусом 3 px.
Шаг 3
Нажмите сочетание ctrl+T для трансформирования фигуры, а затем нажмите и перетащите за пределы ограничительной рамки, чтобы повернуть ее на 45 °.
Шаг 4
Убедитесь, что фигура находится в центре предыдущего прямоугольника. В CC 2014 вы можете проверить положение фигуры, перетащив её и привязав к направляющей в центре предыдущей фигуры.
Шаг 5
Нажмите Enter, чтобы сохранить результат. Вы можете обнаружить, что в диалоговом окне подтверждения вас информируют о том, что фигура превратится в обычный контур. Это означает, что вы больше не сможете редактировать её с помощью панели «Свойства». Просто нажмите «Да» (Yes).
Шаг 6
Расположите фигуру как показано на рисунке ниже.
Вот результат в масштабе 100%.
Шаг 7
Нарисуйте аналогичную фигуру поверх предыдущей, которая на 1 px меньше. Вы можете сделать это, дублируя фигуру, а затем изменяя её точки или просто создав новую фигуру.
Шаг 8
Задайте цвет #57adf8.
Шаг 9
Дважды щелкните по фигуре, а затем примените Обводку (Stroke) и Наложение градиента (Gradient Overlay), используя следующие настройки.
Для градиента используйте следующее расположение цветов. Чтобы открыть редактор градиента и изменить настройки градиента, щелкните окно предварительного просмотра градиента.
Шаг 10
Уменьшите уровень заливки (Fill) до 11%. Содержимое слоя будет прозрачным и останется неизменным.
Вот результат.
3. Тень
Шаг 1
Создайте новый слой под основой. Активируйте инструмент «Кисть» (Brush Tool) (В) и затем под иконкой нарисуйте тень.
Шаг 2
По-прежнему используя инструмент «Кисть» (Brush Tool) (В), добавьте более сильную тень прямо под кончиком иконки.
Шаг 3
Зажав CTRL, кликните меньшую по размеру пиктограмму, чтобы выделить меньшую фигуру. Создайте новый слой и используйте белый цвет поверх выделенной области. Убедитесь, что вы используете мягкую кисть Жёсткость (Hardness)-0%.
Шаг 4
Когда закончите, снимите выделение (Ctrl+D) и уменьшите непрозрачность (Opacity) слоя.
Шаг 5
Создайте новый слой и снова выделите меньшую основу иконки. Заполните выделение градиентом от белого к черному. Измените режим наложения (Blend Mode) слоя на Перекрытие (Overlay), а затем уменьшите его непрозрачность (Opacity).
Шаг 6
Добавьте ещё один слой. Создайте большое эллиптическое выделение в нижней части иконки, а затем нажмите Ctrl на слое основы, чтобы пересечь его. Заполните выделение градиентом от белого к черному. Измените режим смешивания (Blend Mode) слоя на «Экран» Screen и уменьшите его непрозрачность (Opacity).
Так выглядит результат в масштабе 100%.
Шаг 7
Зажав Ctrl, кликните по миниатюре слоя-основы. Создайте сверху новый слой, затем выберите Редактирование > Обводка (Edit > Stroke). Установите светло-голубой цвет и ширину (Width) 1 px.
Ниже вы можете видеть разницу до и после добавления обводки внутри иконки.
Шаг 8
Добавьте маску к слою с обводкой. Залейте её чёрным цветом, чтобы спрятать все контуры. Проведите по некоторым участкам линии белым цветом, чтобы показать их. Таким образом, теперь у нас выделен край иконки.
На изображении ниже можно детально рассмотреть выделение края.
Шаг 9
Добавьте корректирующий слой Цветовой баланс (Color Balance) выше иконки. Мы используем его, чтобы изменить цвет фона.
Чтобы упростить управление слоями, давайте изменим имя слоя на Изменение цвета (color changer).
Шаг 10
Залейте маску корректирующего слоя чёрным. Выделите основу иконки, а затем заполните её белым. Таким образом, корректирующий слой влияет только на значок. Перетащите ползунки, чтобы изменить цвет.
Шаг 11
Дублируйте все слои основы иконки и поменяйте параметры в корректирующем слое Цветовой баланс (Color Balance) по отдельности.
4. Добавляем значки к иконкам
Шаг 1
Для нашей первой иконки мы добавим значок солнца. Начните с рисования желтого круга.
Шаг 2
Примените стили слоя Внутренняя тень (Inner Shadow) и Внутреннее свечение (Inner Glow), используя следующие настройки. Используйте цвет #7b6708 и установите оба режима наложения Умножение (Multiply).
Шаг 3
Используйте более светлый жёлтый цвет в центре солнца.
Шаг 4
Добавьте эллипс более яркого жёлтого цвета в верхнюю часть солнца.
Шаг 5
Нарисуйте тонкую, светлую фигуру на верхней правой стороне солнца, чтобы выделить её. Удалите лишнее с помощью мягкого ластика, чтобы придать естественности.
Шаг 6
Дальше нужно добавить солнцу сияние. Начните с рисования двух желтых треугольников, как показано ниже. Поместите их за солнцем.
Шаг 7
Выделите обе векторные фигуры и затем продублируйте их: Ctrl+C, а затем Ctrl+V. Поверните новые фигуры на 45 °.
Шаг 8
Продолжайте дублировать и вращать фигуры, пока у нас не будет достаточно лучей.
Шаг 9
Примените Внутреннюю тень (Inner Shadow) с цветом # b48f0b и Внешнее свечение (Outer Glow) с цветом # f9dc7e.
Шаг 10
Скройте солнце, нажав значок глаза возле слоя. Нарисуйте больше жёлтых треугольников, как показано ниже.
Добавьте круговую фигуру в центр треугольников и установите режим траектории Вычесть переднюю фигуру (Subtract).
Мы закончили, поэтому давайте вернём вспышку и формы солнца.
Шаг 12
Чтобы получить реалистичное солнце, нам нужно нарисовать размытую жёлтую круглую форму за солнцем. Вы можете сделать это вручную, используя мягкую кисть, или сначала нарисуйте круг, а затем смягчите его, используя фильтр Размытие по Гауссу (Gaussian Blur).
Шаг 13
Дважды щёлкните слой группы значков, чтобы добавить стиль слоя. Добавьте Внутреннее свечение (Inner Glow) с черным цветом и установите режим смешивания — Умножение (Multiply).
Таким образом мы добавили к иконке тёмный силуэт.
Шаг 14
Далее мы создадим символ RSS в иконке. Начните с рисования круглой фигуры поверх основы.
Шаг 15
Продублируйте и вставьте контур (Ctrl+C и Ctrl+V). Нажмите Ctrl+T и уменьшите фигуру. Установите в операциях с контуром Вычесть переднюю фигуру (Subtract Front Shape).
Шаг 16
Дублируйте контур и уменьшите его. Установите режим «Объединить фигуры» (Combine Shapes).
Шаг 17
Повторяйте предыдущие шаги, пока не получите следующую фигуру.
Шаг 18
Добавьте два прямоугольника и установите их режим «Вычесть переднюю фигуру» (Subtract Front Shape). Чтобы правильно их расположить, смотрите изображение ниже.
Шаг 19
Дважды кликните на слое «Символ RSS» и настройте Внутреннее свечение (Inner Glow), Наложение градиента (Gradient Overlay), и Тень (Drop Shadow).
Вот результат в масштабе 100%.
Шаг 20
Затем мы добавим символ снежинки в третий значок. Активируйте инструмент «Произвольная фигура» (Custom Shape Tool) и загрузите набор векторных фигур природы из панели параметров.
Появится диалоговое окно с предупреждением о замене или добавлении темы «Природа» в уже существующие фигуры. Вы можете нажать OK.
Шаг 21
Выберите фигуру снежинки (Snowflake) в выпадающем списке.
Шаг 22
Кликните и нарисуйте фигуру снежинки поверх иконки.
Это результат в масштабе 100%.
Заключение
Как видно из урока, в создании набора иконок нет ничего трудного. Прежде чем приступить к рисованию символа, вам нужно подготовить общую тему. В данном случае значок помещается в прямоугольник с закругленными углами и треугольник. Надеюсь, вам понравился урок, и вы узнали что-то новое.
Автор урока: Mohammad Jeprie
photoshop-master.ru
Как я рисую иконки в Photoshop (PSD бесплатно)
Статья обновлена:
Автор: Мясоедов АнатолийИконки — один из самых распространенных в веб дизайне элементов. Сегодня я расскажу и покажу как я рисую иконки от задумки до готовой работы в Photoshop. К посту прикладываю исходник файла в PSD что бы вы могли посмотреть его «изнутри».
Каждый дизайнер для себя определяет формат работы. Кто то сразу рисует на чистовую, кто то предварительно делает эскизы и наброски в редакторе. Мне всегда было проще сначала сделать детальный набросок от руки карандашом, и только потом в чистовую отрисовывать в графическом редакторе. Нужно ли делать детальный набросок — это большой вопрос. Но в моем случае это скорее привычка, чем необходимость. Нужно ли вообще делать набросок — однозначно да, и вот почему. Набросок иконки достаточно подробно отражает идею, что позволяет легко согласовать внешний вид иконки с заказчиком заранее. А это значит, что переделок будет значительно меньше. Кроме того я как представитель «старой школы» считаю что любой дизайнер должен владеть карандашом =)
Так же каждый дизайнер для себя выбирает тот графический редактор в котором ему будет удобнее работать. Сейчас в веб дизайне господствует минимализм: пиктограммы и плашечный флат пришли на смену объему. Но принципы остались прежние.
Я всегда рисую иконки в векторе, что бы дать максимум возможностей своим заказчикам. Только вектор в отличии от растра дает возможность масштабировать иконку, в 2-ва клика менять цвет, корректировать форму и т.д. Конечно в Illustrator векторные инструменты реализованы лучше и более полные, но не так давно и Photoshop значительно расширил свои возможности работы с векторными формами (с 2015 года из Photoshop можно генерировать даже SVG!). Для меня это удобно: рисую иконки сразу в теле страницы сайта — у заказчика есть все исходники и при этом это не 100500 файлов, а всего 1.
Для наглядности процесса я записала видео как я рисую иконки в Photoshop. Скорость увеличенна в 20 раз.
Спасибо за прочтение
Вы можете сказать «Спасибо» 2 простыми способами:
Оцените статью:
Загрузка…- Напишите что именно не понравилось, я не буду публиковать ваш комментарий, но обязательно добавлю информацию: Может мало фото? Может нет той информации, которую вы искали?
site2max.ru
Как рисовать перекрашиваемые иконки / Фестиваль 404 corporate blog / Habr
Что такое перекрашиваемая иконка? Это такая картинка, которой легко поменять цвет, то есть её перекрасить. Есть несколько способов этого добиться. Я расскажу о простой технологии, которую мы использовали когда делали проект Иконза (по такой же технологии сделаны машинки для Автокадабры). По сути, это веб-приложение, которое позволяет пользователю менять цвет иконок, а потом генерирует необходимые графические файлы.Например, мы хотим нарисовать перекрашиваемую иконку фолдера. Берем любимый векторный редактор и рисуем.
Как сделать так, чтобы эту картинку можно было перекрашивать? Секрет в том, что картинка состоит из двух растровых файлов — полупрозрачные блики/тени сверху и цветная подложка снизу. Получается, что цветная основа «просвечивает» через полупрозрачную маску. Вот как должна выглядеть маска:
Но как нарисовать такую маску? Очень просто. Нужно взять цветную основу, а потом нарисовать сверху блики и тени.
Засветляющая маска (показана на черном фоне для наглядности), затемняющая маска, цветная подложка
В засветляющей маске используется только белый цвет с разной прозрачностью, а в затемняющей маске — только черный. Цвет подложки значения не имеет — выбирайте любой, он все-равно будет меняться. Если вы рисуете несколько иконок, то лучше выбирать единый «тестовый» цвет.
Зачем нужны и засветляющий и затемняющий слои одновременно? Мы не знаем какой цвет выберет пользователь, а иконка должна всегда выглядеть хорошо. Вот, например, нарисовали мы только засветляющий слой, а пользователь взял и выбрал белый цвет для подложки. Катастрофа! Получится плоская абсолютно белая иконка. Такая же история, но наоборот, с черным цветом. А если есть темный и светлый слои, то результат неплохой:
Иконки с абсолютно белой и черной подложками
Лучше, конечно, выбирать почти белый (светло-серый) и почти черный (темно-серый) — тогда иконка будет более объемной и симпатичной. Но и при крайних значениях получается неплохо.
Так как затемняющий и засветляющий слои находятся в одном файле, то есть опасность, что ваша иконка будет выглядеть грязной — белый накладывается на черный и получается серый, который не пропускает «цветной» цвет подложки. Это нужно учитывать при рисовании и не допускать множественного перекрытия слоев. Вот порядок слоев иконки для Иконзы:
- Тень от половинки папки. В светлых слоях через маски сделана «дырка» по форме этой тени. (Цвет черный, непрозрачность 10%)
- Нижний затемняющий объемный слой. Он должен быть обязательно выше обводки и перекрывать её. Тогда обводка становится темнее к низу. (Черный, 40%)
- Блик на половине папки. (Белый, 40%)
- Засветляющий объемный слой. Размытие краев (feather 3 pt). (Белый, 65%)
- Обводка иконки. Очень важная штука которая гарантирует, что у любого цвета будет обводка. (Серый, 50%)
- Светлая обводка по периметру. Делает иконку более четкой и живой. (Белый, 25%)
- Верхний засветляющий объемный слой. В паре с затемняющим обозначают «освещение» иконки сверху. (Белый, 40%)
- Тень от иконки (Черный, 25%)
- Цветная подложка. (Любой цвет, 100%)
Если вам мало этой занудной схемы, то можно скачать исходник в формате AI.
Далее нужно убрать из иконки подложку (поместить её рядом) и растрировать векторный файл в фотошопе. Мы получили те самые волшебные картинки, которые секретный механизм Иконзы склеивает в единый файл простым сложением.
habr.com
Иконка стиля — Дизайн-кабак
Прежде всего, хотелось бы уточнить, что же отличает иконки от просто иллюстраций, хотя момент этот спорный и перестал иметь такое важное значение с развитием технологий.
Первые иконки-пиктограммы стали служить визуальными якорями, перенесенными из реального мира в компьютерный интерфейс. Человеку было гораздо удобнее и понятнее пользоваться знакомыми метафорами в суровом мире команд рабочей строки.
Xerox Alto icons. 1973Удачно подобранная иконка хорошо заменяла собой слово или функцию и освобождала место для рабочего пространства на небольших экранах.
На протяжении всего пути развития технологий, графический интерфейс был все время в рамках технических ограничений. Цветность экранов, плотность пикселей, а в дальнейшем —доступные размеры для картинок и даже перспективы в ОС и других интерфейсах.
Иконка — это небольшая иллюстрация, сделанная в рамках технических ограничений.
Программистам удобно использовать иконки фиксированных размеров — это уменьшает количество работы и позволяет работать шаблонами.
Для себя я вывел такое определение: иконка — это небольшая иллюстрация, сделанная в рамках технических ограничений, будь-то: размер, стиль линии, цвет или перспектива. Ограничения могут быть как не зависящими от дизайнера, так и придумываются ним самим.
Как верно меня поправил Михаил Мирошников, чаще всего иконки — это несколько объектов. Мои ограничения — это, в первую очередь, визуальные принципы, связующие эти мини-иллюстрации в группу, а не ограничения к «иконкам вообще». Даже, к примеру, «небольшой размер» является требованием исключительно из-за необходимости размещать их рядом.
Чтобы нарисовать иконку, нужно уметь рисовать от руки (хотя и не обязательно, но базовое понимание все таки нужно), хорошо владеть современными инструментами CG и видеть скрытые на первый взгляд связи между предметами и явлениями.
Denis Sazhin. iconka.ruРисовать — это первое во что бросаются дизайнеры. Учатся технике, стилизации, находят форму, набивают руку и, в конце концов, обретают свой собственный неповторимый стиль.
Как мне кажется, научиться рисовать яркие объемные иконки проще, чем сделать очередной скучный «домик» уникальным шедевром. Передать смысл минимальной графикой, убрав всю лишнюю шелуху.
Twitter. Home iconПридумывать иконки со смыслом, глубоко отражающим суть — этому можно учиться всю жизнь.
Очень интересно находить и показывать связи между предметами, на первый взгляд совершенно не похожими между собой. Это требует недюжинной эрудиции и широкого кругозора.
Придумывать иконки со смыслом, глубоко отражающим суть — этому можно учиться всю жизнь.
Попробую немного разобраться в стилизации и техниках, а про умение находить визуальные метафоры напишу как нибудь в следующий раз.
Стилизация — обобщение и упрощение изображаемых фигур по рисунку и цвету, произведение фигур в удобную для использования форму. Стилизация применяется как средство дизайна для усиления декоративности.
Supratim Nayak. Стилизация под технологическое скругление иконок в iOSЧасто форма иконки вызвана техническими ограничениями, избежать которых нельзя, но можно обыграть и использовать в декоративных целях.
Некоторые дизайнеры придумывают ограничения самостоятельно, чтобы добиться нужного визуального эффекта или подстегнуть фантазию.
designpub.ru
10 ошибок в дизайне иконок
10 ошибок в дизайне иконок
Автор: Денис Кортунов
12 февраля 2008
Критиковать чужую работу всегда намного проще, чем создать что-то клевое самому. Но если подойти к критике системно, сделать нумерованный список, подготовить иллюстрации, то это будет уже целый анализ! На мой взгляд, в дизайне иконок сейчас переходный период. Разрешение экранов становится все больше, а следовательно и иконки увеличиваются. Но все еще актуальны иконки размером 16×16 и даже меньше. Итак, вот главные ошибки в дизайне иконок…
#1 Недостаточная различимость иконок
Иногда в рамках одного набора встречаются слишком похожие друг на друга иконки и очень трудно понять, «что есть что». Если не читать подписи, то можно очень легко ошибиться и перепутать значки.
Иконки из раздела Utilities в Mac OS X. Я постоянно путаю их и запускаю не то приложение.
Проблема усугубляется, если включен мелкий размер отображения значков.
#2 Слишком много элементов в одной иконке
Чем иконка проще и лаконичнее, тем лучше. Очень желательно, чтобы количество объектов в одной иконке было бы минимальным.
Но дизайнеры компании Microsoft, вдохновленные новым форматом иконок в операционной системе Windows Vista, решили не мелочиться и нарисовали «на все деньги»:
Каждая иконка являет нам мини-историю с закрученным сюжетом. Проблема только в том, что в мелких размерах совершенно нельзя понять что нарисовано. Да и в крупном размере воспринять иконку не просто.
#3 Лишние элементы
Иконка должна легко «читаться». Чем меньше на ней элементов, тем лучше. Желательно, чтобы значимым было все изображение, а не только его часть. Поэтому необходимо обращать внимание на контекст, в котором будут использоваться иконки.
Возьмем для примера набор иконок для работы с базой данных:
На первый взгляд все вполне прилично.
Но если в приложении (или в отдельном тулбаре) все действия происходят только с базой данных, то мы можем (и должны) убрать незначимую часть:
Смысл не потерян, но значки стали более различимыми.
Вот реальный пример использования лишних элементов в иконках BeOS 5:
Галочки тут совершенно не нужны. Кстати, почему они красные?
#4 Нет стилевого единства набора
Именно общий стиль объединяет несколько иконок в набор. Объединяющими факторами могут быть: цветовая гамма, перспектива, размер, техника рисования или же комбинация этих свойств. Дизайнер может держать эти правила в голове, если иконок в наборе немного. Если же иконок много и над ними работают разные дизайнеры (например, иконки для операционной системы), создаются специальные инструкции. В этих инструкциях подробно описывают, как нарисовать иконку, чтобы она гармонично вписалась в набор.
Буйство стилей в файле shell32.dll из Windows XP. Именно этот набор иконок предлагается по умолчанию пользователю, который хочет сменить иконку.
#5 Ненужная перспектива и тени в мелких иконках
Прогресс не стоит на месте: в интерфейсах появилась возможность использовать полупрозрачность, пропали ограничения на количество цветов, плюс появилась мода на трехмерность. Но пошло ли это не пользу? Не всегда! Особенно, если речь идет о иконках размером 16×16 и меньше.
Для примера возьмем менеджер приложений из GNOME 2.2.0 (RedHat 9):
Перcпектива в иконках такого маленького размера совершенно не нужна и даже вредна.
А вот менеджер приложений из Windows XP:
По стандарту иконке в Windows XP положена двухпиксельная черная тень. Но в размере 16х16 тень получается слишком большой и выглядит «грязно». Особенно неудачно выглядит иконка Address book.
#6 Слишком оригинальные метафоры
Выбор того, что будет изображено на иконке — всегда компромис между узнаваемостью и оригинальностью. Перед тем, как придумать метафору для иконки, очень желательно посмотреть, как это сделано в других продуктах. Возможно, лучшим решением будет не придумывать что-то оригинальное, а сделать как везде.
Примером такой излишней оригинальности может служить иконка корзины в OS/2 Warp 4, которая не корзина вовсе, а шредер.
Еще одной проблемой этого шредера является то, что нет общеузнаваемого «обычного» уничтожителя бумаг. Использованное изображение слишком похоже на принтер с осьминогом внутри. Плюс, совершенно непонятно, как рисовать полную корзину.
#7 Нет учета национальных и социальных особенностей
Необходимо всегда учитывать, кто и в каких условиях будет пользоваться вашей иконкой. Важным аспектом являются национальные особенности. Культурные традиции, окружающие объекты, жесты — всё это может очень сильно отличаться в другой стране.
Предположим, нам нужно нарисовать иконку приложения для работы с электронной почтой. Логично использовать метафоры реальной бумажной почты. Например, почтовый ящик.
Изображения позаимствованы из статьи про почтовые ящики в Wikipedia.
Ответ можно найти в руководстве по созданию иконок для Mac OS X: используйте универсальные и легко узнаваемые изображения. Не фокусируйтесь на второстепенных аспектах элементов. Пример: для иконки электронной почты предпочтительнее будет использовать изображение почтовой марки, чем трудноузнаваемого почтового ящика.
Идея с маркой отличная, но изображение орла — крайне спорный момент. Хороших вестей такая птичка не принесет.
Однако, нужно учитывать не только национальные особенности. Позволю себе вспомнить один курьезный случай. Была нужна иконка фильтра данных, метафорой для которого зачастую является воронка, её и нарисовали:
Ответ клиента был таков: «Мне не совсем понятно, почему вы нарисовали иконку фильтра в виде бокала для мартини!».
#8 Изображения реальных элементов интерфейса в иконках
Руководство по созданию иконок для Mac OS X предостерегает нас: не используйте в иконках элементы реального интерфейса. Но все напрасно! Например, можно увидеть вот такую иконку:
Хочешь переключить radiobutton, а нажимается вся иконка!
Или вот интересный пример из интерфейса браузера OmniWeb:
Обратите внимание на кнопки «Previous» и «Next». Редкий вид кнопок с подписями снизу! Ой! А они и не кнопки вовсе, а иконки!
#9 Текст внутри иконок
Эта ошибка чаще всего бывает в иконках приложений. Действительно, первое что приходит в голову — сделать иконку приложения из логотипа приложения. Чем же плох текст внутри иконки? Во-первых, он жестко привязан к языку и локализация затруднена. Во-вторых, если иконка мелкая, текст невозможно прочитать. В-третьих, в случае иконки приложения этот текст продублирован в виде названия приложения.
#10 Мимо пикселей
Как правило, эта проблема появляется, если рисовать иконки в векторном редакторе. В большом размере все выглядит красиво и четко. Но в реальности иконки мелкие и при растеризации анти-алиасинг «размывает» границы объектов.
Связанные записи
turbomilk.ru
Leave a Comment