Flat-дизайн это относительно новое направление в разработке веб-интерфейсов. iOS и даже Windows постепенно адаптируются под этот стиль, и, в скором времени, почти все (если вообще не все) веб-сайты переймут данный подход.

Однажды, проснувшись утром и открыв свой любимый сайт, вы будете удивлены тем, что его внешний вид также flat-дизайн ! И вы немедленно броситесь перерабатывать свой собственный блог или сайт, чтобы быть в тренде.

Исходя из вышесказанного, вопрос напрашивается сам собой: «Почему бы не начать переработку интерфейса уже сегодня »? Так вы сможете быть на шаг впереди остальных!

Вы можете подумать, «С чего же мне начать? » Конечно, реконструкция дизайна сайта это адский труд. Данная статья как раз и посвящена этому – она будет вашей рукой помощи в этом нелегком деле.

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

Все, что вам нужно, это креативность и знание графических программ. Скорее всего, на вашем сайте достаточно много иконок, которые нужно привести flat-виду. Это может отнять много времени. Разумеется, в первую очередь необходимо переработать самые важные из них: те, которые появляются на всех страницах. Можно начать с логотипа или, что еще лучше, иконок навигации.

В данной статье, я постараюсь облегчить решение задачи переработки дизайна и рассказать о том, каким образом создаются иконки навигации во flat-стиле. Я буду использовать графический пакет Adobe Photoshop CS6 (но вы можете без проблем использовать более ранние версии). Приготовьтесь – мы начинаем.

Вот наш конечный результат:

Откройте Photoshop. Создайте новый файл, использовав пресет «Фото » (Photo) (10×8 inch, 300 DPI, прозрачный фон, цветовая схема RGB ).

Выберите инструмент «Прямоугольник со скругленными углами » (Rounded Rectangle) и создайте новую фигуру с размерами 1736 на 1736 пикселей (px), радиусом скругления 83 пикселя и цветом #82d8b5 . Можно задать и свой цвет, наиболее хорошо сочетающийся с дизайном вашего сайта.

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

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

Отправьте тень на самую нижнюю позицию и растрируйте этот слой. Используя инструмент «Волшебная палочка » (Magic wand tool), создайте выделение на слое с большим прямоугольником с закругленными углами, внутри которого находится наш домик, а затем инвертируйте выделенную область (можно использовать сочетание клавиш CMD/CTRL+Shift+I ). Не снимая выделения, выберите слой с тенью и нажмите кнопку «delete ».

Иконка готова. Чтобы сохранить её, нажмите «Файл>Сохранить для веб и устройств.. » (File>Save for Web) (горячая клавиша CTRL + Shift + ALT + S ). Сохраните иконку в формате PNG-24 с включенной прозрачностью.

Мы хотим, чтобы все сохранилось в формате PNG-24 с поддержкой прозрачности.

Теперь, займемся иконкой Post :

Ниже вы можете видеть иконки About Me и Contact Me :

Все иконки можно скачать тут .

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

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

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

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

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

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

Откройте 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. Сохраните изображение!

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

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

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

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

Перевод статьи «How to Create Flat Icons in Photoshop » был подготовлен дружной командой проекта

04.07.2016 27.01.2018

В этом уроке вы узнаете, как создать плоские флэт иконки социальных сетей.

То, что вы будете создавать:

Создавать плоские иконки мы начнем с фона, потом добавим иконкам эффекты, чтобы придать им оригинальность, далее нарисуем длинные тени. Для повторения урока вам понадобится Photoshop CS3 или более поздняя версия.

Ресурсы:

• Шрифт 1 — http://fontawesome.io/cheatsheet/
• Шрифт 2 — http://fontawesome.io/

Шаг 1

Создайте новый файл (Ctrl + N) размером 500 × 400 пикселей.

Создайте новую группу (CTRL+G) и назовите её "Фон".

Шаг 2

Заполните фон цветом # e7e9ea с помощью инструмента Заливка (Bucket Tool) .

Шаг 3

Чтобы добавить больше эффектов на задний план, мы добавим градиент. Нажмите на иконку Корректирующий слой (Adjustment Layer) и выберите Градиент (Gradient ), используйте следующие настройки:

Режим наложения слоя Мягкий свет (Soft Light ) | Непрозрачность: 25%

Шаг 4

Создайте новую группу и назовите её «symbols».

Шаг 5

