Java, UX, HTML, CSS, WEB-design

Как создать набор плоских навигационных иконок в Adobe Photoshop

Краткое описание по статье Как создать набор плоских навигационных иконок в Adobe Photoshop

Название: Как создать набор плоских навигационных иконок в Adobe Photoshop . Краткое описание: ⭐ Надеюсь, после завершения этого урока вы приоб . Дата публикации: 15.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

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

Сколько лет сайту?

Возраст составляет 3 года


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

Кроме того, направление плоского дизайна не только эстетически красиво, но и имеет функциональное назначение.

Ваш дизайнерский набор инструментов
Неограниченное количество загрузок: более 500 000 веб-шаблонов, наборов иконок, тем и элементов дизайна


Неограниченное количество загрузок: более 500 000 шрифтов, веб-шаблонов, тем и элементов дизайна


Создание плоской домашней иконки в Photoshop

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

фнал2-570x456

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

плоский-значок-учебник-дом-значок-1

Использовать Прямоугольник с закругленными углами инструмент и создайте новую форму с размерами 1736 пикселей x 1736 пикселей, радиус 83px, цвет #82d8b5 (или выберите для этого свой собственный цвет).

плоский-значок-учебник-дом-значок-2

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

плоский-значок-учебник-дом-значок-3

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

плоский-значок-учебник-дом-значок-4

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

плоская иконка-tutorialhome-icon-5

(Вы можете сохранить его как изображение в этой части. На самом деле это можно рассматривать как плоский значок «Домой». Но я все еще хочу добавить длинную тень, так что не отставайте.)

Далее с помощью ручка инструмент, с #000000 заливка цветом, рисование фигуры. Начните с правого края крыши. (На краю, где пересекаются красный, белый и красный цвета) Расширьте рисунок за пределами ограничивающего прямоугольника со скругленными углами и замкните фигуру в нижнем левом краю изображения дома. Вы придете к этому:

дом значок-7

Отправьте тень назад. Растрируйте слой с тенью. С помощью Волшебная палочка выберите весь ограничивающий слой прямоугольника со скругленными углами и инвертируйте выделение (вы можете использовать ярлык CTRL+Shift+I). Не снимая выделение (марширующие муравьи), кликните по теневому слою и нажмите Удалить.

дом значок-8

дом значок-12

Ваша иконка готова. Чтобы сохранить его, нажмите на Файл>Сохранить для Интернета (Ярлык CTRL+Shift+ALT+S). Сохранить как PNG-24, с проверкой прозрачности. Мы хотели бы, чтобы все было сохранено как PNG-24 поскольку он поддерживает прозрачность.

дом значок-13

плоская иконка-учебник

Далее мы будем работать над Почта значок.

Создаем плоскую иконку поста в Photoshop

1. Я открыл Photoshop и повторил первый и второй шаги урока.

плоский-значок-учебник-дом-значок-1

плоский-значок-учебник-дом-значок-2

2. Нарисуйте прямоугольник со скругленными углами размером 929 на 929 пикселей и радиусом 38 пикселей. Я использовал цвет #f5ea74, чтобы он напоминал стикер.

пост-иконка-финал-1

3. Нарисуйте линию толщиной 1 пиксель цветом #5d5608. Поместите его в верхнюю часть стикера.

пост-значок-финал-2

4. Нарисуйте 15 пиксельных линий, как показано ниже:

пост-значок-финал-3

пост-значок-финал-4

пост-иконка-финал-6

пост-иконка-финал-5

Обратите внимание на интервал. Я разместил их немного шире, чтобы придать иконке минималистский вид. Минимализм — это особенность плоского дизайна.

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

пост-значок-финал-7

6. Нарисуйте тень, как вы делали это в уроке по значкам дома.

пост-иконка-финал-9

пост-иконка-финал-8

7. Сохрани это!

пост-иконка-финал-10

Значки «Обо мне» и «Свяжитесь со мной»

Вы можете скачать весь пакет здесь.

пост-иконка-финал-финал-о

post-icon-final-final-контакт

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.


Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — Как создать набор плоских навигационных иконок в Adobe Photoshop

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

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

Ваш адрес email не будет опубликован.

Кнопка «Наверх»