De Web Designer-handleiding voor het vergelijken van Photoshop en Fireworks

Vandaag gaan we dieper in op de belangrijkste verschillen tussen Photoshop en Fireworks en wat ze betekenen voor webontwerpers. Dit artikel is bedoeld als gids voor iedereen die de voordelen en nadelen van elke toepassing probeert te begrijpen. Ons doel: ontwerpers helpen om hun opties beter te begrijpen als het gaat om het kiezen van hun grafische toepassing naar keuze.

We hebben een lezerspoll over dit onderwerp gepost, dus zorg ervoor dat u ook uw eigen stem op dat bericht plaatst!

Laten we beginnen met het opsommen van de voor- en nadelen van elk programma. Voor de meeste ontwerpers is Fireworks de minder bekende, dus we beginnen daar:


De voordelen van het gebruik van Fireworks

Fireworks is een grafische toepassing, net als Photoshop ... maar de "doelgebruiker" van het programma is heel anders. De belangrijkste reden dat mensen Fireworks kiezen, is omdat het speciaal is gebouwd voor webontwerpers. Het is licht van gewicht, beweegt snel (zelfs op oudere computers) en is gemakkelijker te leren dan Photoshop als u geen ervaring hebt met een van beide programma's. Omdat het is gemaakt voor webontwerpers, is het waarschijnlijker dat het in de loop van de tijd zal groeien om meer geschikt te zijn voor deze branche. Het betekent ook dat als je net begint, je geen last zult hebben van de complexe gebruikersinterface of steile leercurve die je misschien in Photoshop tegenkomt.

Hier zijn enkele specifieke redenen waarom u Fireworks zou kunnen kiezen:

Hoofdpagina's (en meerdere pagina's / staten)

Met de functie Hoofdpagina kunt u consistente site-elementen instellen die u op elke "pagina" wilt weergeven. Met de functie Meerdere pagina's kunt u zoveel onderliggende pagina's binnen dezelfde sjabloon maken. Dit is super krachtig omdat het erg lijkt op de manier waarop een echte website werkt. In feite is de verwerking van Pages en Staten in een Fireworks-bestand bedoeld om het gedrag van een live webpagina na te bootsen. Sommige elementen zijn opgelost (zoals navigatie, branding, achtergronden, enz.) En sommige elementen veranderen van de ene pagina naar de volgende (inhoudskolommen, foto's, titels, enz.). Natuurlijk kun je dit ook in Photoshop doen door middel van Laaggroepen of meerdere PSD-bestanden, maar de organisatie en UI rondom deze functies in Fireworks is natuurlijker. Het verwerken van universele wijzigingen in Fireworks verloopt hierdoor sneller.

Oh, je kunt een pagina ook loskoppelen van de master als je aangepaste ontwerpelementen wilt maken, waardoor deze flexibel genoeg is om zelfs de meest complexe websites te verwerken.

Interne koppeling

Intern linken is precies wat het klinkt - In Fireworks kunt u 'hotspots' op uw site opgeven die linken naar de verschillende pagina's (hierboven genoemd). U kunt zelfs naar externe URL's linken als u dat wenst. Het oorspronkelijke idee was om ontwerpers toe te staan ​​een site in Fireworks te ontwerpen en deze vervolgens als code te "exporteren". De jury kijkt er nog steeds naar uit of de geëxporteerde code nuttig is, maar deze functie is fantastisch als je een bestand als een PDF wilt exporteren zodat een klant of art director snel kan doorbladeren. Dit maakt het gemakkelijk om snel een prototype te maken binnen Fireworks zonder ooit een regel code te hoeven schrijven.

Intelligent stijlbeheer

Stijlen in Fireworks lijken veel op CSS op een webpagina. Elk element kan een vulling, lijn, lettertype en effect hebben en het vervolgens laten opslaan als een stijl die vervolgens opnieuw kan worden gebruikt en aangepast op dezelfde manier waarop cascading stylesheets werken. Bewerk de bovenliggende "stijl" en alle elementen die die stijl gebruiken, zijn veranderd. Dit is vooral effectief wanneer het gaat om meerdere exemplaren tekstblokken op een site. Update een en je zult ze allemaal updaten. Nogmaals - dit is een geweldige tijdbesparende tool.

Betere vectorgereedschappen

Photoshop biedt enkele zeer elementaire vectorbewerkingstools, maar Fireworks brengt veel van de native functionaliteit van Illustrator in hun eigen gebruikersinterface. De beste tool (voor webontwerpers) is waarschijnlijk de "afgeronde rechthoek"- die controlepunten voor elke hoek bevat - waardoor het gemakkelijk is om snel wijzigingen aan te brengen in een afgeronde rechthoek. Je kunt een hoek afgerond maken en de andere niet - je kunt ook de straal wijzigen, iets wat Photoshop nog niet kan doen.

bibliotheken

Symbolen, stijlen en vectorvormen worden verpakt in bibliotheken die u kunt hergebruiken in andere projecten. Dit is geweldig voor ontwerpers die merken dat ze gemeenschappelijke elementen en stijlen hergebruiken. Het betekent ook dat u uw bibliotheken kunt delen met andere ontwerpers - wat vooral handig is als u werkt met grote ontwerpteams waarbij elke ontwerper toegang moet hebben tot dezelfde bibliotheken.

Betere groepering

Met Photoshop kunt u elementen groeperen in Laaggroepen, maar dit gebeurt handmatig en kan na verloop van tijd vervelend worden. Groeperen in Fireworks gebeurt op een meer natuurlijke manier: u selecteert eenvoudig een handvol elementen en klikt vervolgens op 'Groep'. Dit betekent over het algemeen dat uw bestanden een beetje beter worden georganiseerd en dat het over het algemeen tijd bespaart ten opzichte van de handmatige groeperingsmethode van Photoshop.

Betere verlopen

Hier is nog een voorbeeld waarbij Fireworks eenvoudig verbetert wat Photoshop te bieden heeft. In plaats van een paar gradiënttools bevat Fireworks een breed scala aan manieren om hellingen aan te passen en te beheren totdat ze precies zijn waarnaar u op zoek bent.

Betere beeldoptimalisatie

Photoshop heeft enkele eenvoudige "Save for Web" -tools, maar Fireworks breidt deze uit op een manier die tegemoet komt aan de manier waarop webontwerpers daadwerkelijk werken. Naast elkaar zien we lagere bestandsgroottes bij het opslaan van Fireworks, wat cruciaal is voor websites met veel afbeeldingen; PNG-8 (met transparantie) wordt ook volledig ondersteund, wat Photoshop nog niet ondersteunt!

Leer sneller

Als je al jaren Photoshop gebruikt, zal Fireworks je vreemd gaan voelen ... maar de meeste mensen die geen van beide programma's hebben gebruikt, zijn het erover eens dat Fireworks een stuk gemakkelijker te leren is. Photoshop is ontworpen voor fotografen en grafische ontwerpers ... wat betekent dat veel hulpmiddelen zijn opgenomen die webontwerpers niet noodzakelijkerwijs nodig hebben. De UI-overbelasting waaraan Photoshop-gebruikers gewend zijn, wordt in Fireworks aanzienlijk verminderd, waardoor het vrij eenvoudig is om op te halen voor iedereen die wat extra tijd wil besteden.

Snellere prestaties

Wat krijg je als je alle extra functionaliteit verwijdert die Photoshop biedt? Kleinere bestandsgroottes die VEEL sneller bewegen. Fireworks-bestanden (.PNG-indeling) kunnen veel complexer zijn dan .PSD-bestanden, maar ze presteren beter op de meeste computers, wat betekent dat er minder tijd hoeft te worden gewacht voordat uw CPU grafische afbeeldingen knist en meer tijd besteed aan het ontwerpen.

Veel van deze andere functies betekenen ook dat u dingen in Fireworks echt kunt doen die u niet in Photoshop kunt doen - zoals snel prototypen van een website of AIR-app, interactieve PDF's maken, heen en weer gaan met Flash en snel snijden en dobbelen een site in webklare bestanden.

Agentschappen vragen erom

"In een recente enquête naar de vaardigheden van de Society of Digital Agencies (SODA) onderzoekt bijna 20% van de bureaus FW-vaardigheden. Het jaar daarvoor was het aantal zo klein dat het te verwaarlozen was." - Tom Green (uit onze poll post)


De nadelen van het gebruik van Fireworks

  • De industrie is nog steeds grotendeels bevooroordeeld in de richting van Photoshop. Dit betekent dat je bijna altijd PS moet kennen wanneer je met andere ontwerpers werkt.
  • Complexe Photoshop-bestanden worden niet altijd goed geopend.
  • Tekst Anti-aliasing kan worden verbeterd.
  • Er ontbreken veel grafische hulpmiddelen waarmee Photoshop-gebruikers bekend zijn, wat betekent dat er altijd redenen zijn om Photoshop te openen.

De voordelen van het gebruik van Photoshop

Deze lijst wordt kleiner omdat we de belangrijkste vergelijkingspunten al hebben bekeken - maar hier zijn nog een paar argumenten voor het gebruik van Photoshop in plaats van Fireworks.

Het is het vlaggenschip

Laten we eerlijk zijn, Fireworks lijdt een beetje van het "roodharige stiefkind" -syndroom. Alleen in recente versies (CS4 en CS5) heeft Fireworks zinvolle functieupdates ontvangen. Hoewel dit een goed voorteken is voor de toekomst, zou de logica beweren dat Adobe Fireworks veel minder waarschijnlijk meer aandacht zal schenken dan Photoshop, simpelweg omdat Photoshop elk jaar vaker voor meer geld verkoopt. Photoshop is ook een ouder programma; wat betekent dat het profiteert van een langere geschiedenis van gebruikersfeedback. Fireworks groeit nog steeds met sprongen en grenzen voor elke nieuwe versie die uitkomt, maar omdat Photoshop het vlaggenschipproduct van Adobe is in de CS-suite, wordt verwacht dat het het grootste deel van de belangrijkste upgrades in de toekomst zal ontvangen.

Stabiliteit

Historisch gezien rapporteren Fireworks-gebruikers meer crashes en bestandsproblemen dan gebruikers van Photoshop (hoewel CS5 veel meer stabiliteit bracht). Photoshop heeft een groot aantal problemen, maar het is de moeite waard om te overwegen dat je een beetje meer kans loopt om hoofdpijn te krijgen als je exclusief met Fireworks werkt.

Het is de industriestandaard

Hoewel er een groeiende vraag is naar mensen die Fireworks kunnen gebruiken, is de vraag naar webontwerpers die met Photoshop werken universeel. Bijna alle grote webprojecten gebruiken Photoshop op zijn minst enigszins, en het hebben van tenminste een gemiddelde kennis van PS zal een vereiste zijn voor de meeste webdesign-posities waar een team bij betrokken is. Hoewel je freelance-clients er misschien niet om geven in welk programma je werkt, is de kans veel groter dat je Photoshop-bestanden kunt uitwisselen met je peers dan met Fireworks-bestanden.

Het is waar je bekend mee bent

Misschien wel het sterkste argument voor het gebruik van Photoshop is dat je het al hebt geleerd en het is een comfortabel onderdeel van je workflow. Zoals we zagen tijdens onze discussie bij de peiling van de Reader, is de overgrote meerderheid van de mensen die met Photoshop zijn begonnen bij Photoshop gebleven. Waarom? Omdat het werkt! En zoals het oude gezegde luidt: "Als het niet kapot is, repareer het dan niet". Een nieuw programma leren kost tijd en geld - en als je geen dringende reden hebt om Fireworks te gaan gebruiken, is er echt geen reden om de overstap nu te maken.

Er is een rijkdom aan zelfstudies en bronnen

Laten we eerlijk zijn, terwijl er veel tutorials beschikbaar zijn voor Fireworks, Photoshop-zelfstudiemateriaal en meer dan 10-op-1-bronnen in Fireworks-gebaseerde inhoud op het web. Wat betekent dit voor jou? Je kans om geweldige educatieve tuts te vinden (zoals bij PSDTuts!) Is veel groter dan je kansen op het vinden van dezelfde content voor Fireworks. Voor velen is dit genoeg om te compenseren dat Photoshop moeilijker te leren is.

Het is een one-stop-shop

Een ontwerper die Fireworks gebruikt, moet meestal nog steeds Photoshop gebruiken om geavanceerde grafische afbeeldingen te maken ... maar de meeste Photoshop-gebruikers maken zich geen zorgen over het openen van Fireworks. Waarom? Omdat dat niet nodig is. Alle kernfunctionaliteit is daar in Photoshop. Hoewel Fireworks een aantal functies heeft die zijn 'verbeterd', missen Photoshop-gebruikers ze niet omdat ze niet eens wisten dat ze bestonden;)


