Kada radite na dizajnu web stranice, često se morate suočiti s činjenicom da pronađena slika, koja bi idealno odgovarala vašoj web stranici, ima drugačiju pozadinu koju biste željeli ukloniti.
I tako, otvaramo našu sliku u Photoshopu.
1.
Prva stvar koju treba učiniti je stvoriti radni prostor za sliku s prozirnom pozadinom. Za ovo:
- u prozoru slojeva, dvaput kliknite na naš sloj (sa bravom)
- Kliknite OK u prozoru koji se pojavi.
Brava mora nestati
Ako je pozadina obična:
Odaberite alat " čarobni štapić” je vrlo fleksibilan alat za odabir željenog područja. Naš zadatak je odabrati cijelu pozadinu, osim slike. Da biste to učinili, podesite postavke čarobnog štapića (parametar tolerancije) dok ne dobijemo željeni rezultat. Također koristimo tipku Shift za odabir područja pored one koja je već odabrana. Pritisnite Del i odabrano područje se briše.
Ako je pozadina višebojna:
Koristimo alat Brzi izbor". Ovdje naš zadatak nije da istaknemo pozadinu, već sam objekt, koji bi trebao ostati. Pritiskajte dok se ne istakne željeno područje. Ako je višak istaknut, držite Alt i minus područje. Možete vidjeti rezultat pomoću tipke Q.
Kada je odabir spreman, kopirajte ga pomoću Ctrl+C. Napravite novi dokument sa prozirnom pozadinom (Ctrl + N) i zalijepite objekt tamo Ctrl + V.
3 . Ako je na slici ostalo nešto suvišno, upotrijebite alat " Eraser“, samo prepišite dodatnu pozadinu.
4 . Sačuvajte sliku za web (Alt + Shift + Ctrl + S) odaberite GIF ili PNG format (u ostalima, naša prozirna pozadina će postati bijela).
Koristan video na temu:
Ponekad korisnik može poželjeti PNG sliku s prozirnom pozadinom. Međutim, potrebna datoteka ne odgovara uvijek traženim parametrima. U tom slučaju morate ga sami promijeniti ili odabrati novi. Što se tiče stvaranja prozirne pozadine, posebne online usluge pomoći će u postizanju ovog zadatka.
Postupak kreiranja prozirne pozadine podrazumijeva uklanjanje svih nepotrebnih objekata, a ostavlja se samo potreban, a na mjestu starih elemenata pojavit će se željeni efekat. Predlažemo da se upoznate sa Internet resursima koji vam omogućavaju implementaciju takvog procesa.
Grafički uređivač LunaPic radi na mreži i pruža korisniku širok spektar alata i funkcija, uključujući zamjenu pozadine. Cilj se postiže na sljedeći način:
Ovim je završen rad sa uslugom LunaPic. Zahvaljujući gornjim uputama, pozadinu možete lako učiniti prozirnom. Jedina mana servisa je što ispravno radi samo sa onim crtežima kod kojih je pozadina ispunjena uglavnom jednom bojom.
Hajde da razumemo sajt PhotoScissors. Ovdje nema tog problema da će se dobra obrada dobiti samo sa određenim slikama, pošto sami postavljate područje koje se isječe. Obrada se vrši na sledeći način:
Ovim je završen rad s online resursom PhotoScissors. Kao što vidite, nema ništa komplicirano u upravljanju njime, čak će i neiskusni korisnik koji nema dodatna znanja i vještine razumjeti zadatak.
Odnedavno je web stranica Remove.bg na usnama mnogih. Činjenica je da programeri pružaju jedinstveni algoritam koji automatski izrezuje pozadinu, ostavljajući samo osobu na slici. Nažalost, tu prestaju mogućnosti web servisa, ali on odlično obrađuje takve fotografije. Pogledajmo detaljnije ovaj proces:
Ovdje naš članak dolazi do svog logičnog zaključka. Danas smo pokušali da vam ispričamo o najpopularnijim online servisima koji vam omogućavaju da učinite pozadinu prozirnom na slici u samo nekoliko klikova. Nadamo se da vam se sviđa barem jedna stranica.
Glavna stvar je da navedete sliku na računaru ili telefonu, a zatim kliknite na dugme U redu na dnu ove stranice. Standardno je obična pozadina slike zamijenjena prozirnom. Boja pozadine originalne slike se određuje automatski, samo trebate u postavkama odrediti kojom bojom da je zamijenite. Glavni parametar koji utiče na kvalitet zamene je "Intenzitet zamene" i može biti različit za svaku sliku.
Primjer fotografije ružičaste ruže bez promjena i nakon zamjene čvrste pozadine prozirnom, bijelom i zelenom:
Prvi primjer sa cvijetom ruže na prozirnoj pozadini je napravljen sa sljedećim postavkama:
1) Intenzitet zamene - 38;
2) Zaglađivanje oko ivica - 5;
3) Zamenite čvrstu pozadinu prozirnom;
4) Obrezivanje (<0) или Добавление (>0) duž ivica - "-70";
5) Invert - onemogućeno (čekiranje nije označeno).
Za stvaranje drugi primjer, sa bijelom pozadinom, korištene su iste postavke kao u prvom primjeru, osim parametra: "Zamijeni običnu pozadinu sa" - bijelo. AT treći primjer, sa zelenom pozadinom, postavke se također koriste, kao u prvom primjeru, osim parametra: "boja u hex formatu" - #245a2d.
Originalna slika nije promijenjena ni na koji način. Dobit ćete još jednu obrađenu sliku sa prozirnom pozadinom ili pozadinom koju odredite.
Neki korisnici će možda morati da naprave prozirnu pozadinu na nekim fotografijama. To može biti zbog estetskih razloga, potrebe za kreiranjem vodenog žiga u komercijalne svrhe i drugih razloga - činjenica je da korisnik ne zna kako i čime se to može učiniti. U ovom članku pokušat ću pomoći takvim korisnicima i reći vam kako napraviti transparentnu pozadinu na mreži, koje usluge za to postoje i kako ih koristiti.
Na mreži postoji nekoliko usluga koje vam omogućavaju da besplatno uklonite pozadinu fotografije na mreži. Istovremeno, svi oni imaju prilično jednostavne alate koji vam omogućavaju da uklonite pozadinu fotografija u gotovo nekoliko klikova. U nastavku ću navesti ove usluge sa detaljnim opisom njihove funkcionalnosti.
Ako i vi, kao i ja, imate želju, onda žurim da vam ugodim, većinu sam testirao i sastavio listu najboljih (na linku iznad).
Prvi resurs koji vam omogućava da kreirate prozirnu pozadinu na mreži je Online-Photoshop. Rad s njim je prilično jednostavan, što vam omogućava da za nekoliko minuta dobijete objekt s prozirnom pozadinom na vašoj fotografiji.
Sada pritisnemo strelicu desno i pogledamo rezultat. Ako je sve u redu, kliknite na dugme "Preuzmi" na vrhu i sačuvajte rezultat na računaru.
Još jedan alat za pravljenje prozirne pozadine na mreži je online uređivač Pixlr sličan Photoshopu. Ima značajan broj funkcija, ali nas prvenstveno zanima kreiranje transparentne pozadine na mreži.
Ova usluga je gotovo potpuno automatizirana opcija koja vam omogućava da učinite pozadinu prozirnom na mreži.
Da biste radili sa servisom, idite na njega, kliknite na dugme "Pregledaj", uverite se da je opcija "Zameni običnu pozadinu sa" postavljena na "Transparentno" i kliknite na veliko dugme "U redu" na dnu.
Nakon obrade, moći ćete vidjeti rezultat ili ga preuzeti na svoje računalo koristeći odgovarajuće veze.
Napominjem da je zbog automatizacije kvalitet rezultirajuće obrade obično lošiji nego u gore navedenim Online-Photoshop-u i Pixlr-u.
Još jedna usluga koja vam omogućava da besplatno napravite prozirnu pozadinu na fotografiji na mreži.
Da biste radili s ovom uslugom, potrebno je pripremiti fotografiju za koju trebate obojiti potencijalno prozirno područje bojom koja nije na samoj slici (na primjer, plava, kao što je prikazano u primjeru ispod). Također je važno da fotografija bude u png ili gif formatu.
Ova usluga za kreiranje prozirne pozadine po svojoj je funkcionalnosti slična prethodnoj, zahtijevajući pozadinu u jednoj boji. Ovu boju pretvara u prozirnu pozadinu, dobijajući sliku koju korisnik traži.
U poređenju sa uslugom Watermark.Algid.Net, usluga LunaPic više liči na punopravni uređivač fotografija, koji vam omogućava da obojite pozadinu jednom bojom pomoću alata ugrađenih u ovu uslugu.
Iznad sam naveo nekoliko praktičnih i jednostavnih usluga koje vam omogućavaju da napravite prozirnu pozadinu na mreži. Najefikasniji su, po meni, servisi Online-Photoshop i Pixlr, rezultati njihove obrade su na dobrom nivou, a specifičnosti opcionog nisu nimalo komplikovane. Ako trebate napraviti prozirnu pozadinu za fotografiju, preporučujem korištenje mogućnosti ovih alata, oni će vam omogućiti da jednostavno i brzo kreirate prozirnu pozadinu na mreži.
Štaviše, kao besplatni format, PNG nudi web dizajneru razne praktične prednosti u odnosu na GIF:
Važno je napomenuti da PNG ne dozvoljava animaciju, kao što to čini GIF. Ali postoji standard mrežne grafike sa više slika (MNG) koji to dozvoljava, ali nije široko podržan od strane web pretraživača i uređivača slika.
Vjerovatno se pitate zašto PNG nije tako široko korišten na webu ako je dobar kao što se oglašava. Odgovor je, uglavnom, pogrešna predstava o formatu i njegovoj podršci za pretraživač.
Budući da Internet Explorer 6 i starije verzije ne podržavaju cijeli raspon PNG mogućnosti (uključujući transparentnost alfa kanala), ljudi mogu vjerovati (iako nije istina) da Internet Explorer uopće ne podržava PNG ili barem ne podržava transparentnost. U stvari, Internet Explorer 5 i 6 podržavaju dovoljno PNG specifikacije da bi bile funkcionalno ekvivalentne (ili više) neanimiranim GIF slikama. Svi ostali pomenuti pretraživači, uključujući Firefox, Netscape 6 i novije verzije, Mozilla, Opera 6 i novije verzije, Safari i Camino u potpunosti podržavaju PNG transparentnost.
Osim ove zablude o podršci pretraživača, ugrađena GIF animacija bila je (i nastavlja biti) glavni razlog za njen uspjeh. Iako je tokom godina upotreba GIF-a postala manje popularna u odnosu na druge tehnologije (npr. Flash), koje su sve pogodnije za animaciju.
Transparentnost je ključna karakteristika GIF-ova i PNG-ova i često je razlog zašto web dizajner bira koji će format koristiti. Iako PNG nudi sveobuhvatniju podršku za transparentnost, web dizajneri često moraju kreirati GIF verzije slika kako bi odgovarale starijim pretraživačima. Korištenjem CSS-a ovo je moguće (i pomalo trivijalno) slanjem GIF slika za starije pretraživače i visokokvalitetnih PNG-ova pretraživačima koji ih razumiju. Ali to je dvostruki posao za web dizajnera, i kao rezultat, ljudi idu s najmanjim otporom i nastavljaju koristiti GIF slike.
Dakle, pogledali smo nekoliko razloga zašto je GIF i dalje toliko popularan, ali većina njih se zasniva na nerazumijevanju koncepata ili korištenju poznatog toka posla. Naoružani nekim ključnim znanjem o PNG-u i kako se može pouzdano koristiti u pretraživačima, u poziciji ste da iskoristite sve prednosti koje nudi.
JPEG je još jedan sveprisutni web format i u većini slučajeva, kao što su fotografije (ili slično), čak je bolji od PNG ili GIF-a. PNG nije namijenjen za konkurenciju JPEG-u. JPEG kompresija čini datoteke mnogo manjim od PNG kada radi sa fotografijama. S druge strane, PNG proizvodi manje datoteke kada se unutar slika nalaze tekst, umjetničke linije, logotipi, "čvrste" boje itd.
Pogledajmo sada kako koristiti PNG u web dizajnu. Sakupio sam sve fajlove za svaki primer u zasebnoj fascikli dostupnoj na prijateljima ED-a.
U posljednjih nekoliko godina, gradijent - glatki prijelaz između dvije ili više boja - postao je najbolji prijatelj web dizajnera. Posebno su popularni suptilni, suptilni gradijenti koji stvaraju osjećaj dubine i teksture, a da pritom nisu upadljivi.
Ponekad je GIF najbolji izbor za gradijent. Ako je gradijent jednostavan prijelaz u dvije boje, GIF u njemu radi besprijekorno. Međutim, ograničenje GIF-a na samo 256 boja često stvara uočljive i neuredne "trake" među složenijim prijelazima gradijenta. JPEG, s druge strane, može proizvesti prilično uredne gradijente, ali često po cijenu veće veličine datoteke. I dok su JPEG gradijenti općenito dovoljno dobri, zapamtite da JPEG koristi kompresiju s gubicima, što znači da rezultirajuća slika nikada neće odgovarati kvalitetu nekomprimirane slike.
Tipični stil gradijenta pozadine koji je u pitanju koristi se za dugmad, okvire ili bilo gdje drugdje. Moglo bi izgledati kao na slici 5-1. U smjeru kazaljke na satu, odozgo lijevo, vidimo originalnu (nekomprimovanu) sliku, GIF verziju, PNG verziju i JPEG. Možete vidjeti da PNG ima najmanju veličinu (515 bajtova) u rezultatu. Ovo je četiri puta manje od GIF slike. JPEG je nešto veći od PNG-a sa 637 bajtova i također je nižeg kvaliteta zbog kompresije s gubicima (iako je sposobnost ljudskog oka da odredi razliku u kvalitetu u ovom jednostavnom primjeru upitna).
Slika 5-1
Photoshop panel - Sačuvaj za Web,
prikazuje razlike u veličini datoteke za istu sliku u različitim formatima
Ponekad je potrebno kreirati sliku koja ima isti učinak na različitim podlogama. Neki uobičajeni primjeri su logotipi i ikone. U ovim situacijama tradicionalno su dominirali GIF-ovi, ali postoji nekoliko razloga zašto bi PNG mogao biti bolji izbor u ovoj situaciji. PNG ima tendenciju da pobijedi u veličini datoteke za logotipe ili neku drugu jednostavnu "umjetnost". Osim toga, urođena transparentnost PNG-a olakšava kreiranje pojedinačnih datoteka koje rade na bilo kojoj pozadini. PNG nudi binarnu transparentnost poput GIF-a, ali također pruža mnogo poželjniju opciju s alfa kanalom, u kojem pikseli mogu biti djelomično transparentni umjesto da budu samo uključeni ili isključeni. Korištenje potonjeg povećava veličinu datoteke, ponekad čak i više od GIF-a s binarnom transparentnošću, ali omogućava zaglađivanje rubova vaše slike i čini je elegantnijim postavljanjem preko pozadine.
Međutim, preradio sam njihov koncept koristeći bijelu sliku sa simbolima šablona. Koristili su bijeli simbol na prozirnoj pozadini, što je obično moglo biti prilično efektno. U ovom slučaju, vaša pozadina css boja pojavio bi se u kvadratnom ili pravokutnom području oko simbola, umjesto samog simbola.
I Dan i PJ koristili su transparentni GIF umjesto PNG. To je u potpunosti pokrilo njihove potrebe, te su morali kreirati pikselizirane slike za stil ikona. Sa PNG-om, možete dobiti sličnu tehniku, ali uz dodatnu prednost anti-aliasinga i djelomične transparentnosti za korištenje u detaljnijim ikonama.
Znam na šta mislite: sav taj PNG transparentnost izgleda dobro, ali da li je praktičan?
Dobra vijest je da svi moderni pretraživači u potpunosti podržavaju PNG slike, uključujući transparentnost alfa kanala, čije sam prednosti pokazao u primjerima. Safari (sve verzije), Firefox (sve verzije), Opera (verzije 6 i novije), Netscape (verzije 6 i novije) i Mozilla (sve verzije) će učiniti sve što tražim od njih sa praskom. Ali loša vijest je jedan pretraživač koji još nisam spomenuo, a koji većina vaših korisnika ima: Internet Explorer.
Internet Explorer 6 i starije verzije ne podržavaju transparentnost alfa kanala ugrađenu u PNG format. Budući da je izbor pretraživača (ili ne izbor) napravljen za većinu mnogih web surfera, ova zjapeća rupa držala je web dizajnere podalje od PNG-a. Ali, sa izdavanjem Internet Explorera 7, dobili smo punu podršku za PNG alfa transparentnost u svim glavnim pretraživačima. Šta je sljedeće, postoje li načini za rad sa PNG alfa transparentnošću u Internet Exploreru 6 i starijim verzijama? Dakle, ako želite da koristite ovaj efekat, ništa vas neće zaustaviti. Internet Explorer 6 i starije verzije zahtijevaju više nego dovoljno pažnje, ali to je definitivno moguće.
Internet Explorer dolazi sa raznim izvornim filterima. Koriste se u CSS-u, ali nisu dio zvanične CSS specifikacije. Drugim riječima, nisu standardizirani na webu. Nažalost, Internet Explorer 6 i starije verzije ne podržavaju u potpunosti PNG format (koji preporučuje W3C), Microsoft ima filter koji popravlja ovaj nedostatak: AlphaImageLoader.
Prema odjeljku na Microsoftovoj službenoj web stranici, AlphaImageLoader "prikazuje sliku unutar granica objekta i između pozadine objekta i njegovog sadržaja." Drugim riječima, AlphaImageLoader učitava PNG sliku s punom transparentnošću, ali je učitava kao vlastiti sloj, ispod kojeg je sadržaj objekta na koji je primijenjena. PNG slike učitane na ovaj način djeluju više kao slike u pozadini nego slike u prvom planu (iako zapravo "sjede" na vrhu pozadine objekta).
Općenito, možete jednostavno primijeniti AlphaImageLoader u CSS-u na img elemente i uživati u rezultatu. Slika će se prvo učitati, prozirnost će ostati, ali onda će se slika ponovo učitati - kao prednji sadržaj objekta - sa neprozirnim područjima (na taj način "senčiti" vašu prozirnu verziju).
Ne možete koristiti transparentni PNG kao pozadinu css slika za (X)HTML element (recimo za
Vratimo se jednom od ranijih primjera i pokušajmo ga ispravno učitati u Internet Explorer. Sjećate se Kanala 49, TV stanice u Topeki? Siguran sam da da. Slika 5-21 prikazuje kako stranica izgleda u Internet Exploreru 6.
Slika 5-21
Naslov 49abcnews.com prikazan u Internet Exploreru 6 za Windows, sa netaknutom PNG transparentnošću.
HTML za vrh koji se odnosi na vremenske prilike izgleda kao da ste možda već pogodili:
Trenutno u Topeki, KS:
82°
Dobijte prognozu i još mnogo toga...
Vidite sliku, i to je definitivno PNG, čak je i Internet Explorer besprijekorno učitava. Tajni sastojak ovoga je JavaScript. U stvari, koristio sam malo DOM skriptiranja kako bih u hodu uklonio img element i zamijenio ga elementom div koji - pogađate - koristi AlphaImageLoader. JavaScript je opisan unutar uslovnih komentara, još jednog zgodnog, ali potpuno nestandardiziranog idioma iz Microsofta ugrađenog u Internet Explorer. Uslovni komentari vam omogućavaju da koristite kod samo za poznatu verziju Internet Explorer-a. Svi ostali pretraživači ignorišu kod, tako da na njih ne utiče ni na koji način. U elementu
web stranicu www.49abcnews.com, naći ćete:
Zahvaljujući prvom redu, ako je lte IE6, ova skripta će biti uključena u renderirani dokument samo ako je prikazana u verziji Internet Explorer-a manjoj ili jednakoj (navedenoj sa lte) 6. Svi ostali pretraživači, uključujući novopristigli Internet Explorer 7 će ovo potpuno zanemariti.
Dakle, šta je u JavaScript fajlu fixWeatherPng.js? Hajde da pogledamo:
Window.attachEvent("onload", fixWeatherPng); funkcija 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")"; // Neki CSS stilovi specifični za 49abcnews.com izostavljeni su radi sažetosti. img.replaceNode(div); )
Hajde da analiziramo, korak po korak, šta skripta radi. Prvo, kažemo pretraživaču da želimo da izvrši funkciju fixWeatherPng kada se stranica učita. Ostatak skripte je sama funkcija.
Za početak, prvo tražimo sliku s kojom ćemo raditi prema njenom id atributu i pohraniti je u varijablu img. Atribut src (URL datoteke slike) pohranjujemo u varijablu src. Zatim sakrivamo img element postavljanjem svojstva vidljivosti CSS-a na skriveno.
Na kraju ćemo zamijeniti originalni img element (koji je skriven) sa novostvorenim div elementom koji ima AlphaImageLoader uspješno priključen na njega.
Korištenje DOM skriptiranja za ubacivanje vašeg AlphaImageLoadera – filtriranje bitova u hodu – ima svoju lošu, ali neophodnu stranu – loš CSS. Štaviše, nesemantički div elementi će biti sadržani izvan vaše (X)HTML oznake. I dokle god je sve opisano unutar uslovnih komentara, nema šanse da drugi pretraživači budu oštećeni Microsoftovim kodom. (handyblogger: Ovdje Jeff pokušava suptilno ukazati na "nespretno" Microsoftovo rješenje)
Ako morate učiniti nešto pogrešno, barem možete to izdvojiti i držati odvojeno od svega ostalog kome to nije potrebno.
PNG, kao grafički format, nudi mnoge tehničke prednosti osim onih koje se široko koriste u GIF-ovima. U stvari, prednosti su toliko velike da je PNG već odavno mogao preuzeti kao grafički format koji nije povezan sa slikama fotografija. Nedostatak podrške Internet Explorera za neke od značajnijih PNG funkcija, kao što je transparentnost alfa kanala, kao rezultat toga je isključio mnoge web programere. Ali postoje dva vrlo dobra razloga zašto se ne biste trebali bojati PNG-a.
Prvo, čak i Internet Explorer 6 i njegove ranije verzije gotovo u potpunosti podržavaju PNG u smislu onoga što GIF može učiniti (osim animacije, naravno). PNG gotovo uvijek prikazuje manju veličinu datoteke, što im omogućava da se brže učitavaju i koriste manje resursa.
Drugo, Internet Explorer 7 nudi punu podršku za PNG alfa transparentnost. Efekti koji se mogu postići s punim rasponom prozirnih opcija gotovo su neograničeni. Očekujem da će dizajneri koji pronađu zanimljive načine za korištenje PNG transparentnosti, u skladu s onima opisanim u ovom članku, otvoriti vrata novom nivou stilova koji nikada ranije nisu viđeni. Dao sam vam nekoliko korisnih ideja o tome šta možete kreirati pomoću PNG transparentnosti, ali nemojte stati na tome. Potražite sami!
Odlomak iz Web Standards Creativity od Camerona Adamsa, Marka Boultona, Andy Clarkea, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin i Rob Weychert; objavili prijatelji ED. Autorska prava Jeff Croft 2007. Koristi se uz dozvolu Apress, Inc.
