Wku

Hur man skapar en enkel glasknapp i photoshop

Det är super enkelt att skapa en trendig ser glasknapp i Adobe Photoshop.

Steg

Hur man skapar en enkel glasknapp i photoshop. Den knapp du ska skapa kommer att se ut så här.
Hur man skapar en enkel glasknapp i photoshop. Den knapp du ska skapa kommer att se ut så här.
  1. 1
    Den knapp du ska skapa kommer att se ut så här:
  2. 2

Skapa en ny bild

  1. Starta Photoshop och typ CTRL + N (Kommando-N på Mac) för att skapa en ny bild.
  2. Ange 250 för "Bredd:", 250 för "Höjd:", 72 för "Upplösning:", och vit för "Bakgrund Innehåll:". Klicka på "OK".
  3. Klicka på "Arkiv"> "Spara som". Ändra "Format:" till Photoshop (* PSD, * PDD..). Ställ in "File Name:" att GlassButton.psd. Klicka på "OK".

Skapa pinstripebakgrund

  1. Skapa en tillfällig handling för pinstripebakgrund. Tryck på Ctrl-N för att skapa ett nytt dokument. Ange 1 för "Bredd:", 10 för "höjd", 72 för "Upplösning:", och vit för "Bakgrund Innehåll:". Klicka på "OK".
  2. Typ Z för att öppna förstoringsglas. Klicka på kritstreck dokumentet tills dess minst% 1600 större. Skift + Ctrl + N för att skapa ett nytt lager. När det nya lagret dialogruta öppnas, klickar du bara på "OK".
  3. Typ M att öppna torget markeringsramen. Om av någon anledning Circle markeringsramen öppnas kan du ändra till torget verktyget genom att hålla ner vänster musknapp över markeringsverktyget i verktygslådan. Ett litet fönster öppnas upp bredvid verktygslådan och du kan välja den kvadratiska verktyget.
  4. På kritstreck dokumentet, dra en markeringsram runt botten 1 pixel.Make Kontrollera att fjädern är satt till 0.
  5. Skift-F5 för att öppna Fill fönstret. Ställ "Användning:" Black. Klicka på "OK". Skriv nu CTRL + A för att markera hela dokumentet.
  6. Klicka på "Edit"> "Definiera mönster". Ett fönster kommer att dyka upp. Ställ "Namn:" till Pinstripe.
  7. Stäng kritstreck dokumentet. Vi behöver inte det längre, och det finns ingen anledning att spara den.

Ändra glassbutton bakgrund

  1. Klicka på namnlisten i din GlassButton dokumentet för att aktivera det.
  2. Skift + F5 för att öppna Fill fönstret. Ändra "Användning:" till Pattern. Ändra "Eget mönster" till Pinstripe mönster som vi skapat. Klicka sedan på "OK". Ditt dokument bör nu se ut så här:

Göra knappformen

  1. Klicka och håll ner vänster musknapp över markeringsverktyget i verktygslådan. När det lilla fönstret öppnas upp bredvid den, bläddra till Eliptical Marquee Tool.
  2. Håll ned SHIFT-knappen, klicka på den övre vänstra sidan av dokumentet, och dra ut en elliptisk markeringsram tills muspekaren är nästan längst ned i högra hörnet av dokumentet. Vi vill att cirkeln ska vara lite mindre än dokumentet. Klicka på Skift + Ctrl + N för att skapa ett nytt lager. När det nya lagret öppnas, ändra "Namn:" till Button Shape.
  3. Ändra förgrundsfärgen till en fin blå. Klicka på färgrutan förgrundsfärg på verktygsfältet.
  4. När Färgväljaren öppnas, ändras "#" till 000066 (de är nollor).
  5. Klicka på "OK".
  6. Tillbaka på GlassButton dokumentet Skift + F5 för att öppna Fill fönstret. Ställ "Användning:" för forground Color. Klicka på "OK". Typ CTRL + A för att markera hela dokumentet. Typ CTRL + X för att klippa ut cirkeln, och sedan CTRL + V för att klistra in den igen. De klipper och klistrar centra cirkeln i ditt dokument. I paletten Lager, ändra "Blending Mode" till Linear Burn.
  7. Ditt dokument bör nu se ut så här: Om den inte gör det, gå tillbaka och kontrollera varje steg i instruktionerna.

Applicera distorsion till bakgrunden

  1. Om du någonsin har tittat igenom ett glas vatten, kommer du att märka att bilden kommer igenom är något förvrängd. Med vår knapp, är bakgrunden pinstripes visar genom, så vi måste snedvrida raderna lite.
  2. Håll ned CTRL-tangenten och klicka på knappen LAYER Shape i paletten Lager. Detta drar en markering runt vår knappformen. Klicka nu på bakgrundslagret i lagerpaletten. Klicka på "Filter"> "Förvrängningsfiltren"> "Spherize". Ställ "Belopp" till 66%.
  3. Klicka på "OK". Ditt dokument bör nu se ut så här:

Lägg en reflektion

  1. Kontrollera att det finns fortfarande ett val runt cirkeln. Skift + Ctrl + N för att skapa ett nytt lager. När det nya lagret öppnas, ändra "Namn:" till reflektion. Klicka på "OK". Ett nytt lager som heter Reflektion borde ha skapats emellan Bakgrund och Button formlager, när man tittar på lagren på paletten Lager. Vi behöver flytta det reflekterande skiktet till toppen av paletten. Klicka och håll ner vänster musknapp på det reflekterande skiktet, och dra den till överst på paletten.
  2. Typ D och därefter X. Detta ändrar och bakgrundsfärger till vit och svart. Typ G att byta till verktyget Övertoning. Ställ in gradient för förgrund Genomskinlig.
  3. Att se din spegelbild lagret är markerat, börja rita en gradient linje från toppen av cirkeln till botten av cirkeln. Håll ned SKIFT medan du gör detta för att säkerställa att du får en perfekt rak linje. När linjen har nått botten på den cirkel, släppa musknappen. Nu skriver CTRL + D för att avmarkera cirkeln. Ditt dokument bör nu se ut så här:
  4. Ändra storleken och formen på det reflekterande skiktet. Typ CTRL + T så att vi kan Omforma fritt reflektionerna lagret. Ta "torget" som löper längs den högra sidlinjen. Håll ned ALT, drar de fyrkantiga inåt tills Reflektion skiktet är ca 4/5ths den storlek det brukade vara. Nu ta tag i "torget" som löper längs den nedersta raden. Håll ned ALT, drar de fyrkantiga uppåt tills Relection skiktet är ca 3/5ths den storlek det brukade vara. Hit ENTER för att bekräfta omvandlingen. Ditt dokument bör nu se ut så här:
  5. Vi vill inte att reflektion vara rätt i mitten av knappen så där, så skriver V för att byta till verktyget Flytta. Klicka nu på reflektion och dra upp den tills dess nästan på toppen av cirkeln. I paletten Lager, ändra opaciteten till 85%.
  6. Nu dokumentet ska se ut så här:
  7. Du kan sluta här om du vill. Men låter lägga till en Google märke stil kontroll i mitten av knappen.

Lägga till en Google märke stil check

  1. Klicka på knappen formlagret i paletten Lager. Nu typ Skift + Ctrl + N för att skapa ett nytt lager ovanför knappen Formlager. När det nya lagret öppnas, ändra "Namn:" till bock. Nu måste vi öppna Custom Shape verktyget. I verktygslådan, klicka och håll ner på Rectangle Tool tills ett fönster öppnas upp bredvid den. Välj Custom Shape från listan.
  2. Från det övre verktygsfältet, ändra form till markeringen formen.
  3. Klicka på förgrundsfärgen färgrutan i verktygslådan. När Färgväljaren öppnas, ändras "#" till 932.200. Klicka på "OK".
  4. På bocken skiktet, rita en stor bock som är lite mindre än knappen. Detta gör du genom att klicka nära botten av cirkeln, och dra ut en form.
  5. Klicka på "Layer"> "Rastrera"> "Shape". Nu ändra opaciteten för bocken lagret till 80%. Ditt dokument bör nu se ut så här:
  6. Håll ned CTRL-knappen, klicka på lagret bock i lagerpaletten. Typ V för att byta till verktyget Flytta. Håll ner ALT-tangenten, och slå tangentbord nedåtpilen 8 gånger. Nu ändra förgrundsfärgen till A72903. Skift + F5 för att öppna Fill fönstret. Se "Användning:" är satt till förgrundsfärg. Klicka på "OK". Typ CTRL + D för att avmarkera lagret.
  7. På paletten Lager, högerklicka på lagret bock, och välj Blending Options. Den Layer Style öppnas. Klicka på dropshadow. Ändra "Angle:" till 90, och "Avstånd:" till 15.
  8. Klicka på "OK".

Några sista handen

  1. Högerklicka på Button Shape lagret och plocka Blandningsalternativ. När Layer Style öppnas, klicka på Inre skugga. Ändra "Blend Mode:" Multiplicera "Opacitet:" till 75%, "Angle:" till 90 "Avstånd:" till 5, "Choke:" till 0, och "Storlek:" 75. Klicka på Skugga. Lämna alla inställningar till vad de är. Klicka på "OK".
  2. Och det är det, du är klar! Din slutliga bilden ska se ut så här:

Tips

  • Du kan leka med Layer Style fönstret för att få några intressanta resultat.
  • Du kan klicka på "Bild"> "Image Size" för att ändra storlek på bilden. Om du skulle använda något sånt här på en hemsida, skulle du definitivt något mindre.
  • Du kan lägga till text till knappen med hjälp av textverktyget.

Saker du behöver

  • Adobe Photoshop 7 eller 8 (CS)