Tonight at 7pm GMT we will be streaming a live video feed from our Envato Community Night here in Chicago. This will give you a chance to “hang out” with the Envato staff as we have an informal meet and greet with those who use the sites. Each site editor/manager, including myself, will make a point to come over and say hello. For those who can’t make it, we’ll record the stream for you to go back and watch later.

View Live Broadcast Here:

Sometimes certain scenes are too expensive, dangerous, or even impossible to photograph. This is when people often turn to Photoshop. In only a little bit of time, you can create a very realistic looking image. Today we will be learning how to create an eerie underwater scene. So, get your scuba gear on and let’s get started!

Tutorial Assets

The following assets were used during the production of this tutorial.

• Bubble Brush
• Ocean Background
• Shark
• Turtle
• Coral

Step 1

We are going to first open up the background ocean image, as this will dictate how large our canvas is going to be. You can do this by either dragging and dropping the image icon onto your Photoshop icon, or go to File > Open.

Step 2

Once the background is opened in Photoshop, go to: Image > Image Size. In the popup box, we are only going to modify the Width. Set the width to: 630px.

Step 3

Before you can modify the background image, you are going to need to unlock it. We can do this by double clicking on the layer in the layer panel and by clicking "OK" on the "New Layer" popup.

Step 4

Once the background is unlocked, you can go ahead and drag it down, just until the bright rocks on the bottom are no longer visible. This will allow us to add more water to the top portion of the image. Grab your marquee selection tool and select the bottom portion of the image up to below the waves in the water, and then click the "mask" button in your layers panel.

Step 5

Select the top portion of the water and click "Cmd/Ctrl + J" on your keyboard to duplicate the selection to a new layer. Move the layer up just slightly and scale it upwards just so it covers about half of the transparent portion of the canvas.

Click "Cmd/Ctrl + J" one more time, to duplicate that layer. Take this layer, and move it upwards until it reaches the top of the canvas. Don’t worry about the water looking a little stretched. That won’t be noticeable once we are finished.

Step 6

Now that we have the background filled in, we have to work on the bottom edges of the new layers that we created in the last step. We can do this very simply by using layer masks once again. We do this by clicking on the layer in the layers panel and then click the "mask" button. A new thumbnail image of a white box will appear next to the layer thumbnail.

You will now need to select a midsize brush with a hardness of 0%. We are going to use this brush to gently paint the bottom portion of the selected layer. By doing this, it will make the layer blend in. You will have to repeat this step for both of the water layers.

Step 7

Import the Shark image. You can do this by going to File > Place and navigating to the shark image. Or you can just simply drag and drop the image from your folder directly onto your Photoshop document. Once it is imported, scale the shark to size, and then place it on the right side of the image about halfway up the image.

Step 8

Now it’s time to remove the background from the shark image. We are going to do this exactly like we did in step 6, with the mask tool. Click on the shark layer and then click the "mask" button in your layer’s panel. With a small brush slowly erase around the entire shark, removing the background. The closer you get to the shark, the better the final image will look.

Step 9

You can leave the shark as-is, but I prefer to give the shark more of a gray look. We are going to accomplish this by creating 2 duplicates of the shark and modifying them slightly. First step is to select your current shark layer and changing the Blending Mode to "overlay". You can do this by clicking the box with the word "Normal". This box is located at the top of your layers panel.

Duplicate that current layer (Cmd/Ctrl + J), change the Blending Mode to "Hard Light". We are going to want to "Desaturate" this layer. You can do this simply by clicking "Cmd/Ctrl + Shift + U", or you can do it the hard way by going to Image > Adjustments > Desaturate. This will turn the image black and white. Duplicate the desaturated layer (Cmd/Ctrl + J) and change the layer mode back to "Normal", but this time change the "Opacity" to 60%.

Step 10

Now it’s time to give the background a dark eerie look. Create a new layer above the water background layers and fill it with black. Then grab a very large eraser brush (about 1000 px) and erase the top left portion of the black background. Lower the opacity of this layer to about 65%. Create one more layer and fill it with black. Using the same size eraser brush, erase the top right portion of the layer. This time lower the opacity to 80%.

Step 11

We now have 8 layers in our layers palette and it is looking a little sloppy. We can quickly organize it by selecting the 3 shark layers and clicking "Cmd/Ctrl + G". This will create a new folder with those layers in it. Lets do the same for the 5 background layers (2 black layers and 3 background image layers).

