<Browse> Pagina principală / Toate , BUTTON , ICOANA , Tutorial / Blog articol: RIATMP1157-Cum sa faci buton şi icoane

| Mobile | RSS

RIATMP1157-Cum sa faci buton şi icoane

27 septembrie 2009
How to make button and icon tutorial

Butonul foarte simplu, dar atractiv şi crearea de icon tutorial pentru aproape toată lumea, cu minime sau aproape nici o experienţă Photoshop. Scopul acestui tutorial nu este doar arată truc şi tehnica de a crea un buton, dar, de asemenea, vă încurajează să fie creativi şi imaginaţie pentru a face butoanele proprii în viitor.


Una dintre cele mai importante secrete, în orice munca creativă este abilitatea de a vedea rezultatul cu mult înainte de ce aţi început de punere în aplicare. Există mai multe abordări pentru a realiza acest lucru, pentru mine cel mai bun mod este de aproape de ochii mei si incearca sa vezi ce am de gând să creeze. După ce am ceva interesant încerca să ia un instantaneu în memoria mea, înainte de a mă deschid ochii şi imediat se bazează pe o hârtie înainte de a mă uita. Este un exerciţiu care le puteţi face şi de a face în mod regulat va creşte capacitatea dumneavoastră de a vedea mai clar.

Să spun că acest lucru este ceea ce am văzut când am închis ochii, acum cum îl pot executa în Photoshop?


Icon exercise draw on paper
Exerciţiu Icon remiză pe suport de hârtie
Pentru a crea acest lucru în Photoshop etape sunt după cum urmează, voi încerca să-l simplu:

Pasul 1: Deschideţi un fişier nou în Photoshop şi să dea nume ca button_tutorial.psd, lăţime: 300, Inaltime: 250, lasă totul ca implicit.


Create new photoshop file
Crearea de noi fişiere Photoshop

Pasul 2: Aveţi posibilitatea să păstraţi fundal de culoare albă sau de a folosi unele textura de uniformizare, dacă preferaţi, am creat rapid unele textura folosind biblioteca textura.

Create texture in Photoshop
Creare textură în Photoshop

Pasul 3: Adaugă un nou layer şi să dea un nume, de a crea rotunjite colţ pătrat caseta de selectare (135px X135px) şi de a face raza colţ la 20px. Există mai multe modalităţi de a crea caseta rotunjite pătrat, unul dintre-un mod simplu este: Desenaţi o cutie pătrat prima şi selectaţi "Select -> Modify -> Smooth" din meniul de sus şi selectaţi raza de 20px.

create rounded corner square box
a crea rotunjit caseta pătrat colţ
Ecranul dvs. ar trebui să arate similar cu acesta:


rounded corner square box in photoshop
rotunjit pătrat caseta de colţ în Photoshop
Pasul 4: Pentru a umple acest domeniu selecţia cu culoarea degrade, faceţi clic pe pictograma pantă (1) în panoul de icon şi selectaţi (2) culoarea de selectie gradient de la partea de sus şi alege trei culori aşa cum se arată în imagine. [# 80a2be, # 013871, # 31b7dd],


gradient color in photoshop
culoare degrade în Photoshop
Imaginea ta finală ar trebui să fie aşa.


Gradient color in photoshop
Gradient de culoare în Photoshop

Pasul 5: Acum, la timp pentru a explora un oarecare efect,
Faceţi clic pe "Adăugaţi un stil de strat" ​​pictogramă în partea de jos a ferestrei layer, şi într-o fereastră stil Layer caseta de selectare "Drop Shadow", doar verifica. Urmaţi imaginea eşantion de mai jos.

Add a layer style Drop Shadow
Adaugă o picătură strat stil Shadow

Pasul 6: Acum caseta "Outer Glow" check check. Nu aşa cum se arată în imaginea de mai jos.


Add a layer style Outer glow
Adaugă o strălucire stil strat exterior

Pasul 7: caseta de selectare de lângă "Inner Glow" verificare. Nu aşa cum se arată în imaginea de mai jos.


Add a layer style Inner glow
Adaugă o strălucire stil strat interior

Şi aici este efectul de stil finală.


Add a new layer effect in photoshop
Adauga un efect de strat nou in Photoshop

Pasul 8: Adaugă un nou layer şi selectaţi "accident vascular cerebral 'din meniul' Edit 'în partea de sus şi să dea culoare verde, 6px în interiorul frontierelor. Urmaţi imagine probă.


Use stroke to create border from edit menu.
Utilizaţi accident vascular cerebral pentru a crea frontieră din meniul de editare.

Pasul 9: Acum aveţi o imagine ca aceasta. Schimbarea stilului de la panoul de stratul de sus la "Screen" va da un efect transparent.


Use stock to create border from edit menu.
Utilizaţi pentru a crea stocul de frontieră din meniul de editare.

Pasul 10: Adaugă un nou layer si deseneaza un dreptunghi rotunjit cutie aşa cum se arată în imaginea de mai jos. Este aceeaşi ca şi "Pasul 3:" Eu descriu înainte.

Draw a rounded rectangle box
Desenaţi o cutie dreptunghi rotunjit

Pasul 11: "mască de strat Adauga 'Selectaţi din bara de jos iconiţe în fereastra Layer, şi" icoana Gradient ", selectaţi din" Instrumente "fereastră. Acum, faceţi clic şi glisaţi mouse-ul pe caseta de dreptunghi rotunjit să se aplice de sus în jos şi ar trebui să vedeţi rezultat similar ca aceasta.


Add layer mask and Gradient icon for lighting effect
Adauga masca strat şi pictograma Gradient pentru efect luminos

Pasul 12: Acum, adăugaţi un alt strat şi de a desena un cerc, cum ar fi imaginea de mai jos şi schimbare "Opecity" de la panoul de stratul de la aproximativ 50%.


Opecity  to use highlight effect
Opecity de a utiliza intrării în vigoare a evidenţia

Pasul 13: Acum timp să elaboreze o icoana tine ca tine loc sau puteţi utiliza orice pictogramă existente din colecţia dumneavoastră. Am trage doar un aparat de fotografiat repede.


Draw camera in photoshop
Egal camerei în Photoshop



Aveţi posibilitatea să adăugaţi mai multe efecte de iluminare, dacă preferaţi, dar este în totalitate până la tine.


Lighting effect on button
efect luminos pe butonul

După ce aţi butonul gata, timp sarcina de a crea cât mai multe doriţi, în doar câteva minute. Eu am acum, sunet play, Ascultaţi, Audio Device, Egalizator, DVD, CD, Mic,, înregistrare video, panglică, control volum şi camera foto.


Sound play, Listen, Audio Device, Equalizer, DVD, CD, Mic, Recording, Video, Tape, Volume Control and camera
Sunet play, Ascultaţi, Audio Device, Egalizator, DVD, CD, Mic, de înregistrare, video, Tape, Control volum şi camera
S-au găsit acest tutorial util? Puteţi cumpăra o cafea pentru mine, poti plati aici ! Noroc! :)

pixel RIATMP1157  How to make button and icons

Ponderea şi Bucuraţi-vă de
  •  RIATMP1157  How to make button and icons favicons?domain=digg RIATMP1157  How to make button and icons favicons?domain=www.dzone RIATMP1157  How to make button and icons favicons?domain=www.facebook RIATMP1157  How to make button and icons favicons?domain=www.google RIATMP1157  How to make button and icons favicons?domain=www.linkedin RIATMP1157  How to make button and icons favicons?domain=favorites.live RIATMP1157  How to make button and icons favicons?domain=www.mixx RIATMP1157  How to make button and icons favicons?domain=www.myspace RIATMP1157  How to make button and icons  RIATMP1157  How to make button and icons favicons?domain=reddit RIATMP1157  How to make button and icons favicons?domain=www.stumbleupon RIATMP1157  How to make button and icons favicons?domain=technorati RIATMP1157  How to make button and icons favicons?domain=twitter RIATMP1157  How to make button and icons favicons?domain=buzz.yahoo RIATMP1157  How to make button and icons
Lasă un Răspuns 7058 vizualizări, 10 de astăzi până în prezent |
Urmaţi Discuţie

One Response to "RIATMP1157-Cum sa faci butonul şi icoane"

  1. Zoran Says:

    Nu sunt sigur că acest lucru este adevărat:), dar multumesc pentru un post.
    Mulţumiri

Lasă un Răspuns