Person of Interest Style Wallpaper & Tutorial

By Stacy David Wallingford | November 8, 2011 at 10:19 pm | 3 comments | Tutorials | Tags: Illustration, tutorial

One of my favorite shows on television is the new CBS show Person of Interest. I really like the  style of the show so i decided to create a desktop wallpaper based of the shows style and put it up as a tutorial. These following techniques are the ways that i found easiest for me to recreate this style. I used mostly Adobe Photoshop for this illustration but i did make a few of the elements in Adobe Illustrator so if you want to follow along with this tutorial be ready for that. Here is the final version of the wallpaper.

Step 1 

The first thing that you will want to do is open a new document in Photoshop and set the specs to > Width: 1280 | Height: 800 | Resolution: 72 | Color Mode: RGB

Step 2

The next thing you will need to do is open your main image for the illustration. For my illustration i’m using an image of a crowded New York City street that i downloaded from Photodune here.

Step 3

After you have opened your main image and placed it on your 1280 x 800 canvas we are first going to add a vignette to the image. To do that i used the Gradient Tool (G). First I made a new layer and then set the gradient setting to the ones shown below.

Make sure you select a transparent gradient. Then set it to Radial Gradient and make sure the Reverse and Transparency boxes are checked. Once I applied the gradient I reshaped it to look something like this.

I then set the transparency of the gradient layer to 80% and gave it a color overlay of #191b33. I also selected the main image and went to Image > Adjustments > Levels and moved the black slider right to 30. After a little more resizing were at this.

Step 4

Now we can start adding camera elements to the illustration. The first thing i did was go to Adobe Illustrator and make the boxed crosshairs that are used to pin point people. I created a really simple design using the Rectangle Tool, Line Segment Tool, and Add Anchor Point Tool. I came up with a shape that closely resembles whats used on the show which i have shown below.

Then i simply copied and pasted the object into my photoshop document. Next you will want to give it a white color overlay and change the transparency to 60%. I then resized the crosshairs around one of the people in the picture. Then just simply press (command – J) to duplicate the crosshairs and place them on other various people in the picture. I placed crosshairs on five different people like this below.

Step 5

The next thing we can do is start adding elements that show that the machine is gathering data on the people that it is pin pointing. So i’m going to create info for the man in the bottom left corner who appears to be talking on his cellphone. To do this i created a graphic with phone call information on it. Here is the graphic below.

To create this graphic by making a rectangle and changing the transparency to 60%. Then placed the text over the top using a typeface called Candara. I created the voice levels graphic in Illustrator using the Line Segment Tool. Then copied, pasted, and resized the graphic into the proper place.

The second graphic that i made is for the man on the right who appears to be carrying a large package. I created the shapes for this graphic in Illustrator, copied and pasted them in photoshop, and then placed the text over the top. The second graphic looks like this below.

Im not being very specific about the graphics i created because you of course don’t have to create them exactly like i did. They are just a close representation of what you will see in the opening sequences of the show.

The next thing we can do is add fake social security numbers over the other crosshairs i made. I used the same type, Candara, for the text of my ssn’s. For my numbers i used X’s for the first 5 numbers and actual numbers for the last 4.

After all the graphics have been added the wallpaper should look something like this.

Step 6

One of the final things that i did was add transparent parallel lines over the entire wallpaper to make it look like it is the view from a street camera. To do this i create a pattern of thin lines in Illustrator that were 1pt in size and 3 spaces apart. Here is what my Illustrator file looks like.

Then i copied and pasted the lines over the entire photoshop image and changed the transparency to 30%.

The final outcome ends up being this

Download this Person of Interest style wallpaper for your desktop here.

Have any suggestions for my wallpaper? Would you have done something differently? Let me know in the comments.

Get emails when a new free resource gets posted!