Un semplice modo per creare una pagina web da Photoshop

Scritto da Administrator

UN METODO SEMPLICE E DI BASE PER CREARE PAGINE WEB DA PHOTOSHOP

Photoshop permette di creare grafiche per web, ottimizzare i file affinch non siano pesanti da caricare sulle pagine web e creare gif animate che possono alternarsi in qualche caso ai file animati di flash quando si necessita di banner o immagini in movimento.Ma Photoshop permette anche di realizzare pagine web complete.

Premettiamo per che usare integralmente Potoshop per fare un sito potrebbe avere risvolti negativi dal punto di vista del peso dei file. Si rendono infatti necessari degli accorgimenti. Di seguito verr riportata una procedura di base, la pi semplice che serve come esempio, base e punto di partenza per capire ed eventualmente approfondire largomento. Sono due i principi di Photoshop su cui ci baseremo per realizzare quanto segue, ed bene specificarli a priori perch la loro conoscenza fondamentale. - ottimizzazione dei file per web - le sezioni

OTTIMIZZAZIONE (Vedi lezioni su immagini per il web in questa stessa categoria) LE SEZIONI Tramite le sezioni Photoshop permette di dividere un file in porzioni (basate su vari principi: livelli, aree personalizzate, aree individuate tramite guide). Queste porzioni possono essere salvate separatamente con diversi settaggi (tramite il salvataggio per web e dispositivi possibile impostare separatamente o in generale i formati immagine e relativi parametri), e possono comportarsi come semplici immagini o come oggetti con particolari propriet. Quando si utilizzano le sezioni Photoshop creer una sorta di tabella in cui divide limmagine. Appena lutente ne crea una(sezione utente), in automatico Photoshop ne crea altre che vanno a ricoprire il resto dellimmagine (sezioni automatiche). Anche le sezioni automatiche saranno elementi autonomi in fase di salvataggi. Le sezioni sono in automatico nominate con dei numeri progressivi.

1/4

Un semplice modo per creare una pagina web da Photoshop

Scritto da Administrator

Sono due gli strumenti per la gestione delle sezioni: lo strumento Sezioni e lo strumento Selez iona sezioni , entrambi presenti nella stessa casella della barra degli strumenti. Con lo strumento Sezioni si creano le sezioni, mentre per le modifiche e i settaggi vari si usa lo strumento Seleziona sezioni. Esistono diversi modi per creare le sezioni. Il pi semplice e intuitivo quello di disegnarle. Il disegno delle sezioni unoperazione manuale a mano libera. (valgono eventuali effetti calamita impostati in generale). Per modificare la sezione creata, bisogna passare allo strumento Seleziona sezioni che d la possibilit di spostarle, ridimensionarle e cambiarne alcuni parametri. Usare le sezioni pu essere utile in tre casi principalmente: - Quando dovete inserire allinterno di un sito internet unimmagine molto grande, meglio dividerla in sezioni in quanto, il browser quando dovr caricare limmagine, sar pi veloce caricando i vari pezzi che la compongono uno alla volta che tutta limmagine intera in una sola volta, evitando tempi lunghi di attesa per lutente che, se non debitamente avvertito, potrebbe trovarsi davanti ad una pagina vuota o incompleta senza sospettare nemmeno che prima o poi comparir unimmagine. - Quando da un layout disegnato in Photoshop bisogna estrapolare e ottimizzare per web solo alcune parti (per esempio dei pulsanti o un titolo). - Quando si creato un layout di un sito internet in Photoshop e lo si vuole utilizzare cos com per generare una pagina web con diversi elementi (titolo, pulsanti, testi, immagini gestibili come oggetti separabili in codice HTML e CSS.

Partiamo da un esempio molto semplice: 1. Creeremo il layout di una pagina web in Photoshop sfruttando le potenzialit grafiche del software. 2. Divideremo il layout in sezioni individuando gli elementi che saranno importanti nella pagina. 3. Esporteremo le immagini e una struttura html che le contenga valida secondo gli standard del web.

2/4

Un semplice modo per creare una pagina web da Photoshop

Scritto da Administrator

1.a Creiamo un nuovo file con le seguenti impostazioni: predefinito per Web dimensioni 955 pixel x 600 pixel risoluzione 72 ppi metodo di colore RGB colore di sfondo a scelta (preferibilmente trasparente)

1.b Creiamo il layout del sito, in particolare, per questo esempio stato deciso di creare unintestazione con il titolo del sito, un sottotitolo (tag line), una barra di navigazione formata da 4 pulsanti, un testo e unimmagine. 2.a Dalla barra degli strumenti selezionare lo strumento Sezioni e creare delle porzioni di immagine (trascinando con lo strumento Sezioni sullimmagine) corrispondenti agli elementi sopra descritti. 2.b Dalla barra degli strumenti selezionare lo strumento Seleziona sezioni e cliccare sulle sezioni da modificare (ridimensionamento, spostamento). Facendo doppio clic su ogni sezione si aprir la finestra con le Propriet della sezione. Scegliere il tipo di contenuto per la sezione (lasciate per questo esercizio la tipologia immagini) e andate ad indicare un nome per la sezione: questo nome verr riportato come identificatore per il div che da esso Photoshop generer. 2.c Salvate il fie in formato psd in modo che anche dopo la chiusura della sessione possiate recuperare il file originale modificabile, completo di livelli e sezioni.

3.a Selezionare File -> Salva per web e dispositivi. Si aprir la finestra per l salvataggio e i settaggi per web. Selezionate le varie sezioni (o tutte le sezioni insieme) e specificate il formato e i parametri per il formato specifico. Una volta completata loperazione fate clic su Salva.

3/4

Un semplice modo per creare una pagina web da Photoshop

Scritto da Administrator

3.b Nella finestra di salvataggio date un nome alla pagina (se si tratta della prima pagina sar index). In basso a questa finestra, dal menu a tendina Formato, scegliete: HTML e immagini in modo da generare una pagina web composta da una struttura che ingloba le sezioni. Le sezioni verranno esportate come immagini del formato scelto nella schermata precedente. Controllate che nel menu a tendina Sezioni sia selezionata la voce Tutte le sezioni in modo che vengano esportate tutte (sezioni utente e sezioni automatiche). Dal menu a tendina Impostazioni scegliete invece la voce Altri. 3.c Una volta scelto Altri dal menu a tendina Impostazioni si apre una finestra che vi permette di gestire lesportazione in html. In alto a sinistra compare un menu a tendina, la cui voce di default, allapertura della finestra Generali. In questa schermata selezionate solo Genera XHTML in modo da creare una pagina HTML che rispetti le regole dello standard XHTML. Dal menu a tendina in alto a sinistra passate da Generali a Sezioni. In questa schermata selezionate Genera tabella per generare una tabella contante celle quante sono le vostre sezioni oppure Genera CSS per trasformare le sezioni in DIV regolati tramite regole CSS interne al file HTML generato. 3.d Una volta effettuata la scelta, confermate con Ok le impostazioni, completate il salvataggio e vi ritroverete un fil hmt e una cartella images. Definite un sito locale in Dreamweaver che faccia riferimento a questi file e modificate il file tramite gli strumenti di Dreamweaver.Scarica in formato zip un semplice esempio cliccando qui

4/4