Creating grids in Photoshop is an essential piece of most web designers workflow. However, the process of setting up such grids can be quite tedious, considering that you have to drag out each guide individually and get your measurements precise on each one.
Up until recently I had been using something called Gridulator, which is still an awesome tool for creating grids that work in almost any application, but after I found GuideGuide my workflow was forever changed. GuideGuide is a Photoshop extension that allows you to create complex grid systems in Photoshop with just a few clicks, and it is awesome!
To get started with GuideGuide, you need to download it from http://guideguide.me. Once you do that, you can install it using the Adobe Extension Manager which ships with Creative Suite/Cloud by default.
After the download is completed, launch Photoshop and go to Window – Extensions – GuideGuide to launch the GuideGuide Panel. From there you plugin your grid settings, hit the GG button, and voila, instant grids for your next web project!
Thanks for watching!
MORE FROM JUSTIN SEELEY
Website: http://justinseeley.com
Facebook: http://facebook.com/seeleyfb
Twitter: http://twitter.com/justinseeley
Google+: http://google.com/+justinseeley
Justin Seeley is a staff author for lynda.com and an Adobe Certified Expert. He has several years experience in both print and web design, and has authored over 100 hours of instructional content to date. Justin is the creator of the Photoshop Quicktips Podcast, a show that consistently ranked in the top 25 software how-to podcasts in the iTunes store and his techniques have been featured in several digital publications, podcasts, and blogs.
source
Thanks man🙏
gud
shrtlink.ca/545mobiroomwebcamxx
i have no Guide guide option in my Photoshop….how can i do now?
Thanks for this great tutorial and tool BUT, my Guide Guide is in centimetres! How to change that ?!
You man, are amazing !
Lifesaving tutorial
Big thanks !
Guide guide is not free
Handy but that £7/month for one little plugin seems a little silly where I pay £9 for the entire photoshop AND lightroom.
Thank u 🙂
quick and easy guide guide
Thank you for this vidoe
hii! sir
i can easily understand how to set up grid using guide guide tool..
but i have some query like i do not use guide guide tool.
so what can i do when i have to work with different sizes..
i mean how to calculate tham sir…
Please answer..
thank u
Guide Guide doesn't work on Adobe CC 2017. There is a problem with GuideGuide's software, not my computer
Too good video, learnt it quickly thanks so much
dude,how do you go for horizontal guides,do you use only optical feeling when you place elements ?
can apply this math formula to any web layout? I hope this works on Bootstrap and foundation 6
hey, I have a quastion: why I´m not able to select Extensions … The word is gray. Is it because of Photoshop CC?
hmm no idea? what can I do that it works?
doesnt work on CC 2014 or CC 2015.(
Justin, this is great. How do you apply grids to your responsive designs? Like phone and tablet?
Good stuff!
You sir, are a genius 😀 and GuideGuide too for making this awesome product.
really useful tutorial thanks man
Fantastic, I was using a tutorial on lynda and had no idea how to add these grids like they did (since they're using the newest CC versions of photoshop which has it built in) This helped out tremendously. Thank you!
Oh, what a great thing. So easy to work. Thanks man
gold
Annoying how this tool doesn't work for Adobe CC 2014. They even say it doesn't work on the download, yet I tried and failed.
I used column width 65 px so i can achive your result with guides at the same resolution 1280 x 2000 px. Why? I'm using PS CC 14.2 with the last version of Guideguide. http://i.imgur.com/qUCA8WP.jpg