Cum să desenezi o pictogramă în Photoshop. Cum să desenezi un logo în PowerPoint pas cu pas cu o fotografie

Cum să desenezi pictograme Warface

Cum să desenezi pictograme Warface

În această lecție vom învăța cum să desenăm pictograme din jocul Warface. Primul va fi logo-ul jocului în sine, al doilea va fi o pictogramă pentru realizări.

1.Iată sigla. Da, pentru cei care nu știu, pozele sunt mărite.

Trebuie să desenați un dreptunghi. Facem asta: trageți o linie dreaptă, împărțiți-o în jumătate (coborâți-o în jos linie verticala), în jos de la punctele extreme măsurăm această jumătate și puțin mai mult, trasăm o linie orizontală, apoi ne retragem din nou - acesta va fi mijlocul dreptunghiului (marcat cu o linie dreaptă mică). Desenați două linii drepte cu ochiul (am o indentație din partea de sus și de jos a dreptunghiului, respectiv), dar distanța de la mijloc din dreapta și din stânga ar trebui să fie aceeași. Nu trebuie să faci toate acestea, ci să le desenezi cu ochiul.

Desenăm partea de mijloc, linii diagonale pe lateral, vom avea nevoie de ele pentru desenul ulterioară.

Ștergem toate liniile auxiliare, lăsând doar la mijloc și desenăm mai departe.

Puteți picta în mod primitiv peste pictogramă în acest fel.

2. Pictograma, rezoluția sa este foarte mică. Am vrut să fac mai multe icoane, dar sunt atât de mici, este foarte greu să vezi detaliile, așa că avem ce avem. Sa incepem.

Desenați un cerc și linii directoare, apoi forma capului. Liniile unui leu sunt aspre și drepte. Desenați trăsăturile feței și ștergeți cercul.

Desenăm dinții, limba și liniile drepte care se extind din cap.

Desenăm coama, dacă sunt trase linii subțiri, atunci o desenați și abia vizibilă.

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, de navigare sau de dezvoltare. În plus, nu are rost să le folosim pe cele cu drepturi depline atunci când sunt disponibile servicii speciale cu funcții personalizate pentru aceste sarcini specifice.

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

• creați ușor și rapid materiale noi;
• daț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 calitate bună(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. În IconsFlow există anumite restricții la 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 set gratuit icoane 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).

Un set de grafice în stil este folosit ca clipart de bază Design material din GitHub. Serviciul conține setări precum: umplutură, 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. Pentru uz personal site-ul este complet gratuit.

După descărcare, veți găsi 6 PNG-uri în fișierul de arhivă marimi diferiteȘi 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 parametri diferiți: culoarea, rama, dimensiunea si stilul umbrelor.

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 icoane - instrumente grozave pentru a optimiza munca 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ția propriile șabloane, exportați PNG, ICO și SVG, adaptați dimensiunea, stilurile de modă și inline editor de vectori. Pe langa asta e singurul editor gratuit icoane în rusă, dacă acest lucru este important pentru dvs.

Daca mai stii ceva servicii similare, trimiteți opțiunile dvs. în comentarii.

Am citit recent un articol de Scott Lewis, care este designer profesionist Pictograme Iconfinder.com. Scott a primit o diplomă în design grafic la Universitatea East Carolina și a proiectat icoane de peste 25 de ani.
M-au interesat sfaturile lui cu privire la crearea unei pictograme, precum și abordarea lui.

Trei chei pentru un design bun al pictogramelor

Pictogramele bine concepute demonstrează o abordare deliberată a celor trei atribute esențiale ale oricărui design - formă, coeziune estetică și recunoaștere. Când dezvoltați un nou set de pictograme, să luăm în considerare fiecare dintre aceste atribute în ordine.
Nu voi spune că un design perfect necesită doar trei componente, dar este suficient pentru a începe. Și deci să începem.

Formă

Forma este structură de bază icoane. Dacă ignorați detaliile și doar desenați linii, atunci rezultatul general poate fi neglijent, fără geometrie generală. De bază figuri geometrice: Cerc, pătrat și triunghi – creați o bază solidă vizual pentru designul pictogramelor. Prin urmare, inițial icoana trebuie creată din cele mai simple forme și abia după aceea adăugăm detalii, dar atât cât este cu adevărat necesar pentru a transmite conceptul.