De nadelen van het gebruik van Photoshop

  • Grotere bestandsgroottes = langzamere prestaties.
  • Geen native "webtools" die geen afbeeldingen op het web kunnen opslaan.
  • Het is duurder - $ 699 voor Photoshop / $ 299 voor Fireworks. Houd in gedachten dat dit niet alleen een eenmalige aankoop is - updates zijn ook duurder!

Alles in Context plaatsen

Aan het begin van het internet moesten webontwerpers alle programma's gebruiken die ze handig hadden om hun websites te maken. De vroegste websites begonnen als eenvoudige dingen en vereisten niet veel in termen van grafisch vermogen. Deze webontwerpers van vroeger werden eenvoudigweg op de hoogte gehouden met alle grafische ontwerpsoftware die ze hadden gebruikt of waarmee ze waren opgeleid.

Nu is webdesign echter een essentieel onderdeel van het bezit van zowat elk bedrijf. Sterker nog, zowat iedereen weet het tegenwoordig iets over het ontwerpen van een webpagina. Er zijn gratis online webpagina-programma's, software die is ontworpen om webontwerp eenvoudig te maken, en dan zijn er de serieuzere programma's die zijn gemaakt voor professionele webontwerpers.

Naarmate de technologie vordert, zijn er meer producten vrijgegeven en is de beslissing over welk programma te kiezen moeilijk geworden. Voor degenen die al lang in webdesign zijn, biedt nieuwe software weinig aantrekkingskracht op de beproefde, geteste en echte software waarop je bent getraind. Maar welke kant op moet een nieuwe webdesigner hebben? De splitsing in de weg kan verwarrend en overweldigend zijn zonder een kaart te volgen.

