Share
Cu sărbătorile sunt chiar la colț, deși ar putea fi distractiv să creez un tutorial despre efectul populare 3D Wrap-Around Ribbon care a apărut atât de mult în acest an. Aceasta este o modalitate excelentă de a adăuga adâncimea designurilor dvs. și este destul de greu de completat. Vă voi arăta câteva exemple de acțiuni în jurul valorii de pe web, vă voi prezenta tehnicile de creare în Adobe Photoshop și apoi veți explica diferitele modalități de codare.
Înainte de a ne arunca în tutorial, să aruncăm o privire la o mână de site-uri care utilizează acest efect. Rețineți varietatea căilor pe care le puteți crea cu acest lucru, așa că nu vă opriți doar la acest tutorial! Principiile care stau la baza acestui fapt sunt foarte simple, dar după cum puteți vedea din exemplele de mai jos, puteți obține destul de frisky cu execuția.
Bine, acum că am văzut câteva exemple despre cât de creativă puteți obține cu acest efect, hai să săpăm în tutorial. Scopul este să înveți tehnicile de bază - ceea ce faci cu ei este locul în care ar trebui să devină interesant!
Creați un document nou în Photoshop. Dimensiunea nu contează cu adevărat ... vom folosi o pânză de 600 de pixeli lățime pentru acest walkthrough, dar puteți utiliza propriile dimensiuni dacă lucrați într-un design web.
Vrem să creăm o separare imediat, deci începeți prin a face întunericul de fundal și trageți un dreptunghi de culoare deschisă pe partea de sus.
Vom începe panglica prin desenarea unui dreptunghi de 310px pe 44px. Eu folosesc a rotunjit dreptunghi cu o rază de 4px, dar puteți utiliza și un dreptunghi pătrat dacă nu vă place colțul rotund.
Fiți atenți la lățimea: doriți să utilizați o lățime totală egală cu "lățimea coloanei de conținut" + "lățimea pe care doriți ca panglica să se suprapună cu fundalul principal". În acest exemplu, folosesc 310px, care este de 285px pentru conținut și aproximativ 25px de suprapunere.
Apoi, vreau să mă pătrund în colțul inferior, astfel încât să nu fie rotundă. Mă îndrept cu instrumentul Convert Point și pur și simplu urc la punct, astfel încât să existe un unghi de 90 de grade.
Motivul pentru care facem acest lucru este simplu: pentru a finaliza iluzia optică a panglicii "îndoite" în ea însăși, acest colț nu ar trebui să fie rotund. Puteți obține destul de creativ cu acest pas în sine, creând iluzia de "rotunjire" făcând colțul din dreapta-jos, de fapt, îndoit - dar vom păstra simplu în acest exemplu.
Acum vrem să tăiem forma panglicii. Folosiți instrumentul Polygonal Lasso pentru a scoate forma ... Țineți apăsată tasta "SHIFT" pentru a forța unghiuri de 45 de grade, dar puteți scoate orice formă pe care doriți.
Odată ce ați selectat forma dorită cu ajutorul instrumentului lasso, faceți acest lucru o Mască Vector pe partea superioară a stratului de panglică:
Următorul pas este să creați partea "umbrită" a panglicii care va dispărea în spatele primului rând. Începeți prin desenarea unui pătrat simplu.
Sfat: utilizați o culoare mai puțin întunecată decât partea din față a panglicii pentru a crea iluzia profunzimii.
Acum trebuie să creăm efectul "fold" - folosind din nou instrumentul Convert Point, mutați punctul de jos-dreapta al pătratului UP până când acesta este aproape de punctul de sus-dreapta.
Documentul dvs. ar trebui să arate astfel:
Bine - acum avem formele noastre de bază! Asta inseamna ca urmatorul pas este sa adaugam cateva stiluri de layer personalizate panglicii noastre. Puteți face ce vreți aici, dar vă voi arăta setările pe care le folosesc pentru a crea un aspect textil ușor.
Următoarele stiluri de strat se aplică pe partea frontală a panglicii.
Următoarele stiluri de strat se aplică pe partea inferioară a panglicii.
Whallah! Acum ar trebui să arate astfel:
Timp pentru un text! Eu folosesc 18pt "Eureka" cu o umbră de picătură ușoară, dar poți folosi tot ce-ți dorești.
Linile punctate se pot face într-o varietate de moduri, dar vă voi arăta cum să faceți acest lucru folosind textul de bază "puncte" - folosind "." cheie. Rețineți setările de mai sus - stratul de text este setat la opacitate de aproape 50% și folosesc o varietate de tehnici de caractere pentru a finaliza efectul.
Acum, să ne uităm la lumina "umbra" care ajută la transformarea punctelor într-un pic:
Aceasta ar trebui să completeze panglica pentru șina dreaptă; Puteți să copiați / lipiți și să răsturnați setul de straturi pentru a crea o versiune pentru partea stângă.
Acum, că am proiectat panglica, merită să luăm câteva minute pentru a discuta cele trei căi pe care le-ați putea folosi pentru a le codifica. Nu vom trece adânc în codul de linie; există o mulțime de tutoriale specifice CSS care vă pot ajuta cu acest lucru acolo (chiar și pe site-ul nostru de rețea, Nettuts!). Ceea ce voi face este să discutați despre abordările pe care le puteți utiliza și să împărtășiți câteva linkuri unde puteți găsi informații mai aprofundate despre ele.
Aceasta este abordarea cea mai simplă, cea mai simplă. Utilizează proprietățile de bază ale CSS de fundal, fără nici un fel de trucuri fanteziste, dincolo de o mică poziționare. Panglica dvs. ar putea părea puțin diferită, așa că vă voi face pașii de bază:
Pro: Aceasta este metoda cea mai simplă - este ușor de completat.
Contra: Re-jupuirea necesită deschiderea unui fișier Photoshop; Elementul nu se va "întinde" dacă vreți să fie altceva decât o dimensiune fixă.
Metoda clasică de "uși glisante" este similară cu prima abordare, dar vă va permite să vă întindeți panglica pentru a se potrivi oricarei dimensiuni doriți!
Pro: Acest lucru este destul de flexibil - beneficiați de avantajele utilizării imaginilor și de flexibilitatea metodei ușilor glisante.
Contra: Acest lucru poate fi destul de dificil pentru a obține perfect în fiecare browser; Re-jupuirea încă necesită deschiderea unui fișier Photoshop, dar acum există trei imagini pe care să le salvați, nu doar una.
Dacă sunteți dispus să renunțați la unele detalii (cum ar fi textura zgomotului și strălucirea interioară), este posibil să re-creați acest lucru în cod complet fără imagini. Noul rotație metodă, gradienți, și element umbre sunt principalele tehnici (citiți-le despre toate aici).
Citiți tutorialul complet bazat pe CSS de la Nettuts!
Pro: Nu sunt necesare imagini! Aceasta înseamnă că este foarte ușor să re-pielea prin schimbarea câtorva valori în CSS.
Contra: În plus față de pierderea abilității de a adăuga textură și alte subliniază, această metodă nu se va face corect în multe browsere. Totul de deasupra IE8, Safari 4.0 și Firefox 3.5 va funcționa bine - dar riscați să nu funcționeze deloc în browserele mai vechi (pe care o mulțime de oameni le au).
Sper că v-ați bucurat de această vizită! Acest efect este unul dintre cele mai simple moduri de a adăuga iluzia de profunzime la desenele dvs., și acolo varietate de moduri în care puteți aborda codarea acesteia. Lăsați câteva comentarii sau întrebări de mai jos :)
Accentsconagua