Astăzi vom vorbi despre cum să creați corect o pictogramă pentru proiectul dvs. Mai jos sunt sfaturi utile despre designul pictogramelor, precum și despre serviciile pentru crearea acestora.

Analiza Asociației

Înainte de a crea o pictogramă pentru proiectul dvs., trebuie să vă definiți cuvintele cheie și apoi să încercați să găsiți reprezentarea sau metafora perfectă pentru ele. Va trebui să căutați imagini și simboluri care au o legătură directă cu cel dorit cuvânt cheie. În acest fel, puteți alege imaginile potrivite pentru pictogramele dvs., care vor fi intuitive pentru utilizator.

Cercetarea concurenților

Crearea unui design de pictogramă pentru aplicație mobilă, încercați să nu vă repetați sau să copiați designul altor pictograme. De ce este necesar acest lucru? Imaginează-ți că cauți un manager de activități. Uită-te la pictogramele aplicațiilor de mai jos și întreabă-te ce manager ai alege să instalezi pe smartphone-ul tău?

Pictograma Wunderlist (prima) se compară favorabil cu alte pictograme de aplicație. Cel mai probabil, utilizatorul va descărca Wunderlist și astfel aplicația va primi mai multe instalări.

Pe de altă parte, analiza va ajuta la determinarea ideii principale pe care concurenții o folosesc în pictogramele lor pentru a arăta funcția principală a aplicației.

Scopul icoanei

Când proiectați o pictogramă, este important să luați în considerare modul în care va fi utilizată și care sunt funcțiile acesteia.

De exemplu, pictograma unei aplicații mobile ar trebui să servească drept funcție de identificare și să o distingă de alte aplicații de pe smartphone. Acest lucru se aplică atât listei de programe aflate deja pe smartphone, cât și din magazinul de aplicații ( App Store, Google Play).

De asemenea, trebuie să înțelegeți că, deși ne concentrăm doar pe componenta de marketing a pictogramei, nu trebuie să uităm de scenariile în care aplicația va începe să fie utilizată. Este mai logic să se concentreze pictograma nu pe o singură descărcare, ci pe utilizarea zilnică a produsului de către un utilizator obișnuit.

Unicitate și recunoaștere

Când vă promovați marca, ar trebui să depuneți toate eforturile pentru a crește recunoașterea nu numai a logo-ului, ci și a icoanei. Pentru a face acest lucru, trebuie să fie unic și în același timp asociat în mod clar cu proiectul dvs., precum și să puteți distinge un Mercedes de alte mărci de mașini prin ecuson sau să găsiți un baton de ciocolată Nestle pe tejgheaua supermarketului.

Mai puține detalii

Cu cât pictograma este mai concisă, cu atât este mai ușor de reținut și de recunoscut în orice caz. Mulți designeri se străduiesc să obțină aspectul cel mai plăcut din punct de vedere estetic al unei pictograme, adăugând un număr mare de detalii care nu servesc nicio altă funcție decât decorarea și înfundând concomitent câmpul de informații al pictogramei. Aceasta nu este o fotografie, nu este nevoie de detalii meticuloase. În plus, într-o dimensiune mică, detaliile mici se îmbină pur și simplu într-o masă fără formă.

A doua pictogramă a aplicației arată mai bine datorită simplității și minimalismului.

Prioritizează dimensiunea

Există două abordări pentru a crea o pictogramă.

În primul rând: creați-l într-o dimensiune mare cu detalii maxime și, pe baza acestuia, elaborează opțiuni de dimensiune mai mică și un aspect mai schematic. Al doilea este opusul celui dintâi: mai întâi, se creează o pictogramă cu dimensiunea cea mai frecvent utilizată, apoi se elaborează alte opțiuni prin adăugarea sau scăderea detaliilor. Ce modalitate de a alege? Decideți singur, ambele opțiuni funcționează.

Aveți nevoie de mai multe pictograme? Creează un set!

Dacă proiectul dvs. necesită mai multe pictograme, creați-le pe toate simultan stil uniform. Ele pot avea aceeași culoare, grosimea conturului, detalii individuale și multe altele, dar conținutul pictogramelor poate diferi. Astfel iti poti asigura un aspect armonios si uniform aspect interfață.

Nu-ți pierde spațiul

Pictogramele pot fi diferite: late și înguste, înalte și joase. Toți au o recomandare în comun: nu regreta. spatiu liberși nu încercați să umpleți întreaga zonă disponibilă cu imagini sau inscripții. Lăsați pictograma să „respire”, lăsați puțin spațiu în jurul compoziției finite atunci când o plasați în interfață sau oriunde altundeva. În același timp, nu există o indicație clară a dimensiunii indentării în pixeli pentru astfel de cazuri, doar ghidați-vă de propria percepție vizuală.

Diferite pictograme pentru diferite platforme

Dacă trebuie să creați o pictogramă pentru diferite platforme, puteți începe cu un design și pur și simplu faceți ajustări stilistice minore pentru a ajunge la mai multe pictograme care sunt diferite, arătând în același timp rudenia lor.

Culoarea este foarte importantă

Alegerea culorii potrivite determină în mare măsură percepția pictogramei tale. Încercați să nu utilizați mai mult de două culori contrastante. Apropo, Google a stabilit restricții condiționate și chiar a specificat seturi de culori compatibile în Material Design. Folosiți-le în designul dvs.

Fă fără text

O pictogramă eficientă nu necesită cuvinte pentru a-și transmite conținutul. Lăsați text pentru site-uri web sau bannere publicitare, iar când creați o pictogramă, încercați să faceți fără ea. De ce este așa? Pentru că atunci când dimensiunea pictogramei este redusă, textul va deveni ilizibil și va arăta ca o pată obișnuită de culoare.

Căutați un echilibru între originalitate și ușurință de percepție

După cum puteți vedea în orice magazin de aplicații, pictogramele vin într-o mare varietate. Experimentele sunt bune, forma originală atrage întotdeauna atenția. Dar nu uitați de memorabilitate: cu cât forma icoanei este mai simplă, cu atât este mai ușor de reținut. O ilustrare bună în acest caz o reprezintă indicatoarele rutiere - acestea sunt formulare simple care sunt ușor de citit și de reținut, chiar dacă șoferul se deplasează cu o viteză decentă.

Pentru aplicația dvs., trebuie să veniți cu ceva similar - atât original, cât și simplu ca formă. Trebuie luat în considerare faptul că pe ecrane dispozitive mobile pictogramele sunt afișate diferit - în dimensiuni mai mari sau mai mici. Prin urmare, trebuie să vă asigurați că opțiunea pe care o creați arată întotdeauna atractivă.

Nu uitați de fundal

În magazinul de aplicații, pictogramele sunt de obicei afișate pe un fundal deschis - alb sau gri. Dar tapetul dispozitivului pe care utilizatorul vă descarcă aplicația poate fi de orice culoare. Prin urmare, nu uitați să verificați cât de atractivă și vizibilă este pictograma dvs. pe un anumit fundal.

Elementele interfeței aplicației nu au loc pe pictogramă

Nu plasați elemente de interfață a aplicației pe pictograma acesteia. Acest lucru derutează utilizatorul și este considerat proaste maniere.

Pictograma ar trebui să fie informativă

O pictogramă eficientă comunică funcția aplicației prin aspectul ei. În acest fel, utilizatorul va putea înțelege pentru ce este produsul tău înainte de a se uita la descriere. De exemplu, pentru pictogramele jucătorilor folosesc imagini cu note, instrumente sau vizualizatoare, pentru camere sau editori grafici - un obiectiv de cameră, iar pentru mesageri precum Viber - bule de mesaje simbolice.

Pe baza pictogramei, utilizatorul trage o concluzie despre ceea ce îl așteaptă în interiorul aplicației. Prin urmare, pictograma trebuie să fie clară, concisă, cu un minim de obiecte, imaginea ar trebui să fie lizibilă dintr-o privire rapidă.

Ksenia Mayevskaya, dezvoltator al aplicației Remember-Remind.

Acum că am învățat sfaturi despre cum să creați o pictogramă eficientă, vă prezentăm atenției servicii utile să-l creeze.

Servicii și resurse utile pentru crearea unei pictograme

