Artikelen

Gepost door benjamin op 6 apr 2010 in de categorie HTML Photoshop

Een afbeelding slicen en opslaan naar een HTML pagina is helemaal niet moeilijk. Photoshop biedt je in enkele eenvoudige stappen een goed resultaat. Dit artikel legt beknopt de slice functionaliteit uit in Photoshop.

Stap 1. Selecteer de slice tool
Open een afbeelding in Photoshop en kies uit de Slice Tool uit de toolbar.



Stap 2 Slice de afbeelding in stukken
Je kunt de afbeelding in stukken slicen door met de slicetool de vlakken te trekken. Ik wil zelf graag de afbeeldingen van de header, content en footer afzonderlijk van elkaar hebben. Door het slicen wordt van elk vlak een aparte afbeelding gemaakt.



Stap 3: Save for web
Om de afbeelding vervolgens op te kunnen slaan als een HTML pagina met de afzonderlijk opgeknipte afbeeldingen, kies je uit het menu de optie File > Save for Web and Devices...
Je krijgt een scherm waarin je kunt aangeven hoe je elk afzonderlijke afbeelding wilt opslaan. Je kunt voor complexe afbeeldingen met veel kleuren het best voor jpeg kiezen (70%). Voor de afbeeldingen met weinig kleuren en kleurgradaties (zoals logo's) kun je het best kiezen voor gif of png. Je kunt kiezen voor de compressie door elk genummerd vlak in de afbeelding aan te klikken.

Stap 4: Genereer de HTML pagina met afbeeldingen
ALs je voor alle blokken de compressie hebt aangegeven, klik je op 'save' of 'opslaan'. Er verschijnt dan een scherm waarin gevraagd wordt waar je het bestand wilt opslaan en wat de naam wordt. Vervolgens moet je eerst aangeven hoe je het bestand opslaat (opslaan als...). Kies voor HTML and Images (*.html). In de settings daaronder kun je nog aangeven of je de webpagina xhtml compatible wilt en of je de background uit het Photoshop bestand (de layer background)  wilt meenemen. Laat de settings op 'Default Settings staan.
Klik nu op 'Opslaan' om de bestanden op de gewenste locatie neer te zetten.

Stap 5: HTML en sliced afbeeldingen
Photoshop heeft nu een mapje aangemaakt (images) op de locatie waar je zojuist het bestand hebt opgeslagen. In deze map zitten de opgeknipte afbeeldingen. Naast deze images map staat de HTML file. Als je op HTML file klikt, zie je dat je afbeelding netjes is omgezet naar een HTML file.