Создаем макет для сайта студии веб - дизайна
Нравится(+) 0 Не нравится(-)

Создаем макет для сайта студии веб - дизайна - уроки фотошоп



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


Для начала мы сделаем красочный фон, а затем превратим его в хороший макет.
Давайте начнем наш урок с создания нового документа размером: 960х900 пикс. установим цвет переднего плана на # 141414. Затем инструментом Заливка (Paint Bucket) нажмете один раз в вашем документе.
Далее активируем Кисть (Brush Tool), мягкую круглую кисть, и сделаем 3 пятнышка в макете следующими цветами:
# A864a8
# Ed1c24
# 662d91

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

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

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Затем перейдем в Фильтр-> Шум-> Добавить шум (Filter-> Noise-> Add Noise).

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

И используйте следующие параметры.

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Ваш макет будет выглядеть, примерно так.

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Затем перейдем в Фильтр-> Размытие-> Размытие в движении (Filter-> Blur-> Motion Blur).

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Установим Угол (Angle) 90 и Смещение (Distance) на 998

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

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

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Создадим новый слой (нажмите CTRL + SHIFT + ALT + N).

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Еще раз активируем Кисть (Brush Tool) белого цвета.

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

И будем использовать еще раз большую, мягкую, круглую кисть.

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Затем этой кистью создадим другую точку на нашем макете.

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Потом изменим Режим смешивания слоя (Blend Mode) на Перекрытие (Overlay).

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Теперь создадим панели навигации. Для этого нам понадобится инструмент Прямоугольник (Rectangle Tool)
С помощью этого инструмента создадим простую форму.

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Затем выберем Прямоугольник со скругленными углами (Rounded Rectangle Tool), и установим радиус до 6 пикселей.

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Активируем Сетку (Grid), чтобы лучше скоординировать наш макет в следующих шагах.

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) создайте 3 формы, как на рисунке ниже.

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Теперь добавим некоторые Cтили слоя (Add a layer style):

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Вот что должно получиться.

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Создадим другие формы с помощью того же инструмента:

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Для всех этих форм добавим следующие Cтили слоя (Add a layer style):

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Вот что получилось.

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Наш урок дизайна почти закончен, осталось только добавить текст и некоторые элементы.
Как обычно активируем инструмент Горизонтальный текст (Horizontal Type Tool) и напишем текст.

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Теперь добавим изображение в верхней части макета.

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Там же, добавим две стрелки инструментом Произвольная фигура (Custom Shape Tool).

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

Вот что у нас получилось.

Создаем макет для сайта студии веб - дизайна - уроки фотошоп

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

Сайт: Stadion-Kuban.ru

Виджет на Яндексе: yandex.ru/?add=111794

Мы ВКонтакте:

И в Твиттере: twitter.com/Stadion-Kuban

Информация
Автор / Разработчик
Артеменко Любовь
Перевел
Автор перевода не указан
Сложность
Средняя
Источник
Добавил
Lubashka
Дата
1-11-2020, 21:54
Метки:  еще статьи

Поделиться ссылкой

Прямая ссылка:
BB-code ссылка:
HTML ссылка:

Комментарии (0)

Имя
Эл. почта
Комментарий
Вопрос: 2 * 3 =

Для активации данной функции необходимо зарегистрироваться и авторизоваться на сайте.

Ваш IP: 207.241.237.222
Последние уроки
Опубликовано 14-10-2020, 21:33
Опубликовано 13-10-2020, 20:50
Опубликовано 11-10-2020, 11:28
Опубликовано 7-10-2020, 20:00
Опубликовано 25-09-2020, 19:33
Опубликовано 24-09-2020, 18:42
Архив сайта
.