vorbitor de limba rusă serviciu online pentru a crea atât pictograme individuale, cât și seturi întregi. Selecție mare de pictograme și opțiuni pentru editarea acestora.

Pictograme de font pentru utilizare cu Twitter Bootstrap

Aici puteți găsi texturi fără sudură și palete gata făcute. Această resursă are și un forum unde are loc comunicarea. Servicii grozave pentru a selecta culoarea pictogramei dvs.

Serviciu online profesional care vă permite să generați schema de culoriîn conformitate cu regulile de culoare de pe roata culorilor.

Crearea automată de degrade.

O resursă care este ideală pentru cei care nu pot decide asupra culorilor și fonturilor pentru proiectul dvs. Interesant este că paleta și fonturile pot fi selectate în funcție de zona de afaceri.

management,dedicat Material Design pentru Android

Ghiduri despre iOS Human Interface de la Apple.

Instrucțiuni pas cu pas pentru crearea unei pictograme

Puteți crea o pictogramă pentru un site web sau o aplicație folosind programe de grafică sau servicii online.

Prima metodă este potrivită pentru designeri experimentați pentru o muncă minuțioasă. Instrumentele online sunt potrivite pentru creație rapidă sau cantitate mare pictograme, de exemplu, pentru un site web, serviciu. Instrumentele online sunt mai simple și mai intuitive, așa că sunt ideale pentru începători.

Unul dintre serviciile online care vă permite să creați rapid modern icoane este IconsFlow.

Câteva cuvinte despre capacitățile serviciului:

• Abilitatea de a exporta pictograme în forme SVG (vector), PNG și ICO;
• Funcționalitate excelentă de editare;
• Abilitatea de a crea pachete de pictograme în același stil;
• Opțiuni gratuite.

Acum să trecem la procesul de creare a unei pictograme.

Pentru a crea o pictogramă sau un set întreg, trebuie să găsiți mai întâi pictograma dorită sau mai multe simultan în editorul online.

Apoi, folosind instrumente de editare, îl puteți personaliza, de exemplu, puteți seta culoarea dorită a pictogramei, fundal, adăugați o altă pictogramă, formă, text sau adăugați un element nou.

După ce pictograma (sau pictogramele) au fost editate, puteți lucra la fundalul, scara, umbrele acesteia și puteți adăuga un gradient.

Unul dintre avantajele serviciului este că, dacă creați un set întreg de pictograme, puteți face toate editările de mai sus în loturi.

Adică, făcând clic într-un singur loc, modificați designul tuturor pictogramelor simultan: umbre, dimensiune, fundal etc. Foarte convenabil dacă trebuie să creați 3-5 sau mai multe pictograme.

După crearea pictogramelor, serviciul vă va cere să creați un cont de unde să puteți descărca gratuit pictogramele sau să vă înscrieți pentru un plan plătit.

Asta e tot.

După cum puteți vedea, chiar și crearea unui element atât de mic ca o icoană ar trebui abordată cu toată responsabilitatea. Un design bun de pictogramă atrage atenția utilizatorilor, în timp ce un design rău de pictogramă le poate dezactiva.

Mulți oameni nu iau în serios editorii de pictograme online, dar, de fapt, astfel de instrumente facilitează foarte mult fluxul de lucru. Doar câteva clicuri vă pot economisi ore de căutare, navigare sau autodezvoltare. În plus, nu are rost să folosiți servicii cu drepturi depline atunci când există servicii speciale cu funcții personalizate pentru aceste sarcini specifice.

Site-urile editorului de pictograme ca acestea sunt foarte eficiente. Acestea vă permit:

• creați ușor și rapid materiale noi;
• oferiți dezvoltărilor existente un aspect finit;
• salvați rezultatul în diferite formate(SVG, ICO și PNG);
• creați pictograme pentru .

În acest articol, am selectat cele mai bune cinci editori de pictograme gratuite online și, pentru comparație, am încercat să creăm un set în fiecare dintre ele.

IconsFlow

IconsFlow.com - pictograme vectoriale + editor care vă permite să creați seturi personalizate și să le exportați de bună calitate(SVG, ICO și PNG). Principalul avantaj al serviciului este prezența a doi editori:

