Лабораторная работа №6 <графика> (стр. 2 )

Вероятность, что этот же самый шаблон выберет ваш знакомый тоже не велика. Дело в другом!
Автор данного шаблона преследовал совсем другую цель при его создании. Он хотел создать уровновешенную композицию, но при попытке втиснуть в нее свой материал вы наверняка сталкнетесь с рядом проблемм. Что вы будете делать, если у вас в главном меню не щесть объектов, как на рисунке, а только три, куда вы будете девать оставшееся место? А где размещать подменю? А как быть если логотип вашего заказчика выполнен в сине-красных тонах и совсем не сочетается с представленой цветовой гаммой? Вопросы можно задавать бесконечно. Время и силы по доводке скачанного шаблона могут оказаться больше чем если вы создадите его сами.

Попробуйте создать свою композицию.

Разместите на холсте вашего графического редактора основные объекты: логотип, название, заголовок, меню, фрагменты текста настоящего или выдуманного), фотографии. Сделайте так, чтобы страница правая часть страницы не «перевешивала» левую. Продумайте цветовое решение. Выберите основной цвет, который будет главным на вашей странице. - вет фона, ссылок, разделительных полос должен сочетаться с выбранным цветом. Для подбора цвета можно использовать очень удобную утилиту ColorImpact или миксер цветов, встроенный в программу CorelDRAW Не бойтесь пустого пространства, пусть у вас останутся поля. Такую информацию легче воспринимать, а страница окажется более легкой, воздушной. Продумайте «визуал» - то есть главное изображение, которое будет нести основную идею страницы. Не стоит брать изображение из бесплатных коллекций. С распространением цифровых фотоаппаратов сделать нужное изображение, а после обработать его в графическом редакторе совсем не сложно. Старайтесь уходить от шапки, с фотографией, повторяющейся на каждой странице. Едва ли посетителю сайта доставит удовольствие смотреть на нее постоянно. Продумайте графические объекты, которые не располагаются в отведенных для них прямоугольниках, а органически вписываются в вашу страницу. Это сделает ваш макет более живым, интересным.

Создав макет проверьте его «на прочность»:

Предложите вашему знакомому взглянуть на него, куда он бросит взгляд в первую очередь, куда он захочет щелкнуть мышкой? Попробуйте вставить в ваш макем текст большего объема наполненный графической информацией или наоборот, текст совсем без графики. Изменилось ли восприятие, стало ли труднее читать выделять главное. Что произойдет с вашим макетом, если посмотреть не него на компьютере с другим разрешением монитора, будет ли он «тянуться»?

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

7.4. Настройка графических программ

Создавая дизайн-макет в CorelDraw выполните несколько простых действий:
Настройте параметры страницы (меню Layout - Page Setup) установите

разрешение вашей страницы 96 dpi; единицу измерения - пиксель; размер страницы 1000 пикселей по ширине, 610 пикселей по высоте (это примерный размер области видимой в окне браузера при разрешении 1024 на 768 пикселей); нажмите кнопку «Добавить рамку страницы» (вам легче будет выравнивать объекты на вашем холсте, к тому же рамку можно использовать в качестве фона вашей страницы);

 
Рис. 45. Настройка параметров страниц в CorelDRAW 12.

Настройте направляющие

включите видимость линеек (меню View - Rulers); измените точку отсчета (перетащите точку из левого верхнего угла линеек в левый верхний угол вашего холста. В результате левый верхний угол получит координаты 0х0, вам будет легче отмерять расстояния на вашей странице); включите привязку к направляющим (меню View - Snap to Guidelines); Создайте направляющие на станице. Для этого зацепите мышкой за вертикальную линейку, и тащите ее влево. Вслед за мышью будет двигаться пунктирная линия - это направляющая. Она будет не видна при печати, но к ней будут выравниваться объекты на странице. С помощью таких вертикальных и горизонтальных направляющих удобно делать опорную сетку вашей страницы.

 
Рис. 46. Настройка направляющих в CorelDRAW 12.

Можно сделать вывод: Дизайн-макет сайта, это не столько как будет выглядеть конкретная страница, а некоторый принцип оформления и структурирования информации. Дизайн макет определяет композиционное решение страницы (где располагаются основные элементы страницы на экране, их размеры), цветовое решение (Основные цветовые пятна, цвет текста, заголовков, ссылок), принцип навигации внутри сайта.

Практические задания:

1.  Проанализируйте топологию трех сайтов на выбор. Начертите карту одного из сайтов

2.  Рассмотрите навигацию на выбранном сайте. Выделите плюсы и минусы.

3.  Выполните следующий шаг в индивидуальном проекте, создайте в графической программе дизайн-макет вашего сайта.

Вопросы для самоконтроля:

1.  В чем отличие восприятия информации на интернет-странице и в глянцевом журнале?

2.  Для каких сайтов характерна линейная топология?

3.  Что означает термин «юзабилити»?

4.  Почему нежелательно пользоваться бесплатными шаблонами, представленными в сети интернет?

5.  Какие размеры страницы нужно выставлять в графических программах при проектировании дизайна сайта?

6.  В каком формате необходимо сохранять дизайн-макет?

Для большинства людей Web является средой визуальной передачи информации. При отключении отображения графики или доступе в Web из неграфической среды пользователи могут продолжать работать с Web-страницами, однако большая часть информации, передать которую можно только визуально, будет потеряна. Привлекательность графической среды для передачи информации заключается в том, что графика позволяет повысить понимание и восприятие материала пользователем. Цвета, изображения и фон используются в Web не только для того, чтобы сделать сайты более привлекательными, но и для того, чтобы информировать, развлекать и вызывать у читателя требуемые подсознательные реакции. Тем не менее, всякая дополнительная возможность приносит с собой не только преимущества, но и трудности. Дизайнер должен учитывать все детали и противоречия, могущие повлечь за собой ошибки, а также подводные камни использования изображений в Web. Учитывая все возможные трудности, может даже показаться, что «текстовый дизайн» более практичен.

Компьютерные изображения бывают двух разных типов: векторные и растровые. В Web поддерживаются исключительно растровые изображения, если только не установлено какое-либо дополнительное расширение для браузера (plug-in). Растровые изображения в простейшем случае являют собой набор пикселов, имеющих различные цветовые значения. Поскольку в изображениях количество самих пикселов обычно велико и, кроме того, имеется цветовая информация о каждом пикселе, то растровые изображения могут достигать весьма больших размеров. Несжатое растровое изображение размером 640х480 с 24-битным цветом может занимать порядка одного мегабайта, что делает непрактичным передачу простых растровых изображений в Internet.

Одним из подходов, решающих проблему размера файла, является сжатие изображения. Существует две основных формы сжатия изображений: с потерями и без потерь. Сжатие изображения без потерь означает, что сжатое изображение идентично несжатому. Поскольку все данные об изображении должны быть сохранены, степень сжатия и, соответственно, экономия на размерах файла относительно невелики. Сжатие с потерями, с другой стороны, не предполагает сохранение всей информации об изображении, однако позволяет достигнуть гораздо большей степени сжатия. При использовании сжатия с потерями вы должны делать выбор между качеством изображения и его размером. Поскольку человеческий глаз может и не заметить потерь качества, выгода от использования такого сжатия вполне ощутима.

В настоящее время стандарты HTML не определяют, какие форматы графических файлов могут быть использованы в Web, это определяется браузерами, которые обычно поддерживают файлы одинаковых типов. Самыми распространенными форматами в Web являются GIF (Graphic Interchange Format) и JPEG (Joint Photographic Experts Group).

Форматы графических файлов GIF и JPEG

Формат GIF

GIF является наиболее широко распространенным форматом графических файлов Web. Схема сжатия, используемая в GIF, дает хорошие результаты для изображений с большими областями непрерывного цвета, поэтому данный формат весьма эффективен для сжатия иллюстраций с «плоским» цветом. Изображения с большими, горизонтальными и протяженными областями непрерывного цвета сжимаются очень хорошо, тогда как изображения со значительным изменением цвета на единицу площади сжимаются гораздо хуже. Изображения в формате GIF могут поддерживать не более чем 8-битный цвет. Это означает, что максимальное число цветов в изображении не может превышать 256. Изображения в формате GIF способны поддерживать эффект прозрачности (transparency). Для нее отводится один бит (бит прозрачности), который позволяет назначить один цвет прозрачным. Данная возможность позволяет создавать изображения с прозрачным фоном и добиваться других более сложных и интересных визуальных эффектов.

Формат JPEG

Данный формат использует метод сжатия с потерями. Он предназначен для отображения фотографических изображений, содержащих тысячи и даже миллионы цветов или оттенков серого. Поскольку этот формат применяет сжатие с потерями, всегда существует возможность выбора между меньшим размером файла и лучшим качеством изображения. Тем не менее, формат JPEG позволяет хранить изображения с 24-битным цветом в файлах гораздо меньшего размера, чем GIF, что позволяет существенно снизить время загрузки изображения. Хотя формат JPEG хорошо сжимает фотографические изображения, он совсем не предназначен для хранения рисованных изображений и текста. Изображения в формате JPEG не поддерживают ни создание анимации, ни какую-либо форму прозрачности, поэтому если дизайнеру требуется один из этих эффектов, он должен воспользоваться другим форматом файла, например GIF. Поскольку JPEG так хорошо подходит для фотографий, а GIF для рисованных иллюстраций, правильным выбором формата файла вполне можно достичь хорошего сочетания качества изображения и размера файла.