[Tutorial] Portfolio website ontwerpen in Photoshop

In een eerder artikel hielpen we je al met het maken van je eigen portfolio website. Nu gaan we een portfolio website ontwerpen in Photoshop. Met deze stap voor stap tutorial leer je hoe je inspiratie kan opdoen van andere websites, hoe je een kleurenpalet kiest en hoe je dit combineert in een website die je zelf ontwerpt.

Het ontwerp die we gaan maken is een simpele portfolio website, met bovenaan een introductie en daaronder het werk in blokken verdeeld. We maken gebruik van een zacht kleurenpalet en twee lettertypes die mooi bij elkaar passen.

Inspiratie

Voordat ik begin met het ontwerpen van onze eigen portfolio website, bekijk ik altijd eerst even een paar andere websites om inspiratie op te doen. We gaan geen website namaken, maar nemen een klein element uit elke website en maken daar ons eigen ontwerp van.

Ook bekijken we verschillende websites om erachter te komen wat werkt en wat veelvoorkomende patronen zijn. Zo zul je zien dat portfolio websites vaak dezelfde indeling hebben.

Ashley Proulx

Van deze website vond ik de indeling heel mooi. Linksboven het logo, in het midden de tekst en daaronder het portfolio met de kleine afbeeldingen.

Kurt Winter

Ook hier staat het logo linksboven en in het midden gecentreerde tekst. In een serif lettertype zie je de introductie van de designer. Er direct onder zie je het werk. Ook mooi aan deze website zijn de blokken die van verschillende groottes zijn.

Third and Grove

Dezelfde indeling zien we bij de website van Third and Grove. Ook hier weer het logo linksboven en het menu rechts. En in het midden een stukje tekst, met daaronder het werk. Wat ik mooi vind aan deze website is de typografie. Een oldschool lettertype is hier gecombineerd met een moderner font.

Wat ook opvalt aan deze website is dat er heel veel witruimte wordt gebruikt. Onderaan de website zie je een call-to-action, waarmee je gelijk naar de contactpagina gaat. In de footer zie je een paar linkjes in het midden gecentreerd staan.

Kleuren

Nadat ik inspiratie heb opgedaan, kies ik vaak een kleurenpalet. Voor het samenstellen van een kleurenpalet heb ik Coolors gebruikt. Dat is een gratis online tool die je helpt met het combineren van kleuren.

Ik wilde een klassieke, bijna retro uitstraling, dus ik ben zachte kleuren gaan combineren. Voor extra contrast heb ik een felle kleur rood toegevoegd.

• Rood: #DB2B39
• Lichtroze: #EBBAB9
• Donkergroen: #534D41
• Lichtgroen: #C3DBC5
• Wit: #FFFFFF

Lettertypes

In één van de voorbeelden zag ik een schreefloos lettertype dat gecombineerd wordt met een klassiek serif lettertype. Dat wilde ik ook.

Met Google Fonts is het heel makkelijk om fonts aan je website toe te voegen, maar je kan ze ook downloaden en gebruiken op je eigen computer. Verder zijn alle lettertypes op Google Fonts gratis te gebruiken en open source.

Ik heb de volgende twee lettertypes gekozen: PT Serif en Sen.

Stap 1. Document opzetten

Nu gaan we naar Photoshop en gaan we echt beginnen aan de portfolio website. Ik gebruik zelf Photoshop CS6, maar je kunt voor deze tutorial elke versie gebruiken. De shortcuts zouden hetzelfde moeten zijn.

