2.2 Структура отдельной страницы
К разработке детального дизайна подходим по принципу «то общего к частному», который предписывает сначала разработать принципиальную схему, макет сайта, с тем, чтобы определиться с количеством основных элементов и их равновесным, гармоничным и эргономичным расположением на странице.
Рисунок 2.2.1 – макет страницы сайта
Страницу можно разбить на две значимые зоны, на которых располагаются все элементы сайта (рис. 2.2.1). Зона 1 – шапка сайта, 2 – информационная зона.
В свою очередь на первой из них располагаются элементы:
3 – логотип;
4 – основное меню;
5 – форма поиска.
Во второй области:
6 – дополнительное меню;
7 – основной контент;
8 – текстовый блок;
9 – дублирующая навигация.
Размещения каждого элемента обусловлено принципами юзабилити. Так логотип принято размещать в верхней части страницы, так как оттуда начинается движение взгляда. Размещение главного меню вверху страницы и по центру также выгодно выделяет его среди прочих элементов. Форма поиска для удобства расположена слева сверху и не заставляет искать себя на сайте.
В информационной зоне помещается слева – блок «Статьи» дополнительной навигации, а справа – блок статичной текстовой информации «Объявления». Центральная область, конечно, отведена для основного содержания разделов. Необходимость организации подвала с дублирующей навигацией также обусловлена требованиями юзабилити и является завершающим штрихом в визуальном восприятии страницы.
2.3 Создание графического шаблона
На всех страницах сайта будет использован одинаковый шаблон:
Основное содержание располагается в центральной информационной зоне и содержит текстовый блок с заголовками, ссылками, графическими материалами, или форму для отправления сообщения (в соответствующем разделе), а также результаты поиска.
Так как внешний вид страниц сайта определен полностью, это делает возможным приступить к верстке шаблонов и их последующему заполнению.
2.4 Программные средства реализации дизайна
При реализации визуального представления сайта были использованы следующие пакеты компьютерной графики:
CorelDraw Х3 – на этапе разработки схем / цветовых карт сайта, прорисовки некоторых элементов дизайна, например, логотипа.
Photoshop CS3 – для редактирования фотографий, их масштабирования и оптимизации, а также для нарезки страницы на изображения, использующиеся для ее верстки.
Все графические данные в компьютере можно разделить на две большие ветви: растровую и векторную. Векторы представляют собой математическое описание объектов относительно точки начала координат. Большинство векторных форматов могут также содержать внедренные в файл растровые объекты или ссылку на растровый файл (технология OPI). Сложность при передаче данных из одного векторного формата в другой заключается в использовании программами различных алгоритмов при построении векторных и описании растровых объектов.
Растровый файл представляет собой прямоугольную матрицу (bitmap), разделенную на маленькие квадратики – пикселы (pixel – picture element). Растровые файлы можно разделить на два типа: предназначенные для вывода на экран и для печати. Растровые форматы также отличаются друг от друга способностью нести дополнительную информацию: различные цветовые модели, альфа-каналы, слои различных типов, возможности сжатия и т.д.
В настоящее время растровая графика все больше уступает свои позиции векторной. Часто дизайнеру приходиться «отрисовывать фотографии», т.е. переводить растровое изображение в векторное путем обрисовки растровой картинки векторными контурами, с последующей заливкой контуров. Растровое изображение также можно перевести в векторное трассировкой.
Для работы с векторной графикой дизайнеры используют универсальную программу Corel Draw. Это мощная, многофункциональная система, разработанная канадской корпорацией Corel, обладающая огромными возможностями графического дизайна, иллюстрирования и создания макетов страниц. Она используется в промышленном дизайне, в разработке рекламной продукции, в оформлении презентаций, в подготовке изображений для web-страниц, с успехом применяется в офисной графике и наружной рекламе, и даже для создания небольших публикаций. Этот редактор соответствует самым современным дизайнерским требованиям и, в то же время, достаточно лёгок в применении.
Версия CorelDraw X3 использовалась в данной работе. Компания Corel позиционирует пакет CorelDraw Graphics Suite X3 для трёх ключевых групп: профессионалов-дизайнеров в области рекламы и печати, затрачивающих большое время на создание и редактирование графики, работу с текстом, ретуширование фотографий; бизнес-пользователей, время от времени прибегающих к созданию маркетинговых печатных и web-материалов дома, своими силами; наконец, студентов и преподавателей, разрабатывающих дома и в учебных аудиториях.
Минимальной конфигурации, приведенной в инструкции, соответствует большинство ноутбуков и настольных ПК:
Windows 2000 с последним SP, Windows XP Tablet PC, Windows XP с последним SP, Windows XP Home, Windows XP Professional, Windows XP Media Edition или 64-битная версия Windows XP
256 Мб RAM, 200 Мб свободного места на винчестере
Процессор Pentium III, 600 МГц
Разрешение монитора – 1024 х 768 или лучше
CD-ROM
Мышь или графический планшет
Текущая версия продукта – CorelDRAW Graphics Suite X4, доступна только для Microsoft Windows. Более ранние версии выпускались также для Apple Macintosh и для GNU/Linux.
Adobe Photoshop – растровый графический редактор, разработанный и распространяемый фирмой Adobe Systems. Является лидером рынка в области коммерческих средств редактирования растровых изображений и наиболее известным продуктом фирмы Adobe. В настоящее время Photoshop доступен на платформах Mac OS и Microsoft Windows.
Несмотря на то, что изначально программа была разработана для редактирования изображений для полиграфии, она все чаще используется для создания изображений для всемирной паутины. В более ранней версии была включена специальная программа для этих целей – Adobe ImageReady, которая была исключена из версии CS3 за счёт интеграции её функций в сам Photoshop.
Photoshop тесно связан с другими программами для обработки медиафайлов, анимации и другого творчества. Совместно с такими программами, как Adobe ImageReady, Adobe Illustrator, Adobe Premiere, Adobe After Effects и Adobe Encore DVD, он может использоваться для создания профессиональных DVD, обеспечивает средства нелинейного монтажа и создания таких спецэффектов, как фоны, текстуры и т.д. для телевидения, кинематографа и всемирной паутины.
Основной формат Photoshop, PSD, может быть экспортирован и импортирован во весь ряд этих программных продуктов. Из-за высокой популярности Photoshop, поддержка его формата файлов, PSD, была реализована в его основных конкурентах, таких, как Macromedia Fireworks, Corel Photo-Paint, Pixel image editor, WinImages, GIMP, Jasc Paintshop Pro и т.д.
Программа позволяет легко изменять цветовое представление документов (битовое, в градациях серого, дуплекс, индексированные цвета, RGB или CMYK). Photoshop поддерживает ряд цветовых моделей: RGB, LAB, CMYK, Grayscale, Bitmap, Duotone.
Версия (10.0) имеет название «Photoshop CS3», которая и использовалась в работе над проектом. Аббревиатура «CS3» означает, что продукт интегрирован в третью версию пакета программ «Adobe Creative Suite». Последние версии включают в себя Adobe Camera RAW – плагин, который позволяет читать ряд RAW (формат данных) – форматов различных цифровых камер и импортировать их напрямую в Photoshop.
Основное назначение программы Adobe Photoshop – создание фото реалистических изображений, работа с цветными сканированными изображениями, ретуширование, цветокоррекция, коллажирование, трансформации, цветоделение и другое.
Фотографии на сайте обработаны с помощью Photoshop. Ведь фото часто является объектом работы веб-дизайнера, поэтому так важно уметь хорошо подготовить фотографию к дальнейшему использованию. Adobe Photoshop – это профессиональный графический редактор, который при этом достаточно прост в освоении и использовании.