• cea principală, în care sunt selectate paleta, stilul, efectele;
• editor de formulare, unde puteți modifica forma curentă sau puteți desena una nouă.

Dacă ați creat deja pictograme în Illustrator, descărcați fișierele SVG și experimentați medii diferite. IconsFlow are anumite limitări atunci când utilizare gratuită, așa că asigurați-vă că vă familiarizați cu ele înainte de a începe. Există lecții și o secțiune de ajutor pentru utilizatorii începători și, de asemenea, este posibil să lucrați în editorul de pictograme în limba rusă.

Vedere a editorului de vectori IconsFlow:

Exemple de lucru:

FlatIcons

Cu FlatIcons.net vă puteți crea propria pictogramă plată (stil plat) pe baza șabloane gata făcute. Setați dimensiunile, alegeți un model și fundalul principal (cercuri, inele, dreptunghiuri), schimbați culoarea. Acest editor de pictograme este gratuit, dar are două dezavantaje:

• În primul rând, puteți descărca fișiere numai în format PNG.
• În al doilea rând, va trebui să creați fiecare obiect separat, deoarece... Este imposibil să dezvoltați un întreg set deodată.

În ciuda faptului că vârful popularității a trecut deja, mulți oameni le folosesc în design-ul lor. De exemplu, dezvoltatorii vă permit să descărcați un set gratuit de pictograme sociale plate. Rezultatul lucrului în editorul FlatIcons:

Launcher Icon Generator

Proiectul Launcher Icon Generator este gratuit și credem că este mai potrivit pentru utilizatorii avansați. Acest editor de pictograme online vă permite să încărcați imagini/cliparturi și să adăugați text. Puteți descărca câte o pictogramă odată în 5 dimensiuni (48 x 48; 72 x 72; 96 x 96; 144 x 144; 192 x 192).

Clipart de bază este un set de grafice în stil Material Design de la GitHub. Serviciul conține setări precum: indentări, formă, culoare de fundal sau transparență, scalare + efecte suplimentare. Rezultat:

Android Material Icon Generator este un alt instrument pentru crearea pictogramelor plate. Punctul culminant al serviciului este cu siguranță efectul sub forma unei umbre lungi. Dacă aveți nevoie de soluții similare, acest editor de pictograme va fi o opțiune ideală.

Începeți prin a alege o imagine din galerie, apoi determinați culoarea, forma fundal(cerc sau pătrat), lungimea umbrei, saturație, atenuare - și pictograma dvs. este gata. Totul este extrem de simplu. Site-ul este complet gratuit pentru uz personal.

După descărcare, veți găsi 6 PNG-uri în fișierul de arhivă dimensiuni diferiteși un fișier vectorial SVG. Pictograma SVG va fi neclară în Illustrator, dar, din fericire, arată bine în browser. Rezultatul final este ceva de genul:

Site-ul Simunity este un generator HTML5 unde puteți crea o pictogramă și apoi copiați codul pentru a-l afișa în proiectele dvs. web. Pictogramele din Font Awesome sunt folosite ca materiale sursă, pentru care sunt selectați diferiți parametri: culoare, cadru, dimensiune și stil de umbre.

Acest serviciu este util dacă trebuie să creați rapid pictograme simple și originale pentru site-ul dvs. web. Rezultatul utilizării Simunity:

Total. Discutat mai sus editori online pictogramele sunt instrumente excelente pentru optimizarea muncii designerilor. Nu are rost să descărcați programe când totul se poate face ușor și rapid online. Din această selecție, poate, se poate distinge IconsFlow. Conține maximul număr mare caracteristici: galerie de pictograme, descărcare SVG, cod încorporat, previzualizare, creați-vă propriile șabloane, exportați PNG, ICO și SVG, adaptați dimensiunea, stilurile de modă și editorul de vectori încorporat. Pe langa asta e singurul editor gratuit icoane în rusă, dacă acest lucru este important pentru dvs.

Dacă cunoașteți alte servicii similare, trimiteți opțiuni în comentarii.