1. Maak een nieuw bestand aan (Command of Control + N), met als breedte 1800 en hoogte 3000 pixels. De resolutie staat op 72 pixels per inch en de Color Mode op RGB Color (16 bit).
2. Voeg nu een rechthoek in met de Rectangle Tool (U). Klik op het scherm om een rechthoek van vaste afmetingen in te voegen. Maak de rechthoek 90 × 3000 pixels groot. Vul de rechthoek met rood (#FF0000).
3. Dupliceer deze laag totdat je 12 rechthoeken hebt. Deze zullen samen het grid vormen.
4. Zet de eerste rechthoek op 195 pixels vanaf de linkerkant van het document en de laatste rechthoek op 195 pixels van de rechterkant.
5. Selecteer nu de Move Tool (V) en kies Distribute horizontal centers. Hiermee verdeel je de ruimtes tussen de rechthoeken.
6. Zet nu alle lagen in een Map en zet de opacity hiervan op 10%. We zetten alle layers in één map zodat je ze makkelijk aan en uit kunt zetten. Voor nu mogen ze uit.

Stap 2. Header

In de header bovenaan is er ruimte om jezelf voor te stellen.

1. Maak een rechthoek met de Rectangle Tool (U). Maak deze 1800 pixels breed en 650 pixels hoog.
2. Verplaats de rechthoek naar de linkerbovenhoek. Ik gebruik de Move Tool (V) en 'Align top edges' en 'Align left edges'.
3. Vul de rechthoek met groen (#C3DBC5).
4. Ik hernoem de lagen altijd, zodat 'ie later makkelijker terug te vinden zijn. Deze laag noem ik 'Header'.
5. Voeg nu tekst in met de Horizontal Type Tool (T). We gebruiken het lettertype PT Serif in de grootte 60 pixels en een regelafstand van 72 pixels. Maak de tekst donkergroen (#534D41).
6. Als tekst voegen we in 'Hi, I'm Jonathan, a designer living in Amsterdam'. Hier kun je natuurlijk je eigen tekst invoeren.
7. Centreer de tekst met het midden van de rechthoek die je net hebt gemaakt.
8. Voeg weer tekst in met de Horizontal Type Tool (T). Dit keer gebruiken we het lettertype Sen, in de grootte 24 pixels en de regelafstand Auto. Maak de tekst rood (#DB2B39). De tekst die we nu invoeren is 'More about me'. Zet de tekst op All Caps zodat er hoofdletters worden gebruikt en maak de tekst bold.
9. Voeg een rechthoek in met de Rectangle Tool (U), en maak deze rood (#DB2B39). Maak nu de rechthoek even breed als de tekst en 3 pixels hoog. Verplaats de rechthoek 12 pixels naar beneden, zodat deze iets onder de tekst staat.
10. We gaan nu beginnen aan de navigatie bovenaan. Voeg tekst in met de Horizontal Type Tool (T). Je kunt hier je eigen naam typen. Ik heb weer het lettertype Sen gekozen, in Regular en 24 pixels hoog. Als je naam te lang is kan je je achternaam op een nieuwe regel beginnen, of alleen je voornaam gebruiken. Maak deze ook weer donkergroen (#534D41)
11. Nu maken we de navigatie. De menu items zijn hetzelfde als het logo, maar zijn uitgelijnd aan de andere kant. Kopieer het logo en lijn deze uit aan de rechterkant. Pas de tekst aan naar Contact.
12. Dupliceer het menu item, lijn deze uit met de vorige en verplaats hem 30 pixels naar links. Door Shift in te houden en je linker pijltjestoets te gebruiken kan je elementen met sprongen van 10 pixels verplaatsen.
13. Doe dit nog een paar keer en pas de tekst aan naar Portfolio, About en Home, of verzin zelf andere titels voor je pagina's.
14. We zetten een streepje onder het eerste menu item. Hierdoor lijkt het dat deze geselecteerd is. Maak een rechthoek met de Rectangle Tool (U). Maak deze even breed als de tekst en 2 pixels hoog. Verschuif hem 12 pixels naar beneden zodat deze net onder de tekst staat.
15. Maak vervolgens de rechthoek rood.
16. Selecteer nu Home en maak de tekst ook rood (#DB2B39).
17. Selecteer alle menu items, vergeet het streepje onder Home niet, en verschuif deze 16 pixels naar beneden, zodat deze mooi uitgelijnd is het met logo links in de header.
18. Ten slotte stoppen we alle layers die we net hebben aangemaakt in een eigen folder, die we 'Header' noemen.

Stap 3. Werk

Nu gaan we het werk onder de header laten zien.

1. Maak twee rechthoeken met de Rectangle Tool (U). Klik in het scherm om precieze afmetingen op te geven en vul 690 bij 690 pixels breed in. Zet deze 30 pixels onder de header.
2. Gebruik nu het grid en plaats de eerste rechthoek in de eerste zes kolommen, en de tweede rechthoek in de laatste zes kolommen. Tussen de twee kolommen zitten 30 pixels, evenveel ruimte als erboven. Door deze ruimte hetzelfde te maken krijgt de website een rustige uitstraling.
3. Maak nu een rechthoek van 1410 breed en 690 pixels hoog. Deze is even breed als alle 12 kolommen bij elkaar. Zet deze in het midden en 30 pixels onder de twee rechthoeken.
4. Nu gaan we foto's in de rechthoeken zetten. Je kan natuurlijk je eigen werk gebruiken, maar in dit voorbeeld gebruiken we foto's van Unsplash.com. Dit is een website waar je gratis stockfoto's van kunt gebruiken, ook voor commerciële projecten.
5. In ons voorbeeld gaan we op zoek naar 3 foto's zonder mensen erop. Hierdoor zien de foto's er clean uit en passen ze goed bij onze portfolio website.
6. Kies een mooie foto uit, kopieer en plak deze in je Photoshop document.
7. Positioneer de foto over de eerste rechthoek en maak een mask. Met een masker kan je gedeelten van een laag verbergen.
8. We gaan nu tekst toevoegen over de afbeelding heen. Pak de Horizontal Type Tool (T) en type de titel van je klant of opdrachtgever in en lijn de tekst links uit. We gebruiken weer het lettertype Sen, in Bold en een lettertypegrootte van 30 pixels, in hoofdletters. Maak de tekst wit (#FFFFFF). Type de naam in van je opdrachtgever, wij gebruiken de fictieve naam Sleepwell Beds. Verplaats de tekst 60 pixels vanaf de boven- en linkerkant.
9. Dupliceer hierna de laag en pas de tekst aan naar 'Webdesign'. Verander het lettertype naar PT Serif, in 48 pixels, Regular en zet de hoofdletters uit. Verplaats de tekst 30 pixels naar beneden.
10. Het tweede portfolio item is voor een bar, dus we gebruiken nu een foto van een cocktail. Plak deze over de rechthoek heen en maak een mask door de rechthoek te selecteren met Command (Control op Windows) en op de layer te klikken.
11. Dupliceer de tekst van het vorige portfolio item en positioneer deze over je nieuwe afbeelding. Zet de tekst weer 60 pixels vanaf de boven- en linkerkant.
12. Plak nu de laatste afbeelding in je document en maak ook hiervan een masker. Dupliceer weer je tekst over de afbeelding heen.
13. Om de tekst beter leesbaar te maken, spiegelen we de afbeelding in de tweede rechthoek. Zorg ervoor dat de afbeelding de rode achtergrond compleet bedekt.
14. Ook maken we de tekst donkergroen (#534D41), zodat deze beter zichtbaar is op de roze achtergrond.
15. We gaan nu een eenvoudig filter toepassen op de foto's. Verlaag de opacity van de afbeeldingen naar 75%, zodat de rode blokken weer zichtbaar worden.
16. Geef vervolgens de blokken een andere achtergrondkleur, zodat de kleuren van de afbeeldingen beter gaan passen bij de andere kleuren op de website. Dit kun je doen door op het icoontje voor de laag te klikken.
17. Het eerste blok maak je dezelfde kleur als de header (#C3DBC5), het tweede blok maak je donkergroen (#534D41) en het laatste blok maak je lichtroze (#EBBAB9).
18. Nu maken we een nieuwe map en noemen we deze 'Portfolio'. Hier doen we alle lagen in zodat deze netjes zijn opgeruimd.

We zijn nu klaar met het portfolio blok van de website. Als je meer werk wilt laten zien, kun je natuurlijk meer blokken maken zoals we in de stappen hiervoor hebben gedaan.

Stap 4. Call-to-action banner

Onder het portfolio hebben we nog een call-to-action en de footer. Deze zetten we neer zodat het duidelijk is dat de website hier stopt.

1. Maak een rechthoek met de Rectangle Tool (U) van 1800 pixels bij 380 pixels. Lijn de rechthoek uit aan de linkerkant van het document en 30 pixels onder de laatste afbeelding.
2. Geef de rechthoek een licht roze achtergrondkleur (#EBBAB9).
3. Dupliceer de tekst 'Webdesign' en centreer deze in het midden van de rechthoek die je net hebt gemaakt. Pas de tekst aan naar 'Want to work with me?'
4. Dupliceer deze tekstlaag weer en pas het lettertype aan naar Sen, Bold, 24 pixels hoog. Zet ook de All Caps weer aan. Pas tenslotte de tekst aan naar 'Contact me'.
5. Maak een rechthoek met de Rectangle Tool (U) die even breed is als de tekst en 3 pixels hoog. Maak deze dezelfde kleur als de tekst en zet deze 12 pixels lager.

Stap 5. Footer

1. Maak een rechthoek met de Rectangle Tool (U) van 1800 bij 270 pixels en pas de achtergrondkleur aan naar donkergroen (#534D41). Lijn de rechthoek uit met de linkerkant van je document. Deze rechthoek wordt de footer van de website.
2. Voeg tekst in met de Horizontal Type Tool (T). Kies het lettertype Sen, Regular, in 24 pixels hoog. Maak de tekst wit (#FFFFFF). Lijn de tekst in het midden uit.
3. Dupliceer de tekst 4 keer en pas deze aan naar 'home', 'portfolio', 'about' en 'contact', net als in de navigatie bovenaan. Laat ook hier weer 30 pixels ruimte aan de zijkanten over.
4. Lijn de tekst uit in het midden van de footer.
5. Snij aan de onderkant de witruimte weg met de Crop Tool (C).

Tot slot

De homepage van je portfolio website is af! We hopen dat je wat hebt geleerd van deze tutorial. Laat een reactie achter in de comments van de video als je vragen hebt of iets niet is gelukt.