Unitatea estetică

Elemente care sunt utilizate la crearea unei singure pictograme sau a unui set de pictograme, cum ar fi colțurile rotunjite sau ascuțite de anumite dimensiuni (2, 4 sau 8 pixeli), grosimea liniei (2 pixeli sau 4 pixeli), stilul (plat, contur), schema de culori etc. d. trebuie să fie unite.
Astfel, unitatea estetică este un set de elemente de design care se repetă în întregul set. Acest lucru poate fi văzut în exemplul de mai jos.

Recunoaştere

Recunoașterea este criteriul principal; aceasta este esența icoanei. Recunoașterea include acele proprietăți pe care o persoană le asociază de obicei cu un anumit obiect, cu o anumită idee, dar poate include și ceva neașteptat - acest lucru creează unicitate, de exemplu, un contur incomplet și evidențieri rotunjite.

Au fost trei componente principale design eficient icoane În continuare, vom arunca o privire mai atentă la șase pași pentru a rezolva aceste probleme.

Net

Începeți întotdeauna să desenați pictograme într-o grilă. Folosesc o grilă de 32x32 pixeli, lăsând cei doi pixeli din exterior mereu goli. Scopul acestei zone este de a crea spațiu liber în jurul pictogramei. Dacă faci icoane rotunde, atunci ar trebui să atingă toate cele patru margini, fără a intra în zona spațiului liber, dar uneori, pentru a menține integritatea pictogramei, un element se poate extinde dincolo de cerc, ca în imagine:

Petreceri

Pictogramele pătrate nu trebuie să se extindă sau să atingă toate cele patru laturi. Pentru a menține proporția vizuală cu pictogramele rotunde și triunghiulare, majoritatea pictogramelor dreptunghiulare și pătrate vor fi aliniate la linia centrală a cheii.

Grila este acolo pentru a vă ajuta să vă păstrați pictogramele îngrijite și consecvente, dar dacă trebuie să alegeți între a face o pictogramă să arate frumos sau a încălca regulile, atunci încălcați regulile, dar faceți-o cu mare atenție.

Forme geometrice

Începeți cu forme geometrice simple. Chiar dacă pictograma ajunge să fie mai organică, începe totuși cu forme geometrice simple Adobe Illustrator. Când vine vorba de crearea pictogramelor, în special a celor mici, formele geometrice de bază vor face marginile mai precise și vă vor permite să ajustați rapid scara relativă a elementelor.

Numere: margini, linii, colțuri, curbe

Pentru a preveni un design să arate mecanic și plictisitor, unghiurile, liniile, marginile și curbele trebuie să fie precise din punct de vedere matematic. Cu alte cuvinte, urmați numerele și nu încercați să desenați cu ochiul sau cu mâna când vine vorba de detalii. Incoerența acestor elemente poate reduce calitatea pictogramei.

UNGHIURI

În cele mai multe cazuri, trebuie să rămâneți la un unghi de 45 de grade sau multipli ai acestuia. Netezirea unghiului de 45 de grade previne apariția pixelilor inutile, producând astfel un rezultat clar cu o diagonală ideală, creând contururi plăcute și recunoscute pentru ochiul uman. Aceste contururi unesc întregul set de pictograme și, de asemenea, creează unitate într-o singură pictogramă. Dacă designul dvs. vă obligă să încălcați regula unghiului de 45 de grade, atunci încercați să o faceți la 22,5 sau 11,25 grade, deoarece netezirea va fi mai mult sau mai puțin uniformă.

CURBE

Acestea sunt cele mai vizibile zone care pot degrada calitatea pictogramei. Datorită lor, puteți deosebi un profesionist de un amator. Deoarece ochiul uman poate detecta mici inexactități, desenul manual nu vă va ajuta să vă atingeți obiectivele. Bazați-vă pe instrumente, forme și numere pentru a crea curbe.

COLTURI rotunjite

Raza colțului este de 2 pixeli. Pentru o pictogramă de 32 x 32 pixeli, această rază este suficientă pentru a face colțul cu adevărat rotunjit, fără a înmuia colțurile suficient pentru a rotunji designul într-o bulă. Principalul lucru de reținut este că designul pictogramei în sine va depinde de alegerea razei de rotunjire.

