Як зробити прозоре тло на фото: 6 способів

Зображення із прозорим фоном зазвичай використовується, коли потрібно накласти один об'єкт на інший. Часто – під час заміни заднього плану, розміщення іконки на сайті, створення фотоманіпуляції. У статті ми покажемо, як зробити прозоре тло у картинки в шести різних редакторах та веб-сервісах. А також пояснимо, у якому форматі потрібно зберігати фотографії без фону.

Вибір редакції

ФотоМОНТАЖ

Універсальна програма для монтажу, корекції кольору та ретуші. Проста і водночас функціональна, розбереться навіть новачок.

Aiseesoft Background Remover

Безкоштовний онлайн інструмент для видалення фону на основі штучного інтелекту. Добре впорався із завданням порівняно з іншими онлайнами.

Як зробити прозорий фон фото на ПК

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

ФотоМОНТАЖ

Способи, які ми розглянемо, однаково добре підходять для видалення простого (одноколірного) фону, так і складного.

Спосіб 1. Напівавтоматичний

Натисніть кнопку «Об'єкт», після чого активується пензель зеленого кольору. Вона призначена для виділення персонажа/предмета, який потрібно відокремити від тла.

Проведіть лінію вздовж контурів об'єкта, намагаючись не вилазити за межі. Регулюйте лише розмір пензля, решту параметрів залиште за замовчуванням. Червоним пензлем (кнопка «Фон») відзначте задній план, після чого він буде автоматично видалено програмою. Якщо якісь шматки фону не стерлися, повторіть процедуру.

Для уточнення кордонів зсуньте повзунок на шкалі «Розширення» вліво. Це звузить область виділення.Якщо ж програма частково зрізала контури моделі, відновіть їх, розширивши маску. Тобто змістивши повзунок на шкалі вправо.

Коли роботу буде виконано, натисніть кнопку «Застосувати». Тепер ми маємо зображення без фону і потрібно його зберегти. Натисніть на зелену кнопку у верхньому правому куті та виберіть «Тип файлу» PNG. Це важливо. Якщо ви збережете фото в JPG, з'явиться фон картинки у вигляді сірої клітини.

Спосіб 2. Ручний

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

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

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

Перейдіть на шар із фоном і перетягніть його в кошик. Або через праву кнопку мишки викличте контекстне меню та застосуйте команду «Видалити».

• Виправити дефекти шкіри.
• Змінити колір волосся/очей.
• Зробити корекцію кольору та світла.
• Створити колаж.
• Перетворити RAW на JPG.
• Обробити фото за допомогою колекції мистецьких пресетів.
• Додати ефекти у вигляді атмосферних опадів та інших елементів.
• Додати об'єм на фото за допомогою інструментів Dodge&burn.
• Зробити складну композицію, використовуючи шари та маски.

Фотошоп

У програмі багато можливостей позбавитися заднього плану, але ми покажемо три.

Спосіб 1. "Перо"

Спочатку розглянемо, як зробити картинку з прозорим фоном за допомогою універсального інструменту «Перо».

Відкрийте знімок у програмі та двічі клацніть на ньому, щоб розблокувати. Візьміть "Перо" і, створюючи опорні точки, виконайте обведення моделі.

Всередині виділеної області клацніть правою кнопкою мишки та виберіть у контекстному меню команду «Виділити область». Задайте радіус розтушовки (чим він більший, тим розмитими будуть краї) і натисніть «ОК».

Інвертируйте виділення (Ctrl+Shift+I), щоб обведеним виявився не об'єкт, а фон.

Далі натисніть Delete і після того, як фон буде видалено, зніміть обведення (Ctrl + D).

Збережіть файл у форматі PNG (Ctrl+Shift+S).

Спосіб 2. Канали

Розглянемо спосіб, який стане в нагоді, якщо необхідно відокремити від фону складний об'єкт, який неможливо обвести за допомогою «Пера» та інших інструментів. Наприклад, волосся, шерсть тварин, листя на деревах і т.п.

Відкрийте фото та перейдіть у вкладку «Канали».

Виберіть синій канал, який у 90% зі 100 зробить модель контрастніше на фоні.

Дублюйте його шляхом перетягування на іконку із зображенням шару. Зверніть увагу, що в інших каналів відключилася видимість – це нам і потрібно.

