Photoshop tools

We gaan zometeen bezig met het maken van een website in Photoshop. Hiervoor heb je wel enige kennis van photoshop nodig. In deze post heb ik een kleine handleiding van meest gebruikte tools genoteerd.

Voordat we beginnen met vormgeven vertel leg ik de basis tools uit die ik gebruik in Photoshop bij het maken van een website. Wanneer je al genoeg ervaring hebt met ontwerpen in Photoshop kan je deze blog post overslaan.

---

1. Move tool

Deze optie staat in het linker menu van Photoshop. De sneltoets voor deze knop is ‘V’. Met deze knop kan je de lagen die je hebt aangemaakt verplaatsen. Wanneer je shift ingedrukt houdt, beweegt de laag die je hebt geselecteerd op een rechte horizontale lijn, verticale lijn of een diagonale lijn. Op deze manier kan je er voor zorgen dat je objecten op precies dezelfde hoogte krijgt.

Deze tool gebruik ik voor: - Om een object te selecteren, vergroten of verkleinen. - Een object te verplaatsen. - Wanneer ik meerdere objecten wil verplaatsen (V + shift ingedrukt houden + overige objecten selecteren) - Object kopiëren. (V + alt ingedrukt houden + object slepen met muis) - Om gemaakte hulplijnen te verwijderen.

2. Rectangular marquee tool (selectietool)

Met deze tool kan je pixels selecteren. De sneltoets voor de selectietool is ‘M’. Wanneer je met deze tool een vierkantje op je werkveld trekt (zonder los te laten), zie je rechts boven je muis een vakje verschijnen met daarin precies hoeveel pixel hoog en hoeveel pixels breed het vierkantje wat je trekt is. Dit kan handig zijn voor wanneer je op de pixel precies werk.

Deze tool gebruik ik voor: - Hulplijnen. Door eerst een vakje met de selectietool te maken en daarna een hulplijn erheen te slepen werkt dat magnetisch. De hulplijn gaat dan precies op de rand van het gemaakte blokje. - Om een deel van foto’s of andere objecten te verwijderen. Dit doe je door het object te selecteren. Vervolgens druk je ‘M’ en trek je een vierkant. Het gedeelte wat binnen dit vierkantje valt kan je verwijderen door op delete te drukken.

3. Eyedropper tool (pipet)

Wanneer je met deze tool ergens op je werkveld klikt, dan pakt de pipet precies die kleur waar jij je muis hebt ingeklikt. Dit kan handig zijn wanneer je een object dezelfde kleur moet geven als een bestaand object. Zo zorg je ervoor dat de kleuren precies hetzelfde zijn. De sneltoets voor de pipet is ‘I’.

Deze tool gebruik ik voor: - Om een object de juiste kleur te geven.

4. Eraser tool (gum)

Deze tool gebruik je uiteraard om lagen/(gedeeltes van) objecten uit te gummen. De sneltoets hiervan is ‘E’.

Deze tool gebruik ik voor: - Het bewerken van foto’s die in de website komen. Wanneer ik meerdere foto’s in als één visual moet bewerken zou het voor kunnen komen dat je soms delen van foto’s moet weggummen.

5. Pen tool (pennetje)

Deze tool (sneltoets ‘P’) kan in het begin wat lastig zijn om te begrijpen en gebruiken. Met deze tool kan je alle vormen maken die je je maar kan bedenken en zit je niet vast aan een vierkant of rondje. Wanneer je deze tool aan geklikt hebt en je drukt ergens op je werkveld, dan onstaat er een ankerpunt. Dit is het punt waar je begint met je vorm. Wanneer je ergens anders op je werkveld nog een keer klikt, zie je een tweede ankerpunt verschijnen die verbonden is met het eerste ankerpunt. Dit is de eerste lijn van de vorm die je aan het maken bent. Om een dichte vorm te maken moet je altijd weer eindigen bij je eerste ankerpunt. Wanneer je met de muis over je eerste ankerpunt heen gaat, zie je bij je pennetje een rondje verschijnen. Dit houdt in dat je de vorm kan sluiten. Wanneer je vorm gesloten is en je met je muis op een ankerpunt klikt, zal deze worden verwijderd. Wil je een ankerpunt toevoegen? Ga dan met je muis op een lijn tussen ankerpunten staan. Wanneer je dit doet verschijnt er een plusje naast je pennetje en als je dan klikt heb je er een nieuwe ankerpunt tussen gezet. Je hoeft met de pen tool niet alleen rechte vormen te maken. Je kan bijvoorbeeld ook ronde vormen maken. In plaats van dat je met je muis klikt, hou je je muis ingedrukt. Wanneer je dan iets naar opzij of naar boven gaat met je muis, dan zie je dat de lijn tussen de twee ankerpunten krommer wordt. Ook zie je dat je aan een nieuw bolletje trekt en dat er aan de andere kant van de ankerpunt nog één ontstaat. Aan deze bolletjes kan je met je witte muis knop (A) trekken en de vorm veranderen. Op deze manier hoef je niet meteen de perfecte vorm te maken, maar kan je het ook nog aanpassen.

