Sådan oprettes Web 2.0 Knapper i Photoshop

February 27

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.

Instruktioner

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øjslinien-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 skabe 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 den gradient du behøver, indstille din gradient opacity til 40%. Derefter Control-klik eller Kommando-klik på ikonet lag i lag panelet til at vælge de pixels i det lag. Klik og træk fra top til omkring 80% ned formen til at anvende gradienten. 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 lagtyper. Gør slagtilfælde farve 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. Placer 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 gennemsigtig. Nu hvor du ved, hvordan fra det sidste trin, skal det være nemt. Påfør gradienten ved at klikke og trække nedad hen over formen, så den hvide er på toppen og svinder nedad til gennemsigtig.

4 Vælg din 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 tekst lag. Dette gør teksten se ud som om det er æglæggende oven på en blank, semi-transparent boble.

TIPS

  • Brug et 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 effekter, men ikke gå overbord med dem. For mange eller for meget af en god effekt gør det ser teatralsk.

relaterede artikler