Макет сайта волшебной ночи в Фотошопе (Часть 3).
Шаг 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" вбиваем Заголовок и дату. Можно ещё добавить звездочку рядом с датой.
Шаг 32. Продолжаем добавялять основные элементы будущего сайта (всё помещаем в папку "Post"). У нас это будет превью картинки размером 200*200 пикселей и обводкой 1 пиксель, заготовка под текст справа от неё, превью количества комментариев (для него создадим отдельную папку куда поместим цифры и декоративные элементы - облачко и звездочки), тэги под постом со звездой и разделительная Линия #1D324F цвета. После этого дублируем папку с постом нужное количество раз.
Шаг 33. Займемся боковой панелью сайта. Нарисуем окно Поиска (Search). Создадим новую папку "Sidebar", а внутри неё другую - "Search". Нарисуем в папке поиска облако и форму поиска в виде прямоугольника с тонкой 1 пиксельной обводкой #697372 цвета. Непрозрачность заливки поставим на 50%.
Шаг 34. Добавляем звезд, воздушный шарик и надпись Georgia Italic шрифтом и #D5A934 цветом. И по аналогии рисуем кнопку "Go!"
Шаг 35. Вбиваем пункты меню (каждую секцию помещаем в отдельную папку) и добавляем, при желании, разнообразные фоновые элементы. Основные линии лучше определить направляющими.
Шаг 36. Теперь, давайте нарисуем дно нашего меню. Для этого рисуем несколько облаков, обработаем их, добавляем звезд и воздушных шаров. Следите за тем, чтобы они не выходили за пределы отведенные пд боковое меню.
Шаг 37. Ну и наконец, создадим футер (дно) нашего сайта (в отдельной папке "Footer"). Сотрем лишнее на маске слоя основного синего слоя и добавим облаков #0B1C38 и #223E63 цвета. Не забываем про направляющие и непересечение различных сачтей сайта.
Шаг 38. Затемняем облака и рисуем красивое скопление звезд с помощью различных Кистей.
Ну вот и все! Наш волшебный звездный макет сайта готов!
Урок переведен автором сайта и при цитировании его на русском языке ссылка на сайт обязательна. Автор Alvaro Guzman.