Beste leden,

Dit is mijn eerste topic, en ik wil een kleine discussie over jullie werk wijze tijdens het slicen en basen van een web template. Ik ben vooral benieuwd hoe andere mensen het doen en of ik daar misschien iets van kan leren.

Ik ben benieuwd!

Eerst open ik Adobe Dreamweaver en Adobe Photoshop. Vervolgens ga ik in Dreamweaver de xhtml typen.
Daarna ga ik naar Photoshop en knip daar zoveel mogelijk afbeeldingen uit die ik kan gebruiken tijdens het basen.
Daarna maak ik de css aan om het op een website te laten lijken ;).
Soms moeten er tijdens het maken van de css het een en het ander aangepast worden in de pagina.

De css neemt bij mij het meeste tijd in beslag en het uitknippen in Photoshop vind ik het saaiste werk ;)

Ik sla de PSD op als PNG op, en open deze in Paint Shop Pro. Werkt naar mijn idee veel sneller en nauwkeuriger. Tekst wordt handmatig weggewerkt. Transparante images slice ik wel vanuit Photoshop zelf.

Op deze manier sta je dichter bij de template, en ben je tijdens het slicen al aan het bedenken wat de beste structuur / minste css voor je site zou zijn.

Misschien een beetje apart, maar het resultaat is er niet minder op :-)

Meestal bestudeer ik eerst de lay-out en bepaal ik hoe ik alles werkend wil hebben. Vaak probeer ik op creatieve wijze iets toch voor elkaar te krijgen met mijn weinige kennis over Basing.

Zo zit ik nu ook even in de knoop. Ik vraag jullie daarom om raad. Ik was een lay-out aan het slicen, ik save hem voor web. Ik klik op Gif 128 Dithered, de rest laat ik zo. Ik sla hem op; goede kwaliteit. Helaas zat ergens onderin iets wat er niet hoorde en veranderde ik dat. Ik sla hem weer hetzelfde op over die andere heen. Nu is het alsof hij dingen strakker maakt. Dus verlopen worden niet glad maar in 3 kleuren die in de verloop zitten zeg maar. Hoe komt dit en hoe kan ik hem alsnog glad opslaan? JPG High/Maximum lukt ook niet. (wordt ook lelijk, iets minder maartoch)

Misschien dat jullie het weten. Alvast bedankt!

Origineel gepost door Daniël Staal

Meestal bestudeer ik eerst de lay-out en bepaal ik hoe ik alles werkend wil hebben. Vaak probeer ik op creatieve wijze iets toch voor elkaar te krijgen met mijn weinige kennis over Basing.

Zo zit ik nu ook even in de knoop. Ik vraag jullie daarom om raad. Ik was een lay-out aan het slicen, ik save hem voor web. Ik klik op Gif 128 Dithered, de rest laat ik zo. Ik sla hem op; goede kwaliteit. Helaas zat ergens onderin iets wat er niet hoorde en veranderde ik dat. Ik sla hem weer hetzelfde op over die andere heen. Nu is het alsof hij dingen strakker maakt. Dus verlopen worden niet glad maar in 3 kleuren die in de verloop zitten zeg maar. Hoe komt dit en hoe kan ik hem alsnog glad opslaan? JPG High/Maximum lukt ook niet. (wordt ook lelijk, iets minder maartoch)

Misschien dat jullie het weten. Alvast bedankt!

plaatjes die overlopen moet je nooit met .gif doen, of .jpg ;)
PNG is de beste optie hiervoor, PNG-24 slaat nog meer op dan PNG-8 dus PNG-24 is vaak het beste voor overlopende afbeeldingen. PNG-24 is (soms) wel iets groter dan PNG-8, maar in dit geval is .png vaak veel kleiner dan .jpg en .gif.

Zolang de overloop <256 kleuren heeft is er geen kwaliteitsverlies voor gif :)

Ik begin altijd in photoshop. Daar maak ik de meeste slices al voordat ik ook maar iets getypt heb. Bij lastige layouts(veel details) print ik het design uit zodat ik niet telkens tussen photoshop en kladblok hoef te switchen.

Vervolgens ga ik de xhtml opbouwen. Altijd top down. Ik begin met de alomvattende divs, dan van header naar footer. Ik style meteen alles tot in detail. Dus ik doe niet eerst de makkelijke dingen en daarna de moeilijke dingen.

Als ik klaar ben print ik de html soms nog even uit om te vergelijken met de uitdraai van photoshop. Bij zeurderige opdrachtgevers nog even een liniaal erbij.

Groeten,

David.

Ik begin eigenlijk met slicen van de layout. Ik bekijk hoe ik de div's ga plaatsen en dan slice ik mijn psd. Ik doe eerst alle tekst er nog in houden op de afbeeldingen zelf. Dan ga ik mijn css uitwerken. Als ik dat gedaan heb zet ik soms tussendoor de div's in mijn html bestand maar meestal typ ik dat op het einde uit. Is dat gedaan sla ik de afbeeldingen nog een keer op zonder tekst en plaatst ik de tekst erin.