Het grotere plaatje

Adobe Photoshop is altijd een hoeksteen geweest van de grafische ontwerpgemeenschap, waardoor het een logische keuze is voor de overgang van gedrukte naar webdesign. Adobe Photoshop en Illustrator zijn de programma's die worden gebruikt om nieuwe grafische ontwerpers te trainen. Een stevige basis is dat deze twee meestal nodig zijn voordat een school de overgang van een student naar andere multimediasoftware mogelijk maakt.

Wanneer u webontwerpers vraagt ​​welke software zij vaak gebruiken, zijn de meest voorkomende reacties Photoshop, Fireworks en Dreamweaver. Er is geen enkel programma populairder dan het andere, omdat er verschillende redenen zijn waarom ontwerpers weten welke software er boven een ander staat. Er wordt veel gezegd over hoe Adobe Photoshop en Macromedia Fireworks hetzelfde zijn voor webontwerpers, maar dit brede overzicht geeft beide software niet de gerechtigheid die het verdient.

Nu Adobe Macromedia heeft aangeschaft, kan worden aangenomen dat Fireworks nog meer zal lijken op Photoshop met tijd en toekomstige updates. Ze zullen echter nooit hetzelfde zijn en het begrijpen van hun fundamentele verschillen zal u helpen een beslissing te nemen.

Er zijn andere opties voor webontwerpsoftware (zoals Pixelmator voor Mac, ULead, Xara, Stone en andere), maar deze twee zijn de belangrijkste spelers en de meest besproken.


Een diepere kijk op Photoshop

Eerst en vooral was Photoshop ontworpen voor het bewerken van foto's. Dit maakt het de weg naar software voor fotografen en iedereen die veel met foto's werkt. De ontwerpers van Photoshop waren nooit van plan om de software het hoofdprogramma voor webontwerpers te laten zijn, hoewel het programma tal van functies bevat om webontwerpers te helpen. Photoshop is perfect voor ontwerpers die meer doen dan alleen webontwerp, omdat de cross-platform / cross-mediamogelijkheden het heel veelzijdig maken.