Favicon este o pictogramă mică care apare lângă numele site-ului în fereastra browserului sau în rezultatele motorului de căutare. Nu are nicio funcție pentru SEO, dar utilizarea lui vă permite să creșteți recunoașterea site-ului și, ca urmare, indicatorul CTR. De asemenea, puteți crea faviconuri pentru retină.

Ce dimensiune ar trebui să aibă un favicon?

De obicei, favicon-urile au dimensiuni de 16x16px sau 32x32px. În ce format voi primi favicon-ul? După ce faci un favicon, vei primi un fișier favicon.ico pentru site, adică un fișier cu extensia *.ico. Acesta este ceea ce va trebui folosit în viitor.

Cum se creează o favicon online?

Utilizare

 ...
 
 
 ...

generator de favicon

online pe site-ul nostru. Puteți nu numai să creați un favicon dintr-o imagine, ci și să utilizați editorul încorporat care vă permite să creați orice pictogramă pentru site.

Cum să plasați o favicon pe un site web

Trebuie să încărcați favicon-ul în directorul rădăcină al site-ului pentru a obține o adresă precum http://sitename.ru/favicon.ico. Aceasta este calea către imagine. Apoi trebuie să puneți codul în etichetă. Ar trebui să arate așa:

De ce să specificați calea către favicon?

Unele site-uri folosesc diferite favicons pentru a ajuta utilizatorii să navigheze mai bine în secțiunile de resurse, așa că este necesar să se indice calea. Dacă utilizați o singură favicon pentru întregul site, nu trebuie să specificați calea către acesta.

Favicon-ul va fi afișat în rezultatele căutării?

Google nu afișează favicon-uri. Yandex are o așa-numită indexare favicon, acest proces durează de la o săptămână la o lună.

Dacă teatrul începe cu un cuier, atunci orice site care se respectă începe cu o pictogramă. Glume deoparte, uneori resursa în sine este judecată după prezența și calitatea pictogramei unui site. Da, iar afișarea pictogramei în rezultatele interogării de căutare va ajuta la distingerea site-ului de restul.

Puteți crea o favicon pentru un site web folosind orice editor grafic. Dacă ai deja poza terminata(de exemplu, un logo al companiei), trebuie doar să îl pregătiți și să îl micșorați. Dacă trebuie să creați un desen „de la zero”, serviciul „favicon” sugerează utilizarea unui desen elementar, dar destul de program convenabil desenând icoane.

Deci, pictograma este încărcată sau desenată. Pentru a obține imaginea finală, faceți clic pe butonul „Descărcați favicon” din colțul din dreapta jos al paginii. Aceasta va încărca fișierul favicon.ico.

Favicon și Photoshop

Puteți crea fișierul pe care îl căutați folosind doar Photoshop. După ce ați selectat sau desenat anterior imaginea dorită, faceți clic pe „Salvare ca” și selectați .ico din lista de formate pentru salvare.

Se poate întâmpla ca versiunea programului de procesare a imaginii să nu accepte acest format. În acest caz, ar trebui să căutați și să descărcați pluginul în format ico. Trebuie să fie despachetat în folderul Plug-InsFileFormats. După acești pași simpli, capacitatea de a salva în această extensie va fi disponibilă.

Un mic sfat. Aproape toate browserele standardizează pictogramele site-ului web la o dimensiune de 16 pe 16 pixeli. Luând în considerare acest lucru, nu este nevoie să creați pânze extrem de artistice - pur și simplu nu vor fi vizibile.

Formatul ico este cel mai des folosit, deoarece este acceptat de toate browserele populare. Puteți salva imagini în altele formate grafice, dar este important să rețineți că unele browsere nu vor afișa o astfel de pictogramă.

Instalarea unei pictograme

Am primit prețuita favicon. Ar trebui să vă gândiți cum să puneți o pictogramă pe site. Pentru a face acest lucru, trebuie să încărcați fișierul imagine în directorul rădăcină al site-ului (denumit de obicei public_html).

Dar asta nu este tot. Pentru a afișa pictograma trebuie să introduceți următorul cod html:

În coloana „tip”, este important să indicați corect tipul de imagine. Adică, dacă se folosește o imagine GIF, codul va arăta astfel:

Acest cod este instalat oriunde între etichete Şi fișierul paginii principale.