MVG,

Jeroen Kamphuis ~ BetaSlice

Origineel gepost door gast2960

plaatjes die overlopen moet je nooit met .gif doen, of .jpg ;)
PNG is de beste optie hiervoor, PNG-24 slaat nog meer op dan PNG-8 dus PNG-24 is vaak het beste voor overlopende afbeeldingen. PNG-24 is (soms) wel iets groter dan PNG-8, maar in dit geval is .png vaak veel kleiner dan .jpg en .gif.

Als je png gebruikt moet je er wel goed op letten dat je png niet in combinatie met gif en jpg gebruikt. Kijk maar eens in een website waar je png gebruikt hebt, in firefox en safari bijvoorbeeld. Dan zijn de kleuren anders. Je moet dus wel goed weten wat je doet.
Aanvullend bericht:
Ik slice nooit afbeeldingen. Ik heb mijn eigen manier (zoals vele hier) in de loop van jaren ontwikkeld. Ik kijk gewoon naar het design, zie dan als het ware de code al voor mij. En maak gewoon selecties met de hand, en met CTRL+SHIFT+C knip en plak ik de selectie in een nieuw document. En als het nodig is gebruik ik nog even de save for web functie.

Ik bouw in Xhtml en CSS vaak eerst een stramien van zoals ik vind dat de website het beste gebouwd kan worden. Daarna ga ik aan de hand van de plaatjes e.d. de breedtes opgeven in css. Geef de div vaak verschillende achtergrond kleuren go zo maar door.

Als ik begin maak ik eerst bijna altijd een main div. Dit is de breedte van de website, deze centreer ik dan (als het in het design zo is weergegeven in het midden) verder bouw ik daar dan alles is. Zo is alles mooi genest.

Bouw bijna altijd eerst alles wat alleen grafisch is. En daarna alles wat met de content te maken heeft zoals tekst knoppen formulieren links etc.

Ik hou ook van overzicht en werk met main.css en content.css.
Als eerste zet ik altijd alle padding en margin uit. Zo voorkomje dat je website raar gaat doen tijdens het basen? gebruikte de term hiervoor nooit :). En kan je zelf exact de padding en margins opgeven die jij meet in je psd.

adobe fireworks heeft een ingebouwde slice functie
http://www.layersmagazine.com/firewo...ss-export.html

Origineel gepost door gast2960

plaatjes die overlopen moet je nooit met .gif doen, of .jpg ;)
PNG is de beste optie hiervoor, PNG-24 slaat nog meer op dan PNG-8 dus PNG-24 is vaak het beste voor overlopende afbeeldingen. PNG-24 is (soms) wel iets groter dan PNG-8, maar in dit geval is .png vaak veel kleiner dan .jpg en .gif.

Maar PNG-24 werkt niet in IE6, en PNG-8 wel.. dus soms kan PNG-8 ook een goede oplossing zijn. Anders moet je een PNG fix gebruiken ofzo

Origineel gepost door Steeze

Maar PNG-24 werkt niet in IE6, en PNG-8 wel.. dus soms kan PNG-8 ook een goede oplossing zijn. Anders moet je een PNG fix gebruiken ofzo

PNG-24 werkt wel degelijk in IE6, alleen werkt de transparantie niet in IE6. Dus gewoon gradients doen met PNG-24!

Origineel gepost door S. Zanders

PNG-24 werkt wel degelijk in IE6, alleen werkt de transparantie niet in IE6. Dus gewoon gradients doen met PNG-24!

Dat bedoelde ik ja :)

Ook mijn manier nog even.

Allereerst neem ik de layout goed in me op, en bekijk ik in welke vakken ik de layout het beste kan verdelen. Het testen doe ik natuurlijk altijd in FireFox.

Dan werk ik de hele layout uit in (X)HTML. Met de juiste id's/classes voor elk element.

Nu begint het css werk. Allereerst voeg ik mijn css framework met mass resets, grid structuur, typography en dergelijke toe. Daarna begin ik de layout van boven naar beneden te css'en. Als ik een image nodig heb ga ik naar photoshop en gebruik ik een handmatige selectie om de image er zo uit te snijden.

Zo ga ik verder tot ik de hele layout uit heb gewerkt en alles goed werkt (in FF). Daarna open ik IE6/IE7 en ga ik eventuele bugs fixen. (Bijv. double margin bugs etc). Daarna check ik ook nog even of de layout in Google Chrome werkt (wat - in principe - altijd het geval is).


Wat ik zo leuk vind aan css'en is het vele rekenen. Als je alles vantevoren goed uitdenkt kun je de hele layout op een pixel nauwkeurig in elkaar zetten, hierin zit voor mij de uitdaging.