Share
Vandaag brengen we je het eerste bericht in een serie berichten gericht op Fireworks for Web Designers. We zullen diepgaand kijken naar wat Fireworks te bieden heeft voor webontwerpers, en waarom, wanneer correct gebruikt, het de perfecte partner is voor Photoshop. Maak je klaar om je kennis van Fireworks naar een hoger niveau te tillen!
Tom Green is een hoogleraar interactieve multimedia via het Humber Institute of Technology en Advanced Learning's School of Media Studies. Zoals alle faculteit in het programma, vindt Tom dat zijn studenten het verdienen les te krijgen van instructeurs die worden beschouwd als experts in hun vakgebied en wiens kennis van hun vak actueel is met de beste praktijken in de industrie. Hij is een Adobe Community Expert, Adobe Education Leader (Post Secondary), Community MX-partner en werd vermeld in Adobe's Top Ten Most Influential Flash Designers.
Tom heeft in de afgelopen 7 jaar verschillende boeken geschreven (9 in totaal!) En uitgebreide tutorials uitgebracht over het onderwerp Vuurwerk en webontwerp, dus hij past er goed bij om ons door dit ongelooflijke programma te loodsen. Na deze introductie zal Tom ons begeleiden door de wondere wereld van Fireworks met verschillende video-tutorials. Oké, nu dat je een beetje weet over Tom, laten we ingaan!
"Photoshop is een hamer en vuurwerk is een schroevendraaier ..."
Laten we deze serie beginnen door recht te zijn met elkaar: ik ben niet hier om u te overtuigen dat Fireworks beter is dan Photoshop voor webdesign. Als je een bevestigde Photoshop-gebruiker bent en deze gebruikt om websites te ontwerpen, verwacht dan niet dat ik probeer om Photoshop uit je vingers te wrikken. Het enige dat ik van u verwacht, is dat de onderstaande opmerkingen niet worden ingevuld met "Photoshop doet dit beter omdat ...." We hebben die discussie al gehad.
Ik ben door Brandon gevraagd om een reeks artikelen te doen rond waar Fireworks past in het algemene schema van dingen als het gaat om digitale workflow. Om eerlijk te zijn kijk ik al een tijdje uit naar deze mogelijkheid, omdat er een reëel gevaar bestaat in dit gekke bedrijf om een tool te gebruiken en niet op te geven. Voor mij is Photoshop een hamer en Fireworks is een schroevendraaier. Je kunt het dus begrijpen als ik je vertel dat ik het beu kijk hoe mensen hun tijd verspillen door met een hamer in schroeven te duwen of nagels in te schroeven.
Ik gebruik Fireworks sinds het voor het eerst op de markt kwam en ik kan je vertellen dat Macromedia op dat moment geen idee had hoe groot het internet zou worden. Het probeerde uit te komen met een eenvoudig te gebruiken grafische editor die mogelijk in Flash of Dreamweaver wordt gebruikt. Ik raakte er verslaafd aan omdat ik een directeur-gebruiker was die het maken van knoppen in Photoshop vond - CHOPS anyone - was vervelend en tijdrovend. Toen ik ontdekte dat ik dezelfde knop in Fireworks in vijf minuten kon uitvoeren, kostte het me tien minuten om in Photoshop te maken en dat is de reden dat ik sindsdien niet meer terugkijk. Houd er rekening mee dat ik Photoshop nog steeds gebruik wanneer ik iets moet doen dat Fireworks niet kan doen, zoals 'content aware' en verschillende filters.
Het andere aspect van deze serie is dat Adobe heeft een nogal slechte klus geklaard bij het positioneren van Fireworks op de markt. Het was pas bij de release van CS4 dat ze erachter kwamen dat iets heel wat mensen al wisten: Fireworks is een tool voor snelle prototyping.
Dat is een van de dingen die ik in deze serie wil benadrukken. Als hulpmiddel voor prototypen biedt Fireworks u de mogelijkheid om:
Het probleem is dat mensen die vier aspecten zien en stoppen daar omdat ze de aandacht verliezen voor het woord 'prototype'. Ze gaan niet verder en ontdekken dat voor elk van die toepassingen een "volgende stap" vereist is, die meestal gepaard gaat met de overdracht aan een professional die belast is met de taak om het domme ding feitelijk samen te voegen.
Het woord 'rapid' is er omdat, eerlijk gezegd, klanten vragen stellen als: "Hoe ziet dit project / ding dat u voorstelt eruit?" In dat stadium wilt u niet veel tijd en geld besteden aan antwoorden de vraag: Fireworks biedt u een tamelijk efficiënte oplossing om die vraag te beantwoorden.
Hoewel ik van plan ben om in de volgende artikelen dieper in te gaan op deze vier aspecten van de toepassing, laten we een stapje terug doen en Fireworks bekijken voordat we specifiek worden. De gebieden die ik markeer, zijn geen "favoriete" lijst. Ze verdrijven "mythen" over vuurwerk of benadrukken een belangrijke productiviteitsfunctie die u misschien wel ... misschien niet nuttig vindt. In willekeurige volgorde zijn ze:
Nee dat doet het niet.
Fireworks exporteert HTML- en / of CSS-lay-outs die veel extra werk nodig hebben van iemand met webontwerp of CSS-ontwerp en codekarakters. Het doel van het kunnen exporteren van HTML of CSS is om de klant een blik te geven in wat u suggereert en om het webpersoneel een startpunt voor het project te geven. Ik moet nog een Fireworks-project tegenkomen dat rechtstreeks vanuit de app naar internet is gegaan.
In feite moet iedereen die Fireworks gebruikt om websites voor de definitieve versie te maken, hun Fireworks CS5-licentie inleveren.
Fireworks bevat al enkele jaren een optimalisatiepaneel waarmee u verschillende optimalisatie-instellingen voor jpg- en GIF-afbeeldingen kunt vergelijken en een 4-up-kwaliteitsvergelijking kunt uitvoeren met het origineel. Dit is hier niet om een stokje te steken in het debat in Fireworks / Photoshop, maar om een vrij vaak over het hoofd geziene productiviteitsfunctie van de toepassing te benadrukken. In feite is de jpg die uit Fireworks is getrapt eigenlijk kleiner en beter dan degene die uit Photoshop is getrapt. Neem mijn woord niet op. Greg Rewis, Adobe's Worldwide Evangelist, heeft dit ook ontdekt en erover geblogd.
Eigenlijk is het formeel bekend als de gemeenschappelijke bibliotheek. Dit paneel zit boordevol nuttige symbolen die kunnen worden gebruikt in uw prototypes en deze symbolen kunnen aan pagina's worden toegevoegd en, in het geval van de Flex-symbolen, kunnen ze op een later tijdstip worden vervangen door de echte deal. Houd er rekening mee dat deze symbolen niets meer zijn dan pictogrammen, maar ze maken het leven zeker gemakkelijk wanneer u een nauw vakje aan een deel van het chroom moet toevoegen.
Tegelijkertijd bevat Fireworks de mogelijkheid om interactieve buttion-symbolen, pop-upmenu's, rollovers en een aantal interactieve functies en effecten te creëren waaraan we in de loop der jaren gewend zijn geraakt. Deze sybols worden bewaard in een symboolbibliotheek en kunnen indien nodig opnieuw worden gebruikt.
Geïntroduceerd in Fireworks CS4 maakt de FXG-indeling Fireworks tot een krachtige interface voor het maken van prototypen van rijke internettoepassingen. In feite kunt u een uit meerdere pagina's bestaand ontwerp uit meerdere lagen uit Fireworks exporteren als FXG-bestand en openen ... compleet met intacte pagina's en lagen ... in Flash Catalyst CS5. Een weinig bekend feit over deze indeling is dat u een Fireworks-document kunt opslaan als een FXG-bestand en het kunt openen in Illustrator CS5. Laten we ook niet vergeten dat "roundtripping" al jaren een functie is van de apps, wat betekent dat u bijvoorbeeld een Fireworks-afbeelding in een Dreamweaver-document kunt plaatsen en het Fireworks-document kunt bewerken en wijzigen vanuit Dreamweaver.
Fireworks CS5 kan Illustrator- en Photoshop-documenten openen en documenten opslaan in de oorspronkelijke indelingen van die twee apps ... Fireworks ondersteunt Photoshop-lagen, laagstijlen, laagcomposities, vectorlaag en overvloeimodi die vaak voorkomen in Fireworks en Photoshop. Uitzonderingen zijn aanpassingslagen en uitknipgroepen. Als u deze nodig heeft, kunnen ze worden afgevlakt of genegeerd.
In de figuur kunt u zien dat u alleen bestanden kunt opslaan in Illustrator 8. Als u een harde kern hebt, is dit waarschijnlijk uw excuus om Fireworks een fout te geven. Dat zou een grote fout zijn.
In het vorige punt heb ik het FXG-formaat gemarkeerd. Als u dat doet, worden de ondersteunde vectorvuleffecten behouden als vectoren, wat betekent dat Fireworks-ontwerpen die in Illustrator zijn geopend eenvoudig kunnen worden geconverteerd naar hi resoluties voor CMYK-afdruktaken of eenvoudig kunnen worden geopend in Illustrator voor verdere manipulatie.
De introductie van de CS5-productverzameling markeerde ook het debuut van Fireworks in Device Central.
Kies uw apparaat en klik op Maken om Fireworks te openen. Wanneer Fireworks wordt geopend, wordt het canvas aangepast aan de schermgrootte van het apparaat. Maak vervolgens uw ontwerp en selecteer Bestand> Voorbeeld in Device Central om uw pagina op het apparaat te bekijken. Ik zal toegeven dat de implementatie behoorlijk zwak is vergeleken met wat je met andere applicaties kunt doen. Op dit moment kun je eenvoudig zien hoe de pagina eruit ziet op het apparaat. Als u een ontwerp met meerdere pagina's wilt maken en door de pagina's wilt bladeren, hoeft u zich geen zorgen te maken. Je krijgt alleen enkele pagina-aanzichten te zien.
Maak een knop met meerdere staten in Fireworks, sleep het symbool van het Fireworks-canvas naar de Flash-fase en een volledig werkend Flash-knopsymbool verschijnt in de Flash-bibliotheek. Ik heb Fireworks ook gebruikt om vrijwel elk interface-element te maken dat ik ooit in mijn boeken, tutorials en lessen heb gebruikt. In feite heb ik ooit een volledig functionerende Flash-video skin gebruikt die volledig in Fireworks is gemaakt in een van mijn Flash Video-boeken om te bewijzen dat Fireworks moet worden uitgenodigd voor het feest.
Wat ontwerpers ook vaak over het hoofd zien, is dat Fireworks GIF-animaties maakt en deze animaties kunnen worden uitgevoerd als .swf-bestanden voor gebruik in Flash of, er klaar voor te worden ... After Effects CS5.
Dit is een gebied waar Fireworks een tijdbesparende kolos is ten opzichte van Photoshop. Hoewel je Photoshop-acties kunt maken om het formaat van mappen te wijzigen, de naam ervan te wijzigen en opnieuw te formatteren ... moet je die actie maken. Fireworks heeft Batch-verwerking bij Bestand> Batch-proces. Van daaruit identificeert u eenvoudig de bestanden die moeten worden verwerkt, wat u hen wilt laten doen en waar ze naartoe gaan. Ik heb mappen verwerkt die enkele tientallen foto's bevatten die ik heb gemaakt op mijn Nikon D200 voor latere upload naar Flickr. Van start tot finish duurt het proces zelden langer dan drie of vier minuten.
Zoals ik aan het begin al zei, is de bedoeling van het stuk niet om het "niet-debat debat" over "Vuurwerk en Photoshop", dat al aan de gang is sinds de app terug in de Macromedia-dagen op weg is, te bevrijden. Toen Adobe Macromedia kocht, werd er serieus geld verdiend met het feit dat het vuurwerk net als Freehand op dezelfde stofhoop zou worden gegooid. Dat is niet gebeurd en veel van de redenering daarachter was dat Adobe Fireworks nooit als concurrentie voor Photoshop zag. In plaats daarvan heeft Fireworks in de loop der jaren de aandacht getrokken van webontwerpers, RIA-ontwerpers en mobiele ontwerpers om hun ideeën snel tot leven te brengen voor hun klanten. In bepaalde opzichten werd de evolutie van Fireworks in een tool voor snelle prototyping meer gestuurd door wat gebruikers met de app deden en vertelden ze Adobe erover dan andersom.
De komende weken ben ik van plan om dat te doen - u vertellen wat Fireworks-gebruikers doen met de app - en om u te laten zien hoe de app in uw dagelijkse workflow past. Of je ervoor kiest om Fireworks een werveling te geven, is aan jou, maar terwijl we ons in de multiscreen-omgeving begeven die Fireworks plotseling heeft opgedoken en photoshop nog meer complementaire producten zal worden die concurrerende producten zijn.
Accentsconagua