Фотошоп иконка пнг: Иконки Photoshop — скачивайте бесплатно в PNG и SVG |

Содержание

с нуля, упрощение, разная степень редкости

Меня зовут Таня Нажимова, я работаю художницей 8 лет. В этой статье расскажу, как рисовать иконки разной сложности.

Раньше я рисовала 1 иконку неделю. Я смотрела туториалы по многу раз, собирала сотни референсов и пробовала различные техники рисования, чтобы учиться и успевать к дедлайну. Сейчас же на 1 иконку у меня уходит от 3 до 12 часов в зависимости от сложности. Для этого я переработала свой пайплайн работ и оптимизировала несколько процессов, благодаря которым смогла быстрее рисовать иконки.

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

Меня долго волновало, как монструозный мастер вроде Beeple со своим 13-летним EveryDays делает картинку за час или Satoshi Matsuura ежедневно выкладывает концепт персонажей. Все просто — они видят главное и отсекают лишнее, не копаются в деталях, а прямо доносят до зрителя 1 цепляющую мысль. Я попробую объяснить, как достичь похожих результатов.

Содержание статьи

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

Разберу 3 основных задания, с которыми обычно сталкивается игровой художник:

Придумать иконку с нуля
Упростить большой объект для иконки
Подготовить набор иконок с нарастающей ценностью

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

Инструменты

Pinterest для сбора референсов
Adobe Photoshop для работы с цветом и формами иконок
3D-редактор Blender или SketchUp для быстрого и более точного создания сложных объектов, как замена построению от руки в Photoshop
Unity для интеграции итогового арта в сцену. Например, художники в CM Games сами выгружают арты в движок. Так можно облегчить работу технических художников или программистов, сэкономить время и избежать недопонимания при передаче ассетов.

Придумать иконку предмета с нуля

Идеи и эскизы

Работа над иконкой, как и над любой артовой задачей, начинается с технического задания. Для меня оно бывает 2 типов — нестандартные мозговыносящие идеи и обычные предметы, типа сундуков. В первом варианте работа идет своим чередом, а вот для выполнения второго есть хинт — добавить фан в виде интересных деталей, неожиданного решения в дизайне или альтернативных идей реализации. Не всегда получается, но чем чаще пробовать, тем ближе к успеху. В итоге можно пройти путь комментариев от лида “чёт мне ниче не нравится” до “я целýю твои мысли”, когда робкие попытки настоять на своей идее переходят в полное доверие коллег к исполнителю.

Задача. Подготовить пак иконок для окна механики выращивания растений:

семечко
саженец
лейка
розовый цветок
лазурный цветок
бутылочка с лазурной эссенцией
бутылочка с розовой эссенцией

Чтобы обозначить главные особенности иконок, делаем мудборд. Это могут быть небольшие зарисовки, желаемые детали, другие иконки, референсы или характеристики, которые помогут придерживаться заданного стиля.

Приступаю к поиску форм, чтобы каждая иконка отражала свою функцию. На этом этапе собираю референсы игровых иконок в Pinterest, а еще дополняю их фотками из Google.

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

Блокинг

Строю иконки в цвете простыми формами, используя Перо и Эллипсы.

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

Многие художники придерживаются правила рисовать на большом полотне, чтобы в конце уменьшить картинку и тем самым скрыть дефекты. Хороший подход, но с иконками есть риск потратить больше времени на гипер-проработку. Поэтому делаю их меньше 512х512px и всегда конвертирую слои в 1 смарт-объект, чтобы видеть иконку в нужной сцене в 100% разрешении, а лучше меньше.

Детализация

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

От детализации 2 цели — добиться объема и материальности. Объём я получаю светом, полусветом, собственной тенью, полутенью и рефлексом.

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

Задаю степень отражения в материалах. На блестящих предметах (металлы, стекло, влажные поверхности) рисую блик с четкими краями, а рефлекс делаю относительно ярким с размытыми краями. Матовые материалы (дерево, ткань) наоборот создаю с размытым бликом, если он будет вообще, и с сероватым рефлексом, близким по тону к собственной тени, так же без четких краев.

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

По таким правилам продолжаю рисовать каждую иконку для садоводства.

Финализация

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

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

При необходимости можно применить падающую тень. Ее можно сделать эффектом, как обводку, но я чаще настраиваю ее в Unity компонентом Shadow. Это позволяет поставить тень именно в тех окнах, где она нужна, и скрыть, если мешает.

Тень другого характера можно нарисовать вектором и увести в альфу с помощью маски. Но соответственно такую тень нельзя отключить и ее будет видно везде.

Оставляю как можно меньше пустого места внутри картинки. Имя и размер при импорте в игру задаю по договоренности с командой. Я обычно делаю 256х256px и в Unity выставляю сжатие поменьше, если требуется. Контролирую этот момент в каждой картинке через параметр Max Size в меню Inspector.

Упростить здание для иконки

Задача. Сделать иконку домика оранжереи, сократить элементы, заменить цвет на более чистый и яркий.
Проблема. Исходный объект хорошо выглядит в 3D-сцене, но не выигрышно смотрится в меню магазина.

Подготовка

Сбор референсов здесь опционален, так как у меня достаточно информации для скетчирования. Поэтому открываю 3D-редактор и размещаю готовую модель здания в нужном ракурсе.

Эскиз

Для упрощения иконки выясняю, что первое выделяется в здании, какие элементы отличают его от других, чтобы обозначить главные детали и убрать второстепенные. Решётка на окнах — мелочь, золотые завитки — можно упростить, цветочки на деревьях — ерунда, кирпичики на фундаменте — сокращаю с 8 до 2. Еще можно оставить по 1 камню вместо 3 по бокам, но мне нравится ритм из оригинала, поэтому оставляю.

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