Как нарисовать пиктограмму где. Как рисовать нормальные иконки

• Tutorial

Как правильно нарисовать иконку (размер 32х32, часть I)

Хочу предложить вашему вниманию урок по созданию иконок размером 32х32 в программе Adobe Photoshop. Данный урок позволит научиться рисовать иконки не прилагая много усилий – в итоге вы поймете что рисование иконок для интерфейсов не такая уж и сложная задача, нужно лишь запастись терпением, и знать представление о работе в программе Adobe Photoshop.

Итак, начнем! В первую очередь, чтобы иконки не выбивались из размера и были похожи по стилю, нужно сделать шаблон, на основе которого мы будем рисовать серию иконок.

Первым делом запустим программу Adobe Photoshop, далее заходим в меню File > New, либо нажмем сочетание клавиш Ctrl+N, и создаем изображение размером 32х32 пикселя, и разрешением 72 dpi.


Далее, чтобы у наших иконок были четкие неразмытые края, и в дальнейшем они выглядели четко и контрастно, нам нужно настроить отображение сетки (Grid), благодаря которой мы будем ориентироваться при рисовании – ведь изображение состоит из пикселей, соответсвенно нам нужно чтобы у нас отображалась сетка с шагом в один пиксель.
Заходим в меню Edit > Preferences > Guides, Grid and Slices, либо жмем на клавиатуре сочетание Ctrl +K и производим настройки как показано на изображении.


Теперь у нас создан шаблон, на основе которого мы будем создавать наши маленькие шедевры. Так как у нас в иконках подразумевается тень, то это нужно учесть. Размер тени я планирую сделать на 2 пикселя снизу от иконки и по 1-му пикселю с каждой стороны, следовательно, иконка у нас получится 30х30 плюс тень. Для удобства давайте поставим направляющие, которые позволят нам в дальнейшем видеть границы между изображением иконки и тенями, на которые мы отвели соответствующее пространство.

В итоге наш шаблон готов, и теперь можно приступить непосредственно к рисованию иконок.

Иконка Home
Чтобы четко видеть формы, которые мы рисуем, я буду использовать черную заливку. Итак с помощью инструмента Pen Tool (K) рисуем основу для иконки Home.

Далее, чтобы придать нужный цвет и контур идем в меню Layer > Layer Style > 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 до цвета cd9128

… и не забываем про линию… толщина 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… и назначаем тень со следующими параметрами

И, в итоге получаем готовую к использованию иконку!

Надеюсь, мой урок был вам полезен.

Как нарисовать иконки так, чтобы они были чёткими? April 26th, 2011

Столкнулся я недавно с одной интересной задачкой. Мне потребовалось нарисовать простенькие, но красивые иконки-пиктограммы к одному приложению. С самим рисованием проблем не было, только вот когда я сжимал изображения до нужного размера, я вдруг заметил, что все линии стали какими-то расплывчатыми.

Как именно рисовать - это тема выходит за рамки данной статьи, мы с вами разберём лишь саму технику постобработки пиктограмм. Давайте сразу же для наглядности нарисуем простенькие фигурки. Будем рисовать их по-старинке, с помощью растра.

Итак, вот готовая картинка размером 114х114 пикселей.

Вроде выглядит неплохо, но давайте изменим размер на 48х48 пикселей.

Разница особо видна будет если поставить готовую иконку рядом с другими, нарисованными профессионалами. Как можно увеличить резкость? Если увеличим масштаб картинки, то мы увидим, что боковые линии немного размыты. Причина этого в том, что фотошоп - простая бездушная программа, которая изменяет размер картинки математически. Например, граница проходит между двумя пикселями. Мы изменяем размер в двое, Фотошоп делит размеры на два и ставит новую границу в аккурат на половине расстояния. Если это расстояние на два не делится, то граница попадает в межпиксельное пространство. Программа вычисляет "средние" тона и распределяет их между соседними пикселями. На картинке видно, что я имею ввиду:

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

