Wednesday, September 21, 2011

Photoshop and Grids

There are a number of ways of making a grid board using Adobe Photoshop (or other tools), and almost as many tutorials as methods.  Ultimately, all of them return to the idea that you should begin by creating a square (or part-of-a-square) object to help you make a grid pattern.  I have annotated several links below.  You'll have to decide on the method that works best for you.

After the list of tutorials on making grids, I have listed some Web 2.0 alternatives to Photoshop that students might want to try out for generating images for their game designs -- especially if you are working from home with no access to Photoshop.

IMPORTANT: One word of advice: start by imagining how big you want the board and then calculating how big you want each square.  It will speed things up considerably and prevent you from having to do it over.  As carpenters always say: measure twice, cut once.

A good resource for building unusual grids -- such as hex grids -- is the incompetech site:
http://www.incompetech.com/graphpaper/

You can download one of their patterns and then use it to map onto whatever grid board design you are creating by importing it into Photoshop.  To slice up your image for printing in multiple sheets, you can use the slicing tool in Photoshop or try out the program Posterazor:
http://posterazor.sourceforge.net/

These are some tutorials from 2008 or so when I first started teaching this assignment.  You can find more updated ones by searching online for "photoshop grid tutorial" or words to that effect.
  • Creating a Grid with a Custom Pattern in Photoshop
    http://www.oman3d.com/tutorials/photoshop/video_grid/
    I liked this tutorial best, not only because it is in video form (which is easier than reading) but because I think the method it shows is probably the quickest and most effective and teaches you some interesting Photoshop skills -- especially in the use of strokes.  It also shows you one way of decorating the squares.

  • Grid Tutorial
    http://www.phong.com/tutorials/grid/
    This tutorial is focused on using a grid as a background for a header graphic (which might be useful to know for your box design), but the method it offers for making the grid is very simple.

  • How to Create a Grid Quickly and Effectively in Photoshop
    http://www.partdigital.com/tutorials/grid
    This one also offers a rather painless method in very few words.  It also shows you how you can use a picture as the background of your board.

  • Making Grid Masks in Photoshop
    http://www.graphic-design.com/Photoshop/Tips/grid.html
    This might be a good method if you want to use a picture as the background.

  • Photoshop Tutorials - Custom Grid
    http://www.cbtcafe.com/photoshop/newgrid/newgrid.html
    This is the method I discovered on my own for making a grid and it works.

  • Wavey Grid
    http://www.photoshopcafe.com/tutorials/wavey%20grid/wavey_grid.htm
    I threw this one in just in case someone likes the idea.  A few years back someone used this tutorial to make a pizza-box grid game where the wavey grid matched well with the cheesy pizza design.

Alternatives to Photoshop

Students often ask how they can edit images at home if they don't have Photoshop. I usually have recommended GIMP, which I have used with success and find quite intuitive (and similar to Photoshop in many ways). I have also seen books on using GIMP and I like some of its features. But I saw a great post recently that links to "Free Online Tools for Images and Graphic Design," which seems like the inevitable next step.  Here are some useful Web 2.0 graphic editing tools freely available on the web:

No comments:

Game Design (01:355:375:01)