4.Шаги 31-38


Шаг 31


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


Теперь вставляем текст анонса. Все слои добавляйте в папку "Post". Текст будет располагаться справа, а слева поставим превьюшку размером 200x200 px и тонкой белой рамкой вокруг (Stroke).
Далее создадим папку "Comments". В ней создадим новый слой с маленьким облаком и несколькими звездами. Это будет фон для отображения количества комментариев. Над этим слоем разместим само количество комментариев. Настройки шрифтов показаны на картинке ниже.
Под текстом располагается строка тегов. Добавьте небольшую звезду справа, чтобы немного выделить эту строку.
И наконец под всем постом нарисуйте тонкую линию цвета #1D324F.
Размножьте получившийся пост, чтобы при просмотре эскиза сайта было адекватное представление о его будущем внешнем виде. Достаточно будет 3-5 экземпляров поста. Если лента постов не помещается в документ, то увеличьте его высоту.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Шаг 33


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


Нарисуйте несколько звезд в новом слоем, расположенном выше слоя с облаком. Продублируйте воздушный шар, который мы создали в шаге 29, уменьшите его, и переместите в папку "Search". Сдвиньте шар ближе к облаку.
Далее напишите заголовок "Search", используя шрифт Georgia Italic и красивый желтый цвет #D5A934. Затем добавьте текст в поле для поискового запроса и кнопку "Go!".
И в заключение добавьте позади заголовка "Search" яркую звезду.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Шаг 35


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


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


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


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


Работа сделана! Мы получили отличный дизайн для сайта и научились собирать из маленьких деталей большую эффектную картину в мистическом ночном стиле.
На своем сайте я буду публиковать и другие интересные приемы дизайна, верстки, программирования, которые всегда должны быть под руками при профессиональном создании сайтов.
А что получилось у вас?
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]]