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

Конечный результат:

Шаг 1

Откройте Photoshop,  перейдите в меню File> New, введите имя для будущего PSD-файл и ширину и высоту (1000 × 1400 пикселов).

Совет: Сохраните документ прямо сейчас, чтобы потом облегчить процесс сохранения файлов. Для это нажмите Файл> Сохранить как. В дальнейшем вам нужно будет просто нажать Ctrl / Cmd + S для сохранения обновлений.

Нажмите Ctrl / Cmd + R для отображения линейки, чтобы в дальнейшем создавать направляющие, которые очень помогут при создании каждого элемента. 

Создайте первую горизонтальную направляющую на отметке высоты в 60 pх. Создайте новую группу и в ней новый слой, который назовите «menu».  Используя инструмент Rectangular Marquee Tool (M), создаем прямоугольник размерами 1000x60px темно-синего цвета — # 112d3b.

Используйте инструмент Text tool (T) , создаем основные элементы меню. В уроке был использован шрифт  Helvetica Neue  с цветом # cde1ea.

Создайте новый слой и создать на нем прямоугольник ( размерами 80 * 70 px).

Перейдем в меню Layer> Layer Style, чтобы добавить наложение градиента и внутренние тени.

Создайте снова новый слой с линией размерами в 3px, используя тот же темно-синий цвет, что и для прямоугольника menu. Используя  Custom Shape Tool (U), создаем треугольник в середине предыдущего прямоугольника. 

Используйте еще раз инструмент Текст (T), чтобы добавить белую ссылку.

Смотрите результат ниже.

Шаг 2

Карта была скачана с ресурса Shutterstock.  EPS файл открываем в  Illustrator, выбираем бэкграунд, копируем его и вставляем в документ Photoshop. Создаем группу и  разместим новый слой в нее 

Используйте инструмент Text (T), чтобы создать название вашей карты. Размещаем  в центре вашего документа и добавить  следующие стили слоя. Уменьшить сейчас непрозрачность заднего плана до 40%.

Возвращаемся в Illustrator и копируем карту. Вставляем копию в документ Photoshop.

Шаг 3

Создаем блок, который будет размещен на правой стороне карты и будет использоваться для отображения важных данных, опубликованных на карте. Чтобы создать этот блок, создаем новую группу (меню Layer> New> Group) и называем ее legend.

Используйте теперь Rectangle Marquee Tool (U), чтобы создать  прямоугольника (с размером 120x320px). Уменьшите непрозрачность слоя до 40%.

На маске слоя создаем два градиента — первый снизу вверх, второй — снизу к центру.  

Создаем новый слой, который назовем glow. Изменяем цвет переднего плана на белый. Изменяем настройки градиента, чтобы получить радиальный градиент. Теперь используем его для создания белого свечения. Переключаем режим смешивания на Overlay.

Импортируем изображения земного шара из Illustrator в Photoshop и помещаем его над белым свечением.

Чтобы закончить работу с этим блоком, добавляем текст с помощью инструмента  Text (T), используя цвет #d7e7ee. Добавляем к тексту тень. 

Шаг 4

С помощью  Text  (T) добавляем дополнительные текстовые элементы. Используем для них те же тени, которые мы использовали для текста предыдущего блока. 

Шаг 5

Используйте прямоугольник со скругленными углами (U) и радиусом 3px для создания 3 прямоугольников ((280x174px).  Размещаем их, как показан на изображении ниже. 

Теперь нужно уменьшить их непрозрачность  до 20% и переключить режим смешивания на Overlay. 

Чтобы создать заголовки, нужно импортировать изображение, приведенное на скриншоте ниже из файлов EPS.

Используйте инструмент Текст (T), чтобы добавить свой заголовок. Добавляем ту же тень, что и к слою menu (слой menu> Layer Style> Drop Shadow).

Теперь нужно создать два градиента, которые будет использовать для создания эффектов свечения и тени. Создаем новый слой, который назовем  light gradient. Изменяем цвет переднего плана на белый и создаем радиальный градиент (от цвета переднего плана к прозрачному). 

Нажимаем Ctrl / Cmd + T, чтобы сделать активным инструмент Free Transform и уменьшаем высоту. Уменьшить непрозрачность слоя до 30% и изменяем режим смешивания на Soft Light.

Примените тот же метод для создания черного свечения (он будет использоваться в качестве теней).

Над слоями света и тени создаем новый слой и импортируем туда кольцевую диаграмму. 

С помощью инструмента Text (T), создаем некоторые сноски. 

Шаг 6

Для второго блока, используйте те же шаги, которые использовали ранее для создания заголовка.

Импорт из файла EPS  иконку синего парня. Увеличиваем его размера и нажмите клавишу Enter  для подтверждения импорта.

Используйте Text Tool (T), чтобы добавить в правый блок текст. Создаем  на правой нижней части блока прямоугольник с закругленными углами  желто цвет # f9a61a и размерами  80 × 22 пикселей (используйте Rounded Rectangle Tool (U) с радиусом 2 пикселя).

На этом прямоугольнике, добавьте 3 стили слоя: Inner Shadow, Gradient Overlay и  stroke), чтобы получить результат, как на изображении ниже. 

