На Вашем компьютере обнаружен устаревший браузер!
(Доступ на сайт будет ограничен)
Советуем Вам скачать новую версию браузера:

Вход на сайт

Рекомендуем ознакомиться со следующими разделами Фотошопа:




Разместите здесь свою рекламу
Главная » Photoshop » Создаем макет для сайта студии веб — дизайна
01.11.2020

Создаем макет для сайта студии веб — дизайна

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

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

Сложность: низкая
Время: до 1 часа

Навыки для «прокачки»:
- работа с фильтрами
- работа с режимами смешивания слоев
- создание макета по сетке (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).

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

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

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

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

Автор/Переводчик: Артеменко Любовь
Ссылка на источник: http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

(+7 баллов, 7 оценок)
Loading ... Loading ...
Написать комментарий

Подписаться, не комментируя

.