Iată ce ar trebui să obținem:

Pictogramele sunt o parte importantă a designului interactiv și web. Deși icoanele sunt mici, pot fi foarte dificil de creat. În tutorialul de astăzi vom demonstra cum să creați o pictogramă de folder folosind diferite formeși reflexe în Photoshop. Să începem!

Pasul 1 - Fișier nou / Tehnica stilou
Deschide Photoshop și creează document nou(Ctrl + N). Utilizare următoarele setări:
Rezoluție: 72 dpi
Modul color: Culoare RGB
Dimensiuni: 600 × 600 pixeli

Creați următoarea formă folosind instrumentul PixInstrument(P) (Pene). Culoare: #3da1e2

Pasul 2 - Crearea formelor folosind stiloul
A desena înapoi foldere folosind Instrument stilou(Pen) folosind aceeași tehnică de desen. Apoi trageți o dungă așa cum se arată în imagine.
Culoare: #003658 #3da1e2 #08517e

Pasul 3 - Terminați forma
După ce ați terminat de desenat folderul, trebuie să adăugați o bucată de hârtie și o săgeată, așa cum se arată în imagine. Acum ar trebui să aveți 5 straturi. Fiecare formular va fi activat strat separat. Dați fiecărui strat un nume.
Culoare: #ffffff #32e732

Pasul 4 - Adăugarea efecte de culoare
Adăugați următoarele stiluri de straturi în partea din față a folderului. Reduceți opacitatea la 90%.

Adăugați următoarele stiluri de straturi pentru hârtie. Reduceți opacitatea stratului la aproximativ 90-95%.

Adăugați următoarele stiluri de straturi pentru dungă.

Adăugați următoarele stiluri de straturi în spatele folderului.

Adăugați următoarele stiluri de strat pentru săgeată.

Acum pictograma ta arată așa.

Pasul 5 - Adăugarea reflexelor
Adăuga grup nou numite „Reflexe”. Utilizare Instrument stilou(Pen) pentru a desena reflexia așa cum se arată în imagine. Asigurați-vă că desenați doar conturul și nu forma. După ce ați închis calea, faceți clic Click dreapta mouse-ul de Zona de lucruși selectați face selecția(Creează o selecție) (penă 0). Luați o pensulă mare (diametru aproximativ 470, duritate 0) și vopsiți peste partea dreapta selecție, ca în imagine, pentru a crea o reflexie albă. Schimbați modul de amestecare la Acoperire(Suprapunere) și reduceți opacitatea la 63%.

Pasul 6 - Margini
Creați un grup nou numit „Margini”, creați strat nouîn el (Ctrl + Shift + N sau faceți clic pe pictograma Creați un nou strat). Adăugarea de evidențieri la margini oferă pictogramei un efect 3D. Utilizare Instrument stilou(Pen) pentru a crea linii de contur în jurul colțurilor și a tuturor marginilor folderului, hârtiei și săgeților. Apoi faceți clic dreapta pe spațiul de lucru și selectați Calea cursei(Accident vascular cerebral) - Perie(Perie). Setările pensulei ar trebui modificate în avans, diametrul principal 8 pixeli și duritatea 0.

Etapa7 - Umbre
Creați un nou strat (Ctrl + Shift + N) pentru umbre și plasați-l într-un nou grup (Ctrl + G). Faceți o selecție așa cum ați făcut la pasul 5 pentru a crea reflexiile. Completați selecția cu negru și apoi estompați marginile cu instrumentul Instrument de estompare(Estompa). Dacă umbrele par prea întunecate, reduceți opacitatea stratului la 40%.

Pasul 8 - Adăugarea textului
Adăugați text folosind orice font doriți. Am ales „Agenția FB”. Dimensiunea fontului: 40, opacitatea stratului: 75%.

Pasul 9 - Adăugarea finală reflexe și umbre
Adăugați mai multe reflexii pe hârtie folosind aceleași metode ca la Pasul 5.