Step 12

At this point, our scene is looking pretty empty. Lets fix this by duplicating the shark and giving him 2 friends. Select the "Shark" folder and drag it down to the "New layer" icon on the bottom of the layers palette. Go ahead and add one just above the current shark and then another on the left side of the canvas. Mess with the opacity and scaling of the shark to give the sharks more "depth".

Step 13

Now that the sharks are all placed, we need to give them a couple of friends, turtles. Go ahead and load the turtle image into Photoshop, exactly like you did with the shark image. At the moment, the turtle is swimming towards the left. We are going to flip the image horizontal so the turtle is swimming towards the right. We can rotate the image horizontal by going to Edit > Transform > Flip Horizontal.

Step 14

We need to now remove the background from the turtle image. We do this the exact same way as we did with the shark. Create a layer mask and then just paint around the turtle. This time, we want to leave a little bit of the coral that is under the turtle. You also want to mask a small amount of the background on the edges of coral. This way there are no hard edges.

Step 15

As you can see, the turtle stands out pretty badly. We need to do pretty much exactly like we did with the shark. Set the turtle layer’s blending mode to "Overlay" and set the opacity to 60%. Duplicate the turtle layer by clicking Cmd/Ctrl + J. Then set that layer to "Hard Light" with an opacity of 100%. As you can see, the turtle is standing out still, we need desaturate that layer. You can do this by clicking "Cmd/Ctrl + Shift + U", or going to Image > Adjustments > Desaturate.

Step 16

One final step for the "Hard Light" layer, is to slightly mask the bottom portion of it. We can do this by clicking on the "mask" thumbnail on the layer. Then with a black brush with the size of about 300px and a hardness of 0%, gently paint the bottom half of the turtle and coral. This will help make the turtle and coral blend in with the background Now, take both of those layers and put them into their own folder called "Turtle / Coral". You can do this by selecting both layers and clicking "Cmd/Ctrl + G".

Step 17

The turtle feels a bit out-numbered because there are so many sharks, so lets give him a friend. You can make a copy of the turtle, just like we did with the shark, by dragging it to the "new layer" button at the bottom of the layers pallet.

The problem with just cloning the turtle is that it has the little bit of coral at the bottom of the image, so we are going to have to remove that. Rather than redoing all of the previous steps, we are going to just add a layer mask to the folder. You can do this by clicking the folder, and just like with a layer, you click the "mask" button at the bottom of the layers pallet. With the mask created, paint away the rest of the coral with a small brush. Now, you can place the turtle at the upper left corner of the canvas. I recommend scaling, rotating and lowering the opacity to give it some depth.

Step 18

There is one more image for us to work with. This will just be repeating the exact same steps as the turtle. Go ahead and load up the Coral image and place it on the lower right corner of the canvas. Mask out the background, just like we did with the other images. With this image, all we have to do is change the layer Blending Mode to "Overlay" with an Opacity of 40%.

Step 19

Now that we are done with the images, we can begin adding a little detail. We are going to add bubbles to the water, to give some character to the fish. First, we will have to load the bubble brushes. You do this by right clicking the canvas. In the brush selection pop-up, click the arrow on the top right, go down to "Preset Manager." In the "Preset Manager" window, make sure your Preset Type is on "Brushes", then click on the "Load" button and load the brush file.

Step 20

Your brushes are now loaded, but painting 1 bubble at a time would take way too much time. We can save time by simply modifying the brush. Click "F5" to open your brush menu, or go to Window > Brush. Select the bubble brush with the number "690." In this window we are going to do the following: Size: 6px – Spacing: 210%. On the left, click "Shape Dynamics." Size Jitter: 30% – Minimum Diameter: 10% – Angle Jitter: 10% – Roundness Jitter: 20% – Minimum Roundness: 25%. On the left, click "Scattering." Scatter: 1000% – Count: 1 – Count Jitter: 18%. You don’t have to worry about any other settings.

Step 21

Now that your brush is set, create a new layer and make sure your brush color is white. Then paint the bubbles. I like to give 1 to 2 rows of bubbles (vertical rows) by each mouth and gills. You can also add a few in the background. Pretty much anywhere you feel bubbles should be placed. Feel free to play with the brush size. Once your bubbles are brushed, lower the bubble layer’s Opacity to about 20% to 30%.

Step 22

