Geometric Shapes in Photoshop; Interesting CSS things

Geometric Shapes in Photoshop

Let's say you want to create something that looks like this:

Creating geometric shapes laid out in a grid is surprisingly tricky in Photoshop. The natural place to start is with the Shape Tool. I think this was actually a bad place to start. (It would have been better to start where I ended up: with the pen tool, paths, and stroke options.)

By default, the Shape Tool does four things at once:

1. it creates a new layer,
   
2. creates a path,
   
3. makes a vector mask out of that path,
   
4. then fills the layer with the current foreground color.

This works because the clipping mask only allows the correct shape of the layer contents to shine through. (Interestingly, this is one of the few times in which layer contents don't affect inferior layers).

If you don't want your shape to be filled, you are out of luck because it is not possible to select a "transparent" fill color with the default shape tool.

Of course, true Photoshop users know that the default is only the beginning of the story. In particular, you have some handy options for the shape tool, that look like . Unfortunately, changing options to "Paths" (the middle option) doesn't really fix things, but it does obliquely point in the right direction: we need to be thinking about paths. Needless to say, messing around with canned paths wasted a lot of time (for example, you can kind of composite shapes, and even edit anchor points, but it never worked well), before I started seriously working with the pen tools, and the paths palette.

Basically, all of the above can be drawn with the pen tool using a minimum of fuss, once you've turned on the Grid. The grid is one of Photoshops handiest and most hidden features. It's basically a grid of guides that your tools will snap to, including the pen tool. This makes perfect horizontal and vertical lines easy to make.

You'll be drawing a relatively abstract thing called a "path". This path must then be stroked using a brush. Paths in Photoshop consist of anchor points and guide lines - some anchor points do not have guide lines. I'm not going to go into detail on how to use the pen tools, because it's pretty easy: all of the above were first made as polygons, then using the convert point tool you can turn the corner into a curve, and adjust the guides (along the grid!) to get nice even curves.

Some gotchas: the fill option will be disabled if you have a "bad" layer selected. I'm not sure what makes a layer "bad" - a shape layer with a vector mask certainly is. The easiest thing is to make a new layer and stroke onto it. Once stroked, those pixels are rasterized, and can no longer be edited like a vector.

My understanding of this aspect of photoshop is incomplete. For example, if I attempt to create a shape "by hand" (make a path, create a vector mask, then style the layer with an outside stroke) nothing appears. This is too bad, because it would be nice to be able to keep the vector representation of these shapes around, and just just the rasterized "stamp" when they are stroked.

(Interesting, I found it a lot easier to create these shapes with Sketchup, and they were in 3-D to boot! But Sketchup costs $500 for non-commercial use, and I wanted to know how to do this in Photoshop anyway! Here's the Sketchup output:



I think the reason Sketchup was easier was that I was never mislead into thinking I could use a tool that I really couldn't.)

2 interesting CSS Things

1. Absolute positioning is relative to the parent element, not the page.
2. background-repeat: repeat-x; is a very handy trick when you have a one pixel gradient background that needs to terminate into a specific color. (BY default, it will repeat on both the x- and y- axes, which is often ugly on longer pages).