Adăugați umbră folosind Instrumentul Elipse(E) (Elipsă). Desenați o elipsă așa cum se arată în imagine și adăugați câteva Filtru -Estompa-Neclaritate de miscare(Filtru - Blur - Motion Blur). Reduceți opacitatea după bunul plac.

Vizionare finală
Sper că v-a plăcut acest tutorial. Am adăugat câteva pictograme suplimentare pe care le-am creat folosind aceleași tehnici.

Crearea pictogramelor poate fi destul de provocator, deoarece trebuie să puteți crea un design flexibil care poate fi ușor de scalat în sus sau în jos. Pentru a obține această capacitate ușoară de redimensionare, designerii grafici folosesc de obicei software pentru a lucra cu ei. grafica vectoriala, ca Illustrator. Cu toate acestea, în acest tutorial, care se adresează utilizatorilor intermediari, vă vom arăta cum să transformați o schiță într-o pictogramă minunată folosind Photoshop. Veți avea nevoie de cunoștințe de bază programe Photoshopși, în special, Instrumentul Pen.

previzualizare

Introducere

În acest tutorial, aproape toate formele sunt desenate folosind instrumentul Pen din Photoshop. Dacă nu știți cum să utilizați acest instrument, puteți consulta excelentul tutorial numit: "" de la unul dintre cei experimentați designeri grafici pe site-ul de specialitate PSDfan.

Pasul 1: Creați un document Photoshop

Pentru a începe, creați un Photoshop nou document cu setările prezentate aici.

Pasul 2: Începând cu elementele de bază

Acum apăsați Ctrl + C și apoi Ctrl + V pentru a copia și lipi aceeași cale pe strat.

Apoi, selectați Editare – Transformare – Întoarcere orizontală (Editare – Transformare – Întoarcere orizontală) și mutați a doua jumătate a formei la partea dreapta, astfel încât cele două jumătăți ale sale să fie conectate.

Pasul 3: Aplicați un stil la stratul principal

Selectați Setări stil pentru stratul „principal” și aplicați-i următoarele:

Creați un nou strat și plasați-l sub stratul „principal”.

Completați o selecție pe el utilizând Instrumentul Marquee eliptic (M) și reduceți opacitatea acesteia la 30%.

Apoi aplicați două filtre - Gaussian Blur și Motion Blur.
Filtru – Încețoșare – Încețoșare gaussiană (Filtru > Încețoșare > Neclaritate gaussiană)

Setați raza la 3.0px.

Setați Unghiul la 0° și Distanța la 30px.

Cu selecția activă, accesați meniul Selectare > Modificare > Extindeți și extindeți selecția cu 2px.

Mutați selecția cu 5 pixeli în sus și faceți clic pe Șterge cheia pentru a curăța zona de sub selecție.

Selectați Instrumentul de mutare (V) și mutați stratul 3px în jos.

În cele din urmă, aplicați un filtru Gaussian Blur cu o rază de 2,5 px și reduceți opacitatea stratului la 50%. Dacă ai urmat întocmai instrucțiunile noastre, atunci vei avea în această etapă se va întâmpla așa ceva.

Folosind instrumentul Pen, desenați o formă similară cu cea de mai jos și denumiți-o „cămașă”.

Selectați Instrumentul Marquee dreptunghiular (M) și, pe un nou strat, umpleți selecția cu orice culoare, așa cum se arată mai jos (vom adăuga un stil stratului, astfel încât culoarea cu care îl umpleți nu contează).

Următorul în rând este o cravată. Aceasta va fi o cravată roșie, dar ne-ar plăcea să experimentați cu diferite culori și modele de cravată! Creați forma cravatei folosind Instrumentul Pen (P), folosind aceeași tehnică despre care am vorbit deja.

Este timpul să creați gulerul cămășii. Desenați forma pe care o vedeți aici; Culoarea de umplere poate fi aleasă în mod arbitrar, deoarece va fi suprapusă mai târziu (doar alegeți o culoare pe care o puteți separa cu ușurință de fundal).

Denumiți stratul cu formă nouă"guler".

Umbra

Prin urmare, pentru a obține rezultatul dorit, selectați stratul „guler” și apăsați Ctrl+J pentru a-l copia.

Acum creați un nou strat și îmbinați-l cu stratul duplicat. Aceasta se va traduce partea stanga guler la un raster, astfel încât, atunci când îl transformăm, stilurile să nu fie afectate.

După aceea, faceți combinația Editare – Transformare – Întoarcere orizontală (Editare> Transformare> Întoarcere orizontală) și mutați a doua jumătate la dreapta folosind Instrumentul de mutare pentru a finaliza gulerul.

Setați culorile de fundal și de prim plan la valorile implicite apăsând tasta D (aceasta setează culoarea primului plan la negru și culoarea de fundal la alb).

Apoi desenați forma pentru reverul stâng al jachetei, așa cum se arată mai jos.

Umbra

Selectați Instrumentul perie și selectați perie moale 4px grosime.

Umbra

Desenați o elipsă pentru față, așa cum se arată mai jos.

Pasul 12: Adăugați umbre pe față

Creați un nou strat și faceți clic pe stratul „față” cu mouse-ul în timp ce țineți apăsat Ctrl pentru a crea automat o selecție în jurul acestuia.

Mutați selecția în jos cu 4 pixeli și umpleți-o cu #423820 pe un nou strat.

Repetați același filtru apăsând Ctrl+F.

Selectați stratul de umbră, Ctrl-clic pe stratul „gât” pentru a crea o selecție în jurul acestuia, apoi apăsați Ctrl+Shift+I pentru a inversa selecția.

Apăsați tasta Delete pentru a șterge zona de sub selecția inversată.

Așa cum ați adăugat umbra pe față, adăugați o umbră părului pe față folosind aceeași culoare, dar cu o opacitate mai mică - aproximativ 70%.

Creați un nou strat și faceți Ctrl-clic pe stratul „păr” pentru a încărca selecția acestuia.

Mutați selecția în sus cu 7 pixeli și umpleți-o cu alb (#ffffff).

Cu selecția selectată, mutați-o cu 5 pixeli în sus și apăsați tasta Ștergere pentru a șterge zona de sub selecție.

Acum aplicați următoarele filtre layer:
Filtru – Încețoșare – Încețoșare gaussiană (Filtru > Încețoșare > Neclaritate gaussiană)

Setați opțiunea Radius la 1px.
Filtru – Claritate – Claritate (Filtru > Claritate > Claritate)

Aplicați acest filtru de două ori.

Apoi, setați opacitatea de umplere a stratului la 0% și aplicați-i un stil Gradient Overlay.

Totul este gata! Vă mulțumim că ați luat această lecție! Sper că ați reușit să învățați un truc Photoshop sau două.

Dacă am inspirat pe cineva dintre voi să creeze lucrări noi cu ajutorul acestei lecții, vă rugăm să adăugați lucrările dumneavoastră în comentarii!

Iată versiunea finală a designului pictogramei.

* (ZIP, 0,20 mb)

Atenţie! Nu aveți permisiunea de a vizualiza text ascuns.

04.07.2016 27.01.2018

În acest tutorial veți învăța cum să creați pictograme plate plate retele sociale.

Ce vei crea:

Crea icoane plate Vom începe cu fundalul, apoi vom adăuga efecte pictogramelor pentru a le oferi originalitate, apoi vom desena umbre lungi. Pentru a repeta acest tutorial, veți avea nevoie de Photoshop CS3 sau o versiune ulterioară.

Resurse:

• Font 1 - http://fontawesome.io/cheatsheet/
• Font 2 - http://fontawesome.io/

Pasul 1

Crea fișier nou (Ctrl + N) mărimea 500 × 400 pixeli.

Creați un grup nou (CTRL+G)și denumește-l „Background”.

Pasul 2

Umple fundalul culoare # e7e9ea prin utilizarea Instrument cu găleată.

Pasul 3

A adauga mai multe efecte pe fundal, vom adăuga un gradient. Faceți clic pe pictogramă Strat de ajustareși selectați Gradient (Gradient), utilizați următoarele setări:

Modul de amestecare a straturilor Lumină moale (Moale Ușoară) | Opacitate: 25%

Pasul 4

Creați un grup nou și denumiți-l „simboluri”.

Pasul 5

Înainte de a începe, trebuie să setăm meniul Conducători Și Grile (rigle și grile). Accesați meniu View-Rulers (Vedere- Conducători) Și Vizualizare-Afișare-Grile (Vedere— Spectacol— Grile) . Iată setările mele pentru Rigle și grile(pot fi deschise mergând la Editați preferințele:

A crea Ghid, trebuie doar să faceți clic și să îl trageți din riglă. Pentru a crea un ghid vertical, trageți de pe rigla verticală și invers. Așa am împărțit pânza (fiecare pictogramă este egală cu 50 × 50 pixeliși distanța dintre fiecare pictogramă 25 pixeli):

Pasul 6

În acest tutorial, lucrăm cu fontul Awesome, puteți adăuga pictograme personalizate pentru site-ul dvs. De obicei, acest lucru se face prin plasare font CSS pe site-ul dvs., dar deoarece lucrăm cu Photoshop, va trebui să copiem fiecare pictogramă pe care doriți să o utilizați din foaia de cheat. Accesați pagina, selectați pictograma pe care doriți să o desenați. Am folosit pictograme pentru următoarele site-uri (rețele sociale): Twitter; Facebook; Tumblr; Google+;Instagram; YouTube; TIC nervos; Dropbox; DeviantArt; Pinterest; Skype; A hrani.

Pasul 7

După ce ați găsit pictograma pe care doriți să o utilizați, copiați-o ( Selectați-l, apoi faceți clic dreapta-Copiare)

Apoi reveniți la Photoshop și selectați Instrument text (TextInstrument) pe bara de instrumente. Schimbați setările fontului așa cum se arată în imagine:

Acum lipiți pictograma pe care tocmai ați copiat-o. ( Click dreapta-Lipire)

Pasul 8

Repetați pasul anterior până când ați introdus toate pictogramele pe care doriți să le utilizați.

Pasul 9

Creați un grup nou și redenumiți-l „icoana bg”, plasați grupul sub grupul „simboluri”.

Pasul 10

Creați un nou strat și plasați-l în grupul creat la pasul anterior. Am redenumit stratul în „icoana bg”.

Pasul 11

Folosind instrumentul dreptunghi cu colțuri rotunjite (DreptunghiularInstrument pentru formă de cerc)(situat în bara de instrumente de mai jos Instrument text) Am creat fundalul pictogramelor,

Iată toate culorile pe care le-am folosit:
Twitter: # 6bd1f4;
Facebook: # 5a93cb;
Tumblr: # 3c6a9c;
Google +:# e44940;
Instagram:# 9bd29d;
Youtube:# f4504c;
TIC nervos:# a96db6;
Dropbox:# 81d5ed;
Deviantart:# 6e8e61;
Pinterest:# f25f5f;
Skype:# 67d5f4;
A hrani:# e9951d;

Puteți folosi aceste culori, sau puteți folosi culori la discreția dvs. - astfel lucrarea va căpăta originalitate.

Dacă nu vă place aspectul dreptunghiurilor rotunjite, puteți alege o formă diferită, cum ar fi un pătrat sau un cerc. Pentru a face un cerc sau un pătrat perfect, nu uitați să țineți tasta SHIFTîn momentul creării lor.

Pasul 12

Dacă sunteți mulțumit de rezultate în acest moment, puteți continua, dar dacă doriți să adăugați puțină viață pictogramelor, să continuăm să facem îmbunătățiri. Sa incepem cu stilul stratului Shadow (Drop Shadow). Deschideți grupul „simboluri”, selectați una dintre pictograme și faceți clic pe pictogramă Fx-Umbră (Fx-Umbră)

Pasul 13

Repetați pasul anterior cu pictogramele rămase. Pentru a vă ușura mult munca, faceți clic faceți clic dreapta pe strat - Copiere stil în picioare (-Copy Stil strat) . Apoi selectați straturile de pictograme rămase, faceți clic clic dreapta-Lipire stil strat.

Pasul 14

Acum să adăugăm umbra interioara pe fundalul fiecărei pictograme. Deschideți grupul „icoane bg”, selectați stratul cu pictograma, faceți clic pe pictogramă Fx-Umbra interioară (Fx-InnerUmbră) . Utilizați următoarele opțiuni:

Pasul 15

Creați un nou strat și numiți-l „Efect de luciu”. Schimbați culoarea primului plan la # ffffff; si cu ajutorul instrument Zona dreptunghiulara(Instrument pentru marcaj dreptunghiular) creați mai multe dreptunghiuri, jumătate dimensiune mai mică pictograme (aprox. 50x25 pixeli). Faceți acest lucru pentru toate pictogramele.

Apoi schimbați modul de amestecare la Soft Light, reduce Opacitate stratificați în sus 20% , A completati inainte de 80% .

Pasul 16

Opriți vizibilitatea stratului „Efect de luciu”. Creați un nou strat și numiți-l „Umbra lungă”. Acest pas este puțin mai complicat în comparație cu restul efectelor. Plasați un nou strat sub stratul „Gloss Effect”.

Pasul 17

Lua Instrument lazo poligonalși începeți să creați o umbră dreptunghiulară atingând marginea pictogramei doar în partea dreaptă jos, apoi faceți o linie diagonală până ajunge la marginea dreapta jos a fundalului pictogramei, faceți o linie dreaptă până când ajunge în centrul fundalului, apoi conectați liniile. În imagine puteți vedea mai clar cum să desenați o umbră lungă.

Pasul 18

Ultimul pas! Reduce Opacitate strat de umbră la 10% , Și completati (Fill) inainte de 0% .

Acum faceți clic pe pictograma Fx și selectați Acoperireculori (CuloareAcoperire). Utilizați următoarele opțiuni:

Acum selectați Acoperiregradient (GradientAcoperire)și utilizați aceste setări:

Rezultate finale:

O zi bună tuturor, mea dragi prieteni! Ştii? Uneori te plictisești atât de rapid de comenzile rapide standard, sau mai degrabă de pictograme, încât vrei ceva nou pentru a-ți diversifica timpul petrecut la computer. Puteți, desigur, să schimbați fundalul desktopului, dar astăzi aș dori să vă spun cum să faceți o pictogramă dintr-o imagine folosind Photoshop-ul meu preferat.

Mulți oameni presupun în mod eronat că este suficient pentru un ICO, iar imaginea va fi imediat convertită chiar în această pictogramă. Oh bine. Încercați singur și veți primi o eroare când încercați să înlocuiți imaginea comenzii rapide. În general, să facem mai bine decât să vorbim) Hai să mergem!

Acum vreau să schimb pictograma pentru browserul meu Google Chrome. Care este cel mai bun mod de a face față acestei situații? Să mergem în ordine.

Ce să faci atunci? Atunci cum putem face o icoană? Da, este elementar. Un plugin extern (supliment) ne va ajuta în acest sens, datorită căruia formatul de care avem nevoie va deveni disponibil pentru salvare. În general, hai, repetă după mine.

Ce tocmai am făcut? Am descărcat fișiere plugin (pentru diferite adâncimi de biți), care se instalează suplimentar nou formatîn Photoshop. Dosar fișier Formate este folosit doar pentru a conecta formate noi. Sper sa explic clar? Nu stii niciodata)

Ei bine, acum reveniți la Photoshop, deschideți poza din care doriți să faceți o pictogramă. Acum puteți salva fișierul cu extensia ICO. Doar salvați imaginea ca de obicei și acum selectați extensia necesară din lista.

IMPORTANT! Daca ai imagine mare, atunci când salvați nu veți vedea formatul ico în lista celor acceptabile. Faptul este că această caracteristică nu este disponibilă dacă imaginea dvs. depășește dimensiunea de 256*256. Dacă da, atunci doar până la 64*64. Nu cred că vei avea nevoie de mai mult. După înlocuire, extensia va fi disponibilă.

Ei bine, acum chestiunea este mică, tot ce rămâne este să înlocuim articolul primit de pe etichetă. Pentru a face acest lucru, faceți clic dreapta pe comanda rapidă dorităși selectați Proprietăți. După aceea selectează "Schimbă iconița"și acum căutați pictograma proaspăt salvată unde ați pus-o apăsând mai întâi butonul de răsfoire.

Așa cum? Doriți să vă actualizați etichetele? Puteți experimenta și transforma ușor desktopul.

Ei bine, în general, dacă doriți să stăpâniți bine Photoshop, atunci vă recomand cu căldură să vizionați minunate tutoriale video, datorită căruia vei învăța cum să folosești acest minunat editor foto. Toate lecțiile sunt construite grozav. L-am urmărit și eu și am învățat multe lucruri noi.

