Шаг 8: Добавление приветствия

Здесь будет приветствие и описание веб-сайта.

(Заголовок:Bebas60px#eef0f0Shadow; подзаголовок:MyriadPro 40px #eef0f0Shadow; текст:Arial15px#1eafb5)

 

Шаг 9: Завершение шапки

Мы почти закончили шапку. Давайте добавим эффект тени, чтобы завершить шапку. Создайте тень также, как мы создавали раньше, используя кисть.

Оставьте 1px разрыва между шапкой и тенью.

Шаг 10: Добавление градиента фону

Создайте градиент от светло-серого к белому.

 

Создайте новый слой ниже заголовка и примените градиент.

Шаг 11: Добавление элементов управления слайдеру

Создайте элементы управления. (Диаметр круга: 13px, цвет: #ababab)

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

Шаг 12: Создание разделителя для контента

Выберите PencilTool и нарисуйте линию1px светло-серого цвета (#aaaaaa).

 

Плавно скройте края, используя маску градиента.

Шаг 13: Добавление основного контента

Пора добавить контент. В макете 3 колонки. Мы должны создать 3 одинаковых колонки с отступами между ними. Я сделал простой расчет и разделил пространство на 3 равных блока с отступами 25px между ними.

Добавьте направляющие линии к блокам. Удалите блоки. Получилось 3 колонки.

 

Добавьте несколько сервисов. Возьмите иконки из набора функциональных иконок. Поддерживайте расстояние между объектами. (Текст заголовка:MyriadPro 26px #666666, основной текст: #9a9a9a).

Давайте создадим простую кнопку “ReadMore”. Выберите RoundedRectangleTool, чтобы нарисовать фигуру. Убедитесь, что создался слой с фигурой.

 

Добавьте градиент (GradientOverlay) и границу (Stroke) кнопке. (Цвет границы: #cdcdcd, текст:Arial 12px #666666)

Дублируйте кнопку.

 

 

Мы добавим несколько записей о последних работах. Я нарисовал 3 блока для изображений и сделал им границу 3 px. (Цветграницы: #cdcdcd)

Вставьте изображения в блоки.

Я создал тень, как мы делали раньше, и поместил её под блоками.

 

Вставим несколько описаний проектов.

Давайте создадим ленту Твиттера. Вставим иконку птички Твиттера.

Добавим сообщение из Твиттера. (Текст твита:Arial18px#9a9a9a, цвет ссылки: #666666)

Создадим кнопку ”MoreTweets”.

 

 

Применим стили.

Вставим текст. (Е.М.: Текст:Arial 18px #565656).

Шаг 14: Создание футера и завершение макета

Создайте выделение для футера и залейте его серым.

Примените ColorOverlay. (Е.М.: Цвет заливки: #162623)

 

Наконец добавим меню и копирайты. Взгляните на получившееся изображение.

Результат