Als je een gehele layout of menu in photoshop hebt gemaakt is het handig dat je die ook werkelijk kan verwerken in html/php(whatever).
De slice tool in photoshop word gebruikt om je layout of menu in kleine stukjes (afbeeldingen) te snijden.
Daarna kan je de afbeeldingen in een editor weer aan elkaar plakken zodat het weer een menu/layout vormt.
Open eerst je photoshop bestand met je layout/menu/wat je wil slicen (zie onderstaande afbeelding).
Je photoshop bestand is nu geopend, selecteer de slice tool (zie onderstaande afbeelding).
Neem niet de "Slice select tool" die je met rechtermuisknop op slice tool kan benaderen.
Als je de slice tool niet ziet ga dan naar "window en klik tools aan".
Nu gaan we de slice aanbrengen, ik heb als voorbeeld een menu genomen (zie onderstaande afbeelding).
Als de slice niet in één keer op de goede plaats staat dan kan je de blokjes verschuiven.
Je ziet ook dat je slice een nummer krijgt dit geeft aan hoe de slice gaat heten (*** kom ik later op terug ***).
Dit kun je nu met alle onderdelen doen die je wilt gaan slicen.
Slice (on)zichtbaar maken | View - Show - Slices
Kleur van de slice veranderen | Edit - Preferences - Guides, Grids & Slices
Slices weghalen | View - Clear Slice
Slices vergrendelen (locken) | View - Lock Slice
Toen ik zei hier kom ik nog op terug is nu aan de beurd ;), hou ctrl in en klik op een slice hiermee krijg je dit beeld:
Hier kan je de naam van je slice instellen etc. (spreekt voor zich).
Als laatste hebben we nog de option bar, als je deze niet ziet | Window - Options
Promote to user slice | hiermee kan je de slice omzetten naar een normale slice.
Divide slice | hiermee kan je de slice in kleinere slices verdelen.
Hide Auto Slice | verbergt de auto slice.
File - Save for Web | als je dat hebt gedaan zie je links boven de onderstaande opties.
Met het handje kan je de slice verschuiven.
De slice tool gebruik je om je slice te selecteren.
Zoom Tool spreekt voor zich.
Eyedropper kan je kleur selecteren.
Met de onderste kan je de slice verbergen.
Als je aan de rechterkant kijkt kan je het bestand formaat selecteren (gif,jpeg etc.) en nog wat opties veranderen zoals transparante afbeelding.
Als je helemaal klaar bent met het instellen van de opties klik dan op save waarna je nog de bestandnaam kan opgeven.
***update***
Bij het opslaan kan je kiezen voor:
- images only (dan krijg dus alleen de plaatjes)
- html only (dan krijg je alleen je html webpagina met tabellen)
- html and images (dan krijg je een html webpagina met de plaatjes erin verwerkt)
Als je geen zin hebt om zelf alle plaatjes in een tabel te verwerken zou ik de laatste optie kiezen.
En als je het wel zelf in tabellen wil verwerken dan kan dat met dreamweaver/frontpage of een andere editor. (op internet zijn daar ook zat tutorials voor).
Ik hoop dat iemand wat aan mijn tutorial heeft en dat mijn eerste tutorial begrijpbaar is :-p
Als de afbeeldingen down zijn, stuur me een bericht.
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