Ei bine, este timpul să cunoaștem onoarea. Am terminat pentru azi. Sper că ți-a plăcut articolul meu și ne vedem în celelalte postări ale mele. Și bineînțeles, vă recomand să vă abonați la actualizările blogului pentru a nu rata ceva interesant. Vă doresc succes! Pa! Pa.

Salutări, Dmitri Kostin.

Cum să-ți creezi rapid și ușor propria pictogramă în Photoshop. Vom salva pictograma în Photoshop ca icon format.ico
În primul rând, trebuie să faceți suport pentru formatul .ico în Photoshop.

Suport format ICO

Recent am avut nevoie să desenez un favicon pentru un prieten în Photoshop. După ce am început munca, mi-am dat seama brusc că photoshop nu prieten cu ico format. Fără să mă gândesc de două ori, mi-am amintit brusc că deja am întâlnit asta și nu puteam să mă împrietenesc cu ico decât cu un plugin despre care vă voi povesti.
Pentru a face prieteni photoshop cs6 și mai tineri cu ico format (a face prieteni este să deschidem formatul ico, să îl editați, să îl salvați în alt format sau să îl salvați în ico) avem nevoie de un plugin.
Deci, în primul rând, să descarcăm pluginul, aproximativ de pe acest site, alegând pentru ce adâncime de biți (nu știu cum fac Adâncimea de biți Windows) aveți nevoie de un plugin fie pentru un sistem pe 32 de biți, fie pentru un sistem pe 64 de biți

După ce ați descărcat fișier Zip extrageți un fișier din acesta cu extensia 8bi.


Acum puneți acest fișier într-un folder (pentru sisteme pe 32 și 64 de biți)
C:/Fișiere de program/Adobe/Adobe Photoshop CS6 (64 de biți)/Necesar/Plug-in-uri/Formate de fișiere/
C:/Fișiere de program (x86)/Adobe/Adobe Photoshop CS6/Necesar/Plug-in-uri/Formate de fișiere


După aceea, ieșiți din Photoshop și lansați-l din nou. Acum puteți salva în format ico și deschide direct în formatul preferat editor photoshop. Singurul lucru este că dacă doriți să salvați în format ico, dimensiunea trebuie să fie de 16 pe 16 pixeli sau NU VA fi o fereastră cu opțiunea de salvare în ico!

După ce Photoshop acceptă deja formatul ico, putem începe să creăm o pictogramă în Photoshop. Dacă ești bun la desen, poți desena pe un document nou, cu fundal transparent pictograma. Rezoluție nu mai mult de 512 x 512 pixeli. Oricum, vom salva pictograma nu în formatul 512 cu 512, ci într-unul mai mic!

După cum putem vedea, imaginea nu are fundal. Este perfect pentru noi crearea unei pictograme în format ico în photoshop. Deschideți-l în Photoshop, faceți dimensiunea 256×256 pixeli și salvați-l în format ico

Pictograma noastră este gata și o folosim cu succes!