1. Растрові (точкові) зображення
2. Векторна графіка: малюнки за допомогою кривих
3. Навіщо веб-дизайнеру векторні графічні формати

24.01.09

Для веб-дизайнера важливо знати, що графіка в інтернеті буває двох типів: растрова і векторна. Вона створюється за допомогою різних програм, іноді навіть за допомогою скриптів, але по своїй суті зображення складається або з кольорових крапок, або є сукупністю кривих ліній.

Немає ідеального графічного формату. У той же час важливо навчитися використовувати переваги того чи іншого формату для конкретного завдання, мінімізуючи вплив його недоліків.

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

До растровій графіці, якій набагато більше, ніж векторної, відносяться всі картинки форматів 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-ролик.