Поєднанням клавіш Ctrl+L викличте інструмент «Рівні». Налаштуйте повзунки таким чином, щоб між об'єктом та фоном утворився максимальний контраст. В ідеалі фон має бути повністю білим, а модель чорною.

Далі, щоб зафарбувати пробіли на моделі, візьміть чорну кисть і пройдіться нею по всіх білих областях (крім фону).

При затиснутій клавіші Ctrl клацніть мишею на дублікат синього каналу. Це створить виділення довкола об'єкта.

Тепер увімкніть видимість інших каналів.

Перейдіть на вкладку «Шари» та натисніть «Delete». Зніміть виділення через (Ctrl+D).

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

Недолік способу – підійде лише для об'єктів із однорідним заднім планом.

Спосіб 3. «Швидке виділення»

І ще один простенький метод, як зробити картинку на прозорому фоні, якщо потрібно виконати роботу швидко, а об'єкт не надто складний.

На панелі ліворуч знайдіть інструмент «Швидке виділення». Він знаходиться в одному кластері з «Чарівною паличкою».

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

Там, де інструмент випадково потраплятиме на фон, виділення вийде за межі об'єкта. Скоригуйте його, затиснувши клавішу Alt і посунувши виділення до краю.

Тепер уточніть межі. Пройдіть шляхом «Виділення» – «Виділення та маска». Щоб фон відрізнявся від об'єкта, непрозорість зробіть 100%.

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

Натисніть «ОК», інвертуйте виділення (Ctrl+Shift+I) та видаліть фон клавішею «Delete».

Paint.net

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

Для екстракції однорідного фону Paint.net є інструмент «Чарівна паличка».

• Відкрийте фото, виберіть на панелі згаданий інструмент та клацніть по фону.
• Потім натисніть "Delete".
• За наявності залишків задника виконайте процедуру ще раз.
• Використовуйте «Чутливість», щоб стиснути або розширити виділення.
• Пройдіть «Файл» – «Зберегти як» і вкажіть тип формату пнг.

Якщо ж вам необхідно позбутися складного фону, то в програмі нічого кращого «Ластика» не придумали. Оскільки принцип роботи "Лассо" абсолютно алогічний. Тому не рекомендуємо програму для складного фону.

Як зробити прозорий фон онлайн

У мережі багато сервісів автоматичного видалення фону. З одного боку, це добре, тому що не потрібно возитися з виділенням об'єкта. З іншого боку – автоматика не завжди видаляє фон коректно. До того ж тут є ліміти на обробку та вагу завантажуваних знімків.

Pixlr

Зробити прозоре тло онлайн безкоштовно можна за допомогою сервісу Pixlr.

• Зайдіть на головну сторінку сайту.
• Внизу виберіть опцію «Видалити фон».

Функція доступна абсолютно безкоштовно, а алгоритм однаково добре видаляє фон як складний, так і простий за умови, що сам об'єкт має гладкі межі.

Aiseesoft Background Remover

• Відкрийте сервіс і завантажте потрібний файл із роздільною здатністю не вище 3000 px.
• Зачекайте на закінчення процедури.
• Якщо по краях об'єкта фон видалено некоректно, натисніть синю кнопку «Стерти». Це активує маску. Потім встановіть розмір кисті та зітріть шматочки заднього плану. Втім, у нас сервіс виділив найскладніший об'єкт ідеально.
• Завантажити фото.

Сервіс працює із наступними форматами: JPG, JPEG, PNG, GIF.

Retoucher

Зробити пнг із прозорим фоном онлайн можна автоматично за допомогою Retoucher.

• Перетягніть одне/кілька фотографій і зачекайте до кінця обробки.
• Натисніть «Редагувати» та завантажте фон за кнопкою «Вибрати своє зображення».
• Завантажте з ПК підібраний заздалегідь задній план і за допомогою сітки, що трансформує, надайте головному персонажу потрібне положення.
• Якщо потрібно зберегти об'єкт з прозорим фоном, не натискайте «Редагувати», а відразу скачайте зображення.

У день можна безкоштовно обробити та завантажити не більше трьох фотознімків.

Корисні статті:

Яку програму вибрати: думка експерта

Ми намагалися змінювати фон у різних програмах, у тому числі онлайнових. І дійшли висновку, що найгірша програма у списку – це Paint.NET. Софт популярний серед новачків, але парадокс у тому, що працювати у програмі складно. Особливо якщо потрібний якісний результат.

Тому новачкам, та й середньому рівню краще звернути увагу на ФотоМОНТАЖ. Редактор позиціонується як програма із простим управлінням і в цьому випадку проти істини не погрішили. У меню ФотоМОНТАЖу дійсно не важко буде зорієнтуватися, так само як і в принципах роботи інструментів. Для екстракції фону є кілька способів, і результат можна вдосконалити.

Приємно здивував також онлайн-сервіс Aiseesoft Background Remover, який впорався із відділенням складного об'єкта від фону ще краще, ніж Photoshop. Причому сайт не встановлює ліміти на кількість знімків, що використовуються. Єдине, чим ресурс поступається двом іншим розглянутим у статті онлайн, - це тривала обробка фото. Натомість і результат на порядок вищий.Тому, якщо хочете без зайвого клопоту зробити фото на прозорому фоні онлайн, рекомендуємо звернути увагу саме на цей сервіс.

Формати зображень: основні види та характеристики форматів зображень, коли та які формати використовувати

Сайт без картинок виглядає нудно, та й користуватися ним незручно. Зображення полегшують навігацію та сприйняття інформації, задають настрій та занурюють у контекст. Однак мало підібрати симпатичні фотографії та іконки, які впишуться у візуальну концепцію проекту. Важливо зберегти файли у правильному форматі, щоб не спотворити їх якість, розмір та зміст. У цій статті розглянемо, які формати зображень існують і для яких цілей вони використовуються.

Що таке формати зображень і чому вони важливі

Будь-яка картинка на сайті або в додатку - файл, збережений з певним розширенням. Воно прописується наприкінці його назви: jpeg, png, eps. Це і є формат, який зберігає інформацію про зображення та визначає його розмір, якість та зміст. Якщо вибрано неправильний формат, фотографія не завантажується на веб-ресурсі або відображається неправильно. Ілюстрація стає «піксельною», а гіфка статичною.

Тип розширення вказується у назві файлу

Формат впливає на те, як картинка виглядає в інтерфейсі, та на ряд інших факторів.

• Сумісність із різними програмами.Графічні редактори підтримують не кожен формат зображень. Щоб відкрити файл з роздільною здатністю ai, потрібен Adobe Illustrator. А щоб відредагувати psd-шаблон, доведеться встановити Adobe Photoshop.
• Розмір файлу. Одні формати важать менше, інші – більше. Чим легша вага зображень, тим швидше вони відображаються на сайті.Чим важче зображення, тим більше часу знадобиться користувачеві на завантаження веб-сторінки.
• Масштабованість зображення. Від формату залежить, чи вдасться змінити розмір картинки без втрати якості.

Векторні та растрові зображення: у чому різниця

У комп'ютерній графіці зображення формуються двома різними способами: з маленьких точок (пікселів) та за допомогою кривих ліній. Тому виділяють растровий та векторний формати. У кожного з них свої плюси, мінуси і сфера застосування. Познайомимось із ними ближче.

Растрові зображення

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

До растру належать фотографії, ілюстрації, скани документів. Важать вони багато, а їхня якість залежить від кількості пікселів. Чим більший розмір зображення, тим воно чіткіше та детальніше.

Популярні формати растрових зображень: JPEG, PNG, GIF та TIFF.

Фотографія – приклад растрового зображення. При збільшенні можна розглянути кожен піксель

Зображення у векторному форматі

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

Ще один плюс векторних картинок - вони важать набагато менше растрових і завантажуються на веб-сторінках практично миттєво. Тому вектори використовують для створення логотипів, схем, шрифтів, елементів інтерфейсу та графічних об'єктів, які потрібно відтворювати в різних розмірах.

Популярні формати векторних зображень: AI, EPS та SVG.

Іконки — приклад векторної графіки

Які формати зображень існують: ТОП-12 найпопулярніших

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

1. PNG

Абревіатура PNG розшифровується як Portable Network Graphics, що в перекладі з англійської означає портативна мережева графіка. Це растровий формат зображень, який використовується в тих випадках, коли на веб-сторінку потрібно додати логотип, іконку, кнопку або зображення без фону. У пошуковій системі PNG-файл легко дізнатися по фону з біло-сірими квадратиками - вони умовно позначають прозорість.

PNG-зображення в пошуку Google

Переваги PNG:

• Робить картинки прозорим фоном.
• Підтримує близько 17 мільйонів кольорів та 255 ступенів прозорості.
• Зображення стискається без значної втрати якості. Незначні погіршення складно помітити неозброєним оком.
• Формат сумісний з усіма операційними системами, графічними редакторами та браузерами.
• У порівнянні з фотоформатами на кшталт RAW, PNG має компактний розмір.

Недоліки PNG:

• PNG-файли важать більше, ніж GIF та JPEG.
• Під час друку зображення в PNG втрачають якість.

2. JPEG

JPEG - растровий формат, названий на честь групи розробників Joint Photographic Experts Group. Зараз він найпоширеніший в інтернеті, а файли з розширеннями .jpeg, .jpg, .jpe або .jfif зустрічаються в мережі найчастіше. У такому форматі зберігаються фотографії, поліграфічні матеріали, картинки для соціальних мереж, дизайн-макети, вайрфрейми та інші графічні об'єкти.

Формат відмінно відтворює переходи кольору, відблиски, тіні та півтони. Завдяки цьому картинка виходить об'ємною та реалістичною. Файли займають мало місця на комп'ютері та швидко завантажуються у браузері. За потреби вага картинки можна зменшити, але тоді її якість погіршиться. Враховуйте, що JPEG додатково стискається при кожному збереженні: після 3-4 разів зображення стане піксельним.

Формат JPEG підходить для ілюстрацій у блозі на сайті

Переваги JPEG:

• Формат відрізняє невелику вагу та швидке завантаження зображень у браузері.
• JPEG добре відтворює кольори, яскравість та контрастність – це оптимальний формат на випадок, якщо ви хочете роздрукувати фото для особистого альбому.
• Ви самі вибираєте налаштування стиснення, у тому числі розмір та якість файлу.
• Формат популярний та сумісний з усіма графічними редакторами, браузерами та пристроями.

Недоліки JPEG:

• При стисненні файлу зображення втрачає якість.
• Формат не підтримує прозоре тло. Якщо зберегти іконку в JPEG, то бекграунд стане білим.

3. GIF

Graphics Interchange Format, відомий як GIF, застосовується для створення, зберігання та розповсюдження анімованих зображень. Гіфка — це послідовність із кількох статичних кадрів, які змінюють один одного з певною швидкістю.Вона виглядає як відео без звуку, але важить значно менше від звичайного відеоролика. За рахунок цього файл займає мало пам'яті та кешу на пристрої та швидко завантажується у браузері. У GIF-форматі зберігають інфографіку, іконки, тексти та елементи інтерфейсу, які мають рухатися та привертати увагу користувачів.

Приклад гіфки на сайті

Переваги GIF:

• GIF - компактна альтернатива короткому відео;
• Гіфки відкриваються у всіх браузерах.
• Зображення можна зберегти без фону.

Недоліки GIF:

• Формат підтримує всього 256 відтінків, тому у нього погана передача кольорів.

4. TIFF

Tagged Image File Format – теговий растровий формат. Його використовують, щоб зберегти 100% якість зображення. TIFF-файл можна копіювати і перезберегти багато разів - чіткість і рівень деталізації картинки при цьому не постраждають. Тому його застосовують переважно в поліграфії, коли готують дизайн-макети етикеток, упаковок і банерів до друку.

TIFF відмінно передає глибину кольору і зберігає більше даних і метаданих про зображення, ніж PNG та JPEG. Якщо відкрити файл у Photoshop, ви побачите робочі шари, доступні для редагування. Однак це негативно позначається на вазі картинки.

NASA зберігає знімки з космічних телескопів у форматі TIFF

Переваги TIFF:

• Формат забезпечує високий рівень деталізації та відмінну кольоропередачу.
• Зображення можна зберегти з прозорим фоном.
• Шари зображення редагуються незалежно.

Недоліки TIFF:

5. EPS

Encapsulated PostScript перекладається як "інкапсульований постскрипт". Звучить складно, але насправді це зручний векторний формат, яким користуються веб-дизайнери. З розширенням .eps зберігають логотипи, іконки, банери, макети журналів та інші графічні об'єкти на випадок, якщо їх потрібно редагувати: масштабувати картинку або змінити колір і розмір якоїсь деталі. EPS відрізняють гарну передачу кольорів і високу деталізація зображень, тому він підходить для створення макетів з подальшим відправкою в друкарню.

