Читать


Главная » 2015 » Июль » 23 » Урок 12. Рисуем простую флэт иконку
13:03
Урок 12. Рисуем простую флэт иконку

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

Куда чаще на страницах, интернет-магазинов, блогов и различных сервисов используются чистые цвета, много пространства и аккуратные, не отвлекающие от главного внимания пользователей графические элементы. Чаще всего это иконки - небольшие, контурные, либо нарисованные в плоском стиле. Вот такую иконку (flat) мы в этом уроке и нарисуем.

Было бы слишком просто - взять готовую иконку и обработать её. Поэтому мы нарисуем её с нуля.
Чем отличаются флэт иконки? В них используются только простые фигуры, явно выраженные углы (90%, 45%) и совершенно отсутствуют любые эффекты слоя. Весь объём (если он необходим) строится на сочетании разных цветов и оттенков.

В этом уроке принцип рисования флэт иконок покажу сразу на примере 3-х видов одной очень простой иконки.

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

Урок 12. Рисуем простую флэт иконку

  1. Вариант иконки на тёмной подложке
  2. Вариант иконки на яркой цветной подложке
  3. Вариант иконки без подложки

Воспользовавшись фигурой "прямоугольник со скруглёнными углами", нарисуем основу иконки (пока на примере одного вида):

Урок 12. Рисуем простую флэт иконку


Вновь фигурой (к примеру, прямоугольником), вычтем из только что нарисованной фигуры угол. Зажмём Alt и нарисуем прямоугольник. Затем выберем инструмент "Выделение контура" (А) и выделим новую фигуру. Выбрав "трансформирование" (Ctrl+T), повернём фигуру на 45 градусов. Enter и "Объединить".

Урок 12. Рисуем простую флэт иконку


Вновь берём инструмент "прямоугольник со скруглёнными углами" и рисуем произвольную фигуру. Она у нас находится поверх слоя с первым прямоугольником. Чтобы новая фигура приняла форму перовго прямоугольника, жмём клавиши Ctrl+Alt+G. Цвет новой фигуры меняем на светлый оттенок нижнего прямоугольника - получается загнутый уголок листа:

Урок 12. Рисуем простую флэт иконку


Добавим тень от загнутого уголка. Для этого на новом слое создадим фигуру прямоугольника, трансформацией повернём его на 45 градусов и разместим под слой с уголком (оттенок - темнее основы):

Урок 12. Рисуем простую флэт иконку


Осталось нарисовать схематичный текст на бумаге. Поверх всех слоёв просто нарисуем прямоугольник. Зажав Shift, нарисуем ещё несколько таких с равным промежутком:

Урок 12. Рисуем простую флэт иконку


Собственно, иконка готова! Выделив все слои, из которых она состоит, продублируем (правой кнопкой по одному из выделенных слоёв и во всплывающем окошке "Дубликат слоёв") и передвинем её дальше:

Урок 12. Рисуем простую флэт иконку


Центральную иконку мы сделаем более выразительной. Для этого: во-первых, сделаем её светлее по тонам; во-вторых, добавим тень.

Над слоем с круглой подложкой нарисуем фигуру инструментом "Перо". Первую точку поставим у сгиба уголка, отведём перо в сторону и удерживая Shift, кликнем за границей круглой подложки, таким образом у нас получится линия, идущая под углом 45 градусов. Продолжаем рисовать. Создаём третью точку также за границей круга и снова удерживая Shift, приближаемся к противоположному (от загнутого уголка) углу листа. Затем замыкаем фигуру и поправляем грани (точки) инструментом "Стрелка" (А), если это нужно.

Урок 12. Рисуем простую флэт иконку


Теперь вписываем фигуру в круг (Ctrl+Alt+G) и меняем цвет получившейся тени.

Урок 12. Рисуем простую флэт иконку


Вот и всё! По обыкновению вы можете скачать исходник примера, описанного в уроке, запакованный в архив весом 16 Кб

Скачать



Категория: Уроки | Просмотров: 708 | Добавил: M-Wizard | Теги: урок, фотошоп, иконки, Flat | Рейтинг: 0.0/0

Всего комментариев: 0
avatar


НЕКОТОРЫЕ ПУБЛИКАЦИИ БЛОГА