Светлый дизайн сайта

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

1. Загрузите эту деревянную текстуру. Создайте новый документ размером 850х1060 пикселей. Залейте фон цветом #e9e9e9, используя инструмент Заливка (Paint Bucket Tool). Откройте изображение дерева, вставьте его в наш документ и инструментом Свободное трансформирование (Free Transform) измените размер, потом поместите текстуру, как показано ниже:

2. К слою с текстурой примените стиль Наложение цвета (Layer Style - Gradient Overlay):

Режим – Осветление основы

3. Добавьте заголовок и слоган:

4. Инструментом Перо (Pen Tool) или Многоугольное лассо (Polygonal Lasso Tool) сделайте выделение, как показано ниже.

5. Залейте выделение белым цветом в новом слое и снимите выделение (Ctrl+D). Примените фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 13 пикселей. Установите Режим наложения – Перекрытие (Blending Mode – Overlay):

6. Инструментом Овальная область (Elliptical Marquee Tool) создайте выделение, как показано ниже:

7. Залейте выделение белым цветом в новом слое, снимите его (Ctrl+D) и примените Размытие по гауссу (Gaussian Blur Filter) со значением 5 пикселей. Установите Режим наложения – Перекрытие (Blending Mode – Overlay) и Непрозрачность – 75%.

8. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте прямоугольник под деревянной текстурой цветом #828282.

9. Поверх этого прямоугольника создайте ещё один, но спустите его на 4-5 пикселей вниз.

10. К этому прямоугольнику примените такие стили в меню Стилей слоя (Layer Style - Blending Options):

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

Тиснение (Стиль – Внутренний скос, Метод – Жёсткая огранка, Режим подсветки – Осветление, Режим тени – Умножение):

Наложение градиента (Режим – Нормальный, Стиль – Линейный):

11. Подпишите разделы меню навигации. Между разделами создайте разделители. Первое слово нужно написать другим цветом и над ним создать треугольник, смотрящий вниз, цветом #828282.

12. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте большой прямоугольник на всю ширину холста под навигационной панелью. Залейте этот прямоугольник цветом #d7d7d7.

13. Примените к этому прямоугольнику стиль Обводка (Layer Style – Stroke):

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

13. Создайте линии, как показано ниже, для вашего прямоугольника.

14. Вставьте изображение в документ, примените для него толстую белую обводку и отбрасывание тени. Поместите картинку так, чтобы она выходила за границы одной серой области:

15. Сделайте копию картинки, поместите её под оригинал и примените Отражение по вертикали (Transform – Flip Vertical). Копия должна быть точно под оригиналом:

16. Скройте все слои, кроме отражения. Создайте новый слой (Create New Layer) и перейдите в меню Слой»Объединить видимые (Layer > Merge Visible). Сделайте все слои видимыми, добавьте маску слоя к отражению (Layer Mask) и сделайте заливку линейным градиентом снизу вверх к верхней границе отражения, как показано ниже:

17. Перейдите в режим Перспективы (Transform – Perspective), передвиньте центральную нижнюю точку влево. Возможно вам нужно будет изменить размер слоя после исправления перспективы.

18. Слева добавьте обычный текст и кнопки:

19. Для слоёв с кнопами примените такие стили слоя:

Внутренняя тень (Режим – Нормальный):

Наложение градиента (Положение – Нормальный, Стиль – Линейный):

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

20. В основании холста создайте серый прямоугольник, мы такой уже создавали (область под картинкой), добавьте туда нужную информацию и добавьте 1-пиксельную горизонтальную линию только на верхней стороне (мы также делали это ранее).

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