1webdesign - Создаем и разрабатываем сайты
Веб студия 1webdesign приветствует вас, уважаемые посетители!
Являетесь ли вы постоянным клиентом компании, или зашли на сайт впервые – в любом случае выбор был сделан правильно, поскольку именно здесь можно получить квалифицированную помощь в дизайне, разработке, создании и оптимизации вашего сайта!
|
8(909) 391-99-49 ICQ: 433805424 |
|
Создание дизайна для сайта "Авто-Лидер Плюс"
Создание дизайна для сайта "Авто-Лидер Плюс"Создание дизайна для сайта «Авто-Лидер Плюс» В работе применялся программный продукт 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» нажимаем кнопку текст с подчеркиванием как на скриншоте. Ниже добавляем оставшийся текст  По завершению создаем слой с подвалом, где указываем краткую контактную информацию автошколы и ставим картинку. На последнем скриншоте видно, как был проделан редизайн сайта автошколы «Автолидер Плюс» Всегда рады помочь вам в создании сайта автомобильной или любой другой тематики, поэтому вы всегда можете обратиться к нам за поддержкой. |
|
Ключевые слова для данной страницы: Создание дизайна, создать сайт, разработка дизайна сайта
Количество просмотров: 2051 |