We need to go back to a "default" paintbrush. You can do this by right clicking the canvas and in the brush selection menu, just select one of the round brushes at the top. Set the size to about: 35px and make sure the hardness is 0%. Create a new layer and make sure your brush color is white. Now, we are going to paint "rays" coming from the top right of the canvas.

Step 23

We need to now make the sunrays blend in quite a bit better. First step is to add noise to them. You can do this by going to Filter > Noise > Add Noise. Make the amount 16%. Then add Gaussian Blur. Filter > Blur > Gaussian Blur. Make the Radius 22.0 pixels. Lower the layer Opacity to about: 20%. If you feel that the light rays are a little too "heavy", you can create a layer mask, and gently mask out certain portions of the rays. For example: the bottom edges, and parts that intersect with the fish.

Final Image

Congratulations, you have successfully created an eerie underwater scene.

Out of Bounds (OOB) is an interesting photo effect where the object or scene in the image seems to jump right out of the photo or its borders. It is a photo manipulation technique to add an illusion of 3-dimsnsionality to a flat photo. Getting an interesting OOB effect depends largely on the photo angle and the overall execution of the concept. It is lots of fun to create an OOB effect. You can use any photo editing software such as Photoshop or Gimp. With some imagination, creativity and basic photo editing knowledge you can create an amazing OOB image that captivates the viewer’s attention. This article showcases 50 most spectacular examples of Out of Bounds photo effects. We have also featured some excellent tutorials if you are interested in learning how to create this effect in Photoshop. So lets venture into this mesmerizing world where you will find creatures, people, and vehicles jumping right out of the screen.

• 50 Captivating Out of Bounds Creations
• Tutorials on Out of Bounds Effect
• Further Resources

50 Captivating Out of Bounds Creations

The Train

Lizard Popping Out

Get Me Out

Get Me Out is an amazing surreal styled Out of Bounds effect. The old antique photo frame, the expression of the subject and the clever use of lighting and shadow gives the entire image an extra dimension and adds a surreal effect. You can easily create a photo effect like this with a great original image, some stock resources, if necessary and with the effective use of Photoshop . Some of the tutorials featured at the bottom of this article can also guide you to create a surreal Out of Bounds illustration.

Bridge

Napoleon

Wildlife Book

You would not want to read a wildlife book where animals come out of the book! The concept of creating an Out of Bounds effect with the book is brilliant. The idea is beautifully executed.

VROOOOOM!

You might have seen many Out of Bounds effects with a car jumping out of photo frame, but this one is fantastic. The dust, the tire tracks and the whole execution of the concept adds action and depth which makes the outcome realistic.

Dress Lady

Fish – Out of Bounds

Snake Book

Snake Book is another very unique and original idea where the subject, a snake in this case, is shown coming out of magazine’s page. It is amazing to see how 2 different images (a book and a snake image) are put together and how the whole composition is given an Out of Bounds effect.

Holding Hands

Holding Hands is a clever example of what you can do with Photoshop. The concept is brilliantly executed with five different images of hands pulled together to create a simple yet incredible piece.

Bridge To Somewhere

Hungry Snail

A cool Out of Bounds effect of a snail coming out of a photo for food. In this meticulously executed idea, four different source images are used and they work really great together.

Hang On

Taking Off

The Escape

The idea of television sinking in the sea and the cute joyous fishes jumping out of its screen makes The Escape a visually appealing piece of Out of Bounds photo effect.

Sports Gallery

Escape in Time

Cave Nymphs

Out of Boundry

Possible with Photoshop

Slides

Slides is an amazing and unique style of Out of Bounds effect with the creatures coming out of slides. The little details like water drops and dirt really add to the over all image and keeps the viewers attention.

Interactive

That is one smart monkey who can jump out of photograph for food, a very interactive piece indeed.

Waterfall

Humm, Pizza

It wouldn’t be wrong to say that Humm, pizza is a drooling and mouth watering Out of Bounds effect. If you ever wished you could eat your favorite food directly from an advertisement or photo, you can do that with Photoshop.

The Lady Loves Chocolates

And if you think pizza isn’t enough, here are some chocolates.

Zodiac

Honeymoon

Honeymoon is a cool romantic example of Out of Bounds effect. The expression on the face of subject, the way he is jumping out of frame, the colors of the image and the background scene makes it an awesome piece of work.

OOB Guy

Battle

Out of Bounds – OOB Art

Loves Me

Surfing

Pulling Crackers

In Pulling Crackers, subjects are coming out of hinged picture frame. The soft pastel colors of the images in frame and all the decoration around it makes it a beautiful piece.

