3min

Tags in dit artikel

[PS] Userbar maken

En weer een tutorial! Dit keer een aardig korte maar zeker handig voor mensen die vaak op forums zitten en een leuke Userbar willen hebben. Voordat je begint nog een tip, geef je layers altijd een naam zodat je altijd weet wat er op een bepaalde layer staat.

  1. Eerst maken we een nieuw document aan, dit doen we als volgt:

  2. Select de "Gradient Tool" en zet de ‘options’ zoals ze hier onder staan. Als je dat hebt gedaan klik in het vak dat in het rood omcirkeld is.

  3. Als je op het rood omcirkeld vakje geklikt heb krijg je dit:

    Stel de kleuren zo in dat het goed bij het plaatje/logo past.

  4. Klik dan op ‘OK’ en teken een lijn vanaf de bovenkant naar onderen en als het goed is moet hij nu op die van mij lijken, het enige wat anders is zijn de kleuren die je zelf gekozen hebt

  5. Om de diagonale lijnen te krijgen moet je een nieuw document aan maken van 3 bij 3 pixels, zoom in tot 1600%. Pak dan je ‘Pencil Tool’, zet de kleur op zwart en teken een lijn diagonaal van links onder naar rechts boven zoals dit:

  6. Als je dat gedaan hebt ga je naar ‘Edit –> Define Pattern’ en geef het een naam die jij wil klik dan op ‘OK’. Ga dan terug naar de userbar en maak een nieuwe Layer. Selecteer nu alles (Ctrl + A), ga dan naar ‘Edit –> Fill’ (Shift + F5) en open het drop down menutje en kies voor ‘Pattern’ dan klik je in het vakje eronder ‘Custom Pattern’ en selecteer je eigen Patter die je net hebt gemaakt en klik op ‘OK’. Als je dat hebt gedaan verlaag dan de ‘opacity’ van de layer* tot dat het goed lijkt. Zodra je dat gedaan hebt dan zou hij er zo ongeveer eruit moeten zien:

  7. Pak nu je plaatje/logo dat je wilt gebruiken voor je Userbar en kopiëer het plaatje en plak hem op je Userbar zoals dit:

  8. Het is nu tijd om de tekst aan te brengen op je Userbar. Ik heb het Visitor TT2 (BRK) font gebruikt, maar je bent natuurlijk vrij in je keuze. Zet de puntgrootte op 13 pixels en zorg ervoor dat anti-alias UIT staat. Zet de kleur op wit en maak daar omheen een ‘Stroke’ van 1 pixel groot in het zwart.
    Zet dan de ‘Position’ op ‘Outside’. Type nu de tekst die je erop wilt hebben, ik heb "AMD Inside" gebruikt. Zo de tekst zit erop! Zo ziet mijn resultaat eruit:

  9. Nu gaan we de Userbar een 3D look geven. Allereerst maak weer een nieuwe layer, pak dan je ‘Elliptical Marquee Tool’ erbij en teken een half rondje kijk naar het voorbeeld hieronder:

    Ga dan naar ‘Edit –> Fill’ (Shift + F5) en kies voor de kleur wit, klik dan op ‘OK’. Als je dat hebt gedaan verlaag dan de ‘Opacity’ van de layer* totdat hij op onderstaande afbeelding lijkt:

  10. Deze stap kun je doen maar het is niet noodzakelijk, namelijk het toevoegen van 1 pixel border. Maak een nieuwe layer aan en selecteer dan het hele veld (Ctrl + A) ga dan naar: Edit –> Stroke zet de Width op 1 pixel en de kleur op Zwart, zet de location op inside. En dit is het resultaat:

Zo de Userbar is klaar! Nog even een ideetje, als je meerdere Userbars maakt dan kan je hem ook animeren, klik hierom het programma te downloaden. Ik gebruik zelf altijd dat programma omdat het het makkelijkste is, je moet alleen wel je Userbars in .gif opslaan anders pakt het programmaatje het niet.