Графические элементы в веб-дизайне

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

Основная особенность оформления веб-страниц - это необходимость размещения максимально возможного объема информации на сравнительно небольшом пространстве.

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

Когда посетитель извлекает  веб-страницу с элементами графики,  общий   размер  файлов изображений определяет,  сколько времени потребуется   веб-браузеру на загрузку и  отображение  страницы.   Если  ваши  графические  файлы  слишком велики и сайт загружается долго,  посетитель может потерять терпение  и перейти  на другой ресурс.

Также недоверие к вашему сайту может вызвать некачественная графика, используемая в дизайне или в оформлении контента.

Особенности векторного и растрового вида графики

В веб-дизайне используются два вида графики: растровый и векторный.

Достоинством растровой графики является ее реалистичность и документальность.

Недостаток точечных изображений – большие размеры растровых файлов. Это связано с тем, что в растровой графике каждая точка (пиксель) несет информацию о цвете, яркости и местоположении.

При масштабировании изображения часть точек исключается, в результате происходит значительное искажение изображаемого объекта – это еще один недостаток.

Самой популярной программой для обработки растровой графики является Adobe Photoshop. освоить эту программу в короткие сроки вам помогут отличные видео-уроки  - «Фотошоп с нуля в видеоформате», "Photoshop CS5 от А до Я", "Фотошоп уроки для повышения мастерства".

В векторной графике элементами изображения становятся не пиксели,  а комбинация простых геометрических фигур -  точек, отрезков прямых и кривых, окружностей, прямоугольников и т. п. Изображение представляет собой математическую модель, которая описывает протяженность линий, их кривизну, цвет, местоположение.

Достоинством векторных изображений является их компактность. Еще один плюс - векторная картинка масштабируется без искажений. Однако есть существенный минус – векторные изображения схематичны, упрощены и лишены деталей.

Самыми популярными программами по созданию векторной графики являются: Adobe Illustrator, Corel Draw, Adobe Flash.

Форматы графических файлов в веб-дизайне

Любая компьютерная информация может храниться только в определенном формате. Каждый вид информации имеет собственные  форматы. Для текста используются одни  форматы, для электронных таблиц  - другие,  для графики - третьи. Формат графической информации  обычно определяется программой, которой она создана. Для веб-графики  стандартными считаются форматы JPEG, GIF и PNG.

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

В форматах GIF (Graphic Interchange Format) и PNG (Portable Network   Graphic) применяется сжатие изображения без потерь информации.

В JPEG (Joint   Photographic   Experts   Group) используется сжатие с потерями. При этом сжатое изображение будет отличаться от исходного в худшую сторону, причем возврат к начальному состоянию оригинала после сжатия будет уже невозможен.

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

Формат PNG использует комбинацию схем сжатия  GIF и JPEG. Существуют две разновидности формата PNG: PNG-8 и PNG-24.

Формат PNG-8 может работать только с графикой, содержащей максимум 256 цветов. Следовательно, формат PNG-8 весьма сходен с форматом GIF. Кроме того, в PNG-8 используется метод сжатия RLE, аналогичный  GIF-сжатию. Применение формата PNG-8 к изображениям дает небольшие размеры файлов,   близкие к размерам  файлов формата GIF.

Формат PNG-24 может обрабатывать изображения,  содержащие миллионы   цветов, и  применяется для минимизации размеров файлов   фотоизображений. Однако, поскольку формат  PNG не удаляет пиксели цвета, как  формат JPEG, то сохранение  фотографий с использованием  формата PNG-24   зачастую создает файлы  чересчур  большого размера, что делает неприемлемым   их использование на Web-страницах.

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

 
Главная Дизайн сайта Графические элементы в веб-дизайне