Прежде чем приступить к работе, предлагаю посмотреть, что должно получиться в результате
Рисуем
Шаг 1.
Приступим! Во первых, хочу сказать, что я не буду очень подробно описывать каждое действие. Так или иначе любое промежуточное действие при помощи photoshop можно выполнить. Во вторых, будет трудно получить в точности такой же результат, как у меня. Используйте свое воображение, чтобы сделать свой неповторимый сайт, может быть даже лучше, чем мой!
Итак, создаем новый документ с разрешением 960x1000 px в цветовой модели RGB. Наносим несколько направляющих и идем в меню Image > Canvas Size, чтобы увеличить ширину документа до 1460x1000 px. Это позволит увидеть, как будет выглядеть изображение при большем разрешении экрана. С помощью направляющей отмечаем высоту шапки сайта.
Шаг 2.
Наносим еще одну направляющую в середине документа, с ее помощью создаем темно-синий радиальный градиент (цвет #0D2B53 и #010D1F). Добавляем еще несколько направляющих слева и справа.
Вполне возможно, что позже нам придется изменить высоту документа, так что добавляем новый слой с заливкой и размещаем его под фоновым слоем (цвет #010D1F).
Шаг 3.
Как-то один из моих читателей предложил использовать реальные изображения облаков вместо классического фильтра Clouds. Так мы и поступим. Вставляем изображение с облаками на новый слой, названный "Clouds" и изменяем Blending Mode на Overlay. Затем следуем в меню Layer > Layer Mask > Hide all и рисуем радиальный градиент от белого к черному, протягиваем его от середины верхней части к середине нижней части. Можно немного изменить настройки Levels, чтобы сделать облака более темными.
Шаг 4.
Теперь вставляем на новый слой изображение горизонта испанского берега и называем его "skyline". Далее создаем новый корректирующий слой New Adjustment Layer > Channel Mixer и выбираем Black & White with Blue Filter (RGB). Для того, чтобы этот эффект распространялся только на слой "skyline", на палитре Layer нажимаем между слоем Channel Mixer и "skyline". И наконец, Blending Mode слоя "skyline" изменяем на Overlay.
Шаг 5.
Применяем к слою "skyline" маску слоя Layer Mask > Reveal all. Используя большую мягкую черную кисть скрываем границы изображения. Затем выбираем кисти в стиле гранж (больше всего люблю кисти 250 и 181). С их помощью делаем границы менее регулярными.
Шаг 6.
Напечатаем слово "Magic", используя шрифт Scriptina. Изменяем настройки слоя с текстом: Outer Glow (цвет #9EB6D0) и Gradient Overlay (цвета #70ABF6, #FFFFFF, #B4CBE7, to #FFFFFF).
Кроме того, сейчас самое время рассортировать все слои по папкам. Помещаем все слои в папку "Background", а слой с текстом в папку "Logo".
Шаг 7.
Теперь добавляем звезды на наше изображение. Вы можете использовать любые кисти, однако я буду использовать эти кисти. Выбираем кисть 550 и рисуем белым цветом на новом слое, который помещаем в группу "Stars". Обратите внимание, что самые большие звезды размещаем точечно. Изменяем параметры gradient overlay, используя три цвета (#3A8FEF, #FFFFFF, and #66C9FC), слоя "Stars1".
Шаг 8.
Используя кисть 615 из набора, добавляем еще больше звезд на слой "Stars2". С помощью Eraser удаляем звезды со зданий. Затем в параметрах слоя "Stars2" устанавливаем Outer Glow (цвет #8AB2FF).
Шаг 9.
Добавляем еще звезд на слой "Stars 2" по всему изображению, с помощью Eraser tool, удаляя лишние участки. Наконец, в параметрах слоя устанавливаем Gradient Overlay (цвета #6AB1D1, #FFFFFF, #94CFED, and #FFFFFF).
Шаг 10.
Загружаем кисти, выбираем кисть 148 размером 65 px и рисуем белым цветом в новом слое выше "i" и в настройках слоя устанавливаем Outer Glow (цвет #00BCF9), чтобы сделать звезду ярче.
Шаг 11.
Дублируем слово "Magic" и рядом пишем слово"Night", в настройках устанавливаем Outer Glow (цвет белый) и Gradient overlay (цвета #F9DA5B, #FEAE00, #FFD403).
Шаг 12.
Добавляем немного облаков в нашу ночь. Скачиваем кисти. Выбираем кисть 2464 размером 960px ( в соответствии с шириной изображения), цветом переднего плана устанавливаем #234B7F и создаем одно единственное облако на новом слое "cloud1". Помещаем папку с облаком в папку "Background".
Шаг 13.
Продолжаем. Воспользуемся инструментами Dodge и Burn. Осветляем области возле основной звезды и затемняем в середине облака. Кроме того, уменьшаем Opacity слоя "cloud1" до 50 %.
Шаг 14.
Добавляем еще одно облако на слой "cloud2", выбираем любую кисть, но цвет переднего плана устанавливаем #5F83A5. Немного затемняем облако для лучшего освещения.
Шаг 15.
Повторяем предыдущий шаг, только цвет берем #36638C и помещаем облако на слой "cloud1". По мере необходимости осветляем или затемняем его.
Шаг 16.
Выбираем инструмент Eraser мягкую кисть с большим радиусом и стираем часть облака на слое "cloud1", чтобы создать эффект исчезновения.
Шаг 17.
Основные шаги практически завершены. Теперь мы добавляем фон для контента. Не забываем, что данная работа предназначена для сети. С помощью Rectangle tool создаем прямоугольник (цвет #0A1D37) на новом слое, который располагаем ниже группы "Clouds". Обращаем внимание, что прямоугольник построен с помощью направляющих. Далее к слою с прямоугольником применяем маску Layer > Layer Mask > Reveal all и создаем черно-белый градиент, который придаст приятный эффект. Затем опускаем направляющую линию ниже прямоугольника, это поможет на стадии создания страницы в HTML+CSS. Обратите внимание, что фон от направляющей до самого низа должен быть однородным.
Шаг 18.
Теперь добавляем еще один прямоугольник (цвет #091525), который будет фоном боковой панели, используем направляющие. А затем создайте на этом слое Layer Mask примерно как в предыдущем шаге.
Шаг 19.
В этом пункте мы завершим работу над фоном шапки. Добавим деталей. На новом слое "moon-rss" размещаем изображение полной луны. Корректируем параметры Hue / Saturation, чтобы сделать луну более желтой, и в настройках слоя добавляем Inner and Outer Glow.
Шаг 20.
Добавляем небольшое облако на новый слой (цвет #7997B3), выше слоя с луной и, используя eraser, удаляем небольшие фрагменты облака.
Шаг 21.
Добавляем классическую форму RSS (цвет #DCA30B) выше слоя "moon", но ниже слоя "cloud". Применяем к этому слою параметры, которые уже использовали (Gradient Overlay, Outer Glow и Drop Shadow) и добавляем по форме RSS какую-нибудь звезду (см. Шаг 10).
Шаг 22.
Вставляем на новый слой изображение. Будем использовать его как фон для основной навигационной панели. Поскольку изначально изображение немного растянуто, сделаем его шире с помощью Free Transform и немного изогнем с помощью Flag warp.
Шаг 23.
Затемняем некоторые части свитка для создания теней и эффекта искажения.
Шаг 24.
Для улучшения текстуры применяем Gradient Overlay (цвета #045F96 и #FBF4BD) и Pattern Overlay.
Шаг 25.
Теперь добавляем тень свитку. Для этого можно либо использовать Drop Shadow, либо дублировать слой, изменить настройки Hue / Saturation, значение Lightening установить равным -100 и размыть копию с помощью Blur. А затем с помощью Free Transform немного исказить изображение.
Шаг 26.
Далее добавляем облако поверх свитка, осветляем и затемняем его, удаляем лишние части, как в Шаге 15. Затем добавляем ссылки, используем шрифт Georgia - Italic, цвет #0B1827 для обычных ссылок и цвет #211808для ссылок на которые наводится мышка. И добавляем детали на фон.
Шаг 27.
Как завершающую деталь панели навигации, создаем слой выше слоя со свитком и рисуем кистью нечто похожее на акварельные мазки, как на изображении ниже, делаем это несколько раз, используя разные цвета. Кроме того, понижаем Opacity слоя со звездами внизу панели до 40%.
Шаг 28.
Пишем RSS текст шрифтом Aria 10 px (цвета #F2C90D и #FFFFFF), не забываем использовать текст с параметрами сглаживания Anti-aliasing или None, т. к. сглаживание текста браузерами не поддерживается.
Шаг 29.
Как дополнительную деталь добавляем это изображение воздушного шара. Отделяем его от фона и располагаем где-нибудь ниже логотипа. Применяем настройки Color Overlay (цвет #1F416E), Blending Mode меняем на Overlay.
Шаг 30.
Далее выбираем кисть 615 из набора со звездами (см. Шаг 8) и добавляем больше звезд возле шара и свитка. Создаем деталь в виде линии толщиной 3 px, а затем с помощью Eraser удаляем где это необходимо лишние детали.
Шаг 31.
Самое время добавить запись. Во первых пишем заголовок и дату на новом слое "Post", как на изображении ниже. Кроме того добавляем крупную звезду возле даты.
Шаг 32.
Добавим больше информации в группу "Post", на главной странице у нас будут лежать привью нескольких записей. Слева поставим картинку размером 200x200 px с 1px Stroke effect, а справа - краткое содержание. Также отобразим справа вверху количество комментариев к записи. Для поля комментариев создадим новую группу под названием "Comments" и добавим туда небольшой фоновый рисунок с маленьким облаком и звездами. Делаем то же самое, что и при создании шапки только меньших размеров. Затем добавим число комментариев и ниже само слово "комментарии". Далее добавим список тегов в строчку, с правого конца этой строчки вставим звездочку. При желании, можно в качестве фона использовать небольшое звездное облако. Наконец, начертим разделительную линию (#1D324F, Line Tool). После всего этого скопируем всю группу "Post", чтобы создать несколько разных записей. Вероятно, на этом этапе понадобится увеличить высоту документа, для этого используем инструмент "Crop" или пункт меню Image > Canvas size, как в первом шаге. Затем увеличим высоту фонового рисунка главной и боковой части.
Шаг 33.
Продолжаем работать с боковой панелью. Добавляем в нее форму для поиска. Создаем новую группу "Sidebar", в ней группу "Search", а в ней создаем новый слой с облаком, и располагаем его как на изображении ниже. С помощью Rounded Rectangle Tool создаем окно для ввода поверх облака. Для слоя с прямоугольником устанавливаем параметры Stroke 1px (цвет #697372) и понижаем Fill до 50%.
Шаг 34.
Добавляем немного звезд около облака, используя любой слой со звездами, не забывая стирать лишние. Копируем слой с воздушным шаром, затем идем в меню Edit > Flip horizontal и помещаем копию в папку "Search". Добавляем текст используя шрифт Georgia Italic (цвет #D5A934) для поиска. Затем добавляем критерии поиска и кнопку "Go!". И в завершении, добавляем одну яркую звезду позади текста.
Шаг 35.
Добавляем в боковую панель заголовки, текст, ссылки и помещаем каждый раздел в отдельную группу. Так же не забываем добавлять яркие крупные звезды и россыпи звезд. Про направляющие тоже не забываем.
Шаг 36.
Работа близится к завершению. Доделаем нижнюю часть боковой панели. Во первых, удаляем часть фона с помощью маски слоя. Затем создаем несколько облаков, затемняем и осветляем их, где это нужно. Убедитесь, что они не выходят за пределы фона панели, не превышают ее ширину. Добавляем еще звезд к облакам и дублируем воздушный шар. Объединяем все это в группу "Sidebar Footer".
Шаг 37.
Наконец, создаем подвал. Для начала, создаем маску слоя и большой мягкой белой кистью скрываем границы, делаем их мягкими. Выбираем любую кисть с облаками и добавляем их внизу изображения. Комбинируем большие и маленькие облака (цвета #0B1C38 и #223E63 соответственно). Эти облака будут фоновым изображением, так что стараемся, чтобы они не пересекались с верхней направляющей. Кроме того, не забываем объединять созданные слои в группу "Footer".
Шаг 38.
Затемняем слишком светлые облака. Затем кистью 615, из набора со звездами, создаем различные звезды, а затем с помощью Eraser удаляем ненужные части.
Работа завершена!
Автор: Alvaro Guzman
Перевод: Alta Vista
Источник