Photoshop heeft ook een reputatie. Het is de meest populaire en gerespecteerde grafische ontwerpsoftware die beschikbaar is. Het is een marktstandaard geworden en veel klanten verwachten dat ontwerpers het zullen gebruiken. Het kan enige uitleg vragen als u een Fireworks .png-bestand wilt indienen in plaats van een Photoshop .psd-document.

Als het gaat om kleurbeheer, kunt u geen beter programma krijgen dan Photoshop. Adobe heeft professionele kleuren tot een wetenschap.

Natuurlijk is geen enkele software perfect en is Photoshop geen uitzondering. De software is groot en lastig voor elke computer om te beheren. Het geheugen dat nodig is voor het uitvoeren van de software is groot genoeg, maar zodra u begint te werken met bestanden met een hoge resolutie, kunt u tegen problemen aanlopen. Photoshop-crashes zijn legendarisch en verwachten lange laadtijden en bevriest zo nu en dan, tenzij je een schitterende computer hebt om mee te werken.

Niet alleen dat, de gecompliceerde gebruikersinterface en functies zijn angstaanjagend en intimiderend. De software doet zoveel, maar voor de gemiddelde gebruiker zijn de meeste van zijn mogelijkheden begraven onder menu's en buitenlandse terminologie. Photoshop is een moeilijk programma om zelfstandig te leren en kostbaar en tijdrovend om naar een expert te gaan voor hulp.

Hoewel Photoshop-lagen erg handig kunnen zijn en de droom van een georganiseerde persoon zijn, kunnen ze soms frustrerend zijn. Vooral omdat u niet eenvoudig kunt klikken om documentelementen te selecteren. Navigatie door de lagen is essentieel. Dit kan een vervelende leercurve en een tijdrovend proces opleveren als u uw lagen niet goed labelt.


Een diepere blik op vuurwerk

Macromedia Fireworks is speciaal ontworpen voor webontwerpers. De gebruikersinterface is eenvoudig te gebruiken en te navigeren. Hoewel het leren van Adobe Photoshop een lang en frustrerend proces kan zijn, kost het opnemen van Fireworks nauwelijks tijd. De software is intuïtiever dan Photoshop en flexibeler in gebruik.

Fireworks is gemaakt om het maximale uit bestandsgrootte te halen, omdat webpagina's de grotere afbeeldingen waarvoor Photoshop is gebouwd niet aankunnen. Dit kan tijd besparen bij het wijzigen van de bestandsgrootte en resolutie-eigenschappen tijdens het ontwerp.

Hoewel Fireworks nooit zo goed zal zijn in het bewerken van foto's als Photoshop, heeft het wel zijn eigen mogelijkheden voor foto-optimalisatie. Deze werken prima voor veel webontwerpers.

Een ander groot verschil in de twee programma's is dat een webontwerper meer dan één pagina tegelijk maakt. In Photoshop focus je meestal op één pagina tegelijk. Met Fireworks kunt u meerdere pagina's tegelijk ontwerpen, elk met meerdere lagen. Het kost niet zoveel geheugen om meerdere pagina's te bewerken als in Photoshop.

Ontwerpers houden van het feit dat Fireworks met zowel foto's als vectorafbeeldingen kan werken. Dit is hetzelfde als het tegelijkertijd gebruiken van Photoshop en Illustrator. Bovendien is het prijskaartje op Fireworks veel aantrekkelijker dan dat van Photoshop.

Fireworks heeft zoveel crashes en bugs als elk ander programma, maar Adobe heeft aangegeven dat het van plan is deze problemen met toekomstige updates aan te pakken nu Macromedia is overgenomen.


Waarom niet beide gebruiken?

Ik hoopte dat je het zou vragen! In een perfecte wereld zou het zinvol zijn om een ​​site in Fireworks te verbinden, naar Photoshop te gaan voor geavanceerde detaillering en vervolgens Fireworks te gebruiken om de site samen te stellen en voor het web te exporteren ... in de praktijk werkt dit echter niet helemaal. Veel mensen kiezen ervoor om dit te doen voor specifieke elementen (zoals het opslaan van achtergrondafbeeldingen uit Fireworks om de bestandsgrootte te verkleinen), maar te vaak. PSD-bestanden worden niet perfect geopend in Fireworks. Laaggroepen raken in de war, laagstijlen worden gewist en frustratie ontstaat. Ik kan aanbevelen om Fireworks per geval te gebruiken (vooral om de PNG8- en save-for-web-verbeteringen te gebruiken), maar verwacht niet dat het dual-programmasysteem een ​​betrouwbaar onderdeel van uw eigen workflow wordt totdat Adobe kan los deze problemen op.