Internet Kiss

Riding China Style

Living Art

The Easy Way

Photoshop Solutions

A creative way to solve water shortage problems.

Comming Out Clean

Spiderman

Reaching Out of Bounds

Catch of the Day

Bubbles

Sticking Out

Snail

Beer

Hold Yourself Together

This actually is not an out and out photo manipulation but a drawing done with a graphite pencil from a reference. The style of this portrait is really very creative, all the pieces of polaroids with the hands holding them makes the concept an interesting Out of Bounds artwork.

Little Artist

Bridge

It is impossible to not get inspired and fascinated. Well, I also created one Out of Bounds effect.

Tutorials on Out of Bounds Effect

Create an Out of Bounds Fantasy Illustration

This fantastic tutorial from Psdtuts+ shows you how to create an Out of Bounds fantasy illustration where you create a painting on a wall which is a real world. It guides you through the process of creating a fantasy scene, making water pour out of a painting. You can create this surreal illustration with the use of absorption effect, colors and a variety of stock resources. You can also watch a video tutorial complimenting this text and image tutorial. If you have never experimented with surreal concepts in your artworks and want to incorporate it, we have an excellent Creative Sessions’ article, Incorporating Surrealism Concepts into Your Digital Artwork to guide you.

Out-of-Bounds

A simple and easy tutorial that can get you started with Out of Bounds photo effects. This tutorial shows you how after carefully analyzing the image you should decide where the best perspective is for the frame (the part that will set it out of bounds), how to hide the part of image with Layer Mask and how to add the shadows to add the extra dimension to the image.

Create an Out of Bound Photo in Photoshop

This easy to follow tutorial shows you how to create Out of Bounds photo effects in Photoshop using the Polygon Lasso Tool, Warp Effect and how you can tweak the colors using color saturation levels.

3D Border Breakout

A detailed step-by-step tutorial on how to create an Out of Bounds effect. This tutorial also shows you how to give the illusion that the subjects are jumping out of the picture by adding depth through perspective, shadows and some imagination.

Photos Out of Bounds

Here is a fun Photoshop tutorial that shows you how to make a picture jump out of the frame into another photo. You’ll use two images for this tutorial, Pen Tool to extract the part of image, Transform Tool to set up perspective and Layer Styles for more effects.

Using Photoshop To Make an Image Jump Out of Frame

The following tutorial teaches you how to create an Out of Bounds photo using basic Photoshop skills to isolate the target, giving it a realistic look with proper perspective and other effects. It highlights the importance of choosing the right photo to get a true 3D effect.

Create an Out of Bounds Surreal Photo Manipulation in Photoshop

This tutorial is a detailed walkthrough of an artwork, which shows you how to create a surreal out of bounds effect in Photoshop. The tutorial uses variety of stock images and highlights the advantages of adjustment layers and how important they are to create a intense photo manipulation. In this detailed step by step walk through it is interesting to see how the subject, a shark in this case is shown coming out of antique photo frame and how the photo manipulation is given a realistic look using various Photoshop tools and effects.

Midnight Magic Scene Creation in Photoshop

This again is a very interesting tutorial if you want to show a subject coming in or going out of TV screen and a big photo frame. This tutorial demonstrates how you can give a dramatic effect to the scene by using Blending Modes, Layer Styles and Photoshop Filters.

Photo Cutout

This tutorial demonstrates a very simple technique where the subject is extracted from the image using Extract tool and a clever use of Layer Mask to hide the part of image to create a effect that makes the subject look like it’s coming in or out of a photo. In this tutorial you will learn how to use Photoshop’s Extract tool, Layer Masks and Layer Styles to create a cutout from a photo.

Out of Bounds Photoshop Action

And finally, a bonus! This actually is not a tutorial but a Photoshop Action which simplifies the steps needed to create the impressive Out of Bounds photo effect. The Action allows you to define the border size, the perspective of the image, the out-of-bounds areas and you can also add the shadow effects. The action is very flexible and makes use of layer masks, which allows you to fine tune the effect at a later stage. There is also a video that guides you through the process of using this Photoshop Action to create an amazing OOB photo effect. At Panosfx you will also find some more great Photoshop Actions.

Further Resources

As you work through above tutorials to create an OOB effect (or any photo manipulation) it is essential to know some of the basic Photoshop techniques like working with Layers, Layer Masks, Selection and Transform techniques. Below we have listed the links to some of those tutorials.

