Slicen met Fireworks, hoe goed is de HTML/CSS output ?

[Verwijderd]

Ik ben aan de gang gegaan met Fireworks en heb nog veel te leren hiermee, echter heb ik wel een brandende vraag welke ik met "de te perfecte" tuts niet beantwoord krijg.

Als je je layout in Fireworks maakt wil je op een gegeven moment je slices gaan zetten zodat je je HTML/CSS goed in elkaar kan zetten en de plaatjes netjes op zijn plaats staan. Nu genereert Fireworks dit zelf al voor je maar ik verwachtte hier al geen wonderen van, en dit lijkt bevestigd.

Uiteraard is er een verschil tussen designers en frontend ontwerpers, maarja je wil wat he

Wat mij opvalt is dat de divs welke gemaakt worden vanuit Fireworks eigenlijk onbruikbaar zijn en echt een handmatige opzet nodig hebben om de plaatjes/achtergronden met nette floats en dergelijke op zijn plaats te krijgen. Fireworks doet een leuke poging door de positie te zetten door middel van x- en y-posities, echter is dit zo dirty as...

Het Slicen vind ik erg makkelijk en tevens wat andere simpele zaken. Nu heb ik wel eens vaker broncode van sites bekeken waar je zo aan kon zien dat de HTML/CSS gegenereerd was met Fireworks, en dat voor profi-design, en dat zag er al niet te mooi uit.

De vraag is hoe goed jullie de HTML/CSS output van Fireworks vinden ?

Neem in acht dat ik zelf altijd plaatjes maakte, handmatig knipte en daarna met divs (layers dus) aan de slag ging om het vanaf de basics te positioneren, dit lijkt ondanks deze mooie tool ook te moeten gaan gebeuren.

[NiteSpeed]

Dat moet sowieso gebeuren. Je kan niet verwachten dat een Designpakket weet welke code jij in gedachten hebt . Meer dan absoluut positioneren en zorgen dat je design er pixelperfect uitziet kunnen die pakketten niet.

[Verwijderd]

OK, dat wat dus de vraag welke ik had, strikt genomen kun je dus ook prima met Photoshop Slicen en heb je FW niet per default nodig ?

[MsG]

Inderdaad, al is Fireworks wel meer geschikt voor web imo, bijvoorbeeld rulers die op de pixelprecies snappen, terwijl het bij photoshop meer uit de losse hand is. En de gegenereerde CSS lijkt me wel redelijk bruikbaar? Qua kleuren e.d.

[NiteSpeed]

Verwijderd schreef op maandag 08 februari 2010 @ 21:45:
OK, dat wat dus de vraag welke ik had, strikt genomen kun je dus ook prima met Photoshop Slicen en heb je FW niet per default nodig ?

Voor het slicen zou ik niet van programma wisselen. Wel moet je eens het verschil bekijken in compressie die Fireworks en Photoshop toepassen. Fireworks levert vaak kleinere bestanden bij gelijke kwaliteit op.

Ook is Fireworks handig omdat je in één document meerdere pagina's kan ontwerpen, iets waar je in Photoshop ontelbare PSD's voor moet maken.

[Verwijderd]

Ik had die voordelen ook ervaren welke je opnoemt, zeker geen reden om te wisselen.

Ik heb het verschil gezien tussen PS en FW qua slicen, FW is zeker wel beter en het optimaliseren is super te noemen,

De basic CSS is wel bruikbaar alleen de posities moet je echt aanpassen, ik zie het echt als een hele rewrite van je CSS en HTML, maar opzich fijn om een referentie te hebben ookal is hij voor je doel niet geschikt

[MsG]

Overigens kon?/kan? photoshop ook altijd exporten naar HTML. Maar dat was helemaal baggercode . Denk dan nog wel erger dan jouw omschrijving van de Fireworks output.

[Verwijderd]

Wat ik opzich wel vreemd vind is dat FW alleen je plaatje sliced, dus is de slice groter dan je plaatje zodat je nette opvolgende blokken kunt bouwen dan is de output alleen het "plaatje", dus transparante gedeelten worden niet meegenomen.

Opzich logisch maar ook weer onlogisch.

[Rvanlaak]

Ik denk dat geen van de genoemde programma's in staat is om volledige html/css code te outputten. Die output is namelijk zeer afhankelijk van de werking van de pagina's, en dat kan geen enkel programma ruiken. Het komt bij veel designers denk ik voor een groot deel op hun css/html kennis aan hoe de pagina's functioneren. En dan heb ik het niet over standaard component libraries zoals jQuery UI.

Voor het slicen ben ik het met je eens. Alhoewel ik bijv. ondertussen veel meer ervaring heb opgebouwd met Photoshop (blame my boss;)) waren mijn ervaringen met Fireworks zeker goed.

Fireworks heeft gewoon wat meer web tierlatijntjes, zoals 9-part slicing enzo. Ik denk dat Fireworks en Photoshop elkaar aanvullen, de bestanden zijn niet voor niets uitwisselbaar

Lees trouwens dit artikel maar eensch:
http://pixelyzed.com/pixelforge/whychoosefireworks/

[mcDavid]

Ik ben ook nog altijd erg gecharmeerd van fireworks (vooral de versies die nog van macromedia zijn ). Maar voor een website begin ik meestal gewoon from scratch in een text-editor. En waar backgrounds e.d. nodig zijn, knip ik deze uit het design. Da's de enige manier om volledige controle te houden over het eindresultaat. Maar het vraagt daarentegen natuurlijk wel wat kennis van HTML en CSS.

Wat mensen die in PS/FW een design maken vaak vergeten trouwens, is dat het content-gedeelte meestal een variabele hoogte heeft. Ik heb hier wel eens mensen mee zien worstelen, in PS zag het er dan geweldig uit, maar met wat meer content liep ineens de gradiënt niet ver genoeg door ofzo waardoor de hele boel vernacheld werd.

[OkkE]

Het hangt er imo aan wat je doet.

Wanneer je voor professioneel bezig bent met webdesign en jouw werk online komt te staan als uiteindelijke website, dat is de enige juiste manier in mijn ogen zelf alles slicen en de HTML/CSS met de hand coden.

Als je een designer bent en even snel een mockup online wilt zetten voor de eerste indruk, of je maakt voor je hobbie een site, dan is zo'n slice-save-to-web best aardig.

Ik heb zelf niet heel veel ervaring met slices rechtstreeks opslaan als HTML/CSS, maar wat ik er van gezien heb is het niet zo best. Zeker niet iets dat je als professional wil gebruiken. Ook om als basis te gebruiken zie ik niet het nut van, ik zou toch 95% overnieuw doen, die 5% "winst" ben ik weer kwijt door dat ik de overige 95% weg moet halen / anders moet doen.

-- edit --

Ik kan me trouwens ook niet voorstellen dat zulke applications echt goed zijn in het goed schaalbaar, fluid, x-browser, etc maken van een design. Leuk als je een online reclame-folder wilt maken, maar voor een degelijke site onbruiknaar.

[ Voor 13% gewijzigd door OkkE op 09-02-2010 10:49 ]

[Knetterhard]

Met de hand slicen is gewoon de beste methode, elk design is uniek - dus ook elke slicing. Een programma heeft vaak voor geprogrammeerde structuren, waardoor het vaak niet aan de gebruikers voorkeuren voldoet. Mockup's kunnen wel goed hiervoor gebruikt worden.