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

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


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


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


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


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


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


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


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


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


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


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


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

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


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

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


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


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


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

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


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

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


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


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


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

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


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


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


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

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


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


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


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


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

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


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

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


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


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


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


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


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

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


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

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


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


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


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


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


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


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




Делаем Web-дизайн

Вас может также заинтересовать:

26 сентября 2018

Дата анонса: 2010/09/21 Эффективное разрешение, МП: 16.5 Диагональ ЖК-дисплея, дюймы: 3 Вес с батареей и картой памяти, г: 609

26 сентября 2018

26 сентября 2018

Этим летом новинки успели представить уже почти все основные производители фотокамер, так что уже можно делать первые выводы об основных тенденциях рынка и попытаться угадать те модели, которые станут вскоре хитами продаж.