Oggi ti stiamo portando il primo post in quella che sarà una serie di post incentrati su Fireworks per i web designer. Daremo un'occhiata approfondita a ciò che Fireworks ha da offrire ai web designer e perché, se usato correttamente, è il compagno perfetto per Photoshop. Preparati a portare la tua comprensione dei fuochi d'artificio al livello successivo!
Tom Green è un professore di Interactive Multimedia attraverso l'Humber Institute of Technology e Advanced Learning's School of Media Studies. Come tutti i docenti del programma, Tom ritiene che i suoi studenti meritino di essere istruiti da istruttori che sono considerati esperti nel loro campo e la cui conoscenza della materia è in linea con le migliori pratiche del settore. È un Adobe Community Expert, Adobe Education Leader (Post Secondary), Community MX partner ed è stato elencato tra i dieci principali Flash Designer più influenti di Adobe.
Tom ha scritto diversi libri (9 in tutto!) E tutorial estesi sul tema Fireworks e il web design negli ultimi 7 anni, quindi è una scelta naturale per guidarci attraverso questo incredibile programma. Dopo questa introduzione, Tom ci guiderà attraverso il meraviglioso mondo di Fireworks con numerosi video tutorial. Bene, ora che conosci un po 'di Tom, scaviamo dentro!
"Photoshop è un martello e Fireworks è un cacciavite ..."
Iniziamo questa serie essendo coerenti l'uno con l'altro: non sono qui per convincerti che Fireworks è meglio di Photoshop per il web design. Se sei un utente Photoshop confermato e lo utilizzi per progettare siti Web, non aspettarti che tenti di fare leva su Photoshop con le dita. Tutto quello che mi aspetto da te è che i commenti qui sotto non vengano popolati con "Photoshop lo fa meglio perché ...". Abbiamo già avuto questa discussione.
Brandon mi ha chiesto di fare una serie di articoli su dove Fireworks si inserisce nello schema generale delle cose quando si tratta di flusso di lavoro digitale. Ad essere onesti, non vedevo l'ora di cogliere questa opportunità per un po ', perché in questo stupido business c'è il pericolo di aggrapparsi a uno strumento e non rinunciarci. Per me, Photoshop è un martello e Fireworks è un cacciavite. Così puoi capire quando ti dico che sono stanco di guardare le persone sprecare il loro tempo guidando in viti con un martello o avvitando le unghie.
Utilizzo Fireworks da quando è arrivato sul mercato e posso dirti che Macromedia non aveva idea di quanto grande sarebbe diventato il web. Stava cercando di uscire con un editor di grafica facile da usare che potrebbe essere utilizzato in Flash o Dreamweaver. Mi sono appassionato perché ero un utente Director che ha trovato la creazione di pulsanti in Photoshop - CHOPS nessuno - era noioso e richiedeva molto tempo. Quando ho scoperto che potevo fare lo stesso pulsante in Fireworks in cinque minuti, mi ci sono voluti 10 minuti per creare in Photoshop e non ho più guardato indietro da allora. Basta tenere a mente che utilizzo ancora Photoshop quando devo fare qualcosa che Fireworks non può fare come "content aware" e diversi filtri.
L'altro aspetto di questa serie è questo Adobe ha svolto un lavoro piuttosto pessimo nel posizionamento di Fireworks sul mercato. Non è stato fino al rilascio di CS4 che hanno capito qualcosa che alcune persone già conoscevano: Fireworks è uno strumento di prototipazione rapida.
Questa è una delle cose che ho intenzione di sottolineare in questa serie. Come strumento di prototipazione, Fireworks ti offre l'opportunità di:
Il problema è che le persone vedono questi quattro aspetti e si fermano lì perché perdono l'attenzione prima della parola "prototipo". Non vanno oltre e scoprono che ognuno di questi usi richiede un "prossimo passo" che di solito comporta la consegna ad un professionista incaricato di mettere effettivamente insieme la dannata cosa.
Il termine "rapido" è lì perché, francamente, i clienti fanno domande del tipo: "Che aspetto ha questo progetto / cosa che stai suggerendo?" In quella fase non vuoi spendere un sacco di tempo e denaro per rispondere la domanda: Fireworks ti offre una soluzione piuttosto efficiente per rispondere a questa domanda.
Anche se ho intenzione di approfondire questi quattro aspetti dell'applicazione negli articoli successivi, facciamo un passo indietro e prendiamo una visione generale di Fireworks prima che diventiamo specifici. Le aree che evidenziano non sono una lista "preferita". Dissolvono i "miti" di Fireworks o mettono in risalto una caratteristica di produttività importante che potresti ... o forse no ... trovare utile. In nessun ordine particolare sono:
No, non lo è.
Fireworks esporta layout HTML e / o CSS che richiedono un sacco di lavoro extra da parte di qualcuno con web design o design CSS e code code. Lo scopo di esportare HTML o CSS è dare al cliente uno sguardo su ciò che stai suggerendo e dare al web crew un punto di partenza per il progetto. Devo ancora incontrare qualsiasi progetto di Fireworks diretto direttamente sul Web dall'app.
Infatti chiunque utilizzi Fireworks per creare siti Web con versione finale, dovrebbe attivare la propria licenza di Fireworks CS5.
Per diversi anni, Fireworks ha contenuto un pannello di ottimizzazione che consente di confrontare varie impostazioni di ottimizzazione per le immagini jpg e gif e fare un confronto di qualità 4-Up con l'originale. Questo non è qui per attirare l'attenzione nel dibattito di Fireworks / Photoshop ma per evidenziare in realtà una funzionalità di produttività piuttosto comunemente trascurata dell'applicazione. In effetti, il jpg estratto da Fireworks è in realtà più piccolo e migliore di quello lanciato da Photoshop. Non credermi sulla parola. Anche Greg Rewis, l'evangelista mondiale di Adobe, lo ha scoperto e ne ha parlato in blocco.
In realtà è formalmente conosciuto come Common Library. Questo pannello è pieno di simboli utili che possono essere utilizzati nei tuoi prototipi e questi simboli possono essere aggiunti alle pagine e, nel caso dei simboli Flex, possono essere scambiati per il vero affare in un secondo momento. Basta tenere a mente che questi simboli non sono altro che icone, ma sicuramente rendono la vita facile quando è necessario aggiungere una scatola chiusa ad alcune cromature.
Allo stesso tempo, Fireworks contiene la possibilità di creare simboli interattivi di buttion, menu a discesa, rollover e una serie di funzioni ed effetti interattivi a cui siamo abituati nel corso degli anni. Questi sybols sono conservati in una libreria Symbol e possono essere riutilizzati secondo necessità.
Introdotto in Fireworks CS4, il formato FXG è ciò che rende Fireworks un motore di progettazione di interfaccia quando si tratta di creare prototipi di applicazioni Internet avanzate. In effetti, puoi esportare un disegno multipagina e multistrato da Fireworks come file FXG e aprirlo ... completo di pagine e livelli intatti ... in Flash Catalyst CS5. Un fatto poco noto di questo formato è che è possibile salvare un documento di Fireworks come file FXG e aprirlo in Illustrator CS5. Inoltre, non dimentichiamo che "roundtripping" è una funzionalità delle app per anni, il che significa che è possibile, ad esempio, posizionare un'immagine di Fireworks in un documento di Dreamweaver ed effettivamente modificare e modificare il documento di Fireworks da Dreamweaver.
Fireworks CS5 può aprire documenti Illustrator e Photoshop e salvare documenti nei formati nativi di quelle due app ... Fireworks supporta i livelli di Photoshop, gli stili di livello, le composizioni di livello, i livelli vettoriali e i metodi di fusione comuni a Fireworks e Photoshop. Le eccezioni sono i livelli di regolazione e i gruppi di ritaglio. Se hai bisogno di questi possono essere appiattiti o ignorati.
È possibile notare nella Figura che è possibile salvare solo i file su Illustrator 8. Se si è di difficile utilizzo, è molto probabile che si tratti di una scusa per concedere a Fireworks un passaggio. Questo sarebbe un grosso errore.
Nel punto precedente ho evidenziato il formato FXG. Se lo fai, gli effetti di riempimento vettoriale supportati vengono mantenuti come vettori, il che significa che Fireworks progetta, aperto in Illustrator può essere facilmente convertito in immagini ad alta risoluzione per lavori di stampa basati su CMYK o semplicemente aperto in Illustrator per ulteriori manipolazioni.
L'introduzione della raccolta di prodotti CS5 segna anche il debutto di Fireworks in Device Central.
Scegli il tuo dispositivo e fai clic su Crea per aprire Fireworks. All'apertura di Fireworks, la tela viene ridimensionata in base alle dimensioni dello schermo del dispositivo. Da lì, crea il tuo design e seleziona File> Anteprima in Device Central per vedere la tua pagina nel dispositivo. Ammetto che l'implementazione è piuttosto scadente rispetto a quello che puoi fare con altre applicazioni. A questo punto nel tempo puoi semplicemente vedere come appare la pagina nel dispositivo. Se vuoi creare un design multipagina e scorrere le pagine, non preoccuparti. Puoi vedere solo le visualizzazioni di una singola pagina.
Creare un pulsante multistato in Fireworks, trascinare il simbolo dalla tela di Fireworks allo stage Flash e un simbolo di pulsante Flash funzionante apparirà nella libreria di Flash. Ho anche usato Fireworks per creare praticamente ogni elemento dell'interfaccia che abbia mai usato nei miei libri, tutorial e lezioni per anni. In effetti una volta ho usato una skin video Flash completamente funzionante che è stata completamente creata in Fireworks in uno dei miei libri Flash Video solo per dimostrare che Fireworks dovrebbe essere invitato alla festa.
Ciò che anche i designer tendono a trascurare è che Fireworks crea animazioni GIF e queste animazioni possono essere emesse come file .swf per l'utilizzo in Flash o, impostarsi per esso ... After Effects CS5.
Questa è un'area in cui Fireworks è un gigante che fa risparmiare tempo su Photoshop. Sebbene sia possibile creare azioni di Photoshop per ridimensionare, rinominare e riformattare le cartelle piene di immagini ... è necessario creare quell'azione. Fireworks ha l'elaborazione batch posizionata in File> Processo batch. Da lì è sufficiente identificare i file da elaborare, ciò che si vuole fare loro e dove vanno. Ho elaborato le cartelle contenenti alcune dozzine di immagini scattate sulla mia Nikon D200 per il successivo caricamento su Flickr. Dall'inizio alla fine il processo richiede raramente più di tre o quattro minuti.
Come ho detto all'inizio, l'intenzione del pezzo non è quella di sfidare il dibattito non-dibattito "Fireworks vs Photoshop" che sta accadendo da quando l'app ha colpito la strada nei giorni di Macromedia. Quando Adobe ha acquistato Macromedia c'erano dei soldi seri sul fatto che i fuochi d'artificio stavano per essere gettati nello stesso mucchio di polvere di Freehand. Ciò non è accaduto e gran parte del ragionamento alla base era che Adobe non ha mai visto Fireworks come una competizione per Photoshop. Invece, nel corso degli anni, Fireworks ha attirato l'attenzione di web designer, progettisti RIA e designer mobili come un modo per dare rapidamente vita alle loro idee per i loro clienti. Per certi aspetti, l'evoluzione di Fireworks in uno strumento di prototipazione rapida è stata guidata più da ciò che gli utenti stavano facendo con l'app e da come ne parlava ad Adobe rispetto al contrario.
Nelle prossime settimane, ho intenzione di fare proprio questo: dirti cosa fanno gli utenti di Fireworks con l'app e mostrarti in che modo l'app può adattarsi al tuo flusso di lavoro quotidiano. Sia che tu scelga di dare a Fireworks un vortice dipende da te, ma mentre ci spostiamo nell'ambiente multischermo che è improvvisamente spuntato Fireworks e Photoshop diventeranno ancora più prodotti gratuiti che prodotti competitivi.