Фотошоп для фотографа 2013

Рисуем макет сайта для студии веб-дизайна используя Фотошоп

| Категория: Уроки по созданию дизайна в Фотошопе | Сложность урока: Средняя

В данном уроке Фотошопа мы рассмотрим, как можно нарисовать макет/дизайн сайта для студии веб-дизайна.


Финальный результат

Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Приступаем к уроку Фотошопа


Создаем новый документ 760 на 700 пикселей с цветом фона #d9d9d9 (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")).


Меняем масштаб на 50% (Zoom Tool Инструмент - Лупа (Инструмент Лупа / Клавиша "Z")). Берем инструмент Pen Tool Инструмент - Перо (Инструмент Перо / Клавиша "P") и рисуем фигуру как на рисунке (рисуйте с нажатой клавишей Shift).


Рисуем макет сайта для студии веб-дизайна используя Фотошоп

С этим же инструментом нажмите с зажатой клавишей Ctrl один раз на уголок вашей фигуры.


Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Зажмите клавишу Alt и переместите уголок вашего пути (контура) как показано на рисунке: ↓


Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Сделайте тоже самое с еще одной точкой пути: ↓


Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Зажмите клавишу Ctrl и переместите две средние точки как на рисунке: ↓


Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Теперь у вас есть хорошая фигура: ↓


Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Добавляем стили слоя - Blending Options (Параметры наложения): ↓


Drop Shadow (Тень): ↓

Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Gradient Overlay (Наложение градиента): ↓

Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Параметры градиента: ↓

Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Stroke (Обводка): ↓

Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Дублируем фигуру. Edit > Transform > Flip Horizontal (Редактирование > Трансформация > Отразить по горизонтали). Должно получиться нечто такое: ↓


Рисуем макет сайта для студии веб-дизайна используя Фотошоп

С инструментом Move Tool Инструмент - Перемещение (Перемещение / Клавиша "V") поместите эти две фигуры так, как на рисунке: ↓


Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Дублируем эти два слоя (Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш "Ctrl+J")). К копиям применяем Edit > Transform > Flip Horizontal (Редактирование > Трансформация > Отразить по горизонтали). С инструментом Move Tool Инструмент - Перемещение (Перемещение / Клавиша "V") ставим их вниз шаблона.


Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Дублируем самый первый слой (Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш "Ctrl+J")), который мы создали и помещаем его также как на рисунке: ↓


Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Дублируем этот слой (Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш "Ctrl+J")). Edit > Transform > Flip Vertically (Правка > Трансформация > Отразить по вертикали). Помещаем фигуру как на рисунке: ↓


Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Выделяем два слоя из середины нашего шаблона. Склеиваем их (Ctrl+E). Добавляем стили слоя - Blending Options (Параметры наложения): ↓


Drop Shadow (Тень): ↓

Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Gradient Overlay (Наложение градиента): ↓

Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Параметры градиента: ↓

Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Stroke (Обводка): ↓

Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Параметры градиента: ↓

Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Результат: ↓

Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Вставляем интересные и нужные картинки: ↓


Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Добавляем еще картинки и текст: ↓


Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Добавляем логотип: ↓


Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Создаем новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")). Выбираем инструмент Pencil Tool Инструмент - Карандаш (Инструмент Карандаш / Клавиша "B") с размером кисти 1 пиксель. Изменяем масштаб до 1600% (Zoom Tool Инструмент - Лупа (Инструмент Лупа / Клавиша "Z")). Рисуем несколько точек на новом слое.


Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Дублируем этот слой несколько раз и помещаем стрелочки как на рисунке: ↓


Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Осталось еще пустое место, туда можно поставить все что захотите: ↓


Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Добавляем детали, например точки.


Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Выбираем инструмент Custom Shape Tool Инструмент - Произвольная фигура (Инструмент "Произвольная фигура" / Клавиша "U") и выбираем такую заготовку: ↓


Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Рисуем одну фигуру, затем дублируем её много раз. Ставим стрелки как на рисунке: ↓


Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Вот и все.


Финальный результат

Рисуем макет сайта для студии веб-дизайна используя Фотошоп

Урок подготовлен для Вас командой сайта PhotoshopPro.ru