Создание дизайна для сайта "Авто-Лидер Плюс"

Создание дизайна для сайта "Авто-Лидер Плюс"


Создание дизайна для сайта «Авто-Лидер Плюс» В работе применялся программный продукт Adobe Photoshop CS4 и Adobe Illustrator CS4.

Итак, начнем. Создаем в photoshop новый документ шириной 1000px. Делаем кнопки навигации для меню сайта, в данном случае они разрабатывались в Illustrator (скриншот №1).

Создание дизайна сайта
На данном этапе выбирался инструмент прямоугольник «Rectangle Tool», для него использовалась заливка градиентом «Gradient Tool», в итоге получилась кнопка, далее она клонируется до нужного количества кнопок на сайте.

Затем illustrator файл импортируется в Photoshop (File>Import) (скриншот №2).
Создание дизайна сайта

Навигация с кнопками открывается в новом документе, ее нужно перетащить на наш созданный в Photoshop документ «заготовка для сайта». Поставить на нужное нам место, предполагаемое под шапкой.

Как создавалась шапка (скриншот №3).
Разработка сайта

Размещаем кнопки, импортируем векторный логотип компании аналогично последовательности действий с кнопками. Устанавливаем размер логотипа нужного размера и пишем под ним нужный текст. Для оформления шапки подбираем подходящий по смыслу Clipart, в данном случае - ночная дорога. Первоначальный текст перекрашиваем с помощью инструмента «Color Balance» (Image>Adjustments>Color Balance). Далее придаем картинке любую понравившуюся форму и сохраняем.

Наполняем кнопки навигаций текстом «структура меню» (скриншот №4).
Как разработать дизайн сайта

Выделяем текст красным цветом (в соответствии с утвержденным логотипом) на первой кнопке, этим мы показываем, что кнопка находится в нажатом состоянии для этой страницы. Шрифт для web-сайтов используется из стандартного набора Windows (Tahoma, Verdana, Times New Roman, Arial), здесь использовался шрифт Tahoma. Выбираем в меню Character шрифт, размер шрифта, толщину, цвет и стиль сглаживания Sharp (этот стиль сглаживания применяются для заголовков, остальной текст наполнения сайта более мелкий, для него устанавливаем стиль сглаживания «None»).

Создаем подменю навигаций (скриншот №5).
Как создать сайт

Прописываем название. Выставляем размер равный между названиями. Чертим для дальнейшей работы направляющие и сохраняем.

С шапкой и меню навигации завершили, приступаем к разработке центральной части страницы (скриншот №6).
Заказать дизайн сайта

Рисуем слева блок инструментом «Rounded Ractangle Tool» на новом слое. Применяем к нему стиль «Layer Style» как показано на скриншоте.

Оформили этот блок как акцию (скриншот №7),
Рисуем дизайн сайта

поставив туда соответствующую картинку с девушкой, название акций «скидки для студентов», поставили иконку и ссылку для перехода на страницу акций. Ниже копируем тот же блок, на скриншоте показана какая была импортирована фигура из Illustrator для фона этого блока, к ней же применился стиль «Layer Style» «Gradient Overlay» от белого к прозрачному для придания эффекта «размытых краев», как вы можете наблюдать какой получается фон на верхнем блоке.

(Скриншот №8) Продолжаем работать над центральной частью.
Рисуем дизайн сайта

Берем фотографию: кадрируем для улучшения композиций.

(Скриншот №9)
Рисуем дизайн сайта

Перетаскиваем фото на наш документ, вставляем ее на свое усмотрение, под стиль мы закруглили края у фотографий (в дальнейшем в этом окне будет флеш смена фотографий).

(Скриншот №10) Дальше вставляем блок с текстом, полученным от заказчика.
Делаем дизайн сайта

Выравниваем блок по направляющим наравне с картинкой и блоком слева. Делаем живую ссылку, выделяем часть текста, которую нам нужно сделать ссылкой и в палитре «CHARACTER» нажимаем кнопку текст с подчеркиванием как на скриншоте. Ниже добавляем оставшийся текст

Создание дизайн сайта

По завершению создаем слой с подвалом, где указываем краткую контактную информацию автошколы и ставим картинку.

На последнем скриншоте видно, как был проделан редизайн сайта автошколы «Автолидер Плюс»

Всегда рады помочь вам в создании сайта автомобильной или любой другой тематики, поэтому вы всегда можете обратиться к нам за поддержкой.
Ключевые слова для данной страницы: Создание дизайна, создать сайт, разработка дизайна сайта
Количество просмотров: 1951
Вернуться к списку статей

Заказать сайт в Москве, Питере, Волгограде, Астрахани   Создание и разработка сайтов   Сделать сайт-визитку   Создадим промо-сайт   Разработка информационных порталов   Создание интернет-магазина   Разработаем корпоративный сайт   Продвижение и оптимизация сайта на заказ