Allora, qui, più che nell'ambito grafico, finiamo in quello del webdesign.
Dunque, considera che il più delle volte quelli che credi sfondi interi sono in realtà tante parti di immagini combinate a dovere.
Cerco di spiegarti facendo riferimento alla seconda immagine che hai allegato, più che altro perchè è più semplice, ma anche l'altra si risolve nello stesso modo.
Prima di tutto ti dico che in questo caso non esiste un solo modo di procedere, ognuno, a seconda delle proprie abitudini o manie o processi mentali, preferisce muoversi in maniera diversa, ma il risultato dovrebbe più o meno essere uguale.
Se ci fai caso puoi dividere il layout in varie aree logiche.
Cominciamo dalle macroaree:
- colonna sinistra: quella del menu, dal bordo viola di sinistra
- colonna centrale: quella compresa tra i due bordi verticali, bordi esclusi
- colonna destra: dal bordo viola di destra
Da questa impaginazione cerca di escludere mentalmente l'immagine del fiore grande in basso che vedremo poi come trattare.
All'interno della colonna centrale io poi distinguerei altre tre aree:
- intestazione: il titolo del sito in alto
- contenuto: la parte centrale con il contenuto della pagina
- piè di pagina: i dati personali in basso
Come fare per ottenere delle immagini da usare come sfondi per queste aree?
Semplice: con lo strumento sezioni di Photoshop.
Chiaramente dovrai lavorare sul file originale con i livelli, anche perchè bisognerà disattivare quello che non ci serve.
Innanzitutto non ci servono i testi del contenuto e della colonna destra, quelli li ricrei direttamente in html.
Poi per ora non ci serve nemmeno il grande fiore che sta sotto.
Per fare un buon lavoro l'ideale sarebbe crearci ora delle guide nei punti in cui dovremo definire le sezioni, in allegato trovi un'immagine fatta al volo in cui sono segnate più o meno le sezioni da creare secondo il mio punto di vista.
Sullo strumento sezioni non mi dilungo, è abbastanza intuitivo e trovi molto materiale nella rete.
Però stai attenta ad una cosa: visto che tutte le aree logiche si tramuteranno in tag div, si può ottimizzare il tipo di immagini che si va a salvare.
Per esempio, la colonna sinistra ha l'immagine con i fiori che copre il bordo e che verrà tagliata in due parti dalle sezioni e per questo la useremo come normale immagine inserita nel livello, però per il bordo viola possiamo creare una semplicissima immagine di pochi pixel con un solo frammento del bordo da ripetere in verticale su tutta la lunghezza del livello, questo alleggerisce molto le immagini da caricare.
Stessa cosa si può fare con il bordo di destra.
Poi ricordati di impostare come colore di sfondo del livello quel rosa/lilla che hai anche tu.
Hai capito un po' l'idea del procedimento?
Forse non sono bravissimo a spiegare e di sicuro non posso anche darti le indicazioni su come impostare il codice delle pagine web (per tutte queste cose vado a pagamento), ma intendevo farti entrare nell'ordine di idee del processo mentale.
Quando poi userai il comando "Salva per web", avrai la possibilità di salvare le sezioni come immagini singole (fa tutto lui, più bello di così!) da usare nell'impaginazione. Per le immagini nel tuo caso andrà bene salvare come jpg qualità media, almeno così ad occhio.
Buon lavoro!
Rispondi quotando