Share
Photoshop CS6 este dotat cu funcții noi care vă vor ajuta să creați o interfață mai bună. În acest tutorial vom folosi noile tehnici de editare Vector și Photoshop pentru a crea o interfață de bord de administrator. De asemenea, vom profita de noua caracteristică Photoshop pentru a crea o imagine grafică clară și curată. Să începem!
Următoarele bunuri au fost utilizate în timpul producerii acestui tutorial.
Vom folosi 960 grilă cu aspectul coloanei 12 din 960.gs ca cadru pentru designul nostru. Descărcați fișierul șablon în format zip și apoi deschideți 12 Coloane Grilă. Faceți clic pe pictograma ochi din fața stratului 12 Col Grid pentru a o ascunde.
Faceți clic pe pictograma cerc alb-negru pentru a adăuga un nou strat de ajustare. Selectați Culoare solidă și alegeți alb în următoarea casetă de dialog.
Faceți un nou strat. Faceți clic pe Editați> Umpleți și selectați Utilizare: Model. Utilizați modelul de linie diagonală din PSDfreemium. Deoarece aceasta este CS6, să încercăm să folosim cea mai nouă funcție. Activați modelele Scripted și selectați Symetry Fill.
Tone down layer-ul Opacitate la 4%.
Vrem să fim siguri că toată zona straturilor a fost organizată cu atenție. Deci, să începem prin gruparea lor într-o ordine logică. Selectați ambele straturi - fundal și model - și apoi apăsați Command / Ctrl + G pentru a le pune în stratul de grup.
Nu avem nevoie de stratul de fundal, deci ștergeți-l trăgându-l pe pictograma de ștergere.
Selectați stratul de grup. Apăsați F2 și apoi schimbați numele. Apăsați fila pentru a edita automat următorul strat. Schimbați numele și apoi repetați acest lucru în următorul strat.
Activați instrumentul rotunjit dreptunghi. Desenați o formă dreptunghiulară rotunjită cu o rază de 10 px și o lățime de 2 coloane. Plasați-o în partea dreaptă sus a pânzei. În bara de opțiuni, setați Culoarea de umplere la # f16424 și Stroke la None.
Faceți dublu clic pe forma stratului din panoul Straturi pentru a deschide caseta de dialog Stil stil. Activați suprapunerea modelului. Selectați modelul de pixel din PSDfreemium. Reduceți amploarea și opacitatea pentru a le conferi un aspect textil natural.
Faceți un strat nou deasupra formei. Acționați peria moale și umbra de vopsea pe partea superioară.
Alt - faceți clic între baza de logo și umbra acesteia. Aceasta va transforma stratul într-o mască de tăiere și va pune umbra în interiorul logo-ului.
Repetați procesul de câteva ori. Puteți adăuga mai multe straturi dacă este necesar. Vopseaua evidențiază partea inferioară a acesteia.
Creați un strat nou sub siglă. Comandă / Ctrl - faceți clic pe formă pentru a face o nouă selecție în funcție de forma sa. Completați selecția cu negru.
Aplicați filtrul Gaussian Blur. Faceți clic pe Filter> Blur> Blur Gaussian.
Apăsați Command / Ctrl + T pentru a efectua transformarea. Faceți clic dreapta și alegeți Warp. Caseta de legare a transformării este împărțită în cutii 3 x 3. Trageți cutia inferioară în jos. Apăsați Enter pentru a accepta rezultatul transformării.
Desenați o formă mai mică dreptunghiulară rotunjită. Din bara de opțiuni, setați Fill to none și Stroke la alb cu dimensiunea 1 pt.
Deschideți opțiunile pentru Accident vascular cerebral și apoi selectați presetarea întreruptă. Faceți clic pe Mai multe opțiuni pentru a edita setările liniei întrerupte.
În panoul Straturi, faceți dublu clic pe stratul acesteia pentru a deschide caseta de dialog Stil de stil. Activați Drop Shadow, setați unghiul la 90 °, activați Utilizare lumină globală, setați dimensiunea la 0 px și distanța 1 px.
Activați instrumentul Rectangle și faceți clic o singură dată pe panza. În caseta de dialog, setați dimensiunea acesteia la 6 x 30 px. Faceți clic pe OK pentru a începe formarea.
Faceți clic pe caseta de umplere din bara de opțiuni. Selectați Gradient și setați culoarea de la #dfdfdf la #ffffff.
Desenați o altă cale dreptunghiulară în interiorul siglei. Faceți dublu clic pe stratul său din panoul Straturi și apoi activați Drop Shadow.
Adăugați Drop Shadow la forma stratului.
Mai jos rezultatul este o mărire mai mare. După cum puteți vedea că până acum forma noastră vectorială este întotdeauna crocantă. Nu există jumătate de pixel! Aceasta este datorită funcției de rupere vectorială în Photoshop CS6. Puteți dezactiva această funcție dacă doriți să o faceți din caseta de dialog Preferințe - încă nu am nicio idee de ce ar face cineva asta.
Adăugați text în interiorul siglei. Putem adăuga contrastul în text prin simpla schimbare a unora dintre caractere în caractere aldine.
Adăugați o altă Shadow Drop pe text.
Activați instrumentul Rectangle și apoi trageți un dreptunghi ca fundal de conținut principal. Setați lățimea la 800 px, Umpleți: #eeeeee și Stroke: #cccccc, Dimensiune: 1 pt.
Adăugați Outer Glow cu următoarele setări.
Adăugați o formă triunghiulară și un dreptunghi rotunjit. Setați modul lor de cale pentru a combina formele.
Adăugați un text pe fila pentru a adăuga titlul acestuia. Adăugați o mică pictogramă de statistică realizată din mici dreptunghiuri.
Desenați o formă de dreptunghi alb ca bază pentru graficul principal. Setați lățimea sa la 8 coloane. Asigurați-vă că setați Stroke lui la None. Adăugați o strălucire a stratului de stil.
Apăsați Command / Ctrl + J pentru a duplica forma. Adăugați o formă de dreptunghi mare în partea inferioară a acestuia și setați modul său pentru a șterge Frontul. Adăugați suprapunere în gradient.
Desenați un dreptunghi rotunjit. Setați Umpleți la alb fără lovitură. Utilizați aceeași strălucire exterioară și plasați-o în spatele formei anterioare.
Faceți un nou strat între cele două forme. Faceți o selecție eliptică și apoi completați-o cu negru. Deselectați (Command / Ctrl + D) și apoi înmuiați-l adăugând Blur gaussian.
Activați instrumentul Tip. Adăugați titlul secțiunii.
Activați instrumentul de linie și apoi trageți o linie de 1 px. Stabiliți culoarea stroke pentru # e4e4ee4.
Iată diferența înainte și după adăugarea liniei.
Desenați un dreptunghi. Setați Fill to None și Stroke la #cccccc.
Selectați tipul Stroke în bara de opțiuni. Faceți clic pe Mai multe opțiuni și setați Dash and Gap la 4 și 2.
Desenați o linie orizontală de 1 px cu Stroke #cccccc. Selectați cursorul dat.
Activați instrumentul de selectare a căii și selectați calea de linie pe care tocmai am făcut-o mai devreme. Apăsați Command / Ctrl + Alt + T pentru a duplica și transforma. Apăsați Shift + Săgeată dreapta de două ori pentru ao deplasa cu 20 px spre dreapta. Repetați procesul de transformare și duplicare prin apăsarea comenzii / Ctrl + Shift + Alt + T.
Continuați repetarea procesului până când dreptunghiul este umplut cu coloane.
Reduceți opacitatea stratului la 30%.
Repetați pașii anteriori, dar de data aceasta cu linii orizontale.
Mai jos rezultatul. Acum, avem o rețea subtilă pe fundalul statistic.
Adăugați valori pe ambele axe, x și y.
Activați instrumentul de linie și desenați o linie de 1 px pe grila. Setați culoarea Stroke în # f16424.
Shift - glisați pentru a adăuga mai multă linie. Continuați să adăugați mai multe linii până când avem o diagramă completă a liniei.
Desenați o formă de cerc mic și plasați-o chiar pe diagrama liniei. Setați umplutura la culoarea albă și aceeași la culoarea de umplere a liniei.
Faceți dublu clic pe stratul de cerc și activați Stroke Style Style. Setați culoarea albului și poziția în exterior.
Selectați calea cercului utilizând Instrumentul de direcționare a traseului și apoi Alt - trageți-l pentru ao duplica.
Utilizați aceiași pași pentru a desena o altă diagramă de linii. De această dată utilizați o culoare diferită și setați opțiunile Stroke la punctat.
La fel ca în graficul precedent, adăugați cercuri pe fiecare segment.
În partea superioară a diagramei, adăugați legenda grafică. Pur și simplu adăugați o linie scurtă folosind aceleași proprietăți ca și diagrama de linie și adăugați o scurtă descriere.
Desenați un dreptunghi rotunjit. Setați Fill to #eeeeee și Stroke la #cbcbcb.
Adăugați umbra interioară în stilul stratului și suprapunerea în gradient.
Desenați o formă de dreptunghi în centrul formei dreptunghiului rotunjit. Puteți utiliza orice culoare pentru completarea sa. Setați Stroke lui la None. Reduceți valoarea completă la 0%. Adăugați o suprapunere cu strat de stil.
Desenați o linie de 1 px cu culoarea #cbcbcb în partea stângă și dreaptă.
Adăugați o selecție a intervalului de timp. Puteți vedea că textul cu fundal diferit este acum în stare activă.
Să folosim stilurile de caractere pentru a defini caracterul nostru implicit. Această caracteristică este o versiune simplificată a stilului de caractere din Adobe InDesign. Dacă utilizați frecvent InDesign, veți recunoaște instantaneu acest lucru.
Deschideți panoul Stiluri de caractere și apoi faceți clic pe pictograma nouă. În caseta de dialog, setați tipul fontului la Arial Regular, Dimensiune la 12 pt și Color la # 767676. Vom folosi acest stil de caractere în cea mai mare parte a textului. Din acest motiv îl vom numi, de asemenea, ca stil de stil implicit.
Să aplicăm acest stil de caractere la text. Activați instrumentul Tip, selectați textul și apoi faceți clic pe Stilul de caractere pentru al aplica.
Ce se întâmplă dacă vrem să salvăm proprietățile din textul existent ca un stil de caractere? Să facem asta la valori pe axa graficului. Creați noi stiluri de caractere. Selectați textul și faceți clic pe pictograma Redefinire.
Faceți dublu clic pe stilul de caractere pentru a modifica opțiunile acestuia. Schimbă-i numele. Aplică acest stil de caractere la toate valorile de pe ambele axe.
Lucrul frumos despre stilul stilului (și stilul paragrafului) este că îl puteți edita pur și simplu pentru a edita fiecare text care utilizează acel stil. Iată un exemplu. Să editați axa graficului - un stil de caractere pe care l-am făcut mai devreme pentru fiecare valoare pe ambele axe. Faceți dublu clic pe acesta și schimbați tipul și dimensiunea fontului.
Activați instrumentul rotunjit dreptunghi. Desenați un dreptunghi rotunjit și adăugați un mic triunghi în partea stângă. Setați Fill: # f1f2f2 și Stroke: Niciuna.
Faceți dublu clic pe stratul din panoul Straturi și adăugați Stroke neagră. Poate că vă întrebați, de ce nu folosim opțiunea Stroke direct de la proprietatea sa? Răspunsul este în Stroke Style Style, puteți schimba Opacitatea Stroke-ului. Asta e ceva ce tot nu poți să faci în Photoshop CS6. De asemenea, adăugați Overlay Glow and Gradient Overlay.
Duplicați forma și schimbați Culoarea de umplere la # f16424. Eliminați stilul stratului. Adăugați calea dreptunghiului în partea inferioară a acestuia și setați modul său pentru a șterge forma frontală.
Adăugați layer Style Stroke și Gradient Overlay la forma.
Desenați o linie verticală de 1 px. Setați culoarea de umplere la negru. Adăugați stiluri de strat Stroke. Reduceți straturile Opacitatea la 8%.
Adăugați un titlu mic pe formă. Salvați proprietatea caracterului ca un stil de caractere. Adăugați umbra de umplere a stilului de strat.
Adăugați un alt titlu pe cealaltă parte. Utilizați aceleași stiluri de caractere și aceeași umbră de cădere.
Adăugați un procentaj în interiorul acestuia. Este întotdeauna o idee bună să o salvați ca și Stil de Caractere. În acest fel, puteți modifica cu ușurință aspectul său din panoul Șabloane de caractere.
Activați instrumentul poligon și setați poziția Side la 3 în bara de opțiuni. Desenați un triunghi mic îndreptat în sus. Setați Fill: # c1c1c1 și Stroke: Niciuna.
Adăugați Shadow Inner Style.
Adăugați un cerc mic și o altă formă de triunghi - îndreptată în jos de data aceasta. Utilizați aceeași culoare și stilul stratului.
Adăugați numărul procentual. Ca de obicei, asigurați-vă că ați salvat stilul său de caractere.
Datele sunt pozitive. Deci, să-i accentuăm prin activarea săgeții în sus. Schimbați forma Umpleți culoarea în # 4ff25d.
Duplicați numărul pentru alte date.
Desenați o secțiune similară pentru un grafic mai mic. Puteți utiliza aceleași tehnici explicate mai sus. Asigurați-vă că utilizați o dimensiune mai mică a textului pentru titlu.
Desenați o linie albastră de 1 px în interiorul grila. Setați opțiunile pentru cursa sa la punct.
Ca în graficul principal, adăugați un cerc pe fiecare punct.
Activați instrumentul Pen. Desenați o nouă formă care acoperă linia care o leagă de axa x. Utilizați aceeași culoare ca linia. Plasați forma în spatele cercurilor.
Adăugați un model pixel gratuit de la PSDfreemium.
Tonează Opacitatea la 50%.
Adăugați procentaj pe partea sa. În acest grafic mai mic, dorim și dimensiune procentuală mai mică a textului.
Adăugați un alt grafic.
În prezent, lucrăm la tab-ul Statistic. Să adăugăm o altă filă și să o punem în stare inactivă. Fila de fundal duplicat de statistici pe care am făcut-o la pasul 25 - 27. Va fi util dacă ascundeți tab-ul Statistic după aceea. Schimbați culoarea de umplere și stroke la # c1c1c1. Ștergeți dreptunghi mic pe partea stângă. Deplasați dreptunghiul rotunjit deasupra spre dreapta.
Adăugați o simplă pictogramă făcută dintr-un cerc fără umplere și stroke: # 646464 cu un i înăuntru.
Aduceți înapoi fila Statistici. Desenați o altă filă inactivă, dacă este necesar.
Activați instrumentul dreptunghi și desenați un dreptunghi în spatele filei principale. Setați Fill to #eeeeee și Stroke la #cbcbcb.
Desenați un dreptunghi rotunjit. Setați umplutura la un gradient de la # d6d6d6d la # f3f3f3 și Stroke # c1c1c1. Aceasta va fi fundalul pentru un meniu inactiv.
Duplicați dreptunghiul rotunjit. Schimbați culoarea pentru a completa gradientul de la # ef6526 la fa834d și Stroke: # f16424. Acesta este folosit pentru meniul activ. Asigurați-vă că plasați-l sub un triunghi mic din fila Statistici.
Duplicați primul dreptunghi rotunjit pentru a crea mai multe fundaluri pentru meniurile inactive.
Adăugați textul pe buton. Faceți dublu clic pe stratul său pentru a adăuga Shadow Drop Style. Pentru meniul inactiv, utilizați text întunecat și umbră de umplere a luminii.
Pentru meniul activ, utilizați textul alb și Drop Shadow întunecat.
Desenați un dreptunghi rotunjit. Nu trebuie să vă faceți griji cu privire la umplerea sau accidentul vascular cerebral.
Pentru completarea lui, să folosim același gradient din meniul bara laterală precedentă. Activați și Alegerea căii și selectați forma. Faceți clic cu butonul din dreapta și alegeți Copiere umplere.
Reveniți la forma nouă, faceți clic dreapta pe ea și alegeți Paste Fill.
Deschideți opțiunea de umplere din bara de opțiuni și faceți clic pe pictograma de sub previzualizarea gradientului pentru a răsturna direcția acesteia.
Repetați același proces pentru a copia setarea Stroke.
Adăugați umbra interioară cu următoarele setări.
Activați instrumentul Tip și eticheta buton alb. Adăugați umbra de umplere a stilului de strat.
Adăugați un triunghi mic îndreptat în jos. Umpleți: #eeeeee și Stroke: Niciuna. Adăugați aceeași Drop Shadow ca etichetă cu buton.
Adăugați o etichetă de 1 pixel separând eticheta și săgeata. Setați culoarea sa la # b04312 și apoi adăugați o umbre de culoare ușoară cu unghi de 180 °.
Să adăugăm o pictogramă mini-lupă pe buton. Începeți prin a desena o cale de cerc cu dimensiunea de 10 x 10 px. Setați Stroke-ul său în alb, cu Dimensiune: 2 pt și Completați la Niciuna.
Adăugați o linie de 2 puncte lângă cerc cu un unghi de 45 °.
Din nou, adăugați aceeași Shadow Drop la pictograma lupă.
Desenați un dreptunghi rotunjit de lângă buton. Utilizați Gradientul de umplere de la #ededed la alb și 1 pt Stroke # c1c1c1.
Adăugați text mic în interiorul formei. Vrem ca acesta să fie subtil. Deci, folosim un gri foarte deschis (# b0b0b0).
Accentsconagua