Artikelen

Het kan zo maar voorkomen dat een klant je vraagt een menu te maken die net zo ‘gelikt’ is als de iPhone. Daar kun je natuurlijk geen nee tegen zeggen, wat echter wel betekend dat je flink wat uurtjes in shiny buttons moet gaan stoppen. Deze tutorial legt je in enkele stappen uit hoe je een dergelijke iPhone button moet maken in Photoshop.


1. Creëer een nieuwe Photoshop file.
Open Photoshop en maak een file aan van 72dpi en 80x80px. Geef de file een relevante naam en sla deze op.



2. Teken de basis van de icon
Een iPhone icon is in basis vierkant met ‘rounded edges’. Kies een kleur die je bevalt en  selecteer vervolgens de Rounded Rectangle Tool”. Zet de radius (zie de opties bovenin de optiebalk) van de fill op 10px en teken een vierkant van ongeveer 65x65px. Als je shit inhoudt krijg je een mooi vierkant.



3. Maak een glanzend randje
Selecteer de basis van de icon via Select > load selection… Vervolgens maak je en nieuwe layer waarin het glanzende randje komt. Ga naar Select > Modify > Contract en maak de selctie 2 pixels kleiner. Vul deze selectie vervolgens met wit en zet de layer blendmode op ‘overlay’. Voeg een witte rand toe via de layer opties. Zet de fill van de rand op gradient wit-transparant-wit.

4. Maak de top glans
Selecteer wederom de basis van de icon via Select > load selection… Maak een nieuwe layer en vul deze met een gradient van wit naar transparant. Met de layer nog geselecteerd, kies je de oval tool uit het tools menu en maak je een ovaal die lijkt op het onderstaande voorbeeld. Via ‘control-shift-i’ selecteer je het omgekeerde van de selectie. Verwijder deze selectie.



5. Voeg een Shadow toe
Selecteer de basis van de icon en maak een nieuwe layer onder  deze basis layer en vul deze met een zwarte fill. Zet de transparantie van deze layer op 80%. Voeg vervolgens een lichte schaduw toe aan de ze layer: 90 graden, 80 opacity, afstand 2px, grootte 2px.

6. Maak de hoekjes mooi
De hoekjes links en rechts boven zijn nog een beetje korrelig. Deze kun je weghalen door de basis layer te selecteren en deze selectie vervolgens 1px naar onder te verschuiven. Selecteer vervolgens het omgekeerde en verwijder de selectie.



7. Voeg je icon toe
Als kers op taart voeg je een icon of logo toe. Zet de icon onder de top glans layer. Voeg een lichte (of voor cartoon-achtige icons) dikke stroke toe.

8. Glans
Je kunt in plaats van een shadow onder het icoon ook een glans toevoegen. Dit kun je doen door de gehele icon om te draaien (Edit > Transform > Flip Horizontal). Voeg vervolgens een layer toe aan de onderkant van de icon glans. Deze layer heeft een transparant fill van wit (bodem) naar transparant. Maak de glans vervolgens 40% transparant.