Как сделать иконку flat
В статье « Особенности FLAT – дизайна » я сделала небольшой экскурс в историю появления достаточного нового направления в дизайне. Сегодня я хочу показать, как с помощью простых фигур в Photoshop можно создать элементы FLAT – дизайна. Речь пойдет о создании иконок в космическом стиле.
Выбор цветовой гаммы для flat дизайна
Для начала определимся с цветами, которые будем использовать.
Иконка с ракетой
Шаг1. Нарисуйте на рабочей области эллипс размером 512х512 px. Цвет — #304c5a.
Шаг2. Нарисуем ракету. Для этого в центре уже нарисованного эллипса поместим еще один белый эллипс.
В группе инструментов «Перо» выберите инструмент «Угол», щелкните им по белому эллипсу, появятся направляющие точек. Щелкните инструментом «Угол» по верхней точке, чтобы образовать угол на вершине эллипса. И немного потяните направляющие, если захотите придать округленность вершине.
Шаг 3. В группе инструментов фигур выберите прямоугольник. Убедитесь, чтобы на панели свойств фигуры был выбран режим «Пересечения». Постройте прямоугольник поверх нашего эллипса как на рисунке ниже. Нижняя часть эллипса обрежется.
Шаг 4. Создайте новую фигуру прямоугольника поверх имеющейся. Цвет — #dedede. Откадрируйте ее по форме имеющейся фигуры, — для этого установите указатель мыши между слоями с прямоугольником и слоем основании ракеты так, что курсор изменился на значок с двумя пересеченными кружками и стрелочкой. И щелкните левой клавишей мыши. Получится следующее.
Шаг 5. Нарисуйте под основанием ракеты еще одну ступень. С помощью инструмента «Прямоугольник с закругленными краями».
Шаг 6. Создадим окно иллюминатора, размером 100х100px с помощью инструмента «Эллипс»
Шаг 7. Используя инструменты и фигуры такие же, как в шаге 3 создадим огонь для нашей ракеты.
Пристроим огонь к нашей ракете.
Шаг 8. Используя инструмент прямоугольника из набора фигур, на заднем плане ракеты создадим тень для нее. Цвет черный, прозрачность слоя 50%, угол наклона 45 градусов.
Отредактируем прямоугольник, используя инструмент Стрелка (А).
Шаг 9. Создадим для тени слой маску – Слои – Слой-Маска – Показать все. Зальем ее черно-белым градиентом. Режим наложения поменяем на умножение.
Сведем изображение тени под изображение круга иконки.
Шаг 10. Нарисуем красный нос ракеты.
Шаг 11. Добавим с помощью эллипсов вспомогательные элементы на иллюминатор ракеты и нарисуем звезды.
Иконка с планетой
Принцип действий остается прежним, поэтому буду краткой.
Шаг 1. Создайте эллипс размером 512х512 px. Цвет — #304c5a. Поверх создайте эллипс планеты меньшего размера. Цвет — #ffd9a2. Поверх эллипса создайте несколько прямоугольников, подберите различные оттенки цвета планеты. Затем объедините прямоугольники в один слой и поверните на небольшой угол.
Откадрируйте слой с прямоугольниками по кругу планеты.
Шаг 2. Поверх планеты создайте белый эллипс, сдвиньте его вверх и влево, сделайте полупрозрачным и откадрируйте по форме планеты.
Шаг 3. Теперь нужно добавить астероидный пояс, который мы будем делать с помощью эллипса. Сначала нарисуем один эллипс, затем выберем на панели инструментов параметр «Вычесть из области фигуры» и нарисуем эллипс поменьше.
Шаг 4. Наклоните астероидный пояс и скройте ненужную часть за слой-маской.
Шаг 5. Создайте тень с помощью прямоугольников в два этапа.
Добавим звезды и фон.
Иконка с радиотелескопом
Шаг 1. Создайте эллипс размером 512х512 px. Цвет — #304c5a. Нарисуйте красный эллипс и обрежьте его с помощью слой-маски.
Добавьте поверх прямоугольник более темного цвета и откадрируйте его по форме радиотелескопа. Это поможет сделать его более детализированным. Так же нужно добавить эллипс более светлого цвета, чем фон, чтобы добавить объемности радиотелескопу.
Шаг 2. С помощью инструмента «Многоугольник» из группы «Фигуры» нарисуйте треугольник. Трансформируйте его так, чтобы получилась антенна, и добавьте к ней эллипс.
С помощью инструмента «Многоугольник» нарисуйте треугольное основание под эллипсом. Затем вырежьте в нем фигуру треугольника с помощью того же инструмента. Не забудьте, что нарисованную фигуру, даже ту, которую мы используем для вычитания элементов можно двигать с помощью инструмента «Выделение контура».
Шаг 3. Добавьте тень и звезды.
Подписывайтесь на обновления блога «Дизайн в жизни»
и мы обязательно опубликуем для вас еще больше полезных уроков Photoshop!
25 июля 2013 | Опубликовано в Уроки | 20 Комментариев »
В этом уроке речь пойдет о плоском дизайне. Мы будет создавать flat-иконки в Adobe Illustrator. Умение создавать простые иконки может вам пригодиться в любом проекте, когда вам в быстрые сроки нужно создать набор простых иконок.
Конечный результат
1. Настройка документа
2. Создаем иконку увеличения
При изготовлении иконок нужно учитывать, где будут использоваться иконки. В уроке будем создавать иконки размером 128×128 пикселей. Мы будем придерживаться основных цветовых размеров, создавать острые углы с применением теней к формам.
Шаг 1
Создадим основные формы будущей иконки, далее отрегулируем стили, используя несколько Graphic Styles. Выбираем инструмент и создаем прямоугольник
Для начала выбираем инструмент Rounded Rectangle Tool и создаем прямоугольник размерами 20 х 80.
Шаг 2
Выбираем инструмент Ellipse Tool (L) и создаем несколько кругов. Размеры для кругов 70 x 70px, потом 55 x 55px, потом 40 x 40px и наконец 15 x 15px. Размещаем их, как видим на рисунке ниже.
Шаг 3
Выбираем инструмент создаем несколько прямоугольников, которые будут размещены, как показано на скриншоте ниже. Высота и ширина прямоугольников не будет иметь значение — они должны просто быть размещены в центре и мы будем определять области пересечения. Также мы будем создавать тень. Рисуем квадрат, поворачиваем его на 45 º, чтобы края нижней линии совпадали с нижним кругом и нижним прямоугольником с закругленными углами.
Шаг 4
С помощью панели Pathfinder, будем использовать кнопки Unite, Minus Front и Intersect, чтобы создать формы для будущих теней. Нужно также помнить, что при использовании этих документов, нам придется дублировать формы, для получения нужных результатов. На скриншоте ниже мы видим красные и белые формы (белые формы потом станут нашими тенями).
Шаг 5
Теперь приступим к созданию тени. Дублируем самый большой круг и его ручку и объединим его в одну форму. Создайте копию новой формы и сместим на
Шаг 6
Шаг 7
С основными формами закончили. Давайте определим некоторые стили к ним. Выбираем все элементы, с которых состоит лупа и повернем их на 45º против часовой стрелки.
Теперь выбираем все элементы. которые будут создавать наши тени. Это белые формы на ручке и круглой форме, а также тень. Заполняем участки черным цветом и снижаем непрозрачность до 15%. Не забудьте удалить обводку. Как только это сделали, перейдите к Window > Graphic Styles и кликнете на кнопке New element в правом нижнем углу, чтобы создать графический стиль.
Шаг 8
Выберите форму ручки и перейдите на панель Appearance (Window > Appearance). Введите информацию, как показано на скриншоте ниже. Основной цвет — плоский серый, далее добавляем другой слой поверх и заливаем его черно-белым градиентом с углом 45º и непрозрачностью Opacity на 25%. Установите режим наложения на Overlay. Сохраните настройки как графический стиль.
Шаг 9
Выберите самый нижней круг. Будем использовать подобные настройки стилей, только уже в этом случае будем применять более светлый оттенок серого. Сохраняем еще раз графический стиль.
Шаг 10
Выбираем меньший круг и применяем к нему стиль, как в предыдущем шаге, толь ко уже в этот раз наш градиент будет от светлого к темному.
Шаг 11
Выбираем внутренний круг, который будет нашим объективом. Для этой формы будем использовать подобный стиль, только уже вместо серого будем применять синий. Не забудть также сохранить Graphic Style.
Шаг 12
Наконец, добавим цвет к созданным формам обводки. Выбираем все зеленые элементы, заполняем их сплошным белым цветом и снижаем непрозрачность до 25%. Проверьте, что вы не забыли сохранить этот графический стиль также. Последний круг будет иметь белую заливку и непрозрачность 100%.
3. Создаем иконку шестеренки
Давайте создадим контуры для нашей следующей иконки. Выбираем инструмент Rounded Rectangle Tool и создаем прямоугольник размерами 20 х 110px, привязываем его к рабочей области. Три раза дублируем эту форму и разместим копии под углом 45 º относительно друг друга.
Шаг 2
Далее выбираем Ellipse Tool (L) и создаем несколько кругов. Размеры кругов — 90 x 90px,60 x 60px и 30 x 30px. Размещаем их, как видим на скриншоте ниже.
Шаг 3
Шаг 4
Давайте снова приступим к созданию форм будущих теней. Смотрим на скриншоты внизу и создаем подобные фигуры. С помощью панели Pathfinder создаем дополнительные фигуры. Эти шаги нам уже знакомы с предыдущей иконки.
Шаг 5
Создадим тень. Дублируйте нижнюю форму и сместите ее на 15px вверх. Смешиваем две формы, затем нажимаем Expand и Unite.
Шаг 6
Создаем дополнительные формы (с помощью копирования и перемещения нужных форм, как делали это с предыдущей иконкой).
Шаг 7
Наконец, поворачиваем форму и применяем к ней уже сохраненные графические стили.
4. Создаем иконку глаза
Шаг 1
Шаг 2
Шаг 3
Теперь выберите все эти формы и поверните их на 45 ° по часовой стрелке. После того, как создадим все тени и блики, повернем форму в другую сторону.
Шаг 4
Выбираем инструмент Ellipse Tool (L) и создаем овал размерами 15 х 20, выравниваем его, как показано на скриншоте ниже.
Шаг 5
Создаем тени и блики, как делали это раньше. Разделяем формы прямоугольником и используем инструменты панели Pathfinder.
Шаг 6
Выбираем все формы и еще раз поворачиваем их на 45 º в обратную сторону. Применяем к формам графические стили. Для основной части глаза будем использовать серый цвет, для радужки — синий градиент, для зрачка — темно-серый.
5. Создаем Чат-иконку
Шаг 1
Мы на полпути к созданию наших иконок. Приступим к созданию следующей. С помощью инструмента Rounded Rectangle Tool создаем прямоугольник размерами 80 x 75px.
Шаг 2
С помощью Rectangle Tool (M) создаем прямоугольник размерами 25 х 15, выровняем его по центру и смещаем на 15px справа.
Шаг 3
С помощью инструмента Ellipse Tool (L) создайте три круга размерами 15 х 15 и выравнивание относительно центра прямоугольника с закругленными углами, как показано ниже.
Шаг 4
Выбираем инструмент Direct Selection Tool (A), нижнюю левую точку прямоугольника и удаляем ее. Это позволит нам создать треугольник. Убедитесь, что все пути закрыты.
Шаг 5
Выберите треугольник и прямоугольник о объедините их. Теперь выберите эту фигуру, дублируйте ее и отразите по горизонтали. Сдвиньте ее вправо и вниз на 15 px.
Шаг 6
Шаг 7
Будьте осторожны при создании теней. Нужно помнить, что верхний круг будет отбрасывать тень на нижний. Для создания теней будем использовать прямоугольник такой же высоты, что и сами круги. Удалите лишние части.
Шаг 8
Возвращаем на место наши объекты и применяем к ним графические стили. Нижний пузырь будет темно-серый. Верхний светло-серый. Наши точки будут синего цвета.
6. Создаем значок часов
Шаг 1
Переходим к созданию часов.С помощью Ellipse Tool (L) создайте несколько кругов размерами 100x100px, 75x75px и 10x10px. Размещаем их как показано ниже.
Шаг 2
Создаем стрелки часов. Выберите Rectangle Tool (M) и создайте прямоугольники размерами 10×30 и 10х20px и 2 х 30 px.
Шаг 3
Переходим на инструмент Rotate Tool ® и выбираем длинные тонкие прямоугольники. Наводим курсор на центральную точку формы и перемещаем ее вниз. Поворачиваем форму на 135 º по часовой стрелке. Подобное сделайте и с коротким прямоугольником.
Шаг 4
Шаг 5
Разрезаем формы на две части, как это делали раньше.
Шаг 6
Возвращаем форме прежнее месторасположение и применяем графические стили. Циферблат будет светло-серым. Минутная и часовая стрелка будет иметь серый цвет, секундная — синий.
7. Создать значок календаря
Шаг 1
Вот мы приступили и к последнему нашему значку. Выбираем инструмент Rounded Rectangle Tool и создаем прямоугольник размерами 90 x 80px.
Шаг 2
Шаг 3
Выберите инструмент Rectangle Tool (M), создайте прямоугольник размерами 90 х 25 пикселей и разместите его в верхнюю часть формы. Дублируем фигуру и нажимаем кнопку Intersect с панели Pathfinder.
Шаг 4
Создаем два прямоугольника с закругленными углами размерами 15 x 30px. Разместите на верхней части формы, как показано на скриншоте ниже.
Шаг 5
Переходим на Type Tool (T) и вводим число. Можете использовать любое число. В моем случает это будет «9». Вместо шрифта будем использовать «Helvetica» с размером 50px. Переходим в Object > Expand и конвертируем шрифт в путь.
Шаг 6
Шаг 7
Возвращаем формам обратное место расположение и применяем к ним определенные графические стили. Нижний прямоугольник с закругленными углами будет светло-серым, угол — белым.
Конечный результат
Добавляем темно-серый цвет в качестве цвета фона. Не стесняйтесь экспериментировать.