Voor het maken van een glossy download button maak je een nieuw document aan van 400 px bij 400 px. We gebruiken voor deze tutorial Adobe Photoshop CS3. De achtergrond maken we wit, dus gebruik de Paint Bucket (G) en vul de achtergrond met wit (#FFFFFF). Om het georganiseerd te houden noemen we deze layer Achtergrond.
Nu gaan we beginnen aan de button, je maakt een nieuwe layer aan (CTRL+SHIFT+N). Noem deze layer 'Button'. Je pakt de Elliptical Marquee Tool (M) en maak een cirkel die in het vlak past (TIP: voor een perfecte cirkel houd SHIFT ingedrukt). Als je de cirkel hebt gemaakt, neem dan de Gradient tool (G). Je stelt nog eerst de kleuren in; achtergrondkleur #1081ed - voorgrondkleur: #05335e. Omdat je met de Elliptical Marquee Tool een selectie hebt gemaakt dat een perfecte cirkel is, zal de gradient alleen in de selectie voorkomen. Trek een lijn van boven naar beneden met de Gradient tool (G) tot je de kleur zelf goed vindt. Pas er nog een Inner Shadow aan toe voor de finishing touch. De Layer Style stel je als volgt in:
Nu maak je een nieuwe layer en gebruik je de Ellipse Tool (U). Je stelt de kleur in op #00c6ff. Je maakt aan de onderkant van de cirkel een ovaal, niet al te groot, want het gaat een soort lichtbol voorstellen.
Nu ga je deze vorm rasteren. Dat doe je als volgt: Rechtermuisknop > Rasterize Vector Mask. Pas er nog een filter aan toe: Filter > Blur > Gaussion Blur en je zet de radius op 12. Je kan de Opacity of de Fill van die layer nog iets naar beneden halen zodat hij niet te prominent aanwezig is. Kleur kan je nog wijzigen door in je layers palette te dubbelklikken op layer thumbnail.
Nu neem je de Elliptical Marquee Tool en selecteer je een stuk van de bovenkant van de cirkel. Je selecteert de button layer en selecteert de bovenkant van de cirkel, hierdoor neem je een stuk mee van de achtergrond. We hebben ook nog de Magic Wand Tool (W) nodig. Houd ALT ingedrukt en klik eenmalig op het witte vlak. Zo nu heb je alleen het deel geselecteerd van de button.
Om er een soort witte fade over heen te maken pakken we de Brush Tool (B). Stel de voorgrondkleur in op wit en de Opacity op 10 procent. Ga dan door de selectie heen met je Brush Tool.
Afwerking van de knop
Nu gaan we de rand er omheen maken. Dit doen we in twee keer. De eerste rand kan je gewoon doen met de layer style. Die stel je als volgt in:
Nu gaan we een truc toepassen... Maak een nieuwe layer aan (CTRL+SHIFT+N). Selecteer de layer met de naam Button en de layer die je net hebt aangemaakt. Voeg deze 2 layers samen: rechtermuisknop > Merge Layers. Nu heb je geen layer styles meer, dus kan je opnieuw een Stroke toepassen. Je stelt de layer style als volgt in:
Nu geven we de finishing touch aan heel de button, door er nog een Drop Shadow aan toe te voegen. De instellingen zijn als volgt:
Om er een echte downloadknop van te maken, ga je nog een pijl toevoegen. Hiervoor gebruik je de Custom Shape Tool (U) en kies dan de gevulde pijl. Plaats hem in de button. Draai deze layer met je Free Transform Tool zodat deze naar beneden wijst. Je kan natuurlijk ook tekst of een andere afbeelding in de knop zetten. Probeer zelf wat uit.
Dit is mijn resultaat