Ne-am dat seama cum să instalăm o pictogramă pe un site web. Puteți verifica dacă instalarea este corectă prin simpla introducere a adresei paginii dvs. în browser. Dacă în stânga adresei este afișată o favicon, totul este făcut corect.

Trebuie remarcat faptul că pictograma nu va apărea imediat în rezultatele motorului de căutare, ci numai după actualizarea memoriei cache. Acest proces poate dura de la o săptămână la o lună sau chiar mai mult.

Înlocuirea pictogramei

Dacă există deja un favicon pe site, dar proprietarul resursei nu este mulțumit de acesta, trebuie să vă dați seama cum să schimbați pictograma site-ului. De fapt, nu este nimic complicat în acest sens - schema de înlocuire este identică cu adăugarea unei pictograme pe site. Adică, mai întâi o imagine este desenată și salvată într-un format predeterminat. Imaginea rezultată este încărcată în folderul rădăcină al site-ului, codul html este schimbat sau rescris (dacă este necesar). Dacă totul este făcut corect, browserul va afișa pictogramă nouă imediat după reîmprospătarea paginii.

Astfel, pentru a găsi răspunsul la întrebarea cum să schimbați pictograma site-ului, ar trebui să citiți din nou acest material. 🙂

Bună ziua! Ai o favicon pe site-ul tău? Acesta este un element important al site-ului, acesta va fi afișat în rezultatele căutării! Citiți articolul despre ce este și cum să îl instalați în câteva minute.

Un favicon este o pictogramă pentru un site web, un atribut integral și individualitatea resursei tale. Cu ajutorul faviсon, cititorul proiectului dvs. online îl poate identifica și găsi cu ușurință în "bara de marcaje" în browserul dvs. sau în unele motoarele de căutare, de exemplu, Yandex.

am pe în acest moment favicon arată astfel:

Acum cred că înțelegi ce este asta" gizmo„ — favicon. Să ne dăm seama cum să o facem.

Cum să faci un favicon

În general, favicon-ul ar trebui să aibă dimensiunea de 16x16. Puteți realiza singur imaginea pentru pictogramă folosind un grafic Editor Photoshop, sau găsiți o imagine pe Internet și reduceți-o la dimensiunea faviconului (16x16 în acest caz). Singura problemă este că Photoshop și multe altele editori grafici nu salvați imagini în format ICO, și avem nevoie exact de acest format!

Dar după cum se spune: „Cine caută va găsi mereu" . Și am găsit o soluție - acesta este un serviciu online care convertește formatul imaginii tale (favicon), de obicei un format PNG sau JPG, în formatul ICO. Acesta este un serviciu image.online-convert.com.

Pentru a converti formatul de imagine în formatul de pictogramă ICO, trebuie să faceți clic pe butonul " Recenzie" , selectați o imagine, setați dimensiunea pixelilor la 16×16 și faceți clic pe butonul "Convertiți fișierul" .

După ce ați făcut cele de mai sus, puteți descărca fișierul pe computer în format ICO.

Dacă nu doriți să vă deranjați să creați un favicon, îl puteți descărca din diverse servicii de pe Internet, deja în format ICO. De exemplu, serviciul pictogramasearch.ru. Aici puteți găsi favicon-ul, pentru a face acest lucru trebuie să introduceți „ Căutare" un cuvânt care poartă semnificația favicon-ului tău. De exemplu, " Bani„—apoi vor fi afișate toate pictogramele care corespund semnificației.

Cred că ne-am dat seama de asta. Acum trebuie să încărcăm favicon-ul deja descărcat într-o resursă de internet, pentru aceasta puteți folosi programe Comandant total sau , și poate fi descărcat și prin manager de fișiere gazduirea ta.

Acest fișier poate fi găsit la: wp-content/themes/folder cu tema pe care o utilizați .

Apoi, când deschideți fișierul header.php, după etichetă va trebui să introduceți codul:

Salvați modificările. Favicon-ul este gata!

Ei bine, acum cred că puteți crea și instala cu ușurință o favicon. Vă doresc succes, fiți mai individuali)!

P.S.

Salutări, Alexander Sergienko