Transparență în Photoshop- unul dintre conceptele cheie. Dacă tocmai ați început să învățați Photoshop și încă nu știți cum să faceți transparent fundalul unei fotografii sau cum să faceți transparentă o parte a unui desen, acest scurt tutorial cu ilustrații vă va fi util.

Cum să faci un fundal transparent în Photoshop

Pentru a realiza un fundal transparent într-o fotografie sau desen, este suficient să creați 2 straturi: stratul de fundal transparent inferior și stratul vizibil superior, pe care puteți elimina zonele inutile ale imaginii.

1. Deschide Photoshop. Deschideți-l cu o imagine care trebuie plasată pe un fundal transparent ( Fișier->Deschide...).

2. Selectați întreaga imagine/fotografie ( Ctrl+O).

3. Copiați imaginea selectată ( Ctrl+C).

4. Deschideți un fișier nou în Photoshop ( Fișier->Nou... sau Ctrl+N). În fereastra care apare, în lista derulantă cea mai de jos, selectați valoarea Transparent- „transparență”:

Clic introduce si vedem asta Photoshop a creat un fișier nou cu un fundal format din pătrate albe și gri. Aceste pătrate din Photoshop indică zone complet transparente.

5. Lipiți imaginea copiată anterior într-un fișier nou cu un fundal transparent. Pentru aceasta folosim tradiționale Ctrl+V. Ca rezultat, imaginea copiată anterior va fi lipită în stratul curent, complet gol și transparent.

6. Selectați zona pe care doriți să o ștergeți utilizând instrumentele obișnuite de selecție ( M)

sau folosind instrumente „magice” ( W):

Apăsați o tastă de pe tastatură Șterge iar în locul fundalului selectat sau al fragmentului de imagine veți vedea pătrate albe și gri - această zonă va fi transparentă. Apoi, puteți fie să salvați imaginea cu transparență, fie să continuați să experimentați cu imaginea în Photoshop.

Cum să faci text translucid și filigran

În Photoshop, pe lângă starea " pe deplin vizibile" Și " complet transparent» există o condiție vizibilitate parțială sau transparență parțială. Vizibilitatea parțială a unui obiect din imagine este indicată ca procent.

Textul translucid, siglele sau alte marcaje translucide peste imaginile originale sunt adesea folosite pentru a proteja drepturile de autor. Acestea sunt de obicei aplicate folosind Photoshop sau pluginuri speciale. Scopul lor este de a indica sursa originală a imaginii, de a indica paternitatea și de a îngreuna viața acelor oameni care doresc să fure imaginea.

Să presupunem că trebuie să postăm o fotografie exclusivă a unei mașini pe site-ul companiei, indicând o inscripție translucidă deasupra fotografiei. Acest tip de transluciditate este foarte ușor de creat în Photoshop:

1. Lansați Photoshop și deschideți fotografia noastră în el ( Fișier->Deschide...).

2. Selectați instrumentul Text ( T) și scrieți deasupra fotografiei inscripția cu dimensiunea, culoarea și stilul dorit:

În acest caz, textul va fi plasat automat într-un strat separat și va fi vizibil 100%.

3. Setați vizibilitatea textului alb din fotografie la 40%. Pentru a face acest lucru, în fereastra straturi ( Straturi) mutați glisorul de proprietate Opacitate la o valoare de 40%:

Toate. Acum o imagine cu o inscripție translucidă poate fi salvată în format JPG și postată pe site. În mod similar, în loc de text, puteți introduce orice altă imagine, de exemplu, o siglă BMW sau un site web.

În ce format ar trebui să salvez o imagine cu transparență?

Vă rugăm să rețineți că nu puteți salva o fotografie procesată în Photoshop cu zone transparente în format JPEG - acest format nu acceptă transparența. Zonele transparente atunci când sunt salvate ca JPG vor fi umplute automat cu culoare (alb în mod implicit). Dintre formatele care sunt folosite pe web, doar GIF și PNG sunt afișate corect de browsere și acceptă transparență. Formatul nativ Photoshop PSD nu este afișat de browsere.

Din păcate, formatele de imagine GIF și PNG au limitările lor. Formatul GIF, ca PNG pe 8 biți, poate stoca maximum 256 de culori, deci nu este potrivit pentru salvarea fotografiilor. Deși PNG pe 24 de biți este potrivit pentru stocarea fotografiilor și a altor elemente grafice cu degrade și transparență, multe site-uri impun restricții asupra formatelor de grafică pe care vizitatorii le pot încărca. Prin urmare, vă puteți încărca fotografiile sau avatarele pe astfel de site-uri numai în format JPG sau GIF. În acest caz, va trebui să salvați fotografia nu pe un fundal transparent, ci să introduceți în Photoshop fundalul pe care va fi plasată pe site, să salvați rezultatele în JPG și abia apoi să o încărcați pe site.

