Макет сайта недвижимости в фотошопе

  • 26 июля 2011
  • 0
  • 8048

Превью



Макет сайта недвижимости в фотошопе


Необходимые ресурсы для урока



Фотография острова
Бирка

Шаг 1


Создайте новый документ (Ctrl +N) размером 960х850 пикселей. Потом создайте новый слой (Ctrl + Shift + N) , дайте ему имя "main background”. Инструментом Заливка (Paint Bucket Tool) (G) залейте его цветом #E9E8E5. Создайте ещё один слой (Ctrl + Shift + N) и назовите его "darker background”. Выберите инструмент Прямоугольная область (Rectangular Marquee Tool) (M) и выделите верхнюю часть холста. Выберите инструмент Заливка (Paint Bucket Tool) (G) и залейте выделение цветом #DAD8CF.

Макет сайта недвижимости в фотошопе

Шаг 2


Откройте фотографию острова в Фотошопе и пройдите в меню Изображение – Размер холста (Image – Canvas Size): ширина – 920 пикселей.
Выделите всё изображение (Ctrl+A), скопируйте его (Ctrl + C), вернитесь в основной документ и вставьте (Ctrl+V). Вставленное изображение будет расположено по центру. Вам нужно поднять этот слой немного выше, сохранив горизонтальное расположение - по центру.

Макет сайта недвижимости в фотошопе

Шаг 3


Сейчас нужно немного поработать над улучшением фотографии, так как она находится в центральной части макета.
Сначала перейдите в меню Изображение – Коррекции – Уровни (Layer – Adjustments – Levels) и введите следующие значения: 25, 1.55 и 245.
Потом перейдите в меню Изображение – Коррекции – Цветовой тон/Насыщенность (Layer – Adjustments –Hue/Saturation) и понизьте Насыщенность (Saturation) до -30.
В завершении перейдите в меню Изображение – Коррекции – Цветовой баланс (Layer – Adjustments – Color Balance) и введите следующие значения: +25, +25, -50.

Макет сайта недвижимости в фотошопе Макет сайта недвижимости в фотошопе Макет сайта недвижимости в фотошопе
Вы получите такой результат:

Макет сайта недвижимости в фотошопе

Шаг 4


Теперь перейдите в меню Стилей слоя (Слой – Стили слоя ) (Layer – Layer Styles) и выберите там следующие стили:

Отбрасывание тени:

Режим – Нормальный
Цвет – Чёрный
Угол – 90
Использовать глобальное освещение – да
Смещение – 7 пикселей
Размах – 0%
Размер – 0 пикселей
Контур – Линейный
Сглаживание – нет
Шум – 0%

Макет сайта недвижимости в фотошопе
Обводка:

Размер – 6 пикселей
Положение – Снаружи
Режим – Нормальный
Непрозрачность – 100%
Тип обводки – Цвет
Цвет – белый

Макет сайта недвижимости в фотошопе Макет сайта недвижимости в фотошопе

Шаг 5


Таким же образом примените следующие стили к слою "dark background”:

Отбрасывание тени:

Режим – Умножение
Цвет – чёрный
Непрозрачность – 10%
Угол – 90
Использовать глобальное освещение – да
Смещение – 5 пикселей
Размах – 0%
Размер – 0 пикселей
Контур – Линейный
Сглаживание – нет
Шум – 0%

Макет сайта недвижимости в фотошопе
Наложение градиента:

Режим – Нормальный
Непрозрачность – 100%
Градиент – от прозрачного к серому
Стиль – Линейный
Выровнять по слою – да
Угол – 90
Масштаб – 100%

Макет сайта недвижимости в фотошопе Макет сайта недвижимости в фотошопе

Шаг 6


Создайте новый слой (Ctrl + Shift + N), дайте ему имя "light spot”. Этот слой нужно разместить под слоем с фотографией, но над фоновым. Выберите инструмент Градиент (Gradient Tool) (G): стиль – зеркальный; и сделайте заливку с верхней центральной части холста, как показано ниже. У вас получится мягкий эффект свечения.

Макет сайта недвижимости в фотошопе

Шаг 7


Выберите инструмент Горизонтальный текст (Horizontal Type Tool) (T):

Шрифт – Arial
Размер – 14 пикселей, жирный
Кернинг: -50

Напишите названия разделов меню навигации. Расположите слой под слоем с фотографией, но над фоновым и слоем со свечением. Расстояние между разделами – 15 пробелов (примерно 50 пикселей).
Создайте новый слой (Ctrl + Shift + N) под текстовым и на нём создайте прямоугольник, как показано ниже. Его нужно залить градиентом.

Макет сайта недвижимости в фотошопе

Шаг 8


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

Макет сайта недвижимости в фотошопе

Шаг 9


К слою с навигационной панелью примените стиль Внутренняя тень:

Режим – Умножение
Цвет – чёрный
Угол – 90
Использовать глобальное освещение – да
Смещение – 2 пикселя
Стягивание – 0%
Размер – 0 пикселей
Контур – Линейный
Сглаживание – нет
Шум – 0%

Макет сайта недвижимости в фотошопе Макет сайта недвижимости в фотошопе

Шаг 10


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

Макет сайта недвижимости в фотошопе

Шаг 11


Вставьте бирку в наш документ и инструментами Лассо (Lasso Tool) (L) и Волшебная палочка (Magic Wand Tool) (W) отделите её от фона. После этого пройдите в меню (либо любым другим способом). После этого перейдите в меню Изображение – Коррекции – Цветовой тон/Насыщенность (Layer – Adjustments –Hue/Saturation): понизьте насыщенность и увеличьте яркость.

Макет сайта недвижимости в фотошопе

Шаг 12


К слою с биркой примените стиль Отбрасывание тени:

Режим – Умножение
Цвет – чёрный
Непрозрачность – 25%
Угол – 90
Использовать глобальное освещение – да
Смещение – 5 пикселей
Размах – 0%
Размер – 5 пикселей
Контур – Линейный
Сглаживание – нет
Шум – 0%

Макет сайта недвижимости в фотошопе Макет сайта недвижимости в фотошопе

Шаг 13


Добавьте логотип на бирку и текст справа от неё.

Макет сайта недвижимости в фотошопе

Шаг 14


Теперь нужно организовать область контента. Выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) (U), на панели параметров установите радиус – 5 пикселей и создайте большой прямоугольник в левой части холста. Справа от него создайте ещё два прямоугольника меньшего размера. Залейте эти прямоугольники градиентом, как показано ниже.

Макет сайта недвижимости в фотошопе

Шаг 15


Заполните области контентом: напишите текст и вставьте пару картинок. Также не забудьте про информацию о правах в области футера.

Макет сайта недвижимости в фотошопе
Конечный результат в большом размере можете посмотреть здесь

Перевод: Хегай Глеб
Другие уроки фотошопа cs5 находятся по ссылке.




Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.