![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/ramka9.jpg)
В этом уроке веб дизайна вы узнаете, как легко можно создать светящийся макет с прозрачными кнопками.
Навыки для «прокачки»:
- работа с фильтрами
- работа с режимами смешивания слоев
- создание макета по сетке (grid)
- создание простых формДля начала мы сделаем красочный фон, а затем превратим его в хороший макет.
Давайте начнем наш урок с создания нового документа размером:
960х900 пикс. установим цвет переднего плана на
# 141414. Затем инструментом
Заливка (Paint Bucket) нажмете один раз в вашем документе.
Далее активируем
Кисть (Brush Tool), мягкую круглую кисть, и сделаем 3 пятнышка в макете следующими цветами:
# A864a8
# Ed1c24
# 662d91
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/1.jpg)
Пожалуйста, обратите внимание, размер кисти должен быть
600 пикселей.
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/2.jpg)
Затем перейдем в
Фильтр-> Шум-> Добавить шум (Filter-> Noise-> Add Noise).
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/3.jpg)
И используйте следующие параметры.
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/4.jpg)
Ваш макет будет выглядеть, примерно так.
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/5.jpg)
Затем перейдем в
Фильтр-> Размытие-> Размытие в движении (Filter-> Blur-> Motion Blur).
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/6.jpg)
Установим
Угол (Angle)
90 и
Смещение (Distance) на
998![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/7.jpg)
Это очень простой способ создать хороший фон для вашего сайта. На изображении ниже вы можете посмотреть, как должен выглядеть ваш макет.
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/8.jpg)
Создадим новый слой (нажмите
CTRL + SHIFT + ALT + N).
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/9.jpg)
Еще раз активируем
Кисть (Brush Tool) белого цвета.
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/10.jpg)
И будем использовать еще раз большую, мягкую, круглую кисть.
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/11.jpg)
Затем этой кистью создадим другую точку на нашем макете.
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/12.jpg)
Потом изменим
Режим смешивания слоя (Blend Mode) на
Перекрытие (Overlay).
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/13.jpg)
Теперь создадим панели навигации. Для этого нам понадобится инструмент
Прямоугольник (Rectangle Tool)
С помощью этого инструмента создадим простую форму.
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/14.jpg)
Затем выберем
Прямоугольник со скругленными углами (Rounded Rectangle Tool), и установим радиус до 6 пикселей.
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/15.jpg)
Активируем
Сетку (Grid), чтобы лучше скоординировать наш макет в следующих шагах.
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/16.jpg)
Инструментом
Прямоугольник со скругленными углами (Rounded Rectangle Tool) создайте 3 формы, как на рисунке ниже.
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/17.jpg)
Теперь добавим некоторые
Cтили слоя (Add a layer style):
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/18.jpg)
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/19.jpg)
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/20.jpg)
Вот что должно получиться.
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/21.jpg)
Создадим другие формы с помощью того же инструмента:
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/22.jpg)
Для всех этих форм добавим следующие
Cтили слоя (Add a layer style):
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/23.jpg)
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/24.jpg)
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/25.jpg)
Вот что получилось.
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/26.jpg)
Наш урок дизайна почти закончен, осталось только добавить текст и некоторые элементы.
Как обычно активируем инструмент
Горизонтальный текст (Horizontal Type Tool) и напишем текст.
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/27.jpg)
Теперь добавим изображение в верхней части макета.
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/28.jpg)
Там же, добавим две стрелки инструментом
Произвольная фигура (Custom Shape Tool).
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/29.jpg)
Вот что у нас получилось.
![Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп](/uploads/2011/11/30.jpg)
Вот так легко и просто с помощью наших уроков веб дизайна можно создать красивые макеты. Всего вам доброго и творческих успехов.