[Design] Afbeelding verknippen, of niet?

[vanDaal]

Hey lui, ik heb even een overpeinsing die ik met jullie wil delen, okee?

Vanuit mijn hobbyisme (en ook vanuit mijn bijbaan) ben ik veel bezig met Webdesignen. Ik denk dat bij mij meestal op dezelfde manier gaat als het bij jullie gaat. Photoshop opstarten, inspiratie verzamelen en aan de slag. Na een aantal uren/dagen/weken heb je dan een mooie afbeelding gefabriceerd, die in principe je website zou moeten worden.
En dan komt de volgende stap, het in elkaar zetten van je pagina. Vroeger kwamen daar dan allerlei rare tabellen en fratsen bij te pas, maar tegenwoordig biedt CSS je een betrekkelijk eenvoudige oplossing om je pagina te structuren.

Maar goed, je hebt dus je afbeelding. Wat ga je daar mee doen? In principe knip je die in delen, waarbij elk deel ongeveer een afzonderlijk deel van je design is. Maar hoeveel je ook knipt, de totale grootte van de afbeeldingen blijft vaak (bij normale compressie) even groot als die ene afbeelding waarmee je begon. Dus qua zwaarte van de pagina maakt het misschien niet zoveel uit of je nu gaat knippen of niet.

Dus wat ik me afvraag. Zou je niet gewoon dat ene plaatje in 1 layer kunnen zetten, en dan de rest van de pagina (de tekst vooral) gewoon met een layer 'eroverheen' zetten? Dat scheelt in ieder geval heel veel werk.

(Overigens ga ik er wel vanuit dat je geen dynamisch design hebt, dus zonder bewegende onderdelen.)

[Verwijderd]

"Ik denk dat bij mij meestal op dezelfde manier gaat als het bij jullie gaat."

Bij Spudy eerst een idee, inspiratie, tekenen, lezen, research, dan pas een design prog als b.v PS opstarten.

The White Canvas is Evil I say! EVIL!!!

[Tim Schuhmacher]

Dat zou ik niet doen, want men ziet liever de site in delen opbouwen gelijk vanaf het begin dan dat dat ze 1 minuut niets zien en dat plotseling alles in een keer er staat.

Waarschijnlijk is het wel sneller wat elk plaatje doet en serverrequest en dat kost tijd. Heb je maar 1 plaatje, heb je maar 1 request.

[Verwijderd]

Op woensdag 17 oktober 2001 16:16 schreef Spud het volgende:
"Ik denk dat bij mij meestal op dezelfde manier gaat als het bij jullie gaat."

Bij Spudy eerst een idee, inspiratie, tekenen, lezen, research, dan pas een design prog als b.v PS opstarten.

The White Canvas is Evil I say! EVIL!!!

AMEN

[vanDaal]

Op woensdag 17 oktober 2001 16:16 schreef Spud het volgende:
Bij Spudy eerst een idee, inspiratie, tekenen, lezen, research, dan pas een design prog als b.v PS opstarten.

Uiteraard was mijn stappenuiteenzetting een zwaar vereenvoudigde versie van de werkelijkheid

Op woensdag 17 oktober 2001 16:17 schreef Tim Schuhmacher het volgende:
Dat zou ik niet doen, want men ziet liever de site in delen opbouwen gelijk vanaf het begin dan dat dat ze 1 minuut niets zien en dat plotseling alles in een keer er staat.

Dat is inderdaad een redelijk goed argument om het niet te doen. Maar het is volgens mij ook mogelijk om je plaatje zo te saven dat ie 'zichzelf opbouwt' tijdens het laden, toch? Dan zou het volgens mij niet uitmaken, want dan zie je het plaatje langzaam verschijnen.

Waarschijnlijk is het wel sneller wat elk plaatje doet en serverrequest en dat kost tijd. Heb je maar 1 plaatje, heb je maar 1 request.

En dat is dan weer een goed argument om het wel te doen

[Verwijderd]

Op woensdag 17 oktober 2001 16:08 schreef vanDaal het volgende:
Photoshop opstarten, inspiratie verzamelen en aan de slag.

Ik geef toe dat ik zelf ook zondig aan deze regel, maar: Photoshop 'hoort' eigenlijk een van de laatste stappen te zijn bij het ontwerpen van een site.

Maar hoeveel je ook knipt, de totale grootte van de afbeeldingen blijft vaak (bij normale compressie) even groot als die ene afbeelding waarmee je begon. Dus qua zwaarte van de pagina maakt het misschien niet zoveel uit of je nu gaat knippen of niet.

Maar als het in delen is geknipt kun je al delen zien voor het geheel is ingeladen...

[vanDaal]

Op woensdag 17 oktober 2001 16:23 schreef Blues het volgende:
Maar als het in delen is geknipt kun je al delen zien voor het geheel is ingeladen...

Dat puntje noemde Tim inderdaad ook al. Toch blijf ik erbij dat het volgens mij mogelijk is om een plaatje langzaam tevoorschijn te laten komen.

[MrZed]

Nou ik zat deze week dus met precies hetzelfde probleem.

Ik had ook mijn website als 1 afbeelding in PhotoShop gemaakt, na lang denken en vragen heb ik hem in stukken geknipt en in tabellen gezet. Resultaat; http://www.siteworx.nl .

Ben er zelf wel trots op, maar knippen en in tabellen is dus de oplossing.

[MrZed]

Op woensdag 17 oktober 2001 16:23 schreef Blues het volgende:

[..]

Maar als het in delen is geknipt kun je al delen zien voor het geheel is ingeladen...

Dan kun je toch een flash pre-loader maken?? Of zie ik dat verkeerd?

[vanDaal]

Op woensdag 17 oktober 2001 16:48 schreef Power Boy het volgende:
Dan kun je toch een flash pre-loader maken?? Of zie ik dat verkeerd?

Das inderdaad ook een hele goede, dat kan namelijk eventueel ook met DHTML/Javascript.

Dus eigenlijk blijft er geen goed argument over om in een afbeelding te gaan knippen, of wel?

[Yellow|A]

* Yellow|A komt na een metafysische reis door tijd en ruimte en na een botsing met inspiratie ergens op het verre astrale vlak

Photoshop wordt meestal later pas opgestart, moodboards (raar woord) storyboards (leuk woord), schetsen brainstormen en overleggen gaan meestal wat eerder voor in het process.

Overleg is heel erg belangrijk.

Opknippen is altijd handiger omdat je dan wat meer controle heb over de uitvoer, vooral als je later gaat werken met wat dynamisch.

[vanDaal]

Overigens is het voorbereiden van een design absoluut een errug interessant en nuttig onderwerp, maar het is niet hetgeen ik wil bespreken in dit topic. Misschien een idee voor een ander topic (voor zover er niet al topics over bestaan).

Op woensdag 17 oktober 2001 17:24 schreef Yellow het volgende:
Opknippen is altijd handiger omdat je dan wat meer controle heb over de uitvoer, vooral als je later gaat werken met wat dynamisch.

Hoe bedoel je meer controle over de uitvoer? Ik zou juist zeggen van niet namelijk. Als je niet opknipt, hou je precies het plaatje dat je hebt gemaakt in Photoshop. Dus dan zitten er waarschijnlijk geen fouten in. En als je iets wil veranderen, dan hoef je alleen maar even Photoshop op te starten.
Of bedoel je het soms anders?

[Pelle]

Op woensdag 17 oktober 2001 16:08 schreef vanDaal het volgende:
Dus wat ik me afvraag. Zou je niet gewoon dat ene plaatje in 1 layer kunnen zetten, en dan de rest van de pagina (de tekst vooral) gewoon met een layer 'eroverheen' zetten? Dat scheelt in ieder geval heel veel werk.

Errrr.. wrong! Het ligt er een beetje aan hoe je gewend bent om je image te slicen, maar ik doe het altijd nog steeds handmatig, image voor image.

Na 4 jaar ervaring is het erg makkelijk om je psd-file op zo'n manier op te delen dat de filesize zwaar beperkt blijft. HTML-technisch komen er dan vaak wat meer truukjes aan te pas dan een verzameling <img>-tags, maar als webdesigner ben je creatief genoeg om daar raad mee te weten.

Per image bekijk ik wat het beste file-formaat is: gif of jpeg. Compressie ook per image instellen voor een optimaal resultaat.
Iets waar veel voordeel mee te halen is, is repeterende zaken ook als repeterend opnemen in je ontwerpje. Heb je menu-opties die allemaal een rood driehoekje aan de linker kant hebben, en dezelfde background-image? Dan sloop je dat driehoekje eruit en gebruikt het voor al je menuopties. Gooi het in een tabelletje, met je achtergrondje erin voor elke menu-optie, en je hoeft nu alleen nog maar een transparant gifje erin te zetten met de 'tekst' van de menuoptie.

Dat zijn dingen waar je op moet gaan letten, al bij het maken van je design trouwens al. Denk na hoe je je ontwerp op een nette manier naar HTML om kunt zetten met zo laag mogelijke totale filesize.

[Oogst]

Maar het gebruiken van één grote plaat en daar dan de tekst en zo voor zetten is wél een mogelijkheid, want je kunt dus gewoon met layers werken. Ik weet niet hoe de html-code daarvan in elkaar zit, maar met Dreamweaver kan het gewoon. En als je een progressive-jpg gebruikt ziet de bezoeker wel degelijk direct iets om naar te kijken, namelijk naast sowieso de tekst ook nog de steeds scherper wordende (dat houdt dat progressive in) jpeg. Of gif natuurlijk.