Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология
Образование Политология Производство Психология Стандартизация Технологии


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



Теперь добавим приветствие и краткое описание сайта.

Шаг 9: Заканчиваем с шапкой

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

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

Шаг 10: Создание градиента для фона

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

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

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

Создайте элементы слайдера.

Чтобы указать текущий активный элемент управления в слайдере примените к нему Внутреннюю тень (Inner Shadow).

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

Выберите инструмент Карандаш (Pencil Tool) и нарисуйте линию в 1 пиксель. Цвет возьмите светло-серый (#aaaaaa).

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

Шаг 13: Добавление основного содержимого

Настал момент создать основную часть макета, место для контента. Нам нужно создать три равных столбца с небольшими отступами между ними. Я сделал простой расчет и разделил имеющееся пространство на 3 равные части с помощью прямоугольников и отступом между ними в 25 пикселей.

Добавьте направляющие линии для столбцов. Затем уберите прямоугольники. У вас останутся просто столбцы.

Добавьте услуги, которые будет оказывать будущий сайт. Подберите иконки из набора функциональных значков. Добавьте текст.

Теперь создадим простую кнопку "Подробнее". Выберите инструмент Прямоугольник со скруглёнными углами(Rounded Rectangle Tool). Нарисуйте кнопку на новом слое.

Нанесите на кнопку градиент и сделайте обводку.

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

Добавим ещё некоторые функциональные элементы. Я нарисовал три прямоугольника для изображений и сделал обводку в 3 пикселя.

Добавьте клипы изображений в прямоугольники.

Под каждым изображением сделайте тень, как мы это делали для слайдера.

Добавьте немного описаний к картинкам.

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

Добавьте анонс для твиттера.

Создадим кнопку для прочтения полного твитта.

.

Примените стили, показанные на изображении ниже.

Добавьте текст на кнопку.

Шаг 14: Создание подвала и заключительные штрихи

Выделите область для футера и залейте её серым цветом.

Перейдите в Наложение цвета (Color Overlay) и измените цвет.

Добавьте в футер ссылки навигации и информацию об авторских правах. Макет закончен. Взгляните на окончательный макет сайта.

Preview of Final Results

 


Поделиться:



Последнее изменение этой страницы: 2019-04-19; Просмотров: 205; Нарушение авторского права страницы


lektsia.com 2007 - 2024 год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! (0.017 с.)
Главная | Случайная страница | Обратная связь