Se stai per progettare l’aspetto estetico di un sito, lo spazio riempibile in una schermata di Internet è di 780 x 430 pixel. Supponiamo infatti che la maggior parte dei monitor siano settati per mostrare 800 x 600 pixel. Agli 800 di base vanno levati 20 pixel per la barra di scorrimento (quella che trovi all’estrema destra del monitor).
Sempre considerando un monitor di 800 x 600 pixel, lo spazio utile in altezza sarà di 430 pixel; il resto dello spazio della pagina risulta infatti occupato dalla pulsantiera di navigazione di Internet Esplorer che è alto di solito 170 pixel (600 - 170 = 430).
Se progettate per monitor di nuova generazione larghi 1024, regolatevi in proporzione.

Se si vuole inserire nel proprio sito web una pagina scritta con un carattere diverso, ad esempio con un carattere di tipo barocco che esula da quelli forniti da Dreamweaver, si dovrà scrivere il testo in Photoshop e salvare l’immagine come se fosse una foto, con l’estensione .jpg. Di conseguenza non sarà poi possibile fare alcuna modifica, né avrà valore, come parola, nei motori di ricerca poiché verrà riconosciuta come foto.

Per importare una foto in un sito web dopo averla scansionata per farne uso sul web, bisogna controllare che non sia troppo pesante altrimenti si rischia che l’apertura in Internet avvenga in modo eccessivamente lento (per esempio foto di 2 mega sono decisamente troppo pesanti)

Si procede allora utilizzando Photoshop.
Le foto dal punto di vista del peso, si analizzano selezionando immagine, dimensione immagine

La qualità della foto si legge alla voce DPI; bisogna tener presente che Internet è a 72 DPI, quindi la qualità della foto che si sta analizzando va subito ridotta a 72.

Per quanto riguarda la larghezza, si deve considerare che la maggior parte dei monitor misura 800 pixel mentre in altezza il massimo assoluto è di 600 pixel, ma un monitor normale di solito ha la parte superiore occupata dalla pulsantiera Internet quindi un’altezza utile da applicare alla foto da ridurre è intorno ai 500 pixel (Ctrl Alt + e Ctrl Alt - per ingrandire a ridurre la foto in fase di visualizzazione)