NETEZIREA PIXELUI

Alinierea perfectă a pixelilor este esențială pentru modelele de pictograme mici. Netezirea colțurilor de pe astfel de pictograme poate face pictograma neclară și neclară. Spațiul dintre liniile care nu este aliniat cu grila de pixeli va fi netezit și va deveni neclar. După cum am menționat mai sus, unghiurile de 45 de grade și multiplii lor sunt netezite mai bine.

Cu toate acestea, observ că netezirea devine mai puțin relevantă atunci când dimensiuni mari iar pe ecrane cu Rezoluție înaltă, cum ar fi afișajul retină.

GROSIME LINII

În general, cel mai bine este să utilizați nu mai mult de două opțiuni de grosime a liniilor într-o pictogramă, dar uneori sunt pur și simplu necesare trei opțiuni. Scopul tău este de a oferi vizual ierarhie și varietate fără a distruge integritatea întregului set. Utilizarea a mai mult de trei greutăți de linie poate distruge structura și coeziunea. În ceea ce privește lățimea liniei în sine, este mai bine să luați din nou multipli de doi și patru pixeli; aceștia sunt ușor de scalat și de a face pași egali. Încercați să evitați foarte mult linii fine, mai ales în icoanele de bază și icoane plate, dar această regulă nu se aplică dacă creați în mod deliberat pictograme din linii subțiri.

Folosiți elemente de design și accente repetate în seturile de pictograme

De exemplu, Hemmo de Jong, un designer olandez celebru, folosește un element care se repetă în toate icoanele sale - un unghi ascuțit.

Folosiți detaliile și decorațiunile cu mare atenție. O pictogramă ar trebui să comunice rapid un obiect, o idee sau o acțiune. Prea multe detalii mici vor face imaginea complexă și, prin urmare, mai puțin recunoscută, mai ales la dimensiuni mai mici.

Nivelul de detaliu al unei pictograme sau al unui set de pictograme este același aspect important unitate estetică și recunoaștere. Regula principală este minimul de detalii necesare pentru a transmite semnificația icoanei.

Faceți icoana unică

Numărul de designeri talentați care creează seturi de pictograme de înaltă calitate, dintre care multe sunt acum disponibile gratuit, crește exponențial în fiecare zi. Din păcate, majoritatea se concentrează pe tendințele și stilurile celor mai populari designeri. Prin urmare, este foarte important ca designul tău să fie memorabil și cu adevărat unic.

Toate acestea pași simpli ar trebui privit mai degrabă ca un punct de plecare decât ca un ghid definitiv. Odată ce ați stăpânit fundamentele teoretice și tehnice, vă puteți concentra energia pe crearea de icoane unice care să iasă în evidență din mulțime datorită viziunii tale creative.

Un set de pictograme care au fost folosite pe

În cazul în care pictograma va fi folosită pe ecran. Dacă faceți imediat un raster, atunci când scalați liniile se vor estompa și nu se vor mai încadra în pixeli. Dar nu are rost să desenați altundeva: oricum, apoi importați-l în aspect în Photoshop.

Să începem cu faptul că problema cursei „moale” este rezolvată de setările de contur:

Acum poți desena ceva. Am nevoie doar de o pictogramă de ziar.

Mai întâi studiez obiectul înfățișat. Google sugerează proporțiile:

Remarc caracteristicile pe ceea ce este la îndemână:

Voi lua ca exemplu prima pagină din arhivă. NY Times. Am ajustat imediat dimensiunea pentru a se potrivi cu alte pictograme. Ceea ce este important aici este greutatea vizuală, nu parametrii matematici:

Pentru ca punctele de ancorare să se lipească de grila de pixeli, trebuie să bifați caseta de aici:

cmd+k

Pentru liniile de obiecte rotite la un unghi care nu este un multiplu de 45°, lipirea de grilă poate fi dăunătoare, astfel încât cheile și [k] se pot uza rapid :-)

Este deja clar că ziarul se dovedește a fi „mai greu” decât alte obiecte. il reduc putin:

La scalare, punctele de ancorare ies din grila de pixeli. Le introduc înapoi acolo unde este nevoie.

Adaug detalii. Verific dacă cele 6 coloane sunt stivuite astfel încât marginile ziarului să fie egale (am aflat accidental că da. Altfel ar fi trebuit să fac ziarul cu un pixel mai lat.)

Aici liniile se lipesc între ele în mod dezgustător, formând o pată întunecată. Când este mărit, acesta nu este vizibil, dar în captura de ecran anterioară vă atrage imediat atenția:

Acum numele. În pictogramele mele, toate liniile au aceeași grosime, așa că nu îmi pot permite să desenez o linie groasă în loc de titlu. Schiț rapid literele, ignorând detaliile:

reduc la dimensiunea potrivităși am pus fiecare literă într-o grilă de pixeli:

Completez ziarul:

Aproape gata. Sunt confuz de cantitatea de cerneală. Icoana s-a dovedit a fi mult mai densă decât vecinii săi. Descarc liniile, scot Titanic-ul.

Ziarul este rulat în partea de jos. Pentru a spori acest efect, aveți nevoie de o umbră. Dar nu puteți folosi o umbră, așa că am venit cu un truc inteligent - am așezat liniile de jos mai aproape de marginea ziarului, astfel încât lângă margine densitatea liniilor să crească, creând o întunecare aparentă.

Sincer să fiu, chiar îmi place așa:

Mă voi gândi în continuare ce opțiune să aleg. Asta e tot pentru azi.

Băieții cu experiență pot evita deloc schițele, dar își fac o listă de imagini și lucrează imediat cu variații.

Dacă desenați pictograme la comandă, desenați schițe, astfel încât să puteți evita munca inutilă atunci când desenați, arătând mai întâi imaginile clientului.

Pasul patru: dimensiune

Acesta este, în general, cel mai important lucru: să decideți asupra dimensiunii minime.
Pentru ce este? Dacă doriți ca pictogramele dvs. să aibă muchii ascuțite, pixeli perfecti și să fie scalate corect, trebuie să decideți asupra dimensiunii și grosimii obiectelor în sine. mărime mică(x1). Recomand să utilizați dimensiuni egale pentru pictograme.

Pasul cinci: Proces

Creați un document cu valori

Unde Spațiere este distanța dintre panourile de artă.

Lățimea și înălțimea - înălțimea și lățimea mesei de artă.

Efecte raster — rezoluție (ppi) potrivit pentru icoane 72

Aliniați noi obiecte... - această casetă de selectare este responsabilă pentru legarea punctelor la grila de pixeli. Vă sfătuiesc să-l porniți, dar în timpul lucrului, îl puteți opri oricând.

1. Selectați prima planșă de artă, va face toate pictogramele, iar cele terminate vor fi inserate pe planurile de artă adiacente.
2. Creați un pătrat care să se potrivească zonei dvs. de lucru.
3. Configurați ghiduri pentru a ușura procesul de desen.
4. Utilizare Previzualizare pixeli
5. Marcați pictogramele gata făcute în lista de imagini, astfel încât să vă puteți monitoriza în mod clar progresul.
6. Urmați sfaturile și articolul anterior despre.
7. Nu face primul set prea mare, s-ar putea să obosești repede și să renunți la jumătatea drumului. Viteză normală vor fi aproximativ 20 de icoane pe zi, apoi se pot plictisi rapid...
8. Proiectați fișierul sursă și nu uitați să puneți lucrurile în ordine în straturi, pregătiți un fișier pentru Photoshop și schițați, de exemplu.
9. Pregătește o lovitură pentru dribling și behance, creează un post pentru retele sociale. Acesta este cel mai bun PR pentru munca și accesul la comenzi noi. Nu uitați de hashtag-uri: #design #best #mamalubitmenya #kupiteikonky

Unde se vinde:

graphicriver.net este o platformă gratuită pentru tranzacționarea oricărui conținut digital.

creativemarket.com  - pentru a crea un cont aici vi se va cere să afișați conturi în alte magazine și în portofoliul dvs.

thenounproject.com  — site-ul este probabil cu cea mai mare bază de date de pictograme, oferă o alegere: fie gratuit, fie pentru o singură plată, există și funcție de abonament lunar, dar nu aș paria pe acest serviciu dacă vrei să faci bani .

icons8.com  - Nu știu nimic despre acest magazin, dacă cineva are experiență, împărtășește-o în comentarii.