(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

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

Источник: worldgraphics

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

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

К растровой графике, которой гораздо больше, чем векторной, относятся все картинки форматов 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-ролик.

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 14.08.2013 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
Microsoft Office 365 Профессиональный Плюс. Подписка на 1 рабочее место на 1 год
Microsoft Windows Professional 10, Электронный ключ
Microsoft Office 365 Бизнес. Подписка на 1 рабочее место на 1 год
Microsoft Office 365 Персональный 32-bit/x64. 1 ПК/MAC + 1 Планшет + 1 Телефон. Все языки. Подписка на 1 год.
Microsoft 365 Business Basic (corporate)
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
Программирование на Microsoft Access
CASE-технологии
Компьютерный дизайн - Все графические редакторы
Компьютерная библиотека: книги, статьи, полезные ссылки
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
 



    
rambler's top100 Rambler's Top100