Share
Låt oss bygga oss ett moody UI Element. Vi använder Photoshop för att utforska subtila texturer och dra ihop en snygg volymring. Nu går vi!
Öppna ett nytt RGB-dokument 800x600px i storlek och 72 dpi upplösning.
Välj en moody mörkblå färg för bakgrunden (i det här fallet är färgkoden # 1b1c20) och använd sedan verktygsfältet för att fylla bakgrunden.
Applicera lite ljud i bakgrunden, för att ge den en mjuk konsistens (1% Gaussian ljud och monokromatisk).
Kontrollera nu källkällans nedladdning - du hittar en mönsterfil där du måste dubbelklicka för att installera i Photoshop. Applicera mönstret på ett nytt lager och fyll hela lagret med mönstret.
Vrid mönstret överlagring opacitet till 15-20% beroende på din smak, för att sluta med något så här:
Skapa en ny grupp med namnet "knappen" och lägg till en cirkelform (gör detta genom att välja elliptisk formverktyg och håll nedskiftet för att göra det perfekt cirkulärt). Ge den en levande färg så att du kan se skiktet tydligt längre ner längs linjen?
Ändra skiktets fyllnadsdensitet till 0% och använd en droppskugga med följande egenskaper:
Applicera sedan en liten inre skugga för att få den att se indented.
Därefter appliceras en inre glöd så att basen ser full ut.
För nästa steg, gör en annan cirkel och ge den en vit färg, det här är vårt UI-elements grundläggande form och det kommer att fungera för ett par detaljer, så gör en storlek du är verkligen nöjd med! Namn det "button_base" eller något liknande.
Applicera en vinklad gradientöverlägg till den, börja med vit och lägg till två stopp med en ljusgrå färg. Använd de två vita stoppen i mitten för att spela med skärmens skärp och, när du arbetar, förhandsgranska elementet för att se hur det ser ut.
Applicera en fas och prägla basen, så att den ser lite 3d-ish ut.
Nu för detaljering. Gör en kopia av basskiktet och sätt det under knappens bas. Vrid nu fyllningen till 0% för att bara se de filter du tillämpar för det laget, och inte innehållet. Skapa en droppskugga med följande inställningar:
För att få knappen att dyka upp lite mer, kopiera knappbasen igen, placera den under knappens bas och över skuggningen. Ge den en mörk färgöverlägg så att den ser fantastisk ut.
Gör nu en annan kopia av knappens baslager, men omvandla den till en större storlek. Lägg det ovanpå knappens baslager och rasterisera det!
Med det gjort, gå till filterpanelen och ge det maximalt ljudfilter (så du tror att du tittar på en trasig TV).
Använd sedan ett Radial Blur-filter och ställ det till det maximala värdet för att få en bra effekt.
Du bör sänka opaciteten för detta lager till cirka 20-40% och sedan centrera med knappen med knappen. När du har den i mitten, välj knapplagret och välj> invers. Välj sedan skrapskiktet och tryck på delete. Du borde vara kvar med en fin repad effekt på knappen.
För att kontrollera att vi gör allt bra, borde du ha något liknande det här:
Gör en liten cirkel för hakan (eller indikatorn) på knappen.
Ge den en vit droppe skugga för att ge det ett präglat utseende.
Ge skåpet en liten inre skugga.
Och äntligen få det till liv med en färg du väljer.
Du borde ha något så här:
Låt oss nu fastna i de sista små detaljerna! Gör en liten rektangel för hakarna i knappens botten.
Vänd fyllningen till 0% igen, och ge den en vit droppskugga.
Det behöver lite skuggning på insidan också, så ge den en liten inre skugga.
Kopiera nu och vänd det till andra sidan.
Lägg ditt textinnehåll där med ett typsnitt som du väljer (jag valde Myriad Pro).
Applicera en droppskugga på texten, så att den ser indragna ut.
Applicera sedan en liten inre skugga.
Detta borde vara det du ser i din fil:
Och det här är vårt sista UI-element, en enkel volymratt för att pumpa upp musiken!
Jag hoppas att du gillade den här handledningen, det kommer att bli den första av många, så gärna följa med mig på twitter eller prenumerera på min hemsida nyhetsbrev. Lycklig design och håll dig cool!
Accentsconagua