Fundal transparent. Cum să faci un fundal transparent (photoshop)

Vlad Merjevici

Transparența parțială, atunci când este utilizată corect, arată foarte impresionant în designul site-ului web. Principalul lucru este că sub blocurile translucide nu există un design monocromatic, ci o imagine, în acest caz, transparența devine vizibilă. Acest efect este atins căi diferiteși dacă vă amintiți totul, inclusiv metodele de modă veche, folosește o imagine PNG ca fundal, creând o imagine în carouri și proprietatea opacității. Dar de îndată ce apare nevoia de a face un etaj în bloc fundal transparent, aceste metode au un dezavantaj neplăcut. o să o fac scurtă recenzie pentru a clarifica ce ne referim despre care vorbim, precum și pentru acei cititori care nu sunt familiarizați cu opțiunile netradiționale pentru crearea unui efect translucid.

PNG ca fundal

ÎN editor grafic Un model translucid într-o singură culoare este pre-preparat și salvat în format PNG-24 (Fig. 1). O caracteristică specială a acestui format este că acceptă 256 de niveluri de transparență sau, pur și simplu, poate afișa imagini translucide.

Orez. 1. Imagine pentru a crea fundalul

Apoi adăugăm imaginea ca fundal prin proprietatea de fundal, așa cum se arată în exemplul 1.

Exemplul 1: Utilizarea unui model translucid

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Rezultat acest exemplu prezentat în Fig. 3.

Orez. 2. Aplicarea unei imagini de fundal

Browser învechit Internet Explorer 6 nu funcționează cu transluciditate în PNG-24, dacă dintr-un motiv oarecare trebuie să susțineți acest browser, va trebui să utilizați scripturi pentru el.

Metoda de mai sus are o serie de limitări. Deci, atunci când dezactivați imaginile din browser, fundalul va dispărea cu totul. În plus, nu este atât de ușor să schimbați culoarea de fundal și valoarea transparenței, pentru a face acest lucru, va trebui să editați din nou imaginea.

Imagine în carouri

Această metodă se referă la metode complet vechi de implementare a translucidității, când browserele „nu puteau face nimic” și era necesar să se caute soluții non-standard. Trucul este de a crea o imagine care alternează între pixeli transparenți și opaci (Figura 3). Această structură regulată creează un efect translucid, imitându-l în esență.

Orez. 3. Model în carouri mărit

Așa arată până la urmă (Fig. 4).

Orez. 4. Simulați transluciditatea

Dezavantajele acestei metode sunt comparabile cu cea anterioară poate apărea și un model moiré și textul se va deteriora.

Proprietatea opacității

Proprietatea de opacitate CSS 3 specifică valoarea transparenței și variază de la 0 la 1, unde zero este transparența completă a elementului, iar unul, dimpotrivă, este opac. U proprietăți de opacitate există o caracteristică - transparența se aplică tuturor elemente copilși nu pot depăși valoarea de transparență a părintelui lor. Se dovedește că nu poate exista text opac pe un fundal translucid (exemplul 2).

Exemplul 2: Utilizarea opacității

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Rezultatul exemplului este prezentat în Fig. 5.

Orez. 5. Translucidența textului și a fundalului

În versiunile de Internet Explorer până la 8.0 inclusiv, opacitatea nu funcționează, așa că folosește proprietatea de filtru specifică browserului. Desigur, acest lucru are ca rezultat un cod CSS nevalid.

RGBA

Abordarea modernă este mult mai simplă și mai vizuală decât metodele de mai sus și constă în utilizarea formatului RGBA pentru culori și fundal. Primele trei litere sunt familiare pentru mulți și reprezintă roșu, verde, albastru (roșu, verde, albastru), ultima simbolizează canalul alfa și stabilește transparența elementului. Formatul de înregistrare este următorul.

culoare de fundal: rgba(r, g, b, a);

În paranteze, în loc de litere, valoarea componentei de culoare poate fi vizualizată în orice editor grafic, ultima valoare stabilește transparența și coincide cu valoarea proprietății de opacitate;

Nu toate browserele acceptă acest format: Internet Explorer din versiunea 9, Opera din versiunea 10, Firefox din 3, Safari din 3.2. Dar în general, browsere moderne afișați corect transparența. Pentru versiunile mai vechi de IE, puteți specifica separat culoarea în formatul său obișnuit și, desigur, nu va exista transparență. Sau folosiți din nou proprietatea filtrului, dar apoi va trebui să suportați faptul că transparența va afecta și textul (exemplul 3). A se conforma cod valid CSS, am folosit comentarii condiționate.

