Видеоурок по разработке дизайна для сайта

В ноябре 2011 был получен заказ на создание сайта еда-и-мы.рф, предлагающего услуги организации и проведения выездного ресторанного обслуживания торжеств в Нижнем Новгороде. Одновременно возникла мысль записать на видео процесс создания этого сайта. Установив программу для скринкаста (записи происходящего на рабочем столе компьютера на видео) Camtasia, был записан первый видеоурок по разработке дизайна в программе Photoshop. Урок рассчитан на пользователей, владеющих основными функциями этого графического редактора.

Часть 1: рисуем "шапку" сайта

Создание макета всегда начинается с изучения ТЗ заказчика на разработку сайта, а также предоставленных графических материалов. Вставляем имеющийся логотип в Photoshop, уменьшаем его размеры, центрируем, устанавливаем нужные размеры макета в пикселях, подбираем фон, рисуем меню - и "шапка" сайта (его верхняя часть) готова! Основу макета составила салатово-зеленая цветовая гамма, в который выполнен логотип, и которая так нравится заказчику.

Часть 2: рисуем контентную часть

Контентная часть располагается под "шапкой" и содержит текстовое и графическое описание предлагаемых услуг. Текст должен быть кратким и легко читаемым, содержать подзаголовки (виды услуг), тематические картинки. Поскольку на момент создания макета еще не был готов текст для главной страницы, его место занял lorem ipsum, что облегчает восприятие разрабатываемого в Photoshop дизайна. В видеоуроке показана несложная техника работы с картинками: изменение размеров, наклон, обработка частей фото.

Часть 3: последние штрихи

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

В следующем видеоуроке будет показана технология верстки макета в программе Dreamweaver - обязательно посмотрите!