Pictograme pentru uz comercial. resurse cu fonturi gratuite
Pictogramele PSD sunt un element indispensabil al oricărui design UI, nu inferioare ca importanță chiar și fonturilor, dar, în practică, rareori își dezvoltă cineva propriile pictograme pentru fiecare proiect web. Pe de altă parte, găsirea pictogramelor potrivite ca calitate și design necesită, de asemenea, mult timp, dar astăzi am decis să vă ajutăm și v-am pregătit o selecție de seturi de pictograme gratuite pentru toate ocaziile.
01.Icoane8
Icons8 - un set de 20 de mii de icoane plate în orice format, dimensiune și culoare! Categorii precum afaceri, îmbrăcăminte, alimente și multe altele sunt prezentate aici. Icons8 poate fi descărcat ca aplicație pentru Mac sau ca arhivă ZIP.
02.Freepik
O colecție vibrantă de pictograme vectoriale din resursa specializată Freepik este doar una dintre multele prezentate. Este ideal pentru afaceri și proiecte independente. În plus, puteți descărca pictograme PSD în formatele .AI, .EPS și .SVG.
03.Iconfinder
Proiectat în alb-negru, acest set conține o combinație de pictograme vectoriale funcționale și emoționale clare. Pe lângă icoanele standard, acest set conține icoane sub formă de inimi și ochi, care vă vor permite să adăugați o culoare emoțională propriilor proiecte.
04. 195 icoane PSD steag plat
Un set excelent de pictograme PSD pentru un site web care poate fi folosit atunci când dezvoltați un site internațional, un magazin online sau un blog de călătorie. Acest set include 195 de pictograme gratuite pentru colțuri rotunjite.
05. Set de pictograme Metro UI
Dacă sunteți fan Windows 8, atunci veți dori să verificați acest pachet de pictograme gratuit. Include 700 de pictograme bine concepute care pot fi folosite liber în orice tip de proiect.
06. Icoane UI moderne
Un alt set de pictograme gratuite care pot fi folosite la crearea unei interfețe de utilizator pentru software Windows sau Android/iOS. Descărcând acest set, veți primi 1000 de pictograme plate, realizate manual, inclusiv pictograme chiar și pentru cortina aplicației din Windows Phone.
07. Pictograme perfecte de 350 de pixeli
Un set incredibil de 350 de pictograme perfect clare pentru aplicații sau site-uri web. Mai mult, acestea pot fi modificate în dimensiune fără pierderea calității.
08. 80 de mini icoane
80 de pictograme miniaturale perfect clare care pot fi descărcate atât în format PSD, cât și ca font iconic. Aceste pictograme sociale PSD îngrijite și sofisticate sunt perfecte pentru orice tip de proiect.
09. Grafică vectorială pictogramă web simplă și practică
O mulțime de pictograme utile care pot fi folosite în proiecte personale și comerciale.
10. Pictograme plate gratuite
Un set de pictograme realizate într-un stil plat, inclusiv un calendar, e-mail, ceas, hărți și multe altele.
11. Pictograme mono
Un set care include 108 icoane monocrome unice realizate într-un stil minimalist. Toate sunt disponibile în format PNG la o dimensiune de 32 x 32.
12. Pictograme Metrize
O colecție gratuită de modele în stil Metro pe care le puteți folosi în propriile aplicații și proiecte web. Pictogramele Social Media PSD sunt gratuite atât pentru uz personal, cât și pentru uz comercial. Arhiva conține nu numai formatele PSD, SVG, ESP și AI, ci și fonturi web.
13. Pictograme din bara de file iOS 7
Un set elegant de pictograme inspirat de iOS 7 pe care le poți folosi în propriile aplicații. Puteți descărca pictograme în următoarele formate: PSD, AI și ESP.
14. Set de pictograme Chunky Pika
Pictograme în stil Pika create de agenția Dutch Icon din Danemarca. Acest set include 42 de pictograme perfect clare.
15.Iconic
Un alt set de pictograme simple, dar atractive, ideale pentru modele minimaliste. Iconic este un set open source care poate fi descărcat în PNG, SVG, SWC și în alte formate, permițându-vă să le adaptați la propriile modele.
16. 44 de nuanțe de icoane gratuite
Set de 44 de icoane. Conține pictograme PSD pentru forum, care vă vor permite să le editați și să le adaptați cu ușurință la propriile proiecte.
17. Set de pictograme de simbol
Tokenul include 128 de pictograme unice, disponibile în format ICO cu dimensiunile 16 pe 16 pixeli, 32 pe 32 pixeli și 256 pe 256 pixeli și în format PNG cu dimensiunile 128 pe 128 pixeli. Fiecare pictogramă este prezentată în versiuni întunecate și deschise și este completată de un fișier PSD.
18. Pictograme plate (PSD)
Pictograme colorate într-un stil plat care pot fi descărcate în format PSD și editate pentru a se potrivi propriilor nevoi.
19. Set de pictograme 32px gratuit
Un set în care vei găsi o pictogramă PSD pentru orice scop: Skype, Facebook, Twitter, RSS, ceașcă de cafea, „like” și multe altele.
20. 48 de icoane plate de designer
Daca esti fan al minimalismului, atunci cu siguranta iti va placea acest set. Este format din 48 de pictograme gratuite care reflectă sarcinile de la birou, aspectele sociale și călătoriile. Toate sunt în formate AI și PNG și pot fi scalate fără a pierde calitatea.
21. Set de pictograme Plex
Setul include peste 100 de pictograme, inclusiv calendare, antivirus, ceasuri, e-mail, aplicații Microsoft Office, rețele sociale și multe altele.
22.Vector mini gratuit
Un set de peste 1000 de icoane PSD concepute de echipa Icojam. Toate sunt prezentate și în format PNG. Acestea sunt ideale pentru a fi utilizate atunci când dezvoltați un site web nou, deoarece sunt libere pentru a fi utilizate atât pentru proiecte personale, cât și pentru cele comerciale.
23. Eldorado mini gratuit
O altă colecție de mini-icoane de la Icojam, care prezintă peste 1200 de pictograme într-o dimensiune de 40 pe 40 de pixeli.
Deși schimbările în tendințele de design UI din acest an nu au fost la fel de dramatice precum am văzut în anii precedenți, ele au devenit în mod clar mai rafinate, mai specializate, îmbrățișând pe deplin și combinând toate cele mai bune stiluri din pictogramele populare anterior.
Poate că anul acesta nu a fost un an deosebit de fructuos pentru designul icoanelor, dar, cu toate acestea, la orizont au apărut câteva seturi interesante care merită atenția ta. În această recenzie, propun spre luare în considerare cele mai bune 50 de colecții de icoane gratuite (numai după părerea mea) care au apărut în domeniul public în 2017. Toate seturile sunt absolut gratuite și disponibile pentru descărcare fără restricții. Sub fiecare imagine există link-uri către resurse, făcând clic pe care vă puteți familiariza cu setul de pictograme care vă place în detaliu și, dacă doriți, să îl descărcați.
Pictogramele de contur sau liniare sunt foarte populare în lumea dezvoltării web, deoarece se caracterizează prin forme deosebit de simple și minimalism, fără a sacrifica conținutul informațional. În plus, în cea mai mare parte, pictogramele prezentate pot fi folosite nu numai pentru site-uri web, ci sunt grozave și pentru aplicațiile de pe platformele Android și iOS.
O colecție cu adevărat uriașă de pictograme de înaltă calitate pentru toate ocaziile. Până în prezent, există aproximativ 60.000 de pictograme în orice format, dimensiune și culoare. Biblioteca este actualizată și completată zilnic, de la 3 la 20 de pictograme pe zi.
Cantitate: 60 000 +
Formate: SVG, AI, EPS, PNG, PDF, Fonturi
Pachetul include 1800 de pictograme pe fundal alb și negru în următoarele formate: .schiță .psd .ai .svg .epsȘi .png.
Un mic set de pictograme liniare de înaltă calitate în format .ai
Pachet gratuit de 70 de pictograme vectoriale în formate .schiță .ai
Pictograme vectoriale în formate AI, EPSȘi SVG
Un set bun de 90 de pictograme de contur gratuite, precum și pictograme cu umplere solidă de fundal, pentru Sketch și Illustrator.
Dimensiunea octetilor
Un set excelent de pictograme gratuite în format SVG. Fiecare pictogramă este codificată manual pe o grilă de 32 x 32 și folosește o contur SVG pentru o flexibilitate maximă a stilului; aceasta înseamnă că puteți personaliza greutatea, culoarea, dimensiunea și, dacă este necesar, puteți face marginile pictogramelor rotunde sau pătrate.
Setul conține 38 de pictograme de contur ale instrumentelor populare de editare de imagini; pictogramele în formate AI, EPS, SVG și PNG transparent (1024px) sunt disponibile pentru descărcare gratuită.
Un set minunat de pictograme de contur, absolut gratuite, în formate .png .pdf .svg .schiță .ai
Un set mic de mini-icoane de înaltă calitate.
Formate: AI, EPS, PNG, SVG
Dimensiuni: 16 x 16, 32 x 32
Pictograme CSS pure
Această secțiune a revizuirii prezintă resurse care oferă acces gratuit la pachetele de pictograme dezvoltate în CSS pur. O alternativă excelentă la utilizarea imaginilor ca pictograme. Pentru a conecta astfel de biblioteci de pictograme, este suficient un fișier .css și, în cea mai mare parte, aceste resurse oferă posibilitatea de a conecta seturi de pictograme direct de la serverele lor, ceea ce este destul de convenabil.
Setul include 512 pictograme, biblioteca este actualizată în mod regulat.
O mică bibliotecă de pictograme care utilizează CSS pur.
Seturi de icoane multicolore colorate
Un set de 30 de icoane liniare colorate în culori pastelate proaspete. Setul include pictograme în format vectorial (SVG) și PNG în diferite dimensiuni.
Peste 120 de icoane colorate gratuite în format PSD
Colecție de 30 de icoane izometrice plate. Toate pictogramele incluse în set sunt complet editabile și personalizabile în Illustrator. Include diferite dimensiuni PNG.
Formate: AI, EPS, PNG
Dimensiuni: 57px, 114px, 228px, 456px, 912px
Un set de 24 de icoane multicolore cu o temă de sporturi acvatice. Pictogramele sunt livrate în format SVG și sunt proiectate cu o schemă de culori deschisă, estival și scalabilitate optimă.
Seturi de pictograme pentru design material
Astfel de pictograme sunt destinate să devină standard pentru aplicațiile realizate în stilul de design unificat al materialelor pe care Google l-a introdus în Android 5.0. În același timp, sunt la fel de potrivite pentru Android, iOS și aplicații web.
250 de pictograme în format Sketch
Acesta este un set de peste 900 de pictograme Google pentru aplicația Sketch. Toate sunt originare din biblioteca Google, care este actualizată și extinsă periodic.
Pictograme cu simboluri și pictograme
Seturi gratuite de pictograme de diferite simboluri și pictograme.
Teme universale - Set de pictograme vectoriale
Setul include 100 de pictograme vectoriale care sunt concepute având în vedere designul web modern, pictogramele sunt prezentate în format SVG, astfel încât să puteți edita, redimensiona și schimba culoarea pictogramelor până când obțineți rezultatul dorit.
Un set de 90 de pictograme drăguțe, multifuncționale, în formate .schițăȘi .ai
Set gratuit de pictograme în formate PSD, AI, EPS, PDF, SVG, Sketch, Webfont
Un set gratuit bine conceput de 70 de pictograme de bază în două versiuni, pentru fundaluri deschise și întunecate. Fișierele AI și SKETCH incluse.
O bibliotecă gratuită de 100 de pictograme de font, arhiva include, de asemenea, toate codurile pentru pagina demo, formatele de fonturi web și fișierele .SVG.
Pachetul UI UI include 100 de pictograme vectoriale care sunt concepute având în vedere interfețele de utilizator, pictograme SVG, versiuni de contur și de culoare. Sunteți liber să utilizați aceste pictograme în proiectele dvs. personale și comerciale.
Seturi de pictograme pentru design grafic și web
Acest set conține 33 de pictograme vectoriale complet scalabile într-un stil de contur. Fiecare pictogramă este disponibilă în formatele EPS, AI, PSD, PNG și SVG.
25 de icoane din categoria Shape Design
Un set impresionant de pictograme frumoase lucrate manual, format din 25 de pictograme ușor de editat și gata de utilizat, disponibile absolut gratuit. Vine în două opțiuni de culoare (mango și țurțuri) și toate formatele convenabile: AI, EPS, SVG și PNG.
Puteți folosi aceste pictograme pentru proiecte personale și comerciale.
Formate: AI, EPS, SVG, PNG
Dimensiuni: 16 x 16, 32 x 32
Set de pictograme pentru instrumente de artă
Setul de pictograme gratuit conține fișiere vectoriale în formatele Illustrator AI și .SVG și PNG, disponibile atât în stiluri de culoare, cât și de linii, în 5 dimensiuni (32px, 64px, 128px, 256px și 512px)
Pictogramele sunt prezentate în toate formatele convenabile: EPS, AI, SVG și PNG.
Seturi de pictograme plate
Această secțiune prezintă seturi gratuite de pictograme pe o mare varietate de subiecte în cele mai bune tradiții ale stilului plat. Utilizarea pictogramelor plate în design va face site-ul sau aplicația dvs. elegant, modern și mai ușor de utilizat.
Blobs
Set gratuit de peste 1000 de pictograme în culori strălucitoare, prezentate în formate (AI, PSD și SVG)
Flat Line – Set de pictograme UX și eCommerce
83 de pictograme în stil plat pentru interfața cu utilizatorul și comerțul electronic
O bibliotecă cu adevărat uriașă de pictograme într-o varietate de stiluri pentru uz personal și comercial, inclusiv o selecție mare de pictograme cu design plat. Pictogramele sunt disponibile gratuit în diferite dimensiuni de până la 72px și în format PNG. Puteți descărca întregul pachet sau fiecare pictogramă care vă place individual, după ce ați selectat dimensiunea de care aveți nevoie
Un set de pictograme pentru proiectarea unui spațiu de lucru este disponibil gratuit în formatele AI și EPS.
Setul conține 70 de pictograme diferite de interfață cu utilizatorul, în formatele SVG și PNG.
Seturi de pictograme pentru afaceri și comerț electronic
Un set de 36 de pictograme bancare și bani gratuite, aceste pictograme în stil plat sunt perfecte pentru aplicații sau site-uri web legate de servicii bancare. Pictogramele vin în forme vectoriale (AI, PSD, EPS, PNG și SVG) și, prin urmare, sunt ușor de editat și schimbat.
Proiectat într-un stil plat, setul include 50 de pictograme vibrante care acoperă toate domeniile majore ale comerțului electronic, inclusiv pictograme de stare a coșului, pictograme pentru metode de plată, pictograme de expediere, pictograme pentru categoriile de cumpărături și multe, multe altele. Pictogramele sunt prezentate în două formate: SVG și PNG, le puteți folosi liber în proiectele dvs. personale și comerciale.
50 de pictograme de afaceri colorate în stil plat, prezentate în formate AI și SVG, astfel încât să poată fi scalate la infinit fără a pierde calitatea imaginii, ideale pentru design-uri web receptive. Le poți folosi liber în proiectele tale personale și comerciale.
Un set gratuit de 40 de pictograme vectoriale legate de comerțul electronic. Versiunea gratuită conține fișiere Adobe Illustrator (.ai), PDF și Encapsulated PostScript (.eps).
Seturi de pictograme cu tematică meteorologică
Pachet de pictograme cu tematică meteo care conține 30 de pictograme frumos redate în .pngȘi .schiță. Se potrivește perfect în designul aplicațiilor meteo și al site-urilor web.
Pachet mare de fonturi de pictograme CSS cu 222 de pictograme meteo, gata de conectat la Bootstrap sau la orice alt proiect care necesită pictograme meteo de înaltă calitate. Setul este actualizat și extins în mod regulat.
Desigur, resursele prezentate în selecție sunt doar o mică parte din întreaga varietate de dezvoltări de design prezentate mai devreme și care au apărut în cursul acestui an. Resursele populare și bine stabilite, în cea mai mare parte, nu au nevoie de introducere, așa că în această recenzie am încercat să evidențiez lucrări relativ noi și de înaltă calitate. Sper sa fie de folos cuiva.
Cu tot respectul, Andrew
Pictogramele pe care le găsiți în aceste resurse pot fi folosite și pentru a ilustra informații în prezentări de diapozitive, pentru a decora cărți de vizită, meniuri, fluturași și multe altele.
Am scris că pictogramele de pe aceste site-uri sunt gratuite, dar totuși acordați atenție condițiilor de descărcare, deoarece acestea se pot schimba în orice moment.
01. Revista Smashing
22. PixelsMarket
26. Blugrafic
Blugraphic - Opțiuni pentru pictograme PSD, PNG și vector. Căutarea este limitată de etichete, dar vă puteți înscrie pentru a primi o selecție gratuită prin e-mail în fiecare săptămână.
27. Icon Shock
Icon Shock - mii de pictograme gratuite pentru uz personal. Pentru a utiliza o imagine într-un proiect comercial, trebuie să efectuați o plată unică.
28. CSS Autor
CSS Author oferă tururi săptămânale ale celor mai bune pictograme gratuite de pe web.
29. Coada creativă
Vrei icoane proaspete? Creative Tail are truse pe care nu le vei găsi în altă parte.
30. Descărcare gratuită
Descărcarea totală gratuită oferă căutare ușoară și descărcări directe de PSD, PNG și vectori.
31. Icoane Eului
Ego Icons oferă peste 1500 de pictograme premium și 100 de pictograme vectoriale gratuite. Vizitați și subsite-urile făcând clic pe butoanele din bara de navigare de sus.
32. AlienValley
AlienValley oferă o gamă largă de pictograme de înaltă calitate în schimbul adresei dvs. de e-mail.
33. Povestea de vise
Dreamstale vă oferă câteva pictograme premium gratuite excelente cu atribuire.
34.DuckFiles
35. 1001 Descărcări gratuite
1001 Descărcări gratuite este specializată în pictograme plate care vin într-o varietate de opțiuni frumoase și ciudate.
36. GraphicsBay
37.Pixeden
Pe Pixeden puteți căuta pictograme în mai multe dimensiuni. Există o selecție largă de la 16x16 la 512x512 în format PNG.
38. SubstantivProiect
NounProject este o căutare convenabilă, încărcare ușoară și pictograme de înaltă calitate. Este necesar un link către autor. Abonamentul cu o taxă lunară elimină restricțiile de descărcare.
39. Iconmonstr
Iconmonstr oferă icoane în mai multe dimensiuni fără atribuire.
40. Placă de fuziune
Designul responsive este un subiect popular. Ecranele au depășit de mult rezoluțiile standard, iar site-urile web pot fi vizualizate atât pe dispozitive de dimensiunea palmei, cât și pe monitoare mari. Site-ul ar trebui să arate la fel de bine, indiferent de dimensiunea dispozitivului și densitatea pixelilor. Există multe tehnici și tehnologii diferite pentru adaptarea designului și a conținutului. Grafica vectoriala, SVG, dupa parerea mea, este unul dintre cele mai interesante subiecte in aceasta directie.
Grafica SVG este convenabilă de utilizat pentru pictograme; nu vor arăta săpunoase pe dispozitivele cu retină și pot fi întinse fără a pierde calitatea.
Iată, de exemplu, un sprite SVG în 4 dimensiuni diferite, cel original are 32 px:
SVG face bine această treabă și este bine potrivit pentru utilizarea în machete receptive.
Puteți lua pictograme pentru design din seturi gata făcute sau puteți să le desenați pe ale dvs.
Seturi de pictograme gata făcute
iconmelon.com
Colecție mare de icoane pe diverse subiecte. Se sugerează ca pictogramele încărcate să fie inserate în HTML folosind utilizarea .
icomoon.io
Cel mai convenabil instrument. Puteți nu numai să selectați și să descărcați pictograme gata făcute, dar le puteți încărca și pe ale dvs. și le puteți obține sub forma unui font și/sau sprite. Împreună cu sprite, vi se oferă să descărcați versiunea PNG.
flaticon.com
Colecție mare, icoanele sunt împărțite convenabil în categorii. Pictogramele selectate pot fi descărcate în formate individuale (font, SVG, PNG) sau toate odată.
Ne desenăm
Pentru a vă crea propriul set de pictograme veți avea nevoie de un editor vectorial:
- Adobe Illustrator este cel mai bun din punctul meu de vedere. 599 RUB/lună ca parte a unui abonament Creative Cloud;
- Inkscape este gratuit și nu foarte ușor de utilizat;
- Sketch - pentru Mac OS, 79,99 USD. Are unele probleme cu vectorizarea loviturilor, dar în general destul de convenabil.
Pierdere în greutate
Fișierul SVG finit conține de obicei o mulțime de lucruri inutile, dar în același timp se pretează bine pentru optimizare. Atributele inutile, spațiile și cratimele sunt eliminate din cod, iar numărul de caractere după punct este redus în numere. Greutatea fișierului este redusă cu 30-50%. Instrumente de optimizare:
grunt-svgmin- sarcină pentru utilizarea Grunt svgo. În acest caz, fișierele în sine vor fi preluate din folderul sursă, optimizate și stocate în folderul cu rezultate. Foarte confortabil.
Font sprite sau pictogramă?
Fontul este o alternativă convenabilă la sprite. Nu este nevoie să vă deranjați cu grila și aranjarea pictogramelor; este convenabil să adăugați simboluri noi, deși acest lucru necesită instrumente suplimentare.
Folosind un font, puteți crea nu numai pictograme cu o singură culoare, ci și mai multe culori.
Vă puteți crea propriul font, de exemplu, pe site-ul web icomoon.io/app/. Secvența aproximativă de acțiuni:
- Selectați pictograme dintr-un set și/sau încărcați-le pe ale dvs.
- Faceți clic pe butonul Font de mai jos.
- La acest pas, puteți realoca simboluri pentru pictograme sau puteți descărca imediat fontul rezultat.
Împreună cu fontul în patru formate (.woff, .svg, .ttf, .eot), sunt descărcate CSS și un fișier demonstrativ.
Fonturile încorporate funcționează chiar și în IE 8, dar au probleme de suport neașteptate în unele browsere moderne. Opera Mini nu acceptă deloc fonturi personalizate, Firefox necesită vrăji pentru serverul unde se află fontul (rezolvat folosind base64), Chrome poate descărca fontul dacă lăsați fila deschisă mult timp:
De asemenea, în Chrome pe Windows7, o pagină cu fonturi încorporate se poate bloca la deschidere, iar în alte browsere, în loc de pictograme, poate apărea orice:
Imagine din articolul lui Chris Coher Icon System with SVG Sprites. Am văzut odată hieroglife în același loc, dar acum este SVG, așa că nu pot face o captură de ecran. Apropo, trucurile CSS folosesc foarte activ SVG în noul său design, iar dezvoltatorii Codepen au abandonat utilizarea fonturilor de pictograme în favoarea SVG în noul design al editorului.
În ciuda ușurinței în utilizare, problemele de suport pentru fonturi ne obligă în prezent să optăm pentru pictograme SVG.
Aș dori să sper că în viitor fonturile încorporate vor fi mai bine acceptate.
Care sunt diferitele moduri de a insera SVG într-o pagină?
Sprite
.pictogramă ( imagine de fundal: url(your.svg); )Pro:
- cod scurt lizibil;
- imaginea este stocată în cache;
Minusuri:
- cerere către server;
- în Opere mai vechi, suportul SVG de fundal este ciudat: pot apărea probleme la adăugarea unui cadru la un element cu un fundal SVG, iar în Opera Mini doar fundalurile fără viewBox funcționează;
- pictogramele în sprite nu sunt disponibile pentru stilurile de pagină;
- Sprite-urile mari pot cauza probleme de performanță.
Base64 în URI de date
.pictogramă ( imagine de fundal: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL...); )Pro:
- nu există nicio solicitare către server.
- suport bun pentru browser: totul, cu excepția Opera pe Presto și vechiul IE.
Minusuri:
- imaginea nu este stocată în cache și este redată din nou de fiecare dată;
- linie lungă în CSS;
- nu se poate citi: nu este clar din cod ce conține;
- imaginea codificată poate cântări mai mult decât cea originală;
- sunt necesare instrumente suplimentare pentru codificare/decodare;
- pictogramele nu sunt disponibile pentru stilurile de pagină.
