De Slice Tools

Om de Slice Tool te activeren klik je op het icoontje in de Toolbox of druk je op K op het toetsenbord. Deze Tool dient om de layout voor een webiste die je in Photoshop hebt gemaakt klaar te maken om op het web te zetten. Om een layout werkbaar als website te maken kan je hem niet als 1 grote afbeelding online gaan plaatsen. Je hebt buttons nodig (met rollover functies), een banner, een inhoudspagina met titels, grafische onderdelen, … Al deze dingen kan je in een layout klaarmaken in Photoshop waarna je hem in kleinere stukjes snijd (slicen). Later worden al die stukjes in html in een tabel gezet zodat alles naadloos aansluit en kan je functies toekennen aan bepaalde slices (zoals een knop als link instellen). Ook deze website is op die wijze opgebouwd.

Er zijn 4 soorten Slices:

  • De Users Slices:
    Als je de Slice Tool geactiveerd hebt kan je een rechthoekige selectie trekken net zoals bij de Rectangular Marquee Tool.
    In het voorbeeld heb ik selecties getrokken rond de titel “Imagenation” en de buttons . Automatisch worden de nodige slices aangemaakt; in dit geval 6.
  • De Layer Based Slices:
    Je kan ook een layer activeren in het layers-palet door erop te klikken en dan in het menu Layer – New Layer Based Slice. De inhoud van die layer wordt dan automatisch een slice. Layer Based Slices zijn handig voor het maken van rollovers voor buttons omdat je layers zichtbaar kan maken of verbergen en layer effecten kan toepassen.
  • Auto Slices:
    Wanneer je slices trekt worden de overgebleven gedeelten van de afbeelding automatisch in slices omgezet. In het voorbeeld heb ik zelf slices getrokken rond de titel en de buttons. Slices nr. 02 en 03 werden automatisch toegevoegd om het knipwerk volledig te maken. Elke keer je handmatig slices toevoegd of verwijderd zullen de auto-slices zich aanpassen.
  • Sub Slices:
    Wanneer 2 slices elkaar overlappen is het overlappende gedeelte de sub-slice. Zij kunnen niet geselecteerd worden. Net als de auto-slices passen de sub-slices zich automatisch aan bij een wijziging in de ‘layer based’- of user-slices.

De eerste 3 soorten Slices kunnen allen geselecteerd worden met het Slice Select Tool (sub-slices kan je niet selecteren). Klik op het zwarte pijltje rechtsonder het icoontje en houd de muis ingedrukt om het submenu te openen waarin je de Slice Select Tool vind.

Klik op een slice met de Slice Select Tool om te selecteren, een gekleurd kader verschijnt rond de slice. Je kan de slice dan verplaatsen, vergroten of verkleinen. Verplaatsen doe je door met de muis binnen in de slice te klikken en dan te verslepen. Het formaat van de slice wijzig je door de randen van het kader of één van de hoeken te verslepen (net als bij de crop tool).

Slices worden automatisch genummerd van links naar rechts en van boven naar onder. Om de lijnen en nummers van de slices te verbergen/zichtbaar te maken vink je: View – Show – Slices aan of uit.


Bij het selecteren van de Slice Tool verschijnt een menu met opties :

  • In de Style box geef je aan hoe slices getrokken zullen worden:
    • bij Normal kan je gewoon rechthoeken trekken zoals bij de Rectangular Marquee Tool.
    • Fixed Aspect Ratio: hier geef je een verhouding op (bv. 2 op 2 ; waarbij je alleen maar slices kan trekken die een verhouding 2 op 2 hebben).
    • Fixed Size: hier geef je een vaste grootte op die de slices mogen hebben.
  • Slices from Guides: als je guide lines hebt getrokken (klik in de ruler (View – Rulers) en sleep naar de afbeelding. Een blauwe hulplijn verschijnt, de zgn. guide lines) en je klikt op Slice from Guides , dan zullen de vlakken die door de guide lines gevormd worden omgezet worden in slices.

Ook bij het selecteren van de Slice Select Tool verschijnt een nieuw menu met opties :

  • De eerste vier icoontjes geven de manier waarop overlappende slices ‘opgestapeld’ zijn. Je kan ze naar de achter- of voorgrond verplaatsen, of 1 positie naar achter of naar voren brengen.
  • Layer Based en Auto Slices kunnen omgezet worden naar User Slices door de slice te selecteren en dan in het Slice Options Menu te kiezen voor Promote to User Slice.
  • Hide/Show Auto Slices: hiermee kan je de auto slices verbergen en terug zichtbaar maken.
  • Slice Options: klik je hierop opent het volgende menu waar je o.a. de instellingen voor je buttons kan opgeven.

  • Divide Slice: klik je op deze optie opent een venster waarmee je een geselecteerde slice kan verdelen in verschillende kleinere slices :

Reageren

Leave a Reply

Your email address will not be published.