Стильный гладкий web-дизайн сайта недвижимости

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

Шаг 1
Создайте новый документ размером 960х850 пикселей, создайте новый слой (Create New Layer) и назовите его “main background”. Залейте слой цветом #E9E8E5. Создайте ещё один слой “darker background”. Инструментом Прямоугольная область (Rectangular Marquee Tool) сделайте выделение верхней части холста и залейте его цветом #DAD8CF.

Шаг 2
Откройте фотография моря в Photoshop. Перейдите в меню Изображение»Размер холста (Image > Canvas Size) и введите значение ширины – 920 пикселей. Сделайте выделение всего холста (Ctrl+A), вернитесь в основной документ и вставьте его (Ctrl+V). Оно автоматически расположится по центру. Поднимите слой с фотографией выше, сохраняя её горизонтальное расположение - по центру.

Шаг 3
Теперь немного улучшим фотографию, так как она находится в центральной части холста. Сначала перейдите в меню Уровни (Levels) и настройте так:

Потом меню Тон/Насыщенность (Hue/Saturation):

Цветовой баланс (Color Balance):

Шаг 4
Теперь перейдите в меню Стилей слоя (Layer Style - Blending Options) и настройте так:

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

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

Шаг 5
Теперь выберите слой “dark background” и примените следующие стили слоя:

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

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

Шаг 6
Создайте новый слой (Create New Layer) и назовите его “light spot”, расположите его над фоновым слоем, но под слоем с фотографией. Выберите инструмент Градиент (Gradient Tool), тип – радиальный, и сделайте заливку с верхней центральной части холста, как показано ниже. У вас получится мягкий эффект свечения.

Шаг 7
Инструментом Горизонтальный текст (Horizontal Type Tool) напишите текст меню. Текст должен быть над фоном и светлым пятном, но под слоем с фотографией. Я использовал шрифт “Arial”, размер – 14 пикселей, жирный, кернинг: -50. Между словами должно быть расстояние в 15 пробелов.

В результате расстояние будет около 50 пикселей между словами. Далее создайте новый слой (Create New Layer) под текстом и создайте панель с выступом в 25 пикселей от текста по краям. Затем залейте эту панель коричневым градиентом.

Шаг 8
Приблизьте изображение и инструментом Прямоугольная область (Rectangular Marquee Tool) шириной в 1 пиксель создайте разделители, как показано ниже.

Шаг 9
К слою с этой панелью примените стиль Внутренняя тень (Layer Style - Inner Shadow):

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

Шаг 10
Инструментом Прямоугольная область (Rectangular Marquee Tool) сделайте выделение кнопки Home, потом перейдите в меню Яркость/Контрастность (Brightness/Contrast) и настройте, как показано ниже:

Шаг 11
Вставьте изображение бирки в наш документ. Вырежьте бирку из фона инструментом Лассо (Lasso Tool) и Волшебная палочка (Magic Wand Tool) (либо любым другим способом). После этого перейдите в меню Тон/Насыщенность (Hue/Saturation),понизьте насыщенность и увеличьте яркость.

Шаг 12
К слою с биркой примените стиль Отбрасывание тени (Layer Style - Drop Shadow):

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

Шаг 13
Создайте фигуру солнца на бирке и допишите текст рядом с логотипом.

Шаг 14
Займёмся созданием основных областей контента. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 5 пикселей создайте большую фигуру в левой части, и две маленькие в правой. Для правых двух сделайте градиентную заливку цветом от тёмно-коричневого к светло-коричневому, и о тёмно-сине-зелёного к светло-сине-зелёному.

Шаг 15
В заключении добавьте контент. Можете просто написать текст и вставить фотографии.