Посібник із додавання віньєтки на зображення

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

Що вам знадобиться

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

Сумісний файл зображення: інструмент підтримує стандартні веб-формати растрових зображень, зокрема JPG, JPEG, PNG та WEBP. * Сучасний веб-браузер: будь-який оновлений браузер на вашому комп'ютері або мобільному пристрої підійде для завантаження та обробки файлу. Підтримка WebAssembly: ваш браузер завантажує модуль libvips WebAssembly для локальної обробки даних.

Файл у межах ліміту розміру: вихідний файл не повинен перевищувати ліміт у 20 МБ.

Ліміт у 20 МБ суворо дотримується. Файли, що перевищують цей ліміт, не будуть оброблені. Крім того, векторні формати, такі як SVG, або RAW-формати камер (наприклад, CR2 або NEF) не підтримуються безпосередньо.

Ви повинні конвертувати ці формати у стандартний растровий формат, як-от PNG або JPG, перш ніж намагатися додати віньєтку.

Як додати віньєтку

Відкрийте браузер і перейдіть до інтерфейсу інструмента Image Vignette. Знайдіть файл зображення на своєму пристрої. Переконайтеся, що він у підтримуваному форматі (JPG, JPEG, PNG або WEBP) і його розмір не перевищує 20 МБ.

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

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

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

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

Як це працює

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

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

Коли відстань від центру перевищує поріг радіуса, libvips застосовує формулу розмиття. Ця формула поступово зменшує значення червоного, зеленого та синього (RGB) каналів кожного пікселя. Чим далі піксель від центру, тим більше його значення RGB масштабуються в бік чорного кольору.

Для файлів PNG, що містять прозорість, libvips обережно обробляє альфа-канал. Він застосовує ефект затемнення лише до каналів RGB, зберігаючи канал прозорості, що гарантує, що прозорі фони не перетворяться на суцільні чорні блоки. Після того, як ці математичні коригування застосовані до всієї піксельної сітки, libvips упаковує змінені дані у вибраний вами вихідний формат (JPG, JPEG, PNG або WEBP) для завантаження.

Коли виникають проблеми

Якщо файл не завантажується, найчастішою причиною є те, що розмір файлу перевищує ліміт у 20 МБ. Коли файл занадто великий, браузер або libvips розривають з'єднання. Щоб виправити це, перевірте властивості файлу та зменште розміри зображення перед завантаженням.

Іншою поширеною проблемою є кольорова смугастість (banding), коли віньєтка виглядає як серія окремих блокових кілець замість плавного градієнта. Це відбувається тому, що вихідний файл має низьку глибину кольору або був сильно стиснутий раніше. Коли libvips намагається обчислити плавні переходи на зображенні з обмеженими даними про колір, йому не вистачає проміжних відтінків, що призводить до появи видимих «сходинок».

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

Якщо ваш об'єкт виглядає темним і затіненим, проблема полягає в композиції зображення. libvips обчислює віньєтку від абсолютного геометричного центру кадру. Якщо ваш об'єкт розташований не по центру (наприклад, у композиції за правилом третин), широка віньєтка перекриє його і затемнить.

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

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

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

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

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

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