Cum sa faci un favicon

Cum sa faci un favicon

Totul depinde de browser. Pentru Microsoft Explorer, este potrivit formatul pictogramei ICO. Am întâlnit deja acest format când am făcut cursorul. Pentru alte browsere de la Google Chrome la Apple Safari, puteți utiliza GIF sau PNG obișnuit. Favicon poate fi translucid. Pentru aceasta, trebuie să o salvați într-un PNG semi-transparent. și apoi convertite în format ICO. Puteți face acest lucru într-un program bun IcoFX. Cu toate acestea, pentru generarea Favicon există o mulțime de site-uri terțe și cele mai evidente dintre ele sunt www.favicon.ru

Cum pot fi sigur că va funcționa faviconul? Este necesar să se respecte 4 condiții.

În expresia HTML, se arată astfel:

Puteți crea mai multe pictograme pentru diferite browsere, de exemplu unul în format ICO. iar cealaltă în PNG și toate acestea prin eticheta de legătură. Browserele moderne se uită cel mai adesea pentru site-urile rădăcinilor unui fișier numit favicon. Cu toate acestea, pentru certitudine, nu se face rău pentru a specifica legături exacte.

Este ușor să creați un favicon. Vrei să faci același favicon ca Vkontakte sau Odnoklasnikov? Un favicon bun nu se poate face prin reducerea imaginilor mari în orice "generatoare" ale faviconilor, care sunt pe deplin pline pe Internet. Favicon este foarte mic. De fapt, suntem un fel de artă pixel. care are propriile caracteristici. Nu puteți scrie o scrisoare și reduceți-o doar la 16px.

Cum sa faci un favicon

Creați o dimensiune a fișierului de 16 x 16 pixeli. Vom crea un simplu favicon translucid cu o literă, cu puțină adâncime. Adâncimea va fi creată datorită umbră și gradient.

Cum sa faci un favicon

De ce în introducerea acestei lecții vedeți un favicon imens și lins. Pentru că am crescut-o pentru introducerea lecției. Cum a ieșit pentru mine îmbunătățirea calității imaginii de 16 pixeli. Foarte simplu, intotdeauna lucrez intr-un vector, daca este posibil sa o folosesc si daca are sens. Și vectorul transferă cu ușurință orice transformare și nu pierde în calitate.

Selectați Instrumentul rotunjit dreptunghi. În panoul cu setări, selectați modul Shape Layer. care va permite să atrageți un vector. În meniul derulant al casetei - Snap To Pixels. Acest lucru este necesar pentru ca circuitele vectoriale să fie atașate la pixeli și să nu se deseneze între ele.

Cum sa faci un favicon

Avem o suprafață favicon. și marginile translucide vor crea o netezime a rotunjirii. Acum este timpul să scapi de fundalul alb, nu este necesar. Opriți vizibilitatea acestuia. Sau faceți dublu clic pe strat, transformându-l într-un strat normal, apoi ștergeți-l.

Cum sa faci un favicon

Cum sa faci un favicon

Litera "H", care este descrisă pe site-ul web chronofag.ru de la Favicon, este prea simplă pentru a implica fonturi în acest caz, așa că am desenat-o cu instrumentul Rectangle. Dar să facem ceva mai complicat. Selectați instrumentul Tip și puneți orice literă. Pentru lecția noastră, scrisoarea fără runde este cea mai bună. Am ales fontul și am pus litera H.

Dar, pentru că nu încerc să măresc și să măresc dimensiunea scrisorii mele, fontul este în mod constant vag. Deși marginile sale ar putea fi extrem de clare, scrisoarea nu are rotunji și bucle. Conform unui alt și nu poate fi, deoarece Photoshop afișează o imprimare rasterizată, el pare să încerce să-l neted, asta este bine, dacă vorbim despre dimensiunea un pic mai mult, dar pentru un favicon 16 pixeli ar dori să aibă mai multă claritate.

Cum sa faci un favicon

Faceți asta. În panoul cu setări pentru fonturi, dezactivați modurile de rasterizare - nici una. Acum transformați fontul Editare> Transformare liberă Întindeți ușor. Excelent.

Cum sa faci un favicon

Dacă în cazul tău s-au dovedit prostii și nu se poate întâmpla în cazul modului de rasterizare, deoarece lipsa de anti-aliasing uneori denaturează fontul la dimensiuni mici, fă asta. Traduceți litera în curbe Layer> Type> Convent to Shape Layer Utilizați instrumentul Direct Selection.

Cum sa faci un favicon

Selectați acest instrument și mențineți SHIFT și selectați mai multe puncte vectoriale. Apoi utilizați săgețile de pe tastatură pentru a le muta în partea dorită pentru a scăpa de tranzițiile inutile și a alinia marginile.

Cum sa faci un favicon

Sper că ați prins semnificația lucrării. Bineînțeles, nu are nici un rost să cheltuiți atât de mult timp dacă scrisoarea dvs. este două bastoane și o cruce. Dar în cazul literelor "B" sau "D", această lucrare ar trebui făcută cu laturile sale egale. Suntem aproape de a crea un favicon.

Sfârșitul este aproape, este necesar să adăugați stiluri pentru scrisoarea desenată. Straturile panou selectați stratul cu litera și introduceți Layer> Layer Styles> Drop Shadow Am nevoie de o Opasity umbra de lumină până la 50% și muchii foarte ascuțite Distanța de 1, Spread 0, Dimensiune 2

Cum sa faci un favicon

Pentru a salva un favicon semi-transparent, deschideți Fișier> Salvare pentru Web Aparate În dialogul care apare, selectați PNG-24 și bifați Transparența. Acest lucru va face favicon semiquantitative. Rămâne să puneți pictograma pe site în modurile de mai sus sau să o convertiți în format ICO. Favicon a fost creat.

Cum sa faci un favicon

Articole similare