Навіть маленькі іконки з розширенням .eps "важкі", тому браузери формату не підтримують. Перед публікацією зображення конвертуйте в JPEG, PNG або WebP. Щоб відкрити файл EPS, використовуйте спеціальний графічний редактор: CorelDraw або Adobe Illustrator.

У EPS зберігають логотипи, щоб змінювати їх розмір під різні носії без втрати якості

Переваги EPS:

• Файл без проблем конвертується у растрові формати.
• Під час масштабування та стиснення зображення EPS зберігає високу якість.
• Наявність шарів дозволяє редагувати окремі елементи зображення.

Недоліки EPS:

• EPS файл займає багато місця.
• Відкрити зображення вийде в обмеженій кількості програм. Для публікації його доведеться конвертувати.

6. SVG

Scalable Vector Graphics - масштабована векторна графіка. Оптимальний формат для роботи з 2D-зображеннями, який призначений для створення інтерфейсів сучасних сайтів та програм.

SVG — мовна розмітка, тому файли з таким розширенням редагуються в ілюстраторі та за допомогою HTML та CSS. Якщо потрібно змінити відтінок іконки, необов'язково відкривати фотошоп або ілюстратор: достатньо прописати новий колір у коді.

Колекція іконок у SVG-форматі

Переваги SVG:

• Зображення важить мало і швидко завантажується у браузері.
• Якщо збільшити розмір картинки вдесятеро, її якість не постраждає.
• SVG-об'єкти підтримують анімацію та стають клікабельними, якщо до них прив'язати посилання.
• Якщо ви володієте кодом, щоб змінити SVG-зображення не доведеться завантажувати графічний редактор.
• Щоб додати картинку на сайт, достатньо вставити її в HTML.

Недоліки SVG:

• Формат підтримує обмежену кількість відтінків та не передає глибину кольору.
• Розширення не підходить для фотографій.

7. RAW

Цей термін знайомий усім, хто захоплюється фотографуванням. З англійської RAW перекладається як «сирий». Назва чудово передає суть формату: це вихідне, невідредаговане зображення, отримане за допомогою фотоапарата чи смартфона. Коли ви робите фото в JPEG, камера автоматично обробляє та стискає його. RAW-файл - оригінал знімка, який дозволяє творити дива професійним фотографам: видаляти шуми, налаштовувати експозицію та баланс білого, підвищувати контрастність.

Фото справа виглядає надто темним. Формат RAW допоміг врятувати ситуацію та «витягнути» потрібну яскравість без втрати якості

У кожної камери RAW-файли мають своє розширення: у Nikon – .nef, у Canon – .crw, у Sony – .arw. Щоб відкрити та відредагувати фотографію на комп'ютері, доведеться скористатися RAW-конвертером.

Переваги RAW:

• Файл зберігає оригінальні метадані зображення та надає широкий набір можливостей для обробки фотографій.
• RAW забезпечує високу якість картинки та чудовий рівень деталізації.

Недоліки RAW:

• Файл займає багато місця.
• Формат підтримує не всі програми для перегляду та редагування зображень.

8. PSD

PSD – це абревіатура від Photoshop Document. Файли з таким форматом підтримуються лише у програмі Adobe Photoshop. Вони містять зображення з шарами та масками, які можна редагувати незалежно один від одного. Щоб роздрукувати або відкрити картинку у сторонньому графічному редакторі, його доведеться зберегти з іншим розширенням.

PSD використовують фотографи та дизайнери. Формат підходить для ретушування знімків, розробки макетів сайтів та шаблонів для соцмереж, створення іконок, банерів та інших графічних зображень.

Дизайнери зберігають шаблони для соцмереж в PSD, щоб мати можливість замінити в ньому фото чи напис під тематику посту та не створювати картинку з нуля

Переваги PSD:

• PSD використовують для роботи як із растровими, так із векторними зображеннями.
• Файл зберігає шари зображення та дозволяє їх редагувати окремо.
• PSD підходить для створення анімації.

Недоліки PSD:

• Щоб відкрити PSD-файл, потрібний Adobe Photoshop.
• Щоб опублікувати або роздрукувати зображення, його потрібно конвертувати в інший формат.
• Чим більше у картинки шарів, тим вона важча.

9. WebP

WebP розшифровується як web picture, що у перекладі означає «інтернет-картинка». Формат придумав Google спеціально для веб-графіки у 2010 році. Він дозволяє зменшити вагу зображень та прискорити їх завантаження на сайті, зберігши при цьому високу якість. WebP називають покращеним аналогом JPEG, оскільки файли з такою роздільною здатністю важать на 20-25% менше.

