Moduri de amestecare: un ghid complet pentru design grafic și web

Modurile de amestecare sunt o modalitate excelentă de a vă îmbunătăți digital imaginile și desenele. Există mai multe moduri de a folosi modurile de amestec ca designer grafic (folosind software de design) sau ca designer web (folosind CSS sau Divi). În această postare, vom acoperi tot ce trebuie să știți despre modurile de amestecare, inclusiv o defalcare detaliată a fiecăruia, precum și cum să le folosiți în Photoshop și pe site-ul dvs. web.

Vom acoperi:

Cum funcționează modurile de amestecare
Descrieri ale modului de amestecare
Cum să utilizați modurile de amestecare Photoshop
Moduri de amestec CSS pentru Web Design
Moduri de amestecare folosind Divi

Și mai sunt. Să sărim înăuntru!

Ce este un mod de amestecare?

Un mod de amestecare este o ecuație matematică care definește modul în care pixelii se vor amesteca împreună atunci când sunt combinate două sau mai multe straturi de pixeli. Deși algoritmii din spatele modurilor de amestecare sunt complexi, sunt destul de ușor de lucrat folosind instrumente de proiectare sau software de editare foto precum Photoshop. Cu acest tip de software, designerii sunt capabili să îmbine straturi (fotografii, culori, text) împreună în moduri creative pentru modele unice în câteva clicuri. Puteți combina orice număr de combinații de straturi. Dar, cel puțin, pentru a realiza un efect de mod de amestecare, veți avea nevoie de cel puțin două straturi: un strat de bază și un strat de amestecare.

Cum funcționează modurile de amestecare?

Modurile de amestecare combină un strat de bază cu un strat de amestecare pentru a obține efecte diferite. Fiecare efect (sau mod) folosește o ecuație matematică care combină coduri de culoare roșu, verde și albastru (RGB) sau cyan, magenta, galben și negru (CMYK) cu niveluri de întuneric și lumină pentru a crea efecte cu mai multe straturi. Pentru majoritatea modurilor de amestecare, opacitatea este necesară pentru a scoate în evidență efectul de amestecare. Puteți folosi moduri de amestecare pentru a aplica suprapuneri de culoare imaginilor, pentru a amesteca imagini împreună, pentru a manipula nivelurile de culoare pe fotografii și multe altele.

De exemplu, să aruncăm o privire la combinarea a două straturi și aplicarea Multiply. Folosind un strat foto ca strat de bază și un gradient cu culorile #ff0f0f și #4a00e8 ca strat de amestecare, imaginea rezultată apare întunecată și capătă aspectul culorilor gradientului.

Pentru ca ele să funcționeze, trebuie să existe cel puțin două straturi. Fiecare opțiune produce rezultate diferite în funcție de modul ales. Se strică așa. În primul rând, stratul de bază este culoarea sau imaginea originală. Apoi, stratul de amestec se aplică direct stratului de bază folosind un mod specific. Rezultatul este un amestec al celor două straturi, care modifică culorile pentru a dezvălui o imagine cu un aspect complet modificat.

Introducere în modurile de amestecare Photoshop

Există peste 27 de moduri de amestecare în Photoshop. Unele sunt folosite pentru a regla opacitatea, în timp ce altele întunecă aspectul fotografiilor și al desenelor. Există, de asemenea, moduri de amestecare care vor lumina imaginile, în timp ce altele funcționează pur și simplu pentru a regla contrastul.

Opacitate vs. Umplere cu moduri de amestecare

Este important de reținut că, în timp ce modurile de amestecare funcționează mai ales cu ajustarea nivelurilor de opacitate, există 8 moduri speciale de amestecare care funcționează cel mai bine atunci când ajustați valoarea de umplere (sau procentul). De exemplu, când combinați un strat foto de bază cu un strat de amestec de culoare solidă folosind Hard Mix, puteți vedea că ajustarea valorii de umplere a stratului de amestecare la 50% are un efect mai plăcut decât reglarea opacității la 50%.

Pe lângă amestecul greu, celelalte opt moduri speciale de amestecare sunt arderea culorilor, arderea liniară, eschivarea culorii, eschivarea liniară (adăugați), lumină vie, lumină liniară și diferență.

Descrieri ale modului de amestecare

În Photoshop, fiecare mod de amestecare este clasificat după tip (normal, subtractiv, aditiv, contrast, comparativ și compus). Iată o listă care explică fiecare mod de amestecare și cum pot fi utilizate.

Normal

Această categorie conține modurile de amestec normal și dizolvat. În această categorie, opacitățile stratului de amestecare vor trebui ajustate pentru ca orice efect să fie vizibil.

Normal

Acesta este modul implicit în Photoshop. Necesită ajustări ale opacității pentru orice diferență vizibilă în imaginile dvs. Când se aplică o opacitate 100%, stratul de amestec blochează complet stratul de bază. În exemplul nostru, puteți vedea că nu există nicio imagine vizibilă sub imaginea, culoarea sau gradientul nostru.

Dizolva

Dizolvare preia culorile pixelilor din stratul de bază și pictează peste culorile pixelilor din stratul de amestecare (aparent la întâmplare) pentru a produce un rezultat de amestecare pixelat unic. Ca și în modul normal, ajustarea opacității este singura modalitate de a obține o diferență vizuală în imagini și design. În exemplul nostru, arătăm modul de dizolvare cu o opacitate de 75% aplicată straturilor noastre de amestec pentru a crea un model de dither.

Aditiv

După cum sugerează și numele, aceste moduri de amestecare vor adăuga tonuri întunecate imaginilor și desenelor tale. Categoria de aditivi conține întunecare, înmulțire, ardere de culoare și culoare mai închisă.

Întuneca

Darken compară pixelii stratului de bază cu stratul de amestecare, apoi selectează cei mai întunecați pixeli pentru a da stratului un aspect întunecat. În exemplul nostru, puteți vedea că imaginea se întunecă cu o suprapunere de fotografie, culoare sau gradient folosind acest mod.

Multiplica

Acesta este unul dintre cele mai frecvent utilizate moduri de amestecare în Photoshop. Funcționează prin înmulțirea culorilor din stratul de bază cu stratul de amestec. Rezultă o imagine cu un aspect întunecat. Orice alb din straturi este neatins, în timp ce tonurile mai închise par mult mai închise decât fotografia sau designul original.

Arderea culorii

Similar cu multiplicarea, Color Burn mărește contrastul pentru a întuneca culorile stratului de bază înainte de a le amesteca cu culorile stratului de amestecare. Amestecarea cu culorile albe nu schimbă deloc aspectul imaginilor. În timp ce arderea culorilor este similară cu modul de amestecare înmulțire, face imaginile mult mai întunecate.

Arsură liniară

Similar cu Color Burn, acest efect de „ardere” este creat prin scăderea luminozității culorilor stratului de bază înainte de amestecarea cu culorile stratului de amestecare. Rezultatele fac stratul de bază mult mai întunecat, fără a afecta pixelii albi din strat.

Culoare mai închisă

Darker Color compară pixelii stratului de imagine cu pixelii stratului de amestecare, apoi arată culoarea cu valoare mai mică. Spre deosebire de Darken, Darker Color nu creează o a treia culoare, deoarece alege de fapt cele mai mici valori de culoare din ambele straturi de bază și de amestec. În exemplul nostru, puteți vedea că maroniile din stratul nostru de imagine sunt cele mai închise, așa că iese în evidență mult mai mult decât culoarea albastră din stratul nostru de amestec.

Străctive (moduri de amestec mai ușoare):

Modurile de amestecare substractive vor oferi imaginilor și desenelor tale un aspect mai deschis, deoarece scad lumina (sau tonurile deschise de culoare) atunci când amestecați straturile. Categoria Subtractive conține lumină, ecran, culoare dodge, dodge liniar (adăugați) și culoare mai deschisă.

Uşura

Aceasta va selecta cea mai deschisă culoare dintre cele două straturi pentru a înlocui pixelii care sunt mai întunecați decât stratul de amestecare, fără a modifica pixelii care sunt mai deschisi decât stratul de amestecare.

Ecran