• Working with Layers in Photoshop
• Unveiling Photoshop Masks
• A Basic Guide to Photoshop CS4 Adjustment Layers
• A Comprehensive Introduction to Photoshop Selection Techniques
• Using Transform in Photoshop
• Photoshop 101: How To Use The Free Transform Tool
• 10 Steps to Improving Your Photoshop Skills
• 30+ Useful Resources for Improving Your Photoshop Efficiency

Recreating electronic devices in Photoshop is a great way to learn. Today, we will demonstrate how to create a Motorola Droid style phone in Photoshop. Let’s get started!

Step 1

Start by creating a new 2000 x 2000 px canvas and save it as "phone.psd." Use the Pen Tool to the outer silhouette of the device. Make sure it is black. Name it MAIN BG.

Step 2

With the Pen Tool, draw a shape for each main section of the phone. Notice that we are leaving a small gap between the shapes to give the illusion of separate parts. Organize your shapes in groups ( Cmd/Ctrl + G ), and rename the layers as seen below.

Step 3

Now make the side of the phone and again organize and rename them as shown below. It is very important to keep your layers organized because this project requires many layers.

Step 4

Now that we have defined the main parts of the phone, let’s start adding some shading. Double click the "Front / bottom / 1" layer , and apply a Gradient Overlay with the settings shown on the image below. Drag the mouse onto the canvas, and with the Layer Styles Window open and Gradient Overlay selected, reposition your gradient.

Step 5

Duplicate the "Front / bottom / 1" layer (Cmd/Ctrl + J), rename the duplicate to "2", and apply a Gradient Overlay and Inner Shadow with the settings shown on the image below. Press OK.

Step 6

Close the "Front / bottom" group. Select and double click the "Front / center / 1" layer. Apply a Gradient Overlay with the same settings on the picture below. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 7

Duplicate the "Front / Center / 1" layer (Cmd/Ctrl + J), rename the duplicate to "2", and double click to apply a Gradient Overlay with the settings seen on the following image. Press OK.

Step 8

Close the "Center Group" and select the "Front / Top /1" layer. Double click it to apply the Gradient Overlay with the settings of the image below. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Remember you can drag on the stage to move the gradient while the Layer Style Window is open and Gradient Overlay is selected.

Step 9

Duplicate the "Front / Top /1" layer ( Cmd/Ctrl + J) , rename the duplicate to "2", and double click to apply a Gradient Overlay with the settings seen on the image below. Press OK.

Step 10

Close the "Front " group, double click the "Side / Side_Bottom / 1" layer to apply a Gradient Overlay as seen in the following image. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 11

Now, double click the "Side / Side_Back / 1" layer to apply a Gradient Overlay as seen in the following image. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 12

Duplicate the "Side / Side_Back / 1" layer (Cmd/Ctrl + J). Rename the new layer to "2", double click it to apply a Gradient Overlay with the settings seen on the image below. Notice that now the blending mode of the gradient is set to Multiply because we are making a shadow (not a light) on the right left corner. Drag the gradient to reposition it to the corner. Press OK.

Step 13

Duplicate the "Side / Side_Back / 2" (Cmd/Ctrl + J) layer. Rename the new layer to "3", double click it to apply a Gradient Overlay with the settings seen in the following image. Again, notice that now the blending mode of the gradient is set to Multiply because we are making a shadow (not a light) on the bottom left corner. Drag the gradient to reposition it to the corner. Press OK.

Step 14

Close the "Side / Side_Back" group and double click the "Side / Side_Center/1" layer to apply a Gradient Overlay with the settings seen on the image below. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 15

Close the "Side / Side_Center" group and double click the "Side / Side_Top/1" layer to apply a Gradient Overlay with the settings seen on the image below. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 16

Now, close the "Side" group, and with the Pen Tool, make the shapes for the buttons and the speaker. Make a small circle with the Ellipse Tool (u) for the microphone. For the center part of the speaker make a shape and paint it grey (bfbfbf). Organize all shapes following the image below.

Step 17

Double click the "Buttons / 1" layer, and apply the Inner Shadow and Gradient Overlay following the settings of the image below. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 18

Do the same with the "Buttons / 2" layer, apply the Inner Shadow and Gradient Overlay following the settings of the image bellow. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 19

Do the same with the "Buttons / 3" layer, apply the Inner Shadow and Gradient Overlay following the settings of the image bellow. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 20