Met dat gezegd, hebben we van tenminste een paar ontwerpers gehoord in onze Reader's Poll-post die beide programma's naast elkaar gebruiken, dus het komt echt neer op je eigen workflow-voorkeuren.


Het komt neer op

Als u al goed getraind bent in Photoshop of Fireworks, is het waarschijnlijk het beste om dat programma te blijven gebruiken voor uw behoeften.

In een ideale wereld zouden webontwerpers de tijd, het geld en de energie hebben om beide stukjes software te leren en deze te gebruiken voor hun sterke punten en hun zwakke punten te negeren. Natuurlijk, zelfs als je het geld hebt om te investeren in duale programma's - je hebt waarschijnlijk niet de tijd om vertrouwd te raken met hoe elk van hen werkt.

Als u al goed getraind bent in Photoshop of Fireworks, is het waarschijnlijk het beste om dat programma te blijven gebruiken voor uw behoeften. Als je een beginner bent en probeert te beslissen met welke persoon je het beste kunt beginnen, is Fireworks gemakkelijker te gebruiken en te leren, maar met Photoshop kun je een betere designer worden dan wanneer je jezelf beperkt tot alleen vuurwerk.

Persoonlijke prioriteiten, doelen en beperkingen zullen zeker een rol spelen bij uw uiteindelijke beslissing. Veel geduld en downtime hebben, zou zeker helpen als je alle geweldige opties die Photoshop te bieden heeft, onder de knie wilt krijgen. Als u snel aan de slag wilt en geen tijd wilt verliezen om vertrouwd te raken met het proces, dan is Fireworks uw beste keuze.

In de wereld van het webontwerp wordt elk van beide programma's vaak gebruikt en u zult niet worden verweten dat u de ene boven de andere hebt gekozen. Er zijn tal van gratis zelfstudies beschikbaar voor zowel deze programma's als voor trainingsboeken en -lessen.

In de webontwerpindustrie vindt u ontwerpers die zweren bij Photoshop en anderen die zweren bij Fireworks. Luister naar hun voor- en nadelen, maar uiteindelijk is de beslissing aan jou. Er is geen overweldigend bewijs dat het ene programma beter is dan het andere, het werkt gewoon anders voor verschillende gebruikers en talenten.


Over de Auteurs)

Brandon Jones (de site-editor voor Webdesigntuts +) schreef de inleiding en "vergelijkingspunten" van dit artikel. Greg Bates leverde een bijdrage door de aanvullende achtergrondinformatie voor elk programma te schrijven en ook het industrieonderzoek te verzorgen.

Greg Bates is een Sophmore op CSULB en momenteel bezig met Information Systems maar neemt ook lessen aan de zijkant voor web- en grafisch ontwerp. Hij is een schrijver voor een online magazine StyleCeo dat zich bezighoudt met mode. Hij bouwt ook websites vanaf het begin voor verschillende online bedrijven en bedrijven. In zijn vrije tijd geniet hij van sporten, bij zijn meisje zijn, of gewoon wat freelance werk doen. Als je zijn werk leuk vindt en je wilt dat hij als freelancer voor je werkt, kun je contact met hem opnemen op http://twitter.com/TheAllureIs_.

We zullen enkele van de minder bekende functies van Fireworks de komende maand benadrukken, dus abonneer u (bovenaan de site) om op de hoogte te worden gesteld wanneer de nieuwe zelfstudies en screencasts worden gepubliceerd!


Ga door met de discussie

We hebben al bijna 100 geweldige reacties gehad in de Poll-post van de Reader, maar als je opmerkingen, suggesties of vragen hebt, kun je deze hier ook plaatsen! Het mooie van een artikel als dit is dat het andere webontwerpers bij elkaar kan brengen om hun eigen ervaringen en workflows te delen ... dus hoe gebruik je deze programma's??