Exemplul 3: Utilizarea RGBA

HTML5 CSS3 IE Cr Op Sa Fx

Rezultatul exemplului poate fi văzut în Fig. 6.

Orez. 6. Fundal translucid cu text opac

Comparați poza cu cea anterioară, literele au devenit mai luminoase și mai clare.

ÎN motor de cautare Explorer 7 a descoperit o eroare la combinarea culorii de fundal cu sensuri diferite. De exemplu, dacă setați culoarea de fundal la roșu, așa cum se arată mai jos, fundalul în IE7 nu va apărea deloc.

Div (culoare de fundal: roșu; /* Nu se aplică în IE7 */ culoare de fundal: rgba(255, 0, 0, 0.5); )

Acest lucru este rezolvat prin înlocuirea proprietății background-color cu background .

Div ( fundal: roșu; /* Și aceasta funcționează */ fundal: rgba(255, 0, 0, 0.5); ) Cu toate acestea, există o avertizare. Validatorul CSS se plânge de fundal dacă îi dați o valoare format RGBA. Dar, în același timp, se referă corect la culoarea de fundal. În general, ca întotdeauna, trebuie să alegeți între browsere și valabilitate.

Salutări, dragi cititori ai blogului meu!

Recent am avut nevoie elimina fundalul din poza nu ma pricep foarte bine cu Photoshop. Și vă spun că nici măcar nu-l am pe computer. (Ei bine, de fapt, așa este, de ce am nevoie de ceva cu care nu știu cum să lucrez).

Dar fundalul din imagine a trebuit cumva eliminat, așa că am început să navighez pe internet, căutând o soluție la problema mea. De fapt, există o mulțime de opțiuni, dar căutam ceva mai ușor)). Am găsit o modalitate foarte ușoară și simplă de a elimina fundalul dintr-o imagine.

Asadar, haideti sa începem. Vom avea nevoie de Photoshop, dar nu-l am. eu folosesc Photoshop online. Este un lucru foarte convenabil, vă spun. Și bineînțeles, poza al cărei fundal vrem să-l facem transparent.

Vă voi arăta un exemplu, ca această imagine, o vom elimina fundal alb

Să mergem la Photoshop online. L-am folosit pe acesta PIXLR

Selectați: Încărcați o imagine de pe computer.

Acum în fereastra din dreapta „STRATURI” Trebuie să deschid încuietoarea

Apasa pe el De 2 ori cu butonul din stânga mouse, ar trebui să apară o bifă în casetă.

Acum mergeți la panoul din stânga și selectați instrumentul "Bagheta magica"și setați toleranța la 21.

Asta pare să fie tot, dar nu sunt pe deplin mulțumit de imagine, există încă rămășițe din fundal, dau din nou clic pe locul pe care vreau să-l elimin. Apoi „editați” ---- „ștergeți”. Și tot așa până când eliminați tot ce aveți nevoie.

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 ar fi de dorit să îl eliminați.

Și așa, deschideți poza noastră în Photoshop.

1. Primul lucru pe care trebuie să-l faceți este să creați un Zona de lucru cu un fundal transparent. Pentru aceasta:
- în fereastra straturi, faceți dublu clic pe stratul nostru (cu blocarea)
— În fereastra care apare, faceți clic pe OK

Încuietoarea ar trebui să dispară

Dacă fundalul este simplu:
Selectați instrumentul " bagheta magica„este un instrument foarte flexibil pentru evidențierea zonei dorite. Sarcina noastră este să evidențiem întregul fundal, cu excepția imaginii. Pentru a face acest lucru, ajustați setările baghetei magice (parametrul admitere), până când ajungem rezultatul dorit. Il folosim si noi Tasta Shift pentru a selecta o altă zonă decât cea deja selectată. Apăsați Del și zona selectată este ștearsă.

Dacă fundalul este multicolor:
Folosim instrumentul " Selecție rapidă ". Aici sarcina noastră este să evidențiem nu fundalul, ci obiectul în sine, care ar trebui să rămână. Faceți clic până când zona dorită este evidențiată. Dacă este evidențiat prea mult, țineți apăsat Alt și minus zona. Puteți vizualiza rezultatul apăsând tasta Q.
Când selecția este gata, copiați-o cu Ctrl+C. Noi creăm document nou cu un fundal transparent (Ctrl+N) și lipiți acolo obiectul Ctrl+V.