Используйте инструмент Текст (T), чтобы добавить к кнопке название. Цвет текста — # 865f11, также к нему добавляем тень. 

Создайте новую группу, которую назовите button. В эту группу разместите прямоугольник  с закругленными углами.

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

Импортируем два желтые значки. 

Используйте инструмент Текст (T), чтобы добавить текст возле каждого желтого элемента. 

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

Напомним: чтобы продублировать группу или слой, щелкните правой кнопкой мыши на слое в окне слоев, а затем нажмите на кнопку «duplicate the layer».

Шаг 7

Создать первый синий прямоугольник (# 102d3a), который заполнит нижнюю часть изображения.

Создаем новый слой, который назовем shadow. Изменяем цвет переднего плана на черный и создаем градиент от черного к прозрачному. 

К слою «Тень»  добавляем маску слоя ( (в меню Layer> Layer Mask> Reveal All), с помощью Rectangle Marquee Tool (M) создаем выделение от левой границы к центру и заполняем его нашим градиентом. Аналогичные шаги  делаем для правой стороны. 

Используйте инструмент Текст (T), чтобы создать названия новых блоков. Добавить тень (меню Layer> Layer Style> Drop Shadow).

Используйте Rounded Rectangle Tool (U), чтобы создать белый прямоугольник (280 × 260 пикселей).

Включите режим смешивания blending mode прямоугольника на overlay и уменьшите  непрозрачность до 20%.

За первым прямоугольником, создайте второй белый прямоугольник с размерами 260x150px  и отступом 10px).

Импортируйте изображение в это  блок. Щелкните правой кнопкой мыши на слой с фотографией и и выберите  “create a clipping mask”, чтобы создать обтравочную маску. 

Под изображением с помощью инструмента текст(T) добавляем дату желтого цвета (# fbbf21) и основным текстом (синий # abbfc9). Между датой и текстом оставьте немного места. 

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

Дублируйте желтую кнопку, созданную ранее и переключите цвет ее с желтого на синие  (# 5a91aa, 102b38).

Теперь, первый блок закончен.

Повторите предыдущие шаги для создания двух других блоков.

Шаг 8

Создаем новый слой, который назовем «shadow». Создаем выделение по ширине наших изображений с помощью инструмента Rectangle Marquee, а затем с  помощью Gradient Tool (G), заполняем выделение градиентом, который использовали в предыдущем шаге. 

К слою добавляем маску (layer>blending mask>reveal all). С помощью градиента два градиента — от левой стороны к центру, и правой стороны к центру. 

Шаг 9

С помощью инструмента Text (T) формируем поле для ввода электронного адреса. Для заголовка используем цвет синий ( #9ec4d5), для основного текста (#cce0e9).

С помощью инструмента Rounded Rectangle Tool (U)  с права создаем поле для формы ( прямоугольник цветом # 091a21  и размерами 290x40px), а также кнопку (цвет прямоугольника # 5e96ae, размеры 100x40px).

Добавить на кнопку стили слоя, которые ранее добавляли к желтым кнопкам.

С помощью Text tool (T)  добавляем надпись “Insert your mail…”, цветом  #1d4f66.

Добавить сейчас к кнопке описание, используя цвет # 102d3a (в примере был использован шрифт Helvetica Neue LT Std). Добавляем тень к желтой и синей кнопкам. 

Шаг 10

Создаем футер. С помощью Rectangle Tool (U), создаем синий прямоугольник (# 091a21)  размерами 1000 х 90 пикселей.

С помощью инструмента Текст (T) добавляем авторские права. Используем цвет #cce0e9 и #668491 ( для второй строки).

STEP 11 CREATE A LOGO

To finish this theme, return to the top to create the logo. Then, go back to the group Menu created during the Step 1.

Create first a rectangle with same colour than the one used for the menu. Create it 10pixel more than the menu on the bottom (check the picture below).

Шаг 11

Последним шагом будет создание логотипа. Вернемся к группе Menu, которую создавали в шаге 1. Создаем первый прямоугольника с таким же цветом, как использовали в меню. Размещаем его на 10 пикселей ниже. 

Затем последний раз переходим к файлу your.eps (в Illustrator) и импортируем иконку с человеком. Добавляем некоторые стили слоя.  Layer> Layer Style> Color Overlay. Используем цвет  # Dfecf1.

С помощью  Text Tool (T) добавляем имя для сайта. Шрифт — Helvetica Neue LT Std, цвета — dfecf1 # и # 6187b7.

Создаем новую группу и помещаем в нее иконку и текст.

Шаг 12

Дублируйте группу с логотипом, затем с помощью Move Tool (V) размещаем копию в  правом углу Footer.

Автор - grafpedia

Перевод — Дежурка