Als web developer gebruik je vaak het zogeheten Bootstrap grid voor het design van je website. Dit grid zorgt ervoor dat wanneer de website gebouwd wordt, en je je netjes aan het grid hebt gehouden, deze goed toont op alle devices. Je maakt hierbij gebruik van kolommen, die op hun beurt later weer dienen als breaking points. Dat wil zeggen dat op smallere schermen (bijvoorbeeld een mobiele telefoon) content onder elkaar komt te staan, waar het op bredere schermen wellicht naast elkaar staat. We noemen dit responsief design.

Op een blanco canvas even een responsief design ontwikkelen is nagenoeg onmogelijk, en om die guides nou handmatig neer te gaan zetten is wel erg omslachtig. Gelukkig zit er in Photoshop een functie om dit grid automatisch te genereren. In deze blog laat ik je stap voor stap zien hoe.

1) Maak in Photoshop een artboard aan. Ik ga voor deze tutorial uit van een web large (1920×1080 pixels) preset, waarbij je container (de ruimte waarin je kunt designen en dus de breedte van het Bootstrap grid) 1170 pixels is.

2) Kies in het menu View > New Guide Layout.

3) Zet het aantal kolommen op 12, de breedte op 70 px en de gutter (de ruimte tussen de kolommen) op 30 px. Je creëert dus een breedte van (12*70) + (11*30) = 1170 px.

4) Je ziet nu dat het grid helemaal links is geplaatst. Vink daarom links onderin ‘Center Columns’ aan.

5) Klik op OK en voilá daar staat je Bootstrap grid!

Het is zo simpel, maar handig om te weten. Happy designing!

Heb je hulp nodig met het design van jouw website? Neem gerust contact met me op!