A New Look at the Old Circuit Board

Let's take a break from CSS for a Photoshop tutorial. I'm going to show you a short and practical technique which works well for stylizing images such as the integrated circuit board pictured below. The image I'm working on will become the masthead of a web page. The color palette of the page is earthy tones and blues so we will start with a green background but finish up in blue. My input file:



My steps:

1. Open your image in PS
2. From Filter > Pixelate > Mosaic menu option, Choose the cell size that retains important details in your image. I chose 11 cells for one file, and 16 for another.
3. From Filter > Noise menu option, Choose the Median that rounds off the square pixelated edges. Two (2) worked for me. 4 was also Ok.
4. Duplicate this layer and name it, "Outline".
5. Change the blending mode of the new layer, "Outline" to screen.
6. Filter > Stylize > Find Edges menu option will outline the edges of our image.
7. When you are done with the outline, select Image > Adjustments > Invert.
8. You have an outline and a base layer. You can duplicate and overlay the layers together to increase contrast. In this step, I lowered the opacity of my top layer to get a softer effect.
9. My palette is earth tones and blues so I want to make the green circuit board blue. Choose Selective Color to change the greens. You'll tweak with this menu option until you tone down the green. Some green will still be left behind. Not to worry, we'll take care of it during the next step.
10. From Image > Adjustments > Replace Color, I sampled the light green left over on the upper side and substituted light blue.
11. Filter > Render > Lens Flare, choose the size (Mine was kept small at 50) for your flare. If the flare is kept at a smaller size then you don't get the halo effect.
12. The last section of the picture shows a perspective cut. To do this, go into Transform > Perspective and experiment. Try a left or right perspective by pulling one of the top edges up and out. If you want text on your graphic be sure to collapse it on your base layer before the perspective work so everything gets transformed the same amount and angle.
13. In the following images, after the transformation you can still tell the difference between a surface mounted and soldered chip and see capacitors, connectors, and processor chips.