1) размер исходного изображения. В некоторых мануалах даются подробные инструкции по рисованию изображений. Например, для Андроида рекомендуют брать исходный холст размером 864х864 пикселя. Эта рекомендация исходит из того, что итоговая иконка должна быть 72х72, а это как раз ровно в 12 раз меньше, чем исходный холст. Таким образом, если рисовать изображение правильно, то после изменения размера, корректировки будут минимальными

2) рисуем только в Shape! Для этого выбираем фигурку и жмём эту кнопку:

и так получается Vector Mask. Если нужно сделать более сложную пиктограмму, то рисуем Path с помощью "ручки" (Pen Tool), выделяем получившуюся фигуру, делаем клик на правой мышке и выбираем Create Vector Mask

Нужно в итоге получить одну монолитную фигуру (Shape). Посему, если её нельзя выполнить за один подход, то нужно нарисовать несколько path-ов на одном слое , выделить их с помощью Path Selection Tool, которая выделяет всю фигуру целиком,

И объединить всё, выбрав правильный способ (видете 4 иконки слева от кнопки?) и нажав на кнопку Combine.

Если мы всё сделали правильно, то мы должны получить что-то вроде этого:

Почему именно Shape? А всё очень просто. Нам в любом случае нужно будет делать корректировку их размеров, а таким образом это сделать гораздо быстрее. Конечно можно использовать перевести в растр и сделать Ctrl + T (Transform), но в таком случае края вашей фигуры не будут ровными, так как при изменении пропорций фотошоп будет играть с крайними пикселями пропорционально. Как вы помните, вектор не зависит от размеров холста, его пропорции всегда будут одними и теми же.

3) используйте по максимуму только стили наложения (Layer Style). Это удобно тем, что вы можете двигать слой, а его эффекты будут двигаться вместе с ним (тени, градиенты, обрисовка...)

Итак, вернёмся к нашей иконке. Мы удалили всё и нарисовали квадратики и стрелки заново, используя Shape. Далее, мы сжали картинку до 48 пикселей. После чего мы сделали максимальный масштаб 3200%, чтобы был виден каждый пиксель, и вручную подгоняем все края, используютя этот инструмент:

С помощью этого инструмента мы выделяем нужные точки в path-e и двигаем их в нужную сторону, нажимая на "стрелочки" на клавиатуре, пока линия не сольётся с гранью между двумя соседними пикселями. Сравните изображения внизу, как было до корректировки, и стало после:

Встаёт резонный вопрос: а как же быть с круглыми частями? В данном случае, идеала достичь не удастся, но можно хотябы свести к минимуму появление отдельных пикселей. Например, окружность - это круглый path, образованный 4 точками. Так вот нужно хотя бы эти опорные точки разместить на границе пикселей так, что бы направляющие шли как раз по этой границе.

Ну теперь можно сравнить как было до и после в натуральную величину:

Если присмотреться, то разница видна. А если уж загрузить иконку на реальное устройство, то будет видно и подавно! Теперь понимаете, что работа дизайнера - это не так то уж и легко! Нужно не только придумать, но и выполнить работу качественно. Я лично уже запарился размеры подгонять под свои несколько десятков иконок.... Но результат стоит затраченных усилий!

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

Опытные чуваки могут вообще не рисовать скетчей, а сделать себе список образов и сразу работать с вариациями.

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

Шаг четвертый: Размер

Это вообще самое важное: определиться с минимальным размером.
Для чего это нужно? Если вы хотите, чтобы ваши иконки были с четкими краями, pixel perfect и масштабировались правильно, нужно определиться с размером и толщиной объектов в самом маленьком размере (x1). Рекомендую использовать четные размеры иконки.

Шаг пятый: Процес

Создайте документ со значениями

Где Spacing - расстояние между артбордами.

Width и Height - высота и ширина артборда.

Raster Effects - разрешение (ppi) для иконок подойдет 72

Align New Objects… - эта галочка отвечает за привязку точек к пиксельной сетке. Советую включать, но в ходе работы, ее всегда можно выключить.