Acest mod selectează inversul straturilor de amestec și de bază, apoi îl înmulțește pentru a crea un aspect mai deschis. Culorile alb-negru rămân aceleași.

Color Dodge

Acest mod luminează stratul de bază în timp ce scade contrastul atât între stratul de bază, cât și cel de amestec. Culoarea neagră rămâne aceeași.

Linear Dodge (Adăugați)

Acest lucru va lumina stratul de bază pentru a reflecta stratul de amestec în timp ce crește luminozitatea. Negrul rămâne același.

Culoare mai deschisa

Asemănător cu lumina, bricheta compară straturile de bază și amestecă, apoi îl păstrează pe cel mai ușor dintre cele două. Diferența dintre culoarea deschisă și cea mai deschisă este faptul că culoarea mai deschisă se uită la canalele RGB în ansamblu, în timp ce lumina se uită la canalele individuale pentru a finaliza amestecul.

Contrast

Aceste moduri de amestecare creează efecte diferite folosind contrastul și se bazează pe faptul că stratul de bază sau de amestec are o culoare mai deschisă de 50% gri. Această categorie conține suprapunere, lumină slabă, lumină tare, lumină puternică, lumină liniară, lumină pin și mixare tare.

Acoperire

Unul dintre cele mai frecvent utilizate moduri, suprapunerea utilizează practic modul ecran la 50% putere pe culori mai luminoase decât gri. Practic, tonurile închise schimbă tonurile medii pentru a deveni mai închise, iar tonurile deschise schimbă tonurile medii pentru a crea culori mai deschise.

Lumina slaba

Similar cu suprapunerea, lumina moale aplică fie un efect mai întunecat, fie mai deschis, în funcție de valorile luminii dintr-o imagine sau culoare, dar într-un aspect mai subtil.

Lumină tare

Combinând înmulțirea și ecranul, lumina puternică folosește luminozitatea în stratul de amestec pentru a calcula rezultatul. De obicei, cel mai bine este să reduceți opacitatea stratului de amestec atunci când utilizați lumină puternică pentru a obține rezultate bune.

Lumina vie

50% gri devine întunecat, dar orice lucru mai deschis de 50% este deschis. Lumina vie este una dintre cele 8 speciale, ceea ce o face să se amestece diferit în funcție de dacă ajustați umplerea sau opacitatea.

Lumina liniara

Un alt membru al specialului 8, lumina liniară combină efectele eschivării liniare (adăugați) pe pixelii mai ușori și arderea liniară pe cei mai întunecați.

Lumina insignei

Acest mod combină un amestec întuneric și luminos în același timp. Va elimina toate tonurile medii din imaginea dvs. Ajustarea opacității poate produce rezultate extrem de diferite.

Hard Mix

Hard Mix funcționează prin adăugarea valorii fiecărui canal RGB din stratul de amestec la straturile RGB potrivite ale stratului de bază. Apariția luminii dure duce la pierderea culorii, cu excepția negru, alb, gri sau RGB și CMYK.

Comparativ

Acestea creează variații de culoare bazate pe valorile stratului de amestec și ale stratului de bază. Sunt incluse diferența, excluderea, scăderea și împărțirea.

Diferență

Modul diferență preia informațiile din fiecare canal de culoare și fie scade stratul de amestec din stratul de bază, fie stratul de bază din stratul de amestec. Rezultatul depinde de care dintre cele două straturi este mai luminos. Culorile negre nu produc modificări.

Excludere

Excluderea este similară cu modul de amestecare a diferențelor, dar scade contrastul. Dacă amestecați cu alb, stratul de bază devine inversat. Cu toate acestea, culorile negre nu se schimbă.

Scădea

Acest mod va analiza toate canalele de culoare, apoi va elimina culorile stratului de amestec din stratul de bază.

Divide

Aceasta aruncă o privire asupra tuturor canalelor de culoare, apoi împarte stratul de amestec de stratul de bază.

Moduri de amestec compozit:

Această categorie funcționează pentru a modifica calitatea culorii. Utilizează o combinație de alb, împreună cu culori primare, cum ar fi roșu, verde, albastru (RGB) și cyan, magenta, galben și negru (CMYK) pentru a crea modul de amestecare.

Nuanţă

Nuanța funcționează forțând culorile din stratul de bază să fie recolorate cu nuanța stratului de amestec. Practic, menține toate culorile întunecate întunecate și toate culorile deschise luminoase, dar înlocuiește doar nuanța stratului de amestec. În exemplul nostru, puteți vedea că cele mai deschise culori din imaginea copacilor (minus albul) sunt transformate în nuanța albastră în stratul nostru de amestec de culori.

Saturare

Pentru saturație, rezultatele sunt similare cu nuanța, cu excepția faptului că saturația din imagini este afectată. Cea mai deschisă culoare și nuanță din stratul de bază rămân aceleași, în timp ce saturația este înlocuită cu culoarea amestecată.

Culoare

Culoarea funcționează la fel ca nuanța, cu excepția faptului că păstrează doar cele mai deschise culori ale straturilor de bază. Apoi adaugă nuanța și saturația stratului de amestec. În exemplul nostru, puteți vedea că culorile solide, tonurile mai deschise sunt înlocuite cu albastru. În mod similar, culorile mai deschise din al treilea exemplu sunt înlocuite cu culorile de gradient roșu și albastru ale stratului de amestec.

Luminozitate

Luminozitatea este opusul culorii. Reușește să mențină atât nuanța, cât și saturația în stratul foto de bază al exemplului nostru, înlocuind în același timp cele mai deschise culori (luminozitate) cu culorile stratului de amestec.

Alte moduri de amestecare

Pe lângă cele 27 de moduri de amestecare a straturilor enumerate, există câteva suplimentare disponibile în anumite situații sau cu anumite instrumente. De exemplu, În spate poate fi folosit pentru a edita sau picta în interiorul părții transparente a unui strat. Acesta va funcționa numai în straturi în care transparența blocării nu este selectată. Clear este disponibil numai atunci când utilizați instrumentele de formă, găleată de vopsea, pensulă, creion, precum și comenzile de umplere și de conturare. Este folosit pentru a edita sau picta fiecare pixel pentru a-l face transparent.

Cum să utilizați modurile de amestecare Photoshop

Când lucrați în Photoshop, modurile de amestecare pot fi localizate în două zone. Primul se află în panoul de straturi. Pentru a accesa modurile de amestecare, faceți clic pe meniul drop-down de sub Straturi .

De acolo aveți opțiuni de mod de amestecare pentru stratul 27 din care să alegeți.

Cele 8 moduri speciale de amestecare au o modalitate suplimentară de a fi accesate. În stilurile de straturi , puteți debifa caseta de selectare a stratului de formă de transparență. Acest lucru vă oferă un nivel suplimentar de capabilități de amestecare. Pentru a accesa aceasta, faceți clic pe opțiunea fx din partea de jos a panoului de straturi.

Apoi, alegeți opțiunile de amestecare din meniul drop-down.

În cele din urmă, debifați stratul de forme de transparență.

Crearea unui amestec simplu

Pentru a demonstra cum să le folosiți, vom oferi un exemplu de bază folosind Photoshop, astfel încât să puteți înțelege cum funcționează fiecare.

Pasul 1: Alegeți o imagine

Primul pas este să deschideți o fotografie ca strat de bază. Vom folosi fotografia pe care am folosit-o în celelalte exemple ale noastre. Asigurați-vă că acest strat este setat la normal .

Pasul 2: Creați un nou strat de culoare

Navigați la Strat > Strat de umplere nou > Culoare solidă pentru a crea un nou strat.

Denumiți stratul Blend Layer , atribuiți albastru ca mod și faceți clic pe ok .

Apoi, completați-l cu #8f42ec , apoi faceți clic pe ok pentru a crea stratul.

Pasul 3: Aplicați un mod de amestecare

Apoi, aplicați modul de amestecare a luminii pin la stratul de amestec pe care tocmai l-ați creat.

Pasul 4: Ajustați opacitatea

În cele din urmă, ajustați opacitatea stratului de amestec la 50%. Rezultatele ar trebui să arate acum că culoarea violet este mai dezactivată și are un aspect mai puțin puternic.

