Photoshop o fuochi d'artificio? È la domanda che ha gettato tutti i tipi di designer e sviluppatori in un acceso dibattito. Oggi useremo entrambe le applicazioni per creare una semplice grafica web.
Questo tutorial è rivolto a tutti quei designer che non si sognerebbero mai di rinunciare a Photoshop e di non sapere quasi nulla di Fireworks. Ti mostrerò come riprendere la grafica di Photoshop e aggiungere alcune funzioni interattive tramite Fireworks.
Interattività dovrebbe influenzare il design
Ci sono un sacco di designer là fuori che si attaccano a prototipi di design front-end puri. In altre parole, attivano Photoshop, estrapolano l'aspetto generale di un sito Web e lo inoltrano agli sviluppatori.
Molti sostengono che ogni progettista dovrebbe sapere come codificare, ma questo dibattito è irrilevante per il nostro argomento oggi. Il fatto è che negli uffici statunitensi ho visto uffici di progettazione in società che operano con due team distinti: le persone che progettano in Photoshop e le persone che danno vita a tali progetti nel browser.
Questo articolo è per il primo. Sei un progettista che non conosce un po 'di codice, ma sai che il tuo team di sviluppatori incoraggia i progetti dinamici e interattivi. Ti piacerebbe costruire le tue comp per tenere a mente questi obiettivi, ma alla fine puoi solo dare vaghi suggerimenti e sperare che gli sviluppatori condividano la tua visione.
Un'altra situazione comune è la necessità di creare rapidamente un mockup live che puoi mostrare a un client. Potresti essere perfettamente in grado di trasformare il tuo lavoro Photoshop in un sito web conforme agli standard, ma desideri assicurarti che il tuo cliente sia soddisfatto prima di procedere.
In entrambi i casi, Adobe Fireworks è uno strumento perfetto da aggiungere al tuo flusso di lavoro per ottenere ciò che cerchi. Usando Fireworks, puoi creare interazione direttamente nei tuoi progetti e visualizzarli in anteprima come se fossero una pagina live.
Perché i fuochi d'artificio?
I web designer di tutto il mondo stanno iniziando a rendersi conto che Fireworks è uno strumento davvero eccezionale per la progettazione di siti Web. C'è anche una discussione furiosa sul fatto che i web designer dovrebbero mai aprire Photoshop quando possono costruire un intero sito in Fireworks.
Nonostante questi argomenti, mi rendo conto che la comunità del web design, per la maggior parte, vive in Photoshop. Anche io sono abbastanza nuovo per Fireworks e sono quindi molto più incline a creare una rapida comp in Photoshop. Per questo motivo, questo tutorial ti mostrerà che puoi utilizzare i due insieme in modo sinergico. Creeremo una grafica di base in Photoshop dove ti senti a tuo agio, quindi spostalo su Fireworks per renderlo vivo.
Creazione di un pulsante in Photoshop
Invece di fare in modo che il tuo primo progetto di Fireworks sia un mockup completo del sito Web, prova a iniziare con qualcosa di piccolo. Il risultato sarà una transizione molto meno travolgente da un'applicazione all'altra. Oggi inizieremo la tua formazione su Fireworks con una semplice grafica a pulsanti.
Come ho detto sopra, dal momento che sei abituato al set di strumenti di Photoshop, inizieremo da lì. Si potrebbe facilmente realizzare l'intero oggetto in Fireworks (il flusso di lavoro sarebbe anche abbastanza simile), ma per ora voglio concentrarmi sull'idea che non devi necessariamente rinunciare alla tua applicazione grafica preferita.
Crea un nuovo documento Photoshop (qualsiasi dimensione va bene per questo test) e crea un rettangolo vettoriale come quello qui sotto. Ho riempito il pulsante con # 005da5.
Successivamente, vai agli stili di livello e aggiungi una leggera sovrapposizione sfumatura e un'ombra interiore. Quanto basta per rendere il pulsante un po 'meno piatto.
Da qui, duplica il livello di forma vettoriale con il tuo pulsante ed elimina i punti lungo il bordo inferiore usando lo Strumento selezione diretta (A). Quindi sposta i punti lungo il lato, riempi il livello con il bianco e riduci l'opacità in modo che l'effetto sia simile all'immagine qui sotto.
Infine, lancia alcune parole e sei pronto per partire. Ho usato un tipico font sans-serif grassetto con un'ombra interiore, le impostazioni sono mostrate di seguito.
Ora abbiamo il nostro orribile cliché pulsante di Photoshop lucido. Da qui vogliamo visualizzare in anteprima alcune interattività. Per esempio, diciamo che vogliamo mostrare un semplice effetto hover. Photoshop non è necessariamente il modo migliore per farlo e non abbiamo davvero bisogno di qualcosa di così intenso come Dreamweaver, quindi dov'è la via di mezzo? Fuochi artificiali in soccorso!
Importazione in Fireworks
Prima di importare questo documento in Fireworks, assicurati che il tuo PSD sia bello e pulito. Assegna un nome a tutti i tuoi livelli, raggruppa i livelli dove necessario, ecc. Ciò renderà tutto molto più facile da seguire lungo la strada. Il nostro piccolo pulsante ha solo pochi livelli quindi ho semplicemente chiamato tutto e salvato il PSD nella cartella del mio progetto.
Accendi Fireworks e apri il PSD che hai appena salvato. Non devi esportare / importare in alcun modo speciale, basta usare il semplice comando Open vecchio. Questo ti darà alcune opzioni con cui puoi scherzare (le ho lasciate tutte da sole), ma assicurati di selezionare l'opzione per mantenere la possibilità di editare il layer rispetto all'aspetto.
Da qui è importante indagare su quali saranno i fuochi d'artificio che non verranno trasferiti correttamente. Come puoi vedere nell'immagine qui sotto, le mie forme vettoriali, testo e colori sono finiti bene, ma l'opacità del livello sul mio highlight è al 100%. Questo è un po 'fastidioso, ma è abbastanza facile riportarlo al 10%.
A parte questo, il mio piccolo file è sopravvissuto perfettamente all'importazione. Come puoi vedere di seguito, i miei livelli sono rimasti intatti e persino i miei effetti di livello sono ancora modificabili.
Nota che gli effetti di livello appaiono nella tavolozza Proprietà e hanno un'interfaccia molto diversa da quella di Photoshop. Tuttavia, sono presenti gli stessi effetti e controlli di base.
Aggiungere un nuovo stato
Per aggiungere un po 'di interattività al nostro pulsante, dovremo lavorare con due funzioni di Fireworks che potresti conoscere o meno: Fette e Stati.
Gli stati sono un po 'come Photoshop Layer Comps, ma più orientati verso i cambiamenti effettivi che un oggetto dovrebbe attraversare. Quindi, per il nostro pulsante, vogliamo che l'aspetto cambi quando l'utente vi passa sopra. Per fare ciò, creeremo più stati per riflettere le diverse iterazioni dei pulsanti.
Per fare ciò, navigare nella palette Stati e duplicare lo stato corrente. Quindi denominare lo stato originale? Normale? o? Predefinito? e nominare il nuovo stato? Hover ?.
Da qui, vai alla tavolozza Proprietà e cambia il colore di riempimento del pulsante in rosso. Ancora una volta, questo è molto diverso da quello che vedi in Photoshop, ma il processo è auto-esplicativo. Fai clic sul campione, scegli un nuovo colore e sei pronto per partire.
Ora abbiamo due stati diversi con cui lavorare: un pulsante rosso e un pulsante blu. Utilizzando fette, possiamo collegare questi stati a un'azione di passaggio del mouse senza alcun codice.
Aggiungere una fetta
Le porzioni di Fireworks funzionano in modo molto simile a quelle di Photoshop, ma solo quando sono collaborate con gli stati si ottiene una funzionalità quasi simile a Dreamweaver.
Per aggiungere una sezione, afferra lo strumento di selezione e fai clic con il pulsante destro del mouse sul pulsante blu (assicurati di non fare clic sull'area evidenziata). Da qui, seleziona la voce di menu Inserisci Insert Slice rettangolare? per creare una fetta delle stesse dimensioni del nostro pulsante.
Dopodiché, una sovrapposizione colorata dovrebbe apparire sopra il pulsante. Cerca nuovamente nella tavolozza Proprietà per trovare le opzioni per la compressione del file della sezione, ho scelto? JPEG - Qualità migliore ?. Qui puoi anche aggiungere un link e un testo alternativo.
Implementazione dell'effetto Hover
Notare il piccolo cerchio al centro del pulsante nello screenshot in alto. Cliccando su questo verrà visualizzato un elenco di azioni. Da qui, tutto ciò che devi fare è selezionare? Aggiungi comportamento rollover semplice? e questo cambierà automaticamente lo stato del pulsante quando passi il mouse sopra l'immagine.
Dopo averlo fatto, non noterai alcuna differenza nel tuo documento. Per vedere l'effetto in azione, fai clic sul pulsante Anteprima vicino alla parte superiore della finestra. Questo ti permetterà di interagire con il pulsante proprio come se fosse in un browser web.
Esportare il pulsante su un browser
Ora, se vuoi mostrare la tua creazione a qualcun altro, probabilmente vorrai portarla fuori da Fireworks. Un modo per farlo è esportare il tuo file come una pagina web. Quando sei arrivato su File> Esporta, scegli l'opzione? HTML e immagini? mostra nell'immagine qui sotto.
Tieni presente che se stai creando un vero sito completo con più pagine, ti consigliamo di selezionare? Tutte le pagine? opzione ma per questo piccolo test abbiamo solo bisogno della pagina corrente. Il risultato dovrebbe essere una cartella di immagini e un? Htm? o? html? file che puoi caricare su un server e condividere online. Nota che quando lo apri nel browser, sia l'effetto hover che il link che abbiamo inserito funzionano proprio come su un vero sito Web, il che rende questo strumento molto utile per la creazione di web comp molto rapidamente.
Non pronto per la produzione
Se sei un non-programmatore che all'improvviso pensa di aver raggiunto l'oro, aspetta un attimo. Sfortunatamente, l'output qui va bene, ma non vicino a qualcosa che vorresti pubblicare su un sito reale. Il risultato del nostro semplice piccolo progetto era un intero casino di JavaScript quando in realtà un elemento web così semplice richiede solo poche righe di HTML e CSS.
Fireworks non è pensato per essere un costruttore di siti WYSIWYG in piena regola. Di conseguenza, l'output web in diretta non è all'altezza e dovrebbe essere utilizzato solo a scopo di anteprima.
Conclusione
Per riassumere, Photoshop è fantastico per la creazione di elementi grafici, ma quando si tratta di creare e visualizzare in anteprima le interazioni, non è all'altezza. In questi casi, Fireworks offre un set di strumenti molto più potente.
Questo tutorial è per principianti assoluti di Fireworks e riesce a malapena a graffiare la superficie degli strumenti web e delle funzionalità che hai a disposizione. Ne seguiremo presto uno sguardo più approfondito su come utilizzare Fireworks per creare alcune fantastiche compilation complete di siti web.