În zilele noastre, a devenit destul de la modă utilizarea blocurilor și umbrelor translucide pe site. Atunci când este combinat corect, puteți obține un design destul de elegant. Astăzi vă voi spune și vă voi arăta cum puteți face un bloc translucid sau transparent și vă voi spune și despre avantajele și dezavantajele fiecărei metode. După cum se dovedește, nu toată lumea știe că, pe lângă utilizarea unui png translucid în fundalul unui bloc, există și alte metode.

Metoda nr. 1

Cred că toată lumea știe această metodă, pentru a o implementa folosim o imagine png translucidă, de exemplu 1 pixel cu 1 pixel, și o înmulțim cu fundalul blocului. O imagine translucidă poate fi realizată în orice editor grafic modern. De ce png și nu jpg sau gif? Jpg în mod inerent nu acceptă deloc transparența și, atunci când este salvat în acest format, face toate părțile transparente albe. Gif - acceptă transparența, dar nu acceptă transluciditatea. Dar png conține toate proprietățile de care avem nevoie.

Exemplu de fundal de bloc translucid:

Metoda numărul 2

A doua metodă se bazează pe utilizarea proprietății opacitate css, care nu este compatibilă între browsere, dar problema este rezolvată prin utilizarea altor proprietăți similare pe care le suportă direct dinozaur. De exemplu, pentru ie6 va trebui să utilizați o proprietate css care folosește filtre alfa și arată astfel filtru: alfa(opacitate=80); Numărul 80 în acest caz este un procent. Pentru versiunile mai vechi de Mozilla Firefox, puteți utiliza proprietatea -moz-opacitate: 0,8; aici ca si in proprietate opacitate un bloc opac are un coeficient de unu, iar pentru transparență îi setăm valoarea zecimală (de exemplu, 0,8 va însemna 80%).

Exemplu de fundal translucid al blocului 2:

În acest caz, nuanța de transparență este setată de proprietatea backgroud, la care puteți seta orice culoare aveți nevoie și doriți să fie translucidă. Când utilizați această metodă, puteți întâlni faptul că toate informațiile din bloc vor fi translucide.

Metoda numărul 3

Cel mai mult îmi place această metodă, este mult mai simplă, dar la fel ca metoda pe care am prezentat-o ​​mai sus, nu este pe deplin compatibilă cu cross-browser în browserele mai vechi. Această metodă este implementată prin setarea culorii blocului folosind rgba culori al căror ultim parametru este responsabil pentru canalul alfa (pentru transluciditate). Primii trei parametri sunt nuanțe de roșu, verde și albastru care, atunci când sunt amestecate, dau o culoare specifică. Această metodă nu este acceptată de IE până la versiunea 8, ceea ce este destul de trist, desigur, dar astăzi nu este nici un browser modern normal și, personal, pur și simplu nu-mi pasă de asta.

Exemplu de fundal translucid al blocului 3:

Asta este tot, personal îmi place metoda 3, este destul de simplă și nu trebuie să contactați serverul pentru a obține imaginea. Depinde de tine să decizi ce metodă să alegi. Dacă știți alte modalități, vă rugăm să scrieți.

În mod implicit, toate straturile noi din Photoshop sunt create cu opacitate 100%. Dar gradul de transparență al stratului poate fi modificat folosind setările OpacitateȘi Completati situat în partea de sus a paletei Straturi.

Opacitate(Opacity) este o setare cu o scară de 100% care vă permite să schimbați gradul de transparență al întregului layer, cu toate efectele aplicate. Dacă valoarea este diferită de 100%, stratul de bază va fi vizibil. Un nivel de transparență de 0% indică o absență completă a imaginilor vizibile.

Transparența stratului poate fi comparată cu hârtia de calc, care se aplică desenelor pentru a le copia.

Completati(Umplere) este o setare scalată 100% care vă permite să modificați vizibilitatea unui strat fără a afecta suprapunerile acestuia.

Cum arată transparența în Photoshop

În mod logic, transparența unei imagini digitale este absența saturației și a densității culorii. Dacă vă imaginați culoarea ca pe un film, atunci transparența este intensitatea luminii care strălucește prin ea. Dar Cum să arăți transluciditatea pe un computer?

