Bugun men kodlash mavzusidan biroz uzoqlashishga va dizayn haqida bir oz gapirishga qaror qildim. Sayt yaratishda dizayn muhim rol o'ynasa-da, men bolaligimdan chizmachilik, grafika va dizayn bilan do'st emasman. Shuning uchun, men ko'plab bloggerlar singari, Internetning biron bir joyida bepul fotobanklar va fotosuratlar zaxiralaridan foydalangan holda o'z postlarim uchun rasmlarni qidiryapman.
Shunday qilib, ba'zida sizning postingiz uchun juda mos rasm paydo bo'ladi va hamma narsa yaxshi bo'lar edi ... Lekin rasmning foni blog yoki matnli blok foniga mos kelmaydi. Shubhasiz, hech birimda bunday muammo yo'q va mening kelib chiqishimning hech biri oq emas, bu ko'p hollarda mos keladi. Menga shaffof fon kerak!
Internetda men tayyor tasvir uchun shaffof fonni qanday qilish haqida oddiy g'oyalarni topa olmadim, shuning uchun men o'zimni sinab ko'rishni boshladim va ko'proq yoki kamroq mos echim topdim!
Rasm uchun shaffof fonni qanday qilish kerakMisol tariqasida .jpg formatidagi bitta oddiy rasmni olaylik (umuman, format unchalik muhim emas):
Bu erda oq fon bor, men undan qutulishni va uning o'rniga shaffof fon qilishni xohlayman. Bunda bizga Photoshop-ning onlayn o'xshash Pixlr yordam beradi.
Rasmimiz yuklanmoqda. "Qatlamlar" oynasining o'ng tomonida "Fon" qatlami paydo bo'ladi, unda qulf mavjud (rasmning fonini olib tashlashga ruxsat bermaydi).
Ushbu qulfdagi sichqonchaning chap tugmachasini ikki marta bosish orqali siz qulfni fondan olib tashlashingiz mumkin. Qulf o'rniga tasdiq belgisi paydo bo'ladi.
Endi biz sehrli tayoqchani olamiz (asboblar paneli, o'ng ustun, yuqoridan ikkinchi tugma), quyidagi parametrlarni belgilang: bag'rikenglik = 21, Shomil anti-aliasing va davomiylikda(odatda bunday parametrlar standartdir), garchi siz parametrlar bilan tajriba o'tkazishingiz mumkin; va tasvirning fonida (bizning holatda, oq fonda) bosing.
Endi biz "O'chirish" tugmasini bosib fonni o'chirib tashlaymiz va shaffof fon bilan kerakli tasvirni olamiz.
Ko'pincha shaffof fon rasmning bir qismini boshqasiga yoki rasmning o'ziga qo'shish uchun talab qilinadi. Veb-saytlar dizaynida rangsiz fon faol qo'llaniladi. Onlayn do'konlardagi ko'plab fotosuratlar, shuningdek, asosiy tasvirning orqasida oq rangni talab qiladi, bunga faqat shaffof bilan erishish mumkin, chunki kamera 255 255 255 RGB rangdagi sof oq fonni yarata olmaydi.
Sehrli tayoqchadan foydalanishPhotoshop CS6 va undan keyingi versiyalarida shaffof fon yaratishning eng oson usuli bu sehrli tayoqcha yoki sehrli tayoq vositasidan foydalanishdir. Quyida bosqichma-bosqich ko'rsatma keltirilgan:
OʻchirgichSehrli o'chirish vositasi yaqin ranglarni olib tashlaydi, bundan tashqari, u avtomatik ravishda fon qatlamini oddiyga aylantiradi. Quyida tasvir uchun shaffof fon yaratish bo'yicha bosqichma-bosqich ko'rsatma keltirilgan:
Bu funksiya fonni almashtirish yoki hatto uni shaffof qilish imkonini beradi. Uni ishlatish bo'yicha batafsil ko'rsatmalar:
Rasmni fonsiz saqlash odatiy JPEG formatida ishlamaydi, rasmni saqlagandan so'ng, fon avtomatik ravishda yaratiladi. Kerakli rasmni shaffof fon bilan saqlash uchun PNG formatidan foydalanishingiz kerak. Uni ishlatish uchun siz quyidagi yo'lni bajarishingiz kerak: fayl - saqlash - saqlashda yozing, PNGni belgilang. 
Ko'pincha tabriknomalar yoki videolarni yaratishda men savolga duch keldim: Photoshop-ni bilmasdan buni qanday qilish mumkin?
Photoshop bilan tanish bo'lganlar buni qiyinchiliksiz bajaradilar. Ammo hamma ham bu aqlli dasturni o'rganmagan. Ular qanday bo'lishi mumkin? Haqiqatan ham chiqish yo'li yo'qmi?
Axir, bizning taqdimotlarimiz, tabriklarimiz, sahifalarimizni eng jozibali va professional qilish istagi doimo mavjud. Ushbu maqsadda dasturdan qanday foydalanishni allaqachon aytib o'tdim. Bu sizga rasmlaringizni yaratishga yordam beradi va hatto u bilan birinchi rasmingizni ham qilishingiz mumkin.
Va endi men sizga yana bir sirni aytaman: bugun siz rasmning fonini qanday shaffof qilishni o'rganasiz. Va siz buni mutlaqo bepul qilasiz va vaqtingizning atigi 2 daqiqasini sarflaysiz.
Keling, biznesga kirishaylik.
O'zingizga yoqqan rasmni toping. Boshlash uchun, bu qatlamsiz fonda tasvir bo'lishi kerak - masalan, oq rangda. Keling, xizmat sahifasiga o'tamiz. Siz zerikarli ro'yxatdan o'tish jarayonidan o'tishingiz shart emas. Faqat onlayn xizmat havolasini bosing.
Sizning oldingizda quyidagi oyna ochiladi:
"Rasmni kompyuterdan yuklash" tugmasini bosing. O'zingiz yaratgan rasmni tanlang. Siz uni rasmlardagi alohida papkaga qo'yishingiz mumkin. Yoki ish stolida, shuning uchun siz uzoq vaqt qidirishingiz shart emas. Ushbu rasmga bir marta bosing va "ochish" tugmasini bosing.
Rasm server sahifasida paydo bo'ladi:
O'ng tomonda 3 ta deraza mavjud bo'lib, ularning o'rtasida qulf chizilgan. Sichqonchaning chap tugmasi bilan 2 marta bosing. Bu sehrga eshikni ochadi. 
Chap tomonda siz "Asboblar" panelini ko'rasiz, ulardan biri biz hozir ishlatadigan "sehrli tayoqcha". Unga bir marta bosing va keyin siz tanlagan rasm fonida bo'sh joyni bosing. Tasvir atrofida chiziqli chiziq paydo bo'ladi.
O'zgartirish yo'lidagi yakuniy qadam: kompyuteringizdagi "Del" (o'chirish) tugmasini bosing. Fon kataklangan bo'ladi. Agar atrofdagi hamma joy hujayra bilan qoplanmagan bo'lsa, sehrli tayoqcha bilan bu joyga yana teging va "Del" tugmasini bosing.
Sizdan so'raladigan oyna paydo bo'ladi: "Tasvirni yopishdan oldin saqlamoqchimisiz?" Biz "Ha" tugmasini bosamiz.
Bundan tashqari, bepul format sifatida PNG veb-dizaynerga GIFga nisbatan turli amaliy afzalliklarni taqdim etadi:
- Yaxshiroq siqish: Ko'pgina tasvirlar uchun PNG fayl hajmi GIFga qaraganda kichikroq bo'ladi
- Ajoyib rang chuqurligi: PNG 48 bitgacha haqiqiy rangni taklif qiladi, GIF da bizda faqat 256 rang palitrasi mavjud
- Alfa-kanal shaffofligi: GIF faqat ikkilik shaffoflikni taqdim etsa-da, PNG shaffoflik uchun alfa-kanalni taklif qilish orqali deyarli cheksiz shaffoflik effektlarini beradi.
Shuni ta'kidlash kerakki, PNG GIF kabi animatsiyaga ruxsat bermaydi. Ammo bunga imkon beruvchi Multiple-image Network Graphics (MNG) standarti mavjud, lekin u veb-brauzerlar va tasvir muharrirlari tomonidan keng qo'llab-quvvatlanmaydi.
Xo'sh, nega GIF hali ham mashhur?Agar PNG reklama qilinganidek yaxshi bo'lsa, nima uchun Internetda unchalik keng qo'llanilmasligiga hayron bo'lsangiz kerak. Javob, ko'pincha format va uning brauzerini qo'llab-quvvatlash haqida noto'g'ri tushunchadir.
Internet Explorer 6 va undan oldingi versiyalari PNG imkoniyatlarining to‘liq spektrini (jumladan, alfa-kanal shaffofligini) qo‘llab-quvvatlamaganligi sababli, odamlar Internet Explorer PNG-ni umuman qo‘llab-quvvatlamaydi yoki hech bo‘lmaganda shaffoflikni qo‘llab-quvvatlamaydi, deb (to‘g‘ri bo‘lmasa-da) ishonishadi. Darhaqiqat, Internet Explorer 5 va 6 PNG spetsifikatsiyasini animatsiyasiz GIF tasvirlariga funksional ekvivalent (yoki undan ko'proq) qilish uchun yetarli darajada qo'llab-quvvatlaydi. Boshqa barcha brauzerlar, jumladan Firefox, Netscape 6 va undan yuqori, Mozilla, Opera 6 va undan yuqori, Safari va Camino PNG shaffofligini toʻliq qoʻllab-quvvatlaydi.
Brauzerni qo'llab-quvvatlash haqidagi bu noto'g'ri tushunchadan tashqari, o'rnatilgan GIF animatsiyasi uning muvaffaqiyatining asosiy sababi edi (va shunday bo'lib qolmoqda). Garchi yillar davomida GIF-dan foydalanish animatsiya uchun qulayroq bo'lib borayotgan boshqa texnologiyalarga (masalan, Flash) nisbatan kamroq mashhur bo'lib qoldi.
Shaffoflik GIF va PNG formatlarining asosiy xususiyati boʻlib, koʻpincha veb-dizayner qaysi formatdan foydalanishni tanlashiga sabab boʻladi. PNG shaffoflikni yanada kengroq qo'llab-quvvatlasa-da, veb-dizaynerlar ko'pincha eski brauzerlarga mos keladigan rasmlarning GIF versiyalarini yaratishlari kerak. CSS-dan foydalanish eski brauzerlar uchun GIF tasvirlarini va ularni tushunadigan brauzerlarga yuqori sifatli PNG-larni yuborish orqali mumkin (va biroz ahamiyatsiz). Ammo bu veb-dizayner uchun ikki baravar ish va natijada odamlar eng kam qarshilikka duch kelishadi va GIF tasvirlaridan foydalanishda davom etadilar.
Shunday qilib, biz GIF-ning hali ham mashhurligining bir nechta sabablarini ko'rib chiqdik, ammo ularning aksariyati tushunchalarni noto'g'ri tushunish yoki tanish ish jarayonidan foydalanishga asoslangan. PNG haqida ba'zi asosiy bilimlar va undan brauzerlarda qanday ishonchli foydalanish mumkinligi bilan qurollangan holda, siz u taqdim etgan barcha imtiyozlardan foydalanish imkoniyatiga egasiz.
JPEG haqida nima deyish mumkin?JPEG boshqa hamma joyda mavjud bo'lgan veb-formatdir va ko'p hollarda, masalan, fotosuratlar (yoki shunga o'xshashlar) PNG yoki GIF-dan ham yaxshiroq. PNG JPEG bilan raqobatlashmoqchi emas. JPEG siqish, fotosuratlar bilan ishlashda fayllarni PNGga qaraganda ancha kichikroq qiladi. Boshqa tomondan, PNG tasvirlar ichida matn, badiiy chiziqlar, logotiplar, "qattiq" ranglar va boshqalar mavjud bo'lganda kichikroq fayllarni ishlab chiqaradi.
Kamtar PNG-dan foydalanishning ajoyib misollariEndi veb-dizaynda PNG-dan qanday foydalanishni ko'rib chiqamiz. Men har bir misol uchun barcha fayllarni ED do'stlarida mavjud bo'lgan alohida papkada to'pladim.
GradientSo'nggi bir necha yil ichida gradient - ikki yoki undan ortiq ranglar o'rtasida silliq o'tish - veb-dizaynerning eng yaxshi do'stiga aylandi. Ayniqsa, ko'zga tashlanmasdan chuqurlik va to'qimalar hissi yaratadigan nozik, nozik gradient plombalarning mashhurligi.
Ba'zan GIF gradient uchun eng yaxshi tanlovdir. Agar gradient oddiy ikki rangli o'tish bo'lsa, GIF unda benuqson ishlaydi. Biroq, GIF-ning atigi 256 rang bilan cheklanishi ko'pincha murakkabroq gradientli o'tishlar orasida sezilarli va tartibsiz "tarmoq" hosil qiladi. Boshqa tomondan, JPEG juda chiroyli gradientlarni ishlab chiqishi mumkin, lekin ko'pincha kattaroq fayl hajmiga to'g'ri keladi. Va JPEG gradientlari odatda juda yaxshi bo'lsa-da, JPEG yo'qolgan siqishni ishlatishini unutmang, ya'ni natijada olingan tasvir hech qachon siqilmagan tasvir sifatiga mos kelmaydi.
Ko'rib chiqilayotgan fon gradientining odatiy uslubi tugmalar, qutilar yoki boshqa har qanday joyda ishlatiladi. Bu 5-1-rasmga o'xshab ketishi mumkin. Soat yo'nalishi bo'yicha, yuqori chapdan biz asl (siqilmagan) tasvirni, GIF versiyasini, PNG versiyasini va JPEGni ko'ramiz. Natijada PNG eng kichik hajmga (515 bayt) ega ekanligini ko'rishingiz mumkin. Bu GIF tasviridan to'rt baravar kichikroq. JPEG 637 baytda PNG-dan bir oz kattaroq va yo'qolgan siqilish tufayli ham pastroq sifatga ega (garchi bu oddiy misolda inson ko'zining sifat farqini aniqlash qobiliyati shubhali).
5-1-rasm
Photoshop paneli - Internet uchun saqlash,
turli formatlarda bir xil tasvir uchun fayl hajmi farqlarini ko'rsatish
Ba'zan turli xil substratlarda bir xil bajaradigan tasvirni yaratish kerak bo'ladi. Ba'zi keng tarqalgan misollar - logotiplar va piktogrammalar. Ushbu vaziyatlarda an'anaviy ravishda GIF-lar ustunlik qiladi, ammo PNG bu vaziyatda yaxshiroq tanlov bo'lishining bir qancha sabablari bor. PNG logotiplar yoki boshqa oddiy "san'at" uchun fayl hajmida g'alaba qozonishga intiladi. Bundan tashqari, PNG-ning o'ziga xos shaffofligi har qanday fonda ishlaydigan yagona fayllarni yaratishni osonlashtiradi. PNG GIF kabi ikkilik shaffoflikni taklif etadi, lekin ayni paytda piksellar faqat yoqilgan yoki oʻchirilgan boʻlish oʻrniga qisman shaffof boʻlishi mumkin boʻlgan alfa-kanal bilan ancha kerakli variantni taqdim etadi. Ikkinchisidan foydalanish fayl hajmini, ba'zan ikkilik shaffoflikka ega GIF-dan ham ko'proq oshiradi, lekin bu sizning tasviringizning chetlarini tekislash imkonini beradi va uni fonga joylashtirishni yanada oqlangan qiladi.
Biroq, men ularning kontseptsiyasini trafaret belgilari bilan oq tasvir yordamida qayta ishladim. Ular shaffof fonda oq belgidan foydalanganlar, bu odatda juda samarali bo'lishi mumkin edi. Bunday holda, sizning CSS fon rangingiz belgining o'rniga, belgi atrofidagi kvadrat yoki to'rtburchaklar maydonda paydo bo'ladi.
Dan ham, PJ ham PNG o'rniga shaffof GIF-dan foydalangan. Bu ularning ehtiyojlarini to'liq qopladi va ular piktogramma uslubi uchun pikselli tasvirlarni yaratishlari kerak edi. PNG bilan siz shunga o'xshash texnikani olishingiz mumkin, ammo batafsilroq piktogrammalarda foydalanish uchun anti-aliasing va qisman shaffoflikning qo'shimcha afzalliklari bilan.
Yaxshi, lekin u qaysi brauzerlarda ishlaydi?Men nima deb o'ylayotganingizni bilaman: PNG shaffofligi yaxshi ko'rinadi, ammo bu amaliymi?
Yaxshi xabar shundaki, barcha zamonaviy brauzerlar PNG tasvirlarini, jumladan, alfa-kanal shaffofligini to'liq qo'llab-quvvatlaydi, buning afzalliklarini misollarda ko'rsatganman. Safari (barcha versiyalar), Firefox (barcha versiyalar), Opera (6 va undan yuqori versiyalar), Netscape (6 va undan yuqori versiyalar) va Mozilla (barcha versiyalar) men so'ragan hamma narsani portlash bilan bajaradi. Ammo yomon yangilik shundaki, men hali eslatib o'tmagan yagona brauzer - bu Internet Explorer.
Internet Explorer 6 va undan past versiyalari PNG formatida o'rnatilgan alfa-kanal shaffofligini qo'llab-quvvatlamaydi. Ko'pgina veb-sörfchilar uchun brauzer tanlovi (yoki tanlov emas) qilinganligi sababli, bu teshik veb-dizaynerlarni PNG-dan uzoqlashtirdi. Biroq, Internet Explorer 7-ning chiqarilishi bilan biz barcha asosiy brauzerlarda PNG alfa shaffofligini to'liq qo'llab-quvvatladik. Keyin nima bo'ladi, Internet Explorer 6 va undan past versiyalarda PNG alfa shaffofligi bilan ishlash usullari bormi? Shunday qilib, agar siz ushbu effektdan foydalanmoqchi bo'lsangiz, sizni hech narsa to'xtata olmaydi. Internet Explorer 6 va undan oldingi versiyalari etarlicha e'tibor talab qiladi, ammo bu albatta mumkin.
Internet Explorer uchun hack: AlphaImageLoaderInternet Explorer turli xil mahalliy filtrlar bilan birga keladi. Ular CSS-da qo'llaniladi, ammo ular rasmiy CSS spetsifikatsiyasining bir qismi emas. Boshqacha qilib aytganda, ular Internetda standartlashtirilmagan. Afsuski, Internet Explorer 6 va undan keyingi versiyalari PNG formatini (W3C tomonidan tavsiya etilgan) to'liq qo'llab-quvvatlamaydi, Microsoft bu kamchilikni tuzatuvchi filtrga ega: AlphaImageLoader.
Microsoft rasmiy veb-saytidagi bo'limga ko'ra, AlphaImageLoader "tasvirni ob'ekt chegaralari ichida va ob'ekt foni va uning mazmuni o'rtasida ko'rsatadi". Boshqacha qilib aytadigan bo'lsak, AlphaImageLoader PNG tasvirni to'liq shaffofligi bilan yuklaydi, lekin uni o'z qatlami sifatida yuklaydi, quyida u qo'llaniladigan ob'ektning mazmuni joylashgan. Shu tarzda yuklangan PNG tasvirlari oldingi fon rasmlariga qaraganda ko'proq fon tasvirlariga o'xshaydi (garchi ular aslida ob'ekt fonining tepasida "o'tirishadi").
Umuman olganda, siz CSS-da AlphaImageLoader-ni img elementlariga qo'llashingiz va natijadan bahramand bo'lishingiz mumkin. Avval rasm yuklanadi, shaffofligi saqlanib qoladi, lekin keyin tasvir yana yuklanadi - ob'ektning oldingi tarkibi sifatida - shaffof bo'lmagan joylar (shunday qilib, shaffof versiyangizni "soyalash").
Shaffof PNG-dan (X)HTML elementi (masalan, uchun) uchun CSS fon tasviri sifatida foydalana olmaysiz va AlphaImageLoader Internet Explorer-da ishni to'g'ri bajarishini kuting. Esda tutingki, AlphaImageLoader sizning rasmingizni ob'ektning fon va old foni orasiga qo'yadi. Shunday qilib, u sizning rasmingizni butun shaffof ulug'vorligida yuklagan bo'lsa-da, uni CSS fon tasviri sifatida va ajoyib shaffof piksellaringizsiz yuklashni davom ettiradi.
AlphaImageLoader-dan haqiqiy foydalanishKeling, oldingi misollardan biriga qaytaylik va uni Internet Explorer-da to'g'ri yuklashga harakat qilaylik. 49-kanal, Topekadagi telekanal esingizdami? Ishonchim komilki, ha. 5-21-rasmda saytning Internet Explorer 6 da qanday ko'rinishi ko'rsatilgan.
5-21-rasm
49abcnews.com sarlavhasi Windows uchun Internet Explorer 6 da, PNG shaffofligi saqlanib qolgan.
Ob-havo bilan bog'liq bo'lgan eng yaxshi HTML siz allaqachon taxmin qilganga o'xshaydi:
Hozirda Topeka, KS:
82°
Prognoz va boshqalarni oling...
Siz rasmni ko'rasiz va bu PNG formati, hatto Internet Explorer ham uni beg'ubor yuklaydi. Buning maxfiy tarkibiy qismi JavaScript. Darhaqiqat, men img elementini tezda olib tashlash va uni AlphaImageLoader ishlatadigan div elementi bilan almashtirish uchun biroz DOM skriptidan foydalanganman. JavaScript shartli sharhlar ichida tasvirlangan, Microsoft-dan Internet Explorer-ga o'rnatilgan yana bir qulay, ammo mutlaqo nostandart idioma. Shartli izohlar kodni faqat Internet Explorer-ning ma'lum versiyasi uchun ishlatish imkonini beradi. Kod barcha boshqa brauzerlar tomonidan e'tiborga olinmaydi, shuning uchun u ularga hech qanday ta'sir qilmaydi. www.49abcnews.com sayt elementida siz quyidagilarni topasiz:
Birinchi qator tufayli, agar lte IE6 bo'lsa, bu skript faqat Internet Explorer versiyasida (lte bilan ko'rsatilgan) 6 dan kichik yoki teng bo'lsa, ko'rsatilgan hujjatga kiritiladi. Boshqa barcha brauzerlar, jumladan, yangi Internet Explorer 7, buni butunlay e'tiborsiz qoldiradi.
Xo'sh, fixWeatherPng.js JavaScript faylida nima bor? Keling, ko'rib chiqaylik:
Window.attachEvent("yuklash", fixWeatherPng); fixWeatherPng() funksiyasi (var img = document.getElementById("weatherImage"); var src = img.src; img.style.visibility = "yashirin"; var div = document.createElement("DIV"); div.style. filter = "progid: DXImageTransform.Microsoft.AlphaImageLoader(+ src + "", o'lcham "miqyosi")"; // Ba'zi 49abcnews.com-ga xos CSS uslublari qisqalik uchun olib tashlandi. img.replaceNode(div); )
Keling, skript nima qilishini bosqichma-bosqich tahlil qilaylik. Birinchidan, brauzerga sahifa yuklanganda fixWeatherPng funksiyasini bajarmoqchi ekanligimizni aytamiz. Skriptning qolgan qismi funksiyaning o'zi.
Boshlash uchun avval biz id atributi bo'yicha ishlaydigan rasmni qidiramiz va uni img o'zgaruvchisida saqlaymiz. Biz src atributini (rasm faylining URL manzili) src o'zgaruvchisida saqlaymiz. Keyin biz CSS visibility xususiyatini yashirin qilib belgilash orqali img elementini yashiramiz.
Biz asl img elementini (yashirin) yangi yaratilgan div elementi bilan almashtiramiz, unga AlphaImageLoader muvaffaqiyatli biriktirilgan.
AlphaImageLoader-ni in'ektsiya qilish uchun DOM skriptidan foydalanish - bitlarni tezda filtrlash - yomon, ammo kerakli tomoni - yomon CSS. Bundan tashqari, semantik bo'lmagan div elementlari sizning (X)HTML belgilashingizdan tashqarida bo'ladi. Va bularning barchasi shartli izohlarda tasvirlangan ekan, boshqa brauzerlar uchun Microsoft kodi tomonidan buzilish ehtimoli yo'q. (handyblogger: Bu erda Jeff Microsoft-ning "qo'pol" yechimini ko'rsatmoqchi)
Agar biror narsani noto'g'ri qilishingiz kerak bo'lsa, hech bo'lmaganda uni chiqarib olishingiz va uni kerak bo'lmagan barcha narsalardan ajratib qo'yishingiz mumkin.
HibsdaPNG grafik formati sifatida GIF-larda keng qo'llaniladiganlardan tashqari ko'plab texnik afzalliklarni taqdim etadi. Darhaqiqat, foyda shunchalik kattaki, PNG allaqachon fotosuratlar bilan bog'liq bo'lmagan grafik format sifatida qabul qilingan bo'lishi mumkin edi. Internet Explorer-ning alfa-kanal shaffofligi kabi ba'zi muhim PNG xususiyatlarini qo'llab-quvvatlamasligi ko'plab veb-ishlab chiquvchilarni o'chirib qo'ydi. Ammo PNG-dan qo'rqmaslikning ikkita juda yaxshi sababi bor.
Birinchidan, hatto Internet Explorer 6 va undan oldingi versiyalari ham PNG-ni GIF nima qila olishi nuqtai nazaridan deyarli to'liq qo'llab-quvvatlaydi (albatta, animatsiyadan tashqari). PNG deyarli har doim kichikroq fayl hajmini ko'rsatadi, bu ularga tezroq yuklash va kamroq resurslarni sarflash imkonini beradi.
Ikkinchidan, Internet Explorer 7 PNG alfa shaffofligini to'liq qo'llab-quvvatlaydi. Shaffof variantlarning to'liq gamuti bilan erishish mumkin bo'lgan effektlar deyarli cheksizdir. Ushbu maqolada tasvirlanganlar qatorida PNG shaffofligidan foydalanishning qiziqarli usullarini topadigan dizaynerlar ilgari hech qachon ko'rilmagan uslublarning yangi darajasiga eshik ochadi deb umid qilaman. Men sizga PNG shaffofligi bilan nima yaratishingiz mumkinligi haqida foydali g'oyalarni berdim, lekin bu bilan to'xtamang. O'zingizni qidiring!
Kameron Adams, Mark Boulton, Endi Klark, Saymon Kollison, Jeff Kroft, Ethan Markotte, Derek Featherstone, Ian Lloyd, Den Rubin va Rob Weychert tomonidan Web standartlari ijodkorligidan parcha; EDning do'stlari tomonidan nashr etilgan. Mualliflik huquqi Jeff Croft 2007. Apress, Inc. ruxsati bilan foydalanilgan.
Ba'zi foydalanuvchilar ba'zi fotosuratlarda shaffof fon yaratishlari kerak bo'lishi mumkin. Bu estetik mulohazalar, tijorat maqsadlarida moybo'yoqni yaratish zarurati va boshqa sabablarga ko'ra bo'lishi mumkin - haqiqat shundaki, foydalanuvchi buni qanday va nima bilan amalga oshirish mumkinligini bilmaydi. Ushbu maqolada men bunday foydalanuvchilarga yordam berishga harakat qilaman va qanday qilib shaffof fonni onlayn qilish kerakligini, buning uchun qanday xizmatlar mavjudligini va ulardan qanday foydalanishni aytib beraman.
Tasvirning shaffof fonini yaratishga qodir xizmatlar ro'yxatiTarmoqda fotosuratning fonini onlayn ravishda bepul olib tashlash imkonini beruvchi bir nechta xizmatlar mavjud. Shu bilan birga, ularning barchasida deyarli bir necha marta bosish orqali fotosuratlar fonini olib tashlash imkonini beruvchi juda oddiy vositalar mavjud. Quyida men ushbu xizmatlarni ularning funksionalligining batafsil tavsifi bilan sanab o'taman.
Agar sizda ham men kabi xohish bo'lsa, men sizni xursand qilishga shoshilaman, men ularning ko'pchiligini sinab ko'rdim va eng yaxshilar ro'yxatini tuzdim (yuqoridagi havolada).
Onlayn-Photoshop xizmati fonni olib tashlash imkonini beradiOnlaynda shaffof fon yaratish imkonini beruvchi birinchi resurs bu Online-Photoshop. U bilan ishlash juda oddiy, bu sizga bir necha daqiqada fotosuratingizda shaffof fonga ega ob'ektni olish imkonini beradi.
Endi biz o'ngdagi o'qni bosamiz va natijaga qaraymiz. Agar hamma narsa yaxshi bo'lsa, yuqoridagi "Yuklab olish" tugmasini bosing va natijani shaxsiy kompyuteringizga saqlang.
Pixlr xizmati bitta fon rangini o'rnatdiShaffof fonni onlayn qilishning yana bir vositasi - bu Photoshop-ga o'xshash Pixlr onlayn muharriri. U juda ko'p funktsiyalarga ega, lekin biz birinchi navbatda onlayn shaffof fon yaratishdan manfaatdormiz.
IMGonline xizmati shaffof fon yaratish imkonini beradi Ushbu xizmat deyarli to'liq avtomatlashtirilgan variant bo'lib, fonni onlayn shaffof qilish imkonini beradi.
Xizmat bilan ishlash uchun unga o'ting, "Ko'rish" tugmasini bosing, "Oddiy fonni almashtirish" opsiyasi "Shaffof" ga o'rnatilganligiga ishonch hosil qiling va pastdagi katta "OK" tugmasini bosing.
Qayta ishlashdan so'ng siz natijani ko'rishingiz yoki tegishli havolalar yordamida kompyuteringizga yuklab olishingiz mumkin bo'ladi.
Shuni ta'kidlaymanki, avtomatlashtirish tufayli olingan ishlov berish sifati odatda yuqorida sanab o'tilgan Online-Photoshop va Pixlr-ga qaraganda yomonroq.
Watermark.Algid.Net xizmatiInternetda bepul fotosuratda shaffof fon yaratishga imkon beruvchi yana bir xizmat.
Ushbu xizmat bilan ishlash uchun siz fotosurat tayyorlashingiz kerak, buning uchun siz potentsial shaffof maydonni tasvirning o'zida bo'lmagan rang bilan bo'yashingiz kerak (masalan, quyidagi misolda ko'rsatilganidek, ko'k). Fotosurat png yoki gif formatida bo'lishi ham muhimdir.
Shaffof fonni yaratish uchun ushbu xizmat o'zining funksionalligi jihatidan oldingisiga o'xshash bo'lib, bitta rangda yaratilgan fonni talab qiladi. Bu rangni shaffof fonga aylantirib, foydalanuvchi talab qiladigan tasvirni oladi.
Watermark.Algid.Net xizmati bilan taqqoslaganda, LunaPic xizmati ko'proq to'liq huquqli foto muharrirga o'xshaydi, bu sizga ushbu xizmatga o'rnatilgan vositalar yordamida fonni bitta rang bilan bo'yash imkonini beradi.
XulosaYuqorida men bir nechta qulay va foydalanish uchun qulay xizmatlarni sanab o'tdim, ular sizga shaffof fonni onlayn qilish imkonini beradi. Menimcha, eng samaralisi bu Online-Photoshop va Pixlr xizmatlari, ularni qayta ishlash natijalari yaxshi darajada va ixtiyoriyning o'ziga xos xususiyatlari unchalik murakkab emas. Agar siz fotosurat uchun shaffof fon yaratishingiz kerak bo'lsa, men ushbu vositalarning imkoniyatlaridan foydalanishni maslahat beraman, ular sizga osongina va tezda onlayn ravishda shaffof fon yaratishga imkon beradi.