Deze tool gebruik ik voor: - Wanneer ik een rare of schuine vorm in mijn webdesign wil. - Deze tool kan je ook prima gebruiken om lijnen mee te trekken. - Om foto’s uit te knippen. Stel ik heb een persoon uit een foto nodig, maar wil hem zonder achtergrond hebben. Dan knip ik de persoon uit met de Pen tool.

6. Horizontal type tool (tekst)

Deze tool gebruik je om teksten mee te schrijven. De sneltoets hiervan is ‘T’. Je kan op 2 manieren teksten schrijven. Wanneer je echt een boxje met tekst wilt (bijvoorbeeld de body tekst (grotere teksten) van een website) kan je het beste je muis ingedrukt houden, slepen en loslaten. Op deze manier maak je een boxje waarin je kan typen. Je kan altijd het boxje nog vergroten of verkleinen door de hoeken van het boxje te verslepen.

Wanneer ik titels of andere korte tekstjes wil, klik ik vaak met de tekst tool één keer in het werk veld. Er ontstaat dan een pad waarop je typt. Waarom ik dit voor titels gebruik is omdat de tekst dan makkelijker te centreren is in een object. Wanneer je een tekst boxje heb, moet je er precies voor zorgen dat je geen lege ruimte meer aan de zijkant of onderkant hebt van je tekst heb, wanneer je iets wil centreren. Dat kost weer wat meer tijd. En de reden waarom ik voor body tekst wel een tekst vakje kies is omdat wanneer je je bedenkt met de breedte van het tekstvlak, dit makkelijk aan te passen is. Wanneer je alles via een pad hebt getypt, moet je alles handmatig neerzetten en dit kost veel tijd.

Deze tool gebruik ik voor: - Het toevoegen van teksten

7. Rectangle tool (vormen maken, sneltoets ‘U’)

Wanneer je deze knop ingedrukt houdt, krijg je een kleine dropdown met verschillende vormen waaruit je kan kiezen. Wanneer je een vorm gekozen hebt kan je deze in je werkveld zetten. Je hoeft alleen maar je muis ingedrukt te houden en verslepen. Zo kan je zelf kiezen hoe hoog en breed je deze vorm wilt. Wanneer je een vierkant wilt met ronde hoeken, kan je zelf bepalen hoe rond deze hoeken moeten worden. Wanneer je de vierkant met ronde hoeken heb aangeklikt, zie je boven in het menu ‘radius’ met een nummer staan. Hoe meer pixels dit zijn, hoe ronder de hoek. Zelf gebruik ik deze vorm vaak voor knoppen in een website. Wanneer je een lijn wilt trekken (line tool) kan je ook zelf de dikte bepalen van de lijn. Bovenin het menu verschijnt er ‘weight’ met een aantal pixels. Hoe hoger het aantal pixels, hoe dikker de lijn.

Deze tool gebruik ik voor: - Het maken van knoppen - Het maken voor een ondergrond voor mijn visuals. Als ik wil dat een visual een ronde vorm heeft, maar de foto is een rechthoek, dan maak ik eerst een ronde vorm. - Het maken van backgrounds. Vaak gebruik ik deze vormgen als ondergrond/basis voor elementen in de website.

8. Layers (lagen)

In het rechter menu heb je een knop dat ‘layers’ heet. Wanneer je hier op klikt slaat er een venster open waarin je je lagen kan beheren. Het is erg belangrijk dat je in lagen en mappen werkt en ieder nieuw elemant in een nieuwe laag zet, zo kan je makkelijk ieder element goed terug vinden. Je moet niet raar staan te kijken dat wanneer je een uitgebreide website moet maken, honderden lagen gemaakt heb. Om ze goed te ordenen maak je mappen. Maak sowieso een map aan voor iedere pagina die je maakt. Dus bijvoorbeeld homepage, tekstpagina, contactpagina etc. In deze mappen deel je de pagina ook weer op in groepen. Denk aan bijvoorbeeld header, buttonbalk, visual, footer enz. Wanneer je heel veel elementen in bijvoorbeeld de visual map hebt, kan je deze ook altijd weer onderverdelen in nieuwe mappen.

---

Meer weten over Photoshop? Als je meer wilt weten over de sneltoetsen en functies van de knoppen in photoshop heb ik hieronder wat linkjes naar websites. Er zijn een paar functies die niet vaak voorkomen en omdat photoshop zoveel knoppen heeft, kan ik ze niet allemaal uitgebreid uitleggen. Maar dit betekend niet dat deze niet handig zijn.

Sneltoetsen:

Op deze website staat goed uitgelegd wat de sneltoetsen zijn van verschillende knoppen. Ook legt het uit hoe je nog meer kan halen uit knoppen zoals bijvoorbeeld de selectie toets.

Design tools:

Ik heb op youtube een filmpje gevonden van iemand die de tools nog eens uitlegt. Hij gaat bijna alle knoppen langs met een uitleg en demonstratie. Erg handig voor beginners.