Коли працюєш над дизайном сайтів, часто доводиться стикатися з тим, що знайдене зображення, яке ідеально підходило б до твоєго сайту, має інше тло, яке бажано б прибрати.
І так, відкриваємо нашу картинку у фотошопі.
1.
Перше, що потрібно зробити – створити у картинки робочу область із прозорим фоном. Для цього:
— у віконці шарів клацаємо двічі на наш шар (із замочком)
— У віконці, що повилося, натискаємо ОК
Замочок має зникнути
Якщо фон однотонний:
Вибираємо інструмент « Чарівна паличка» - це дуже гнучкий інструмент для виділення потрібної області. Наше завдання виділити все тло, крім малюнка. Для цього підганяємо налаштування чарівної палички (параметр допуск), доки отримаємо потрібний результат. Також користуємося кнопкою Shift, щоб виділити область крім вже виділеної. Натискаємо Del і виділена обласка видаляється.
Якщо фон різнокольоровий:
Використовуємо інструмент « Швидке виділення«. Тут наше завдання виділити не тло, а сам об'єкт, який має залишитися. Натискаємо доти, доки не виділиться потрібна область. Якщо виділилося зайве, затискаємо Alt і обминаємо. Переглянути результат можна кнопкою Q.
Коли виділення готове, скопіюємо його Ctrl+C. Створюємо новий документ із прозорим тлом (Ctrl+N) і вставляємо туди об'єкт Ctrl+V.
3 . Якщо на малюнку залишилося щось зайве, використовуємо інструмент. Ластик«Просто затираємо зайве тло.
4 . Зберігаємо зображення для Web (Alt+Shift+Ctrl+S) вибираємо формат GIF або PNG (в інших наше прозоре тло перетвориться на білий).
Корисне відео на тему:
Іноді може знадобитися зображення у форматі PNG з прозорим фоном. Однак не завжди потрібний файл відповідає потрібним параметрам. У такому разі його потрібно самостійно змінювати чи підбирати новий. Щодо створення прозорого фону, здійснити це завдання допоможуть спеціальні онлайн-сервіси.
Процедура створення прозорого фону передбачає видалення всіх зайвих об'єктів, залишивши при цьому тільки потрібний, на місці ж старих елементів з'явиться бажаний ефект. Ми пропонуємо ознайомитись з інтернет-ресурсами, що дозволяють реалізувати подібний процес.
Графічний редактор LunaPic працює в режимі онлайн та надає користувачеві велику кількість найрізноманітніших інструментів та функцій, включаючи заміну фону. Виконується поставлена мета в такий спосіб:
На цьому роботу з сервісом LunaPic завершено. Завдяки наведеній інструкції, ви зможете без проблем зробити фон прозорим. Єдиним недоліком сервісу є його коректна робота тільки з малюнками, де задній план заповнює переважно один колір.
Давайте розберемося із сайтом PhotoScissors. Тут немає такої проблеми, що гарна обробка буде отримана лише з певними картинками, оскільки ви самі задаєте область, що вирізується. Здійснюється процес обробки так:
На цьому роботу з онлайн-ресурсом PhotoScissors завершено. Як бачите, в управлінні їм немає нічого складного, з поставленим завданням розбереться навіть недосвідчений користувач, який не має додаткових знань і навичок.
Останнім часом сайт Remove.bg перебуває на слуху у багатьох. Справа в тому, що розробники надають унікальний алгоритм, який автоматично вирізує тло, залишаючи на зображенні лише людину. На жаль, на цьому можливості веб-сервісу закінчуються, проте з обробкою таких фотографій він чудово справляється. Пропонуємо детальніше ознайомитись із цим процесом:
На цьому наша стаття підходить до свого логічного завершення. Сьогодні ми постаралися розповісти вам про найпопулярніші онлайн-сервіси, що дозволяють зробити фон прозорим на зображенні буквально в кілька кліків. Сподіваємося, хоча б один сайт вам сподобався.
Головне потрібно вказати картинку на вашому комп'ютері чи телефоні, а потім натиснути кнопку ОК унизу цієї сторінки. За замовчуванням однотонне тло картинки замінюється на прозоре. Колір фону вихідної картинки визначається автоматично, потрібно лише вказати в налаштуваннях, яким колір його замінювати. Основним параметром, що впливає якість заміни, є «Інтенсивність заміни» і кожної картинки може бути різною.
Приклад фотографії рожевої троянди без змін та після заміни однотонного фону на прозорий, білий та зелений:
Перший прикладз троянди на прозорому фоні зроблено з такими налаштуваннями:
1) Інтенсивність заміни - 38;
2) Згладжування по краях - 5;
3) Замінити однотонний фон на - прозорий;
4) Обрізання (<0) или Добавление (>0) по краях - "-70";
5) Інвертувати – відключено (галка не варто).
Для створення другого прикладу, з білим фоном, використовувалися такі ж настройки, як і в першому прикладі, крім параметра: "Замінити однотонний фон на" - білий. У третій приклад, із зеленим фоном, також використані налаштування, як і в першому прикладі, крім параметра: "колір у форматі hex" - #245a2d.
Початкове зображення не змінюється. Вам буде надана інша оброблена картинка з прозорим або вказаним фоном.
У деяких користувачів може виникнути потреба зробити прозоре тло на деяких фото. Це може бути пов'язане з міркуваннями естетики, потребою створення водяного знака в комерційних цілях та іншими причинами – факт у тому, що користувач не знає, як і за допомогою чого це можна здійснити. У цьому матеріалі я намагатимусь допомогти таким користувачам і розповім, як зробити прозорий фон онлайн, які сервіси для цього існують, і як ними скористатися.
У мережі є кілька сервісів, що дозволяють прибрати фон фотографії онлайн безкоштовно. При цьому всі вони мають досить простий інструментарій, дозволяючи видалити фон фотографій практично за кілька кліків. Нижче я перелічу дані послуги з докладним описом їх функціоналу.
Якщо у вас, як і у мене виникає бажання, то поспішаю вас порадувати я протестував більшість із них і склав список кращих (за посиланням вище).
Перший ресурс, що дозволяє створити прозоре тло онлайн - це Online-Photoshop. Робота з ним досить проста, дозволяючи за кілька хвилин отримати об'єкт із прозорим фоном на вашому фото.
Тепер натискаємо стрілку праворуч і дивимося результат. Якщо все добре, натискаємо кнопку «Download» зверху і зберігаємо результат до себе на ПК.
Інший інструмент зробити прозорий фон онлайн – це схожий на «Фотошоп» онлайн-редактор Pixlr. Він має значну кількість можливостей, але нас цікавить насамперед створення прозорого фону онлайн.
Даний сервіс є практично повністю автоматизованим варіантом, що дозволяє зробити заднє тло прозорим онлайн.
Для роботи з сервісом перейдіть на нього, клацніть на кнопку «Огляд», переконайтеся, що в опції «Замінити однотонне тло на» стоїть варіант «Прозорий» і натисніть на велику кнопку «Ок» внизу.
Після обробки ви отримаєте можливість переглянути отриманий результат або завантажити його на комп'ютер за допомогою відповідних посилань.
Зауважу, що за рахунок автоматизації якість одержуваної обробки зазвичай гірша, ніж у вище перерахованих Online-Photoshop і Pixlr.
Ще один сервіс, що дозволяє зробити прозоре тло на фото онлайн безкоштовно.
Для роботи з цим сервісом фотографію потрібно підготувати, для чого потрібно зафарбувати потенційно прозору область кольором, який відсутній на самому зображенні (наприклад, синім, як наведено в прикладі нижче). Також важливо, щоб фото було у форматі PNG або GIF.
Даний сервіс для створення прозорого фону схожий у своєму функціоналі, схожий на попередній, вимагаючи заднього фону, виконаного в одному кольорі. Цей колір він трансформує у прозоре тло, отримуючи необхідне користувачем зображення.
У порівнянні з сервісом Watermark.Algid.Net сервіс LunaPic більше схожий на повноцінний фоторедактор, дозволяючи пофарбувати заднє тло одним кольором за допомогою вбудованих у цей сервіс інструментів.
Вище мною було перераховано кілька зручних та легких у роботі сервісів, що дозволяють зробити прозоре тло в режимі онлайн. Найбільш ефективними, на мою думку, є сервіси Online-Photoshop і Pixlr, результати їх обробки знаходяться на хорошому рівні, а специфіка опціоналу зовсім не складна. Якщо вам необхідно зробити прозоре тло для фото — рекомендую звернутися до можливостей даних інструментів, вони дозволять легко та швидко створити прозоре тло онлайн.
Більш того, будучи вільним форматом PNG пропонує для веб дизайнера різні практичні переваги над GIF:
Доречно помітити, що PNG не дозволяє робити анімацію, як це робить GIF. Але існує стандарт Multiple-image Network Graphics (MNG), який це дозволяє, але він не так широко підтримується веб-браузерами та графічними редакторами.
Ви ймовірно здивовані, чому PNG не такий широко використовуваний у веб формат, якщо він такий гарний, як його рекламують. Відповідь, здебільшого, це неправильне уявлення про формат та його підтримку браузерами.
Через те, що Internet Explorer 6 і раніше версії не підтримують повний спектр PNG можливостей (включаючи прозорість альфа каналу) людям залишається вірити (хоча це невірно), що Internet Explorer не підтримує PNG зовсім або як мінімум не підтримує прозорість. Насправді Internet Explorer 5 і 6 підтримують достатньо специфікацій PNG, роблячи його функціонально еквівалентним (або навіть) неанімованим GIF зображень. Всі інші згадувані браузери, включаючи Firefox, Netscape 6 і вище, Mozilla, Opera 6 і вище, Safari та Camino повністю підтримують PNG прозорість.
Крім цієї невірної концепції про підтримку браузером, вбудована в GIF анімація була (і продовжує бути) основною причиною його успіху. Хоча, за кілька років, використання GIF стає все менш популярним у порівнянні з іншими технологіями (наприклад, Flash), які стають більш придатними для анімації.
Прозорість - ключова характеристика GIF і PNG, яка часто є причиною вибору формату веб дизайнера, що використовується. Хоча PNG пропонує більш вичерпну підтримку прозорості, веб дизайнерам часто потрібно створити GIF версію зображень для припасування до старих браузерів. Використовуючи CSS це можливо (і частково банально), через посилання GIF зображень для старих браузерів і високоякісних PNG в браузери які їх розуміють. Але це подвійна робота для веб-дизайнера і як результат люди йдуть по меншому опору і продовжують використовувати GIF зображення.
Отже, ми розглянули кілька причин, чому GIF все ще такий популярний, але більшість з них засновані на нерозуміння концепцій або використанні звичного сценарію роботи. Озброєні деякими ключовими знаннями в роботі з PNG та тим, як він може надійно використовуватись у браузерах, Вам надається можливість скористатися всіма перевагами, які він пропонує.
JPEG інший повсюдний веб формат і в більшості випадків, таких як фотографії (або з ними), він навіть краще ніж PNG або GIF. PNG не призначений для конкуренції із JPEG. JPEG компресія робить значно менші за розміром файли, ніж PNG, коли працює з фото. З іншого боку, PNG виробляє менші файли коли всередині зображень є текст, художні лінії, лого, "рівні" кольори і т.д.
Тепер давайте подивимося, як використовувати PNG у веб дизайні. Я зібрав усі файли для кожного прикладу в окрему папку, доступну на friends of ED.
За останні кілька років, градієнт - плавний перехід між двома або більше квітами, став найкращим другом веб-дизайнерів. Особливо популярні витончені, ледь помітні градієнтні заливки, які не кидаючись у вічі створюють відчуття глибини та фактурності.
Іноді GIF це найкращий вибір для градієнта. Якщо градієнт це простий двоколірний перехід, GIF у ньому працює бездоганно. Проте, обмеженість GIF лише 256 кольорами часто створює помітну та неохайну "смугастість" серед складніших градієнтних переходів. JPEG, з іншого боку, може виводити досить приємні градієнти, але часто ціною більшого розміру файлу. І поки JPEG градієнти, як правило, досить хороші, потрібно пам'ятати, що JPEG використовує стиск із втратами, що означає, що отримане зображення ніколи не дотягуватиме до якості стиснутої картинки.
Типовий стиль фонового градієнта, що розглядається, використовується для кнопок, блоків або просто десь ще. Це може виглядати як на малюнку 5-1. За годинниковою стрілкою, від лівого верхнього кута, ми бачимо оригінальне (несжате) зображення, GIF версію, PNG версію і JPEG. Ви бачите, що PNG має найменший розмір (515 байт). Це вчетверо менше, ніж GIF зображення. JPEG трохи більше ніж PNG на 637 байт і він до того ж нижче якістю через стиснення з втратами (правда можливість людського ока визначити відмінність як у цьому простому прикладі залишається під питанням).
Малюнок 5-1
Панель Photoshop'у - Save For Web,
показує відмінності файлового розміру для одного і того ж зображення в різних форматах
Іноді необхідно створити зображення, яке працює однаково на різних підкладках. Деякі загальні приклади – це лого та іконки. У таких ситуаціях традиційно домінували GIF файли, але є кілька причин, чому PNG може бути кращим вибором у цій ситуації. PNG зазвичай виграє у розмірі файлу для логотипів або будь-якого іншого простого "мистецтва". До того ж, вроджена прозорість PNG робить простим створення одиночних файлів, які працюють поверх будь-якого фону. PNG пропонує двійкову прозорість, як у GIF, але також надає набагато бажаніший варіант з альфа-каналом, в якому пікселі можуть бути частково прозорими, замість того, щоб бути просто включеними або вимкненими. Використання останнього збільшує розмір файлу, іноді навіть більше, ніж GIF з двійковою прозорістю, але це дозволяє робити згладжування на межі вашого зображення і робити більш елегантним його розміщення поверх фону.
Однак я переробив їхню концепцію використовуючи біле зображення із символами - трафаретами. Вони використовували білий символ на прозорому фоні, який, як правило, міг бути досить ефективним. У цьому випадку, Ваш фоновий колір CSSвиявлявся б у квадратній чи прямокутній області навколо символу, замість самого символу.
І Dan та PJ використовували прозорий GIF замість PNG. Це повністю покривало їхні потреби, і під стиль іконок їм доводилося створювати піксельні зображення. Використовуючи PNG, Ви можете отримувати схожу техніку, але з деякою перевагою через антиаліасинг і часткову прозорість для використання її в більш детальних іконках.
Я знаю, що Ви думаєте: вся ця PNG прозорість добре виглядає, але чи практична вона?
Хороші новини полягають у тому, що всі сучасні браузери повністю підтримують зображення PNG, включаючи прозорість альфа каналу, переваги якого я показав у прикладах. Safari (всі версії), Firefox (всі версії), Opera (версії 6 і вище), Netscape (версії 6 і вище), і Mozilla (всі версії) будуть відпрацьовувати все, що я у них попрошу. Але є й одна погана новина - єдиний браузер, який я ще не згадав і який є у більшості користувачів: Internet Explorer.
Internet Explorer 6 і нижче не підтримує прозорість альфа каналу, вбудовану в PNG формат. З того часу, як для більшості численних веб-серферів був зроблений вибір (або не вибір) браузера, ця зяюча дірка стримувала веб дизайнерів далеко від PNG. Проте, з виходом Internet Explorer 7 ми отримали повну підтримку альфа прозорості PNG у всіх значних браузерах. Що далі, чи є шляхи для роботи з альфа-прозорістю PNG в Internet Explorer 6 та нижче? Отже, якщо Ви хочете використати цей ефект, ніщо не зупинить Вас. Internet Explorer 6 і його ранні версії вимагають до себе більшої, ніж треба, уваги, але це безперечно можливо.
У складі Internet Explorer є різні власні фільтри. Вони використовуються в CSS, але вони не є частиною офіційної специфікації CSS. Іншими словами, вони не стандартизовані в Інтернеті. На жаль Internet Explorer 6 і нижче не повністю підтримують формат PNG (який рекомендований W3C), у Microsoft є фільтр який усуває цей недолік: AlphaImageLoader.
Відповідно до розділу на офіційному сайті Microsoft, AlphaImageLoader "відображає зображення в межах меж об'єкта та між фоном об'єкта та його вмістом". Іншими словами, AlphaImageLoader завантажує PNG зображення з його повною прозорістю, але він завантажує його як власний шар, знизу якого знаходиться вміст об'єкта, на якому він застосовується. PNG зображення, завантажені таким шляхом, більше діють як фонові зображення, ніж зображення переднього плану (хоча вони насправді сидять зверху фону об'єкта).
Втім, Ви можете застосувати AlphaImageLoader в CSS на елементах img і насолоджуватися результатом. Спершу буде завантажено зображення, прозорість залишається, але потім зображення буде завантажено знову - як передній вміст об'єкта - з непрозорими областями (в такий спосіб "затінюється" Ваша прозора версія).
Ви не можете використовувати прозоре PNG як фонове зображення CSSдля (X)HTML елемента (скажімо, для
Повернімося назад до одного з ранніх прикладів і спробуємо правильно завантажити його в Internet Explorer. Пам'ятаєте Channel 49, TV станцію в Topeka? Впевнений – так. Малюнок 5-21 показує, як виглядає сайт в Internet Explorer 6.
Малюнок 5-21
Заголовок 49abcnews.com, виведений в Internet Explorer 6 для Windows, з незайманою прозорістю PNG.
HTML для верхньої частини, пов'язаної з погодою, виглядає як Ви, можливо, вже припустили:
Currently in Topeka, KS:
82° Overcast
Get the forecast and more...
Ви бачите зображення, і це PNG, навіть Internet Explorer завантажує його бездоганно. Секретний інгредієнт цього JavaScript. Насправді я використав трохи DOM скриптингу для того, щоб прибрати елемент img на льоту і замінити його на елемент div, який - Ви здогадалися - використовує AlphaImageLoader. JavaScript описаний усередині умовних коментарів, інша підручна, але повністю нестандартизована ідіома від Microsoft, вбудована в Internet Explorer. Умовні коментарі дозволяють використовувати код тільки для заздалегідь відомої версії Internet Explorer. Код ігнорується іншими браузерами, тому він ніяк їх не зачіпає. В елементі
сайту www.49abcnews.com , Ви знайдете:
Дякуємо першому рядку, if lte IE6, цей скрипт буде включений в документ, що відмальовується тільки якщо він буде показаний у версії Internet Explorer менше або рівної (це вказується за допомогою lte) 6. Всі інші браузери, включаючи новоприбулого Internet Explorer 7, це повністю ігнорувати .
Отже, що ж у файлі JavaScript fixWeatherPng.js? Погляньмо:
Window.attachEvent("onload", fixWeatherPng); function fixWeatherPng() ( var img = document.getElementById("weatherImage"); var src = img.src; img.style.visibility = "hidden"; var div = document.createElement("DIV"); div.style. filter = "progid:DXImageTransform.Microsoft. AlphaImageLoader(+ src + "", sizing="scale")"; // Кілька 49abcnews.com-specific CSS стиляє заміщений для brevity. img.replaceNode(div); )
Давайте проаналізуємо крок за кроком, що робить скрипт. Спочатку ми говоримо браузеру, що ми хочемо виконати функцію fixWeatherPng, коли завантажується сторінка. Решта скрипта - сама функція.
Починаємо, спершу ми шукаємо зображення з яким ми будемо працювати за його атрибутом і зберігаємо його в змінній img. Зберігаємо атрибут src (URL на файл зображення) у змінній src. Потім ми ховаємо елемент img виставляючи CSS властивість visibility у hidden.
У результаті ми замінюємо оригінальний елемент img (який прихований) на новостворений елемент div, якого вдало причеплений AlphaImageLoader.
Використання DOM скриптингу для вставки Вашого AlphaImageLoader - фільтруючого біти на льоту, має свою безсторонню, але необхідну сторону - некоректний CSS. Більше того, поза Вашою (X)HTML розміткою будуть міститися несемантичні div елементи. І доки все це описано всередині умовних коментарів, для інших браузерів немає шансу бути зіпсованим кодом від Microsoft. (handyblogger: Тут Джефф намагається тонко вказати на "коряве" рішення від Microsoft)
Якщо Вам доводиться робити щось некоректне, принаймні Ви можете витягти його і зберегти окремо від того, де це не потрібно.
PNG, як графічний формат, пропонує багато технічних переваг, крім тих, які широко використовуються в GIF. Насправді, переваги настільки великі, що PNG давним давно міг би зайняти домінуюче положення як графічний формат не пов'язаний з фото зображеннями. Недостатня підтримка з боку Internet Explorer деяких більш значущих можливостей PNG, таких як прозорість альфа каналу, як результат відлякує багатьох веб-розробників. Але є дві дуже хороші причини того, чому Ви не повинні боятися PNG.
Перша: навіть Internet Explorer 6 і його попередні версії практично повністю підтримують PNG в частині того, що може GIF (звичайно за винятком анімації). PNG завжди показує менший розмір файлів дозволяючи швидше їх завантажувати і витрачати менше ресурсів.
Другий: Internet Explorer 7 пропонує повну підтримку для альфа прозорості PNG. Ефекти, які можна отримати з повною гамою напівпрозорих опцій практично безмежні. Я очікую, що дизайнерам, які знайдуть цікаві шляхи використання прозорості PNG, за принципом описаних у цій статті, будуть відчинені двері на новий рівень стилів ще небачених до цього. Я дав Вам корисні ідеї того, що Ви можете створювати за допомогою PNG прозорості, але не зупиняйтеся на цьому. Шукайте себе!
Уривок з Web Standards Creativity від Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin, та Rob Weychert; опубліковано friends of ED. Copyright Jeff Croft 2007. Використовується з дозволу Apress, Inc.
