Share
Att ställa in ett baslinjenät för dina Photoshop-baserade mönster är ett oumbärligt första steg i alla nya webbsidor. Ett baslinjenätverk kommer att skapa jämn avstånd mellan dina sidelement, vilket skapar en harmonisk rytm över hela sidan. Dessutom kan man under utvecklingsfasen använda en CSS-ram med ett kompatibelt grunnlinje att översätta design till kod mycket lättare.
I en ny handledning om Webdesign Tuts + visade Amir oss hur man skapar ett Flexible Grid-script för Photoshop för att ta det grunt arbetet med att ställa in dina guider för din layout. På samma sätt kommer vi att använda en Photoshop-tillägg som gör allt tungt för oss - ett bra alternativ, särskilt om du skapar ditt eget skript är lite för ambitiöst för dina behov.
Jag tar dig igenom varje steg som krävs för att ställa in både ett horisontellt och vertikalt grunnlinje i Photoshop som är flexibelt, anpassningsbart och dött lätt att klara på mindre än tio minuter.
I dagens handledning kommer jag att använda en gratis förlängning från Cameron McEfee som heter - lämpligt - GuideGuide. Gå vidare till http://www.guideguide.me för att ladda ner plugin.
Välj den version som matchar din Photoshop (CS4 +) och spara den till en lämplig plats på hårddisken.
Notera: OSX-användare med Photoshop CS5 måste installera Adobe Extension Manager Patch.
Se till att din Photoshop är stängd, öppna din Adobe Extension Manager.
Klicka på länken "Installera" i toppmenyn, navigera till din extraherade GuideGuide-tillägg och klicka på "Öppna". Efter att ha accepterat villkoren är GuideGuide redo att komma åt nästa gång när du öppnar Photoshop.
Avbryt Photoshop, och välj "Utvidgningar → GuideGuide" i "Window" -filmenyn..
GuideGuide-tillägget visas nu i din arbetsytan. Oroa dig inte för mycket om inmatningsfältet än, vi kommer snart att gräva in i tillägget.
Vi kommer att hålla saker verkligen enkla idag och kommer att replikera 960px rutnätet som används av 960 Grid System (även om du är välkommen att närma sig grids med vilken mätning du finner enklast). Om vi går över till webbplatsen, läggs det galler som vi ska kopiera ut på vanlig engelska på hemsidan:
För att omformulera detta, kommer vi att skapa idag en 960px bred duk med 12 lika stora och lika stora kolumner. Med en 10px-marginal på vardera sidan av duken kommer vi att vara kvar med en 20px rännan mellan var och en av kolumnerna.
Innan vi fortsätter vet jag vad du kanske säger: "Varför inte bara ladda ner Photoshop-mallen från webbplatsen?". Vad jag ska visa dig hur man skapar idag är helt anpassningsbar för några projekt och något CSS-ramverk, oavsett antal kolumner, dukbredd eller takrännor. Vi använder bara ett enkelt exempel för att demonstrera teknikerna.
I Photoshop väljer du Arkiv → Nytt och skapar ett nytt dokument 960px vid 1050px högt.
Se till att dina linjaler visas (Visa → Linjaler) dra ut två guider till kanvasens kanter.
När du öppnar GuideGuide-tillägget märker du ett antal inmatningsfält och menyalternativ som gör det möjligt för oss att definiera vårt horisontella grunnlinje enligt följande (du kan också sväva över varje ikon för en beskrivning.)
Ange värdena enligt följande och klicka på GuideGuide-knappen:
När du har lämnat in värdena kommer Photoshop automatiskt att göra alla guiderna för rutnätet:
Notera: Använda GuideGuide utan ett urval gör automatiskt guider över hela duken. Om du bara ville ha guider över en del av dokumentet (till exempel en navigeringsfält), skapa ett urval med markeringsverktyget (M) innan du använder förlängningen.
Som det står har vi ett perfekt användbart horisontellt grunnlinje. För att göra det enklare för oss själva, ska vi nu lägga till en visuell hjälpare för att berätta vad en kolumn är och vad en rännan är - något som kan vara svårt att skilja när de zoomas in i dokumentet.
Skapa ett nytt lager (Ctrl + Shift + N) och rita ut ett val bredden och höjden på den första kolumnen. Brådskande Ctrl + BkSpace, fyll ut valet med # ff0084. Du är också välkommen att använda formverktyget för detta, men se till att pixlarna är exakt valda.
Skapa sedan 12 totala versioner av lagret genom att trycka på Ctrl + J 11 gånger. Markera det översta lagret, dra kolumnen till tolfte kolumnpositionen med Move-verktyget (V).
Välj sedan alla tolv lager (Ctrl + Click) och fördela kolumnerna genom att välja Distribuera horisontella centra ikonen under Move-verktyget (V) (Alternativt, Layer → Anpassa → Horisontella centra)
Slutligen rengör du dokumentet genom att välja alla kolumnager och slå samman dem (Ctrl + E). Byt namn på lagret "Horisontell baslinje" och ring upp opaciteten ner till 10%.
Nu när vi har etablerat en horisontell grundlinje är det dags att flytta på vår vertikala baslinje. Vi kommer inte att dyka in i teorin om vertikala baslinjer idag, men om du vill lära dig mer kan du läsa om Ställa in webbtyp till en baslinje.
Idag ställer vi in vår vertikala baslinje baserat på en kroppstypstorlek på 14px. För att upprätta en 1,5-linjehöjd och för att ge oss mycket flexibilitet kommer vår baslinje att vara 7px (dvs tre baslinjeenheter lika med 21px).
Jag ska visa dig två metoder för att uppnå detta - gärna använda vilken som helst som talar till dig och ditt arbetsflöde!
För att börja använda vi GuideGuide en gång till. Öppna förlängningen, ange följande värde och tryck på GuideGuide-knappen:
När du har skickat in kommer Photoshop att göra alla guider för vår vertikala baslinje:
Vid den här tiden kommer den mer snabba läsaren att ha insett att denna metod endast är möjlig eftersom vi skapade vår dokumenthöjd i en perfekt multipel av 7px (1050px). Om vi inte tog det här första steget skulle GuideGuide göra så många 7px-guider som möjligt och lämna resten i botten av dokumentet.
Och i det enkla steget har vi skapat en perfekt funktionell vertikal baslinje. Det enda problemet är att det här dokumentet nu är mycket upptaget. Om du är vana med att använda guider i dina mönster, kan den här metoden snabbt bli förvirrande, rörigt och oanvändbart.
Om den här metoden inte kittlar din fantasi kan du ta bort de horisontella guiderna (Ctrl + Alt + Z) och skapa en alternativ baslinje med ett pixelnät.
För vår alternativa metod, öppna Photoshops rutnätpreferenspanel (Redigera → Inställningar → Grids, Guides and Slices). Ange följande värden för pixelnätet:
Nu, när du återvänder till ditt dokument, kan du växla gridens synlighet till och från (Ctrl + '), där varje horisontell linje i gallret etablerar din vertikala baslinje - som du kan se här med en 600% zoom applicerad.
Det stora med den här metoden är att vi har skiljat de horisontella och vertikala baslinjerna, så att du enkelt kan växla sin synlighet beroende på vilken del av designen du arbetar med.
Oavsett vilken metod du föredrar (guider eller gallerlager) är det sista steget att skapa en visuell hjälpare för vår vertikala baslinje på samma sätt som vi gjorde för vår horisontella baslinje (men vi ska använda en annan metod).
Skapa ett nytt dokument 1px x 7px med en transparent bakgrund:
Med hjälp av Markeringsverktyget (M) ställer du in Style till Fixad storlek, och måtten till 1px x 1px. Skapa ett urval längst ner i dokumentet (du vill zooma in så långt du kan gå här (Z)) och fylla den med # 00ff12 (Ctrl + Bkspace).
Definiera därefter detta dokument som ett mönster (Redigera → Definiera mönster). Namnge det '7px vertikal baseline'.
Gå tillbaka till ditt huvuddokument. Skapa ett nytt lager (Ctrl + Shift + N), välj hela duken (Ctrl + A) och tryck på Ctrl + Bkspace att fylla urvalet. Från rullgardinsmenyerna, välj "Mönster" för fylltyp och din nyskapade "7px baslinje" för mönstret.
Byt namn på skiktet till "Vertikal baslinje" och ring upp opaciteten ner till cirka 30%.
Även om element inte kommer att snäppa till någon av de visuella hjälparna, vilken metod du använde för den vertikala baslinjen (guider eller gallerlager) i de föregående stegen kommer ditt nyskapade visuella lager att vara perfekt anpassat till baslinjen - vilket gör det enkelt att snappa för hela designen.
Och med det har du skapat ett perfekt perfekt baslinje med praktiska visuella lager för ditt nästa projekt. Det enda som kvarstår är att ge din design lite andningsrum.
Öppna din Canvas Size-dialogruta (Bild → Kanfastryck) och ändra bredden till 1400px.
Slutresultatet:
Om du har gjort det hela, bra jobb! Du har nu alla tekniker som krävs för att skapa egna anpassade grunnlinjer i Photoshop.
Det enda rådet jag erbjuder är att GuideGuide gör ett bra jobb med att hantera all nödvändig matematik, men måste arbeta inom Photoshops begränsningar, nämligen att guider endast kan placeras på en full pixel. Om ditt rutnät kräver mätningar under pixlar, kommer guider att visas så nära som möjligt, med deras positioner avrundade upp till närmaste fullständiga pixel. Med det i åtanke kan en liten planering i början undvika mycket enpixel huvudvärk senare i projektet.
Som en delningsnot kan du använda GuideGuide för mycket mer än bara baslinjer. Experimentera med att lägga ut gallret för alla typer av designkomponenter från bildramar till menyer!
Tack igen, och glöm inte att prenumerera och lämna en kommentar nedan - vi skulle gärna höra dina tankar!
Accentsconagua