Do the same with the "Buttons / 4" layer, apply the Inner Shadow and Gradient Overlay following the settings of the image bellow. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 21

With the "Buttons / 4" layer selected, create a rectangle anywhere on the space using the Rectangle Tool (U). Rename the layer of the rectangle you just created to "All". Now select the Path Selection Tool (A), select the path of the "Buttons / 4" layer, copy it (Cmd/Ctrl + C), and paste(Cmd/Ctrl+V) it onto the path of your "All" layer. Do the same for "Buttons / 3" layer, the "Buttons / 2" layer, and the "Buttons / 1" layer. This may be a little tricky to understand, but following the image below illustrates how it is done.

Step 22

Now double click the "All" layer and apply a Gradient Overlay and Inner Shadow following the settings of the image below.

Step 23

Close the "Buttons" group and select the "mic / Mic" layer. Make sure it is Black and its Fill is at 100%. Apply a Bevel and Emboss with the settings of the image below. Press OK.

Step 24

Close the "mic" group and select the "speaker / Speaker" layer. Apply an Inner Shadow and Gradient Overlay with the settings shown on the image below. Press OK. On the Layers Window, turn the Fill of the layer to 0%.

Step 25

Now lets make the center part of the speaker. Create a new document with size 4 x 4 px. Zoom in as much as you can. With the Mask Tool (m) make a selection like in the picture below. With the Paint Bucket Tool fill the selection with black. Deselect all (Cmd/Ctrl + D) and go to the menu Edit/ Define Pattern , a window will prompt for you to write a name for the Pattern, write any name and press Ok.

Step 26

Go back to the file phone.psd and double click "speaker / Speaker center" layer. Add a Gradient Overlay, Inner Shadow and Pattern Overlay with the pattern we just created. Check the picture below for the settings.

Step 27

Let’s create the HDMI plug. Start by selecting the Pen Tool (P) and drawing the outer shape of the plug. Rename it to "1" and press (Cmd/Ctrl + G) with the layer selected to make a group. Rename the group to "HDMI plug". Then apply a Bevel and Emboss style to the "HDMI Plug / 1" layer following the settings on the picture below.

Step 28

With the Pen Tool, create another Shape over the last one, make sure its color is CCCCCC and apply an Inner Shadow Style with the same settings as those on the following image.

Step 29

With the Pen Tool, create another Shape over the last one. Make sure its color is 797979 and apply an Inner Shadow Style with the same settings as those on the following image.

Step 30

With the Pen Tool, create another Shape over the last one, Make sure its color is 343434.
And your HDMI plug is done.

Step 31

Let’s make the USB plug. With the Pen Tool, draw the outer shape of the plug. Make its color 0e0e0e. Rename it to "1" and press (Cmd/Ctrl + G) with the layer selected to make a group. Rename the group to "USB plug".

Step 32

With the Pen Tool, draw the inner shape of the USB plug. Make it black 000000. Rename it to "2". Apply the Inner Shadow, Inner Glow and Gradient Overlay styles following the image below.

Step 33

Let’s make the display screen. Start by drawing the outer part of the screen. Make it black 000000.

Step 34

Draw the inner part of the screen name it "2" and hide it. Paste the image you would like to be in the screen over the "Display / 2" layer and rename it to "wallpaper" (I am including a beautiful image with the source files in case you wish to use it). With the Cmd/Ctrl key pressed, select the Vector Mask Thumbnail of the "Display/2" layer. That will make a selection. With your "wallpaper" layer selected, press the Add Layer Mask button to hide the part of the wallpaper that is outside the screen. Now click the small chain links that appear on your "wallpaper" layer to disable the link between the layer and its mask With the thumbnail of your "wallpaper" layer selected, press Cmd/Ctrl + T to transform it, and press the Cmd/Ctrl key to distort the image you are using as wallpaper to match the phone’s perspective. Press Return key when you are done. Apply a Gradient Overlay and an Inner Shadow style to your "wallpaper " following the settings shown at the bottom of the image below. Press OK. Finally, again enable the link between your "wallpaper" layer and its mask.

Step 35

Let’s do the glare of the screen. With the Pen Tool, make the shape of the glare over your "wallpaper" layer. Rename the layer to "glare" and apply a Gradient Overlay Style following the settings of the image below. Turn the Fill of the layer to 0%. Press OK.

Step 36

