Pixelmountain

Tutorial: stijlvol Twitter icon in Photoshop creëeren

Op het web kan je heel wat free icons vinden die je gratis mag gebruiken. Maar stel dat je nu zelf eentje wil ontwerpen, of je vindt je ding niet in het overgrote aanbod. Hoe begin je daar aan? Allereerst is een basis in het ontwerpen van icons een must.

Deze tutorial leert je enkele basisprincipes die elke icon-designer onder de knie moet hebben. Ze kunnen zelfs handig zijn in je andere projecten en designs.

Let’s roll!

Maak een nieuw Photoshop-document aan van 500x500px met een zwarte achtergrond.

Selecteer de Rounded Rectangle-tool. In de properties zet je de radius op 50 pixels. Zet de voorgrondkleur op #3ab9db en teken nu een vorm die een groot deel van je scherm vult. We maken het icon op een groter formaat dan dat we uiteindelijk nodig zullen hebben. Maar dit werkt beter, en op die manier kan je het icon ook makkelijker herschalen.

Kopieer nu de eerste laag en geef deze volgende laagopties mee (dubbelklik op de laag en het menu laagopties opent zich.):

• Size: 5px – de dikte van onze omlijning
• Position: inside/binnen
• Blend mode: Overlay
• Opacity: 0%
• Fill Type: Gradient
• Scale: 124%

• Blend Mode: Overlay
• Opacity: 76%
• Angle: 90°
• Distance: 143px
• Size: 150px

Nu hebben we een rand die mooi overvloeit met het icon, en een glanzend effect voor de achtergrond gemaakt:

We like it when things are shining!

Looks good, maar we willen nog nét dat ietsje meer. Met de ovale selectietool tekenen we een ovaal boven ons icoon:

Maak een nieuwe laag aan helemaal bovenaan, en vul de selectie met wit. Ctrl-D om te deselecteren. Zet de bleding mode van de laag op Soft Light:

Kopieer deze laag, en verplaats de glans wat, zodat je effect wat versterkt wordt. Verminder de opacity van de 2 lagen wat, zodat ze wat transparanter worden.

Nu gaan we even terug naar onze eerste shape-laag, nemen een kopie van de laag, en plaatsen deze helemaal bovenaan. Met de transform-tool (ctrl-T) maken we de vorm wat kleiner. Hou Alt-ingedrukt wanneer je verkleint, op die manier verklein je meteen alle vier de hoeken.

Zet de Fill van deze laag op 0%. Let op, niet de opacity, maar de Fill. Deze lijken op het eerste zicht hetzelfde resultaat te geven: onze vorm is transparant. Maar wanneer we hier nu via de laagopties een stroke rondzetten, zal de stroke wél zichtbaar zijn. Dit zou niet gelukt zijn wanneer we de opacity van de laag op 0 zouden zetten.

Laten we dit dan ook doen: ga naar de laagopties, en vul de randopties in:

• Stroke: 8px
• Position: inside
• Opacity: 100%
• Color: #daffff

De basis van ons icoon is klaar. Je kan dit voor allerlei iconen gebruiken.

We gaan nu ons Twitter-icoon afwerken. Let op: de techniek die ik hiervoor gebruik, is a.h.v. een smart-object (slim object). Het smart-object werd pas geïntroduceerd in CS2

Eerst maken we onze ‘T’. We gebruiken hiervoor de Rounded Rectangle shape-tool met 50px radius en een kleur: #dfffdf.

We kopiëren deze laag twee keer en plaatsen deze zo, dat we een T-vorm krijgen. Nu selecteren we de 3 lagen, en klikken rechts op een van de lagen. Klik vervolgens op ‘Maak slim object’ of Smart Object.

Nu we ons smart-object gemaakt hebben, hoeven we enkel nog enkele laagstijlen aan onze ‘T’ toe te voegen:

• Opacity: 100%
• Gradient: van #539dbc naar #76ddf8

• Size: 14px
• Position: Outside
• Color: wit

Vervolgens plaatsen we deze laag onder de twee ovale glanslagen, zodat ook de ‘T’ een glans krijgt:

En ons Twitter-icon is klaar.