How to Create Web 2.0 Buttons in Photoshop

How to Create Web 2.0 Buttons in Photoshop


Web 2.0 is een populaire stijl in webdesign. Knoppen voor het Web 2.0 kijken driedimensionale en glanzend, als een zeepbel, alsof ze zijn popping uit het scherm. Het proces van het creëren van knoppen voor het web 2.0 omvat veel verlopen en laag werk.

Instructies

1

Open Photoshop en maak een nieuw bestand ingesteld de canvasgrootte op wat de knopgrootte van uw zal worden. Het hulpmiddel van de vorm van de hulpmiddelstaaf grijpen — Kies een afgeronde rechthoek of een cirkel, want dat is de meest voorkomende in de web 2.0-stijl. Selecteer een kleur voor uw knop, en klik en sleep om de vorm te maken, zodat het vult bijna het canvas. Laat een paar pixels omheen voor een rand. Vervolgens met de rechtermuisknop op de vormlaag in het deelvenster Lagen en selecteer "Rasterize."

2

Selecteer de gradiënt tool. Neem een kijkje in de kleurovergang vervolgkeuzemenu rechts onder de menubalk boven in uw scherm, en vinden een kleurovergang met twee kleuren met de kleur van je vorm en wit. Als u de gewenste kleur niet ziet, klikt u op de gradient afbeelding boven aan het menu in plaats daarvan. Dit brengt u naar een dialoogvenster, waar u kunt bewerken, maken en opslaan van aangepaste verlopen. Controleer uw verloop met behulp van de schuifregelaars. Zodra u het verloop dat u nodig hebt, stel uw kleurovergang dekking tot 40%. Vervolgens CTRL of Command-klik op het pictogram van de laag in het deelvenster Lagen te selecteren van de pixels in die laag. Klik en sleep van boven tot ongeveer 80% beneden de vorm toe te passen van het verloop. Nu, met het tekstgereedschap, een tekstvak maken en typ de tekst voor uw knop. Ga terug naar uw normale muisaanwijzer en plaats van de tekst in het midden van de knop.

3

Een 1 - of 2-pixel-lijn toevoegen aan uw tekst met behulp van stijlen van de laag. Maak de kleur van de lijn een beetje donkerder dan uw knopkleur. Doe hetzelfde voor uw knop laag. Maak een nieuwe vorm hetzelfde als de originele knopvorm, maar ongeveer 90% zo breed en 50% zo groot als het origineel. Plaats het in het centrum en in de buurt van de bovenkant van de oorspronkelijke knopvorm. Rasteren de vorm zoals je deed met uw eerste vorm. Selecteer de pixels door controle - of Command-klikken het pictogram laag en wissen van het geselecteerde gebied volledig. Nu, kies de gradient tool opnieuw en maak een verloop dat van wit naar transparant gaat. Nu dat je hoe vanaf de laatste stap, het moet gemakkelijk zijn weet. Het verloop van klikken en slepen naar beneden de vorm zodat de witte op de top is en naar beneden tot transparante vervaagt toepassing.

4

Selecteer uw oorspronkelijke knop laag in het deelvenster Lagen en dubbelklikt u erop om de Layer Styles dialoogvenster te openen. Vanaf daar Selecteer "Binnenste gloed" in de kolom aan de linkerkant en stel de dekking tot 50%. De kleur van uw gloed die van de dezelfde tint als uw knop maar iets lichter te maken. Om het er zelfs meer driedimensionaal uitzien, voegt u een slagschaduw aan uw tekst via laagstijlen voor de tekstlaag. Dit maakt de tekst er precies uitzien alsof het legt op de top van een glanzend, semi-transparante zeepbel.

Tips & waarschuwingen

  • Gebruik van een afgeronde rechthoek of een cirkel voor uw knop en gebruiken een modern uitziende lettertype voor de knoptekst. Een lettertype zoals Times New Roman zou kijken vreemd op een vers, 3D knop.
  • Het is geweldig om te experimenteren met de gevolgen, maar ga niet overboord met hen. Te veel of te veel van een goed effect maakt het kijken cheesy.