1. Выберите первый артборд, в нем будет делать все иконки, а готовые будет вставлять на соседние артборды.
2. Создайте квадрат под размер рабочей области.
3. Расставьте направляющие, чтобы облегчить процесс рисования.
4. Используйте Pixel Preview
5. Отмечайте готовые иконки в списке образов, так наглядно можно следить за своим прогрессом.
6. Придерживайтесь советов и прошлой статьи о .
7. Не делайте свой первый сэт слишком большим, можно быстро устать и бросить это дело на половине. Нормальной скоростью будет около 20 иконок в день, потом они могут быстро надоесть…
8. Оформите исходник, и не забудьте навести порядок в слоях, подготовить файл для фотошопа и sketch например.
9. Подготовьте шот для dribbble и behance, оформите пост для социальных сетей. Это лучший пиар для ваших работ и выход на новые заказы. Не забудьте о хэштегах: #design #best #mamalubitmenya #kupiteikonky

Где можно продавать:

graphicriver.net  - свободная площадка для торговли любым цифровым контентом.

creativemarket.com  - что бы создать здесь аккаунт у вас попросят показать аккаунты на других магазинах и свое порфолио.

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

icons8.com  - ничего не знаю про этот магазин, если у кого то есть опыт, поделитесь им в комментариях.

От Оллина Боэра Боана, а теперь публикуем перевод его статьи, присланный нашим читателем CrossFire.

Дизайнерам часто приходится создавать небольшие пикселизованные иконки для панелей инструментов, списков, справочной документации, или просто в качестве уменьшенных вариантов полноразмерных, более реалистичных иконок.

Речь о значках вроде этих:

Чаще всего в таком стиле создают пиктограммы размером 32px (которые и рассматриваются с статье), однако в некоторых случаях иконки в 16px, 24px, 48px, или даже 128px рисуются схожим образом.

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

Стиль

Такой стиль повсеместно используется при создании иконок рассматриваемого размера, то есть почти везде, где место ограничено, а потому четкость является ключевым моментом.

Давайте рассмотрим несколько примеров:

Ну и мой набор по вселенной Legend of Zelda, созданный специально для настоящей публикации

Основываясь на этих, и многих других примерах (в Интернете полным-полно замечательных образцов), мы можем выделить черты, присущие хорошей иконке в 32 пиксела.

Вот их краткий список:

Организуйте свое рабочее пространство

Правильная организация пространства позволяет создавать мелкие иконки быстрее и проще. Я рекомендую воспользоваться моим опытом, и настроить себе нечто вроде такого:

Выделю несколько моментов такой организации:

• Пиктограммы рисуются в удвоенном разрешении, используя сетку в 2px. Это дает уверенность, что получившаяся иконка будет сглаженной, без зазубрин и лесенок, позволяет не беспокоиться о правильности заливки некоторых пикселов. Можно работать несколько небрежно в укрупненной версии, получая отличный результат в целевом разрешении.
• Следующий прием, о котором я хотел рассказать - использование холста с широкими отступами, и меньшим, отключаемым темным квадратом, ограничивающим иконку. Хитрость появилась потому, что пикселы контура часто «прилипают» к краям холста, а используя дополнительные отступы мы получаем представление о том, как пиктограмма будет выглядеть при использовании. Темный квадрат - нечто такое, что можно отобразить при рисовании контура, чтобы убедиться что размер иконки не превышает намеченного.
• Я использую отдельное, неотвлекающее окно, показывающее уменьшенную на 50% копию рисуемой иконки. Создать такое можно с помощью [ View>New View ] в GIMP, или [ Window>Arrange>New Window of… ] в Photoshop. Данный прием избавляет от необходимости каждый раз уменьшать масштаб, чтобы посмотреть, что получилось после редактирования.

Распространенные ошибки

Из-за того, что такая техника рисования широко распространена, я часто вижу одни и те же ошибки, всплывающие многократно.

Вот несколько советов, как их избежать:

