Amazing X-Ray Vision, Meets Walkman: Icon of the 80′s Poster Design Tutorial

By   |  Stashed in Photo Manipulation

Introduction

The premise for this photo manipulation and poster design was inspired by stories such as The Borrowers and Tom Thumb. The concepts used are not new, but I don’t think they’ve been explored nearly enough, especially digitally.

There’s a broad range of techniques to use and ideas to employ. Following this tutorial should enhance your skills with paths, layer styles, smart objects, filters and of course lighting.

Images Used

Following along? You’ll need these.

Thanks to the artists who provided these, please remember to follow their rules and credit them where appropriate.

Preview

As always, here’s a quick preview of the design we’ll be creating.

Step 1

To start off, fire up Photoshop and place this walkman player image into a new document.

Step 2

We need to change the contrast, so we’ll add an adjustment layer and go to the half black and white circle at the bottom of the layers palette and click it to bring up the Adjustment Layers tab. Adjust the settings to: Output 21, Input 33.

Step 3

Create a new layer and grab a soft brush, set the flow to 15%, and the color to a light blue. Brush over some of the walkman like the image referenced below. These areas are going to act as guides so we know where to add cut-away sections. This step is very helpful, but optional, we’ll end up turning this layer off later in the tutorial.

Step 4

Now, we’ll use the areas that we brushed in the previous step. Draw a shape like in the following image, using the pen tool. It’s important to make sure the pen is set to paths, not shape layers. You can use the freeform pen tool to draw paths; this is especially good when you have a pen tablet. I spent some extra time making sure these had nice curves with no jagged points.

Step 5

In the paths palette, double click the path to save it (otherwise you can lose it if you create a new path) and and rename it something memorable.

Step 6

Using the Pen Tool, draw another shape on the right side of the Walkman. Again use the blue brushed area as a guide, save the path by double clicking it in the layers palette.

Step 7

To select the two paths at the same time Ctrl click one, then holding Ctrl + Shift click the other. The little pointer has a square in it and this should have a cross when you press shift. You can also press alt to get a minus and take away a selection.

Step 8

With this selection still active, create a new layer. Press ‘D’ on the keyboard to set the foreground and background colours to black and white. Then press ‘X’ to swap them around. With white as your foreground colour fill these shapes. Hit Ctrl + D to deselect them. Then, just below the opacity bar you’ll find the fill, reduce it to zero for the previous layer. We do this so that we can add a layer style (you can’t add a layer style to a selection). Now double click to the right of the layer to bring up the layer styles window and add a 1 pixel white stroke.

Step 9

Place this image of a motherboard circuit into the document below the stroke outline we just created. Look at this image for reference, we want the circuit on the left outline positioned so the edges of the circuit’s are at the same angle as the walkman. Lower the layer opacity so you can do this accurately.

Step 10

Ctrl click the first cut out shape to select it. Now with the area we want selected, we can add a layer mask to reveal the background. To do this, click the circle in a square at the bottom of the layer’s palette. The reason we use layers masks is because they are non-destructive, they can be edited again and again as opposed to deleting parts of the image.

After deselecting you should end up with the following image.

Step 11

Now duplicate this layer and set the original blend mode to Multiply and the copied layer to Colour Dodge. You should have an image like below. This gives the X-Ray cutaway a much more interesting effect, and leaves the shine on the edge of the walkman.

Step 12

Select all the layers you have so far and press Ctrl+ G to put them in a group, being organized helps us to find things when we need to. Now for the right hand outline at the front we’ll repeat steps 10 and 11, using the same image motherboard circuit. Arrange the image under the stroke where you think it works best, like the following image. Then Ctrl click the stroke layer and add a layer mask, duplicate the layer, change the original layer’s blend mode to multiply and the copy’s to colour to dodge. This is what you should have.

Step 13

Now we’re going to draw the 3 main cut-away outlines where the tape goes. We’ll call this the ‘tape area’ and these the ‘tape outlines’. Draw the paths with the pen tool or freeform pen tool. If it helps, turn off the visibility of the first group. You should end up with 3 shapes like the images below that will make up the tape area.

Step 14

Go through each path on the tape area and stroke it like we did earlier in this tutorial. Create a new layer for each new stroke and fill. If it looks different than how you expected it to go, delete the layer, back to the path and edit it, then stroke it again.

Step 15

