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

4.Шаги 31-38

Шаг 31

Настало время для добавления текста. Пусть это будет текст поста, как в блогах, со всеми его атрибутами: заголовок, анонс, превьюшка, количество комментариев, метаданные, теги.

Сперва добавим заголовок и строку метаданных. Получившийся новый слой назовем "Post". Настройки шрифтов смотрите на картинке ниже. Перед строкой метаданных для красоты поставим небольшую звезду.

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

Шаг 32

Теперь вставляем текст анонса. Все слои добавляйте в папку "Post". Текст будет располагаться справа, а слева поставим превьюшку размером 200x200 px и тонкой белой рамкой вокруг (Stroke).

Далее создадим папку "Comments". В ней создадим новый слой с маленьким облаком и несколькими звездами. Это будет фон для отображения количества комментариев. Над этим слоем разместим само количество комментариев. Настройки шрифтов показаны на картинке ниже.

Под текстом располагается строка тегов. Добавьте небольшую звезду справа, чтобы немного выделить эту строку.

И наконец под всем постом нарисуйте тонкую линию цвета #1D324F.

Размножьте получившийся пост, чтобы при просмотре эскиза сайта было адекватное представление о его будущем внешнем виде. Достаточно будет 3-5 экземпляров поста. Если лента постов не помещается в документ, то увеличьте его высоту.

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

Шаг 33

Теперь надо сделать боковую функциональную колонку. Сперва создадим форму поиска. Создайте новую папку "Sidebar", а в ней еще одну папку "Search". Вставьте слой с небольшим облаком и обработайте его так, чтобы было похоже как на картинке ниже. Далее, используя инструмент Rounded Rectangle, нарисуйте прямоугольник с закругленными углами. Это будет поле для ввода поискового запроса. Для этого слоя используйе эффект Stroke с настройками как на картинке ниже.

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

Шаг 34

Нарисуйте несколько звезд в новом слоем, расположенном выше слоя с облаком. Продублируйте воздушный шар, который мы создали в шаге 29, уменьшите его, и переместите в папку "Search". Сдвиньте шар ближе к облаку.

Далее напишите заголовок "Search", используя шрифт Georgia Italic и красивый желтый цвет #D5A934. Затем добавьте текст в поле для поискового запроса и кнопку "Go!".

И в заключение добавьте позади заголовка "Search" яркую звезду.

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

Шаг 35

Добавьте ссылки на подразделы нашего будущего сайта. Категории ссылок оформите как заголовки. Позади блоков ссылок раскидайте звезды разной велчины. Для ограничения блоков установите направляющие, они потом пригодятся при нарезке макета для создания фоновых картинок, которые потом будут использоваться в CSS.

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

Шаг 36

Наша работа близка к завершению. Добавим подвал к боковой колонке, его можно разместить в новой папке "Sidebar Footer". Сделайте облака и воздушный шар как в строке поиска. Убедитесь, что они находятся под слоем с фоном основого текста.

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

Шаг 37

Теперь осталось только добавить подвал для всего сайта. Все слои подвала располагаются в папке "Footer". Нарисуйте несколько облаков используя темно-синий (#0B1C38) и светло-синий (#223E63) цвета. Обратите внимание на то, что это фон только для подвала, поэтому облака не должны пересекать направляющую, которая отделяет подвал от основного контентного поля.

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

Шаг 38

Осветлите облака инструментом Birn. Затем нарисуйте звезды, используя кисть 615 из звездного набора кистей. И наконец нарисуйте большое скопление звезд над облаками, используя кисть 656.

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

Заключение

Работа сделана! Мы получили отличный дизайн для сайта и научились собирать из маленьких деталей большую эффектную картину в мистическом ночном стиле.

На своем сайте я буду публиковать и другие интересные приемы дизайна, верстки, программирования, которые всегда должны быть под руками при профессиональном создании сайтов.

А что получилось у вас?

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

Назад  1    2    3    4   

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

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

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

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

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

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

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

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

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