Уроки по Photoshop, Illustrator, Flash и 3ds max. Статьи по дизайну и фотографии.

Макет сайта волшебной ночи в Фотошопе

В этом уроке мы узнаем как нарисовать макет сайта в Фотошопе. Урок длинный, но конечный результат того стоит. Он волшебный :).

Макет сайта волшебной ночи в Фотошопе

параметры документа
Шаг 1. Создаем новый документ (Ctrl+N) размером 960*1000 пикселей, цветовой режим - RGB. Расставляем направляющие (guides) по краям документа и идем в Image>Canvas Size (Изображение>Размер холста), чтобы изменить размер файла (см. рисунок). Добавляем еще одну направляющую, чтобы отделить шапку (header) сайта.
направляющие
шапка сайта
размер холста
guide Шаг 2. Еще одну вертикальную направляющую выставляем в центре документа. Заливаем фоновоый (Background) слой темно синим Радиальным Градинтом (Radial Gradient), как показано на рисунке (цвета градиента: #0D2B53 и #010D1F).
radial gradient радиальный документ
облака Шаг 3. Скачайте эту фотку с облаками и поместите её в наш файл на новый слой "Clouds", Режим Смешивания (Blending Mode) для данного слоя установите - Overlay (перекрытие). Далее идем Layer>Layer Mask>Hide all (Слой>слой-маска>Скрыть всё) и проводим по этой маске Радиальным Градиентом "от белого к черному", как показано на рисунке. После этого вызываем для слоя с облаками Уровни (Levels (Ctrl+L)) и затемняем облака.
слой с облаками радиальный градиент
levels overlay
channel mixer Шаг 4. Скачиваем и помещаем в наш документ на слой "skyline" ещё один файл. Идем Layer>New Adjustment Layer>Channel Mixer (Слой>Новый Корректирующий слой>Микширование каналов) и, в появившемся окошке, ставим галочку у пункта "Использовать предыдущий слой для создания обтравочной маски". В окне "Channel Mixer" выбираем пункт "Black & White with Blue Filter (RGB) (Черно-белый с синим фильтром (RGB))" и нажимаем Ок. Режим Смешивания для слоя "skyline" задаем Overlay.
микширование каналов overlay
brush tool Шаг 5. К слою "skyline" добавляем маску слоя в режиме Reveal all (Показать все). Используя большую мягкую черную Кисть (Brush), скрываем границы перехода (закрашиваем черным их на маске слоя). Затем, применяя эти Кисти от Kelzky13, делаем края переходов более естественными.
brush кисть
рисуем кистью скрываем переходы
logo Шаг 6. Пишем слово "Magic" (для этого мы использовали шрифт Scriptina). К слою с текстом применяем следующие Стили Слоя: Outer Glow (#9EB6D0) и Gradient Overlay (#70ABF6, #FFFFFF, #B4CBE7, #FFFFFF). Кроме этого пришло время начать организацию слоев в отдельные папки. Для начала создадим папки "Background" и "Logo", и положим туда соответствующие слои (см. нижний рисунок).
outer glow gradient overlay
разнесение по папкам
звездная кисть Шаг 7. Скачаем ещё один набор Кистей (созданный BL1nX). На новом слое "Stars1" в новой папке Stars, находящейся в папке Background, рисуем белой 500-той Кистью из нового набора звезды. Для этого слоя применяем Стиль Слоя - Gradient Overlay (Наложение Градиента) (#3A8FEF, #FFFFFF и #66C9FC).
магия наложение градиента
слои
brush tool Шаг 8. На новом слое "Stars2" рисуем звездную пыль (Кисть номер 650), при необходимости, стирая лишнее Ластиком (Eraser Tool (E)). Стиль Слоя - Outer Glow (Внешнее свечение) - #8AB2FF.
eraser outer glow
magic Шаг 9. Добавляем еще звезд на слое "Stars2", стираем лишнее Ластиком и применяем Стиль Слоя - Gradient Overlay - #6AB1D1, #FFFFFF, #94CFED и #FFFFFF.
ластик стираем
gradient overlay
рисуем кистью Шаг 10. Скачиваем ещё один набор Кистей. Выбираем Кисть номер 148, размер - 65 пикселей, цвет - белый и рисуем на новом слое пятнышко над буквой i. Применяем к этом слою Стиль Слоя - Outer Glow (цвет свечения - #00BCF9).
внешнее свечение магия
night Шаг 11. Копируем слой со словом Magic, заменяем его на night и размещаем, как на картинке внизу. Стили Слоя - Outer Glow (#FFFFFF) и Gradient overlay (#F9DA5B, #FEAE00, and #FFD403).
gradient overlay outer glow
работа с текстом
brush
free transform
Шаг 12. Добавим облаков. Скачиваем redheadstock's Кисти. выбираем кисть номер 2464, диаметра 960 пикселей и #234B7F цвета. Создаем новый слой "cloud1" и одократно кликаем там кистью. Теперь, перемещаем новый слой в папку Background и меняем размер облака (Ctrl+T).
dodge Шаг 13. Выбираем Инструменты Dodge (Осветлитель) и Burn (Заткмнитель) и, соответственно, затемняем облако снизу и осветляем сверху. Непрозрачность (Opacity) этого слоя ставим - 50%.
burn opacity
рисуем кистью Шаг 14. На новом слое "cloud2" добавляем ещё облаков (мы для них использовали #5F83A5 цвет). Затемнить и осветлить их можно также, как это делалось в предыдущем шаге.
облака осветлитель
рисуем кистью Шаг 15. Повторяем предыдущий шаг, только теперь используем другую Кисть (цвет - #36638C) и рисуем облако на слое "cloud1". Затемнение, осветление и изменение размера - по желанию.
облака затемнитель
меняем размер
ластик Шаг 16. Выбираем мягкий Ластик и стираем нижнюю часть облака на слое "cloud1", чтобы получился эффект плавного перехода.
прямоугольник Шаг 17. Переходим от шапки к телу сайта. Рисуем на новом слое прямоугольник #0A1D37 цвета (слой с ним должен находиться под папкой со слоями с облаками). Обратите внимание, что прямоуголник находится в пределах сделанных в самом начале направляющих. Далее идем Layer>Layer Mask>Reveal all и на этой маске проводим черно-белый градиент (см. рисунок). В конце отметим еще одной направляющей место перехода цвета в фон.
тело сайта направляющая
навигация
маска слоя
Шаг 18. Добавим (опять на новый слой) ещё один прямоугольник, который будет использоваться в дальнейшем под навигацию. Цвет у него пусть будет - #091525, маска слоя - как в предыдущем шаге.
луна Шаг 19. Нарисуем необычную rss-иконку в шапке нашего сайта. Для этого, для начала, скачаем фото луны и помещаем его на новый слой "moon-rss". После этого регулируем значения Hue/Saturation (Ctrl+U) и добавляем Стили Слоя - Inner Glow и Outer Glow.
hue saturations небо
outer glow inner glow
звездная шапка
рисуем облако
стираем ластиком
Шаг 20. На новом слое (находящемся над слоем с луной) рисуем маленькое облако #7997B3 цвета. Лишние места стираем Ластиком.
rss-иконка Шаг 21. На новый слой (находящийся под слоем с облаком, но над слоем с луной) добавляем классическую фигуру rss-иконки (#DCA30B цвета) и применяем к ней Стили Слоя, показанные внизу. Ну и в конце, добавляем звездочку, как в шаге 10.
gradient overaly outer glow
drop shadow звездочка
move Шаг 22. Помещаем эту фотку на новый слой, она будет служить фоном под основную навигационную панель. Передвигаем её в нужное место (Move Tool (V)), изменяем размер (Ctrl+T) и деформируем (Flag warp).
free transform растяжение
warp навигационная панель
прямоугольник
тело сайта
Шаг 23. Затемняем (Burn Tool) некоторые места меню, чтобы увеличить иллюзию трехмерности.
gradient overlay Шаг 24. Добавим текстуру с помощью Стилей Слоя Gradient Overlay (#045F96 и #FBF4BD) и Pattern Overlay.
pattern overlay навигационное меню
луна Шаг 25. Отбросим тень от навигационного меню. Для этого создадим его копию, с помощью Hue/Saturation (Ctrl+U) обесцвечиваем её (ползунок Lightening на -100) и размываем немного. После этого с помощью Инструмента Free Transform (Свободная Трансформация (Ctrl+T)) искажаем тень
hue saturations небо
рисуем облако Шаг 26. Добавим немного облаков (также, как мы делали в Шаге 15) и текст (шрифт - Georgia - Italic). Для обычных ссылок будет использовать #0B1827 цвет, а для посещенных - #211808 цвет. Различные декоративные элементы (звездочки, линии) добавляются по желанию.
трансформация текст в меню
декоративные элементы
кисти Шаг 27. Последним шагом в работе с меню, проведем по нему несколько раз разноцветными рассеивающими Кистями. Непрозрачность для слоя с ними (Stars) зададим в 40%.
линия меню
text Шаг 28. Добавим текст к RSS-иконке. Для этого мы использовали шрифт Aria высотой 10 px желтого (#F2C90D) и белого (#FFFFFF) цветов.
воздушный шар Шаг 29. В качестве дополнительной детали добавим воздушный шар. Отделяем его от фона, помещаем в наш файл и применяем к нему Стиль Слоя - Color Overlay (#1F416E - Blending Mode: Overlay) и, при желании, затемняем с помощью Burn Tool.
Color Overlay расположение слоев
stars
звезды
Шаг 30. С помощью Кисти номер 615, добавим ещё звезд. А с помощью обычной 3px нарисуем веревочку у нашего шарика.
контент Шаг 31. Начнем добавлять контент на наш макет. На новом слое "Post" вбиваем Заголовок и дату. Можно ещё добавить звездочку рядом с датой.
текст < /td>Шаг 32. Продолжаем добавялять основные элементы будущего сайта (всё помещаем в папку "Post"). У нас это будет превью картинки размером 200*200 пикселей и обводкой 1 пиксель, заготовка под текст справа от неё, превью количества комментариев (для него создадим отдельную папку куда поместим цифры и декоративные элементы - облачко и звездочки), тэги под постом со звездой и разделительная Линия #1D324F цвета. После этого дублируем папку с постом нужное количество раз.
комментарии тэги
шаблон сайта
облако < /td>Шаг 33. Займемся боковой панелью сайта. Нарисуем окно Поиска (Search). Создадим новую папку "Sidebar", а внутри неё другую - "Search". Нарисуем в папке поиска облако и форму поиска в виде прямоугольника с тонкой 1 пиксельной обводкой #697372 цвета. Непрозрачность заливки поставим на 50%.
окно поиска обводка
непрозрачность заливки
stars
search go
Шаг 34. Добавляем звезд, воздушный шарик и надпись Georgia Italic шрифтом и #D5A934 цветом. И по аналогии рисуем кнопку "Go!"
пункты меню
папки
Шаг 35. Вбиваем пункты меню (каждую секцию помещаем в отдельную папку) и добавляем, при желании, разнообразные фоновые элементы. Основные линии лучше определить направляющими.
боковое меню Шаг 36. Теперь, давайте нарисуем дно нашего меню. Для этого рисуем несколько облаков, обработаем их, добавляем звезд и воздушных шаров. Следите за тем, чтобы они не выходили за пределы отведенные под боковое меню.
облака звезды
воздушный шарик дизайн сайта
кисть Шаг 37. Ну и наконец, создадим футер (дно) нашего сайта (в отдельной папке "Footer"). Сотрем лишнее на маске слоя основного синего слоя и добавим облаков #0B1C38 и #223E63 цвета. Не забываем про направляющие и непересечение различных частей сайта.
рисунок rss-иконка
облако маленькое облако
синее облако направляющая
burn Шаг 38. Затемняем облака и рисуем красивое скопление звезд с помощью различных Кистей.
stars brush
млечный путь ластика
footer

Ну вот и все! Наш волшебный звездный макет сайта готов!

Макет сайта волшебной ночи в Фотошопе

Урок переведен автором сайта и при цитировании его на русском языке ссылка на сайт обязательна. Автор Alvaro Guzman. Оригинал статьи на английском


Другие уроки по Photoshop >>