Share
Aggiornamento: Tut di codifica ora disponibile! Oggi vi illustreremo come creare il vostro "cursore a schede succosa". Questo è un ottimo modo per aggiungere profondità e dimensionalità extra ai tuoi progetti - ed è la soluzione perfetta per un dispositivo di scorrimento delle immagini!
Aggiornamento di codifica: Ora puoi afferrare la parte completa di questo tutorial su Nettuts! Voi ragazzi avete chiesto, e così ricevete :)
E ora, per tutti quelli che vogliono giocare per gioco, ecco la versione scritta completa del tutorial. Noterete lievi cambiamenti dal video (il video è fatto al volo), ma le stesse tecniche di base si applicano a entrambe le procedure dettagliate..
L'immagine utilizzata per la demo è un esclusivo sfondo del Marketplace Envato di reAdactor. Puoi trovare altre di queste fantastiche immagini per il desktop qui!
Inizieremo con il nostro documento 600x400 px. Ho aggiunto uno sfondo grigio chiaro con un motivo a griglia sottile, in modo tale da poter vedere un po 'meglio il nostro elemento fuori dal documento mentre lo creiamo.
Iniziare disegnando un semplice rettangolo (circa 450x270 px) sulla tavola da disegno. Aggiungiamo un tratto molto leggero attorno al rettangolo attraverso il pannello delle opzioni del livello (tratto = 1px esterno, # c8c8c8). Il motivo per cui aggiungiamo questo tratto è aggiungere un po 'di separazione tra il nostro frame e lo sfondo? questo sarà particolarmente importante se stai lavorando su uno sfondo bianco.
Successivamente, inizieremo la nostra "ombra" sotto la cornice. Inizia semplicemente afferrando lo strumento Pennello di base e imposta Dimensione al 40% e la Durezza allo 0%. Inizia un nuovo livello, quindi tieni premuto il tasto Maiusc (per mantenere la linea diritta) e traccia una linea breve (circa metà della larghezza della nostra cornice). Ottenere questo perfetto non importa? regoleremo le dimensioni utilizzando lo strumento di trasformazione nei passaggi successivi.
Ora ruotiamo leggermente il layer appena spazzolato; L'angolo che ho usato era 2.5, ma puoi scherzare per conto tuo. Più profondo è l'angolo, più "piegato" l'ombra sembrerà più tardi. Puoi utilizzare Ruota o Trasformazione libera (Ctrl + T) per eseguire il trucco.
Duplica il primo livello di "ombra" spazzolato (Ctrl + J) e quindi giralo orizzontalmente (Modifica> Trasforma> Rifletti orizzontalmente). Il risultato dovrebbe essere un'ombra che è l'opposto del primo.
Sposta entrambi i livelli di ombreggiatura dietro il livello "cornice" e ridimensionali (seleziona entrambi i livelli e premi Ctrl + T) in modo che si adattino appena all'interno della larghezza totale del rettangolo del riquadro.
Infine, unisci entrambi i livelli d'ombra insieme (Ctrl + E) e sposta il livello d'ombra nel punto giusto (usa lo strumento di selezione di base [V] e usa la tastiera per spingere). Puoi anche regolare l'opacità del livello ombra in base alle tue preferenze personali. Ho usato circa il 50%, puoi fare più o meno in base a ciò che stai cercando.
Fase bonus: Se vuoi, puoi armeggiare ancora di più con l'ombra usando queste tecniche di base più il filtro "Gaussion Blur". Più l'ombra è sfocata, più apparirà dispersa. Puoi anche armeggiare con il modo in cui l'ombra si espande usando lo strumento curvatura.
Bene, ora abbiamo il nostro background e l'ombra di base. Il prossimo passo è creare il livello interno "immagine". Fai questo creando un nuovo rettangolo (usando lo stesso tratto di stile del tratto come prima) o semplicemente duplicando il livello originale e usa lo strumento Converti punto per spingere su ciascun lato circa 10px.
Puoi ovviamente regolare la spaziatura secondo le tue preferenze. Più spazio è disponibile, più grande sarà il riempimento del riquadro in seguito. È inoltre possibile aggiungere un ampio padding inferiore per salvare spazio per il titolo e la descrizione dell'immagine.
Successivamente, rilascia l'immagine che desideri utilizzare sul documento (puoi trascinarla da una cartella o utilizzare lo strumento Importa). Dovrai ridimensionare e posizionare l'immagine sul livello di forma "Immagine interna", quindi rendere l'immagine una maschera di ritaglio sullo stesso livello di forma interno. Puoi renderlo una maschera di ritaglio facendo clic con il pulsante destro sul livello dell'immagine e premendo "Crea maschera di ritaglio".
Aggiungi una leggera ombra interna usando il pannello Stili livello (fai doppio clic sul livello della forma). La demo utilizza le seguenti impostazioni:
Ancora una volta, questo è un caso in cui è possibile armeggiare con l'effetto per ottenere i risultati desiderati. Un'ombra più scura renderà l'immagine più drammatica e profonda. Un'ombra più chiara (o nessuna ombra) renderà l'immagine più piatta.
Whallah!
I pulsanti a schede sinistra e destra sul lato fanno parte dell'attrattiva principale di questo tipo di slider perché si rompono appena fuori dal frame e creano una forma più interessante per il nostro cursore.
Inizia disegnando un cerchio (tieni premuto il tasto Maiusc per mantenerlo un cerchio perfetto quando usi lo strumento Ellisse). La dimensione dovrebbe essere di circa 60px (puoi guardare il pannello Info mentre stai disegnando il cerchio per vedere le sue dimensioni mostrate nel testo lì).
Successivamente, aggiungi un tratto di 1 pixel usando lo stesso colore che abbiamo usato per la cornice dello sfondo.
Come bonus - aggiungi un'ombra leggera per imitare l'ombra che abbiamo disegnato sotto la cornice. L'ombra esterna che abbiamo usato era circa il 15% di opacità, Distanza 3 e Dimensione 4. L'angolo dovrebbe riflettere la nostra fonte di luce al centro del fotogramma - quindi in questo caso è di circa 130 gradi.
Ora aggiungi le nostre frecce. Puoi usare una normale forma di Photoshop o una versione di testo ">>" delle frecce usando il tuo font preferito. Puoi anche disegnare il tuo in Illustrator se preferisci ottenere una forma davvero unica. Nel nostro caso abbiamo usato ">>" usando il font Lucida Sans.
Quindi, raggruppa il livello Forma cerchio e il livello Freccia selezionandoli entrambi e premendo Ctrl + G.
Ora disegna una maschera sul gruppo per farla apparire come se fosse appena sovrapposta alla nostra cornice. Per fare ciò: Disegna una selezione di selezione rettangolare, quindi premi il pulsante "Aggiungi maschera di livello" quando hai selezionato la cartella di gruppo.
La cosa grandiosa di questa maschera "di gruppo" è che maschera anche tutti gli stili di livello. Se provassimo semplicemente a mascherare il cerchio stesso, anche il tratto e l'ombra sarebbero ritagliati, rendendoli visibili sopra il fotogramma (che non vogliamo).
Infine, duplica semplicemente il gruppo di pulsanti e ruotalo orizzontalmente. Lo sposteremo in posizione sul lato sinistro del documento. L'unico vero suggerimento qui è che avremo anche bisogno di regolare l'angolo dell'ombra esterna a circa 50 gradi per abbinare la nostra fonte di luce al centro del fotogramma. Assicurati di disattivare il selettore Global Light per assicurarti di non regolare l'altra ombra.
L'ultimo elemento in questo cursore è il piccolo "modulo del pulsante cerchio" che mostrerà quante immagini hai nella tua diapositiva.
Inizia creando un semplice cerchio di 13px (ancora, tieni premuto Shift per renderlo perfetto). Vogliamo aggiungere un altro tratto 1px all'esterno utilizzando lo stesso colore di tutti i tratti precedenti (# c8c8c8 per la demo).
Infine, aggiungi un gradiente molto sottile sul cerchio (grigio chiaro [# D9D9D9] sfumato in bianco nella parte superiore). È possibile regolare la colorazione del gradiente in base alle proprie preferenze, ma l'idea qui è di far sentire il cerchio più come un pulsante che l'utente può premere su.
Duplica il cerchio originale ancora un paio di volte e spostalo di lato (dovresti avere tante cerchie quante sono le immagini nella diapositiva).
Quelle cerchie sono terribilmente difficili da vedere adesso? quindi aggiungiamo uno sfondo per renderlo un po 'più visibile sulle immagini chiare.
Inizia disegnando un rettangolo arrotondato con un raggio di 10px (puoi regolare il raggio secondo i tuoi desideri). Quindi imposta Fill fino al 50% per farlo vedere leggermente.
Infine, imposta un 2px Stroke (# a7a7a7) con un'opacità intorno al 50% per renderlo trasparente. L'effetto finale dovrebbe essere un rettangolo arrotondato trasparente con un bordo sottile.
Passo finale! Aggiungi un cerchio più piccolo su una delle cerchie originali e posizionalo al centro. Regola il colore (puoi utilizzare una sfumatura o un colore solido) per adattarlo ai tuoi colori personalizzati. Noterai che nella demo abbiamo utilizzato gli stessi colori che utilizziamo nel logo Webdesigntuts.
Lavoro eccellente! Ora che hai la configurazione di base del cursore, puoi facilmente adattare le dimensioni per adattarle ai tuoi progetti. Puoi anche reskin per usare sfondi di colori diversi, pulsanti ridisegnati o persino aggiungere trame al telaio stesso. Il limite dipende solo da te: tieni a mente i principi di base che impostiamo qui e andrai bene.
Accentsconagua