I recently made a couple new graphics for the interoperability site:

Graphic #1: Puzzle

Graphic #2: Venn Diagram

Puzzle: interop.psd
Venn Diagram: project_team.psd

I made both graphics from scratch using Photoshop. Here’s (roughly) how:

Puzzle
1. New photoshop file 400×400 pixels.
2. Use guides to mark center of canvas (200, 200).
3. Draw three circles of varying size, all centered on the canvas. Small and large circles are green, middle is white, and layer them appropriately (smaller circles on top). When drawing circles, hold option and shift keys to constrain proportions (prevents ovals) and to anchor the cursor in the circle’s center.
4. Draw three lines from canvas center, separated 120 degress from each (like a Mercedes logo).
5. Use the custom shape tool to draw puzzle pieces (comes with photoshop). Crop out puzzles connectors and paste them on canvas. This creates a basic skeleton of the puzzle.
6. Merge layers together and use erase/pencil tool to better define circle puzzle pieces.
7. Use magic wand to select and create new layers. At this point, there should 5 main layers: inner circle, outer circle with hooks, and the three puzzle pieces.
8. Use the bevel/emboss blending options to shade and define each layer…. oh yeah, and color the puzzle!
9. Add text on top of each piece, and apply slight text warp (if wanted).
10. Add a slight drop shadow to the outer circle for a subtle effect.

Venn Diagram
1. New photoshop file 400×400 pixels.
2. Use guides to mark center of canvas (200, 200).
3. Draw one large centered circle.
4. Draw equaliteral triangle, mark it’s center, and center it’s center on the canvas.
5. Draw three equally sized circles, one at each point on the triangle. Once this is done, hide the triangle.
6. Apply the “Overlay” blending mode to each circle, and give them all the same color (a light grey).
7. Use a drop shadow effect on the circles if desired. Because some circles overlap the others, you need to duplicate the two overlapped circles, reduce their fill to 0%, and then give them the drop shadow effect.
8. Add text where needed.

Well, those are the very rough outlines of the procedure. It would take much longer to go into great detail about the work process. A few notes:
1. Guides are very handy. I use them frequently to help visualize and define edges.
2. The puzzle graphic required lots of layer merging in the process of defining/creating new layers. Often I would duplicate layers I needed to merge so that I retained the original layer (in case I wanted to go back and change something… puzzle hooks, for instance). I would then merge the duplicated layers together, and hide the original layers from canvas view.
3. To find the equilateral triangle’s center, I had to draw straight and even lines through the triangle at each angle and mark where they intersected. (I’m not sure if there’s an easier way to do this?)

My purpose of outlining the process here is provide me, and anyone else, a reference for using Photoshop. I am always learning new techniques, but it is virtually impossible to capture everything. Thus, a rough outline here may help invoke memories about the creation process that would otherwise fade away.