Adobe Photoshop | Web Design Grid Tutorial

Web Design

In today’s tech-savvy world, more and more businesses and organizations are realizing that DIY websites or—gasp—no website at all just won’t cut it. And now that mobile Internet usage has officially overtaken desktop usage, the do-it-yourselfers are having a hard time designing websites that are smartphone compatible.

If you’ve got what it takes, Web design can make for a satisfying career. But the road isn’t easy: You’ll need to be able to market your skills effectively to stand out. A network as much as possible. You can start a blog, speak at local events, and learn from others in your field. You’ll also need to have the skills to complete complex projects and the personality to please demanding customers.

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 . 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:

Facebook:

Twitter:

Google+:

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.

You might also like More from author

25 Comments

  1. Sarah says

    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.

    1. Justin Seeley says

      This feature is actually built into Photoshop CC. Go to View>Guides>New Guide Layout.

    2. drew ziegler says

      +Justin Seeley Actually that option does not exist in CC. Only have the option for Lock Guides & New Guide which just draws one line. Have you tried to use GuideGuide successfully with CC?

    3. Justin Seeley says

      +drew ziegler that option is in cc. You need to update.

  2. Timothy Jacobs says

    gold

  3. ANDREY GRIDNEVSKI says

    Oh, what a great thing. So easy to work. Thanks man

  4. WinstonSmith says

    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!

  5. Pursotam 111 says

    really useful tutorial thanks man

  6. Mikx S says

    You sir, are a genius 😀 and GuideGuide too for making this awesome product.

  7. PSDWatcher says

    Good stuff!

  8. Rick Hines says

    Justin, this is great. How do you apply grids to your responsive designs? Like phone and tablet?

    1. Justin Seeley says

      I use smaller grids. For Desktop layouts 8-12 columns, tablet 6- 8, phone 2-4. Just depends on the needs of the project.

    2. Rick Hines says

      Cool. Thanks for the info!

  9. Aybek Z says

    doesnt work on CC 2014 or CC 2015.(

    1. Justin Seeley says

      Try using the built in Photoshop Guide layouts. View>New Guide Layout. Much easier.

    2. Aybek Z says

      +Justin Seeley thanx. reinstalled CC to 2015.)

  10. Angelika Derler says

    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?

  11. EMR80 says

    can apply this math formula to any web layout? I hope this works on Bootstrap and foundation 6

  12. Kolombo The Victor says

    dude,how do you go for horizontal guides,do you use only optical feeling when you place elements ?

    1. Justin Seeley says

      +Kolombo The Victor I don’t use horizontal guides much. I use key object alignment in illustrator or smart guides in photoshop’s design space.

  13. Joyee S says

    Too good video, learnt it quickly thanks so much

  14. Richard Forgione says

    Guide Guide doesn’t work on Adobe CC 2017. There is a problem with GuideGuide’s software, not my computer

    1. Justin Seeley says

      Richard Forgione this tutorial is several years old. The functionality is actually built into photoshop now under View>New Guide Layout…

  15. Hardik Patel says

    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

  16. Артем Гончар says

    Thank you for this vidoe

Leave A Reply

Your email address will not be published.