Share
Het instellen van een basislijnraster voor uw op Photoshop gebaseerde ontwerpen is een onmisbare eerste stap in elk nieuw websiteproject. Een basislijnraster zorgt voor een consistente spatiëring tussen uw pagina-elementen en creëert een harmonieus ritme op de hele pagina. Bovendien kan tijdens de ontwikkelingsfase het gebruik van een CSS-raamwerk met een compatibel basislijnraster het vertalen van ontwerpen in code veel eenvoudiger maken.
In een recente tutorial over Webdesign Tuts + liet Amir ons zien hoe je een Flexible Grid-script voor Photoshop kunt maken om het gromwerk uit je gidsen voor je lay-out te halen. Op dezelfde manier gaan we een Photoshop-extensie gebruiken die al het zware werk voor ons doet - een geweldige optie, vooral als het maken van je eigen aangepaste script iets te ambitieus is voor jouw behoeften.
Ik begeleid je bij elke vereiste stap om zowel een horizontaal als verticaal basislijnraster in Photoshop in te stellen, dat flexibel, aanpasbaar en doodeenvoudig is om in minder dan tien minuten te voltooien..
In de tutorial van vandaag gebruik ik een gratis extensie van Cameron McEfee, toepasselijk genoemd - GuideGuide. Ga naar http://www.guideguide.me om de plug-in te downloaden.
Selecteer de versie die overeenkomt met uw Photoshop (CS4 +) en sla deze op naar een geschikte locatie op uw harde schijf.
Notitie: OSX-gebruikers met Photoshop CS5 moeten de Adobe Extension Manager-patch installeren.
Zorg ervoor dat uw Photoshop gesloten is en open uw Adobe Extension Manager.
Door te klikken op de koppeling 'Installeren' in het bovenste menu, navigeert u naar uw uitgepakte GuideGuide-extensie en klikt u op 'Openen'. Nadat u de algemene voorwaarden hebt geaccepteerd, is GuideGuide gereed voor toegang tot de volgende keer dat u Photoshop opent.
Start Photoshop op en selecteer in het bestandsmenu 'Venster' de optie 'Extensies → GuideGuide'.
De Guide Guide-extensie verschijnt nu in uw werkruimte. Maak je nog geen zorgen om het invoerveld, we zullen binnenkort in de extensie graven.
We houden de dingen heel simpel vandaag en zullen het 960px raster dat wordt gebruikt door 960 Grid System repliceren (hoewel je graag roosters benadert met de metingen die je het gemakkelijkst vindt). Als we naar de site gaan, wordt het raster dat we zullen repliceren op de homepage weergegeven in gewoon Engels:
Om dit opnieuw te formuleren, zullen we vandaag een 960px breed canvas maken met 12 kolommen met gelijke tussenafstanden en even grote kolommen. Met een marge van 10 px aan beide zijden van het canvas, blijven we achter met een 20 px-goot tussen elk van de kolommen.
Voordat we verder gaan, weet ik wat je misschien zegt: "Waarom download je niet gewoon de Photoshop-sjabloon van de site?". Wat ik u laat zien hoe u vandaag kunt creëren, is volledig aanpasbaar ieder project en elk CSS-raamwerk, ongeacht het aantal kolommen, canvasbreedte of dakgoten. We gebruiken slechts een eenvoudig voorbeeld om de technieken te demonstreren.
Selecteer in Photoshop Bestand → Nieuw en maak een nieuw document 960 px breed bij 1050 px hoog.
Zorg ervoor dat uw linialen worden weergegeven (Beeld → Linialen) en sleep twee hulplijnen naar de randen van het canvas.
Als u de GuideGuide-extensie opent, ziet u een aantal invoervelden en menu-items waarmee u ons horizontale basislijnraster als volgt kunt definiëren (u kunt ook met de muis over elk pictogram gaan voor een beschrijving).
Voer de waarden als volgt in en klik op de GuideGuide-knop:
Nadat u de waarden heeft verzonden, worden in Photoshop automatisch alle handleidingen voor het raster weergegeven:
Notitie: Als u GuideGuide gebruikt zonder een selectie, worden er automatisch hulplijnen over het hele canvas weergegeven. Als u alleen handleidingen over een deel van het document wilt hebben (bijvoorbeeld een navigatiebalk), maakt u een selectie met het selectiekader (M) voordat u de extensie gebruikt.
In de huidige vorm hebben we een perfect bruikbaar horizontaal basislijnraster. Om dingen gemakkelijker te maken voor onszelf, gaan we nu een visuele helper toevoegen om ons te laten weten wat een kolom is en wat een rugmarge is - iets dat lastig kan zijn om te differentiëren wanneer het wordt ingezoomd op het document.
Maak een nieuwe laag (Ctrl + Shift + N) en trek een selectie uit de breedte en hoogte van de eerste kolom. persing Ctrl + BkSpace, vul de selectie met # ff0084. U bent ook welkom om het vormgereedschap hiervoor te gebruiken, maar zorg ervoor dat uw pixels precies zijn geselecteerd.
Maak vervolgens 12 totale versies van de laag door op te drukken Ctrl + J 11 keer. Selecteer de bovenste laag en sleep de kolom naar de twaalfde kolompositie met het gereedschap Verplaatsen (V).
Selecteer vervolgens alle twaalf lagen (Ctrl + klik) en verdeel de kolommen door de. te selecteren Distribueer horizontale centra pictogram onder het gereedschap Verplaatsen (V) (als alternatief, Laag → Uitlijnen → Horizontale centra)
Maak tenslotte het document schoon door alle kolomlagen te selecteren en samen te voegen (Ctrl + E). Hernoem de laag 'Horizontale basislijn' en zet de dekking op 10%.
Nu we een horizontale basislijn hebben vastgesteld, is het tijd om naar onze verticale basislijn te gaan. We gaan vandaag niet in op de theorie van verticale basislijnen, maar als je meer wilt weten, kun je lezen over het instellen van webtype op een basislijnraster.
Vandaag zullen we onze verticale basislijn bepalen op basis van een lettergrootte van 14px. Om een hoogte van 1,5 lijn vast te stellen en ons voldoende flexibiliteit te geven, zal onze basislijn 7px zijn (d.w.z. drie basislijneenheden gelijk aan 21px).
Ik zal je twee methoden laten zien om dit te bereiken - voel je vrij om te gebruiken wat je aanspreekt en je workflow!
Om te beginnen gebruiken we GuideGuide nog een keer. Open de extensie, voer de volgende waarde in en druk op de GuideGuide-knop:
Na verzending rendert Photoshop alle handleidingen voor onze verticale basislijn:
Op dit punt zal de meer slimme lezer zich gerealiseerd hebben dat deze methode alleen mogelijk wordt gemaakt omdat we onze documenthoogte in een perfect veelvoud van 7px (1050px) hebben gemaakt. Als we deze eerste stap niet namen, zou de GuideGuide zoveel mogelijk 7px-handleidingen weergeven en de rest onderaan het document achterlaten.
En in die eenvoudige stap hebben we een perfect functionele verticale basislijn gemaakt. Het enige probleem is dat dit document nu erg druk is. Ook als u gewend bent om gidsen in uw ontwerpen te gebruiken, kan deze methode snel verwarrend, rommelig en onbruikbaar worden.
Als deze methode u niet bevalt, kunt u de horizontale hulplijnen verwijderen (Ctrl + Alt + Z) en maak een alternatieve basislijn met behulp van een pixelraster.
Open voor onze alternatieve methode het rasterpreferentiepaneel van Photoshop (Bewerken → Voorkeuren → Roosters, gidsen en plakjes). Voer de volgende waarden in voor het pixelraster:
Nu keert u terug naar uw document en kunt u de zichtbaarheid van het raster in- en uitschakelen (Ctrl + '), waarbij elke horizontale lijn van het raster uw verticale basislijn bepaalt - zoals u hier kunt zien met een zoomlens van 600%.
Het mooie van deze methode is dat we de horizontale en verticale basislijnen hebben gescheiden, zodat je eenvoudig hun zichtbaarheid kunt wijzigen, afhankelijk van het deel van het ontwerp waaraan je werkt.
Welke methode u ook kiest (hulplijnen of rasterlagen), de laatste stap is om een visuele helper te maken voor onze verticale basislijn op dezelfde manier als voor onze horizontale basislijn (maar we gaan een andere methode gebruiken).
Maak een nieuw document 1px x 7px met een transparante achtergrond:
Gebruik de selectiekader (M) om de stijl in te stellen Vaste grootte, en de afmetingen tot 1px x 1px. Maak een selectie onderaan het document (je moet zo ver mogelijk inzoomen als je hierheen kunt gaan (Z)) en vul het met # 00ff12 (Ctrl + Bkspace).
Definieer dit document vervolgens als een patroon (Bewerken → Patroon definiëren). Noem het '7px Vertical Baseline'.
Ga terug naar je hoofddocument. Maak een nieuwe laag (Ctrl + Shift + N), selecteer het hele canvas (Ctrl + A) en druk op Ctrl + Bkspace om de selectie te vullen. Selecteer in de vervolgkeuzemenu's 'Patroon' voor het vultype en uw nieuw gemaakte '7px-basislijn' voor het patroon.
Hernoem de laag in 'Vertical Baseline' en zet de dekking op 30%.
Hoewel elementen niet naar een van de visuele helpers worden geklikt, welke methode u ook hebt gebruikt voor de verticale basislijn (hulplijnen of rasterlagen) in de vorige stappen, zal uw nieuw gemaakte visuele laag perfect worden uitgelijnd met de basislijn - zodat u eenvoudig kunt snappen voor de volledig ontwerp.
En daarmee hebt u een pixel perfect basislijnraster gemaakt met handige visuele lagen voor uw volgende project. Het enige dat u hoeft te doen, is uw ontwerp een beetje ademruimte te geven.
Open je Canvas Size-dialoogvenster (Afbeelding → Canvasgrootte) en verander de breedte in 1400px.
Het eindresultaat:
Als je het helemaal hebt doorstaan, goed werk! U hebt nu alle technieken om uw eigen aangepaste basislijnrasters in Photoshop te maken.
Het enige advies dat ik zou geven, is dat hoewel GuideGuide prima met alle benodigde wiskunde om kan gaan, het binnen de limieten van Photoshop moet werken, namelijk dat hulplijnen alleen op een volledige pixel kunnen worden geplaatst. Als uw raster vraagt om subpixelmetingen, worden hulplijnen zo nauwkeurig mogelijk gerenderd, waarbij hun posities naar boven worden afgerond naar de dichtstbijzijnde volledige pixel. Met dat in gedachten, kan een beetje planning aan het begin veel van één pixelhoofdpijn later in het project voorkomen.
Als tussenschot kunt u GuideGuide gebruiken voor veel meer dan alleen basislijnen; experimenteer met het gebruiken van roosters voor alle soorten ontwerpcomponenten van fotolijsten tot menu's!
Nogmaals bedankt, en vergeet niet om je te abonneren en een reactie achter te laten - we horen graag je gedachten!
Accentsconagua