Now go and download the USB, HDMI, and MOTOROLA logos. Paste them into your "phone.psd". Using Cmd/Ctrl + T to transform, and the Cmd/Ctrl key while transforming to distort your logos to match the perspective of the phone. Place all the logos in a group named "Logos". All the shapes of the logos should be color grey 959595.

Step 37

Now do exactly the same with the icons. The only difference is that you will have to draw them with your Pen Tool using a reference image. Make sure the four icons are color grey d7d7d7. Make a group with all the icons and name it "Big Icons". Do the same with the three big icons, but make them color white FFFFFF, and set their Fill to 50%.

Step 38

If you are still here with me, it means you are an extremely patient and detail-oriented person, so let’s take it a little bit further and add more detail to make our phone look even more life like. Make a new 100 x 100 px document with a black background. In the menu, go to Filter/ Noise Add Noise following the settings on the image below. Press OK. In the menu go to Edit / Define pattern, and name it "Noise".

Step 39

Go back to your "phone.psd" file. Double click the first layer you created, "MAIN BG", and apply a Pattern Overlay style with the pattern "Noise" that you just created following the settings on the image below. Press OK. This will add some texture to the plastic.

Step 40

While pressing the Cmd/Ctrl key, select the Vector Mask Thumbnail of that same "MAIN BG" layer. This will select the entire phone. Now press the "Create New Fill or Adjustment Layer" button at the bottom of the layers window and select "Foto Filter.” This creates an adjustment layer named "Photo Filter 1" over the "MAIN BG" layer. Drag "Photo Filter 1" to place it between the "USB plug" group and the "display" group.

Double click the thumbnail of the "Photo Filter 1" layer and the "adjustments" window will pop up. Apply the same settings as those on the image below.

Step 41

Using the Shift Key, select all layers and groups, from "MAIN BG" to "Big Icons", and press Cmd/Ctrl + G to make a group with everything inside. Name that group "Final Phone". Drag the "Final Phone" group to the "Create a New Layer" button at the bottom of the layers window. This will duplicate the "Final Phone" group. Select the new "Final Phone Copy" group and press Cmd/Ctrl + E to merge all layers inside that group into one layer. Rename it to "Reflected". Select the "Reflected" layer and go to the "Edit / Transform / Flip Vertical" menu.

Step 42

Now drag the "Reflected" layer to its final position. Press the "Add Vector Mask" button at the bottom of the Layers Window. Ensure you have white as your foreground color and black as your background color. Within the Mask Thumbnail of the "reflection" layer selected, drag from top to bottom. Finally, paint the Background layer with gray "c2c2c2".

Final Image

Like his creations, there are many layers to Garry Milne. While some of his images may have dark undertones, Milne is anything but. Here he talks about his inspirations, skateboarding and the importance of being nice to people.

Mark Twain once said, “Clothes make the man.” If such a statement is true then we’re in for a hell of a ride with UK-based Illustrator Garry Milne as he describes his usual outfit as being a skin tight zebra print jumpsuit. That was quickly followed by the obligatory, “I’m kidding,” of course but still…

So do I start with Garry Milne the person or Garry Milne the artist? Both are equally fascinating. Here are some quick facts about him: he enjoys a “super nice” White Russian, can flick his slipper into the air and catch it back on his foot, and chose the 1990s hip hop anthem “Jump” by Kriss Kross as the music to feature on his MySpace page, though on that same page he says his favorite kind of music is “anything with a pan-pipe solo long enough to make me question what I’ve done with my life.” If that alone doesn’t endear you to him then maybe I should mention the fact that his intricate, complicated illustrations have been featured in publications such as 4 Talent Magazine and The Skinny’s Student Guide.

The Secret’s Out

Milne currently resides in a flat in Hertfordshire with his girlfriend Nadine who is pursuing a PhD in Psychology. It makes you wonder if she can read into Milne’s complicated illustrations and discern anything about the inner workings of his mind. He assures me that he never puts any secret images or inside jokes into his client work but “that’s not a bad idea, though…maybe [I] should!” He says he leaves the “strange stuff” for his personal work.

As a child he said he was loud and outgoing, and credits that to having an older brother to look after him. In addition to his older brother Stuart, his family consists of his parents who have always been extremely supportive of his artistic endeavors, allowing him to “make a mess of their living room for many years.” Stuart, who has featured some of his photography work alongside his brother’s in an exhibit titled “Milne vs. Milne”, was a different story in Milne’s early days. According to him, his older sibling taught him his first lesson in perseverance, in a way that only an older sibling can:

