Share
In questo tutorial stiamo andando a percorrere un'estensione Photoshop gratuita chiamata Velositey. Velositey (attualmente alla versione 2) fornisce schemi di layout comuni per creare prototipi di design di siti Web all'interno di Photoshop.
"Dedica più tempo a perfezionare i dettagli e lo styling e dedica meno tempo a tutte quelle cose noiose." - Velositey
Prima di prendere le nostre mani su Velositey, esaminiamo prima alcuni schemi di layout comuni trovati in molti siti Web in questi giorni.
Se diamo un'occhiata a tre dei temi WordPress più popolari in ThemeForest (Avada, Enfold e Salient) noterai che condividono alcune caratteristiche comuni.
In primo luogo, su schermi di grandi dimensioni, hanno una barra di navigazione con l'immagine del logo impostata a sinistra e la navigazione a destra. Sotto la barra di navigazione, in genere, viene visualizzata un'immagine dell'eroe insieme a un paio di pulsanti visualizzati attraverso una presentazione animata. Dopo le impressionanti aree di intestazione, troviamo spesso colonne o qualche tipo di layout basato sulla griglia.
Dato che questo tipo di layout è così comune in natura, potresti spesso ritrovarti a costruire qualcosa di simile. Prototipazione di layout familiari di volta in volta può quindi diventare un compito ripetitivo.
In questo tutorial illustreremo le funzionalità di Velositey e impareremo come utilizzarle per automatizzare attività comuni, accelerando in ultima analisi il nostro flusso di lavoro di prototipazione. Inoltre, impareremo come utilizzare le funzionalità native di Photoshop per personalizzare e aggiungere campane e fischietti al nostro prototipo.
Senza ulteriori indugi, iniziamo!
Il requisito minimo per eseguire Velositey è Adobe Photoshop CC 2014 / CS6. Assicurati anche che Adobe Extension Manager sia installato. Con quelli presenti, scarica Velositey (dovrai pagare con un tweet o un post di Facebook) e installalo tramite Adobe Extension Manager.
Avvia Photoshop e naviga verso Finestra> Estensione> Velositey per rivelare il pannello Velositey.
Pannello VelositeyPer iniziare, creeremo un layout semplice.
Per prima cosa, dobbiamo creare un nuovo documento vuoto tramite il [+] Nuovo modello pulsante all'interno del pannello Velositey.
Questo documento appena generato verrà fornito con una linea di guide che copre 1170 px di larghezza con 30px grondaia. Questa è una soluzione conveniente se si intende utilizzare Bootstrap come base della griglia del proprio sito Web.
Una delle cose iniziali che vedrai sotto [+] Nuovo modello pulsante è una serie di schede, la prima delle quali è per le intestazioni. Ho intenzione di optare per il decimo modello di intestazione. Fare clic, quindi Velositey genererà immediatamente l'intestazione e la inserirà nel documento.
Opzione intestazione nel pannello VelositeyNel nostro caso, ci dà un'intestazione con il logo impostato a sinistra e la navigazione a destra. In Photoshop è nativo Strato pannello, troverai anche che i livelli sono strutturati correttamente e nominati all'interno di Intestazione gruppo.
Il layout semplice dell'intestazione e la sua struttura di livello nel Livelli pannello.Nota: se successivamente opti per un'altra opzione di intestazione, Velositey sostituirà il primo esempio.
Nonostante gli svantaggi, molte persone vogliono ancora un dispositivo di scorrimento nel loro sito web. L'aggiunta di un'area di scorrimento è facile come l'area dell'intestazione; Velositey fornisce una serie di modelli di cursori pronti da aggiungere con il clic di un pulsante.
Le opzioni del modello di layout del dispositivo di scorrimento.Qui ho optato per l'ultimo modello di cursore che ci fornisce un cursore contenente un'intestazione, un contenuto fittizio e due pulsanti.
L'area del dispositivo di scorrimento, con livelli corrispondenti .Come puoi vedere sopra, troverai un nuovo gruppo, Slider, aggiunto all'interno del Strato pannello in cui risiedono tutti i livelli di scorrimento.
Aggiungere l'area del contenuto è altrettanto semplice. Passa alla terza scheda nel pannello Velositey e troverai alcune opzioni di contenuto.
Modelli di layout del contenutoHo optato per il terzo stile, fornendoci il contenuto di tre colonne con ogni colonna comprendente un'intestazione, un segnaposto immagine e un contenuto fittizio.
L'area del contenuto con i suoi livelliUN Modulo, in questo caso, è un blocco di contenuti indipendente. Sta a noi definire il contenuto e a cosa serve. A differenza delle aree Header, Slider e Content siamo in grado di aggiungere più moduli all'interno di un singolo documento. Qui ho aggiunto il secondo modello di modulo:
Modelli di moduloIl secondo tipo di modulo ci fornisce un segnaposto immagine (che si estende attraverso la griglia del documento), un'intestazione e alcune righe di testo fittizio.
Il modulo aggiunto con i livelliL'ultima sezione del nostro sito Web sarà prevedibilmente il piè di pagina. Per i footer, ancora una volta, Velositey ci offre una serie di pattern preimpostati tra cui scegliere:
Il primo modello di piè di pagina ci dà il seguente layout del piè di pagina:
In questa fase, abbiamo completato l'aggiunta di tutte le sezioni del sito Web necessarie, dall'intestazione al piè di pagina, con pochi clic. Per organizzare correttamente ogni sezione, potresti voler aggiungere alcuni spazi verticali tra loro in questo modo:
Ora abbiamo il layout di base in atto, è il momento per noi di personalizzarlo. Dobbiamo modificare un paio di cose per rendere presentabile il prototipo.
La regola empirica quando si tratta di personalizzare i documenti di Photoshop è lasciare i livelli intatti ogni volta che è possibile. Ogni livello dovrebbe essere personalizzato senza distruggere la sua forma iniziale o proprietà. Questo ci porta ad utilizzare alcune funzioni di Photoshop come:
Inoltre, preferisco usare la quantità minima di livelli possibile.
Nel nostro caso, Oggetti intelligenti sono utili per includere l'immagine del logo.
Per cominciare, seleziona il livello chiamato logo all'interno del Intestazione gruppo (attualmente un livello di forma rettangolare). Quindi, fare clic con il tasto destro e selezionare il Converti in oggetto avanzato opzione.
Il logo il livello ora è a Oggetto intelligente.
Per posizionare il nostro logo all'interno di questo livello, fai clic con il tasto destro del mouse su logo livello e selezionare il Modifica contenuto opzione.
Questo ci porterà a un nuovo documento all'interno della finestra di Photoshop. All'interno di questa scheda, imposta il livello di forma rettangolare invisibile, quindi trascina e rilascia l'immagine del logo nella scheda, allineando il logo a sinistra. Mentre salvi il file, le modifiche dovrebbero essere riflesse in index.psd.
Il logo è posizionato attraverso un oggetto avanzatoOra stiamo per convertire il logo strato, che ora è a Oggetto intelligente, in un Oggetto Smart collegato. Questo memorizza in modo efficace il nostro logo come file esterno. Per fare ciò, fare clic con il tasto destro sul livello e selezionare il Converti in collegato ... opzione.
Photoshop ti chiederà di salvare il Oggetto intelligente file, .psb. Salva il Oggetto intelligente del logo all'interno di un'organizzazione tipica come faresti quando organizzi le immagini del sito web. In questo caso, lo salverei in una cartella denominata /immagini.
"Mantieni foto / icone in una cartella vicino al PSD, non in una cartella desktop denominata" Varie cose "- Photoshop Galateo
Dato che stiamo lavorando con Smart Objects ora, riutilizziamo il logo all'interno del nostro footer. Dirigetevi verso il footer raggruppa e trova il logo strato. Fare clic con il tasto destro del mouse sul livello e selezionare Sostituisci contenuto ... .
Passare alla cartella in cui è stato salvato il file .psb file del logo, selezionare il file e premere il Posto pulsante. Ora dovresti avere il logo all'interno del piè di pagina.
Ripeti questi passaggi per posizionare le immagini nelle altre sezioni; Contenuto, dispositivo di scorrimento e modulo. Una volta fatto, dovresti avere un risultato simile al mio di seguito:
Aggiungere un effetto di livello sarà probabilmente familiare a chiunque di voi abbia utilizzato Photoshop per un po '. Gli effetti di livello applicheranno uno o più effetti come colore, sfumatura, ombra ecc. Sopra un livello. Nel nostro caso, lo useremo per impostare un nuovo colore per il logo e aggiungere una sfumatura.
Iniziando selezionando il logo strato all'interno del Intestazione gruppo. Quindi selezionare il fx icona all'interno del Strato pannello, dove risiedono le opzioni degli effetti. Selezionare Sovrapposizione colore ... , e imposta il colore sul bianco.
Ripeti questo passaggio per personalizzare ciascun colore del link di navigazione, il colore dell'icona nella sezione del contenuto e il colore del pulsante nel cursore. Inoltre, aggiungi un effetto sfumato all'immagine del cursore per aumentare il contrasto tra l'intestazione e il cursore, rendendo più leggibili il logo e la navigazione.
Livelli di regolazione permettici di personalizzare il tono di un livello (come la luminosità e il contrasto) in modo non distruttivo. Nel nostro caso, possiamo usare un livello di regolazione per trasformare le icone del modulo in bianco e nero.
Per prima cosa, seleziona il contenitore strato all'interno del Modulo gruppo. Fare clic con il tasto destro e selezionare il Modifica contenuto ... opzione. Successivamente, fare clic Nuovo livello di regolazione e selezionare il Bianco e nero… opzione. E voilà!
L'ultima cosa che devi fare è riscrivere le intestazioni e il testo all'interno dei segnaposto del contenuto. Fatto questo, eccolo, il nostro prototipo finito:
Ben fatto, abbiamo creato con successo un prototipo di design per una pagina web. Abbiamo usato Velositey, permettendoci di generare rapidamente il layout nudo. Inoltre, abbiamo personalizzato gli strati con colori, sfumature e regolazioni in modo non distruttivo, mantenendo intatta la loro forma iniziale e consentendo modifiche future.
Hai altri suggerimenti e trucchi per usare Velositey? Fateci sapere nei commenti!
Accentsconagua