Как создать плоские иконки в Photoshop

Плоский дизайн — это относительно новое веяние. Но с учетом того, что на сегодняшний день iOS и Windows активно внедряют эту структуру дизайна, совсем скоро это будет не так. И большинство(если не все) веб-сайтов в Сети начнут применять ее.

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

Существует много картинок, которые можно «сгладить«. Вы можете без труда начать с логотипа, или с иконок навигации. Мы создадим иконки навигации для веб-сайта или блога. В данной статье я буду использовать Adobe Photoshop CS6. Так что приготовьтесь, мы начинаем создание элементов плоского интерфейса.

Что мы будем создавать:

Как создать плоские иконки в Photoshop Откройте Photoshop. Создайте новый файл при помощи пресета для фото(10 на 8 дюймов, 300 точек на дюйм, прозрачный фон, цвет RGB).

При помощи инструмента «Прямоугольник со скругленными углами» создайте новую фигуру с размерами 1736 пикселей на 1736 пикселей, радиус — 83 пикселя, цвет — #82d8b5. Или вы можете без труда использовать собственный цвет. В векторной иконке для веб-сайта используйте цвета в соответствии с цветовой гаммой ресурса.

При помощи инструмента «Перо» нарисуйте что-то наподобие того, что показано на рисунке ниже. Используйте цвет #a30d00. Это будет крыша для иконки «Главная страница«.

Используя инструмент «Перо», нарисуйте прямоугольную фигуру, как показано на рисунке ниже. Используйте цвет #ffffff. При помощи инструмента «Прямоугольная область» нарисуйте маленький квадрат, цвет #3498db.

Далее при помощи инструмента «Прямоугольная область» нарисуйте фигуру размером 248 на 396 пикселей, цвет заливки — #fcab3a.

Мы создали векторную иконку «Главная страница«, но я хочу добавить длинную тень. Поэтому продолжаем.

Используя инструмент «Перо» с цветом заливки #000000, нарисуйте фигуру. Начните с правого края крыши. На краю, где пересекаются красно-белые и красные тона. Расширьте рисунок на внешнюю сторону ограничивающего прямоугольника с закругленными углами и завершите фигуру на левом нижнем краю дома.

Разверните тень в обратном направлении. Растрируйте слой тени. При помощи «Волшебной палочки» выберите весь слой ограничивающего прямоугольника с закругленными углами и инвертируйте выделение(можете использовать комбинацию клавиш Ctrl + Shift + I). При активном выделении(обозначенном мигающей линией) выберите слой с тенью и нажмите удалить.

Наша векторная иконка предмета готова. Чтобы сохранить его, перейдите в Файл> Сохранить для Web(комбинация клавиш Ctrl + Shift + Alt + S). Сохраните изображение в формате PNG-24, при этом установите флажок для опции «Прозрачность». Мы будем все сохранять в формате PNG-24, поскольку он поддерживает прозрачные пиксели.

Далее мы создадим векторную иконку «Записи«:

  1. Откройте Photoshop и повторите первый и второй шаги предыдущего раздела;
  2. Нарисуйте прямоугольник с закругленными углами с размером 929 на 929 пикселей и радиусом 38 пикселей. Я использовал цвет #f5ea74, чтобы иконка была похожа на стикер;
  3. Нарисуйте линию шириной в 1 пиксель с цветом #5d5608 в верхней части стикера;
  4. Нарисуйте линии шириной в 15 пикселей. Обратите внимание на отступы. Я сделал их шире, чтобы векторная иконка предмета воспринималась минималистично. Компактность будет отличительной чертой плоского дизайна;
  5. Нарисуйте прямоугольник, который будет символизировать изображение на стикере;
  6. Нарисуйте тень, как мы это делали для иконки «Домашняя страница«;
  7. Сохраните изображение!

А это векторные иконки «О себе» и «Связаться со мной«:

Скачать весь пакет

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *