Share
Cu acest tutorial vom crea un buton de stil hi-tech care poate fi folosit în pagini de tip splash, aplicații sau prezentări Powerpoint. Vom folosi Illustrator pentru a crea vectori complexi și Photoshop pentru a dezvolta efecte realiste.
Folosind Illustrator vom crea un dreptunghi cu mărimea afișată. Cu instrumentul Rectangle faceți clic pe zona de lucru și va apărea o fereastră care ne va permite să determinăm dimensiunile exacte ale obiectului. Vă recomandăm să setați preferințele Illustrator folosind pixeli ca unitate de măsură.
Plasăm un ghid ca referință pentru alinierea orizontală. Utilizând instrumentul Plus Pen (pentru a adăuga puncte de ancorare la un vector existent) adăugăm un punct de ancorare suplimentar în partea superioară a dreptunghiului.
Acum, selectăm acest nou punct de ancorare și îl luăm mai sus decât linia și separăm punctul de ancorare inferior unul de celălalt pentru a obține un obiect cu această formă aproximată.
Cu mânerele punctului de ancorare, folosim punctul superior ca axă pentru o curbă moale.
Acum trebuie să obținem încă două obiecte care să integreze un obiect de trei puncte. Rotim acest vector folosind partea centrală a acestuia ca axă de rotație. Pentru a începe, selectați instrumentul de rotație și faceți clic pe partea de jos. Atunci vom vedea schimbarea cursorului într-o mică săgeată neagră.
Apăsând tasta Alt (pe care o folosiți pentru a duplica - veți vedea săgeata neagră împreună cu o săgeată albă), tragem obiectul. Folosim fereastra Information pentru a roti obiectul duplicat un anumit grad de grade. Având în vedere că acesta este un obiect de trei puncte, trebuie să împărțim 360 ° pentru acest număr (3), deci vectorul duplicat trebuie să se rotească la 120 °. Trageți-l până când vedeți acest număr aproximativ în fereastra Info.
Apăsând pe Ctrl + D (Windows) vom duplica automat ceea ce am făcut. Deci, acest vector va fi duplicat din nou la 120 °.
Ne unim aceste obiecte într-una. În fereastra Pathfinder unificăm vectorii: faceți clic pe opțiunea Unite și faceți clic pe butonul Expand pentru a converti grupul într-un singur obiect solid.
Acum, în jurul colțurilor acestui obiect. Accesați Efect> Stylă> Colțuri rotunde.
Setați un rază de 10 pixeli și previzualizați rezultatul, bifând caseta Opțiune de previzualizare. Radiusul depinde de amplitudinea curbelor pe care ați atras-o în obiectul principal. Cu opțiunea Previzualizare veți vedea dacă Radiusul înmoaie corect colțurile: dacă numărul de pixeli este excesiv, obiectul va arăta distorsionat și nu va fi rotunjit.
Acum, să separăm aspectul (efectul creat) de vectorul original. Mergeți la Object> Expand Aspect și obțineți vectorul final.
Acesta este rezultatul muncii noastre cu vectori în Illustrator. Este un obiect complex care trebuie făcut manual și de aceea folosim câteva tehnici pentru a realiza un vector simetric și ergonomic.
Cum butonul nostru va avea o inserție interioară - un fel de obiect asamblat în partea frontală - vom repeta pașii anteriori, dar de data aceasta cu un obiect mult mai mic și mai scurt.
Urmând aceleași pași de la Pasul 1 la Pasul 12, vom crea acest nou obiect. Restul vectorilor pot fi creați manual sau în mod automat fără prea multă complexitate.
Creăm doar o jumătate dintr-un obiect nou și apoi îl reflectăm pentru al face simetric. Urmați cu atenție pașii pe care îi vedeți pe acest grafic.
Folosind instrumentul Reflect duplicăm obiectul ținând apăsat tastele Shift + Alt.
Acum ne unim ambele jumătăți folosind instrumentul Pathfinder. Puteți șterge punctele de ancorare rămase ale acestei uniuni cu instrumentul Minus Pen.
Folosim aceeași metodă de duplicare descrisă mai sus, rotirea obiectului 120 ° pentru a obține și 3 obiecte identice și distribuite uniform.
În cele din urmă, vom crea un cerc simplu, un vector care va fi folosit ca LED-uri care vor aprinde butonul în starea de hover. Vom finaliza editarea în Photoshop pentru a adăuga tehnici de mascare a straturilor formate.
Acum, selectam toti vectorii si apasam Ctrl + C (Windows) pe care le copiem in clipboard-ul sistemului.
Închidem Illustrator și deschidem Photoshop. Creăm un .PSD de 1024x768 pixeli și această configurație inițială.
Pictim stratul inițial în negru. Apoi aplicăm un stil de strat pentru a crea un gradient de fundal.
Folosind culorile gri închis și negru, vom crea un gradient radial și vom ajunge la scala maximă (130-150%). Rețineți că în această fereastră de stilul stratului puteți trage gradientul pentru a lua centrul acestuia în locul dorit pe ecran.
Acum lipim vectorii sub formă de straturi de forme. Ctrl + V sau Editare> Lipire.
Avem vectorii într-un strat Shape și trebuie să le separăm în diferite straturi. Să duplicăm cât mai multe straturi ca părțile pe care le avem -4 în acest caz - și să eliminăm obiectele inutile pe fiecare dintre ele lăsând forma pe care o interesăm.
Ordinea straturilor este cea pe care o vedeți în imagine și nu uitați să denumiți fiecare strat pentru a vă organiza mai bine munca. Unele straturi vor fi adăugate la acestea, care vor fi create complet în Photoshop. Vom adăuga stiluri de straturi la butonul nostru principal.
Dacă faceți dublu clic pe stratul din fereastra cu butoane principale, deschideți fereastra de editare a acestor stiluri de straturi. În "Opțiuni de amestecare: implicit", luăm opacitatea acestui strat la zero pentru a vedea doar efectele stratului nostru. Începem prin adăugarea unui gradient circular utilizând aceleași culori de fundal # 333333 (gri închis) și # 000000 (negru). Asigurați-vă că acest gradient este moale de la centru până la margine, mărind dimensiunea acestuia până la 120%.
Cu o umbra interioara si dezlipirea optiunii Use Global Light (pe care o vom folosi TOATE la 90 °) inversam aceasta umbra, tragand editorul de unghi al umbrei la -90 °. Acest lucru ne va ajuta să consolidăm umbrele zonei de fund ...
Am încheiat prima parte a procesului de editare a butoanelor. Acum avem gata partea frontala a acesteia care are o suprafata opaca pe care o vom adauga mai tarziu extrudari lucioase si pseudo 3D.
Acum creăm o lovitură cromată în jurul butonului. Adăugăm o umplere tip Gradient de 3 pixeli. Adăugăm mai multe detalii la acest gradient în interiorul accidentului. Reproducem o suprafață reflectorizată metalică cromată în care utilizăm resursele care reflectă orizontul și cerul unei scene în aer liber.
Aplicăm stilul Reflected în gradient pentru a mări cantitatea de reflexii cromate. Prin rotirea unghiului gradientului plasăm zonele mai ușoare unde dorim. În acest caz, luminozitatea maximă trebuie văzută în zona superioară a cursei.
Acum facem suprafața cromată mai complexă prin adăugarea mai multor detalii de lumini și umbre la metal. Cu Bevel & Emboss și conturul Gloss Contour veți vedea în această imagine adăugăm mai puține detalii la suprafață.
Cu Inner Glow adăugăm o margine interioară mărginită la buton ca și cum ar fi fost 3D, încercând să facem mai clară îmbinarea cu fundalul obiectului.
Acum avem nevoie de o selecție pentru a picta manual unele detalii asupra butonului. Primul pas este să utilizați stratul de formă al butonului și să obțineți o selecție care va fi folosită ca o mască pentru a fi vopsită. Accesați fereastra Căi și selectați stratul butonului pentru a crea o selecție cu aceeași formă.
Acum contractăm mărimea acestei selecții, accesând Selectare> Modificare> Contract. Reducem 10 pixeli selecția de la dimensiunea originală.
Acum vom înmuia selecția. Accesați Selectare> Modificare> Feather sau Alt + Ctrl + D (Windows). Aplicăm 1 pene pixel și apăsați OK.
Ascundem selecția utilizând Ctrl + H pentru a vizualiza mai bine ce vom face. Cu ajutorul instrumentului Pensulă, folosind o perie de 35 pixeli și o Flux de 10%, vopsea în interiorul unui nou strat câteva reflexii luminoase asupra butonului, folosind culoarea albă. Pe măsură ce lumina scenei noastre vine de sus, vom aplica mai multă luminozitate în zona superioară a butonului și vom îmbunătăți cu puțină lumină pete unele zone întunecate în partea de jos a obiectului.
În continuare menținând selecția noastră (care va deveni din nou vizibilă cu ajutorul lui Ctrl + H), vom reduce numărul de pixeli pentru a șterge puțin din munca pe care am făcut-o cu peria și pentru a obține un efect mai sofisticat. De data aceasta contractăm 3 pixeli selecția.
Ascundem această selecție din nou utilizând Ctrl + H și apăsând tasta Ștergere ștergem câteva părți ale traseelor anterioare de perie. Acest lucru ne-a permis să picurăm manual și apoi să ne lustruim lucrarea creând o zonă de margine înclinată care întărește aspectul 3D al butonului și conferă o suprafață de plastic.
Am terminat structura butonului. Acum trebuie să creăm o inserție în centrul său. Primul pas este de a aduce opacitatea stratului de formă la zero (0%).
Să creați o nouă Shadow Inner în unghiul inversat, la fel ca în cazul butonului principal. Asigurați-vă că adăugați valorile pe care le vedeți în această imagine.
Acum, un Accident mic va reprezenta o teșitură între cele două obiecte.
Următorul pas este o Umbre de Drop folosită ca o suprafață luminată de ecranul Blend Mode și culoarea albă. Dimensiunea acestei lumini trebuie să fie de 2 pixeli pentru ao face foarte ascuțită, ca și cum ar fi o margine mărunțită care primește o lumină de sus.
În cele din urmă, cu o strălucire interioară, recreăm marginea tăiată a butonului interior. Acest lucru face ca observatorul să interpreteze acest obiect ca un panou cu margini micșorat, care este cuplat în interiorul butonului principal.
Am terminat cu butonul principal. De fapt, nu este un buton plasat pe un fundal: prin anumite efecte suplimentare, acesta va fi văzut ca o inserție a suprafeței de fond, care are un accident vascular cerebral metalic în jurul valorii și care conține un buton în interiorul care poate fi apăsat.
Acum creăm pictograma de alimentare a butonului. Descărcați acest font gratuit: http://www.dafont.com/guifx-v2-transports.font. Veți putea crea acest obiect utilizând tasta "q" și acest font în 48 de puncte.
În această imagine, vedeți modul în care putem adăuga o margine exterioară mărginită la pictogramă, utilizând o cursă de 3 pixeli de aceeași culoare ca suprafața butonului și apoi aplicând efectul Stroke Emboss cu aceste valori.
Efectul Stroke Emboss ca opțiune pentru a crea o margine teșiturică ne va permite să creăm efectul derulat al pictogramei pe fundal.
În cele din urmă, adăugăm o textură metalică pictogramei utilizând un gradient, după cum puteți vedea în această imagine.
Acum vom crea 3 led-uri care vor aprinde butonul atunci când vom plasa mouse-ul peste el. Primul pas este să dai layerului Shape culoarea # 06B9FB, făcând dublu clic pe el pentru a-și modifica culoarea.
Folosind stratul de formă al butonului principal, vom crea o selecție.
Extindeți mărimea acestei selecții accesând Selectare> Modificare> Extindeți.
Am setat o extensie de 8 pixeli și apăsăm pe OK.
Inversăm această selecție utilizând Selectare> Inversă.
Cu această selecție inversată, creăm o mască pentru a obține forma finală și mărimea ledurilor din jurul butonului.
Cu un accident vascular cerebral cu aceeași culoare a suprafeței butonului (utilizați selectorul de culori pentru ao obține), creăm o mică înclinare în jurul acestor lămpi. Acest lucru ne va permite să dăm ideea unui obiect inserat pe suprafața de fond.
Cu Bevel și Emboss vom da o umbră superioară și o lumină de fund pentru Accident vascular cerebral (ca și cum lumina de sus ar avea impact asupra acestor margini teșite).
Cu un Shadow Inner inversat și Multiply creăm o reflecție acrilică pe zona superioară a acestor led-uri.
Finalizăm ediția acestor obiecte cu un Drop Shadow care ne permite să dăm ideea că aceste detalii în designul butonului schimbă suprafața de fond, apăsând-o în jos și creând zone umbrite în jurul lor.
Acesta este modul în care arată butonul nostru până acum, dar mai există încă unele efecte care lipsesc.
Vom duplica stratul LED-urilor anterioare și vom picta acest nou strat Shape în alb. Începem să creăm efectul de lumină cu Outer Glow și aceste valori.
Adăugăm iluminarea zonei lângă LED-uri cu ajutorul funcției Drop Shadow în modul Blend Screen.
Starea de rulare a butonului sa terminat. Acum, folosindu-ne o selecție cu Feather-ul de 20 de pixeli în stratul nou, facem ca fundalul să aibă o înfățișare convexă în spatele butonului ca și cum fondul ar ieși din centrul său, creând o minge 3D moale care va reacționa la lumina de mai sus.
Vopsea această selecție în alb, înmuiată anterior cu o pată de 20 de pixeli. Puteți utiliza instrumentul Paint sau tasta de comenzi rapide Alt + Backspace care vopsește stratul cu culoarea pe care o utilizați ca prim plan.
Am setat opacitatea acestei sfere la zero (0%) în fereastra ediției Styles Layer.
Acum, cu un gradient de transparență de 50% și Blend Overlay (folosind culorile alb și negru care sunt setate implicit în editorul de gradienți) ajungem la această senzație sferică pe fundalul butonului.
Acum am terminat cu butonul și toate detaliile. Trebuie doar să creăm niște margini tăiate în fundal utilizând vectorii simetrici creați în Illustrator.
Ca întotdeauna luăm opacitatea la zero.
Cu un Accident vascular cerebral și aceste valori vom crea basorelieful acestor teșite în fundal.
Cu alb Drop Shadow și Blend Screen, creăm suprafața luminată a acestor margini tăiate.
În cele din urmă ascundem o parte din aceste margini tăiate cu o mască de 20 de pixeli dedurizată. Ideea este că acestea se vor uni încet cu fundalul și vor dispărea spre colțuri.
A fost o plimbare lungă, dar rezultatele au meritat. Atingerea finală este o mică mișcare a lentilei deasupra zonei luminoase superioare a marginii cromate. Salvați întotdeauna un fișier .PSD cu aceste resurse care oferă un efect realist și fotografic obiectelor reflectorizante. Puteți vedea imaginea finală de mai jos sau puteți vedea o versiune mai mare aici.
Accentsconagua