У WebP конвертуються лише PNG та JPEG-файли

Переваги WebP:

• Файли мало важать, тому заощаджують місце на сервері та жорсткому диску.
• WebP швидко завантажуються в браузері та економлять інтернет-трафік.
• Якість зображень WebP вища, ніж PNG і JPEG.
• Формат підходить і для статичних та анімованих об'єктів, а також для картинок із прозорим фоном.

Недоліки WebP:

• WebP підтримують не всі CMS (Content Management System – система керування контентом).

10. CDR

Абревіатура CDR походить від назви програми CorelDRAW, призначеної для створення графіки. Також CDR-файли відкриваються в Adobe Illustrator та конвертуються за допомогою безкоштовних сервісів. Формат універсальний: він дозволяє малювати векторні об'єкти та обробляти растрові зображення, застосовувати до них ефекти та фільтри, працювати з текстом. Його використовують у поліграфії, рекламі, веб-дизайні та інших областях, оскільки .cdr розширення гарантує високу якість картинки.

CorelDRAW – програма для створення CDR-зображень

Переваги CDR:

• Підтримує растрову та векторну графіку.
• У програмі CorelDRAW доступний величезний набір інструментів для роботи із зображеннями.

Недоліки CDR:

• Файл відкривають не всі графічні редактори, а перед публікацією його доведеться конвертувати.

11. PDF

Кожен стикався з PDF, коли замовляв квитки онлайн чи завантажував квитанцію про оплату. Повна назва формату – Portable Document Format. Компанія Adobe Systems розробила його спеціально для електронного документообігу, але його застосування набагато ширше. Файл підтримує тексти, зображення, посилання, аудіо та відеофрагменти. Тому зараз у PDF зберігають книги, гайди, чек-листи, презентації та навчальні посібники.

Приклад гайду заходів у форматі PDF. Всі посилання в документі клікабельні

Переваги PDF:

• Підтримує різні формати вмісту всередині документа.
• Файл легко завантажити, відкрити, надіслати та роздрукувати.
• Документ можна захистити від сторонніх очей та незаконного використання, якщо встановити пароль або додати електронний друк.

Недоліки PDF:

12. AI

AI – скорочення від Adobe Illustrator, програми для роботи з векторною графікою. Вона підходить для створення логотипів, іконок та ілюстрацій та верстки макетів, тому її та .ai розширення використовують у веб-дизайні. Об'єкти в даному форматі масштабуються, зберігаючи вихідну якість.

AI-форматі використовують для розробки та зберігання лого компаній

Переваги AI:

Недоліки AI:

Де і як використовувати зображення різних форматів

Узагальнюємо, для яких цілей підходять різні формати файлів зображень.

• Растрова графіка — фотографії та ілюстрації. Якщо плануєте роздрукувати картинку, вибирайте розширення з гарною деталізацією та кольором: .raw або .tiff. Щоб додати зображення на сайт, краще вибирати компактніші формати на кшталт JPEG і PNG.
• Векторна графіка використовується для створення елементів інтерфейсу та брендованої символіки. Віддавайте перевагу «легким» та сучасним форматам – SVG або WebP.

Розширення файлу залежить від того, яка програма для редагування у вас встановлена. Перед публікацією PSD, AI і CDR-файли доведеться конвертувати: тоді їх вдасться розмістити в інтернеті або роздрукувати.

Як стиснути та збільшити картинку без втрати якості

Якщо зображення занадто маленьке для білборду або занадто важке для сайту, спробуйте оптимізувати зображення.

• Зменшити вагу файлу допоможуть різні методи стиснення.Спробуйте змінити його формат або зменшити розмір, але пам'ятайте, що у другому випадку втрата якості неминуча. Оптимальний спосіб - використовувати сторонній сервіс на зразок Optimizilla.Він перетворює великі файли на маленькі, зберігаючи оригінальний рівень деталізації.
• Збільшити зображення складніше, ніж зменшити. Якщо справа стосується векторної графіки, жодних проблем: розтягніть картинку, скористайтеся сервісом Upscale Media або функцією інтерполяція в графічному редакторі — вона змінює розмір пікселів. А ось растрове зображення при масштабуванні неминуче втратить чіткість.

Висновок

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