Share
Wanneer we aan een webontwerpproject werken, hebben we vaak pictogrammen nodig om opdrachten weer te geven zoals toevoegen, verwijderen of bewerken. Met de Web 2.0-trend is het gebruik van badges en subtiele 3D erg populair geworden. In deze zelfstudie laat ik je zien hoe je een heel eenvoudig en erg leuk 3D-effect kunt creëren dat kan worden gebruikt in knoppen en pictogrammen of elementen die enige diepte vereisen.
Maak een nieuw document en selecteer de Ellipse Tool (U). Het maakt niet uit welke kleur je gebruikt, omdat deze later zal worden vervangen door de laagstijlen.
Dubbelklik op de ellipslaag om het dialoogvenster Laagstijl te openen. Selecteer vervolgens de Gradient Overlay en gebruik een blauwe en een lichtere blauwtint voor de verloopkleuren. Gebruik voor de stijl Radiaal. Voeg vervolgens een afschuining en reliëf toe zoals hieronder getoond.
Tip: verplaats de radiale gradiënt meer naar de bovenkant van de cirkel. Om dat te doen met het dialoogvenster Laagstijl nog steeds open, zorg je ervoor dat je in het Verloop Overlay-gedeelte bent, en klik en houd de knop ingedrukt om het verloop te verplaatsen.
Dupliceer de cirkellaag en verklein de grootte om deze iets kleiner te maken, zoals de afbeelding hieronder.
Dubbelklik op de nieuwe laag om het dialoogvenster Laagstijlen te openen. Deselecteer alle vorige effecten (schuine kant en reliëf en overlay met kleurovergang). Selecteer nu Lijn en selecteer Gradiënt voor het Opvultype. Selecteer voor de kleuren wit voor beide uiteinden van het verloop en verander de dekking naar 0% voor het begin en 100% naar het einde.
Selecteer het gereedschap Horizontale tekst (T) en maak een tekstlaag. Zorg ervoor dat deze laag bovenaan staat. Open nu het vak Layer Styles en verander de Color Overlay in wit en selecteer Inner Shadow en gebruik de onderstaande instellingen.
Groepeer de drie lagen en noem het "Blue Circle".
Selecteer de Polygoon Tool (U) en wijzig enkele instellingen zoals hieronder getoond om een Star-badge te maken. Dupliceer de laag en verklein de grootte zoals bij stap 3.
In plaats van die laagstijlen op de laag toe te passen, kopieert u de stijl van het vorige pictogram dat we hebben gemaakt en plakt u deze in onze nieuwe laag. Om dat te doen, selecteert u de laag waarvan u de laagstijl wilt kopiëren, klikt u met de rechtermuisknop op de muis (Macs: Option-Click) en kiest u Laagstijl kopiëren. Selecteer vervolgens de laag waaraan u de stijl wilt toevoegen en klik met de rechtermuisknop opnieuw en kies Laagstijlen plakken.
Het enige dat u hoeft te veranderen, zijn de verloopkleuren onder de Verloopoverlay.
Dit is een van de gemakkelijkste manieren om een coole 3D-stijlknop te maken. U kunt enkele instellingen zoals de verloopkleur van de lijn wijzigen en verschillende 3D-stijlen maken.
Accentsconagua