Уроки Photoshop. Создание дизайна сайта в мистическом стиле

Всем дизайнерам хочется иногда побыть художниками. Рисовать не умеем, но очень хотим! Adobe Photoshop предоставляет массу возможностей для коллажирования и обработки готовых изображений. Смотришь на картинку - кажется: нарисовал художник. Ан нет! Пара-тройка качественных фотографий из стока, плюс грамотное владение графическими пакетами - и перед вами эффектное художественное произведение.

В этом уроке вы познакомимся с техникой создания дизайна сайта в ночном мистическом стиле. Луна, старинный замок, облака, звезды - вот что нам предстоит нарисовать.

Урок очень длинный, пошаговый. Всего получилось 38 шагов, и для удобства я разбил урок на несколько страниц, по десять шагов на странице.

Вы можете увидеть готовый результат в полном разрешении.

Уроки Photoshop. Создание дизайна сайта в мистическом стиле

1.Шаги 1-10

Шаг 1

Приступаем к созданию этого замечательного эскиза. Прежде всего, давайте договоримся, что я буду проскакивать некоторые наиболее простые моменты. Все-таки здесь у нас не "Photoshop для чайников", и для овладения нашим уроком потребуется некоторый опыт работы в Photoshop. Во-вторых, вам будет трудно получить точно такой же результат, как у меня. Здесь во многом полученный результат зависит от способностей и вкуса конкретного дизайнера. Подключите все свои навыки и воображение, и, возможно, ваш результат будет лучше, чем мой.

А теперь поехали!

Создайте новый документ разрешением 960x1000 пикселов RGB-палитры. Установите по краям вертикальные направляющие для ограничения размеров холста, а затем через меню "Image > Canvas Size" увеличьте размер холста до 1460x1000 пикселов. Таким образом мы располагаем наш документ в центре. Заодно поставьте и горизонтальные направляющие.

Уроки Photoshop. Создание дизайна сайта в мистическом стиле

Шаг 2

Установите горизонтальную направляющую в самом центре изображения и используйте ее как границу для заливки фонового слоя темно-синим радиальным градиентом (#0D2B53 - #010D1F). Добавьте еще две вертикальные направляющие по краям, чтобы обозначить отступ основного изображения от края документа.

Весьма вероятно, что позже нам потребуется изменить высоту документа, поэтому создайте ниже фонового слоя новый слой ("Layer > New Fill Layer > Solid Color") с цветом заливки #010D1F.

Уроки Photoshop. Создание дизайна сайта в мистическом стиле

Шаг 3

Вставьте изображение штормовых облаков в новый слой, назовите его "Clouds" и измените режим смешивания (Blending Mode) на Overlay. Далее выберите меню "Layer > Layer Mask > Hide All" и нарисуйте радиальный градиент от белого к черному (#FFFFFF - #000000), который начинается от центральной точки верхней границы документа и идет почти до центральной точки нижней части документа. Затем отрегулируйте уровни ("Image > Adjustments > Levels") слоя "Clouds" с тем чтобы сделать облака немного темнее.

Уроки Photoshop. Создание дизайна сайта в мистическом стиле

Шаг 4

Теперь нам надо вставить изображение с красивым испанским берегом в новый слой, назовем его "Skyline". Потом выбираем меню "Layer > New Adjustment Layer > Channel Mixer..." и выберите режим "Black & White with Blue Filter (RGB)". Затем, чтобы применить этот эффект только к слою "Skyline", нажмите клавишу Alt и, удерживая ее, кликните между слоем "Channel Mixer" и слоем "Skyline". Ну а теперь измените дя слоя "Skyline" режим смешивания (Blending Mode) на Overlay.

Уроки Photoshop. Создание дизайна сайта в мистическом стиле

Шаг 5

Используйте меню "Layer > Layer Mask > Reveal All" для слоя "Skyline". Затем большой черной (#000000) мягкой кистью пройдитесь по краям изображения, замазывая края. Далее, используя какие-нибудь гранжевые кисти, сделайте края изображения рваными. Я использовал эти гранжевые кисти.

Уроки Photoshop. Создание дизайна сайта в мистическом стиле

Шаг 6

Наберите слово "Magic" шрифтом Scriptina. Задайте для получившегося слоя стили как показано на картинке, со следующими настройками: Outer Glow (#9EB6D0), Gradient Overlay (#70ABF6, #FFFFFF, #B4CBE7, #FFFFFF).

Теперь настало время разложить наши слои по папкам. Поместите все созданные в предыдущих шагах слои в папку "Background", и новый текстовый слой в папку "Logo".

Уроки Photoshop. Создание дизайна сайта в мистическом стиле

Шаг 7

Теперь нарисуем несколько звезд на небе. Создаем папку "Stars", в ней новый слой "Stars1". Скачиваем этот набор кистей. Выбираем кисть 550 из этого набора, и белым цветом (#FFFFFF) рисуем звезды. Обратите внимание: самую яркую звезду мы ставим прямо под точкой в букве "i". Это позволит нам сделать классный акцент. Далее применяем к получившемуся слою Gradient Overlay с тремя цветами (#3A8FEF, #FFFFFF, #66C9FC).

Уроки Photoshop. Создание дизайна сайта в мистическом стиле

Шаг 8

Выбираем кисть 615 из набора звездных кистей, добавляем целую россыпь звезд на новый слой "Stars2", а потом мягкой резинкой удаляем звезды со зданий. Далее применяем к этому слою эффект Outer Glow (#8AB2FF).

Уроки Photoshop. Создание дизайна сайта в мистическом стиле

Шаг 9

Добавляем много звезд на слой "Stars2" по всему документу, с разными прозрачностями. Потом резинкой удалите некоторые области звезд, меняя прозрачность резинки. И наконец примените для этого слоя эффект Gradient Overlay, используя четыре цвета (#6AB1D1, #FFFFFF, #94CFED, #FFFFFF).

Уроки Photoshop. Создание дизайна сайта в мистическом стиле

Шаг 10

Скачайте новый набор кистей со звездами. Держите эти кисти под руками, они нам еще не раз пригодятся. Выберите кисть 148, сделайте ей размер 65 px и нарисуйте белую звезду (#FFFFFF) на новом слое, прямо над точкой в букве "i". Далее примените эффект Outer Glow (#00BCF9) к этому слою, звезда станет более яркой.

Уроки Photoshop. Создание дизайна сайта в мистическом стиле

   1    2    3    4  Вперед

Другие статьи из этой рубрики

Уроки Photoshop. Фотопленка

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

30 образцов яркого и креативного веб-дизайна

Буйство красок и яркие цветовые схемы - это одна из вершин мастерства, характеризующих хорошего веб-дизайнера. В этом обзоре я подготовил для вас 30 жемчужин веб-дизайна с яркими и красочными цветовыми схемами. Они выглядят очень живо и динамично. Наслаждайтесь!

Основы Matte Painting. Создаем ландшафт

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

Создание фона в стиле Windows Vista

В дизайне часто приходится встречаться с задачей отрисовать красивый фон с бликами и градиентами. Характерный пример такого фона - обои для Windows Vista. Сегодня я покажу вам, как делаются такие картинки.
portfolius.ru © 2008
Написать письмо