Come creare pulsanti interattivi rollover in ImageReady

October 31

Quando si esegue l'aggiornamento da Photoshop CS2 a CS3, non buttare la vecchia versione ancora fuori. CS3 ha eliminato la possibilità di effettuare rollover veramente interattive sulle sue pagine web. Si potrebbe costruire i rollover interattive con Dreamweaver, o pony su per Fireworks, oppure è possibile inviare nuovamente i file Photoshop CS2 e costruire in pochi minuti con ImageReady.

istruzione

1 Apri la tua immagine in Photoshop. Costruire il fondo, le forme dei pulsanti, le frontiere e il testo su diversi livelli. Spostare gli elementi che non cambiano mai a un gruppo di layer denominato "statico" e gli elementi a cambiare quando il cursore passa sopra a un gruppo livello denominato "normale". Questi elementi possono includere la figura del tasto, colore del pulsante o il testo.

2 Duplicate il gruppo di livelli "Normale" e il nome "rollover". Apportate le modifiche agli elementi pulsante per indicare il cursore del mouse è rotolato sul pulsante (gli effetti di rollover non devono essere nella stessa area dell'immagine come il pulsante). Nascondere il gruppo di layer "rollover".

3 Fare una fetta separato per ogni tasto. Fare doppio clic su ogni fetta con lo strumento di selezione della fetta per aprire la finestra "Opzioni sezione". Nome il pulsante e immettere l'URL del pulsante.

4 Salvare il file e spostarlo in ImageReady. Selezionare la prima fetta tasto e fare clic sul pulsante "Crea rollover Stato" nella parte inferiore della tavolozza "Web Content". Un nuovo stato rollover denominato "Over" apparirà nella tavolozza.

5 Selezionare l'anteprima stato rollover nella palette "Web Content". Aprire la palette Livelli. Nascondere il gruppo di livelli "Normale" e mostrare al gruppo di layer "rollover".

6 Ripetere l'operazione per le altre fette pulsante. Si dovrà mostrare al gruppo di layer "rollover" per ogni stato rollover.

7 Clicca su "Anteprima nel browser" per visualizzare in anteprima il documento e controllare due volte gli effetti rollover. Scegliere "Salva ottimizzato come" dal menu File. Salva come HTML e immagini per con "tutte le fette" selezionati. ImageReady genera la pagina web e tutto il codice necessario per far funzionare il rollover.

Consigli e avvertenze

  • Aprire i file CS3 in versioni precedenti di Photoshop e ImageReady, ma l'applicazione più anziani saranno appiattire eventuali effetti sviluppati in applicazioni successive. Controllare ciò che accade appiattendo i singoli strati e salvare una copia del file di lavoro.
  • Tagliate l'immagine in Photoshop o ImageReady; gli strumenti di lavoro più o meno lo stesso.