Vediamo adesso come preparare per l'esportazione il file corpo.png.
Non contiene pulsanti né porzioni di altro genere (ricordatevi che i
punti attivi non introducono tagli) quindi Fireworks la esporterebbe come un'unica
grossa immagine.
La barra laterale data la sua struttura, se esportata con attenzione, ci permetterà di alleggerire ulteriormente la pagina lavorando nell'editor HTML e di renderla anche più versatile.
Per prima cosa inseriamo due linee guida orizzontali a 20 e 295 px e spostiamo
quella verticale da 150 a 155 pixel. Verifichiamo che l'opzione Aggancia alle
guide sia attivata (Visualizza > Guide) perché ci aiuterà a
tracciare porzioni che non si soprammettono.
tracciamo prima una porzione che parta dalla linea guida superiore e arrivi
fino a quella inferiore e che copra l'intera immagine mappata e chiamiamola
mondo (campo Porzione nel pannello Ispezione Proprietà).
tracciamo poi altre quattro porzioni che coprano l'intera barra: le dimensioni e le posizioni saranno:
|
Dimensioni
|
Posizione
|
Nome
|
|
155x20
|
X = 0, Y = 0
|
barra_alto
|
|
155x255
|
X = 0, Y = 20
|
via1
|
|
155x20
|
X = 0, Y = 275
|
sfondo
|
|
155x10
|
X = 0, Y = 295
|
barra_basso
|
Verifichiamo con l'anteprima nel browser che non ci siano problemi di visualizzazione,salviamo
e chiudiamo il documento.
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 |