Photoshop slicen en exporteren naar HTML

[Rutger.]

Hallo en welkom bij mijn eerste tutorial!

Ik ga jullie vandaag uitleggen hoe je in Adobe Photoshop je layout in HTML krijgt!

Dit gaan we doen met behulp van de 'Slice tool'.

Deze dus:

Dit icoon kan er bij jou anders uit zien, aangezien ik Adobe Photoshop CS2 gebruik en al redelijk oud is.

Open je layout en klik op de slice tool.

Let op! Wanneer je layout nog tekst bevat, kan je die het beste weghalen aangezien we dit later via HTML erin gaan plakken.

Klik nu bijvoorbeeld op de plek waar jou header begint en sleep hem naar het einde van jou header.

Zo bijvoorbeeld:

Als je dit hebt gedaan herhaal je dit voor je menu, body en footer.

Nu is het een kwestie van het exporteren van je layout, dit kan Photoshop erg makkelijk voor je doen!

Ga naar: 'File > Save For web'.

Als je hier bent, moet je sommige dingen in gaan stellen.

Ga naar dit pijltje en klik erop:

Klik op: 'Edit Output Settings'.

We stellen hier het volgende in:

Hierdoor zorgen we ervoor dat Photoshop DIV's gebruikt in plaats van tables!

Ik ben namelijk zelf een voorstander van websites die zijn opgebouwd uit DIV's. Waarom?

Als je dit hebt gedaan klik je op: 'OK' en kan je daarna op 'Save' drukken.

Let op! Wanneer Photoshop gaat opslaan, moet je goed kijken of er bij 'Opslaan als:' wel 'HTML and Images (*.html)' achter staat!

Anders slaat Photoshop het niet goed op.

Wanneer je dit gedaan hebt zul je op de locatie van opslaan een mapje zien met 'images' en 1 HTML-bestand.

Ga naar dat *.html bestand en klik er met je rechter muisknop op. Als je nu dit bestand opent met kladblok, kan je heel simpel de CSS (Cascading Style Sheets) aanpassen of natuurlijk de DIVs!

Heb je vragen, opmerkingen of klachten?

Stel ze hier!

Bewerkt: 8 juni 2010 door ZaroX

[iefen]

aight, ik wil wel soms nog een website maken.

en dit helpt me.

thnx. :tu: :tu: :dans:

[GAMEKINGZ]

Mooie tutorial ^^. Kan ik zeker gebruik als ik bijv mijn clan site wil vernieuwen

[Gangsta]

Wat je nu gewoon doet, is het exporteren van een layout in Photoshop naar een HTML bestand met tables i.p.v. divs & css!

Je vergeet het belangrijkste en de bedoeling van je tutorial, namelijk het genereren van CSS ipv tables:

Dit zorgt er namelijk voor dat de layout naar css & divs geexporteerd worden. De stylesheet zal dan in het html document zelf zitten. Het enige wat je eigenlijk dan hoeft te doen is de stylesheet apart plaatsen (wat simpel kan met een html editor zoals kladblok of dreamweaver) en linken in het document zelf.

Bewerkt: 17 juli 2010 door Gangsta

[Sprunk]

Handige tut.

Komt er ook nog een vervolg hoe je deze slices dan in een website verwerkt m.b.v een programma als Dreamweaver. Dat is namelijk het moeilijkste gedeelte van het bouwen van je eigen site.

[Ophion]

Dat zou ik ook wel eens willen weten!

En dan ook het plaatsen van teksten, als dat niet te moeilijk is om uit te leggen

[BV_1993]

Handige tut.

Komt er ook nog een vervolg hoe je deze slices dan in een website verwerkt m.b.v een programma als Dreamweaver. Dat is namelijk het moeilijkste gedeelte van het bouwen van je eigen site.

Zoals je in deze tutorial slices maakt heb je al een website maar dat is wel amateuristisch

[GTAguillaume]

Op welke grote maak jij een webdesign?

[Rutger.]

@Gangsta Je hebt duidelijk het verhaal niet goed gelezen. Ik heb speciaal voor jou alles nagekeken en alles klopt zoals het in de tutorial beschreven staat.

Handige tut.

Komt er ook nog een vervolg hoe je deze slices dan in een website verwerkt m.b.v een programma als Dreamweaver. Dat is namelijk het moeilijkste gedeelte van het bouwen van je eigen site.

Ik ben persoonlijk tegen Dreamweaver en dergelijke en gebruik gewoon kladblok. In principe is het een kwestie van tekst in je juiste DIV plakken met de juiste HTML-opmaak. Hier wil ik best nog wel een tutorial over maken.

Op welke grote maak jij een webdesign?

Goede vraag! Dat verschild per resolutie van een beeldscherm. (Persoonlijk) vind ik 850px in de breedte een mooie afmeting.

Als je nog vragen hebt over dit onderwerp of over iets anders wat met HTML, CSS, C# te maken heeft moet je het gewoon vragen via PM

[.Wacko]

Ik vind dat mensen die geen html niet kennen en toch zoiets als Dreamweaver gebruiken slecht. Als een goede webdesigner zou je ook een website moeten kunnen maken met enkel kladblok. Als je dat kunt gebruik je Dreamweaver voor het gemak, en om het proces iets sneller te laten gaan enzovoort.

[Rutger.]

Ik vind dat mensen die geen html niet kennen en toch zoiets als Dreamweaver gebruiken slecht. Als een goede webdesigner zou je ook een website moeten kunnen maken met enkel kladblok. Als je dat kunt gebruik je Dreamweaver voor het gemak, en om het proces iets sneller te laten gaan enzovoort.

Ben ik het niet helemaal mee eens @ Wacko. Meestal maken HTML generators je code erg smerig dus niet HTML valid..

Gewoon in kladblok werken!

[.Wacko]

Je begrijpt me niet goed. Ik zeg niet dat je enkel met die WYSIWYG moet gaan werken. Als je Dreamweaver ooit hebt geprobeerd weet je dat het op hetzelfde neer komt als kladblok, alleen dan ben je van gemakken voorzien zoals short cuts voor bepaalde dingen, en debug feature. Jij hebt het er nu over dat mensen zonder naar de code te gaan kijken zomaar iets prutsen met dat WYSIWYG-gedoe, en daar is mijn post ook op gebaseerd.