Photo slicing for wall grid hanging – Photoshop tutorial

Click for full, as usual.

A tutorial request from a photographer friend who realized that it was much, much cheaper to print tons of 4 x 6 photos instead of giant 12 x 18s and then just arrange them in a grid.

Which is great if you have tons of different photos, but what if you want to cut up one photo into the grid?

There are a few ways of doing it, but this Photoshop tutorial will use slices – a part of photoshop that we web designers use often.

This tutorial will be a bit text heavy, as the image doesn’t really change much; I’ll be referring to that first one above for most of it.

Step 1 – Loading your Image

For this to work you need a nice, high resolution photo. Remember, an optimum 4 x 6″ photo is printed at 300 DPI (Dots Per Inch) which makes it 1200 x 1800 pixels and you’ll want several of them in a grid. For ease of tutorial, my image is exactly two photos high and wide (3600 x 2400 px), but it’s the same process for 3 x 3 or 4 x 4 etc. Use the image size under image at the top to define your overall size. The X number will be a multiple of 1800 and the Y a multiple of 1200, which automatically makes your grid easily divisible.

Step 2 – Using Guides

If you have rulers on (CTRL-R to toggle on/off) simply click and drag from either the top or left ruler onto the page to make a guide. It’s a sort of teal colour that you can see on the above image extending over the grey parts. Using the rulers (or again, navigator) you can move them over to start sectioning your bigger photo into the smaller 1200 x 1800 chunks that will become the 4 x 8″ photos. For me, since it’s a 2 x 2 grid I just halfed the big photo in each direction. Obviously depending on the grid you might need to third it or whatever. If you set your image size correctly in the first step, it should work out evenly.

Step 3 – Making Slices

The slices should snap to the grids or can be manually placed simply by dragging the box around.

So, make slice boxes that fit the guides exactly. See above photo.

You’ll notice that when one slice is made, others also come with it. This is useful for webdesign, and makes our job easier. I made a slice in the top left, and it automagically makes slices for bottom left and top right, which means I only need to make a slice for the bottom right now.

Using the Slice Select tool (on the left menu with the normal slice tool, hold button to swap) you can click on the little blue boxes that appear in the corner of each slice and it’ll bring up this menu:

The only thing you need to worry about is the top drop down says “image” and the name is whatever you want to output filename to be. Since I only have four slices, this name works. If you’re using a bigger grid you might want use numbers or something. In the end, when you’re hanging them, hopefully you’re able to figure out where they go regardless of numbers / filenames.

Do this for each of the slices.

Note if you’re adding spaces between each photo in real life and want the gap to be taken out of the print you can make thin gutter slices and set them to “No image” which won’t make an image for that slice. If you’re OCD about it, the math is the same as printed: 300 pixels for each inch. So if you want 1″ gaps in between your photos in real life you’d make your gutter slices 300 pixels wide.

Step 4 – Profits

Now go to save it like you normally would, but instead of using “save” or “save as” look a few down and instead “Save for web and devices”.

It might give you a warning about a potential decrease in performance, you should be fine as long as your computer is from this decade. Of course, bigger images take more RAM.

This will bring up this menu:

(click for full)

The zoom and hand tools move and size the view, as usual, and you can use the slice selector to, well, select slices. On the right side, you can set how you want each photo to be output. We want to change this from the default .png to a .jpg and set the quality up to however you want, probably 80-100%.

Do this for each slice. Sometimes I forget and then it outputs 3 .pngs and the one .jpg I set. Not cool.

When ready, hit save in the top right and it’ll ask where you want them on your computer. That’s up to you.

If you go to that folder now, you’ll see the photos nice and sliced, ready for print.

Now, drive to Costco and print them for super cheap. While you’re waiting, browse around and see how many free sausage samples you can get from the same person by putting on clothes from the clothing section of the store.

Questions? Comments? You’d like to donate your life savings to me? Let me know!


(c) 2017 ACRYLO | powered by WordPress