To begin the tape area we’ll start on the left, the far left and middle areas will be covered with the same image. Place this image ‘VHS cogs‘ into a new document in Photoshop. As you’˜ll notice if you hit Ctrl + Alt + I it’s fairly large which is perfect for the detail we need in our image. Now cut out a similar area with the Marquee Tool and copy it to a new layer (Ctrl + J). Then deselect and drag it (holding shift) into the X-Ray document.

Step 16

Add a Curves Adjustment Layer to this new circuit layer with an Output 44 and Input 188. This is just to take the shine off the flash I used when I took the picture.

Step 17

Now we’ll move the circuit into place. To do so press Ctlr + t to bring up the Free Transform Tool. Now, rotate the image counter clockwise. A useful tip is to press the arrow key (or enter) every time you’ve moved the image into a difficult position. This way you won’t have to go back over things. Next bring up the free transform tool again, then right click and hit distort and move it into position. I like to think in terms or 3D. If you just think the circuit image is a 3D plane with a texture on it (which it is), you simply have to lower the back end to place the image into the correct perspective. Remember the images were taken from directly above so quite a bit of manipulation is required.

Step 18

Once it’s in a position you’re happy with Ctrl + click the stroke outline (or path) like we did before. Hold down Ctlr + Shift to get the cross on the finger curser and select both the tape outlines on the left. Add a Layer Mask to those 2 selections.

Step 19

Duplicate this layer, like we did before and set the original layer to Multiply and the copy to Overlay. Now we need to add a layer with white, beneath the strokes and circuits in the tape area. Ctrl + click the 3 shapes we’ve drawn on the tape area and fill them with white. This helps bring a light to the circuits we are going to add, this can be seen clearly if you turn this layer off once the circuits are in place.

Step 20

Group this left side of the tape area and label it something applicable, this makes it easier to toggle the visibility on and off without forgetting which layers we are using. Now we’ll do what we did earlier, open up this image of the ‘VHS circuit‘ in a new document, make a cut-out similar to the image referenced below. Use the marquee tool and Ctlr + J to copy it into a new layer. Then deselect it and drag it (while holding down shift) into the X-Ray document.

Step 21

Once in the X-Ray document, add a curves adjustment layer with Output 43 and Input 59.

Step 22

Position the circuit similar to how we did it in step 17, using the image below as a reference. Use the Free Transform Tool (Ctrl+ T) and distort it (right click) into position. Also resize the image, but remember if you make it smaller than you’d like and you have to enlarge it later you’ll lose quality.

Step 23

Now Ctrl + click the right tape outlines and add a layer mask. Duplicate the layer and set both the layers to multiply.

Step 24

Place this image of a tape into the document right below the strokes for the outlines, but above the circuits. Resize and position it using free transform and distort. Make the edges line up, for the tape and tape area. Lower the opacity so you can see clearly where to put it.

Step 25

Now cut out the outside of the tape using the pen tool, aim to be accurate however we’ll refine the edge later on. Double click the path to save it, and then Ctrl click it to bring up the selection.

Step 26

With the selection active add a layer mask. Click Select->Refine Edge, at the bottom you can scroll through how you want the preview to be. Use the values shown here, however if you need to remove more increase the feather value. Then press Ctrl + Shift + I to inverse the selection and erase away the extra.

Step 27

With the layer mask selected, Ctlr + click the tape outline strokes (or paths). Fill this selection with black to reveal the layer below. Then deselect using Ctrl + D and you should have the following result.

Step 28

Again, to create a pseudo X-Ray effect we’ll duplicate this tape layer & put the original blend mode on Colour Dodge and the copy on Lighten. Then reduce the copied layer’s Opacity down to around 24%.

Step 29

Bring in this image of a woman cleaning into a new document. First off we’ll extract her out using the pen tool. It shouldn’t matter too much if you make mistakes as we’ll be reducing the size quite a bit. Now, use the Lasso Tool (holding alt) to isolate the end of the mop. With the end selected change the colour from blue to white. Then click Image->Adjustments->Hue/Saturation and input the values shown below.

Step 30

Next bring the mop figure into our working document. Put it into a group and place it above all the other layers. Add a layer above the mop woman and clip it to this layer. This will be the shading that blends the figure in. Use a linear gradient set from black to transparent and draw a gradient from the top left hand corner of the figure to the lower right hand corner then lower this layer’s Opacity to around 35%.

Step 31

On the figure layer add a Satin Layer style and use the settings below. Also change the Contour to Half Round. This makes the areas in the light glow and the areas in the shadow darker. This adds to the realism of the figure. If the effect is overbearing, lower the style’s opacity.

Step 32