"I drew a picture of the Bushwackers- a WWF wrestling tag team back in the day. I was so pleased with it and I was showing everyone. It was sooo bad but everyone was being nice. I showed my brother and he couldn’t keep the laughter in – he cracked up. I got in a strop and tore it up. The next day I did another one which was better than the first. I think that taught me a valuable lesson about not settling on your first attempts."

Lessons Learned

Interesting enough, Milne passes that “big brother torch” to those starting out in design, “Don’t give up. No matter how unlikely it seems – remember why you started art/design – because you love it and things will happen. Also be nice to people. It’s a real cliché, but knowing the right people is a big part of the game.”

Right now Milne has a day job as a Graphic Designer at a local company where he does the typical promotional and corporate work. It’s at night and some weekends when he does his illustrating and creates pieces like Day Dreamer, Head or Heart and Piece Offering. I wouldn’t have been doing my job if I didn’t be a pain and ask him to explain that one, particularly because he describes it on his website as a “Personal comment on how I sometimes avoid explaining my work.” Milne played nice and answered the question for me, but I feel like I’d somehow be taking away some of the mystique if I revealed his answer.

To prepare for his career Milne went to school and then stayed on to 6th form before heading to college to do an art foundation degree. After that he went on to university to study graphic design and Illustration. While at university he chose to specialize in illustration, but also learned a lot about design. About that he says, “That has helped me develop my style and also helps when it comes to commissions – I’m not just providing illustrations.”

After university he started doing some freelance design work and then concentrated on illustration. As is common, it took a while for him to get work and be noticed. This is where his big brother’s earlier lesson in perseverance kicks in again. “Once I was given a few briefs – more seemed to follow. I think it’s just a case of proving you can deliver a job and being in mind when the right job comes up.”

Patience is a Virtue

So far Milne’s been lucky enough to have fairly long deadlines when it comes to his work so it lets him take on more than one project at a time. While he handles those deadlines like the consummate professional that he is, he admits that they can be hard sometimes. "If you get really into a brief sometimes you’d just like to continue working on it, maybe change some things – take it further."

Luckily, though, Milne says he seems to get “fairly open briefs [and] usually the client tell me their loose idea or some aspects they want featured and I get to work.” He always starts with pencil drawings that are then scanned in and colored on the computer. Though he typically has a rough composition in mind when he starts, that often changes while he works using pencils, pens, paintbrushes, a scanner and a Mac. When in the need for some inspiration he turns to his large collection of art books as seeing the work of others makes him want to create something of his own.

Working on that Mac has sped things up when it comes to the amount of time he spends on each illustration and the longest he’s ever spend on a computer-generated one is two weeks. The longest he’s ever spent on one piece was a painting that took him two months. While painting is his favorite artistic activity, it’s something where he finds he lacks the patience he’s mastered with his illustrations. “I really enjoy painting. When you can see the effort that’s gone into a painting it’s hard not to appreciate it on some level. I’m a little impatient though – I want to see the end result now.”

One of Milne’s current projects is a series of skateboards for Motive which will be released soon. Skateboarding is another passion of Milne’s. He’s been very active in it since he was a child and even gave up playing football and basketball in school in order to pursue that more. There was a time when he thought about pursuing a professional career in it but that “didn’t really work out.” While participating in skateboarding may not have worked out career wise, it doesn’t mean that it hasn’t still played a big part in the career path he did choose. The Motive project won’t be his first foray into designing boards. He’s also done a series for Discipline, which he features on his website.

I really enjoy painting. When you can see the effort that’s gone into a painting it’s hard not to appreciate it on some level.

A Clean Slate

Other than skateboarding, Milne never really set out into the world with a clear idea of what he wanted to pursue. Maybe that’s why his favorite part of any project is the blank page. That page doesn’t stay blank for long, though at the moment his workload is heavy since he’s juggling a full-time job and his freelancing. Eventually, though, he’d like to be able to devote more time to his freelance illustrating, painting and exhibiting.

At 27, though, Milne has learned some hard lessons about the design world. “Don’t take things too literally. You can get promised a lot of things and sadly they rarely come through. That sounds a bit pessimistic but just don’t get too excited about things until they’re definitely happening.” It’s safe to say, though, that things are definitely happening with this brilliant illustrator.

More From Garry Milne

On the Web

Check out Garry Milne on the web.