Растрова чи векторна графіка: у чому різниця

Коротко: растрова складається з пікселів і розмивається при збільшенні — це фото та ілюстрації. Векторна будується формулами й лишається чіткою в будь-якому розмірі — це логотипи, іконки, друк.

Растрова графіка складається з пікселів — маленьких кольорових квадратиків, тому фотографія чи малюнок втрачають чіткість, якщо їх сильно збільшити. Векторна графіка будується на математичних формулах — лініях і кривих, тому логотип чи іконку можна збільшити хоч на білборд, і краї залишаться ідеально чіткими. Це не два варіанти на вибір, а два різні інструменти для різних задач.

Коли потрібен растр (Photoshop)

Растрова графіка — це фотографії, цифрове малювання, ретуш, колаж, реалістичні текстури. Все, де важлива робота зі світлом, тінями і плавними переходами кольору. Колірні моделі RGB (для екрана) і CMYK (для друку) — це теж растрова історія: перше заняття курсу графіки якраз пояснює цю різницю, бо колір на екрані та колір на надрукованій сторінці — це фізично різні речі.

Коли потрібен вектор (Illustrator)

Векторна графіка — це логотипи, іконки, шрифтові написи, схеми, все, що має однаково добре виглядати і на візитці, і на банері. Вектор будується кривими Безьє — лініями, які дитина вчиться контролювати вручну, це один із перших навичок в Illustrator-частині курсу.

Чому дитині варто вчити обидва інструменти, а не один

Реальні дизайн-проєкти рідко обходяться одним типом графіки. Брендбук поєднує векторний логотип і растрові фотографії в макетах. Мобільна гра — це векторні кнопки й меню поверх растрового фону. Курс «Графіка та анімація» саме тому будується послідовно: спочатку Photoshop (растр), потім Illustrator (вектор), а фінальні проєкти вимагають вміння поєднувати обидва.

Як зрозуміти різницю на практиці, а не в теорії

Найпростіший спосіб — спробувати збільшити зображення в обох форматах. Фото, збільшене вдесятеро, розпадається на квадратики-пікселі. Векторний логотип, збільшений так само, залишається чітким. Саме з цього наочного прикладу зазвичай і починається пояснення на першому занятті.

Часті питання про растрову і векторну графіку

З чого краще почати дитині — з растру чи з вектору?

З растру. Photoshop інтуїтивніше сприймається на старті — малювання, фотографії, ефекти дають швидкий видимий результат. Вектор із кривими Безьє вимагає трохи більше точності руки й терпіння, тому логічніше йде другим етапом.

Чи можна перетворити растрове зображення у векторне і навпаки?

Так, обидва напрямки можливі — конвертація растр↔вектор і трасування зображень входять до програми курсу окремою темою.

Який формат файлу для чого використовують?

Растрові формати — JPEG, PNG, GIF, для фотографій і зображень з екрана. Векторні — SVG та формати Illustrator, для логотипів і друкованих макетів, де важлива чіткість у будь-якому розмірі.

Детальніше про сам курс — Як створити портфоліо дизайнера на Behance, Dribbble та Pinterest, а про вибір напрямку в дизайні загалом — Який напрямок дизайну обрати: поради для початківців.

Як обрати формат за призначенням

Теорія стає корисною, коли перетворюється на просте правило: спершу питаємо, де робота житиме, і лише потім відкриваємо програму.

• Логотип, іконка, знак. Тільки вектор. Його доведеться друкувати і на візитці, і на вивісці, а між ними різниця в сотні разів.
• Фотографія, колаж, ретуш. Растр, іншого варіанту немає.
• Афіша, флаєр, будь-що для друкарні. Зазвичай обидва: текст і фігури у векторі, фотографії в растрі.
• Картинка для сайту чи соцмережі. Растр потрібного розміру — але іконки й прості елементи краще лишити векторними.

Найчастіша дитяча помилка тут одна: намалювати логотип у Photoshop, бо він знайоміший. Працює рівно до моменту, коли лого треба надрукувати великим.

Як це виглядає в шкільних задачах

Різниця здається абстрактною, поки не доходить до реального завдання. Презентація, у яку вставили картинку з інтернету, а вона розмита на проєкторі, — це растр не того розміру. Емблема класу, яка чудово виглядала на екрані й перетворилася на кашу на футболці, — те саме.

Дитина, яка розуміє різницю, робить інакше: для друку шукає вектор або велику картинку, для презентації бере звичайну, а власну емблему малює у векторі одразу. Ці три рішення економлять більше часу, ніж будь-які гарячі клавіші.

Що таке роздільна здатність простими словами

Слово, яке лякає дорослих не менше за дітей, а насправді означає щільність пікселів. Картинка на 72 точки на дюйм ідеально виглядає на екрані й розсипається на папері; 300 точок — норма для друку, але такий файл важить у рази більше.

Практичний висновок для дитини простий: розмір і призначення обираються до початку роботи, а не після. Збільшити готову растрову картинку без втрати якості неможливо — саме тому афішу, зроблену «на око», друкарня повертає.

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

Формати файлів: мінімум, який треба знати

Дітям цей список здається нудним рівно до першої зіпсованої роботи.

JPG — фотографії для екрана. Стискає з втратами, тому кожне перезбереження псує картинку трохи більше.

PNG — те, де потрібна прозорість: логотип на кольоровому тлі, іконка, елемент інтерфейсу.

SVG — вектор для вебу: масштабується без втрат і важить копійки.

PDF — те, що йде в друк.

І окремо — вихідник: файл із шарами, з якого все зібрано. Його зберігають завжди, навіть якщо здається, що робота готова. Правка через тиждень без вихідника означає переробити з нуля.

Вправа, яка пояснює різницю за п'ять хвилин

Пояснювати пікселі словами безглуздо — дитина кивне й не зрозуміє. Працює одне просте порівняння.

Візьміть будь-яку фотографію й збільште її в редакторі разів у десять. Картинка розсиплеться на квадратики — це й є пікселі, з яких вона складається. Потім те саме зробіть з іконкою у векторі: краї залишаться чіткими на будь-якому масштабі.

Після цього питання «а чому логотип не можна намалювати у Photoshop» закривається назавжди. Дитина бачить різницю сама, а не приймає її на віру.

Чому в дизайні майже завжди потрібні обидва

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

Тому питання «що вчити першим» має практичну відповідь: починають з растру, бо результат видно швидше й він зрозуміліший дитині, а вектор додається другим блоком — коли вже є розуміння кольору й композиції.

Як це розкладено по місяцях на курсі — «Курс графіки та анімації: чого навчиться за 18 місяців». А який напрямок дизайну обрати далі — окрема стаття.

Обидва інструменти викладаються послідовно на курсі «Графіка та анімація».