Макет сайта недвижимости в фотошопе
Превью
Необходимые ресурсы для урока
Фотография острова
Бирка
Шаг 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 находятся по ссылке.
