Când lucrați la designul site-ului, de multe ori trebuie să vă ocupați de faptul că imaginea găsită, care s-ar potrivi în mod ideal site-ului dvs., are un fundal diferit pe care ați dori să îl eliminați.
Și așa, ne deschidem imaginea în Photoshop.
1.
Primul lucru de făcut este să creați un spațiu de lucru pentru imagine cu un fundal transparent. Pentru asta:
- în fereastra straturi, faceți dublu clic pe stratul nostru (cu lacăt)
- Faceți clic pe OK în fereastra care apare.
Încuietoarea trebuie să dispară
Dacă fundalul este simplu:
Selectați instrumentul " bagheta magica” este un instrument foarte flexibil pentru selectarea zonei dorite. Sarcina noastră este să selectăm întregul fundal, cu excepția imaginii. Pentru a face acest lucru, ajustați setările baghetei magice (parametrul toleranţă) până când obținem rezultatul dorit. De asemenea, folosim tasta Shift pentru a selecta o zonă în plus față de cea deja selectată. Apăsați Del și zona selectată este ștearsă.
Dacă fundalul este multicolor:
Folosim instrumentul Selectie rapida". Aici sarcina noastră nu este să evidențiem fundalul, ci obiectul în sine, care ar trebui să rămână. Apăsați până când zona dorită este evidențiată. Dacă excesul este evidențiat, țineți apăsat Alt și minus zona. Puteți vizualiza rezultatul cu tasta Q.
Când selecția este gata, copiați-o cu Ctrl+C. Creați un document nou cu un fundal transparent (Ctrl + N) și inserați obiectul acolo Ctrl + V.
3 . Dacă a rămas ceva de prisos în imagine, folosiți instrumentul " Radieră„, suprascrieți doar fundalul suplimentar.
4 . Salvați imaginea pentru Web (Alt + Shift + Ctrl + S) selectați formatul GIF sau PNG (în altele, fundalul nostru transparent va deveni alb).
Video util pe această temă:
Uneori, utilizatorul poate dori o imagine PNG cu un fundal transparent. Cu toate acestea, fișierul necesar nu corespunde întotdeauna parametrilor necesari. În acest caz, trebuie să îl schimbați singur sau să selectați unul nou. În ceea ce privește crearea unui fundal transparent, serviciile speciale online vor ajuta la îndeplinirea acestei sarcini.
Procedura de creare a unui fundal transparent implică eliminarea tuturor obiectelor inutile, lăsând în același timp doar pe cel necesar, iar efectul dorit va apărea în locul elementelor vechi. Vă sugerăm să vă familiarizați cu resursele de internet care vă permit să implementați un astfel de proces.
Editorul grafic LunaPic funcționează online și oferă utilizatorului o mare varietate de instrumente și funcții, inclusiv înlocuirea fundalului. Scopul este atins după cum urmează:
Aceasta completează munca cu serviciul LunaPic. Datorită instrucțiunilor de mai sus, puteți face cu ușurință fundalul transparent. Singurul dezavantaj al serviciului este că funcționează corect numai cu acele desene în care fundalul este umplut în principal de o singură culoare.
Să înțelegem site-ul PhotoScissors. Nu există o astfel de problemă aici că o procesare bună se va obține doar cu anumite imagini, deoarece tu însuți setezi zona care este decupată. Prelucrarea se realizează după cum urmează:
Aceasta completează munca cu resursa online PhotoScissors. După cum puteți vedea, nu este nimic complicat în gestionarea acestuia, chiar și un utilizator fără experiență care nu are cunoștințe și abilități suplimentare va înțelege sarcina.
Recent, site-ul Remove.bg a fost pe buzele multora. Faptul este că dezvoltatorii oferă un algoritm unic care decupează automat fundalul, lăsând doar o persoană în imagine. Din păcate, aici se termină capacitățile serviciului web, dar face o treabă excelentă în procesarea unor astfel de fotografii. Să aruncăm o privire mai atentă asupra acestui proces:
Acesta este locul în care articolul nostru ajunge la concluzia sa logică. Astăzi am încercat să vă spunem despre cele mai populare servicii online care vă permit să faceți fundalul transparent pe o imagine în doar câteva clicuri. Sperăm că vă place cel puțin un site.
Principalul lucru este să specificați o imagine pe computer sau pe telefon, apoi faceți clic pe butonul OK din partea de jos a acestei pagini. În mod implicit, fundalul simplu al imaginii este înlocuit cu unul transparent. Culoarea de fundal a imaginii originale este determinată automat, trebuie doar să specificați în setări cu ce culoare să o înlocuiți. Principalul parametru care afectează calitatea înlocuirii este „Intensitatea înlocuirii” și poate fi diferit pentru fiecare imagine.
Un exemplu de fotografie a unui trandafir roz fără modificări și după înlocuirea fundalului solid cu transparent, alb și verde:
Primul exemplu cu o floare de trandafir pe un fundal transparent se realizează cu următoarele setări:
1) Intensitatea înlocuirii - 38;
2) Netezirea marginilor - 5;
3) Înlocuiți fundalul solid cu unul transparent;
4) Decuparea (<0) или Добавление (>0) de-a lungul marginilor - "-70";
5) Invers - dezactivat (verificarea nu este bifată).
Pentru a crea al doilea exemplu, cu un fundal alb, s-au folosit aceleași setări ca în primul exemplu, cu excepția parametrului: „Înlocuiește fundalul simplu cu” - alb. LA al treilea exemplu, cu fond verde, se folosesc și setările, ca în primul exemplu, cu excepția parametrului: „culoare în format hex” - #245a2d.
Imaginea originală nu este modificată în niciun fel. Vi se va oferi o altă imagine procesată cu un fundal transparent sau fundalul specificat de dvs.
Unii utilizatori ar putea avea nevoie să creeze un fundal transparent pentru unele fotografii. Acest lucru se poate datora considerentelor estetice, nevoii de a crea un filigran în scopuri comerciale și alte motive - faptul este că utilizatorul nu știe cum și cu ce se poate face acest lucru. În acest articol, voi încerca să ajut astfel de utilizatori și să vă spun cum să faceți un fundal transparent online, ce servicii există pentru aceasta și cum să le utilizați.
Există mai multe servicii în rețea care vă permit să eliminați gratuit fundalul unei fotografii online. În același timp, toate au instrumente destul de simple, permițându-vă să eliminați fundalul fotografiilor în aproape câteva clicuri. Mai jos voi enumera aceste servicii cu o descriere detaliată a funcționalității lor.
Dacă tu, ca și mine, ai o dorință, atunci mă grăbesc să te mulțumesc, le-am testat pe majoritatea și am întocmit o listă cu cele mai bune (la linkul de mai sus).
Prima resursă care vă permite să creați un fundal transparent online este Online-Photoshop. Lucrul cu acesta este destul de simplu, permițându-vă să obțineți un obiect cu un fundal transparent pe fotografia dvs. în câteva minute.
Acum apăsăm săgeata din dreapta și ne uităm la rezultat. Dacă totul este în regulă, faceți clic pe butonul „Descărcare” din partea de sus și salvați rezultatul pe computer.
Un alt instrument pentru a crea un fundal transparent online este editorul online Pixlr asemănător Photoshop. Are un număr semnificativ de caracteristici, dar ne interesează în primul rând crearea unui fundal transparent online.
Acest serviciu este o opțiune aproape complet automatizată care vă permite să faceți fundalul transparent online.
Pentru a lucra cu serviciul, accesați-l, faceți clic pe butonul „Răsfoiește”, asigurați-vă că opțiunea „Înlocuire fundal simplu cu” este setată la „Transparent” și faceți clic pe butonul mare „OK” din partea de jos.
După procesare, veți putea vizualiza rezultatul sau îl veți descărca pe computer folosind link-urile corespunzătoare.
Remarc că din cauza automatizării, calitatea procesării rezultate este de obicei mai proastă decât în Online-Photoshop și Pixlr enumerate mai sus.
Un alt serviciu care vă permite să faceți un fundal transparent pe o fotografie online gratuit.
Pentru a lucra cu acest serviciu, trebuie să pregătiți o fotografie, pentru care trebuie să pictați pe o zonă potențial transparentă cu o culoare care nu este pe imaginea în sine (de exemplu, albastru, așa cum se arată în exemplul de mai jos). De asemenea, este important ca fotografia să fie în format png sau gif.
Acest serviciu de creare a unui fundal transparent este similar prin funcționalitate cu cel anterior, necesitând un fundal realizat într-o singură culoare. Transformă această culoare într-un fundal transparent, obținând imaginea cerută de utilizator.
În comparație cu serviciul Watermark.Algid.Net, serviciul LunaPic seamănă mai degrabă cu un editor foto cu drepturi depline, permițându-vă să pictați fundalul cu o singură culoare folosind instrumentele încorporate în acest serviciu.
Mai sus, am enumerat mai multe servicii convenabile și ușor de utilizat, care vă permit să faceți un fundal transparent online. Cele mai eficiente, după părerea mea, sunt serviciile Online-Photoshop și Pixlr, rezultatele prelucrării lor sunt la un nivel bun, iar specificul opționalului nu este deloc complicat. Dacă trebuie să faceți un fundal transparent pentru o fotografie, vă recomand să utilizați capacitățile acestor instrumente, acestea vă vor permite să creați ușor și rapid un fundal transparent online.
În plus, ca format gratuit, PNG oferă designerului web diverse avantaje practice față de GIF:
Este pertinent să rețineți că PNG nu permite animația, așa cum face GIF. Dar există un standard Multiple-Image Network Graphics (MNG) care permite acest lucru, dar nu este acceptat pe scară largă de browserele web și editorii de imagini.
Probabil vă întrebați de ce PNG-ul nu este la fel de utilizat pe web dacă este la fel de bun precum anunțul. Răspunsul este, în cea mai mare parte, o concepție greșită despre format și suportul pentru browser.
Deoarece Internet Explorer 6 și versiunile anterioare nu acceptă întreaga gamă de capabilități PNG (inclusiv transparența canalului alfa), oamenii sunt lăsați să creadă (deși nu este adevărat) că Internet Explorer nu acceptă deloc PNG, sau cel puțin nu acceptă transparența. De fapt, Internet Explorer 5 și 6 acceptă suficient de specificații PNG pentru a o face echivalentă funcțional (sau mai mult) cu imaginile GIF neanimate. Toate celelalte browsere menționate, inclusiv Firefox, Netscape 6 și versiunile ulterioare, Mozilla, Opera 6 și versiunile ulterioare, Safari și Camino acceptă pe deplin transparența PNG.
În afară de această concepție greșită despre compatibilitatea cu browserul, animația GIF încorporată a fost (și continuă să fie) un motiv major pentru succesul său. Deși, de-a lungul anilor, utilizarea GIF-ului a devenit mai puțin populară în comparație cu alte tehnologii (ex. Flash), care devin din ce în ce mai potrivite pentru animație.
Transparența este o caracteristică cheie a GIF-urilor și PNG-urilor și este adesea motivul pentru care un designer web alege ce format să folosească. Deși PNG oferă un suport mai cuprinzător de transparență, designerii web trebuie adesea să creeze versiuni GIF ale imaginilor pentru a se potrivi cu browserele mai vechi. Utilizarea CSS este posibilă (și oarecum banală) prin trimiterea de imagini GIF pentru browsere mai vechi și PNG-uri de înaltă calitate către browserele care le înțeleg. Dar este o muncă dublă pentru un web designer și, ca rezultat, oamenii se opun cu cea mai mică rezistență și continuă să folosească imagini GIF.
Așadar, am analizat câteva motive pentru care GIF este încă atât de popular, dar cele mai multe dintre ele se bazează pe înțelegerea greșită a conceptelor sau pe utilizarea unui flux de lucru familiar. Înarmat cu unele cunoștințe cheie despre PNG și despre modul în care acesta poate fi utilizat în mod fiabil în browsere, sunteți în măsură să profitați de toate beneficiile pe care le oferă.
JPEG este un alt format web omniprezent și în majoritatea cazurilor, cum ar fi fotografiile (sau altele asemenea), este chiar mai bun decât PNG sau GIF. PNG nu este destinat să concureze cu JPEG. Compresia JPEG face fișierele mult mai mici decât PNG atunci când lucrează cu fotografii. Pe de altă parte, PNG produce fișiere mai mici atunci când în interiorul imaginilor există text, linii artistice, logo-uri, culori „solide” etc.
Acum să vedem cum să folosiți PNG în design web. Am adunat toate fișierele pentru fiecare exemplu într-un folder separat disponibil pe prietenii lui ED.
În ultimii ani, un gradient - o tranziție lină între două sau mai multe culori - a devenit cel mai bun prieten al unui designer web. Deosebit de populare sunt umpluturile subtile, subtile cu gradient, care creează un sentiment de profunzime și textură fără a fi vizibile.
Uneori, un GIF este cea mai bună alegere pentru un gradient. Dacă gradientul este o tranziție simplă în două culori, GIF-ul funcționează perfect în el. Cu toate acestea, limitarea GIF-ului la doar 256 de culori creează adesea o „bandă” vizibilă și dezordonată printre tranzițiile de gradient mai complexe. JPEG, pe de altă parte, poate produce gradiente destul de îngrijite, dar adesea cu prețul unei dimensiuni mai mari a fișierului. Și în timp ce gradienții JPEG sunt în general suficient de buni, rețineți că JPEG utilizează compresie cu pierderi, ceea ce înseamnă că imaginea rezultată nu se va potrivi niciodată cu calitatea imaginii necomprimate.
Stilul tipic de gradient de fundal în cauză este folosit pentru butoane, casete sau oriunde altundeva. Ar putea arăta ca în Figura 5-1. În sensul acelor de ceasornic, din stânga sus, vedem imaginea originală (necomprimată), versiunea GIF, versiunea PNG și JPEG. Puteți vedea că PNG are cea mai mică dimensiune (515 octeți) în rezultat. Aceasta este de patru ori mai mică decât imaginea GIF. JPEG este puțin mai mare decât PNG la 637 de octeți și are, de asemenea, o calitate mai scăzută din cauza compresiei cu pierderi (deși capacitatea ochiului uman de a determina diferența de calitate în acest exemplu simplu este discutabilă).
Figura 5-1
Panoul Photoshop - Salvare pentru web,
afișând diferențele de dimensiune a fișierului pentru aceeași imagine în formate diferite
Uneori este necesar să se creeze o imagine care funcționează la fel pe diferite substraturi. Câteva exemple comune sunt logo-urile și pictogramele. Aceste situații au fost în mod tradițional dominate de GIF-uri, dar există mai multe motive pentru care PNG ar putea fi o alegere mai bună în această situație. PNG tinde să câștige în dimensiunea fișierului pentru logo-uri sau alte „arte” simple. În plus, transparența inerentă PNG facilitează crearea de fișiere individuale care funcționează pe orice fundal. PNG oferă transparență binară precum GIF, dar oferă și o opțiune mult mai dorită cu un canal alfa, în care pixelii pot fi parțial transparenți în loc să fie doar porniți sau dezactivați. Utilizarea acestuia din urmă mărește dimensiunea fișierului, uneori chiar mai mult decât un GIF cu transparență binară, dar permite netezirea marginilor imaginii și face mai elegantă plasarea acesteia pe fundal.
Cu toate acestea, le-am reelaborat conceptul folosind o imagine albă cu simboluri stencil. Au folosit un simbol alb pe un fundal transparent, care de obicei ar putea fi destul de eficient. În acest caz, antecedentele dvs culoare css ar apărea într-o zonă pătrată sau dreptunghiulară în jurul simbolului, în locul simbolului în sine.
Atât Dan, cât și PJ au folosit GIF transparent în loc de PNG. Acest lucru le-a acoperit complet nevoile și au trebuit să creeze imagini pixelate pentru stilul pictogramelor. Cu PNG, puteți obține o tehnică similară, dar cu avantajul suplimentar de anti-aliasing și transparență parțială pentru utilizare în pictograme mai detaliate.
Știu la ce te gândești: toată transparența aia PNG arată bine, dar este practică?
Vestea bună este că toate browserele moderne acceptă pe deplin imagini PNG, inclusiv transparența canalului alfa, ale căror beneficii le-am arătat în exemple. Safari (toate versiunile), Firefox (toate versiunile), Opera (versiunile 6 și versiunile ulterioare), Netscape (versiunile 6 și mai sus) și Mozilla (toate versiunile) vor face tot ce le cer să facă cu un bang. Dar vestea proastă este acel browser pe care nu l-am menționat încă și pe care majoritatea utilizatorilor tăi îl au: Internet Explorer.
Internet Explorer 6 și versiunile anterioare nu acceptă transparența canalului alfa încorporată în format PNG. Deoarece alegerea browserului (sau nu alegerea) a fost făcută pentru majoritatea utilizatorilor web, această gaură deschisă i-a ținut pe designeri web departe de PNG. Dar, odată cu lansarea Internet Explorer 7, am primit suport complet pentru transparența alfa PNG în toate browserele majore. Ce urmează, există modalități de a lucra cu transparența alfa PNG în Internet Explorer 6 și versiunile anterioare? Deci, dacă vrei să folosești acest efect, nimic nu te va opri. Internet Explorer 6 și versiunile anterioare necesită o atenție mai mult decât suficientă, dar cu siguranță este posibil.
Internet Explorer vine cu diverse filtre native. Sunt folosite în CSS, dar nu fac parte din specificația CSS oficială. Cu alte cuvinte, nu sunt standardizate pe web. Din păcate, Internet Explorer 6 și mai jos nu acceptă pe deplin formatul PNG (care este recomandat de W3C), Microsoft are un filtru care remediază acest neajuns: AlphaImageLoader.
Potrivit unei secțiuni de pe site-ul oficial al Microsoft, AlphaImageLoader „afișează o imagine în limitele unui obiect și între fundalul obiectului și conținutul acestuia”. Cu alte cuvinte, AlphaImageLoader încarcă o imagine PNG cu transparența sa deplină, dar o încarcă ca strat propriu, sub care se află conținutul obiectului pe care este aplicată. Imaginile PNG încărcate în acest fel acționează mai mult ca imaginile de fundal decât imaginile din prim-plan (deși ele de fapt „stau” deasupra fundalului obiectului).
În general, puteți aplica pur și simplu AlphaImageLoader în CSS pe elemente img și vă bucurați de rezultat. Imaginea va fi încărcată mai întâi, transparența va rămâne, dar apoi imaginea va fi încărcată din nou - ca conținut frontal al obiectului - cu zone opace (astfel „umbrind” versiunea dumneavoastră transparentă).
Nu puteți utiliza un PNG transparent ca fundal imagine css pentru un element (X)HTML (să spunem pentru
Să ne întoarcem la unul dintre exemplele anterioare și să încercăm să-l încărcăm corect în Internet Explorer. Îți amintești de Canalul 49, postul TV din Topeka? Sunt sigur că da. Figura 5-21 arată cum arată site-ul în Internet Explorer 6.
Figura 5-21
Titlul 49abcnews.com redat în Internet Explorer 6 pentru Windows, cu transparența PNG intactă.
HTML-ul pentru topul referitor la vreme pare că ați ghicit deja:
În prezent, în Topeka, KS:
82°
Obțineți prognoza și multe altele...
Vedeți o imagine și cu siguranță este PNG, chiar și Internet Explorer o încarcă impecabil. Ingredientul secret al acestui lucru este JavaScript. De fapt, am folosit un pic de scripting DOM pentru a elimina elementul img din mers și a-l înlocui cu un element div care - ați ghicit - folosește AlphaImageLoader. JavaScript este descris în comentariile condiționate, un alt idiom la îndemână, dar complet nestandardizat de la Microsoft, încorporat în Internet Explorer. Comentariile condiționate vă permit să utilizați cod numai pentru o versiune cunoscută de Internet Explorer. Codul este ignorat de toate celelalte browsere, așa că nu le afectează în niciun fel. În element
site-ul web www.49abcnews.com, veți găsi:
Datorită primei linii, dacă lte IE6, acest script va fi inclus în documentul randat numai dacă este afișat într-o versiune Internet Explorer mai mică sau egală cu (specificată cu lte) 6. Toate celelalte browsere, inclusiv Internetul nou sosit Explorer 7, va ignora complet acest lucru.
Deci, ce este în fișierul JavaScript fixWeatherPng.js? Hai să aruncăm o privire:
Window.attachEvent(„încărcare”, fixWeatherPng); funcția fixWeatherPng() ( var img = document.getElementById("weatherImage"); var src = img.src; img.style.visibility = "ascuns"; var div = document.createElement("DIV"); div.style. filtru = "progid:DXImageTransform.Microsoft.AlphaImageLoader(+ src + "", sizing="scale")"; // Unele stiluri CSS specifice 49abcnews.com au fost omise pentru concizie. img.replaceNode(div); )
Să analizăm, pas cu pas, ce face scenariul. În primul rând, îi spunem browserului că vrem să executăm funcția fixWeatherPng atunci când pagina se încarcă. Restul scriptului este funcția în sine.
Pentru a începe, mai întâi căutăm imaginea cu care vom lucra după atributul id și o stocăm în variabila img. Stocăm atributul src (URL-ul către fișierul imagine) în variabila src. Apoi ascundem elementul img setând proprietatea CSS vizibilitate la ascuns.
Sfarsim prin a inlocui elementul img original (care este ascuns) cu un element div nou creat care are AlphaImageLoader atasat cu succes la el.
Folosirea scripturilor DOM pentru a vă injecta AlphaImageLoader - biți de filtrare din mers - are partea ei proastă, dar necesară - CSS rău. Mai mult, elementele div non-semantice vor fi conținute în afara marcajului (X)HTML. Și atâta timp cât totul este descris în comentarii condiționate, nu există nicio șansă ca alte browsere să fie corupte de codul Microsoft. (handyblogger: Aici Jeff încearcă să sublinieze subtil o soluție „neîndemânatică” de la Microsoft)
Dacă trebuie să faci ceva greșit, măcar poți să-l extragi și să-l ții separat de tot ce nu are nevoie.
PNG, ca format grafic, oferă multe avantaje tehnice dincolo de cele utilizate pe scară largă în GIF-uri. De fapt, beneficiile sunt atât de mari încât PNG ar fi putut demult să fi preluat ca format grafic fără legătură cu imaginile foto. Lipsa de suport de către Internet Explorer pentru unele dintre caracteristicile PNG mai importante, cum ar fi transparența canalului alfa, a oprit mulți dezvoltatori web ca urmare. Dar există două motive foarte bune pentru care nu ar trebui să vă fie frică de PNG.
În primul rând, chiar și Internet Explorer 6 și versiunile sale anterioare suportă aproape complet PNG în ceea ce privește ceea ce poate face GIF (cu excepția animației, desigur). PNG aproape întotdeauna arată o dimensiune mai mică a fișierului, permițându-le să se încarce mai rapid și să consume mai puține resurse.
În al doilea rând, Internet Explorer 7 oferă suport complet pentru transparența PNG alfa. Efectele care pot fi obținute cu întreaga gamă de opțiuni translucide sunt aproape nelimitate. Mă aștept ca designerii care găsesc modalități interesante de a folosi transparența PNG, pe linia celor descrise în acest articol, să deschidă ușa către un nou nivel de stiluri nemaivăzut până acum. V-am oferit câteva idei utile despre ceea ce puteți crea cu transparența PNG, dar nu vă opriți aici. Caută-te singur!
Un extras din Web Standards Creativity de Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin și Rob Weychert; postat de prietenii lui ED. Copyright Jeff Croft 2007. Folosit cu permisiunea Apress, Inc.