3 . Dacă a mai rămas ceva în plus în imagine, utilizați „ Radieră„, ștergeți fundalul suplimentar.

4 . Salvați imaginea pentru Web (Alt+Shift+Ctrl+S) selectați format GIF sau PNG (în altele, fundalul nostru transparent va deveni alb).

Video util pe această temă:

Uneori dai peste o poză foarte potrivită pentru postarea ta și totul ar fi bine... Dar fundalul imaginii nu se potrivește cu fundalul blogului sau blocului cu text. Se pare că nimeni nu are această problemă și nimeni nu are un fundal alb, care ar fi potrivit în majoritatea cazurilor. am nevoie fundal transparent!

Nu am găsit idei bune pe internet. cum să faci un fundal transparent Pentru poza terminata, așa că am început să experimentez și am găsit o soluție mai mult sau mai puțin potrivită!

Cum să faci un fundal transparent pentru o imagine

Să luăm un exemplu o poză simplăîn format .jpg (în general, formatul nu este deosebit de important):

Există un fundal alb aici de care vreau să scap și să fac un fundal transparent. O versiune online a Photoshop ne va ajuta în acest sens.

Încărcarea imaginii noastre. În partea dreaptă a ferestrei „Straturi” va apărea un strat „Background”, pe care există o blocare (previne ștergerea fundalului imaginii).

Făcând dublu clic cu butonul stâng al mouse-ului pe această blocare, puteți elimina blocarea din fundal. În loc de lacăt, va apărea o bifă.

Acum să luăm bagheta magica(bara de instrumente, coloana din dreapta, al doilea buton din partea de sus), specificați următorii parametri: toleranță = 21, casete de selectare pentru netezire și continuitate(de obicei, astfel de parametri sunt standard), deși puteți experimenta cu parametrii; si click pe fundalul imaginii (in cazul nostru, pe fundalul alb).

Acum ștergem fundalul apăsând butonul „Șterge” și obținem imaginea de care avem nevoie cu un fundal transparent.

Ca rezultat, rezultatul este aceeași imagine cu un fundal transparent.

Singurul negativ al Pixlr- nu puteți salva imaginea în format .gif, care păstrează și un fundal transparent, dar este mult mai deschis decât formatul .png. Dar dacă nu există altă opțiune, de ce să nu profitați de asta?

multumesc Nataliei Petrova

Din când în când, mulți utilizatori se confruntă cu nevoia de a schimba transparența unei imagini. În primul rând, această acțiune implică eliminarea fundalului, dar uneori trebuie să faceți întreaga imagine sau fotografia transparentă într-o măsură sau alta. Vom vorbi despre fiecare dintre aceste opțiuni în articolul nostru de astăzi.

Desigur, este mult mai convenabil să procesați și să modificați fișierele grafice, să eliminați fundalul sau alte elemente din ele folosind programe specializate– editori. Dar când nu există un astfel de software sau nu există dorința de a-l instala pe computer, este foarte posibil să apelezi la unul dintre multele. Din fericire, ei fac față bine sarcinii care ni se stabilesc, permițându-ne nu numai să facem imaginea transparentă, ci și să efectuăm o serie de alte manipulări.

Notă: Obțineți efectul de transparență dorit fără efort deosebit posibil cu fișiere format PNG. Dar cu JPEG, în care, de exemplu, sunt salvate fotografii, pot apărea anumite probleme.

Metoda 1: IMGOnline

Acest serviciu web oferă destul de oportunități ample la lucrul cu fisiere grafice. Astfel, arsenalul său include instrumente de redimensionare, comprimare, decupare, conversie a imaginilor și procesare cu efecte. Desigur, există și o funcție de care avem nevoie aici - schimbarea transparenței.

1. Odată ajuns pe site, faceți clic pe butonul "Alege fișierul". Se va deschide o fereastră standard "Conductor" Windows, în el accesați folderul cu imaginea a cărei transparență doriți să o schimbați. Selectați-l și faceți clic pe butonul "Deschis".



2. Următorul pas este configurarea setărilor de înlocuire a fundalului. Dacă aveți nevoie de transparent, nu schimbăm nimic în această secțiune. Dacă trebuie să îl înlocuiți cu un alt fundal simplu, selectați unul disponibil din lista derulantă. În plus, puteți introduce codul de culoare HEX sau puteți deschide paleta și selectați nuanța corespunzătoare din aceasta.



