Lo stato attuale del layout dovrebbe apparire più o meno così:
Fino ad ora è stato inserito un logo e il menu superiore. Proseguiamo con una grafica leggermente più grande, che dovrebbe essere visibile direttamente sotto la barra di navigazione.
Il principio di creazione di nuovi livelli è stato già descritto nel tutorial precedente. Pertanto, vorrei mostrarvi qualcos'altro in questo punto. Direttamente sotto il menu superiore dovrebbe essere visualizzata un'immagine più grande. Il risultato sarà il seguente:
L'immagine dovrebbe - quando la inserite - avere le dimensioni corrette. Quindi eventualmente modificate prima. Successivamente, aprite File> Apri e selezionate l'immagine. L'immagine selezionata verrà quindi visualizzata in una nuova finestra. Premete Ctrl+C per copiare l'immagine negli appunti. Ora, affinché possiate inserire l'immagine subito come livello, che ha anche le dimensioni corrette, aprite Modifica>Incolla come>Nuovo livello. Il nuovo livello avrà automaticamente le dimensioni dell'immagine e potrete quindi spostare facilmente il livello nella posizione desiderata. In questo modo potrete incorporare tutte le immagini che volete inserire nel layout e posizionarle lì.
Inserite poi i testi nei punti in cui saranno effettivamente visibili in seguito. Nella fase di progettazione di solito si utilizza il cosiddetto testo cieco.
Prima di sedervi e scrivere in modo selvaggio "test, test, test", vi consiglio di visitare il sito http://www.blindtextgenerator.de/.
Lì potrete generare automaticamente testi ciechi di vario tipo. I testi possono poi essere facilmente inseriti nel layout di design tramite Copia & Incolla. A tal proposito vi consiglio anche il sito http://dummyimage.com/. Su questo sito è possibile generare immagini fittizie di qualsiasi dimensione. Queste immagini fittizie possono essere utilizzate ad esempio come segnaposto per grafiche originali non ancora create nei vostri layout.
Il problema con i livelli trasparenti
Quando inserite testi, questi saranno costituiti da diversi elementi come titoli, paragrafi, ecc. Pertanto, dovreste raggruppare insieme i testi correlati in propri livelli. In questo modo potrete spostare sempre questi testi come un'unica unità. Quindi aprite Livelli>Nuovo livello. Successivamente assegnate al livello le dimensioni desiderate e, se necessario, il colore di sfondo. Di solito dovrete però impostare/avere uno sfondo trasparente. Il problema è che potrete avere difficoltà a spostare i livelli trasparenti. Spesso vi capiterà infatti di prendere per sbaglio un livello sottostante. Questo problema si può facilmente evitare. Fondamentali sono le impostazioni nella finestra Strumenti. Attivate lì lo Strumento Sposta. Nella parte inferiore della finestra attivate poi l'opzione Sposta livello attivo.
In questo modo potrete spostare anche i livelli trasparenti in qualsiasi posizione desiderata.
Tagliare gli elementi
Una volta soddisfatti del layout, passate alla pratica realizzazione come pagina web HTML. A questo punto entra in gioco il Slicing, ovvero il taglio. Questo "taglio" non è altro che la suddivisione del layout in parti separate, che verranno poi ricomposte tramite HTML e CSS. Dovrete tagliare tutti gli elementi che dovranno essere mostrati singolarmente in seguito. Esclusi naturalmente gli elementi grafici che già si trovano singolarmente. Inizierò mostrandovi come tagliare gli elementi. Disegnate delle guide intorno all'elemento in questione. Le guide rappresentano infine i bordi di taglio. Assicuratevi quindi di posizionarle correttamente.
Selezionate ora l'area desiderata e premete la combinazione di tasti Ctrl+Maiusc+C. (Questo vale sia per GIMP che per Photoshop allo stesso modo). Quindi create un nuovo file. In Photoshop avrà subito le dimensioni corrette. Con GIMP purtroppo non funziona così semplicemente. Qui create semplicemente un file con dimensioni adeguate. Con Ctrl+V incollate il contenuto dagli appunti.
Ora entra in gioco lo Strumento Ritaglia. Definite l'area da ritagliare e premete poi il tasto Invio. L'immagine verrà quindi ritagliata sull'area desiderata. Con File>Salva con nome potrete salvare l'immagine.
Per molte pagine web, un sfondo sfumato costituisce un elemento stilistico importante. Anche nel layout di esempio mostrato qui è presente un tale sfondo sfumato. Per tagliare uno sfondo sfumato, selezionate una piccola area del gradiente corrispondente. In effetti basta selezionare un'area larga un solo pixel. L'altezza deve invece corrispondere all'altezza effettiva dell'elemento. In seguito, tramite CSS, potrete fare in modo che questo grafico venga ripetuto orizzontalmente fino a riempire l'intero elemento. Naturalmente si potrebbe utilizzare un'area di taglio più ampia. Tuttavia ciò potrebbe compromettere le prestazioni del sito. Pertanto, per i gradienti di colori, scegliete una larghezza di un pixel.
Con Ctrl+Maiusc+C copiate il grafico largo un pixel negli appunti e incollatelo di nuovo come nuova immagine. Salverete poi la nuova immagine, dopo averla portata sull'area rilevante.
In questo modo dovrebbe essere chiaro il principio generale del taglio. Tagliate quindi tutte le cose dal layout che faranno parte della pagina web. Se avete già a disposizione alcuni elementi della pagina che non devono essere tagliati, potete utilizzarli direttamente, senza bisogno di tagli intermedi.
Il risultato dovrebbe essere simile a quanto segue: Avrete tutte le immagini pronte per essere utilizzate in seguito nel sito. Queste includono ad esempio il logo, gli sfondi, i gradienti di colore, ecc. Giusto mentre parliamo dei gradienti di colore: Sono perfettamente consapevole che i gradienti di colore possono essere facilmente creati tramite CSS3. Tuttavia, c'è il problema che non tutti i browser lo supportano ancora. E poiché il taglio si presta molto bene a mostrare un gradiente di colore, in questo tutorial ho optato per un'immagine per l'implementazione dei gradienti di colore.
