Det er super nemt at oprette en trendy looking glass knap i Adobe Photoshop.
Steps
- 1Den knap, du kommer til at skabe kommer til at se sådan ud:
- 2
Opret et nyt billede
- Start Photoshop og type CTRL + N (Kommando-N på Mac) for at oprette et nyt billede.
- Indtast 250 for "Bredde:", 250 for "Højde:", 72 for "Opløsning:", og White for "Baggrund Indhold:". Klik på "OK".
- Klik på "File"> "Gem som". Skift "Format:" at Photoshop (* PSD, * PDD..). Indstil "File Name:" at GlassButton.psd. Klik på "OK".
Opret pinstripe baggrund
- Opret en midlertidig dokument til nålestribet baggrund. Skriv CTRL-N for at oprette et nyt dokument. Indtast 1 for "Bredde:", 10 for "højde", 72 for "Opløsning:", og White for "Baggrund Indhold:". Klik på "OK".
- Skriv Z for at åbne forstørrelsesglas. Klik på det nålestribet dokument, indtil dens mindst% 1600 større. Type SKIFT + CTRL + N for at oprette et nyt lag. Når det nye lag dialogvindue åbnes, skal du blot klikke på "OK".
- Type M for at åbne pladsen Marquee værktøjet. Hvis en eller anden grund Circle markeringsrammeværktøj åbnes, kan du skifte til pladsen værktøjet ved at holde venstre museknap over Marquee værktøjet i værktøjskassen. Et lille vindue vil åbne op ved siden af værktøjskassen, og du kan vælge den firkantede værktøj.
- På den pinstripe dokument, tegne en Marquee omkring bunden 1 pixel.Make sikker på, at fjer er sat til 0.
- Type SHIFT-F5 for at åbne Fill vinduet. Indstil "Brug:" at Black. Klik på "OK". Nu skriver CTRL + A for at markere hele dokumentet.
- Klik på "Rediger"> "Definer mønster". Et vindue vil poppe op. Indstil "Name:" at Pinstripe.
- Luk nålestribet dokument. Vi har ikke brug for det længere, og der er ingen grund til at gemme det.
Skift glassbutton baggrunden
- Klik på titellinjen på din GlassButton dokument for at aktivere den.
- Type SHIFT + F5 for at åbne Fill vinduet. Change "Brug:" at Mønster. Skift "Custom Pattern" til den Pinstripe mønster, som vi har oprettet. Klik derefter på "OK". Dit dokument skulle nu se sådan ud:
Gøre knap formen
- Klik og hold venstre museknap nede over Marquee værktøjet i værktøjskassen. Når det lille vindue åbner ved siden af den, rul til den Eliptical Marquee Tool.
- Mens du holder SHIFT-knappen, skal du klikke i øverste venstre side af dokumentet, og træk et elliptisk telt indtil musemarkøren er næsten i nederste højre hjørne af dokumentet. Vi ønsker, at cirklen til at være lidt mindre end dokumentet. Klik på Skift + Ctrl + N for at oprette et nyt lag. Når Nyt lag åbnes, ændres "Navn:" at Button Shape.
- Skift forgrundsfarven til en dejlig dyb blå. Klik forgrundsfarven farveprøve på værktøjslinjen.
- Når Farvevælger åbnes, ændres "#" til 000066 (dem er nuller).
- Klik på "OK".
- Tilbage på GlassButton dokument, type SHIFT + F5 for at åbne Fill vinduet. Indstil "Anvendelse:" for forgrundsfarven. Klik på "OK". Type CTRL + A for at markere hele dokumentet. Type CTRL + X for at klippe cirklen ud, og derefter CTRL + V for at indsætte den tilbage. Den klippe og klistre centre cirklen i dit dokument. På paletten Lag, ændre "Blending Mode" til Linear Burn.
- Dit dokument skulle nu se sådan ud: Hvis det ikke sker, skal du gå tilbage og tjekke hvert trin i vejledningen.
Påfør forvrængning til baggrunden
- Hvis du nogensinde har set gennem et glas vand, vil du bemærke, at billedet kommer igennem er lidt forvrænget. Med vores knap, er baggrunden nålestriber viser gennem, så vi er nødt til at fordreje linjerne en lille smule.
- Hold CTRL-tasten nede, og klik på knappen Shape lag i Layers Palette. Dette trækker en markering omkring vores knap form. Klik nu på baggrundslaget på lagpaletten. Klik på "Filters"> "Forvrænge"> "Sfærisk". Indstil "Beløb" til 66%.
- Klik på "OK". Dit dokument skulle nu se sådan ud:
Tilføj en refleksion
- Sørg for at der stadig er en markering rundt om cirklen. Type SKIFT + CTRL + N for at oprette et nyt lag. Når Nyt lag åbnes, ændres "Navn:" at Reflection. Klik på "OK". Et nyt lag ved navn Refleksion burde have været oprettet inbetween Baggrund og Button Shape lag, når man ser på de lag på lagpaletten. Vi er nødt til at flytte refleksionslag til toppen af paletten. Klik og hold venstre museknap på Refleksion lag og træk det til toppen af paletten.
- Type D og derefter X. Dette ændrer forgrunden og baggrunden farver hvid og sort. Type G for at skifte til Gradient værktøjet. Sæt gradient til forgrund til Transparent.
- At sikre din Refleksion lag er valgt, begynde at tegne en gradient linje fra toppen af cirklen til bunden af cirklen. Hold SKIFT nede, mens du gør dette for at sikre at du får en perfekt lige linje. Når linjen har nået bunden af cirklen, slip museknappen. Nu skriver CTRL + D for at fravælge cirklen. Dit dokument skulle nu se sådan ud:
- Ændre størrelsen og formen af refleksionslag. Type CTRL + T, så vi kan gratis Transformer Reflections lag. Grib den "firkantede", som løber langs den højre linje. Mens du holder ALT nede, skal du trække de firkantede indad indtil Refleksion laget er ca 4/5ths den størrelse, den plejede at være. Nu grab "firkantede", der løber langs den nederste linje. Mens du holder ALT nede, skal du trække de firkantede opad, indtil relection laget er ca 3/5ths den størrelse, den plejede at være. Hit ENTER for at bekræfte transformation. Dit dokument skulle nu se sådan ud:
- Vi ønsker ikke, at Reflection at være midt i centrum af knappen sådan, så skriv V for at skifte til Move Tool. Klik nu på refleksion og trække det op, indtil dens næsten på toppen af cirklen. På paletten Lag, ændre Opacity til 85%.
- Nu dit dokument skal se sådan ud:
- Du kunne stoppe her, hvis du ville. Men lad os tilføje en Google stil markering i midten af knappen.
Tilføjelse af en Google-stil afkrydsning
- Klik på knappen Shape lag i Layers Palette. Skriv nu SKIFT + CTRL + N for at oprette et nyt lag over Button Shape Layer. Når Nyt lag åbnes, ændres "Navn:" at markeringen. Nu er vi nødt til at åbne Custom Shape værktøj. I værktøjskassen, klik og hold ned på Rektangel Tool, indtil et vindue åbner ud til den. Vælg Custom Shape fra listen.
- Fra den øverste værktøjslinje, ændre formen til markeringen form.
- Klik på forgrundsfarven farveprøve i værktøjskassen. Når Farvevælger åbnes, ændres "#" til 932.200. Klik på "OK".
- På fluebenet laget, tegne en stor markering, der er lidt mindre end knappen. Det gør du ved at klikke nær bunden af cirklen, og trække ud af en form.
- Klik på "Layer"> "Rasteriser"> "Shape". Nu ændrer opacitet fluebenet lag til 80%. Dit dokument skulle nu se sådan ud:
- Mens du holder Ctrl-tasten nede, klik på fluebenet lag i lag paletten. Skriv V for at skifte til værktøjet Flyt. Nu holde ALT-tasten, og ramte tastaturer pil ned 8 gange. Nu ændre forgrundsfarven til A72903. Type SHIFT + F5 for at åbne Fill vinduet. Kontroller, at "Brug:" er indstillet til forgrundsfarve. Klik på "OK". Type CTRL + D for at fravælge laget.
- På paletten Lag, højreklik på markeringen laget og vælge Blandingsindstillinger. Layer Style åbnes. Klik på Dropshadow. Skift "Angle:" at 90 og "Afstand:" at 15.
- Klik på "OK".
Nogle afsluttende hånd
- Højreklik på Button Shape lag og plukke Blandingsindstillinger. Når Layer Style åbnes, klik på Indvendig skygge. Skift "Blend Mode:" at Multiply "Opacity:" at 75%, "Angle:" at 90 "Distance:" at 5 "Choke:" til 0, og "Størrelse:" til 75. Klik på Drop Shadow. Lad alle indstillinger til, hvad de er. Klik på "OK".
- Og det er det, er du færdig! Din endelige billede skal se sådan ud:
Tips
- Du kan spille rundt med Layer Style vinduet for at få nogle interessante resultater.
- Du kan klikke på "Image"> "Image Size" for at ændre størrelsen på billedet. Hvis du skulle bruge noget som dette på en hjemmeside, ville du helt sikkert vil have noget mindre.
- Du kan tilføje tekst til knappen ved hjælp af værktøjet Tekst.
Ting du behøver
- Adobe Photoshop 7 eller 8 (CS)