Share
Definire una griglia di riferimento per i tuoi progetti basati su Photoshop è un primo passo indispensabile in ogni nuovo progetto di sito web. Una griglia di base stabilirà una spaziatura costante tra gli elementi della pagina, creando un ritmo armonioso in tutta la pagina. Inoltre, durante la fase di sviluppo, l'utilizzo di un framework CSS con una griglia di base compatibile può rendere molto più semplice la traduzione di progetti in codice.
In un recente tutorial su Webdesign Tuts +, Amir ci ha mostrato come creare uno script Flexible Grid per Photoshop per far sì che il grugnito non sia impostato per impostare le guide per il layout. Allo stesso modo, useremo un'estensione Photoshop che farà tutto il lavoro pesante per noi - una grande opzione, soprattutto se creare il tuo script personalizzato è un po 'troppo ambizioso per le tue esigenze.
Ti guiderò attraverso ogni passaggio necessario per impostare una griglia di base orizzontale e verticale in Photoshop che sia flessibile, personalizzabile e facile da completare in meno di dieci minuti.
Nel tutorial di oggi, userò un'estensione gratuita di Cameron McEfee chiamata - opportunamente - GuideGuide. Vai su http://www.guideguide.me per scaricare il plug-in.
Seleziona la versione che corrisponde a Photoshop (CS4 +) e salvala in una posizione appropriata sul tuo disco rigido.
Nota: Gli utenti OSX con Photoshop CS5 dovranno installare Adobe Extension Manager Patch.
Assicurati che Photoshop sia chiuso, apri Adobe Extension Manager.
Facendo clic sul collegamento "Installa" nel menu in alto, vai all'estrazione GuideGuide estratta e fai clic su "Apri". Dopo aver accettato i termini e le condizioni, GuideGuide sarà pronto per essere visitato la prossima volta che apri Photoshop.
Accendi Photoshop e dal menu File "Finestra" seleziona "Estensioni → Guida".
L'estensione GuideGuide apparirà ora nel tuo spazio di lavoro. Non preoccuparti troppo del campo di input, scaveremo a breve nell'estensione.
Oggi terremo le cose molto semplici e replicheremo la griglia 960px utilizzata da 960 Grid System (anche se non esitare ad affrontare le griglie usando le misure che trovi più facili). Se ci dirigiamo verso il sito, la griglia che replicheremo è disposta in inglese sulla home page:
Per riformulare ciò, ciò che creeremo oggi è una tela larga 960px con 12 colonne equidistanti e uguali. Con un margine di 10px su entrambi i lati della tela, ci sarà una gronda 20px tra ciascuna delle colonne.
Prima di andare avanti, so cosa potresti dire: "Perché non basta scaricare il modello di Photoshop dal sito?". Quello che ti mostrerò come creare oggi è completamente personalizzabile per qualunque progetto e qualsiasi framework CSS, indipendentemente dalla quantità di colonne, larghezza della tela o grondaie. Stiamo solo usando un semplice esempio per dimostrare le tecniche.
In Photoshop, seleziona File → Nuovo e crea un nuovo documento 960 px di larghezza per 1050 px di altezza.
Assicurati che i tuoi righelli siano visualizzati (Visualizza → Righelli) trascina due guide ai bordi della tela.
Aprendo l'estensione GuideGuide, noterai un certo numero di campi di input e voci di menu che ci permetteranno di definire la nostra griglia di base orizzontale, come segue (puoi anche passare il mouse su ciascuna icona per una descrizione).
Immettere i valori come segue e fare clic sul pulsante Guide Guide:
Una volta inviati i valori, Photoshop eseguirà automaticamente il rendering di tutte le guide per la griglia:
Nota: L'uso di GuideGuide senza una selezione renderà automaticamente le guide sull'intero canvas. Se si desiderava solo le guide su una parte del documento (ad esempio, una barra di navigazione), creare una selezione con lo strumento Selezione (M) prima di utilizzare l'estensione.
Allo stato attuale, abbiamo una griglia di base orizzontale perfettamente utilizzabile. Per rendere le cose più facili per noi stessi, aggiungeremo ora un aiutante visivo per dirci cos'è una colonna e che cos'è una grondaia - qualcosa che può essere difficile da differenziare quando viene eseguito lo zoom direttamente sul documento.
Crea un nuovo livello (Ctrl + Shift + N) e disegna una selezione della larghezza e dell'altezza della prima colonna. urgente Ctrl + BkSpace, riempire la selezione con # ff0084. Puoi anche usare lo strumento forma per questo, ma assicurati che i pixel siano selezionati con precisione.
Quindi, creare 12 versioni totali del layer premendo Ctrl + J 11 volte. Selezionando il livello più in alto, trascina la colonna nella dodicesima posizione della colonna con lo strumento Sposta (V).
Quindi, seleziona tutti e dodici i livelli (Ctrl + clic) e distribuire le colonne selezionando il Distribuisci centri orizzontali icona sotto lo strumento Sposta (V) (in alternativa, Livello → Allinea → Centri orizzontali)
Infine, ripulisci il documento selezionando tutti i livelli della colonna e unendoli insieme (Ctrl + E). Rinominare il livello 'Linea di base orizzontale' e comporre l'opacità fino al 10%.
Ora che abbiamo stabilito una linea di base orizzontale, è ora di passare alla nostra linea di base verticale. Oggi non approfondiremo la teoria delle linee di base verticali, ma se vuoi saperne di più puoi leggere su Impostazione del tipo di web su una griglia di riferimento.
Oggi imposteremo la nostra linea di base verticale in base a una dimensione del carattere del corpo di 14 px. Per stabilire un'altezza di 1,5 linee e per darci un sacco di flessibilità, la nostra linea di base sarà 7px (cioè tre unità di base pari a 21px).
Ti mostrerò due metodi per raggiungere questo obiettivo - sentiti libero di usare quello che ti parla e il tuo flusso di lavoro!
Per iniziare, utilizzeremo GuideGuide ancora una volta. Aprire l'estensione, immettere il seguente valore e premere il pulsante Guide Guide:
Una volta inviato, Photoshop mostrerà tutte le guide per la nostra linea di base verticale:
A questo punto, il lettore più astuto si sarà reso conto che questo metodo è reso possibile solo perché abbiamo creato la nostra altezza del documento in un multiplo perfetto di 7px (1050px). Se non avessimo intrapreso questo passaggio iniziale, GuideGuide visualizzerà il maggior numero possibile di guide 7px e lascerà il resto nella parte inferiore del documento.
E in questo semplice passaggio, abbiamo creato una linea di base verticale perfettamente funzionale. L'unico problema è che questo documento è ora molto occupato. Inoltre, se hai l'abitudine di utilizzare le guide nei tuoi progetti, questo metodo può diventare rapidamente confuso, disordinato e inutilizzabile.
Se questo metodo non stuzzica la tua fantasia, puoi rimuovere le guide orizzontali (Ctrl + Alt + Z) e creare una linea di base alternativa utilizzando una griglia di pixel.
Per il nostro metodo alternativo, apri il pannello delle preferenze della griglia di Photoshop (Modifica → Preferenze → Griglie, guide e fette). Inserisci i seguenti valori per la griglia di pixel:
Ora, tornando al tuo documento, puoi attivare e disattivare la visibilità della griglia (Ctrl + '), dove ogni linea orizzontale della griglia stabilisce la tua linea di base verticale, come puoi vedere qui con uno zoom del 600% applicato.
La cosa grandiosa di questo metodo è che abbiamo separato le linee di base orizzontali e verticali, permettendoti di cambiare facilmente la loro visibilità a seconda di quale parte del progetto stai lavorando.
Qualunque sia il metodo che preferisci (guide o livelli di griglia), il passo finale è creare un aiuto visivo per la nostra linea di base verticale nello stesso modo in cui lo abbiamo fatto per la nostra linea di base orizzontale (ma useremo un metodo diverso).
Crea un nuovo documento 1 x 7 px con uno sfondo trasparente:
Utilizzando lo strumento Selezione (M), impostare lo stile su Taglia unica, e le dimensioni a 1px x 1px. Crea una selezione nella parte inferiore del documento (ti consigliamo di eseguire lo zoom il più lontano possibile qui (Z)) e riempirlo con # 00ff12 (Ctrl + Bkspace).
Quindi, definire questo documento come un modello (Modifica → Definisci modello). Chiamalo '7px Vertical Baseline'.
Torna al tuo documento principale. Crea un nuovo livello (Ctrl + Shift + N), seleziona l'intera tela (Ctrl + A) e premere Ctrl + Bkspace per riempire la selezione. Dai menu a discesa, seleziona "Motivo" per il tipo di riempimento e la "linea di base 7px" appena creata per il modello.
Rinominare il livello in "Linea di base verticale" e comporre l'opacità fino a circa il 30%.
Sebbene gli elementi non si agganciano ad alcuno degli aiutanti visivi, qualunque metodo tu abbia usato per la linea di base verticale (guide o livelli di griglia) nei passaggi precedenti, il tuo livello visivo appena creato sarà perfettamente allineato alla linea di base - permettendo uno snap facile per intero disegno.
E con questo, hai creato una griglia di pixel perfetta con livelli visivi utili per il tuo prossimo progetto. L'unica cosa che rimane da fare è dare al tuo disegno un po 'di respiro.
Apri la finestra di dialogo Dimensione quadro (Immagine → Dimensione della tela) e cambia la larghezza a 1400px.
Il risultato finale:
Se l'hai fatto fino in fondo, buon lavoro! Ora hai tutte le tecniche necessarie per creare le tue griglie di base personalizzate in Photoshop.
L'unico consiglio che potrei offrire è che, sebbene GuideGuide faccia un ottimo lavoro nel gestire tutta la matematica necessaria, deve lavorare all'interno dei limiti di Photoshop, ovvero che le guide possono essere posizionate solo su un pixel intero. Se la tua griglia richiede misurazioni sub-pixel, le guide saranno renderizzate il più vicino possibile, con le loro posizioni arrotondate al pixel pieno più vicino. Con questo in mente, una piccola pianificazione all'inizio può evitare un sacco di mal di testa da un pixel più avanti nel progetto.
Come nota di partenza, è possibile utilizzare GuideGuide per molto più delle semplici linee di base; sperimentalo usandolo per tracciare griglie per tutti i tipi di componenti di design dalle cornici ai menu!
Grazie ancora, e non dimenticare di iscriverti e lasciare un commento qui sotto - ci piacerebbe sentire i tuoi pensieri!
Accentsconagua