JPG ha 12 gradazioni e prima del salvataggio il sistema chiede di scegliere la qualità tra 0 qualità minima e peso minimo, e 12 massima qualità e massimo peso. Non è possibile prevedere in maniera esatta quale sarà il peso di una foto compressa a 0 o a 6 o a 12. In linea di massima se a 12 pesa 200, a 11 peserà 120, a 9 peserà 90, poi le differenze si ridurrano: a 3 peserà 50, a 2 48, a 1 45, a 0 44 (i valori che riportiamo sono però del tutto approssimativi, servono solo a darvi un’idea di limiti e virtù della compressione.

Una volta salvate, le varie versioni della fotografia iniziale risulteranno ognuna di peso diverso, e ciò è dovuto al fatto che ogni colore, ogni gradazione, viene compressa da JPG in modo differente.

Iscrizioni per il corso di Photoshop a Roma

Eliminare il retino in Photoshop col filtro Smacchia

Con il tasto filtro/disturbo/smacchia si può smacchiare una foto da eventuali ombre o retini, mentre con filtro/contrasto/maschera di contrasto (da usare magari più volte ma sempre con i valori minimi e controllando le modifiche introdotte) si può aumentare la visibilità. Se si vuole fare una correzione ad una foto, si dovrà entrare nell’immagine attraverso Photoshop (entrando nella cartella creata da Dreamweaver) e la correzione effettuata risulterà anche nell’album di DreamweaverDa Photoshop a DREAMWEAVER
Per correggere dei files JPG da dentro Dreamweaver, si può direttamente utilizzare Photoshop. Una volta effettuata la modifica e salvata l’immagine, la modifica risulterà automatica anche in Dreamweaver, che visualizzerà il file nella sua versione modificata. Se si passa a vedere la nuova versione dell’immagine utilizzando F12, ricordarsi di cliccare su aggiorna, onde evitare che Internet Explorer visualizzi la versione precedente.

CREAZIONE DI UN’IMMAGINE DI ROLLOVER
Per creare una immagine rollover sono necessarie due immagini in
JPG (se si tratta di immagini in .psd, attraverso Photoshop devono essere trasformate in .gif o .jpg)

Il formato JPG però non prevede la presenza dei livelli di trasparenza di una immagine, vale a dire che lo sfondo trasparente di Photoshop diventa uno sfondo tutto bianco quando un’immagine viene salvata in JPG
Per far sì che una immagine mantenga il suo contorno trasparente esiste un altro formato che si chiama
PNG

Un rollover, che cambia quando il puntatore passa sopra di esso, è costituito da due immagini: l’immagine principale (quella visualizzata quando la pagina viene caricata ) e l’immagine rollover (quella che appare quando il puntatore si trova sopra l’immagine principale)
Le due immagini devono avere le stesse dimensioni, in caso contrario, Dreamweaver ridimensiona automaticamente la seconda immagine in base alle proprietà della prima
Le immagini rollover sono configurate in modo tale rispondere automaticamente all’evento Mouse Over

Per creare un rollover

Nella finestra del documento, spostare il punto di inserimento nella posizione in cui si desidera appaia il rollover;
Inserire il rollover in uno dei seguenti modi:
Nella categoria Comuni del pannello Oggetti, fare clic sull’icona Inserisci Immagine Rollover;
Nella categoria Comuni del pannello Oggetti, trascinare l’icona Inserisci Immagine Rollover nel punto della finestra del documento in cui si desidera inserire l’immagine;
Scegliere Inserisci, Immagine interattiva, Immagine Rollover;

Viene visualizzata la finestra di dialogo Inserisci Immagine Rollover

Nel campo Nome Immagine, digitare un nome per l’imagine rollover;
Nel campo Immagine Originale, fare clic su Sfoglia e selezionare l’immagine oppure digitare il percorso in cui si trova l’immagine che deve essere visualizzata durante il caricamento della pagina;
Nel campo Immagine Rollover, fare clic su Sfoglia e selezionare l’immagine oppure digitare il percorso in cui si trova l’immagine che deve essere visualizzata quando il cursore viene fatto passare sull’immagine originale;

Nel campo Dopo Un Clic accedi all’URL, fare clic su Sfoglia e selezionare il file, oppure digitarne il percorso, che sarà visualizzato quando l’utente porta il mouse sull’immagine rollover;

Fare clic su OK per chiudere la finestra di dialogo Inserisci Immagine Rollover

Per provare il funzionamento di un rollover:
Scegliere File, Anteprima nel browser, oppure premere F12;
Nel browser, spostare il puntatore sull’immagine originale

La visualizzazione passa all’immagine rollover.

Esempio di creazione immagine rollover con un semaforo:
Per trasformare un semaforo verde in un semaforo rosso, con Photoshop si parte dall’immagine del semaforo verde, la si duplica e dopo aver selezionato il colore rosso si seleziona riempi, che va a colorare la parte del semaforo selezionata

In questo modo però la colorazione copre tutto uniformemente, quindi se si desidera mantenere intatte le parti più o meno luminose del colore verde del semaforo originale, si deve selezionare un comando che si trova in alto a destra dello schermo (sopra i vari livelli di lavoro) e che solitamente è in modalità normale, ma che in questo caso deve essere in modalità colore, permettendo al colore rosso di riempire mantenendo le particolari trasparenze e intensità di luce

La parte di semaforo che prima era verde, nella nuova immagine di semaforo rosso, deve diventare scura.
Per spegnere un colore o una luce, mantenendo il più possibile le particolarità dell’immagine, si selezionano i seguenti comandi: immagine, regola immagine, luminosità; abbassando la luminosità il colore diventa piano piano scuro.

Dopo aver ottenuto le due immagini di semaforo verde e rosso, si possono salvare in PNG in modo che il contorno di esse si mantenga trasparente per essere eventualmente trasferite su qualunque pagina, con qualunque sfondo.

Una volta pronte, le due immagini si possono portare in Dreamweaver e selezionare rollover (finestra, oggetti, rollover - seconda immagine a destra sul cruscotto).

NB
Dreamweaver non sempre legge bene le immagini, quindi verificare con F12 che le stesse risultino correttamente in Internet .

Ricordare sempre che, essendo l’imagine rollover un pulsante attivo, bisogna che ci sia un collegamento (dopo un clic accedi all’URL), poiché l’utente dopo aver visualizzato l’immagine rollover, la clicca per accedere al percorso.

Come integrare i corsi di Photoshop. Siti con tutorial e risorse (sono prevalentemente in inglese)

http://www.freeonline.it/elenco_articoli_dtml?categoria=Tutorial+Photoshop

http://www.absolutecross.com/tutorials/photoshop

http://www.reality9.com/tutorials.html

http://www.metaeffect.com/main.m4?go=tutorials  

http://www.deaddreamer.com/v10/tuto/index.html