Dacă doriți un tutorial mai detaliat, consultați tutorialul nostru despre cum să utilizați modurile de amestecare pentru a combina imagini în Photoshop.

Moduri de amestec CSS pentru Web Design

Modurile de amestecare funcționează în general la fel în designul web (cu CSS) ca și cu editorii video și grafici. Acestea fiind spuse, va trebui să utilizați câteva reguli și coduri CSS pentru a le utiliza pe site-ul dvs. web. Există 2 proprietăți CSS principale care vă permit să adăugați moduri de amestecare în design web:

• modul de amestecare de fundal
• modul de amestecare

Să discutăm despre ce face fiecare și să oferim exemple pentru a putea înțelege mai bine ce fac.

Proprietate CSS în mod de amestecare de fundal

Background-blend-mode este o proprietate CSS folosită pentru a adăuga moduri de amestecare la mai multe fundaluri ale unui singur element HTML. În CSS, puteți adăuga un fundal unui element folosind proprietățile de fundal, imagine de fundal sau culoare de fundal. Dacă un element conține două sau mai multe imagini de fundal, gradienți liniari sau culori, puteți utiliza proprietatea background-blend-mode pentru a atribui un mod de amestecare acelor fundaluri.

De exemplu, aici este un element div cu trei clase CSS ("element", "backgrounds" și "with-blend-mode").

<div class="element backgrounds with-blend-mode"></div>

După cum sugerează numele claselor CSS, acesta este un element care va avea fundaluri cu un mod de amestecare. Folosind CSS, putem adăuga fundalurile noastre și modul de amestecare a fundalului prin țintirea acestor clase.