• Либо забывают нарисовать тень, либо делают ее слишком темной. Это одна из самых распространенных ошибок. Тени - необходимая деталь, делающая иконку как бы прикрепленной к фону, и если эту деталь упустить, она выглядит наклеенной на подложку. С другой стороны добавление слишком темной тени, так же ухудшает результат. Иконка должна быть крайне прозрачной, при этом иметь непрозрачные области в местах прилегания к подложке. Плохой идеей является попытка сделать одну тень на весь набор иконок, так не получится.
• Непрозрачные края. Из-за них иконка плохо смотрится на подложках разных цветов. Никогда не делайте таких, за исключением случаев, когда необходимо получить границу темнее внутреннего цвета.
• Не выставляйте источник света по центру иконки, добавляя ненужные круговые градиенты, и т.д. Затенение иконок должно быть крайне простым в 90% случаев. Некоторые материалы, такие как металл, требуют более детальной проработки, однако большинство других могут быть изображены с использованием лишь линейных градиентов, и границ со светлой внутренней тенью.
• Уродливые, блеклые цвета. Я постоянно замечаю такие, особенно когда они находятся на границе, сугубо нуждающейся в насыщенном цвете. Привлекательность иконок в 32 пиксела зиждится на ярких, соблазнительных цветах - внимательно отнеситесь к выбору. В следующей статье я надеюсь подробнее описать приемы, позволяющие получить красивые, живые цвета - а пока просто запомните, что «мягкий» свет и перекрытие - ваши лучшие друзья.
• Замыленные или ступенчатые края. Лучшее решение, позволяющее избежать этой ошибки - рисовать иконку в двойном размере, используя сетку в 2px, а потом объединять слои и сжимать ее до целевого разрешения. Выравнивание деталей по сетке - крайне важно для создания качественной пиктограммы, не поленитесь потратить время на это.

Процесс создания иконки в реальном времени.

Разработчики программного обеспечения, стараясь не отставать от технологического прогресса, придумали огромное количество разнообразных, мощных графических редакторов для разных направлений графики, на разные вкусы, для разных операционных систем, чего только душе дизайнера или фотографа
не угодно. Про преимущества PhotoShop, CorelDRAW и других, из списка тяжеловесов, даже и говорить не стоит, про них и так все знают. В них можно делать очень красивые значки, яркие красочные и реалистичные такие, которые востребованы в современном обществе. А что же делать тем, кто предпочитает пиксельную графику и дизайн в стиле ретро в интерфейсе своей операционной системы?! Вот тут я и озадачился. Лично мне очень не удобно вырисовывать картинку по пикселю в этих монстрах. Мне потребовался редактор, простой понятный и удобный, пусть и не такой мощный, но чтобы он умел делать всё, что необходимо для рисования пиксельных иконок и ничего кроме этого. Что же тогда делать...

В этой области тоже очень большой выбор программ, на любые вкусы. Я остановился на одной из них, которая мне очень полюбилась, интерфейс которой сделан, как бы под меня (спасибо огромное разработчикам!). Речь пойдёт о IconLover.

Что умеет IconLover?

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

Старые пиксельные ярлыки для рабочего стола были в основном 16 цветными, размером 16х16 или 32х32 пикселей. Наверное, в те времена других возможностей просто не было, чтобы нарисовать их хотя бы 256 цветными. И я тоже, следуя старой школе, рисую в 32х32/16 цветов формате. Но если понадобится, то всегда можно к нарисованному значку добавить новый, с другим размером или цветностью. Наш редактор это позволяет.

По умолчанию нарисованный значок сохранится в ico расширении, но его можно очень легко экспортировать в другие форматы, в png, xpm, jpeg и многие другие. Нарисованную миниатюру я сохраняю их в ico формате для Windows (может пригодятся), а для Linux конвертирую в png.

Наш редактор позволяет найти все значки на компьютере и сделать удобную библиотеку из них, а потом редактировать и извлекать из неё понравившиеся картинки.

Ещё один важный плюс редактора - создание ярлыков программ из картинок или фотографий. Сейчас покажу пример:

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

Что ещё в нём есть интересного? Можно создавать анимированные значки, но это мне пока не требуется.

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

Постепенно буду выкладывать тематические подборки иконок в следующих статьях. А первыми в списке будут миниатюры, посвящённые