2.1 Разработка шаблона сайта
Как правило, этот этап работ выполняется в достаточно мощном графическом редакторе, например, Adobe Photoshop или CorelDraw. Фотошоп несколько проще в освоении и использовании, а возможности его очень велики. Именно поэтому среди веб-дизайнеров Photoshop пользуется вполне заслуженной популярностью. Воспользуемся им и мы.
Создаем в Фотошопе новый документ. Задаем имя – MySite.
Выбираем разрешение 800 х 600, это гарантирует корректное отображение у любого пользователя, размер по вертикали потом сможем увеличить. Выбираем разрешение 72 пикселя на дюйм и RGB-цвет. Эти установки делаем обязательно, именно они отвечают за корректное отображение веб-страницы.
Устанавливаем цвет фона D3B497 в шестнадцатеричном виде или выбираем с помощью палитры цветов.
Выбрав пункт меню «Вид» – «Направляющие» активируем отображение линеек и направляющих.
В пункте меню «Вид» - «Показать» включаем сетку
Выбираем инструмент «Перемещение» и, щелкнув на левой или верхней линейке, вытаскиваем вертикальные и горизонтальные направляющие
Получаем размеченную область.
В пункте меню «Вид» - «Привязка к» не забываем убедиться, что включена привязка к направляющим и границам документа.
Командой «Слой» - «Новый» создаем слой с именем banner.
Используя инструмент «Прямоугольная область» выделяем нужный нам фрагмент между направляющими.
Рисуем в этой области прямоугольник со скругленными углами.
Выбираем цвет заливки и заливаем его.
Таким же образом размечаем еще несколько областей – для логотипа, текста приветствия, и описательного текста. Слой для текста приветствия не заливаем.
Для каждого из залитых слоев выбираем эффект «Внешний свет», задаем направление, получаем отбрасываемую тень
На области логотипа создаем слой с тем же цветом заливки.
С помощью инструмента «Горизонтальный текст» вводим текст.
Создаем на области баннера новый слой. Открываем файл с изображением и просто перетаскиваем его на вновь созданный слой.
Аналогично заполняем изображениями и текстом остальные области
Наш макет готов!
Теперь из него нужно вырезать фрагменты, необходимые для нашей страницы. Это – область баннера, область логотипа, верхняя и нижняя рамки для поясняющего текста и часть области, для фона поясняющего текста.
С помощью инструмента «Фрагмент» выбираем необходимые части изображения.
В меню «Файл» выбираем «Сохранить для Веб». Далее настраиваем качество изображений и сохраняем, в результате получаем множество графических фрагментов нашего шаблона. В папке, куда был сохранен сам шаблон, появилась папка images с изображениями. Отбираем нужные и переименовываем.
Макет создан, необходимые фрагменты получены, можно переходить к верстке. Конечно, пока мы воспользовались лишь самыми примитивными возможностями Adobe Photoshop. Книги по веб-дизайну помогут более полно изучить его возможности и познакомиться с другими редакторами.
Для быстрого старта зачастую выгоднее воспользоваться готовыми шаблонами, чем рисовать их самим. В разделешаблоны сайтов можно найти много прекрасных шаблонов и создать на их основе свой сайт.