În exemplul CSS de mai jos, puteți vedea că clasa „fundaluri” adaugă trei fundaluri la element (o imagine de fundal, un gradient de fundal și o culoare de fundal. Clasa „with-blend-mode” aplică modul de amestecare Screen la trei fundaluri ale elementului.

.with-blend-mode {
  background-blend-mode: screen;
}

.backgrounds {
  background-image: url("/image.jpg"),
    linear-gradient(90deg, #ff0f0f 0%, #4a00e8 100%);
  background-color: darkblue;
}

.element {
  height: 400px;
  width: auto;
  max-width: 600px;
}



Acest lucru permite elementului să afișeze nu doar un fundal, ci o combinație a tuturor celor trei! Iată un înainte și după imaginea cu și fără modul de amestecare a fundalului:



Vizualizați CodePen

Proprietatea CSS Mix-Blend-Mode

Mix-blend-mode este o proprietate CSS folosită pentru a adăuga stilul modului de amestecare mai multor elemente, nu doar fundalurilor unui singur element, cum ar fi modul de amestecare de fundal. Poate amesteca un element cu elementul său părinte sau cu alte elemente frați care se suprapun.

De exemplu, mai jos avem un element div în interiorul unui element div părinte.

<div class="parent">
  <div class="element with-mix-blend"></div>
</div>

Folosind CSS, putem adăuga un gradient de fundal elementului părinte și o imagine de fundal elementului copil. Apoi vizam elementul copil folosind clasa „with-mix-blend” pentru a adăuga modul Screen mix-blend-mode.

.with-mix-blend {
  mix-blend-mode: screen;
}

.parent {
  background-image: linear-gradient(90deg, #ff0f0f 0%, #4a00e8 100%);
}

.element {
  background-image: url("/image.jpg");
}

Rezultatul este o amestecare a fundalurilor ambelor elemente pentru un efect unic!



Vizualizați CodePen

Moduri de amestec CSS folosind Divi (o soluție ușoară fără cod)

Dacă nu doriți să vă faceți timp pentru a codifica CSS pentru site-ul dvs. WordPress, dar doriți totuși să utilizați moduri de amestecare, atunci Divi este cea mai bună opțiune pentru dvs. Divi este cel mai puternic instrument de design de care veți avea nevoie vreodată într-un constructor de teme sau de pagini. În multe feluri, Divi este un constructor de site-uri web și un editor foto, toate împachetate într-unul singur. Folosind exemplul de mai sus, putem aplica aceleași efecte ale modului de amestecare fără a fi nevoie de vreo codificare.

Divi are 16 moduri de amestecare încorporate care vă permit să amestecați straturi de elemente web (culori, imagini de fundal, forme și imagini multiple) pentru a obține modele uimitoare. Puteți combina text în imagini, imagini de fundal în rânduri și secțiuni și multe altele. Aruncați o privire la câteva dintre tutorialele oferite pe blogul nostru pentru a vă face o idee mai bună despre cum puteți încorpora moduri de amestecare în design-urile dvs.

Instrumente de proiectare care folosesc moduri de amestecare

Există o varietate de instrumente de design puternice care vă permit să utilizați moduri de amestecare. Cele mai populare sunt cele de la Adobe, dar există altele pe care le-ați putea găsi utile (inclusiv unele pentru video și web design). Iată o listă cu câteva instrumente utile de proiectare a modului de amestecare la dispoziția dumneavoastră.

1. Photoshop: Ca un gigant de editare foto de lungă durată, Photoshop a pus practic modurile de amestecare pe hartă. După cum am menționat deja, există 27 de moduri de amestecare în Photoshop care permit o varietate de efecte la editarea fotografiilor.
2. Illustrator: Illustrator este una dintre cele mai populare soluții pentru design grafic. Există 15 moduri de amestecare disponibile în Illustrator pentru a aplica efecte la fișierele vectoriale și alte elemente de design.
3. Premiere Pro Premiere Pro este unul dintre cele mai populare programe de editare video de pe piață. Modurile de amestecare sunt disponibile în cronologia pentru a combina clipurile împreună pentru a crea efecte diferite. Similar cu Photoshop, Premiere Pro oferă 27 de moduri de amestecare.
4. After Effects: Opțiunile din After Effects sunt identice cu cele utilizate în Photoshop și Premiere Pro, cu o singură excepție, care este dansul dizolvat. Modurile sunt folosite pentru a amesteca straturi care conțin animații. De asemenea, aceste pluginuri After Effects vă pot duce videoclipurile la un nivel cu totul nou de creativitate.
5. Corel: Corel oferă mai multe programe care folosesc moduri de amestecare, inclusiv Paintshop Pro, Pinnacle Studio și Corel Draw. Sunt disponibile 18 moduri de amestecare.
6. Figma Există 16 opțiuni în Figma pentru amestecarea straturilor pentru a obține efecte diferite. Figma este un program bazat pe web folosit pentru proiectarea interfeței web și utilizator.
7. Divi: Ca temă WordPress de editare completă a site-ului, Divi are 16 moduri de amestecare incluse în Divi Builder și efecte de filtrare suplimentare care pot fi utilizate în orice element cu opțiuni de culoare și fundal.

Sfaturi pentru modul de amestecare și cele mai bune practici

Utilizarea modurilor de amestecare este o modalitate excelentă de a adăuga interes fotografiilor și desenelor tale. Acestea fiind spuse, există câteva lucruri pe care ar trebui să le luați în considerare atunci când le utilizați.

Ajustați umplerea și/sau opacitatea

Majoritatea modurilor de amestecare funcționează cel mai bine atunci când ajustați opacitatea stratului de amestecare. Cu toate acestea, există câteva care necesită în schimb ajustarea umplerii. După cum am menționat anterior, există un grup de moduri numit special 8. Acestea sunt arderea culorilor, arderea liniară, eschivarea culorii, eschivarea liniară (adăugați), lumină vie, lumină liniară, amestecare greu și diferență. Deși puteți regla opacitatea pentru 8 special, veți observa o diferență radicală atunci când reglați umplerea.

Înțelegeți tipurile de mod de amestecare

Când utilizați modurile de amestecare, cunoașteți categoriile. De exemplu, dacă editați o fotografie care este prea deschisă, veți dori să utilizați un mod din categoria întunecată. Folosirea înmulțirii pentru a întuneca fotografia va fi mai potrivită pentru această utilizare, decât întunecarea. Pe de altă parte, dacă aveți o imagine prea întunecată, utilizați un mod din categoria iluminare. Modurile precum suprapunerea pot adăuga prea multe tonuri luminoase, așa că este posibil să doriți să utilizați în schimb lumina pin, deoarece este mai subtilă. Ideea este că ar trebui să vă faceți timp pentru a experimenta cu fiecare mod pentru a obține mai multe cunoștințe despre ceea ce face fiecare.

Utilizați filtre cu moduri de amestecare pentru rezultate mai bune

Utilizați un filtru de trecere înaltă pentru a clarifica imaginile



Deși trecerea înaltă nu este un mod de amestecare, îl puteți combina cu modul de suprapunere pentru a clarifica imaginile. Începeți cu imaginea aleasă ca strat de fundal. Apoi, duplicați stratul. De acolo, selectați filtru > alt > trecere înaltă . Reglați glisorul pentru a alege claritatea dorită. În cele din urmă, setați stratul superior cu filtrul de trecere înaltă aplicat suprapunerii . Acesta este un mod rapid și ușor de a adăuga claritate fotografiilor care pot fi puțin neclare.

Utilizați filtrul Lens Flare ca punct focal



Un alt filtru grozav de utilizat este lens flare. Atunci când este combinat cu divide la o opacitate redusă, poate oferi un punct focal asupra imaginii dvs. Adăugați un strat peste partea de sus a stratului foto. Umple-l cu negru. Apoi navigați la filtru > randare > lens flare . Ajustați locația reflectării lentilei, apoi faceți clic pe Aplicare . Apoi, setați modul de amestecare al stratului lens flare pentru a diviza , apoi ajustați opacitatea la 50% .

Când să utilizați modurile de amestec CSS în locul imaginilor Photoshop în Web Design

Modurile de amestecare sunt utilizate cel mai frecvent în Photoshop pentru a proiecta imagini care sunt încărcate ulterior pe o pagină web. Modurile de combinare CSS funcționează folosind codul CSS pe care browserul dvs. îl folosește pentru a afișa stilurile folosind pixelii de pe monitor. Acest lucru vă permite să aplicați aceste modele oricărui element de pe pagină în moduri pe care nu le puteți face cu imaginile pre-proiectate în Photoshop. Iată câteva moduri de luat în considerare.

Pentru design text

Conținutul important al site-ului web (în special textul) ar trebui să fie întotdeauna citit de motoarele de căutare (pentru SEO). Modurile de amestecare CSS vă permit să adăugați stiluri de amestecare elementelor de text (cum ar fi titlurile) pentru a crea modele de text frumoase, cu o calitate mult mai bună.

Pentru efecte Hover

Modurile de amestecare CSS sunt, de asemenea, excelente pentru adăugarea de efecte interactive de trecere cu mouse-ul folosind modurile de amestecare. De exemplu, puteți adăuga un stil de amestec la imaginile de la trecerea cursorului pentru a îmbunătăți designul galeriei dvs. foto cu câteva rânduri de CSS.

Pentru eficiență și performanță

Modurile de amestec CSS facilitează schimbarea dinamică a designului elementelor cu o mică ajustare a codului. Acest lucru vă permite să schimbați designul site-ului dvs. web fără a fi nevoie să treceți prin problemele de a crea noi imagini în Photoshop. În plus, în multe cazuri, desenele generate prin CSS se vor încărca mai repede decât imaginile mari.

Concluzie

Modurile de amestecare sunt excelente pentru adăugarea de efecte speciale la imagini și design în editorii grafici și video, precum și în aplicațiile web. Cunoașterea modului în care funcționează fiecare este utilă pentru a explora posibilități noi și interesante de design. În plus, Photoshop nu este singurul instrument de design care le folosește. Când vine vorba de web, modurile de amestecare CSS vă permit să săriți peste Photoshop pentru a aplica modurile de amestecare direct pe site-ul dvs. Și, cu Divi, nici măcar nu trebuie să cunoașteți CSS pentru a crea modele uimitoare folosind moduri de amestecare. Sperăm că acest ghid vă va ajuta pe parcursul călătoriei dvs. de design, oriunde s-ar afla.

Ce instrument folosiți pentru a aplica efecte de amestecare modelelor dvs.? Anunțați-ne în secțiunea de comentarii de mai jos.

h2 {scroll-margin-top: 80px;}