Share
Photoshop CS6 är fylld med nya funktioner som hjälper dig att skapa bättre gränssnittsdesign. I den här handledningen kommer vi att använda Photoshops nya vektorredigerings- och strokefunktioner för att skapa ett gränssnitt för administratörens dashboard. Vi kommer också att dra nytta av Photoshops nya snap-till-pixelgrid-funktion för att skapa skarp och ren webbgrafik. Låt oss börja!
Följande tillgångar användes under produktionen av denna handledning.
Vi ska använda 960 rutnät med 12 kolumnlayout från 960.gs som ram för vår design. Ladda ner mallfilen i zip-format och öppna sedan 12 kolumner. Klicka på ögonikonen på framsidan av lagret 12 Col Grid för att gömma det.
Klicka på svartvitt cirkelikon för att lägga till nytt justeringslager. Välj Solid Color och välj vit i nästa dialogruta.
Skapa nytt lager. Klicka på Redigera> Fyll och välj Använd: Mönster. Använd diagonalt linjemönster från PSDfreemium. Eftersom det här är CS6, låt oss försöka använda den senaste funktionen. Aktivera Scripted Patterns och välj Symetry Fill.
Tona ner lagret Opacitet till 4%.
Vi vill vara säker på att alla lagerområde organiseras noggrant. Så, låt oss börja med att gruppera dem i en logisk ordning. Välj båda lagren - bakgrund och mönster - och klicka sedan på Command / Ctrl + G för att lägga dem i grupplagret.
Vi behöver inte bakgrundsskikt, så ta bort det genom att dra det till delete icon.
Välj grupplager. Hit F2 och ändra sedan dess namn. Klicka på fliken för att automatiskt redigera nästa lager. Byt namn och upprepa det här till nästa lager.
Aktivera rundad rektangelverktyg. Rita en rundad rektangelform med radie 10 px och bredd 2 kolumner. Placera den längst upp till höger om duken. I alternativfältet, sätt Fill färg till # f16424 och Stroke to None.
Dubbelklicka lagerformat i dialogrutan Lagerpanel till dialogrutan Öppna lagerformat. Aktivera överlagring av mönster. Välj pixelmönster från PSDfreemium. Minska dess skala och opacitet för att ge det ett naturligt tygstruktur.
Gör ett nytt lager ovanför formen. Aktivera mjuk borste och färgskugga på sin övre sida.
Alt - klicka mellan logotypen och dess skugga. Detta kommer att konvertera skiktet till en klippmask och placera skuggan inuti logotypen.
Upprepa processen några gånger. Du kan lägga till flera lager om det behövs. Målarhöjd på dess nedre sida.
Gör ett nytt lager under logotypen. Kommando / Ctrl - klicka på form för att göra nytt urval baserat på dess form. Fyll markeringen med svart.
Applicera Gaussian Blur filter. Klicka på Filter> Blur> Gaussian Blur.
Hit Command / Ctrl + T för att utföra transformation. Högerklicka och välj Warp. Omvandlingsgränsen är uppdelad i 3 x 3 lådor. Dra ner den nedre rutan nedåt. Tryck Enter för att acceptera transformationsresultatet.
Rita mindre rundad rektangelform. Från alternativfältet ställer du på Fill to None och Stroke to white med storlek 1 pt.
Öppna streckalternativen och välj sedan förinställd stämpel. Klicka på Fler alternativ för att redigera inställningarna för streckade linjer.
Dubbelklicka på lagret på panelen Lager för att öppna dialogrutan Lagstil. Aktivera Drop Shadow, sätt sin vinkel till 90 °, aktivera Använd Global Light, sätt dess storlek till 0 px och avstånd 1 px.
Aktivera rektangelverktyget och klicka en gång på duken. I dialogrutan ställer du in storleken till 6 x 30 px. Klicka på OK för att börja göra formen.
Klicka på fältet Fyll i alternativfältet. Välj Gradient och ställ in färgen från #dfdfdf till #ffffff.
Rita en annan rektangelväg inuti logotypen. Dubbelklicka på dess lager i panelen Lager och aktivera sedan Drop Shadow.
Lägg till Drop Shadow till lagformen.
Nedan är resultatet till större förstoring. Som du kan se att vår vektorform hittills hittills är skarp. Det finns ingen halv pixel! Detta beror på funktionen vektorflik i Photoshop CS6. Du kan inaktivera den här funktionen om du vill från dialogrutan Inställningar - fortfarande har jag ingen aning om varför någon skulle göra det.
Lägg till text inuti logotypen. Vi kan lägga till kontrast på texten genom att helt enkelt ändra en del av karaktären till fetstil.
Lägg till en annan Drop Shadow på texten.
Aktivera rektangelverktyget och dra sedan en rektangel som huvudinnehållsbakgrunden. Ställ in bredden till 800 px, Fyll: #eeeeee och Stroke: #cccccc, Storlek: 1 pt.
Lägg till yttre glöd med följande inställningar.
Lägg till en triangelform och en rundad rektangel. Ställ in deras sökvägsläge för att kombinera former.
Lägg till text på fliken för att lägga till titeln. Lägg till liten statistikikon som är gjord av några små rektanglar.
Rita en vit rektangelform som en bas för vårt huvuddiagram. Ställ in bredden i 8 kolumner. Var noga med att ställa in Stroke to None. Lägg till Layer Style Outer Glow.
Hit Command / Ctrl + J för att duplicera form. Lägg till en stor rektangelform på dess nedre del och sätt dess läge till Subtraher Front. Lägg till graderingsöverläggning.
Rita en rundad rektangel. Ställ Fill till Vit utan stroke. Använd samma yttre glöd och placera den bakom tidigare form.
Gör ett nytt lager mellan de två formerna. Gör ett elliptiskt urval och fyll sedan det med svart. Avmarkera (Command / Ctrl + D) och mjukna sedan genom att lägga till Gaussian Blur.
Aktivera typverktyget. Lägg till sektionstitel.
Aktivera linjverktyget och dra sedan en 1 px linje. Ställ in sin slagfärg till # e4e4ee4.
Här är skillnaden före och efter att du lägger till linjen.
Rita en rektangel. Ställ dess Fill till None och Stroke till #cccccc.
Välj streckstegstyp i alternativfältet. Klicka på Fler alternativ och ställ in Dash and Gap till 4 och 2.
Rita 1 px horisontell linje med Stroke #cccccc. Välj streckad stroke.
Aktivera sökvalsverktyget och välj linjebana som vi just gjort tidigare. Hit Command / Ctrl + Alt + T för att duplicera och transformera det. Hit Shift + Högerpil två gånger för att flytta den 20 px till höger. Upprepa omvandlings- och dubbelarbete genom att slå Command / Ctrl + Shift + Alt + T.
Fortsätt upprepa processen tills rektangeln är fylld med kolumner.
Minska lagerets opacitet till 30%.
Upprepa tidigare steg men den här gången med horisontella linjer.
Nedan är resultatet. Nu har vi subtilt rutnät på statistikbakgrunden.
Lägg till värden på både axel, x och y.
Aktivera linjeværktyget och dra en 1 px linje på rutnätet. Ställ in sin slagfärg till # f16424.
Skift - dra för att lägga till mer rad. Fortsätt lägga till fler rader tills vi har ett komplett linjediagram.
Rita en liten cirkelform och placera den rätt på linjekartan. Ställ in fyllningen till vitt och samma slag till linjens fyllfärg.
Dubbelklicka på cirkelformlagret och aktivera Lagstämpel. Ställ in färgen till Vit och Placera till Outside.
Välj cirkelväg med hjälp av sökvägsverktyget och sedan Alt - dra det för att duplicera det.
Använd samma steg för att rita ett annat linjediagram. Den här gången använder du annan färg och ställer in streckalternativen för att stryka.
Som i föregående raddiagram, lägg till cirklar på varje linjesegment.
På toppen av diagrammet lägger du till diagramlegenden. Du lägger helt enkelt till en kort rad med samma egenskaper som linjediagrammet och lägger till en kort beskrivning.
Rita en rundad rektangel. Ange dess Fill till #eeeeee och Stroke till #cbcbcb.
Lägg till lagskiktets inre skugga och graderingsöverlägg.
Rita en rektangelform på mitten av den avrundade rektangelformen. Du kan använda vilken färg som helst för dess fyllning. Ställ in sitt slag mot Ingen. Minska dess fyllning till 0%. Lägg till överlagring av överlag för överlag i lagstyp.
Rita 1 px linje med färg #cbcbcb på vänster och höger sida.
Lägg till tidsintervallval. Du kan se att texten med olika bakgrund är nu i aktivt skick.
Låt oss använda teckenformat för att definiera vårt standardtecken. Den här funktionen är en förenklad version av karaktärsstilen i Adobe InDesign. Om du ofta använder InDesign kommer du genast att känna igen den.
Öppna teckenformatpanelen och klicka sedan på ny ikon. I dialogrutan anger du typsnittstypen till Arial Regular, Size till 12 pt och Color till # 767676. Vi kommer att använda denna karaktärsstil i det mesta av texten. Det är därför som vi också kommer att namnge det som standard karaktärsstil.
Låt oss tillämpa denna karaktärsstil på texten. Aktivera Typverktyg, välj texten och klicka sedan på teckenstilen för att tillämpa den.
Vad händer om vi vill spara egenskaper från befintlig text som teckenformat? Låt oss göra detta till värden på grafaxeln. Skapa nya teckenstilar. Välj texten och klicka på Redefine icon.
Dubbelklicka teckenstorlek för att redigera dess Alternativ. Byt namn. Applicera denna karaktärsform till allt värde på båda axlarna.
Det fina med Character Style (och Paragraph Style too) är att du enkelt kan redigera den för att redigera varje text som använder den stilen. Här är ett exempel. Låt oss redigera grafaxeln - en teckenstil som vi gjorde tidigare för varje värde på båda axlarna. Dubbelklicka på det och ändra typsnitt och storlek.
Aktivera rundad rektangelverktyg. Rita en rundad rektangel och lägg till en liten triangel på vänster sida. Ange dess Fyll: # f1f2f2 och Stroke: None.
Dubbelklicka på lagret i panelen Lager och lägg till svart slag. Kanske frågar du, varför använder vi inte Stroke-alternativet direkt från sin egendom? Svaret är i Layer Style Stroke du kan ändra Stroke's Opacity. Det är något du fortfarande inte kan göra på Photoshop CS6. Lägg också till yttre glöd och övertonning.
Duplikera form och ändra dess Fyllfärg till # f16424. Ta bort dess lagstil. Lägg till rektangelväggen på dess nedre del och ställ in dess läge för att subtrahera Front Shape.
Lägg till lagerstroke och gradöverlagring till formen.
Rita 1 px vertikal linje. Ställ in fyllnadsfärgen till svart. Lägg till lagstilar slag. Minska lagerens opacitet till 8%.
Lägg till liten titel på formen. Spara teckenegenskapen som teckenformat. Lägg till Layer Style Drop Shadow.
Lägg till en annan titel på andra sidan. Använd samma karaktärsstilar och samma dropskugga.
Lägg till lite procent i den. Det är alltid en bra idé att spara det som teckenstorlekar. På så sätt kan du enkelt ändra sitt utseende från panelen Teckenstilar.
Aktivera polygonverktyget och sätt sidan till 3 i alternativfältet. Rita en liten triangel som pekar uppåt. Ange dess Fyll: # c1c1c1 och Stroke: None.
Lägg till Layer Style Inner Shadow.
Lägg till en liten cirkel och en annan triangelform - pekar nedåt denna gång. Använd samma färg och lagstil.
Lägg till procenttal. Som vanligt, se till att spara dess karaktärsstil.
Uppgifterna är positiva. Så låt oss betona det genom att aktivera upp pilen. Ändra sin form Fyll färg till # 4ff25d.
Kopiera numret för en annan data.
Rita liknande avsnitt för mindre graf. Du kan använda samma teknik som förklaras ovan. Se till att du använder mindre textstorlek på titeln.
Rita en blå 1 px linje inuti gallret. Ställ in strokealternativen för att bli streckad.
Som i huvudgrafen lägger du till cirkel på varje punkt.
Aktivera pennverktyget. Rita en ny form som täcker linjen som förbinder den med x-axeln. Använd samma färg som linjen. Placera formen bakom cirklarna.
Lägg till gratis pixelmönster från PSDfreemium.
Tona ner opaciteten till 50%.
Lägg till procent på sidan. I denna mindre graf vill vi också ha mindre textprocentstorlek.
Lägg till en annan graf.
För närvarande arbetar vi med statistikfliken. Låt oss lägga till en annan flik och lägga dem i inaktivt skick. Dubbla statistikflik bakgrund som vi gjorde i steg 25 - 27. Det kommer att vara till hjälp om du gömmer statistikfliken efteråt. Ändra dess Fyll och Stroke färg till # c1c1c1. Ta bort lilla rektangeln på vänster sida. Flytta topprundad rektangel till höger.
Lägg till en enkel ikon gjord av en cirkel utan fyllning och slag: # 646464 med en jag inuti den.
Ta tillbaka fliken Statistik. Rita en annan inaktiv flik om det behövs.
Aktivera rektangelverktyget och dra en rektangel bakom huvudfliken. Ange dess Fill till #eeeeee och Stroke till #cbcbcb.
Rita en rundad rektangel. Ställ in fyllningen till en gradient från # d6d6d6d till # f3f3f3 och Stroke # c1c1c1. Detta kommer att vara bakgrund för en inaktiv meny.
Kopiera den runda rektangeln. Ändra sin färg till Fyll gradient från # ef6526 till fa834d och Stroke: # f16424. Den här används för aktiv meny. Se till att du placerar den under liten triangel på fliken Statistik.
Kopiera den första rundade rektangeln för att göra mer bakgrund för inaktiva menyer.
Lägg till text på knappen. Dubbelklicka på dess lager för att lägga till Layer Style Drop Shadow. För inaktiv meny, använd mörk text och ljus drop skugga.
För aktiv meny, använd vit text och mörk Drop Shadow.
Rita en rundad rektangel. Ingen anledning att oroa sig för sin fyllning eller stroke.
För dess Fyll, låt oss använda samma gradient från föregående sidomenynsmeny. Aktivera också sökvägen och välj formen. Högerklicka och välj Kopiera fyll.
Återgå till den nya formen, högerklicka på den och välj Klistra in.
Öppna Fyll alternativ från alternativfältet och klicka på ikonen under lutningsförhandsgranskningen för att vända dess gradientriktning.
Upprepa samma process för att kopiera Stroke-inställningen.
Lägg till inre skugga med följande inställningar.
Aktivera typverktyget och den vita knappen. Lägg till Layer Style Drop Shadow.
Lägg till en liten triangel som pekar nedåt. Fyll: #eeeeee och Stroke: None. Lägg till samma Drop Shadow som knappetiketten.
Lägg till en 1 px linjeavskiljande etikett och pil. Ställ in färgen till # b04312 och lägg sedan till en ljus Drop Shadow med vinkel 180 °.
Låt oss lägga till en mini förstoringsikon på knappen. Börja med att rita en cirkelväg med storlek 10 x 10 px. Ställ in sitt slag i vitt, med storlek: 2 pt, och fyll på till Ingen.
Lägg till en 2-punkts linje bredvid en 45 ° vinkel.
Igen, lägg till samma Drop Shadow till förstoringsikonet.
Rita en rundad rektangel bredvid knappen. Använd Fyll gradient från #ededed till white och 1 pt Stroke # c1c1c1.
Lägg till liten text inuti formen. Vi vill att den ska vara subtil. Så, vi använder en mycket ljusgrå (# b0b0b0).
Låt oss lägga till en annan miniikon. Börja med att rita en liten cirkelform och lägg sedan till ett plustecken gjord av två runda rektanglar. Ställ in plusteckenläge för att subtrahera Front Shape. Välj teckenformen med hjälp av sökvalsverktyget och rotera det 45 °
Till sist! Vi har ritat ett vektorgrafik helt i Photoshop. Detta var mycket svårt att göra i tidigare versioner av Photoshop, men som du kan se, hjälper Photoshop CS6 verkligen till att effektivisera vårt arbetsflöde. Jag hoppas att du njöt av dessa nya tekniker och denna handledning. Tack för att du läste.
Accentsconagua