Разрабатываем дизайн для шаблона сайта в Фотошоп

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

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

1-9584352

Начнем наш урок с создания нового документа размером 960 x 900 пикселей. Я установил цвет переднего плана  #141414, затем, взяв инструмент Paint Bucket Tool zalivka-6609219 (Заливка), кликнул один раз по изображению.
Я взял инструмент Brush Tool brush-3682796 (Кисть), и, выбрав мягкую круглую кисть, нарисовал на новом слое три большие точки на изображении, используя следующие цвета: #a864a8, #ed1c24, #662d91.

2-9232246

Обратите внимание, что размер кисти нужно взять 600 пикселей.

3-3592763

Затем выберите в меню фильтр Filter > Noise > Add noise (Фильтр-Шум-Добавить шум).

4-2630451

Я использовал следующие параметры:

5-9910398

Ваш шаблон будет выглядеть следующим образом:

6-2218992

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

7-8016029

В окне настроек фильтра устанавливаем угол 90 градусов, смещение 998 пикселей.

8-9134070

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

9-5735885

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

10-8534853

Снова возьмите инструмент Brush Tool brush-3682796 (Кисть), установите белый цвет переднего плана. Я снова выбрал мягкую круглую кисть большого диаметра.

11-2542602

Затем этой кистью нарисуйте большое пятно на изображении.

12-4222301

Поменяйте режим наложения этого слоя на Overlay (Перекрытие).

13-7663314

Теперь начнем добавлять детали в наш шаблон. Будем создавать панель навигации. Для этого возьмите инструмент Rectangle Tool rectangle-3483899(Прямоугольник) и нарисуйте фигуру прямоугольника наверху шаблона.

14-6032362

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

15-4455323

Я включил видимость сетки, потому что хочу сделать точное выравнивание элементов в последующих шагах (для этого выберите в менюView > Show > Grid – Просмотр-Показать-Сетку).

16-5753797

При помощи инструмента Rounded Rectangle Tool round_rectangle-2461827 (Прямоугольник со скругленными углами) создайте три прямоугольника, как показано ниже.

17-8954142

Теперь для всех созданных слоев с прямоугольниками добавьте следующие стили слоя (поставьте Fill  (Заливка) 10% и установите указанные параметры на вкладках Bevel and Emboss (Тиснение) и Stroke (Обводка)):

18-1228073

19-1775949

20-8236995

У вас получится такой результат.

21-7122406

(кликните для увеличения)

Я нарисовал еще фигуры прямоугольников также с помощью инструмента Rounded Rectangle Tool round_rectangle-2461827 (Прямоугольник со скругленными углами).

22-7820094

Для этих прямоугольников добавьте такие стили слоя (на вкладках Outer Glow (Внешнее свечение), Color Overlay (Наложение цвета) и Stroke (Обводка)).

23-1035840

24-2583871

25-1673171

Вот такой получится результат.

26-6436810

Теперь добавьте нужный вам текст. Используйте для этого инструмент Horizontal Type Tool t-6296446 (Горизонтальный текст). Я написал произвольный текст в качестве образца.

27-2976293

Затем можно добавить некоторое изображение вверху шаблона. Я использовал готовое 3D изображение голубого цвета. О том, как создать это изображение, вы можете узнать в этом уроке.

Примечание. Перевод данного урока на photoshop-master.ru

28-1982677

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

29-1009127

В результате получился такой шаблон сайта.

30-2186390

728x90-1593571

photoshop4you