Ontwerp een Web 2.0-tabblad met Photoshop

In de onderstaande gids wordt geprobeerd u een idee te geven hoe u een mooi, gestroomlijnd tabblad kunt ontwerpen in Photoshop, Web 2.0-stijl.

Stap 1

Maak een nieuw canvas met witte [#ffffff] achtergrond op elke gewenste grootte, bij voorkeur rechthoekig; ze zijn meer geschikt om tabbladen te tekenen. Ga vervolgens naar Kanalen Tab (Windows -> kanalen), klik Maak een nieuw kanaal rechtsonder.

Stap 2

Teken op de geselecteerde kanaallaag dezelfde vorm met het gereedschap Polygonal Lasso. Vul het met witte kleur [#ffffff]; maak de selectie van het polygoongebied ongedaan (selecteer een willekeurig selectiekader en klik op het scherm); geef de vorm Gaussiaanse vervaging met een straal van 6.0px.

Stap 3

CTRL-L om het niveaudialoogvenster te openen en druk op de linker- en rechterpijl om de middelste pijl te raken, zoals de afbeelding hierboven. Dit zal “glad” je wazige vorm en geeft je een mooie afgeronde hoekvorm.

Stap 4

Op het tabblad Kanalen, Houd CTRL ingedrukt, Klik op Kanaalminiatuur van laag Alpha 1. De nieuwe vorm zal nu worden geselecteerd, terugschakelen naar Tabblad Lagen, Maak een nieuwe laag en vul het geselecteerde gebied met zwart [# 000000].

Stap 5

Verwijder afgeronde hoeken voor botbodem links en rechtsonder, verplaats deze naar links en plaats deze zoals hierboven afgebeeld. Vervolgens zullen we ons concentreren op de zwarte kleur Tab.

	Houden CTRL, klik op tab's Laagminiatuur om het volledige tabbladbeeld gemarkeerd te maken.
	Selecteer als het tabbladafbeelding nog steeds is gemarkeerd Rechthoekig selectiekader, houden ALT en teken een rechthoekig gebied dat we willen verwijderen.
	Je zou alleen het bovenste gedeelte moeten zien geselecteerd. kiezen -> Wijzigen -> Contract, Contract met 2px en je zou iets moeten krijgen zoals de afbeelding aan de linkerkant.
	Maak een nieuwe laag, vul het gemarkeerde gebied met wit [#ffffff]. Klik met de rechtermuisknop, kies Meng opties dan Gradiant Overlay. Vervang de witte kleur [#ffffff] door grijs [# 616161]. Uw tabblad zou moeten lijken op de afbeelding aan de linkerkant.

Stap 6

Maak een nieuwe laag; kiezen Afgerond rechthoekig gereedschap (Radius 8px), teken een rechthoek en plaats deze laag achter de zwarte tabellaag. Klik met de rechtermuisknop en selecteer Meng opties en voeg de volgende instellingen in.

Slagschaduw

Dekking: 31%
Afstand: 0px
Verspreiding: 0%
Grootte: 2px

Schuine kant en reliëf

Diepte: 100%
Grootte: 0px
Verzachten: 0px

Gradiant Overlay

Hier zijn de instellingen voor Kleurstops.
Kleur: #aaaaaa, Locatie: 0%
Kleur: #ffffff, Locatie 100%

Stap 7

Zet wat tekst in om de algemene look van web 2.0 te zien. Ik gebruik font Lucida Fax, font-size 32pt en 25pt. En je tabblad is klaar! Voel je vrij om rond te spelen met de kleurencombinatie van Tab.

Tutorial downloaden