Рисуем четкую иконку дома в 32x32 (аля FatCow). Рисование иконка


Рисуем четкую иконку дома в 32x32 (аля FatCow) / Хабрахабр

Как правильно нарисовать иконку (размер 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 > 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 до цвета 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… и назначаем тень со следующими параметрами И, в итоге получаем готовую к использованию иконку! Надеюсь, мой урок был вам полезен. Чем кончилось и откуда началось.

habrahabr.ru

Простые правила для создания дизайна иконки

Недавно я прочитал статью Скотта Льюиса, который является профессиональным дизайнером иконок Iconfinder.com. Скотт получил степень в области графического дизайна в Университете Восточной Каролины и разрабатывает иконки более 25 лет. Меня заинтересовали его советы по созданию иконки, а также его подход.
Три основных составляющих хорошего дизайна иконки
Хорошо разработанные иконки демонстрируют преднамеренный подход к трём основным признакам для любого дизайна – это форма, эстетическое единство и узнаваемость. При разработке нового набора иконок рассмотрим каждый из этих атрибутов по порядку. Я не буду утверждать, что для идеального дизайна требуется всего три составляющих, но этого вполне достаточно для хорошего старта. И так приступим.
Форма
Форма является базовой структурой иконки. Если игнорировать детали и просто рисовать линии, то в целом может получиться неаккуратно, без общей геометричности. Основные геометрические фигуры: круг, квадрат, и треугольник – создают визуально прочную основу для дизайна иконки. Поэтому изначально иконка должна быть создана из простейших форм и только после этого мы добавляем детали, но столько, сколько действительно необходимо для передачи концепции.
Эстетическое единство
Элементы, которые используются при создании одной иконки или наборе иконок, например закруглённые или острые углы определённых размеров (2, 4 или 8 пикселей), толщины линий (2 пикселя или 4 пикселя), стиля (flat, outline), цветовая гамма и т.д., должны быть едиными. Таким образом, эстетическое единство представляет собой набор элементов дизайна, который повторяется во всем сете. Это видно в примере ниже.
Узнаваемость
Узнаваемость является главным критерием, это сущность иконки. Узнаваемость включает в себя те свойства, которые человек обычно ассоциирует с тем или иным объектом, с той или иной идеей, но так же может включать в себя что-то неожиданное – это и создаёт уникальность, например, недоведённая обводка и округлые блики.

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

Сетка
Всегда начинайте рисовать иконки в сетке. Я использую сетку 32x32 пикселя, при этом внешние два пикселя оставляю всегда пустыми. Цель этой зоны – создать свободное пространство вокруг иконки. Если вы делаете круглые иконки, то она должна затрагивать все четыре края, без выхода в зону свободного пространства, но порой, чтоб сохранить целостность иконки, какой-то элемент может выходить за пределы круга, как на картинке:

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

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

Геометрические формы
Начните с простых геометрических форм. Даже если значок будет в конечном итоге более органичным, то всё равно начните с простых геометрических форм в Adobe Illustrator. Когда дело доходит до создания иконок, особенно маленьких размеров, то базовые геометрические формы сделают края более точными и позволят быстро регулировать относительный масштаб элементов.
Цифры: Края, линии, углы, кривые
Чтобы дизайн не выглядел механическим и скучным, углы, линии, края и кривые должны быть математически точными. Другими словами, следите за цифрами и не пытайтесь нарисовать на глаз и от руки, когда дело касается деталей. Несогласованность в этих элементах может снизить качество иконки.
УГЛЫ
В большинстве случаев необходимо придерживаться угла в 45 градусов или кратных ему. Сглаживание угла в 45 градусов не даёт появиться лишним пикселям, таким образом получаем чёткий результат с идеальной диагональю, создавая приятные и узнаваемые очертания для человеческого глаза. Эти очертания объединяют весь сет иконок, а так же создают единство в пределах одного значка. Если ваш дизайн заставляет нарушить правило угла в 45 градусов, то попробуйте сделать его равным 22,5 или 11,25 градусов, так как сглаживание будет более-менее ровными.
КРИВЫЕ
Это самые заметные области, которые могут ухудшить качество иконки. Благодаря им можно отличить профессионала от любителя. Так как человеческий глаз способен обнаруживать мелкие неточности, то рисование от руки не поможет вам достичь целей. Положитесь на инструменты, формы и цифры, чтобы создавать кривые.
ЗАКРУГЛЕНИЕ УГЛОВ
Радиус закругления углов составляет 2 пикселя. Для иконки 32x32 пикселя такой радиус вполне достаточен, чтобы угол был действительно закруглённым, и при этом не смягчает углы на столько, чтобы округлить дизайн до пузыря. Главное помните, что от выбора радиуса скругления будет зависеть дизайна самого значка.
СГЛАЖИВАНИЕ ПИКСЕЛЕЙ
Идеальное выравнивание пикселей имеет важное значение для дизайна иконок маленьких размеров. Сглаживание углов на таких иконках может сделать значок размытым и нечётким. Пространство между линиями, которое не приводится в соответствие с пиксельной сеткой будет сглаживаться и станет нечетким. Как упоминалось выше, 45 градусные углы и кратные им сглаживаются лучше.

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

ТОЛЩИНА ЛИНИИ
Вообще лучше всего использовать в одной иконке не более двух вариантов толщины линии, но иногда и три варианта просто необходимы. Ваше цель состоит в том, чтобы визуально обеспечить иерархию и разнообразие без разрушения целостности всего сета. Использование более чем трех толщин линий может разрушить структурированность и сплоченность. Что касается самой ширины линии, то лучше брать опять кратные двум и четырём пикселям, их легко масштабировать и делать ровные шаги. Старайтесь избегайте очень тонких линий, особенно в базовых значках и плоских иконках, но это правило не действует, если вы намеренно создаете иконки из тонких линий.
Используйте повторяющиеся элементы дизайна и акценты в сетах иконок
Например, Хеммо де Йонг известный голландский дизайнер во всех своих иконках использует повторяющийся элемент — острый угол.

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

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

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

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

Сет иконок, которые были использованы на iconfinder и на shutterstock.

artlab.club

Рисуем иконку в Фотошоп

Вот что мы должны получить:

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

Автор использовал: Adobe Photoshop CS4

Шаг 1 - Новый файл / Техника ПераОткройте Photoshop и создайте новый документ (Ctrl + N). Используйте следующие настройки:Разрешение: 72dpiЦветовой режим:  RGB цветРазмеры: 600 × 600 пикселей

Создайте следующую фигуру с помощью инструмента Pen Tool(P) (Перо). Цвет: # 3da1e2

Шаг 2 - Создание фигур с помощью ПераНарисуйте заднюю часть папки с помощью Pen Tool (Пера), используя ту же технику рисования. Затем нарисуйте полосу, как показано на рисунке.Цвет: # 003658  # 3da1e2 # 08517e

Шаг 3 – Закончим формуКак только Вы закончили рисунок папки, нужно добавить лист бумаги и стрелку, как показано на рисунке. Теперь у вас должны быть 5 слоев. Каждая форма будет на отдельном слое. Назовите каждый слой.Цвет: # ffffff  # 32e732

Шаг 4 - Добавление цветовых эффектовДобавьте следующие стили слоя к передней части папки. Понизьте непрозрачность до 90%.

Добавить следующие стили слоя для бумаги. Понизьте непрозрачность слоя примерно до 90-95%.

Добавьте следующие стили слоя для полосы.

Добавьте следующие стили слоя к задней части папки.

Добавьте следующие стили слоя для стрелки.

Теперь ваша иконка выглядит так.

Шаг 5 - Добавление РефлексовДобавить новую группу под названием "Рефлексы". Используйте Pen Tool (Перо), чтобы нарисовать отражение, как показано на рисунке. Убедитесь, что вы рисуете только контур, а не фигуру. После того как вы закрыли путь, щелкните правой кнопкой мыши по рабочей области и выберите make selection (Создать выделение) (растушевка (feather) 0). Возьмите большую кисть (диаметром около 470, твердость 0) и закрасьте правую часть выделения, как на рисунке, для создания белого отражения. Измените режим смешивания на Overlay (Перекрытие) и уменьшить непрозрачность до 63%.

Шаг 6 - КраяСоздайте новую группу под названием "Края", создайте новый слой в ней (Ctrl + Shift + N или нажмите значок создания нового слоя). Добавление бликов на краях придает иконке  3D эффект. Используйте Pen Tool (Перо), чтобы создать линии обводки вокруг углов и всех полей папки, бумаги и стрелки. Затем щелкните правой кнопкой мыши по рабочей области и выберите Stroke Path (Выполнить обводку) – Brush (Кисть). Настройки кисти должен быть изменены заранее,  master diameter (диаметр) 8 пикселей а hardness (твердость) 0.

Шаг 7 - ТениСоздайте новый слой (Ctrl + Shift + N) для теней и поместить его в новую группу (Ctrl + G). Сделайте выделение, как вы это делали в 5 шаге, для создания отражений. Заполните выделение  черным цветом, а затем размойте поля с помощью инструмента Blur tool (Размытие). Если тени выглядят слишком тёмными, снизьте непрозрачность слоя до 40%.

Шаг 8 - Добавление текстаДобавьте текст, используя любой шрифт, который вам нравится.  Я выбрал "Agency FB". Размер шрифта: 40, непрозрачность слоя: 75%.

Шаг 9 – Итоговое добавление рефлексов и тениДобавьте еще несколько рефлексов на бумагу, используя те же методы, что приведены в 5 Шаге.

Добавить тень, используя Ellipse Tool (E) (Эллипс). Нарисуйте эллипс, как показано на рисунке и добавьте немного Filter – Blur - Motion blur (Фильтр – Размытие - Размытие в движении). Уменьшите непрозрачность по своему вкусу.

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

Автор: Cucu Tudor-Ionel

photoshop-master.ru

Как сделать свой первый набор векторных иконок – Official Russian – Medium

Шаг первый: Тема

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

by Oliver’s Creative Agencyby 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 — ничего не знаю про этот магазин, если у кого то есть опыт, поделитесь им в комментариях.

medium.com

Рисуем набор иконок в Фотошоп

что получится в итоге

В этом уроке мы создадим набор иконок в Фотошопе. Набор иконок должен иметь одинаковый фон и одну тему. Для тренировки мы создадим иконки с солнцем, снежинкой и значком 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

Как нарисовать иконку в Фотошопе

В этом уроке мы узнаем, как нарисовать красивую иконку телевизора в Adobe Photoshop.

Шаг 1. Создание нового документа

Создайте новый документ (File > New) с показанными настройками

Шаг 2. Создание фона

Залейте фон #FFFFFF цветом, а затем примените к нему следующие Эффекты слоя.

Шаг 3. Создание корпуса телевизора

Используйте  инструмент  Прямоугольник со скругленными углами (U) с радиусом 35px и создайте прямоугольник любого цвета. Назовите этот слой BODY, откройте Стили Слоя и примените следующие настройки.

Также добавьте Обводку с слою BODY со следующими настройками

Шаг 4. Промежуточный результат

Вы должны получить похожий результат.

Шаг 5. Создание корпуса телевизора

Используйте  инструмент  Прямоугольник со скругленными углами (U) с радиусом 35px и создайте прямоугольник любого цвета. Назовите этот слой BODY_2 и после этого примените на этот слой следующие эффекты.

Также добавьте Обводку к слою BODY_2 со следующими настройками.

После этого добавьте Внутреннею тень к слою BODY_2 со следующими настройками.

Шаг 6. Промежуточный результат

Вы должны получить похожий результат.

Шаг 7. Создание корпуса телевизора

Создайте новый слой и поместите его под слой BODY. Назовите этот слоя BASE. Используйте  инструмент  Прямоугольник со скругленными углами (U) с радиусом 35px и затем примените к нему следующие эффекты слоя.

Для этого выберите слой BODY нажмите правой кнопкой мыши и выберите Скопировать стиль слоя и затем выберете слой Base нажмите на правую кнопку мыши и выберете Вставить стиль слоя.

После этого необходимо исправить толщину Обводки на 3px в слое BASE.

Шаг 8. Промежуточный результат

Вы должны получить похожий результат.

Шаг 9. Создание корпуса телевизора

Создайте новый слой и поместите его под слой BODY. Назовите этот слой FOOT. Используйте  инструмент  Прямоугольник со скругленными углами (U) с радиусом 35px и затем примените к нему следующие эффекты слоя.

Примените также Внутреннюю тень к слою FOOT.

Шаг 10. Промежуточный результат

Вы должны получить похожий результат.

Шаг 11. Создание корпуса телевизора

Теперь продублируйте слой FOOT и поместите его как показано на рисунке.

Шаг 12. Создание корпуса телевизора

Создайте новый слой, назовите его GLOSSY и поместите его поверх всех слоев, затем выберите инструмент Кисть (B) и большой кистью с мягкими краями поставьте одно белое пятно.

Затем поменяйте Режим наложения на Перекрытие с уменьшите Прозрачность на 50%

Шаг 13. Создание экрана

Создайте новый слой назовите его SCREEN и поместите поверх всех слоев.

Используйте инструмент  Прямоугольник со скругленными углами (U) с радиусом 35px, чтобы создать прямоугольник. Затем скопируйте Стиль слоя BODY_2 и примените его к слою SCREEN. Теперь исправьте толщину обводки на 10px в слое SCREEN.

Шаг 14. Промежуточный результат

Вы должны получить похожий результат.

Шаг 15. Создание экрана

В этом шаге мы сделаем сам экран. Создайте новый слой SCREEN_2. Поместите его поверх остальных слоев. Используйте инструмент  Прямоугольник со скругленными углами (U) с радиусом 35px, чтобы создать прямоугольник. Затем примените Градиент в Стилях Слоя со следующими настройками.

Затем примените Внутреннюю тень к слою SCREEN_2.

Затем примените Внутреннее свечение к слою SCREEN_2.

Затем Тень к слою SCREEN_2.

Шаг 16. Промежуточный результат

Вы должны получить похожий результат.

Шаг 17. Создание экрана

Создаем новый слой и называем его SCREEN GLOSSY и помещаем его поверх остальных. Затем выбираем инструмент Перо (P) и рисуем контур как показано на рисунке. И заливаем его белым цветом #FFFFFF. Затем уменьшаем прозрачность до 20%

Шаг 18. Создание экрана

Создаем новый слой, называем его LIGHT DOT и помещаем поверх остальных слоем. После этого выбираем инструмент Кисть (B) и большим размером кисти, с мягкими краями ставим по центру экрана одно большое белое пятно. 

Шаг 19. Создание дополнительных элементов

В этом шаге вы сделаем кнопки. Возьмите инструмент Эллипс (U) и создайте круг и поместите его примерно так как на картинке, назовите этот слой BUTTON.

Теперь вернитесь к слою BODY_2 и скопируйте его Стиль слоя нажав по нему правой кнопкой и выбрав Скопировать стиль слоя. После этого примените скопированный стиль на слой BUTTON.

Шаг 20. Создание дополнительных элементов

Далее мы создаем еще один круг и помещаем его так как показано на картинке.

После этого мы применяем Стиль слоя как показано на картинке, к нашей копии круга.

Далее применяем Окантовку со следующими настройками.

Затем добавляем Тень.

Шаг 21. Промежуточный результат

Вы должны получить похожий результат.

Шаг 22. Создание дополнительных элементов

Далее используем инструмент Прямоугольник со скругленными углами (U) и создаем прямоугольник как показано на примере.

Повторяем ранние шаги и применяем Стили слоя к прямоугольнику, но немного модифицируем настройки Тени.

Шаг 23. Промежуточный результат

Вы должны получить похожий результат.

Шаг 24. Создание дополнительных элементов

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

Шаг 25. Промежуточный результат

Теперь наши кнопки готовы.

Результат должен быть как на картинке.

Шаг 26. Создание дополнительных элементов

Сделаем динамик. Нам надо создать прямоугольник со скругленными углами  под кнопками, как на рисунке. Назовем этот слой SPEAKER.

Шаг 27. Создание дополнительных элементов

Теперь откроем Стиль слоя и применим следующие настройки.

Применим Внутреннюю тень к слою SPEAKER.

Добавим Обводку к слою SPEAKER.

Шаг 28. Промежуточный результат

Теперь наш динамик должен выглядеть так.

Шаг 29. Создание дополнительных элементов

Теперь дублируем слой динамик несколько раз и поместим его так как показано на рисунке.

Шаг 30. Создание марки телевизора

Добавим марку телевизора и применим к нему следующие Стили слоя, чтобы получился металлический эффект.

Также применим Тень к слою с маркой телевизора.

Шаг 31. Промежуточный результат

Должен получиться следующий результат.

Шаг 32. Создание антенны

Используем инструмент Прямоугольник (U) и создадим прямоугольник по форме антенны и поместим ее под телевизор. Затем применим к слою следующие Стили слоя чтобы придать металлический вид.

Шаг 33. Промежуточный результат

Результат должен выглядеть так.

Шаг 34. Рисование тени

Далее создадим тень от телевизора.

Создаем группу слоев которую назовем SHADOW и поместим ее перед нижним фоном. Используем инструмент Эллипс (U) и создаем эллипс и заливаем его черным цветом. После этого применим размытие Размытие по Гауссу со следующими настройками.

Шаг 35. Рисование тени

Теперь используем инструмент Ластик (E) сотрем часть тени. Затем изменим Режим наложения на Умножение и уменьшим прозрачность на 50%

Шаг 36. Промежуточный результат

У нас должен получиться следующий результат.

Шаг 37. Добавление тени от ножек

Продублируйте тень и уменьшите ее, и подгоните под размеры ножек и поместите под ними.

Шаг 38. Итоговое изображение

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

Ссылка на источник

sveres.ru

Рисуем погодные иконки в Фотошоп

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

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

Давайте начнем!

1. Создаем иконку радуги

Шаг 1

Начинаем с создания внешней красной полосы радуги. Берем Ellipse Tool (U) (Эллипс) и рисуем окружность размером 450 х 450 пикселей. Переходим к панели свойств Window – Properties (Окно – Свойства), на которой мы можем изменить размер фигуры, ее цвет и другие параметры.

Устанавливаем толщину Stroke (Обводка) на 3 pt, Fill (Заливка) – на None (Нет) и меняем цвет обводки. Кликаем по иконке Stroke (Обводка), чтобы открыть цветовую панель, и выбираем один из предложенных цветов или кликаем по разноцветной иконке в верхнем правом углу панели, чтобы открыть окно Solid Color (Цвет) и выбрать какой-то определенный оттенок.

Шаг 2

Добавим еще одно кольцо. На панели слоев выбираем красное кольцо и жмем сочетание клавиш Ctrl+J, чтобы дублировать слой. Затем жмем Ctrl+T, чтобы уменьшить копию окружности и разместить ее в центре предыдущей. На панели Properties (Свойства) меняем цвет обводки на оранжевый.

Шаг 3

Еще раз дублируем окружности (Ctrl+J), чтобы добавить третье внутреннее кольцо, цвет обводки меняем на желтый.

Шаг 4

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

Закончив, выделяем все кольца на панели слоев и объединяем их в группу (Ctrl+G). Дублируем получившуюся группу комбинацией клавиш Ctrl+J или перетянув группу на иконку Create a New Layer (Создать новый слой) в нижней части панели слоев. Таким образом, у нас будет резервная копия в случае, если мы решим изменить некоторые детали радуги.

Выбираем группу и переходим Layer – Merge Group (Слой – Объединить группу) или жмем комбинацию клавиш Ctrl+E.

Шаг 5

Теперь берем Rectangular Marquee Tool (M) (Прямоугольное выделение), выделяем нижнюю половину радуги и удаляем ее.

Шаг 6

Давайте создадим несколько пушистых облаков у основания радуги. Берем Ellipse Tool (U) (Эллипс) и создаем маленький синий круг в нижнем левом углу радуги. Создаем еще несколько окружностей разного размера. Группируем окружности (Ctrl+G) и дублируем группу (Ctrl+J). Перемещаем дубликат на противоположный конец радуги.

Шаг 7

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

Шаг 8

Теперь создадим основу для иконки. С помощью Ellipse Tool (U) (Эллипс) рисуем круглую основу размером 545 х 545 пикселей. На панели Properties (Свойства) меняем Fill (Заливка) на светло-зеленый и отключаем обводку.

Шаг 9

Теперь добавим модную длинную тень. С помощью Rectangle Tool (U) (Прямоугольник) создаем квадрат 350 х 350 пикселей и поворачиваем его на 45 градусов. Переходим на панель слоев и устанавливаем режим смешивания квадрата на Multiply (Умножение), чтобы сделать его темнее. Если фигура получилась слишком темной, пробуем уменьшить Opacity (непрозрачность).

Шаг 10

Корректируем размер четырехугольника, чтобы он подходил по ширине к радуге и перекрывал ее, как показано ниже. Размещаем прямоугольник под радугой, переместив слой на панели слоев ниже или несколько раз нажав комбинацию клавиш Ctrl+[.

Шаг 11

Теперь мы должны отрезать часть прямоугольника, которая выходит за пределы иконки. Выбираем круг и активируем Pen Tool (P) (Перо), кликаем по окружности правой кнопкой мыши и выбираем Make Selection (Создать выделение). В появившемся окне оставляем все по умолчанию, затем переходим Select – Inverse (Выделение – Инвертировать).

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

Шаг 12

С помощью Eraser Tool (E) (Ластик) удаляем лишние детали тени внутри иконки.

Слегка осветляем круг-основание и тень. И плоская иконка с радугой готова! Теперь мы можем перейти к следующей.

2. Создаем иконку солнца

Шаг 1

Начинаем с создания круглой основы желтого цвета размером 260 х 260 пикселей.

Шаг 2

Далее мы нарисуем стилизованные лучи. Активируем Polygon Tool (U) (Многоугольник) и на верхней панели параметров инструмента устанавливаем количество сторон Sides (Стороны) на 3. Над окружностью создаем оранжевый треугольник. На панели слоев выделяем окружность и треугольник и на верхней панели параметров инструмента кликаем на Align horizontal centers (Выровнять по горизонтальному центру), чтобы идеально отцентрировать фигуры.

Мы также можем использовать направляющие, чтобы определить центр окружности. Для этого жмем Ctrl+R, чтобы активировать Rulers (Линейки), кликаем на верхнюю линейку и тянем мышкой вниз, чтобы создать горизонтальную направляющую. Таким же образом создаем вертикальную направляющую.

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

Выбираем треугольник и жмем Alt+Ctrl+T, чтобы активировать режим свободной трансформации. Хватаем центральную опорную точку треугольника и перемещаем ее вниз, разместив на пересечении двух направляющих, то есть в центре окружности. В результате на панели слоев автоматически создастся дубликат треугольника (это сработает только при условии активации свободной трансформации сочетанием клавиш Alt+Ctrl+T). Зажав клавишу Shift, поворачиваем треугольник на 45 градусов и жмем Enter, чтобы применить трансформацию.

Далее жмем Shift+Ctrl+Alt+T несколько раз, чтобы создать 6 копий треугольника вокруг солнца.

Замечательно! Солнечные лучи готовы.

Шаг 3

Направляющие нам больше не нужны, поэтому убираем их View – Clear Guides (Вид – Удалить направляющие).

Шаг 4

Дублируем основу предыдущей иконки и меняем ее Fill (Заливка) на небесно-голубой. Затем под солнцем создаем полупрозрачную длинную тень.

Шаг 5

Давайте удалим часть тени вокруг основы солнца. Для этого берем Elliptical Marquee Tool (M) (Овальное выделение) и создаем выделение вокруг желтой окружности. Переходим Select – Transform Selection (Выделение – Трансформировать выделенную область) и редактируем выделение так, чтобы оно захватило область между солнцем и его лучами.

Применяем трансформацию и на панели слоев выбираем слой с тенью. Жмем клавишу Delete, чтобы удалить выделенную тень.

Готово! Иконка солнца готова! Переходим к следующей части урока.

3. Рисуем дождевое облако

Шаг 1

Начинаем с создания окружности голубого цвета размером 200 х 200 пикселей. Для этого используем инструмент Ellipse Tool (U) (Эллипс). По бокам добавляем новые окружности меньшего размера, чтобы облако выглядело пушистым.

Шаг 2

Выделяем все окружности и переходим Layer – Merge Shapes (Слой – Объединить фигуры). Переходим на панель слоев, кликаем по объединенному слою правой кнопкой мышки и выбираем Rasterize Layer (Растрировать слой), чтобы слой был редактируемым.

Теперь мы берем Rectangular Marquee Tool (M) (Прямоугольное выделение), выделяем нижнюю часть облака и жмем Delete, чтобы удалить выделенный фрагмент.

Шаг 3

Теперь создадим каплю. С помощью Ellipse Tool (U) (Эллипс) создаем голубой круг размером 35 х 35 пикселей. Берем Convert Point Tool (P) (Преобразовать точку) (этот инструмент находится в том же меню, что и Pen Tool (P) (Перо)) и выделяем верхнюю узловую точку окружности. Один раз кликаем по этой точке, чтобы заострить ее. И, наконец, перемещаем ее выше, сформировав каплю.

Шаг 4

Несколько раз жмем Ctrl+J, чтобы дублировать каплю, и распределяем копии под облаком, создав дождевые капли.

Шаг 5

Добавляем желтую основу для иконки и рисуем длинную тень. Дождевая иконка готова! Осталась еще одна!

4. Создаем иконку зонтика

Шаг 1

Начинаем с бирюзовой окружности размером 430 х 430 пикселей. Растрируем слой и удаляем нижнюю половину круга, используя инструмент Rectangular Marquee Tool (M) (Прямоугольное выделение).

Шаг 2

С помощью Ellipse Tool (U) (Эллипс) создаем ряд окружностей в нижней части бирюзового полукруга. Корректируем размер кругов, чтобы они занимали всю ширину полукруга. И, наконец, выделяем все круги и объединяем в одну фигуру Layer – Merge Shapes (Слой – Объединить фигуры).

Шаг 3

Активируем Pen Tool (P) (Перо), жмем правой кнопкой по объединенной фигуре и выбираем Make Selection (Создать выделение). На панели слоев выбираем слой с полукругом и жмем кнопку Delete, чтобы удалить выделенную область, таким образом, сформировав очертания зонта.

Оранжевые окружности нам больше не нужны, поэтому удаляем их.

Шаг 4

Теперь создадим ручку зонтика с крючком на конце. С помощью Rounded Rectangle Tool (U) (Закругленный прямоугольник) создаем основу. Заливку отключаем и в пункте Stroke (Обводка) выставляем 4 pt и выбираем оранжевый цвет, как показано ниже.

Затем жмем правой кнопкой по слою на панели слоев и выбираем Rasterize Layer (Растрировать слой), чтобы сделать ручку редактируемой.

Шаг 5

Берем Rectangular Marquee Tool (M) (Прямоугольное выделение), выделяем верхнюю часть созданной в предыдущем шаге фигуры и удаляем ее, оставив маленький «хвостик». Затем выделяем и удаляем левую часть фигуры, сформировав ручку.

Убедившись, что слой с ручкой активен, жмем Shift+Ctrl+[, чтобы переместить его под основу зонтика.

Шаг 6

Заканчиваем иконку, создав розовую основу и длинную тень.

Наш набор погодных иконок готов.

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

5. Применяем гранж-текстуру

Шаг 1

Начнем с иконки солнца. Переходим на панель слоев и выделяем желтую основу. Зажимаем Alt и жмем кнопку Create a New Layer (Создать новый слой). Во всплывающем окне активируем функцию Use Previous Layer to Create Clipping Mask (Использовать предыдущий слой для создания обтравочной маски).

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

Шаг 2

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

Берем Brush Tool (B) (Кисть) и жмем правой кнопкой, чтобы открыть список кистей (или переходим в меню Window – Brush (Окно – Кисть)). Кликаем на маленькую иконку шестеренки в правом верхнем углу всплывающего меню и из списка выбираем M Brushes (Кисти). Вы можете присоединить кисти к уже имеющемуся набору с помощью кнопки Append (Добавить) или заменить его с помощью кнопки Replace (Заменить).

Шаг 3

В списке находим кисть Dry Brush 1 #2 и выбираем ее. Если в вашей версии программы нет этого набора, посмотрите другие стандартные наборы кисточек, например, Dry Media Brushes или похожие.

Шаг 4

На панели Color (Цвет) выбираем светло-желтый цвет и на новом слое, который мы трансформировали в обтравочную маску, добавляем мазки кистью, чтобы создать гранж-эффект. Затем выбираем оранжевый цвет и в нижней части солнца рисуем легкую тень.

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

Шаг 5

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

Шаг 6

Продолжаем добавлять текстуру на каждой иконке.

Шаг 7

Над фоном создаем новый слой и рисуем мягкую текстурную тень светло-желтого цвета под каждой иконкой.

Отличная работа! Мы научились рисовать плоские погодные иконки, используя базовые формы и стандартные кисти Photoshop.

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

Удачи!

Автор: Yulia Sokolova

photoshop-master.ru


Смотрите также