Share
Actualizare: Coding tut disponibil acum! Astăzi o să vă propunem cum să vă creați propriul "glisieră suculentă". Aceasta este o modalitate excelentă de a adăuga o anumită adâncime și dimensionalitate propriilor dvs. modele - și este soluția perfectă pentru un cursor de imagine!
Actualizare codificare: Acum puteți să luați porțiunea de codare completă a tutorialului la Nettuts! Voiți ați întrebat și astfel veți primi :)
Și acum, pentru oricine dorește o piesă de joc, iată versiunea completă scrisă a tutorialului. Veți observa modificări ușoare față de videoclip (videoclipul se efectuează în zbor), dar aceleași tehnici de bază se aplică ambelor walkthrough-uri.
Imaginea folosită pentru demo este un tapet exclusiv pentru Envato Marketplace de la reAdactor. Puteți găsi mai multe dintre aceste imagini de fundal reci aici!
Vom începe pe documentul nostru de 600x400 px. Am adăugat un fundal gri deschis, cu un model subtil de rețea, doar pentru a putea vedea elementul nostru de pe documentul un pic mai bun pe măsură ce îl creăm.
Începeți prin a desena un dreptunghi simplu (aproximativ 450x270 px) pe tabloul de bord. Vom adăuga o cursa foarte ușoară în jurul dreptunghiului prin panoul cu opțiuni de strat (Stroke = 1px Outside, # c8c8c8). Motivul pentru care adăugăm acest accident vascular cerebral este de a adăuga un pic de separare între cadrului nostru și fundal? acest lucru va fi deosebit de important dacă lucrați pe un fundal alb.
Apoi, vom începe "umbra" noastră sub cadru. Începeți prin simpla apucare a instrumentului Basic Brush și setați dimensiunea la 40%, iar Duritatea la 0%. Începeți un nou strat, apoi țineți apăsată tasta Shift (pentru a vă menține linia dreaptă) și trageți o linie scurtă (aproximativ jumătate din lățimea cadrului nostru). A obține acest perfect nu contează? vom ajusta mărimea folosind instrumentul de transformare în pașii următori.
Acum, să rotam pătratul nou în strat foarte ușor; Unghiul pe care l-am folosit a fost de 2,5, dar poți să te pui singur. Cu cât unghiul este mai adânc, cu atât va fi mai ascuns ulterior umbra. Puteți utiliza fie rotirea fie Free Transform (Ctrl + T) pentru a face truc.
Duplicați primul strat periat în "umbră" (Ctrl + J) și apoi îl răsturnați orizontal (Editați> Transform> Flip orizontal). Rezultatul ar trebui să fie o umbră care este opusul primei.
Mutați ambele straturi de umbre în spatele stratului "cadru" și scalați-le (selectați ambele straturi și apăsați pe Ctrl + T) astfel încât să se potrivească doar în interiorul lățimii totale a dreptunghiului cadrului.
În cele din urmă, îmbinați ambele straturi de umbre împreună (Ctrl + E) și împingeți stratul de umbră în locul potrivit (utilizați instrumentul de selecție de bază [V] și utilizați tastatura pentru a urca). De asemenea, puteți ajusta opacitatea stratului de umbră pentru a vă potrivi preferințelor personale. Am folosit aproximativ 50%, poți să faci mai mult sau mai puțin în funcție de ceea ce cauți.
Pasul Bonus: Dacă doriți, puteți utiliza și mai mult umbra utilizând aceste tehnici de bază, plus filtrul "Gaussion Blur". Cu cât se estompează mai mult umbra, cu atât va fi mai dispersată. Puteți, de asemenea, să vă stăpâniți în jurul valorii de umbră cu ajutorul instrumentului warp.
Bine, acum avem fundalul și umbra de bază. Următorul pas este crearea stratului interior "imagine". Faceți acest lucru fie prin crearea unui nou dreptunghi (folosind același stil de cursă ca fiind primul), fie pur și simplu duplicați stratul original și folosiți instrumentul Convert Point pentru a împinge în fiecare parte aproximativ 10 pixeli.
Puteți ajusta, în mod evident, spațierea în funcție de propriile dvs. preferințe. Cu cât spațiul este mai mare, cu atât mai mare va fi afișarea mai târziu a plăcuțelor. Puteți adăuga, de asemenea, un padding de fund mare pentru a economisi spațiu pentru un titlu și o descriere a imaginii.
Apoi, plasați imaginea pe care doriți să o utilizați în document (o puteți glisa dintr-un dosar sau utilizați instrumentul Import). Veți dori să scalați și să poziționați imaginea peste stratul de formă "interior" și apoi să faceți imaginea dvs. o mască de tăiere peste același strat de formă interioară. Puteți face o mască de tăiere prin clic dreapta Faceți clic pe stratul de imagine și apăsând "Creare Clipping Mask".
Adăugați o ușoară Inner Shadow utilizând panoul Straturi de strat (Faceți dublu clic pe stratul de formă). Demo-ul folosește următoarele setări:
Din nou, acesta este un caz în care puteți obține un efect de obținere a rezultatelor dorite. O umbră mai întunecată va face ca imaginea să pară mai dramatică și mai adâncă. O umbră mai ușoară (sau nici o umbră) va face imaginea să pară mai plată.
Whallah!
Butoanele din stânga și din dreapta din partea laterală fac parte din atracția principală a acestui tip de cursor deoarece acestea se sparg doar în afara cadrului și creează o formă mai interesantă pentru cursorul nostru.
Începeți prin desenarea unui cerc (țineți apăsată tasta Shift pentru a păstra cercul perfect când utilizați instrumentul Ellipse). Dimensiunea trebuie să fie de aproximativ 60 de pixeli (puteți privi în panoul Informații când desenați cercul pentru a vedea dimensiunea acestuia afișată în text).
Apoi, adăugați o curbă de 1px utilizând aceeași culoare pe care am folosit-o pentru cadrul de fundal.
Ca un bonus - adăugați o umbră de cădere ușoară pentru a imita umbra pe care am tras-o sub rama. Umbra de Drop pe care am folosit-o a fost de aproximativ opacitatea de 15%, distanța 3 și dimensiunea 4. Unghiul ar trebui să reflecte sursa noastră de lumină în centrul cadrului - deci în acest caz este de aproximativ 130 de grade.
Acum adăugați săgețile noastre. Puteți utiliza o versiune obișnuită a Photoshop Shape sau o versiune text a săgeților utilizând textul dvs. preferat. Puteți chiar să vă desenați în Illustrator dacă preferați să obțineți o formă cu adevărat unică. În cazul nostru am folosit ">>" folosind fontul Lucida Sans.
Apoi, grupați împreună stratul de formă al cercului și stratul Săgeată selectând-le pe ambele și apăsând pe Ctrl + G.
Acum, trageți o mască peste grup pentru a face ca aceasta să pară ca și cum ar fi doar puțin suprapusă cadrul nostru. Pentru a face acest lucru: Desenați o selecție dreptunghiulară Marquee, apoi apăsați butonul "Add Mask Layer" când aveți folderul grupului selectat.
Lucrul minunat despre această mască "de grup" este că acoperă de asemenea toate stilurile stratului. Dacă am încercat doar să mascăm cercul în sine, accidentul și umbra vor fi decupate, făcându-le vizibile peste cadru (ceea ce nu vrem).
În cele din urmă, duplicați grupul de butoane și rotiți-l orizontal. Îl vom deplasa în poziție în partea stângă a documentului. Singurul sfat real aici este că va trebui, de asemenea, să reglată unghiul umbrei picăturilor la aproximativ 50 de grade pentru a se potrivi cu sursa de lumină din centrul cadrului. Asigurați-vă că opriți selectorul de lumină globală pentru a vă asigura că nu ajustați celălalt umbră.
Ultimul element din acest cursor este micul modul "buton de cerc" care va arăta câte imagini aveți în diapozitiv.
Începeți prin a crea un simplu cerc de 13 pixeli (rețineți din nou Shift pentru al obține perfect). Vom adăuga o altă lovitură de 1px în exterior folosind aceeași culoare ca toate cursele anterioare (# c8c8c8 pentru demo).
În cele din urmă, adăugați un gradient foarte subtil peste cerc (gri deschis [# D9D9D9] amestecând la alb în partea de sus). Puteți regla colorarea gradientului pentru a se potrivi preferințelor dvs., dar ideea aici este de a face cercul să se simtă mai mult ca un buton pe care utilizatorul îl poate apăsa în jos.
Duplicați cercul inițial de câteva ori și loviți-l în lateral (ar trebui să aveți cât mai multe cercuri pe măsură ce aveți imagini în diapozitiv).
Aceste cercuri sunt extrem de dificil de văzut acum? astfel încât să adăugăm un fundal pentru ca acestea să fie ceva mai vizibile în imaginile luminoase.
Începeți prin desenarea unui dreptunghi rotunjit cu o rază de 10px (puteți regla raza la propriile dvs. dorințe). Apoi setați Fill la 50% pentru a face ușor să vedeți.
În cele din urmă, setați un Stroke de 2px (# a7a7a7) cu o opacitate de aproximativ 50% pentru a fi transparent. Efectul final ar trebui să fie un dreptunghi transparent rotunjit, cu o graniță subtilă.
Ultimul pas! Adăugați un cerc mai mic peste unul dintre cercurile originale și poziționați-l în centru. Reglați culoarea (puteți utiliza un gradient sau o culoare solidă) pentru a se potrivi culorilor proprii de branding. Veți observa că în demonstrație am folosit aceleași culori pe care le folosim în sigla Webdesigntuts.
Excelentă muncă! Acum că aveți setarea de bază a cursorului, puteți ajusta cu ușurință dimensiunea potrivită pentru proiectele proprii. De asemenea, puteți recupera acest lucru pentru a utiliza fundaluri diferite de culori, butoane restabilite sau chiar a adăuga texturi la cadrul propriu-zis. Limita este de până la tine - trebuie doar să ții cont de principiile de bază pe care le-am stabilit aici și vei face bine.
Accentsconagua