Всем привет)
И сегодня мы с вами возьмем и нарисуем иконки в стиле флэт в фотошопе, ну конечно слово нарисуем вас может испугать, но не все так страшно, мы будем использовать готовые формы и деформировать их под свои нужды.
На этот урок меня вдохновил мой телефон, некоторые приложения обновились и сменили свои иконки и я залюбовался их простотой и лаконичностью, а так же элегантных (белый это элегантный) цветовых решений.
Урок очень легкий, как раз подойдет для начинания и понимания в целом механики работы фотошопа. И так открываем фш и начинаем рисовать.
И так фотошоп встречает вас приветственным экраном и далее нам чтобы продвинутся потребуется все таки создать файл, в верхнем левом углу нажимаем file - new и вашему вниманию предстанет вот такая картина, каждый раз для своего арта вам нужно подумать все таки в каком разрешении создавать документ, я выбираю размер fullhd или 1920*1080 пикселей, потому что хочу рисовать в прямоугольной области.
И мы попадаем на белое чистое полотно, и я сразу же перекрашиваю белый цвет в нейтрально серый, делается это через заливку (она же paint bucket tool) ее так же можно активировать кнопкой G.
А теперь нам надо выбрать цвет заливки, прямо под значком лупы вы можете увидеть цветовые квадратики, это в общем и есть цвет заливки, первый верхний (он же черный) это основной цвет, второй цвет это цвет контура, который тут у нас не будет применяться.
Выбираем нужный цвет, я обычно сероватый, чтобы легче было смотреть на экран, все таки белый сильно отвлекает глаз. Все мы можем начинать, мы чаще всего будем использовать панель с геометрическими фигурами.
Так мы на пол пути к созданию первой иконки, но вообще-то для начала надо понять что будем делать, мне очень понравилась иконка сервиса mail.ru
И так выбираем вторую фигуру, это прямоугольник с закругленными краями, берем и по области серого прямоугольника растягиваем фигуру, помним что в общем у нас иконки квадратные, чтобы у вас точно получился квадратик, нужно при растягивании зажать шифт (shift) и тогда будут сохраняться правильные пропорции. Как только вы обозначили фигуру вы увидите рядом окно со свойствами этой фигуры, сейчас разберемся чего там и как.
Первые строчки с цифрами обозначают ширину, высоты и положение в пространстве по осям. Мы тут в общем все уже сделали, следующие значение, это основной цвет тут мы и выбираем на глаз (а можно и точно) цвет значка. Следующая иконка это цвет обводки он зачеркнут, значит обводки не будет (так же как и кина), далее ширина обводки, тип линии обводки. Следующие две строчки пропускаем и нас прям интересует радиус скругления углов, везде стоит по 10 пикселей, сделаем более мощное сглаживание поставим цифру 50. Углы значительно скруглятся, теперь мы все сделали и можно окно со свойствами закрывать на крестик (именно этого окна).
Далее добавим эффект конверта, как видим из референса который этажом выше, это не треугольник с острыми углами, а все таки как бы половина квадрата, сейчас так и сделаем. Просто возьмем и скопируем наш уже существующий прямоугольник, для этого перейдем в панель слоев и выберем слой с прямоугольником и нажмем сочетание ctrl + j и он дублируется.
Теперь нам надо его перевернуть и покрасить в другой цвет (точнее наоборот). Дважды нажимаем по слою верхнего прямоугольника и появится палитра цветов, выбираем цвет, а уже далее перевернем и уменьшим если надо) Нажимаем ctrl + t это будет трансформация, тут мы можем переворачивать или уменьшать наш прямоугольник, и так подгоняем по размерам его.
Важно понять иерархию слоев, все очень просто что выше, то главнее. И то будет видимым, а что под ним будет не видимым)
Далее снова переходим к слоям и по верхнему слою нажимаем правой кнопкой мыши, вылезет огромное меню нам необходимо найти обтравочную маску (clipping mask) и получится чудо)
Осталось только добавить значок собаки. Нажимаем на панели инструментов на Type Tool, ставим курсор на середину конверта и выбираем значок собаки это шифт + 2. Не забываем выбрать цвет буквы)
Значок получился очень маленьким, поэтому мы его увеличим. Выбираем этот слой и делаем ему трансформацию, с зажатым шифтом растягиваем ее до размеров которые нам нужны.
Урааа получилось. Как вы понимаете в режиме текста, вы можете выбирать любой шрифт, поэтому выбирайте тот что вам понравится. В нашем варианте цвета не очень похожи, потому что делали на глаз, но мы можем использовать инструмент который понимает что за цвет и добавляет его в палитру.
Для этого нам нужно загрузить эталонную картинку в фотошоп и использовать инструмент color picker выглядит как пипетка. Нажимаем по квадратикам с краской два раза правой кнопкой мышки и цвет будет выбран фотошопом автоматически.
И так первая иконка готова, но так же не забываем изучать мир иконок, о поверьте мне он огромен, здесь у меня для вас припасена доска с флэт иконками, потренируйтесь поделайте что-то свое.
https://www.pinterest.ru/samueldemon/icons-flatart/
Но а вообще я за один раз нарисовал 8 иконок. Ниже оставлю вам видео, процесс рисования, это очень помогает понять механику работы программы и понимать как работать со слоями.
Обязательно поэкспериментируйте с цветами, формами, текстом и сделайте свой набор иконок.
PS начинаем с малого, а потом уже будет гораздо легче разложить любой объект на простые фигуры и сделать более крутой арт. До новых встреч, креатива вам)
Давай дружить в соц сетях: https://vk.com/samuel_ph https://www.instagram.com/doctrinamat... https://www.instagram.com/sanuelpho/ https://www.instagram.com/samuelphlego/
