Şəffaf fonlu PNG: rəngləri necə ayırmaq və fonları necə silmək olar

1. Rəqəmsal şəffaflığın anatomiyası: RGBA rəng modeli və alfa kanalları

Peşəkar şəffaf qrafika yaratmaq üçün rəqəmsal kompüterlərin şəffaflığı necə təmsil etdiyini anlamaq lazımdır. Köhnə JPEG kimi standart rəqəmsal təsvir formatlarında hər piksel üç 8 bitlik rəng kanalı ilə müəyyən edilir: qırmızı (R), yaşıl (G) və mavi (B). Hər kanal 0-dan 255-ə qədər dəyişir və 16,7 milyon mümkün rəng kombinasiyası yaradır. Lakin standart JPEG-də dördüncü kanal olmadığı üçün onun şəffaflıq anlayışı yoxdur: hər piksel tamamilə qeyri-şəffafdır.

Portable Network Graphics (PNG) spesifikasiyası alfa (A) kanalını təqdim edərək 32 bitlik RGBA rəng modelini yaratdı. Alfa kanalı RGB dəyərləri ilə yanaşı saxlanılan 8 bitlik boz tonlu maskadır və burada hər piksələ 0-dan 255-ə qədər qeyri-şəffaflıq dəyəri təyin edilir:

- Alfa = 0: tamamilə şəffaf (görünməz). Pikselin altındakı fon 100% görünür.

- Alfa = 255: tamamilə qeyri-şəffaf (bərk). Pikselin RGB rəngi fonu tamamilə örtür.

- Alfa = 1–254: yarışəffaf (işıq keçirən). Kompozisiya mühərriki ön plan pikselinin rəngini xətti interpolyasiya (alfa qarışdırma) ilə fon rəngi ilə riyazi qarışdırır.

Müasir PNG qrafikasını qədim 1 bitlik GIF şəffaflığından ayıran məhz bu 8 bitlik alfa kanalıdır: o, hamar, hamarlaşdırılmış əyri kənarları, real kölgələri və yumşaq parıltı effektlərini mümkün edir.

2. Fon silmə üsulları: doldurma, rəng açarı və işıqlılığın ayrılması

Təmiz şəffaf fon çıxarmaq mənbə təsvirləriniz üçün uyğun hesablama alqoritmini seçməyi tələb edir:

1. Toxum nöqtəsindən doldurma ilə çıxarma: bərk fonlarda qrafika, loqolar və imzalar üçün doldurma alqoritmləri (Photoshop Magic Wand-a bənzər) təyin edilmiş toxum pikselindən (məsələn, yuxarı sol küncdən) başlayır və Evklid rəng məsafəsi istifadəçinin təyin etdiyi tolerantlıq həddi daxilində olan ardıcıl qonşu pikselləri keçir. Bu, daxili ağ detalları (loqodakı ağ hərflər kimi) qoruyarkən xarici ağ sahəni ayırır.

