Transluciditatea înșelătoare pentru gif, notele dezvoltatorului

Din anumite motive, punerea în aplicare greșită a (nu întotdeauna atât de mult halouri albe vizibile), insera imagini GIF transparente pentru site-ul cu un fundal abstract (cu unele model fin destul de des pe site-urile întâlnesc aici, cum (uneori acest lucru se întâmplă și site-uri de studiouri web 😯) pe fundal sau doar un fel de umplere a culorilor, chiar și un gradient unul). Iată un exemplu de versiune greșită și corectă:

Transluciditatea înșelătoare pentru gif, notele dezvoltatorului

Transluciditatea înșelătoare pentru gif, notele dezvoltatorului

Problema apare din faptul că giful nu susține semi-transparența.

Prin urmare, dacă în același Photoshop pregăti imaginea dorită, care o separă de orice fundal (cum este, de obicei, se taie orice obiecte) și apoi salvați-l în gif și specificați setările gif`a sprijină transparență, de multe ori, un halou alb (dacă marginea obiect făcut inițial nu va fi netedă și nu va avea o zone semitransparente, halo nu va fi), deoarece clar există doar o singură zonă a imaginii, care a fost de 100% transparent în Photoshop, toate celelalte zone de substrat alb translucid este format în mod automat.

O opțiune, care este utilizat - este ușor să ia și să păstreze imaginea dorită cu întreaga piesă de fond sub formă de substrat, atunci acesta nu mai poate fi hife deloc, dar jpg (de exemplu, rezultatul este o imagine fără zone transparente și translucide) . Uneori este într-adevăr singura cale (de exemplu, în cazul în care obiectul este tăiat din mai multe nuante de culori, și nu este acceptabil ca toate culorile au fost limitate doar la 256 de culori). Cu această soluție, există două minusuri, în primul rând, de fișiere crește dimensiunea ca forțată conțin informații redundante în fundal, și în al doilea rând, există o mare probabilitate ca marginile imaginii nu vor fi unite cu fundalul site-ului.

Dar dacă aveți o imagine în modul unui tatuaj (sau un fel de grafică monocromă), este mai bine să utilizați metoda discutată mai jos. Această metodă este lipsită de dezavantajele descrise mai sus.

Exemplu de rezolvare a problemelor

Deci, avem o imagine de trandafir. care trebuie să fie pregătite astfel încât la salvarea în format GIF (cu transparență), aceasta nu conține informații redundante, cu excepția faptului că ceea ce va contribui la evitarea efectului haloului alb atunci când este plasat pe o imagine de fundal a site-ului.

Transluciditatea înșelătoare pentru gif, notele dezvoltatorului

Mă descurc din faptul că modelul de trandafir este pe un fundal alb (adică desenul nu conține zone transparente).

1.
Două desene ar trebui deschise în phoshop. Primul este trandafirul însuși, iar cel de-al doilea va trebui să fie creat de tine însuți. Se creează un nou fișier cu dimensiunile pânzei mai mari decât trandafirul. Încercați cu tărie în această etapă pentru a face dimensiunea potrivită nu are sens, va fi mai ușor atunci să se potrivească dimensiunile. Noul desen este umplut cu o textura, la fel ca si pe pagina sau cu o culoare monofonica, totul depinde de ce fundal va fi pe pagina.

2.
În cazul în care figura cu un trandafir sunt, orice pete gri străine, sau pur și simplu, el însuși de fundal nu este suficient de culoare albă, toate acestea pot fi îndepărtate cu ajutorul Image -> Adjustments -> Brightnes / Contrast ... (atât autoritățile de reglementare mutat experimental la dreapta, funcționează numai cu imagini pe asemănarea trandafirilor din exemplu, adică b / w). Dacă încă nu puteți scăpa de gunoi, acoperiți-l cu o pensulă albă. Ca rezultat, ar trebui să avem un trandafir pe fundal alb.

3.
Ia „Setări instrument Magic Wand» (Magic Wand Tool): Toleranta = 1, Antialias este oprit, contigue oprit.

Și faceți clic pe secțiunea albă a imaginii trandafirului, subliniind astfel tot albul.

4.
Apăsați meniul Select-> Inversă. Astfel, selecția este inversată, iar trandafirul va fi selectat și nu împrejurimile sale.

5.
Alegeți Move Tool și trageți secțiunea evidențiată cifra (de fapt, foarte floare cu halou mic alb), în desen cu un site de fundal.

Transluciditatea înșelătoare pentru gif, notele dezvoltatorului

După aceasta, puteți închide desenul cu un trandafir, pentru că nu mai avem nevoie de el.

Avem un desen format din două straturi. Stratul inferior este fundalul, stratul superior este trandafirul.

6.
Acum, stratul cu trandafir ar trebui să fie setat pe modul de amestecare multiplu.

Apoi halo albul dispare pe stratul cu trandafir, și va arăta deja exact cum va arăta pe site-ul.

7.
Faceți clic pe butonul din stânga al mouse-ului, țineți apăsată tasta Ctrl (pe tastatura), stratul cu un trandafir (în paleta Straturi trandafiri miniatura predosmotra), atunci ar trebui să obțineți un trandafir dedicat.

Acest lucru se poate face și în mod diferit. Pentru aceasta, în paleta de straturi trebuie selectat un strat cu trandafir. După ce ia instrumentul „Magic Wand» (Magic Wand Tool), cu aceleași setări pe care le-am folosit mai devreme (etapa 3) și faceți clic pe orice zonă transparentă a crescut. Dacă utilizați această metodă, nu este necesar să efectuați următorul pas (8), deoarece vom avea imediat o selecție în jurul trandafirului (spațiul gol).

8.
Inversați selecția selectând Select-> Inverse din meniu. După aceea, avem o zonă în afara trandafirului, nu și trandafirul în sine.

Transluciditatea înșelătoare pentru gif, notele dezvoltatorului

9.
Acum trebuie să eliminați piese de fundal inutile (cele care se încadrează în zona de selecție), astfel încât să apară o zonă transparentă în locul lor.

Dacă, pe de altă parte, ar trebui să blocheze stratul de fond (imaginile din paleta Straturi puteti vedea, etapa 6), acesta trebuie să fie transformat într-un strat obișnuit (în caz contrar, acest strat nu poate fi făcută transparent, în locul potrivit pentru noi). Acest lucru se face simplu - trebuie să faceți dublu clic pe acest strat, iar în dialogul care apare, faceți clic pe "Ok". Apoi blocarea va dispărea.

Un strat cu fundal trebuie selectat în paleta de straturi. Dacă totul este în regulă, apăsați Del pe tastatură. Și eliminați selecția apăsând combinația tastaturii Ctrl + D.

10.
Asta e tot. În general, totul este gata. Rămâne doar să ștergeți marginile goale inutile ale desenului cu instrumentul Crop (lăsând câteva pixeli din alocație).

11.
Acum rămâne să salvăm acest desen în gif. Este mai convenabil să faceți acest lucru prin meniul File-> Save For Web. Numărul de culori cu care veți salva desenul, în principiu, contează. Pentru că dacă utilizați fundal ca cel de aici în exemple, precum și numărul de culori, cu care va salva GIF-fișier este 64-256, acesta va fi dimensiunea fișierului prea mare, aproximativ de două ori mai mare decât s-ar fi . Și calitatea acestui lucru nu se va îmbunătăți. După cum arată practica, cea mai bună opțiune - este de 16 sau 32 de culori (cu poza b / w cu o culoare de fundal). Dar, cred, numărul de culori pe care le-ați dobândit deja prin experiență. Este necesar ca dimensiunea fișierului cât mai mic posibil și, în același timp, nu este un halou apare în jurul imaginii atunci când îl introduceți pe pagină. Nu uita, de asemenea, că, dacă imaginea nu constă în nuanțe de gri, dar, de asemenea, în culori diferite, poate fi bine în cerere și de a folosi mai multe culori decât 32, depinde de situație.

Iată rezultatul a ceea ce am obținut (adică această imagine poate fi deja plasată direct pe site):







Trimiteți-le prietenilor: