Векторная и растровая графика для web

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

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

Растровые (точечные) изображения

К растровой графике, которой гораздо больше, чем векторной, относятся все картинки форматов JPEG, GIF, PNG, ICO, BMP. Это привычные нам фотографии, иконки и рисунки, которые состоят из точек (пикселей, растров).

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

При увеличении размера файлов растровой графики теряется четкость изображения, становятся заметными отдельные пиксели, из которых состоит картинка. Самым популярным пакетом для обработки растровой графики является, конечно же, Adobe Photoshop (PSD).

Растровый формат GIF, позволяет создавать анимацию. Правда, она проще и дольше загружается, чем flash, зато сделать gif-анимацию, как правило, намного легче.

Векторная графика: рисунки с помощью кривых

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

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

Несмотря на то, что в векторной графике можно легко заполнять области градиентами и создавать эффекты объемности, избавиться от вида нереальности картинки, ее «нарисованности», не под силу даже опытным дизайнерам. В большинстве случаев это и не нужно, для реалистичности есть Фотошоп. Векторные форматы для сохранения фотографий не годятся, т.к. лица и пейзажи невозможно описать линиями и углами.

Основные форматы векторной графики и программы по их созданию: Adobe Illustrator (AI, EPS), Corel Draw (CDR), Adobe Flash (FLA, SWF). К программам, создающим векторные изображения для интернета, также можно отнести новую разработку Microsoft Silverlight 2, аналог Adobe Flash CS4.

Современные программы обработки изображений позволяют смешивать векторный и растровый тип графики в одном файле. В Adobe Illustrator или Corel Draw можно экспортировать JPEG-фотографию или GIF-логотип, а в Photoshop вставлять векторные изображения в виде смарт-объектов.

Форматы AI, CDR, FLA и PSD в определенной степени являются промежуточными для веб-дизайна – браузеры не умеют отображать такую графику. Дизайн сайта сначала создается либо в Photoshop в формате PSD, либо во Flash в формате FLA (без помощи Illustrator или CorelDraw редко обходится) и только потом графика преобразовывается в интернет-форматы.

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

Веб-дизайнеры, кроме флэшеров, в основном, работают с растровой графикой. Дизайнер создает макет веб-сайта в Фотошопе, используя полученные от заказчика или найденные в интернете файлы других точечных форматов: фотографии и текстуры в JPEG, иконки и персонажей в PNG, флажки и логотипы в GIF. Макет сайта сохраняется в фотошоповском растровом формате PSD, потому что он сохраняет графику без сжатия и искажений. Заказчику показывается превью макета в формате JPEG или PNG, а после утверждения дизайна макет передается верстальщику в формате PSD. И уже после HTML-верстки сайт представляет собой совокупность картинок, формат и размер которых определяется характером графики. Безграмотно сохранять фотографии в GIF, а логотипы в JPEG. Важно четко понимать разницу между форматами и научиться пользоваться сильными сторонами каждого способа представления графики. Тогда картинки будут четкими, реалистичными и загружаться будут максимально быстро.

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

Научиться хотя бы азам работы в векторных пакетах веб-дизайнеру необходимо. Логотипы для сайтов в большинстве случаев заказчик предоставляет в CDR, AI или EPS. Кроме того веб-дизайнерам часто приходится делать флеш-баннеры, анимировать шапки сайтов, делать буклеты и визитки. Чем больше освоенных инструментов, чем больше знаний, тем больше вариантов решения поставленной задачи, тем меньше будет потрачено времени, тем лучше будет результат и тем больше можно заработать денег.

Что касается флэш-дизайнеров, то они стараются использовать в своих работах как можно больше векторной графики, хотя Adobe Flash без проблем анимирует и все растровые форматы. Дело в свойствах векторных форматов: изменение размеров без потери качества и при этом маленьком размере готового flash-ролика. Потому информация при создании flash-баннеров или разработки flash-сайтов, по возможности, должна быть в векторном виде. В результате получим более качественный и более легкий flash-ролик.