Photoshop a introdus convenția transparenței în lumea graficii pe computer - fundal de șah.

Acum această convenție a devenit un standard. Multe programe și servicii web folosesc fundaluri de șah atunci când vine vorba de transparență. De exemplu, Yandex.Images sau Google Images afișează imagini cu elemente transparente pe un fundal de șah.

3 moduri de a face un strat de imagine transparent

Pentru început, aveți nevoie de stratul necesar. Tehnica de selectare a două sau mai multe folosind tastele Ctrl sau Shift ar fi, de asemenea, adecvată aici.

Notă

Stratul de fundal (cu pictograma de blocare) nu poate fi transparent. Pentru el, aceste setări sunt inactive.

Încă o notă

Miniatura stratului nu se va schimba, indiferent de valoarea opacității pe care o setați.

Metoda 1 Introducerea numerelor

Introduceți valoarea necesară a transparenței în numere de la 0 la 100 în fereastra de setări speciale din paletă. Deoarece ambele setări au aproape același efect, puteți utiliza oricare dintre ele, doar amintiți-vă care sunt.

Metoda 2 Control slider

Puțin în dreapta numerelor există un buton cu o săgeată mică. Dacă faceți clic pe el, va apărea un glisor. Trebuie să-l mutați cu mouse-ul la stânga sau la dreapta pentru a micșora sau, respectiv, a crește transparența stratului.

Afișajul numărului va afișa valoarea curentă, iar imaginea în sine se va schimba odată cu mișcarea mâinii.

Metoda 3 Utilizarea tastaturii

Pentru o serie de instrumente Photoshop, este posibil să schimbați opacitatea unui strat folosind tastatura. Selectați un instrument, de exemplu, sau (există și o serie de alte instrumente, le puteți găsi prin forță brută).

Acum apăsați pe numerele de pe tastatură:

• Numărul 1 va schimba opacitatea la 10%, 2 la 20%, 5 la 50% și așa mai departe;
• Numărul 0 înseamnă 100%;
• Apelați 55 și obțineți 55%, 67 este 67% și așa mai departe

Să folosești aceeași tehnică pentru a schimba Umple, țineți apăsată tasta Shift împreună cu numerele.

Cum se face transparentă o secțiune separată a unui strat

Pentru a face nu întregul strat transparent, ci doar o secțiune separată a acestuia, va necesita un efort. Nu există un instrument ca atare în acest scop. Cu toate acestea, în funcție de problemă, există cel puțin două soluții.

Ambele soluții sunt unite de munca inițială, poate cea mai consumatoare de timp - crearea unei zone dedicate. Logica acțiunii este simplă - trebuie să selectați un fragment din imagine cu care va avea loc lucrările ulterioare.

În exemplul nostru, să presupunem că trebuie să faceți transparent un fundal rotund gri. Pentru a face acest lucru, voi folosi instrumentul. În panoul de setări trebuie să setați parametrul Adăugați la selecție, apoi faceți clic pe toate zonele dorite până când le selectați pe toate.

După ce zona selectată a apărut, puteți face acest fragment transparent.

Metoda 1 Tăiați zona dorită a imaginii pe un nou strat

Mai întâi trebuie să vă asigurați că oricare dintre instrumentele pentru crearea unei zone selectate nu este activ. De exemplu bagheta magica, care a fost folosit în pasul anterior.

Acum puteți face clic dreapta pe selecție. Va apărea un meniu contextual. Suntem interesați de echipă Tăiați la un strat nou.

Ca rezultat, acest fragment va fi separat de imaginea curentă și mutat într-un nou strat. Și apoi puteți face orice doriți cu acel nou strat, inclusiv schimbarea transparenței.

Metoda 2 Utilizarea unei radiere

Această metodă este potrivită dacă trebuie să obțineți nu o reducere uniformă a transparenței, ci una plutitoare, adică să faceți acest efect mai puternic în unele locuri și mai slab în altele.

Selectați , în bara de opțiuni setați valoarea Opacitate diferit de 100%. Apoi ștergeți zonele din imagine care se află în zona selectată. Instrumentul va afecta numai acei pixeli pe care i-ați selectat.

Schimbați valoarea Opacitate, dacă trebuie să obțineți un efect neuniform.

Cum să salvați o imagine cu transparență

Sunt multe, dar doar două dintre ele acceptă transparență - PNG și GIF.

GIF are o limitare - pixelul trebuie să fie transparent sau nu, nu există o a treia opțiune, adică o valoare a transparenței, de exemplu, 59% nu va mai fi acceptată. Acest format are și restricții privind numărul de culori utilizate - nu poate fi mai mult de 256.

Prin urmare, imaginea trebuie salvată în format PNG. Numai că este lipsit de toate deficiențele și este capabil să arate pixeli translucizi.

Pentru a crea o imagine PNG în Photoshop, trebuie să rulați comanda: Fișier - Salvare ca. Va apărea o casetă de dialog în care trebuie să specificați o locație pentru a salva pe computer și, de asemenea, să selectați din lista derulantă Tip fișier — PNG(*.PNG).

Dacă observați o eroare în text, selectați-o și apăsați Ctrl + Enter. Mulțumesc!

Vreau să dedic această lecție unui punct atât de interesant precum transparența straturilor în Photoshop. Stratificarea este una dintre cele mai esențiale abilități din Adobe Photoshop. Dacă ați încercat deja să înțelegeți această operație, cu siguranță ați dat peste definiția „opacității stratului”. Ce este și cu ce se mănâncă?

Care strat este considerat transparent?

Să ne uităm la prima situație. Să presupunem că avem o imagine originală. Să zicem o fotografie. Și ar trebui să creăm un nou strat. Să presupunem că folosim combinația de taste ctrl+shift+n.

Acest nou strat va fi transparent.

A doua situatie. Aveți deja un document cu două straturi. Ambele sunt opace. Arata cam asa.

Faptul că avem două straturi în imaginea originală poate fi văzut în fereastra straturi. Să încercăm să facem stratul Harley Quinn transparent.

Pentru a face acest lucru, în fereastra de straturi, îl selectăm pe cel de sus și îi reducem transparența la zero prin mișcarea glisorului.

Stratul Harley a devenit transparent, iar imaginea lui Deadpool a apărut pe fișierul sursă. Așa s-a dovedit a fi totul.

Cum se face un strat semi-transparent?

Să revenim la aceeași sursă cu Deadpool și Harley. Dar de data aceasta mutam glisorul nu la zero. Să lăsăm, să zicem, 50 la sută. Ce se va întâmpla?

Recepția este foarte utilă. Adesea folosit în design web și la crearea colajelor.

Ce altă metodă putem influența transparența unui strat?

Transparența stratului poate fi modificată prin opțiunile de amestecare. Nu este o soluție foarte convenabilă. Deși, la un moment dat, am întâlnit destul de des, așa că vă spun. Accesați Opțiuni de amestecare.

În fereastra care apare, vedem același glisor cu o scară procentuală. Lung și plictisitor, desigur. Dar, de fapt, există așa ceva și cu ajutorul lui puteți reduce cu adevărat transparența unui strat.

Efectul translucid al unui element este clar vizibil în imaginea de fundal și a devenit larg răspândit în diverse sisteme de operare, deoarece arată elegant și frumos. În designul web, transluciditatea este, de asemenea, utilizată și este obținută prin proprietatea opacității sau formatul de culoare RGBA care este setat pentru fundal.

Proprietatea opacității

Caracteristica principală a acestei proprietăți este că valoarea transparenței afectează toate elementele copil din ea, nu doar fundalul. Aceasta înseamnă că atât fundalul, cât și textul vor deveni translucide și nu veți putea crește nivelul de transparență adăugând . În tabel Figura 1 arată aspectul textului și al fundalului cu diferite valori de opacitate.

Exemplul 1 arată cum să creați un bloc semi-transparent folosind opacitatea.

Exemplul 1: fundal pe o pagină web

HTML5 CSS3 IE 9+ Cr Op Sa Fx

RGBA

De obicei, prin design, doar fundalul unui element ar trebui să fie translucid, iar textul ar trebui să fie opac pentru a menține lizibilitatea. Proprietatea opacitate nu este potrivită aici deoarece textul din interiorul elementului va fi, de asemenea, parțial transparent. Cel mai bine este să folosiți formatul RGBA, care include un canal alfa sau, cu alte cuvinte, o valoare de transparență. Valoarea este scrisă rgba, apoi valorile componentelor de culoare roșu, albastru și verde sunt enumerate în paranteze, separate prin virgule. Ultima este transparența, care este setată de la 0 la 1 (Fig. 1), cu 0 însemnând transparență completă și 1 opacitatea culorii.

Orez. 1. Sintaxă pentru utilizarea rgba

Exemplul 2 arată utilizarea formatului RGBA pentru a crea un fundal translucid.

Exemplul 2. Fond translucid

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Rezultatul acestui exemplu este prezentat în Fig. 2. Opacitatea fundalului este setată la 90%.

Orez. 2. Fundal translucid și text opac