В этом уроке мы узнаем как нарисовать макет сайта в Фотошопе. Урок длинный, но конечный результат того стоит. Он волшебный :).
Шаг 1. Создаем новый документ (Ctrl+N) размером 960*1000 пикселей, цветовой режим — RGB. Расставляем Направляющие (guides) по краям документа и идем в Image>Canvas Size (Изображение>Размер холста), чтобы изменить размер файла (см. рисунок). Добавляем еще одну направляющую, чтобы отделить Шапку (header) сайта.
Шаг 2. Еще одну вертикальную направляющую выставляем в центре документа. Заливаем Фоновоый (Background) слой темно синим Радиальным Градинтом (Radial Gradient), как показано на рисунке (цвета градиента: #0D2B53 и #010D1F).
Шаг 3. Скачайте эту фотку с облаками и поместите её в наш файл на новый слой «Clouds», Режим Смешивания (Blending Mode) для данного слоя установите — Overlay (перекрытие). Далее идем Layer>Layer Mask>Hide all (Слой>слой-маска>Скрыть всё) и проводим по этой маске Радиальным Градиентом «от белого к черному», как показано на рисунке. После этого вызываем для слоя с облаками Уровни (Levels (Ctrl+L)) и затемняем облака.
Шаг 4. Скачиваем и помещаем в наш документ на слой «skyline» ещё один файл. Идем Layer>New Adjustment Layer>Channel Mixer (Слой>Новый Корректирующий слой>Микширование каналов) и, в появившемся окошке, ставим галочку у пункта «Использовать предыдущий слой для создания обтравочной маски». В окне «Channel Mixer» выбираем пункт «Black & White with Blue Filter (RGB) (Черно-белый с синим фильтром (RGB))» и нажимаем Ок. Режим Смешивания для слоя «skyline» задаем Overlay.
Шаг 5. К слою «skyline» добавляем маску слоя в режиме Reveal all (Показать все). Используя большую мягкую черную Кисть (Brush), скрываем границы перехода (закрашиваем черным их на маске слоя). Затем, применяя эти Кисти от Kelzky13, делаем края переходов более естественными.
Шаг 6. Пишем слово «Magic» (для этого мы использовали шрифт Scriptina). К слою с текстом применяем следующие Стили Слоя: Outer Glow (#9EB6D0) и Gradient Overlay (#70ABF6, #FFFFFF, #B4CBE7, #FFFFFF). Кроме этого пришло время начать организацию слоев в отдельные папки. Для начала создадим папки «Background» и «Logo», и положим туда соответствующие слои (см. нижний рисунок).
Шаг 7. Скачаем ещё один набор Кистей (созданный BL1nX). На новом слое «Stars1» в новой папке Stars, находящейся в папке Background, рисуем белой 500-той Кистью из нового набора звезды. Для этого слоя применяем Стиль Слоя — Gradient Overlay (Наложение Градиента) (#3A8FEF, #FFFFFF и #66C9FC).
|
|
Шаг 8. На новом слое «Stars2» рисуем звездную пыль (Кисть номер 650), при необходимости, стирая лишнее Ластиком (Eraser Tool (E)). Стиль Слоя — Outer Glow (Внешнее свечение) — #8AB2FF.
Шаг 9. Добавляем еще звезд на слое «Stars2», стираем лишнее Ластиком и применяем Стиль Слоя — Gradient Overlay — #6AB1D1, #FFFFFF, #94CFED и #FFFFFF.
|
|
Шаг 10. Скачиваем ещё один набор Кистей. Выбираем Кисть номер 148, размер — 65 пикселей, цвет — белый и рисуем на новом слое пятнышко над буквой I. Применяем к этом слою Стиль Слоя — Outer Glow (цвет свечения — #00BCF9).
Шаг 11. Копируем слой со словом Magic, заменяем его на Night и размещаем, как на картинке внизу. Стили Слоя — Outer Glow (#FFFFFF) и Gradient overlay (#F9DA5B, #FEAE00, and #FFD403).
|
|
Шаг 12. Добавим облаков. Скачиваем redheadstock’s Кисти. выбираем кисть номер 2464, диаметра 960 пикселей и #234B7F цвета. Создаем новый слой «cloud1» и одократно кликаем там кистью. Теперь, перемещаем новый слой в папку Background и меняем размер облака (Ctrl+T). Шаг 13. Выбираем Инструменты Dodge (Осветлитель) и Burn (Заткмнитель) и, соответственно, затемняем облако снизу и осветляем сверху. Непрозрачность (Opacity) этого слоя ставим — 50%.
Шаг 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.
|
|
Шаг 20. На новом слое (находящемся над слоем с луной) рисуем маленькое облако #7997B3 цвета. Лишние места стираем Ластиком. Шаг 21. На новый слой (находящийся под слоем с облаком, но над слоем с луной) добавляем классическую фигуру Rss-иконки (#DCA30B цвета) и применяем к ней Стили Слоя, показанные внизу. Ну и в конце, добавляем звездочку, как в Шаге 10.
Шаг 22. Помещаем эту фотку на новый слой, она будет служить фоном под основную навигационную панель. Передвигаем её в нужное место (Move Tool (V)), изменяем размер (Ctrl+T) и деформируем (Flag warp).
Шаг 23. Затемняем (Burn Tool) некоторые места меню, чтобы увеличить иллюзию трехмерности. Шаг 24. Добавим текстуру с помощью Стилей Слоя Gradient Overlay (#045F96 и #FBF4BD) и Pattern Overlay.
Шаг 25. Отбросим тень от навигационного меню. Для этого создадим его копию, с помощью Hue/Saturation (Ctrl+U) Обесцвечиваем её (ползунок Lightening на -100) и размываем немного. После этого с помощью Инструмента Free Transform (Свободная Трансформация (Ctrl+T)) искажаем тень
Шаг 26. Добавим немного облаков (также, как мы делали в Шаге 15) и текст (шрифт — Georgia — Italic). Для обычных ссылок будет использовать #0B1827 цвет, а для посещенных — #211808 цвет. Различные декоративные элементы (звездочки, линии) добавляются по желанию.
|
|
Шаг 27. Последним шагом в работе с меню, проведем по нему несколько раз разноцветными рассеивающими Кистями. Непрозрачность для слоя с ними (Stars) зададим в 40%.
Шаг 28. Добавим текст к RSS-иконке. Для этого мы использовали шрифт Aria высотой 10 px желтого (#F2C90D) и белого (#FFFFFF) цветов. Шаг 29. В качестве дополнительной детали добавим воздушный шар. Отделяем его от фона, помещаем в наш файл и применяем к нему Стиль Слоя — Color Overlay (#1F416E — Blending Mode: Overlay) и, при желании, затемняем с помощью Burn Tool.
Шаг 30. С помощью Кисти номер 615, добавим ещё звезд. А с помощью обычной 3px нарисуем веревочку у нашего шарика. Шаг 31. Начнем добавлять контент на наш макет. На новом слое «Post» вбиваем Заголовок и дату. Можно ещё добавить звездочку рядом с датой. < /td> |
Шаг 32. Продолжаем добавялять основные элементы будущего сайта (всё помещаем в папку «Post»). У нас это будет превью картинки размером 200*200 пикселей и обводкой 1 пиксель, заготовка под текст справа от неё, превью количества комментариев (для него создадим отдельную папку куда поместим цифры и декоративные элементы — облачко и звездочки), тэги под постом со звездой и разделительная Линия #1D324F цвета. После этого дублируем папку с постом нужное количество раз.
|
< /td> |
Шаг 33. Займемся боковой панелью сайта. Нарисуем окно Поиска (Search). Создадим новую папку «Sidebar», а внутри неё другую — «Search». Нарисуем в папке поиска облако и форму поиска в виде прямоугольника с тонкой 1 пиксельной обводкой #697372 цвета. Непрозрачность заливки поставим на 50%.
|
Шаг 34. Добавляем звезд, воздушный шарик и надпись Georgia Italic шрифтом и #D5A934 цветом. И по аналогии рисуем кнопку «Go!»
Шаг 35. Вбиваем пункты меню (каждую секцию помещаем в отдельную папку) и добавляем, при желании, разнообразные фоновые элементы. Основные линии лучше определить направляющими. Шаг 36. Теперь, давайте нарисуем дно нашего меню. Для этого рисуем несколько облаков, обработаем их, добавляем звезд и воздушных шаров. Следите за тем, чтобы они не выходили за пределы отведенные под боковое меню.
Шаг 37. Ну и наконец, создадим футер (дно) нашего сайта (в отдельной папке «Footer»). Сотрем лишнее на маске слоя основного синего слоя и добавим облаков #0B1C38 и #223E63 цвета. Не забываем про направляющие и непересечение различных частей сайта.
Шаг 38. Затемняем облака и рисуем красивое скопление звезд с помощью различных Кистей.
|
Ну вот и все! Наш волшебный звездный макет сайта готов!