2. Qlobal xroma açarı (rəngin silinməsi): ayrı daxili kəsikləri olan qrafika üçün qlobal rəng açarı bütün şəkildəki hər pikseli qiymətləndirir. Tolerantlıq deltası daxilində hədəf açar rənginə (məsələn, təmiz ağ #FFFFFF və ya yaşıl ekran #00FF00) uyğun gələn istənilən pikselin alfa kanalı sıfıra təyin edilir.

3. İşıqlılıqdan alfaya çıxarma: ağ-qara mürəkkəb eskizləri, karandaş rəsmləri və ya skan edilmiş imzalar üçün işıqlılığın ayrılması hər pikselin parlaqlığını birbaşa alfa kanalına xəritələyir: tünd qara xətlər tam qeyri-şəffaf qara piksellərə, ağ kağız tam şəffafa çevrilir, yumşaq boz karandaş ştrixləri isə təbii yarışəffaflığı saxlayır.

3. Kənar haşiyələnməsi ilə mübarizə: ağ haloları və mat artefaktlarını necə düzəltmək olar

Həvəskar fon silməsində ən çox rast gəlinən qüsur kənar haşiyələnməsidir (halo və ya mat artefaktı kimi də tanınır). Loqo əvvəlcə bərk ağ fonda render edildikdə onun əyri haşiyələri boyunca hamarlaşdırılmış piksellər hamar keçidlər yaratmaq üçün ağ boya ilə qarışdırılıb.

Sadə alət sadəcə təmiz ağ pikselləri (#FFFFFF) silərsə, həmin yarımqarışıq haşiyə pikselləri qalır. Ayrılmış loqo sonradan tünd fon və ya tünd rejimli vebsayt başlığı üzərinə yerləşdirildikdə hər kənarın ətrafında dəhşətli ağ kontur parıldayır.

Peşəkar kənar təmizləməsi rəngin ön vurmadan çıxarılması və alfa matlaşdırma alqoritmləri vasitəsilə haloları aradan qaldırır:

- Rəng tolerantlığının genişləndirilməsi: rəng məsafəsi həddini hamarlaşdırma zonasına bir qədər genişləndirmək solğun haşiyə kənarını silir.

- Alfa yumşaltma və Qauss kənar hamarlaşdırması: alfa kanalı maskasına incə subpiksel bulanıqlığı tətbiq edir və pilləli piksel keçidlərini hamarlaşdırır.

- Kənar rənginin sıxılması: haşiyə piksellərini təhlil edir və onların RGB dəyərlərini qonşu bərk ön plan rənglərinə uyğunlaşdıraraq ağ çirklənməni loqonun həqiqi daxili çaları ilə əvəz edir.

4. Yarışəffaflıq və sərt maskalama: şüşə, kölgələr və saçla işləmək

Qabaqcıl vizual dizayn tez-tez zərif, yarışəffaf elementlərlə işləməyi tələb edir: sınan parıltıları olan şərab qədəhləri, ağ masa səthlərinə düşən məhsul kölgələri və portret fotoqrafiyasında incə insan saçı.

Sadə binar hədd (sərt maskalama) bu aktivlərdə fəlakətli şəkildə uğursuz olur və subyektin təbii realizmini məhv edən kələ-kötür, kəsilmiş konturlar yaradır.

Kliyent tərəfli alfa matlaşdırma mühərrikimiz keçid zonaları boyunca kəsr qeyri-şəffaflıq dəyərlərini hesablayır. 10% ilə 80% arasında incə alfa qradiyentlərini qorumaqla məhsul kölgələri istənilən vebsayt fon rəngi — açıq, tünd və ya naxışlı — üzərində təbii şəkildə qarışır və peşəkar, kataloq səviyyəli təsvirlər yaradır.

Riyazi olaraq alfa kompozisiyası klassik Porter-Duff kompozisiya cəbrinə, xüsusilə Source Over operatoruna əsaslanır: Output_Color = (Source_Color * Source_Alpha) + (Destination_Color * Destination_Alpha * (1 - Source_Alpha)). Peşəkar istehsal konveyerləri üçün kəsiklər yaradarkən düz alfa ilə ön vurulmuş alfanı fərqləndirmək vacibdir. Düz alfa toxunulmamış çəkisiz RGB rəng dəyərlərini müstəqil alfa kanalı ilə yanaşı saxlayır, ön vurulmuş alfa isə rəng kanallarını qeyri-şəffaflıq nisbətinə əvvəlcədən vurur. Uyğunsuz kompozisiya iş axınları aktivlər açıq fonlar üzərində render olunduqda tez-tez tünd haşiyələnmə ilə nəticələnir.

İncə dağınıq saç telləri və ya şəffaf parçalar olan mürəkkəb portret subyektləri üçün müasir veb matlaşdırma alqoritmləri qapalı formalı matlaşdırma tənliklərini və ikitərəfli filtrasiyanı hesablayır. Təyin edilmiş ön plan toxumları ilə fon istinad bölgələri arasında lokal məkan rəng paylanmalarını təhlil etməklə kliyent tərəfli alqoritmlərimiz kəsr alfa dəyərlərini piksel-piksel həll edir və ənənəvi hədd üsulunun məhv etdiyi mikro səviyyəli detalları qoruyur.

5. Addım-addım bələdçi: brauzerdə rəngləri ayırmaq və şəffaf PNG-lər yaratmaq

Şəffaf qrafika yaratmaq heç vaxt bahalı Adobe Photoshop abunəlikləri üçün ödəniş etməyi və ya brend əmtəə nişanlarınızı bulud foto redaktorlarına yükləməyi tələb etməməlidir. Brauzer daxili Şəffaf et və Fonu sil alətlərimiz HTML5 Canvas API və Web Worker-lərdən istifadə edərək 100% lokal olaraq brauzerinizdə işləyir.

Fonları saniyələr içində necə ayıracağınız budur:

1-ci addım: şəffaflaşdırma alətini açın. PNG, JPEG və ya WebP qrafikanızı iş sahəsinə sürükləyib buraxın.

2-ci addım: silmək istədiyiniz fon rənginin istənilən yerinə klikləyin. Damcıölçən aləti dəqiq hədəf rəngdən nümunə götürür.

3-cü addım: rəng tolerantlığı sürüşdürücüsünü tənzimləyin. Təmiz qrafika üçün 10%–15% tolerantlıq idealdır; daha yüksək tolerantlıqlar haşiyələr ətrafındakı JPEG sıxma küyünü silməyə kömək edir.

4-cü addım: hamarlaşdırılmış əyrilər boyunca ağ haloları avtomatik neytrallaşdırmaq üçün kənar təmizləməsini aktivləşdirin.

5-ci addım: real vaxt şəffaflıq şahmat taxtası önizləməsini nəzərdən keçirin və şəffaf PNG-ni endirmə düyməsinə klikləyin. Aktiviniz dərhal istehsalda istifadəyə hazırdır.

6. İstehsal üçün ixrac: PNG, itkisiz WebP və miqyaslanan SVG

Şəffaf aktivinizi ayırdıqdan sonra optimal ixrac formatını seçmək bütün rəqəmsal təmas nöqtələrində sürətli yüklənməni təmin edir:

- Şəffaf PNG-32: universal sənaye standartı. Hər şəkil baxıcısı, mobil tətbiq və əməliyyat sistemi tərəfindən dəstəklənir. Ümumi istifadə və masaüstü dizayn proqramları üçün ən yaxşısıdır.

- İtkisiz WebP: müasir veb çempionu. 100% eyni piksel şəffaflığı təmin edir və PNG-dən 25%–35% kiçik fayllar yaradır. Şəffaf PNG-lərinizi PNG-dən WebP-yə alətimizlə WebP-yə çevirin.

- Scalable Vector Graphics (SVG): həndəsi brend loqoları, UI ikonları və tipoqrafiya üçün rastr kəsiyinizi sonsuz miqyaslanan vektora çevirmək ayırdetmə məhdudiyyətlərini birdəfəlik aradan qaldırır. Fiqurları təmiz ayırmaq və fon artefaktlarını aradan qaldırmaq üçün Şəffaf et alətimizdən istifadə edin.

İstehsal yerləşdirmələri üçün fayl formatlarını qiymətləndirərkən aktiv çəkisi və sıxma mexanikası həlledici rol oynayır. Standart 32 bitlik PNG (tez-tez 8 bitlik alfa kanalı ilə PNG-24 adlandırılır) LZ77 və Huffman kodlaşdırmasından ibarət itkisiz DEFLATE sıxmasından istifadə edir. Hər köhnə qrafika sistemi ilə universal uyğun olsa da, PNG faylları yüksək sıxlıqlı Retina və 4K displeylərdə həddən artıq ağır ola bilər.

Müasir WebP formatı (itkisiz kanallar üçün VP8L proqnozlaşdırıcı kodlaşdırmasından istifadə edən) məkan entropiyasını və rəng transformasiyalarını təhlil edərək PNG-ni kəskin şəkildə üstələyir və bir piksel belə aydınlığı qurban vermədən şəffaf fayl ölçülərini orta hesabla 30% kiçildir. Şirkət emblemləri və tipoqrafik simvollar kimi vektor əsaslı aktivlər üçün şəffaf rastr kəsiklərini Potrace vektorlaşdırması ilə SVG-yə çevirmək sonsuz miqyaslanma və cüzi yük həcmi ilə ayırdetmədən asılı olmayan yollar verir.

7. Şəbəkədən təcrid olunmuş məxfilik: dərc olunmamış brend loqolarının və əmtəə nişanlarının qorunması

Qrafik dizaynerlər və korporativ marketinq komandaları ictimai məhsul təqdimatlarından əvvəl tez-tez yüksək məxfi yaradıcı aktivlərlə işləyir: dərc olunmamış brend identikləri, prototip məhsul qablaşdırması, rəhbərlərin imza möhürləri və mülkiyyət marketinq materialları. Bu yaradıcı faylları üçüncü tərəf bulud silmə xidmətlərinə yükləmək əqli mülkiyyət oğurluğu və icazəsiz sızma riski yaradır.

2run.tools mütləq sıfır bilikli, kliyent tərəfli paradiqma ilə işləyir. Bütün piksel buferi emalı, rəng məsafəsi riyaziyyatı və PNG kodlaşdırması 100% lokal olaraq cihazınızın brauzer yaddaşında icra olunur. Sənət əsərinizin bir baytı belə şəbəkə üzərindən ötürülmür və bu, dəmir kimi möhkəm, şəbəkədən təcrid olunmuş təhlükəsizlik modeli təmin edir.