Jun 17
Grid masking
2008 at 08.28 am posted by Veerle Pieters
A reader showed me this image with the question if I knew how to create this masking grid effect on the photo of this album. My first reaction was “Oh Soulstice Mixed Illusions I totally love this album” :) This grid masking seems like an interesting technique to take a closer look at. I’m sure there are many ways to excecute this technique and you could do this both in Illustrator or Photoshop…
Here is my final version of today's tutorial. In my version of this technique I decided to use both Illustrator and Photoshop to my benefit and create the mask in Illustrator and then apply it on the photo(s) in Photoshop.
Why use both applications?
Simply because I like to create the grid in an easy and fast way. This is far easier to do in Illustrator. For the photo(s) I need to apply filters and effects, so for this I'm using Photoshop.
Create the grid mask
Step 1: Create a rectangle
Select the Rectangle Tool from the Toolbox and click once on the canvas. Enter the values you want to use as a grid pattern. I've used a width of 60 px and a height of 40 px. Click OK. The rectangle can have a black fill, any color is OK. Just make sure the rectangle's stroke option is set to none.
Step 2: Add Round Corners Effect
With the rectangle still selected go to Effects > Stylize > Round Corners.... I've entered a value of 7 px for the corner radius. Click OK. You see this effect in the Appearance palette. The cool thing about this approach is that you can change this radius at any time if you think it is too round or too sharp.
Step 3: Add a double Transform Effect
With the rectangle still selected go to the Effects menu again and choose Distort & Transform > Transform.... Check the Preview option to see what you are doing and enter 10 for copies. Under the Move option enter 62 px next to Horizontal to move the item 62 px horizontally, leaving a 2 px gap in between each rectangle. You should see a horizontal line of 10 evenly spaced rectangles. You might need to tab to another field to actually see the result. Click OK.
Go to the Effects menu again and choose again for Distort & Transform > Transform.... There will be warning message telling you that this will apply another instance of the effect. That is what we want, so you can click Apply New Effect. Check the Preview option again so you see the result and enter 18 for copies. This value depends of course how big you want your grid, so use any value that fits your needs. Under the Move option enter -42 px next to Vertical to move the item 42 px vertically downwards, leaving a 2 px gap in between each rectangle. You should see the line of 10 evenly spaced rectangles repeated 18 times vertically towards the bottom. Again, you might need to tab to another field to actually see the result. Click OK again.
Step 5: Release effects
Remember this is 1 rectangle with 3 effects attached to it. So, in case you're not happy with the spacing or it's rounded corners you can modify this at all times with one click on the effect in the Appearance palette, change values and click OK. That easy ;) Select your rectangle and go to Object > Expand Appearance. All effects are now released and all duplicated rectangles are turned into editable paths including the original one.
Step 6: Paste grid as a Shape Layer in Photoshop
With all rectangles selected, hit command/control + c. Go to Photoshop and open the photo you want to work with. Make sure the photo is on a separate layer. Hit command/control + v to paste the grid. Select Shape Layer in the paste options and click OK.
Step 7: Subtract Shape Layer
Instead of command/control + clicking the shape layer icon (to select the layer mask via the walking ants) and then select the layer of the photo and hitting the Mask icon at the bottom of the Layers palette to add this selection as a mask on the photo, I decided to keep things a bit more flexible. Flexible like this: if for example I have to scale my grid I still can. I want to keep my grid vector based as a Shape Layer. I want to add this grid masking effect as a separate Shape Layer instead of an actual mask on the photo. Now my rectangles have the fill, so I need to reverse the fill of the Shape Layer. To do this I have to select the Shape Layer's path using the Selection Tool or black arrow (you can also hit the A key to select this tool). When the path is fully selected go to the Toolbar at the top of the page and select the Subtract from shape area option. The fill should now be reversed. Give it a white fill by double clicking the layer thumbnail. Now you can use this layer as a masking effect
Final result with layers shown
As final result I duplicated the grid layer, set the option to Add to shape area to reverse the fill and deleted all rectangles except 2. I gave them a color that suits my photo and gave the layer a transparency of 40%. I repeated this step a couple of times. I also used 2 different photos. My main photo has 2 Smart Filters applied but only on a selected part (bottom right). The other photo on top with the grass and water is masked so it appears on top of the other one in only 3 rows of the grid. Here I also applied a Color Balance Adjustment Layer to make the grass greener to achieve a high color contrast effect.
I added a white rectangle box on top of 2 rows to add my text on. The word 'color' was typed at first (see hidden top layer) and then I copied the layer of the photo on top of my layout. I command/control + clicked the type layer in the Layers palette to create a selecting of the text and then I clicked the layer of the photo and the Mask icon at the bottom of the palette to add this selection as a mask.
While I was experimenting I noticed that the outcome depends a lot on the photo you choose. At first I was working with the photo of the water and the grass. It is a photo of a beautiful lanscape but didn't seem suitable for this masking technique. So carefully chose your picture. If you feel the end result is not what you hoped for, than it could be the problem or the way you finish things off with the transparent rectangles. Make sure you don't overdo this. As always don't stop experimenting and try out new things. Hope you enjoyed this one ;)
Want to learn more?
A good and not expensive source to learn more about Illustrator, Photoshop, or web design is by joining the Tuts+ sites. You get access to the source files for just $9 a month. So your ONE membership gives you access to members-only content for ALL the Plus sites. I've written a tutorial for the Vector Tuts section.
37served
1
Wow, that’s a neat effect and I love the optical illusion that you get of colours appearing between the rectangles.
It’s a shame I don’t have Photoshop or Illustrator.
2
Looks beautiful! Neat technique, thanks for sharing.
3
Great tip Veerle.
Another cool thing you could try would be to turn your grid into a pattern in Photoshop then apply a ‘Pattern Overlay’ layer style to a shape layer with it’s Fill set to 0.
I use this approach to grid up my site designs. If I need more columns or rows for my grid, it’s as simple as resizing the layer and the Pattern Overlay does the rest.
Cheers.
4
Really cool tutorial, thanks! I tried it out with small round circles as well, which also creates a good effect.
Thanks again!
5
Great article.
I was thinking some time about how Shaun Inman did this.
And now I know :)
Dankjewel!
6
another great tutorial! beautiful colors and felxible skills,as well as the excellent concept you have to apply on the work make it really fascinating and perfect.I enjoy it very much,and I am looking forward to your next tutorial! thank you veerle! if only your tutorial changed into vido!
7
Oh my god, I was dreaming for a tutorial for this, thanks a lot !!!!!!!!!!!!
8
Love your tutorials. I am always coming to your site for inspiration on projects. Thanks for the Illustrator tip using the effects; I never would have thought to do it that way.
9
wow! i love that illustrator technique you used for making the grid. I totally would have done it a different way but you taught me something new and much simpler! Thanks Veerle.
On a side note, do you know the difference between
Effect/Convert To Shape/Rounded Rectangle and the one you used: Effect/Stylize/Rounded Corners.
Is there a benefit of using one over the other?
10
Great tips, thank you. I haven’t used the appearance pallet to full effect, I’ll work on that now.
11
Great tutorial! I always forget about how helpful Illustrator can be when doing these kinds of things. By the time I remember, I’m halfway through doing it the hard way. :-/
Thanks for the reminder!
12
Loved this one, sweet tutorial, thanks Veerle!
13
Cool, very nice work :-)
14
Thanks all! Happy to hear you enjoy this one :)
Wayde Christie said:
That’s a neat approach, haven’t thought of this :)
gen said:
Well spotted :) With Rounded Rectangle it goes one step further. You need to specify height and width as well. So in case you are really not sure about the dimensions and want to experiment with these as well, you could opt for this Effect instead of the Rounded Corners. You could even turn the shape into a circle if you use a radius that is 1/2 of the value you entered as height and width. I guess this effect gives you an extra flexibility.
15
Sorry to be a complete pleb but I’m having a problem with getting the 2px gap between my boxes, can anyone give me a hint as to what I’m doing wrong? Many thanks in advance x
16
I love this tutorial and would like to be able to do it.
I’ve the grib mask on a separete layer from the photo layer. But I’m not able to find the toolbar >> Subtract from shape area option when I’m on the selection tool. Do i do something wrong?
Thanks!
17
This is a really great tutorial! Simple but effective. Spot on - like the rest of your site! Really nice work on the whole.
18
The pattern approach is reasonable (see comment 3) but i would apply it as a layer style so it can be resized from there…
19
Thanks a lot for sharing this Veerle. Been doing this using other methods but I prefer your own method. Lots of ways are available for getting work done, but some are more efficient than others.
20
Sorry, but I don’t like this, is a very old effect.
21
ashley said:
Maybe you have selected the Move tool instead. You need to make sure you select the Path Selection tool
. Also make sure the entire grid is selected selected as shown here.
22
Simply wonderful tutorial! Thanx a lot!
23
Thank you Looped x
24
Great explanation. i tried it but have some problems. maybe cuz of not reading correctly :).i think i can work it out.
thx for sharing
Cheers
Resim
25
Great article. I didn’t know about the Effects > Stylize > Round Corners option. I often find that I’m using both PS and AI to accomplish a task, like in the recent article I wrote where I used simulate pressure in the stroke path options of PS and the Pencil Tool in AI to get a simulation of actual hand drawn pen strokes.
26
I was trying to follow this tutorial at work but sadly i only have access to CS2 at the office and it would seem thing are a little bit differnt :D
Will give it another go when i get home and can get my hands on CS3
27
i ve done the grib mask
but couldnt find the toolbar :S
28
I was having the same problem with the toolbar, but I realized you have to make sure you have the right direct selection tool (the black one, not the white one). And then I guess you have to manually select each square in the shape with that tool. I don’t know, is there a way to select all of them at the same time?
29
My problem was due to me thinking it was all done in photoshop :D soon as i clicked that the first part was illustrator it all clicked :D
30
DeaPeaJay said:
Yes it’s important you use this tool (black arrow) otherwise you don’t get to see the toolbar with these options. Not sure why Adobe makes it that difficult :-S I can understand that, if you don’t properly select all the shapes and you missed some points that it doesn’t work, but if you use the white arrow tool and everything is selected properly than why not show the options? I don’t know the reason for this.
I select them all at once by dragging a rectangle selection around all of them, using the the path selection tool (or black arrow). You might need to zoom out a bit so you can make this selection big enough going outside your canvas area or document if you know what I mean. Hope this helps.
31
Could you please describe the two smart filters you applied to the main photograph? What is the mosaic filter you used (the one included in CS3 is called Mosaic Tiles) and what settings did you use?
32
Sean Robertson said:
It’s the Mosaic filter found under Filters > Pixelate> Mosaic in Photoshop CS3 with Cell Size of 21 square.
On top of the Mosaic filter I added Angled Strokes, Filter > Brush Strokes with these settings : Direction Balance 50, Stroke Length 15 and Sharpness 3
33
Awesome, thanks! Kind of annoying that Photoshop has two mosaic filters that do such different things. They really should rename the pixelate one.
34
Hi Veerle
I dont know if you seen this…
http://screencasters.heathenx.org/episode-064/
it points to your post on Grid masking.
But this is made in Inkscape.
/Mats
35
This looks like such a nice technique to use- but I don’t have Illustrator. Is there any way you can save the mask as a PSD and offer it up for download? Or is there a way to do this on just PS?
Commenting is not available on this article.