Шаг 16. Осветление и Затемнение

Я всегда использую инструменты Dodge (Осветление) и Burn (Затемнение) после извлечения и добавления тени.

Шаг 17 - Блок "о нас"
Добавляйте текст, я использовал шрифт Futura Std для заголовков и Tahoma (11px, Резкость: Нет) для основного текста, и серая линия, как разделитель (используйте инструмент Линия , чтобы сделать это). Давайте добавим поле для краткого текста. Нарисуйте Прямоугольник со скругленными углами, радиус 15px и заполните его зеленым цветом (# 434726), а затем применить стиль Stroke (Обводка) с тем же цветом и измените его значение Fill (Заливка) до 50%. Далее преобразуйте слой в смарт-объект и добавьте маску слоя к нему. Используйте большую, черные, мягкую кисть чтобы скрыть некоторые части фона, как в шаге 11. Наконец, вы можете добавить дополнительные детали, например, акварельный знак под текстовым слоем с "О нас", как показано на картинке ниже.

Шаг 18 - Некоторые детали
Это абсолютно необязательный шаг, Вы можете добавить некоторые стили слоя для логотипа и названия, просто чтобы увеличить контраст между ними и фоном. Я просто на этот раз добавлю немного тени. Кроме того, мне не нравится, как выглядит кисть позади навигационной панели, поэтому я перемещу её вперед, но вы можете следовать вашим инстинктам и делать так, как вы предпочитаете.

Шаг 19 - Главный Ajax Баннер
Часто бывает необходимо показывать более одной части информации на сайте, поэтому мы будем создавать Ajax слайдер. Добавим большое изображение как активный баннер разместим его около восьми колонн направляющих шаблона.

Ниже в четыре-пять квадратных миниатюр остальные баннеры. Наконец добавьте синий (# 5D8CB6) треугольник (вы можете сделать это с помощью Polygon Tool (Инструмент "Многоугольник")), который указывает на активный баннер.

Совет: Используйте реальные фотографии а не только наполнители изображения.

Шаг 20 - Баннерный текст
Некоторые существующие библиотеки включают опцию добавления какого-нибудь текста на баннере, в этом случае я буду использовать шрифты Futura Std для заголовков и Tahoma 11px для содержания. Используйте белый прямоугольник, Fill (Заливка) 50% и 1px белой обводки в качестве фона.

Шаг 21 - Фон Сайдбара
И так, самую трудную часть процесса мы уже закончили, но есть еще некоторые важные области слева, такие как боковая панель. Мы начнем с простого фона, используя Прямоугольник со скругленными углами (радиус 5 пикселей) нарисуйте белый прямоугольник. Измените Заливку слоя до 25% и добавьте Обводку 1px (#FFFFFF).

Шаг 22 - Фон Сообщений
Добавьте несколько акварельных знаков в новый слой, выше фонового содержания. Любого подходящего к фону цвета.

Шаг 23 - Сообщения
Теперь мы добавим одно сообщение. Используйте шрифты Futura Std для заголовков и Tahoma для краткого описания и 1px в высоту строки как разделитель. После на новом слое нарисуйте один синий знак используя акварельную кисть для фона комментария,"Количество комментариев" напишите используя Futura и слово "комментарии" с Tahoma.

Шаг 24 - RSS иконка
Пришло время добавить содержимое в боковой панели, и мы начнем с помощью кнопки RSS. Загрузите иконки. Откройте значок RSS, скопируйте и вставьте его в макет, добавьте RSS соответствующий текст: электронная почта, форма подписки, количество читателей и 1px высоту строки как разделитель.

Шаг 25 - Поиск
Добавьте акварельный мазки в качестве фона. Над фоном нарисуйте прямоугольник с закругленными углами (радиус 5 пикселей), цвет: # 1D1D1D. Добавить Обводку 1px (#FFFFFF), значение Fill (Заливка) уменьшите до 50%. С помощью инструмента Текст и шрифта Tahoma напишите слово "поиск". Наконец загрузите этот Icon Pack и вставьте значок лупы как кнопку поиска. Положите все это в группу под названием "Поиск" или что-то вроде этого и перейти к следующему шагу.

Шаг 26 - Объявления
Стандартный формат для креативной рекламы составляет 125 на 125 пикселей, поэтому мы добавим несколько блоков, на боковой панели. Совет: Чтобы сэкономить время, можно создать документ 125 на 125 пикселей с приятным дизайном заполнителя рекламы, а затем преобразовать его в смарт-объект и сохранять его где-то. Вы можете использовать его для многих конструкций без необходимости редизайна его каждый раз. Если у вас есть достаточно времени, вот список с большинством стандартных размеров объявлений (через объявление смысле Google). Рассмотрим работу над PSD с некоторыми заполнителей для них?

Шаг 27 - Twitter
Как большой поклонник Twitter, я решил поставить заметную ссылку чуть ниже объявлений. Добавьте немного акварельного фона, копировать / вставить значок Twitter из библиотеки (обсуждалось в Шаге 24). Введите текст,"Follow Us" или что-то на подобии этого. Положите все эти слои в группу под названием "Twitter".

Шаг 28 - Вкладки на боковой панели
Используя прямоугольник с закругленными углами , нарисуйте белый прямоугольник с 1px серой (# 979797) Обводкой, чуть ниже блока "Twitter". Теперь нарисуйте три меньших прямоугольников за ними, они будут вкладки. Нарисуйте маленький белый прямоугольник между одной из вкладок и фон для активной вкладки.

Шаг 29 - Добавляем текст на вкладках
Добавьте названия вкладок, я использовал шрифт Futura. За содержание я добавлю пару Последних сообщений на первой вкладке.

Шаг 30 - Футер
Этот футер будет очень простой, мы просто нарисуем несколько случайных акварельных знаков разных цветов, затем повторим процесс шагов 8 - 9, сделаем пару скругленных прямоугольников. Наконец, пора добавить текст футера, небольшой бар навигации и информация об авторских правах подходит совершенных там, к тому же я добавил 1px линию как разделитель. Вы же можете разработать футер, какой хотите.

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

Дата добавления: 2015-07-18