3. După ce ne-am hotărât asupra parametrilor de fundal, selectăm formatul pentru salvarea imaginii procesate. Vă recomandăm să bifați caseta de lângă extensia PNG și apoi să faceți clic "BINE".



4. Imaginea va fi procesată instantaneu.
   
   

   Pe pagina următoareîl poți deschide înăuntru filă separată Pentru previzualizare(acest lucru vă va ajuta să înțelegeți dacă fundalul a devenit cu adevărat transparent)

   
   sau salvați imediat pe computer.


Așa este cât de ușor este să schimbi transparența unei fotografii, sau mai bine zis fundalul acesteia, folosind serviciul online IMGOnline. Cu toate acestea, are și dezavantaje - calitate foarte înaltă, în mod ideal, poate fi schimbat doar fundal uniform. Dacă are nuanțe sau este pur și simplu multicolor, doar una dintre culori va fi eliminată. În plus, algoritmii serviciului nu pot fi numiți suficient de inteligenți, iar dacă culoarea de fundal se potrivește cu culoarea unui element din imagine, va deveni și transparentă.

Metoda 2: Strada foto

Următorul site pe care îl vom analiza oferă o abordare complet diferită a creării imagini transparente. De fapt, îl face să arate așa, mai degrabă decât să elimine doar fundalul uniform. Serviciul web Photo Street va fi util în cazurile în care este necesară luminarea unei imagini, de exemplu, pentru a o suprapune pe alta sau a o folosi ca fundal de marcă pentru un document sau un filigran. Să ne uităm la cum să lucrăm cu el.

1. Pe pagina principala site-ul faceți clic pe butonul „Deschide editorul foto”.



2. Apoi, poate fi necesar să permiteți utilizarea serviciului web, pentru care trebuie doar să faceți clic pe câmp golși apoi apăsați "Permite"într-o fereastră pop-up. În editorul foto care apare, faceți clic pe butonul situat în colțul din dreapta sus "Încarcă o poză".



3. Faceți clic pe următorul „Încărcare de pe computer” sau alegeți a doua opțiune dacă aveți un link către imagine pe Internet.



4. Pe pagina actualizata serviciu web faceți clic pe butonul „Selectează fotografia”, în fereastra de sistem care se deschide "Conductor" accesați folderul cu imaginea, selectați-l și faceți clic "Deschis".



5. Când imaginea este adăugată în editorul de fotografii, faceți clic pe butonul situat în partea de jos a panoului din stânga "Efecte".



6. Pe dreapta zona superioara făcând clic pe icoană rotundă «–» , modificați transparența imaginii.



7. După ce ați obținut un rezultat acceptabil, faceți clic "Colaps" pentru a deschide meniul principal al editorului de pe site-ul Photo Street.



8. Faceți clic pe butonul de acolo "Salva" situat mai jos.



9. Apoi selectați varianta preferata descărcări. Setat implicit „Salvare pe computer”, dar poți alege altul. După ce te-ai hotărât, dă clic "BINE".



10. Serviciul vă va oferi posibilitatea de a alege calitatea dosar final. Bifați caseta de lângă articol « Marime mare» și lângă linia de mai jos „Nu tipăriți sigla”. Clic "BINE".



11. Va începe procedura de salvare a rezultatului, ceea ce va începe din motive necunoscute, poate dura câteva minute.



12. Când imaginea modificată este salvată, serviciul online vă va oferi un link pentru a o descărca. Faceți clic pe ea - imaginea va fi deschisă într-o filă de browser, de unde o puteți salva pe computer. Clic Click dreapta mouse-ul și selectați „Salvați fișierul ca...”. Specificați directorul preferat pentru a plasa fișierul descărcat și faceți clic "Salva".


Modificarea transparenței unei imagini folosind editorul încorporat în serviciul online Photo Street necesită puțin mai mult efortși acțiuni decât cele discutate în metoda anterioară IMGOnline. Dar el efectuează și prelucrarea după un principiu complet diferit. Este important să luați în considerare următoarele - pentru imagini în format JPG de fapt, nu transparența va fi schimbată, ci luminozitatea, adică imaginea pur și simplu va deveni mai ușoară. Dar cu fișiere PNG care acceptă transparența în mod implicit, totul va fi exact așa cum s-a intenționat - imaginea, deși va deveni mai puțin luminoasă vizual, va deveni de fapt mai transparentă proporțional cu scăderea acestui indicator.