Open up this image of a man standing near a fence. Extract him out using the pen tool. As you can see the fence overlaps his legs, so isolate this area and add a light grey/blue fill in a new layer. Use the eye dropper to sample from the trouser area. Change the blend mode to until the colour merges into the trousers and the fence disappears. Then merge the layers with Ctrl + E. Use the Refine Edge Tool to soften the edges, try to get as much light away from the edges as you can. Place the figure into the X-Ray document, resize it and position it so that he is looking at the controls. Then add a Satin Layer Style so the lighting fits in with the overall scene. Put in these values and set the Contour to Half Round again.

Step 33

Now we’ll create the shadow for the figure. Create a new layer below the figures layer; you can Ctrl + click the new layer icon to do this. Make a selection of the figure by Ctrl + clicking it and fill the selection with black. Lower this layer’s Opacity to 31%.

Step 34

Add a Layer Mask to the shadow layer, choose a linear gradient that goes from black to white and drag it across the shadow. It should be faded, try to copy the shadow on the walkman as closely as you can.

Step 35

Right click the Layer and choose Apply Layer Mask. This merges the Layer Mask with the shadow layer itself. Then right click again and choose convert to smart object. Now go to Filter->Blur->Gaussian Blur and enter 1.6. The great thing about converting the layer to a smart object is now the filter’s are smart, so we can go back and edit them very easily. To do so, you can double click on the filter below the layer.

Step 36

Next download this image of a man cleaning a bus . Then it’s more of the same, extract him with the pen tool, refine the edge and place him into the X-Ray document. Resize him so he is in proportion with the other 2 figures. Now add a Satin Layer Style with the following settings.

Step 37

Now, repeat steps 33 and 35 to add a shadow to this figure.

Step 38

Carefully cut out the walkman using the pen tool. Inverse the selection and copy this to a new layer. Now we have the background table on a new layer. Desaturate this layer (Ctrl + shift + U) and change the blend mode to Multiply. Lower the opacity to 38%. Make sure this layer is beneath all of the small people and circuit layers. Now add a Gradient Fill Adjustment Layer on top of all the layers. Begin with #006e2e and end with #006e05. Ctrl + click the 5 outlines we drew earlier, inverse the selection and fill those selections with black so that the green only covers the cut out areas. Change the blend mode to Hue and drop the Opacity to 70%.

Step 39

Add an Exposure Adjustment Layer with the following settings. This is just to reduce the glare and shine in the image.

Step 40

Add an Adjustment Photo Filter (cooling filter LBB) lower the Opacity to 33%. Then crop the image so that the large dark bar at the top is removed. Also cut away the right side so the image so it’s more proportional. Here is my final result.

Conclusion:

Thank you for reading this tut. I hope you enjoyed it and learned something from the techniques used. With some more effort you could take this idea in many different directions. I had an inclination to change the background – perhaps to a giant hand to make the image even more surreal.

About the Author

Ben Rama is a freelance graphic designer and digital artist . He founded and maintains Digital Art Empire. He is totally passionate about design . Find Ben on Twitter

More posts by

Website   

  • http://blog.aceinfowayindia.com Ajay

    Awesome Tutorial! Thanks for sharing.

  • Michael

    Doesn’t look realistic at all. A few adjustments won’t do wrong

  • Demien

    Ugly effect… :(

  • Theurge

    correct technique i suppose…but for the final effects…it doesn’t seem very realistic to me, especially when it comes to contrast adjustments and shadows cast by the people

  • Tom Pearce

    Excellent tutorial , the end result isn’t spectacular but the idea is very original and creative, The techniques are detailed and comprehensive but in a clear way. If you removed the people and changed the back ground it would look awesome. People tend to focus on the end result but theres at least 2 tuts worth of good techniques in there – ignore the naysayers – good job .

  • forward thinker

    I like it – good job : )

  • http://www.georgia-drivingrecord.com/ Georgia Driving Record

    Awesome Tutorial!, all steps with images and every one should understand easily. Good techniques and contrast adjustments.

  • http://www.luca-mercatanti.com Luca Mercatanti

    Brillant!

  • http://www.newgadgets.com New Gadgets

    Amazing tutorial! Thank you

  • http://jacobianjax.blog.com Nichola

    I’ve just bookmarked this posting in Quadriot, i am grateful.

  • http://www.nothing.com Jean Cheryl

    That’s just a point of view. In my oppinion Apple is the best company for high tech things (Iphone for example). I don’t own one because it’s expensive, but I would like to.