Прежде чем начать работу, нам нужно настроить меню Линейки и Сетки (Rulers and Grids) . Перейдите в меню Вид-Линейки (View - Rulers ) и Вид-Показать-Сетки (View — Show — Grids ) . Вот мои настройки дляЛинеек и Сеток (их можно открыть, перейдя в Редактирование-Настройки (Edit-Preference) :

Чтобы создать Направляющую линию , нужно просто щелкнуть и перетащить её из линейки. Для создания вертикальной направляющей перетаскивайте из вертикальной линейки и наоборот. Вот как я разделил холст (каждый значок равен 50 × 50 пикселей и расстояние между каждым значком 25 пикселей ):

Шаг 6

В этом уроке мы работаем с помощью шрифта Awesome, вы можете добавить настраиваемые иконки для вашего сайта. Как правило, это делается путем размещения CSS шрифта на ваш сайт, но так как мы работаем с Photoshop, нам нужно скопировать каждый значок, который вы хотите использовать из шпаргалки. Зайдите на страницу, выберите значок, который вы хотели бы нарисовать. Я использовал иконки для следующих (социальные сети) сайтов: Twitter; facebook; Tumblr; Google+;Instagram; YouTube; Twitch; Dropbox; Deviantart; Pinterest; Skype; Feed.

Шаг 7

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

Затем вернитесь в Photoshop и выберите инструмент Текст (Text Tool) на панели инструментов. Измените настройки шрифта, как показано на рисунке:

Теперь вставьте значок, который вы только что скопировали. (Щелкните правой кнопкой мыши-Вставить )

Шаг 8

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

Шаг 9

Создайте новую группу и переименуйте её в «icon bg», поместите группу ниже группы «symbols».

Шаг 10

Создайте новый слой и поместите его в группу, созданную в предыдущем шаге. Я переименовал слой в «icon bg».

Шаг 11

Используя инструмент Прямоугольник с округленными углами (Rectangular Circle Shape Tool) (расположенный на панели инструментов ниже инструмента Текст (Text Tool)) я создал фон иконок,

Вот все цвета, которые я использовал:
Twitter: # 6bd1f4 ;
Facebook: # 5a93cb ;
Tumblr: # 3c6a9c ;
Google +:#e44940 ;
Instagram:#9bd29d ;
Youtube:#f4504c ;
Twitch:#a96db6 ;
Dropbox:#81d5ed ;
Deviantart:#6e8e61 ;
Pinterest:#f25f5f ;
Skype:#67d5f4 ;
Feed:#e9951d ;

Вы можете использовать эти цвета, а можете использовать цвета на свое усмотрение - так работа приобретет оригинальность.

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

Шаг 12

Если вы довольны результатом на данном этапе, вы можете идти дальше, но если хотите придать живости иконкам, давайте продолжим улучшения. Начнем со стиля слоя Тень (Drop Shadow). Откройте группу «symbols», выберите одну из иконок и щелкните значок Fx -Тень (Fx-Drop Shadow)

Шаг 13

Повторите предыдущий шаг с остальными значками. Для того, чтобы сделать вашу работу намного проще, щелкните правой кнопкой мыши на слое-Копировать стиль стоя (-Copy Layer Style) . Затем выберите остальные слои с иконками, щелкните правой кнопкой мыши-Вставить стиль слоя (-Paste Layer Style) .

Шаг 14

Теперь добавим внутреннюю тень на задний план каждого значка. Открываем группу «icons bg», выбираем слой с иконкой, нажимаем на значок Fx -Внутренняя тень (Fx-Inner Shadow ) . Используйте следующие параметры:

Шаг 15

Создайте новый слой и назовите его «Gloss Effect». Измените цвет переднего плана на #ffffff ; и при помощи инструмента Прямоугольная область (Rectangular Marquee Tool) создайте несколько прямоугольников, наполовину меньше размера иконок (приблизительно 50×25 пикселей ). Сделайте это для всех иконок.

Затем измените режим наложения на Мягкий свет (Soft Ligh), снизьте непрозрачность (Opacity) слоя до 20% , а заливку (Fill) до 80% .

Шаг 16

Отключите видимость слоя «Gloss Effect». Создайте новый слой и назовите его «Long Shadow». Этот шаг является немного сложнее по сравнению с остальными эффектами. Поместите новый слой ниже слоя «Gloss Effect».

Шаг 17

Возьмите инструмент Полигональное лассо (Polygonal Lasso Tool) и начните создавать прямоугольную тень, касаясь ребра иконки только с правой нижней стороны, затем сделайте диагональную линию, пока она не достигнет нижнего правого края фона значка, сделайте прямую линию, пока она не достигнет центра фона, затем соедините линии. На изображении вы можете рассмотреть более наглядно, как рисовать длинную тень.

Шаг 18

Последний шаг! Уменьшите непрозрачность (Opacity) слоя с тенью до 10% , и заливку (Fi ll ) до 0% .

Теперь Нажмите на иконку Fx и выберите Наложение цвета (Color Overlay) . Используйте следующие параметры:

Теперь выберите Наложение градиента (Gradient Overlay) и используйте эти настройки:

Финальные результаты:

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

Шаг 1.

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

Шаг 2.

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

Шаг 3.

Используйте с радиусом 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.

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

Шаг 23.

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

Шаг 24.

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

Шаг 25.

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

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

Шаг 26.

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

Шаг 27.

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

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

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

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

Шаг 1: Создание фигуры облака

Создайте новый документ 745х200 пикслей. Установите основной цвет голубой #48abff . Возьмите инструмент "Эллипс" щелкните левой кнопкой мыши по документу, в диалоговом окне установите ширина и высота: 70 пикселей

Сделайте дубликат фигуры, для этого нажмите сочетание клавиш Ctrl + J. С помощью стрелки передвиньте фигуру в право

Снова возьмите инструмент "Эллипс", щелкните по документу и установите ширина/высота: 90 пикселей;. Поместите фигуру как показано ниже:

Создайте еще одну фигуру, только в этот раз ширина и высота: 40 пикселей;. У вас должно получится, так:

Теперь нужно выровнять нижнюю часть облака. Для этого воспользуйтесь инструментом "Прямоугольник" установив ширина: 90 пик.; высота: 30 пик;

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

Сделайте дубликат смарт-объекта. Для этого нажмите Ctrl + J. Установите значение параметра Заливка: на 1%.

Перейдите на основной слой со смарт объектом, с помощью трансформации немного уменьшите фигуру. Для этого откройте вкладку Редактирование - > Трансформирование -> Масштабирование или нажмите сочетание клавиш Ctrl+ T.

Теперь объедините эти два смарт объекта в один смарт объект. Как это сделать было написано выше. Назовите данный слой "Облако".

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

Шаг 2: Добавление иконок

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

Итоговый результат: Набор векторных иконок в форме облака

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