Share
Con le vacanze sono proprio dietro l'angolo, anche se potrebbe essere divertente creare un tutorial sul famoso effetto 3D Wrap-Around Ribbon che sta spuntando così tanto quest'anno. Questo è un ottimo modo per aggiungere profondità ai tuoi progetti ed è davvero facile da completare. Ti mostrerò alcuni esempi in azione sul Web, ti guiderò attraverso le tecniche di creazione in Adobe Photoshop e poi spiegherò i diversi approcci per codificarlo.
Prima di immergerci nel tutorial, diamo un'occhiata a una manciata di siti che stanno usando questo effetto. Nota la varietà di modi in cui puoi essere creativo con questo, quindi non fermarti a questo tutorial da solo! I principi alla base di questo sono di natura molto semplice, ma, come puoi vedere dai seguenti esempi, puoi ottenere un'esecuzione piuttosto vivace con l'esecuzione.
Bene, ora che abbiamo visto alcuni esempi di quanto creativo puoi ottenere con questo effetto, esaminiamo il tutorial. L'obiettivo qui è quello di insegnare le tecniche di base: quello che fai con loro è dove dovrebbe diventare interessante!
Crea un nuovo documento in Photoshop. Le dimensioni non contano davvero ... utilizzeremo una tela larga 600px per questa procedura dettagliata, ma puoi utilizzare la tua dimensione se stai lavorando a questo in un web design.
Vogliamo creare una separazione immediata, quindi inizia facendo buio sullo sfondo e disegna un rettangolo di colore chiaro sulla parte superiore.
Inizieremo il nastro disegnando un rettangolo di 310 px per 44 px. Sto usando un rettangolo arrotondato con un raggio di 4px, ma puoi anche usare un rettangolo quadrato se non ti piace l'angolo rotondo.
Presta attenzione alla larghezza: vuoi utilizzare una larghezza totale uguale alla "larghezza della colonna del tuo contenuto" + "la larghezza che vuoi che il nastro si sovrapponga al tuo sfondo principale". In questo esempio, sto usando 310px, che è 285px per il contenuto e circa 25px di sovrapposizione.
Quindi, voglio quadrare l'angolo in basso in modo che non sia rotondo. Mi muovo con lo strumento Converti punti e spingo semplicemente il punto in modo che ci sia un angolo di 90 gradi.
Il motivo per cui lo stiamo facendo è semplice: per completare l'illusione ottica del nastro "pieghevole" su se stesso, questo angolo non dovrebbe essere rotondo. Puoi diventare abbastanza creativo con questo passaggio da solo creando l'illusione di "arrotondare" facendo in modo che l'angolo in basso a destra sia effettivamente piegato verso il basso, ma in questo esempio lo terremo in ordine.
Ora vogliamo ritagliare la forma del nastro. Usa lo strumento Lazo poligonale per ritagliare la forma ... Tengo premuto il tasto "SHIFT" per forzare gli angoli di 45 gradi, ma puoi ritagliare qualsiasi forma che desideri.
Dopo aver selezionato la forma desiderata con lo strumento Lazo, crea una maschera vettoriale sopra il livello della barra multifunzione:
Il prossimo passo è creare il lato "ombreggiato" del nastro che sparirà dietro il primo piano. Inizia disegnando un quadrato semplice.
Suggerimento: utilizzare un colore leggermente più scuro rispetto al lato anteriore del nastro per creare l'illusione della profondità.
Ora abbiamo bisogno di creare l'effetto "piega" - usando di nuovo lo strumento Converti punti, spostare il punto in basso a destra del quadrato SU fino a quasi arrivare al punto in alto a destra.
Il tuo documento dovrebbe apparire così ora:
Ok, ora abbiamo le nostre forme di base! Ciò significa che il prossimo passo è aggiungere alcuni stili di livello personalizzati alla nostra barra multifunzione. Puoi fare quello che vuoi qui, ma ti mostrerò le impostazioni che sto usando per creare un aspetto leggero e strutturato.
I seguenti stili di livello vengono applicati al lato anteriore del nastro.
I seguenti stili di livello vengono applicati al lato inferiore del nastro.
Whallah! Ora dovrebbe assomigliare a questo:
Tempo per un po 'di testo! Sto usando 18pt "Eureka" con un'ombra leggera, ma puoi usare qualsiasi cosa desideri.
Le linee tratteggiate possono essere fatte in vari modi, ma ti mostrerò come farlo usando i "punti" di testo di base - usando "." chiave. Nota le impostazioni sopra - il livello di testo è impostato a circa il 50% di opacità e sto utilizzando una varietà di tecniche di carattere per completare l'effetto.
Ora, diamo un'occhiata a luce "ombra" questo aiuta a far apparire un po 'i punti:
Quello dovrebbe completare il nastro per la rotaia giusta; Puoi copiare / incollare e ribaltare il set di livelli per creare una versione per il lato sinistro.
Ora che abbiamo progettato la barra multifunzione, vale la pena dedicare alcuni minuti per discutere i tre modi in cui è possibile utilizzarlo per codificarla. Non entreremo nel codice line-by-line; ci sono un sacco di tutorial specifici per CSS che possono aiutarti in questo (anche sul nostro sito di rete, Nettuts!). Quello che farò è discutere gli approcci che potreste utilizzare e condividere alcuni link in cui potete trovare informazioni più approfondite su di essi.
Questo è l'approccio più semplice e diretto. Usa le proprietà di base CSS di base senza trucchi fantasiosi oltre un piccolo posizionamento. Il nastro potrebbe apparire leggermente diverso, quindi ti illustrerò i passaggi di base:
Professionisti: Questo è il metodo più semplice: è facile da completare.
Contro: Re-skinning richiede l'apertura di un file Photoshop; L'elemento non si "allungherà" se si desidera che sia diverso da una dimensione fissa.
Il classico metodo delle "porte scorrevoli" è simile al primo approccio, ma ti consentirà di allungare il nastro per adattarlo a qualsiasi dimensione desideri!
Professionisti: Questo è abbastanza flessibile - ottieni i benefici dell'uso delle immagini e la flessibilità del metodo delle porte scorrevoli.
Contro: Questo può essere abbastanza complicato per essere perfetto in ogni browser; Re-skinning richiede ancora l'apertura di un file Photoshop, ma ora ci sono tre immagini da salvare, non solo una.
Se sei disposto a rinunciare ad alcuni dettagli (come la trama del rumore e il bagliore interno), è possibile ricreare questo codice completamente senza immagini. Il nuovo rotazione metodo, gradienti, ed elemento ombre sono le tecniche primarie (leggi di loro tutte qui).
Leggi l'intero tutorial basato su CSS su Nettuts!
Professionisti: Nessuna immagine necessaria! Ciò significa che è super facile ridefinire la pelle modificando alcuni valori nel CSS.
Contro: Oltre a perdere la capacità di aggiungere texture e altri punti salienti, questo metodo non verrà visualizzato correttamente in molti browser. Tutto su IE8, Safari 4.0 e Firefox 3.5 funzionerà correttamente, ma rischi di non funzionare affatto nei browser più vecchi (che molte persone hanno).
Spero ti sia piaciuta questa soluzione! Questo effetto è uno dei modi più semplici per aggiungere l'illusione di profondità ai tuoi progetti, e ci sono vari modi in cui puoi avvicinarti alla codifica di esso. Lascia alcuni commenti o domande in basso :)
Accentsconagua