Дизайнерский сайт

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

1. Создайте новый документ:

2. Установите цвет заливки - #151515 и залейте фон, используя инструмент Заливка (Paint Bucket Tool). Нам понадобятся две направляющие, чтобы область контента была шириной 900 пикселей.

Перейдите в меню Просмотр»Новая направляющая (View > New Guide) и создайте там две направляющие.

3. Для заголовка мы воспользуемся деревянной текстурой, которую вы можете найти здесь. Откройте её и вставьте в наш документ, уменьшите её до 30%. Для этого нужно перейти в режим свободного трансформирования (Ctrl+T). Используйте настройки, показанные ниже.

4. Поместите изменённую текстуру в левый верхний угол, сделайте несколько копий, чтобы заполнить всю верхнюю часть.

5. Объедините все слои с текстурой и перейдите в меню Тон/Насыщенность (Hue/Saturation), установите значение Тонировать (Colorize) и настройте, как показано ниже.

6. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение деревянной текстуры, оставив нижнюю полоску толщиной в 60 пикселей нетронутой.

7. Вырежьте (Ctrl+X) и вставьте выделение (Ctrl+V) в новом слое. Соедините части текстуры, чтобы она снова стала цельной. Скройте слой с маленькой полоской текстуры и примените стиль Отбрасывание тени (Layer Style - Drop Shadow) к верхнему слою:

Режим – Умножение

8. Сделайте слой с полоской видимым и добавьте к нему маску слоя (Layer Mask). Сделайте заливку линейным градиентом снизу до половины полоски. Мы получим иллюзию отражения верхней части.

9. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение одной дощечки, как показано ниже.

10. Залейте выделение красным цветом, создайте ещё одно выделение и залейте его другим цветом. Повторяйте процесс, пока не получите результат, показанный ниже. Каждую заливку нужно делать в отдельном слое.

11. Установите Режим наложения – Мягкий свет (Blending Mode – Soft Light):

12. Сделайте копию слоёв с цветами и сдвиньте их впаво:

13. В новом слое инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение и залейте его чёрным цветом. Напишите в нём первое слово названия сайта. Мой сайт называется “THE DESIGN LAB”. Поэтому первым словом будет “THE”.

14. Инструментом Свободное трансформирование (Free Transform) наклоните чёрный прямоугольник.

15. Потом наклоните текст, но в противоположную сторону. Установите его Режим наложения – Мягкий свет (Blending Mode – Soft Light). Потом установите Режим наложения слоя с чёрным прямоугольником – Жёсткий свет (Blending Mode – Hard Light) и Непрозрачность – 40%.

16. Таким образом создайте остальные слова названия сайта. Используйте разные углы наклона.

17. В правом верхнем углу добавьте иконки социальных сетей или любые другие. Я использовал этот набор.

18. Выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) и настройте, как показано ниже:

19. Создайте фигуру под областью заголовка сайта. Убедитесь, что его ширина не превышает отведённые пределы.

20. Перейдите в меню Параметры наложения (Layer Style - Blending Options) и настройте так:

Отбрасывание тени (Режим – Умножение):

Наложение цвета (Режим – Нормальный):

Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):

21. Инструментом Прямоугольник (Rectangle Tool) или Прямоугольная область (Rectangular Marquee Tool) создайте чёрный прямоугольник и немного наклоните его в режиме Свободного трансформирования (Free Transform).

22. Сделайте выделение этого слоя с прямоугольником (Ctrl+Click) и примените Сжатие (Modify – Contract) со значением 10 пикселей. Вставьте в это выделение какое-нибудь изображение.

23. Создайте на вставленном изображении свечение, используя инструмент Перо (Pen Tool).
Теперь можно переходить к созданию стрелок. Выберите инструмент Произвольная фигура (Custom Shape Tool) и выберите стрелку, показанную ниже.

24. Создайте фигуру белого цвета где-нибудь на холсте и создайте выделение, как показано ниже:

25. Перейдите в режим Деформации (Transform – Warp) и потяните левые точки вверх.

26. Установите Непрозрачность слоя – 60% и примените стиль Отбрасывание тени (Layer Style - Drop Shadow) со стандартными настройками. Сделайте копию стрелки и поместите её на другую сторону. Справа напишите какой-нибудь текст.

27. Перейдём к созданию навигационного меню. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 10 пикселей создайте фигуру под предыдущей большой областью под заголовком.

28. Сделайте копию слоя несколько раз:

29. Напишите текст на каждой фигуре:

30. Установите Непрозрачность слоёв с кнопками – 70% и измените угол наклона каждой из них. Сделайте выделение слоя с большой областью, на которой мы расположили картинку, стрелки и текст. Потом по очереди выбирайте слои с чёрными прямоугольниками и нажимайте Delete. Это удалит видимую область кнопок позади большого прямоугольника.

31. Создайте большой прямоугольник с закруглёнными краями с радиусом 10 пикселей под предыдущей областью с картинкой. Скопируйте на него все стили слоя с этой области.

32. Заполните большой прямоугольник контентом. Я создал три колонки с заголовками и картинкой.

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

34. Сделайте выделение цветного заголовка той же ширины, что и создаваемый стейлер (нижняя часть сайта). Высота выделеия – 20-40 пикселей. Потом перейдите в меню Редактировать»Скопировать совмещенные данные (Edit > Copy Merged). Потом вставьте выделение в нижний прямоугольник.

35. Напишите нужную информацию в стейлере и на этом можно закончить:

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