Sådan oprettes Web 2.0 Knapper i Photoshop

Sådan oprettes Web 2.0 Knapper i Photoshop


Web 2.0 er en populær stil i webdesign. Web 2.0 knapper ser tredimensionale og skinnende, som en boble, som om de er affyret ud af skærmen. Processen med at skabe web 2.0 knapper indebærer masser af gradienter og lag arbejde.

Vejledning

1

Åbn Photoshop, oprette en ny fil og indstil lærred størrelse til, hvad din knap størrelse vil være. Grab formen værktøj fra værktøjslinjen-vælg et afrundet rektangel eller en cirkel, da det er mest almindelige i web 2.0 stil. Vælg en farve til din knap, og klik og træk for at oprette formen, så den næsten fylder lærredet. Efterlad et par pixels omkring det for en grænse. Derefter skal du højreklikke på formen lag i panelet Lag, og vælg "Rasteriser."

2

Vælg gradient værktøjet. Tag et kig i drop-down gradient menu lige under menulinjen øverst på skærmen, og finde en to-farvet gradient ved hjælp af farven på din form og hvid. Hvis du ikke kan se de farver, du ønsker, skal du klikke på gradient billedet øverst i menuen i stedet. Dette vil tage dig til en dialogboks, hvor du kan redigere, oprette og gemme brugerdefinerede gradienter. Gør din gradient ved hjælp af skyderne. Når du har gradient, du behøver, indstille gradient opacity til 40%. Derefter Control-klik eller Kommando-klik på ikonet lag i laget panelet til at vælge de pixel i dette lag. Klik og træk fra top til omkring 80% ned formen til at anvende forløbet. Nu ved hjælp af tekstværktøjet, oprette en tekstboks og skrive teksten til din knap. Gå tilbage til din normale musemarkøren og placere teksten i midten af ​​knappen.

3

Tilføj en 1- eller 2-pixel streg til din tekst ved hjælp af lagtyper. Gør stregfarve lidt mørkere end din knap farve. Gør det samme for din knap lag. Lav en ny form den samme som den oprindelige knap form, men omkring 90% så bred og 50% så høj som originalen. Placere den i midten og nær toppen af ​​den oprindelige knap form. Rasterisere formen ligesom du gjorde med din første form. Vælg de pixels ved Control eller Kommando-klikke på ikonet lag og slette det valgte område helt. Nu skal du vælge den gradient værktøjet igen og skabe en gradient der går fra hvid til transparent. Nu hvor du ved, hvordan fra det sidste trin, bør det være nemt. Påfør gradienten ved at klikke og trække nedad over formen, så den hvide er på toppen og svinder nedad til gennemsigtige.

4

Vælg dit oprindelige knap lag i panelet Lag, og dobbeltklik på den for at åbne lagtyper dialogboksen. Derfra skal du vælge "Inner Glow" fra kolonnen til venstre og indstille opaciteten til 50%. Gør farven på din Glow samme nuance som din knap, men lidt lysere. For at gøre det se endnu mere tredimensionelt, tilføje en slagskygge til din tekst via lagtyper til tekstlaget. Dette gør teksten se ud som om det er om på toppen af ​​en blank, semi-transparent boble.

TIPS

  • Brug en afrundet rektangel eller en cirkel for din knap, og bruge en moderne udseende skrifttype til din knap tekst. En skrifttype som Times New Roman ville se mærkeligt på sådan en frisk, 3-D-knappen.
  • Det er dejligt at eksperimentere med effekterne, men ikke gå overbord med dem. For mange eller for meget af en god effekt gør det ser teatralsk.

relaterade artiklar