Questo tutorial vi guiderà passo per passo nella realizzazione del layout grafico di sito internet, fittizio ma perfettamente funzionante, utilizzando Fireworks.
Le lezioni si rivolgono a utenti con un minimo di conoscenza del programma,
i più inesperti possono comunque far riferimento alla guida a Fireworks
pubblicata su HTML.it
e in particolare alle ultime lezioni che introducono le novità di Fireworks
MX.
Verranno analizzate tutte le varie fasi della produzione a partire dalla progettazione
della struttura, alla realizzazione del logo e delle varie immagini necessarie,
fino ad arrivare all'ottimizzazione e all'esportazione delle pagine principali
che serviranno poi come modelli per tutte le pagine interne.
Le ultime due lezioni mostreranno brevemente l'uso di Dreamweaver per apportare piccole modifiche e ritocchi alle pagine create con Fireworks.
Il sito che ho scelto per questo tutorial, come ben si capisce dal nome (Cartoline dal Mondo), ricalca lo schema di quei siti in cui è possibile scaricare immagini. In particolare in questo caso, per semplificare la struttura dei menù, mi sono limitata ad una raccolta di immagini provenienti da varie parti del mondo; questo però, come vedrete, ci permetterà di utilizzare tutte le principali funzioni di Fireworks che normalmente si usano nella realizzazione dei layout.
Per avere un'idea di quello che otterremo alla fine del tutorial potete scaricare l'intero sito già finito qui.
Il nome del sito e del logo sono un prodotto della mia fantasia e quindi qualunque riferimento a siti o aziende realmente esistenti è da ritenersi puramente casuale.
Tutte le immagini utilizzate invece sono di tipo free e sono state prelevate
dai seguenti siti:
www.freefoto.com
stock.d2.hu
www.graphicmaps.com
Nota: in questo tutorial si fa riferimento all'ultima versione del programma (Fireworks MX) ma praticamente tutte le funzioni usate sono reperibili anche nella versione precedente, salvo che potrebbero essere diversi i menù in cui si trovano i vari comandi. Comunque nelle varie lezioni sarete avvertiti se verranno usate funzionalità disponibili soltanto nella nuova versione.
Creare Testo 3D con Photoshop CS5Creare una scritta sfruttando gli effetti tridimensionali... |
Photoshop CS6: le novità più interessantiUn'interfaccia rinnovata, semplificazione di comandi ripetuti,... |
Digital painting con PhotoshopCreare illustrazioni digitali sfruttando la capacità del software di... |
Forme e texture con Photoshop, creare una carta da gioco infuocataSfruttare forme vettoriali e texturing per ottenere un'illustrazione... |
Attenuare rughe d'espressione e imperfezioni della pelle con PhotoshopLe tecniche per attenuare rughe d'espressione e imperfezioni della... |
Guida Photoshop CS5Modifica e ottimizzazione dell'immagine, strumenti di disegno e... |
Guida Photoshop CS4Disegno, fotoritocco, effetti con Photoshop CS4: impariamo a usare... |
Guida Paint Shop ProPaint Shop Pro è un celebre programma di fotoritocco,... |
Ogni settimana, direttamente nella tua e-mail: guide, articoli, tutorial e FAQ su Web Design e grafica per il Web.
Iscriviti alla newsletter
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |