See the final result at its original size

Download the Photoshop Work file (v2)

Let’s get Started with Step 1

Open up photoshop and bring out your canvas. You’ll want a lot of space to work with, so don’t be shy to start with a fairly large canvas. Each project will differ, so you’ll need to be the judge on the amount of space you want (I went with a 940 x 710 canvas).

Pic a solid color for your background, and used the bucket tool (quick-key: ‘G’) to fill it in. If you want lighting to show, try picking a dark color, as it will be much easier to show it than in bright backgrounds. For this piece, we will choose the color black

Step 2

Now grab a fancy brush set, and use it to create a vector/pen-tool like effects around the center of the canvas. If you don’t know how to install brushes, read the next section at of this tutorial to get some help with that you that. If not, just skip to the next part.

Installing Brushes:

After you download the brush set (it should come in either a .abr file, or a .zip. If it’s a zip, unzip it to be able to get to the .abr file).

After you have that ready, go back to photoshop, and select the brush tool (quick key: ‘B’). Click on the drop down menu for the brushes in the top bar:

Now click on this button () on the top right corner, and go down to load brushes. Select the brush set you want (the .abr file), and click ok. The brushes from that set should now be found at the end of you current brushes, and ready to be used!

Step 2 (Continued…)

As for brush sets, the one I used can be found here: http://axeraider70.deviantart.com/art/Winter-Breeze-Brushes-44617350, and full credit goes to the maker of the set.

If you are familiar with the Pen-tool, however, draw a few line shapes flowing outward from the center of the canvas, as well as some small circles spread throughout. You will want a similar effect as shown below:

As for what color to use, again, it depends on what you want your final product to look like. If you want something fiery and exciting, use warm colors (red, orange, yellow, etc…); if you want something more cool and sophisticated, pick colder colors (blue, green, purple, for example). You will have to keep these decisions in mind throughout the tutorial, but make sure you stick to a certain type.

After you have your layer of the vector shape, you will want to duplicated it (right click on the layer > duplicate), and flip it horizontally. One way to do this is to press Ctrl/⌘+T while editing the layer you want to flip, then right click and choose Flip Horizontally. Make sure it centers nicely, as shown below:

Step 3

Now we’re going to be playing around with a few brush settings. Get out the default &ldquot;Soft Round 9 pixels&rdquot; brush (it comes pre-installed with photoshop), then open up the brush settings. Now use the following settings on your brush:

Brush around a bit in your canvas until you get a suitable effect. You’ll want this to cover a good area of where you’ll be working. Also, make sure to brush in the color white. Leave this layer in Normal, and set the opacity to around 85%

Step 4

To start out our techy look, grab the pentool, and draw some shapes that come out of the center of the image and are a techie shape. This can be hard to do with the pentool/default brushes alone, so downloading a brush back is recommended. You can utilize whichever one you prefer, but for reference, I used these in my artwork: http://wizard-studios.deviantart.com/art/Technetronic-Brush-Set-40742521. Use a soft brush eraser to erase around the edges of some parts:

Step 5

Before we start the next part, we’ll have to go over a new type of outside tool that can be used in graphics for photoshop: C4D renders.

If you know about these, and know how to use them, then you can skip this paragraph. If not, follow along my friends.

C4D is a 3D render program that allows people to create virtual images in very detailed 3D. The most common use of this program is for models, but some people also make these renders to be used in photoshop, to add an amazing effect to a piece of art. There are two main types of C4Ds we will be dealing with: Effect C4Ds, and Render C4Ds. Effect C4Ds are used for lighting, and they’re just mainly glows and reflections.

An example can be found here: http://ess3nce.deviantart.com/art/C4D-Effect-Render-4–35285672. Render C4Ds, on the other hand, are abstract renders used to implement a particular art work with extra effects.

Another example can be seen here as well: http://drugi.deviantart.com/art/Underwater-c4d-54685612. Again, all credit goes to the creators of the individual art works. I won’t be able to tell you exactly which ones to use, as it is impossible to recycle C4Ds for every need. The best places to find them, however, are http://www.deviantart.com/, http://planetrenders.net/, and sometimes even google.

All the C4Ds I used can be seen in the .psd file provided along with the tutorial, so if you wish to use them, or want to see what they look like, just check the layers.

Now to move onto actually using these. Find a nice and flowy Render C4D, and make sure it is in a bright color. You’ll want it to flow along with the direction of the previously drawn red Pentool shapes. Resize it, and erase parts of it that don’t fit, to get something like this:

Just as it was done with the red Pentool, flip it horizontally and place it to that it flows nicely off the middle of the canvas:

Step 6

Now it’s time to grab another c4d. Pick one that flows nicely with the image, and has a color you want for the final product. Make sure it’s a compact one, and doesn’t have too many parts flowing out of it. Place it in the center of the image, then set the blending mode of the layer to Lighten. To change blending modes of layers, there is a drop down bar in the layers window:

The just go down the the layer mode you need, and select it. This will be a technique used throughout the tutorial, so make sure to remember how to do it. Next, go Filters > Distort > Ocean Ripple, and use these settings on it:

As always, erase what you don’t like with a soft brush, and the result should come out something like this:

Step 7

You guessed it: it’s time for another C4D. However, this is an important one, so much sure you chose it wisely. You’re going to want one that sort of acts like a case for your product. We’re going to be placing the iPhone on the center of the canvas, so the &ldquot;shell&rdquot; C4D must appear to sort of circle around the product. It’s hard to explain, but if you look at the .psd file and the image below, you will see what I mean.

If any part of this C4D is going to be erased, you should use a Hard brush instead of the Soft brushes we’ve been generally using.

Once you have your C4D picked out, place it properly in the canvas, while trying to envision where your product will be placed. You should have something like this:

To help with picking out your shell C4D, here’s a view of only it on a black background:

Step 8

It may no seem like we have much now, but it’s all about to come together soon. This is the important step where you will place your product. To prepare the product, first take a nice picture of it on a plain background.

After you open this in a different file, first thing you should do is right click on the only layer (should be labelled background), and go to Layer from Background. Click Ok, and you will now be able to use transparency in your picture. Grab the crop tool ©, and make a selection around the picture you want to use. After you’ve selected, simply right click and go to crop. You should have the area around your product now

Now, if your picture is in a plain background, you may be able to get away with just using the magic wand tool (W). Play around with the Tolerance (the more tolerance, the more of different colors similar to the one you picked it will select. After your selection is done, erase it. You should now have an image of your product on a transparent background now. If your image is not just a plain colored background you can erase, you’ll have to use the pen tool. Grab it, and then make points around the product to select only it. Make sure you hold down shift and click and time you want to make straight lines, and hold down and drag after making the point to make curves. A finished path should look like this:

Now right click on any of the points (with the pen tool), and click on Make Selection. Press ok, and you should have a selection around the product. Press ⌘-⇧-I (Ctrl+⇧+I) to reverse the selection around the product, and then erase it.

>

Now place your product into your image. Try to get it as centered as possible, so that the product will be the center of the ad.

Now, remember the shell C4D discussed above? Well this is where it comes in. With a very small soft brush eraser (make sure you’re zoomed in), erase certain parts of your product that the shell C4D goes over. This will give your ad a much more dynamic view and effect. It may help to lower the opacity of the product layer so that you can see which spots overlap. After erasing the parts you want, you should have something like this:

An alternate method is to simply duplicate the C4D shell layer, and bring the copy layer above the iPhone. Now just erase the parts you DON’T want. Some people find this much easier to do, so it’s up to you

Step 9

You can see that it looks a lot more professional now, doesn’t it? However, we’re not done yet. It’s time to spice it up and give it some flavor! Grab your pentool, and use it to make some shapes around your product. These shapes will be colored in black, and will be used to settle down the crowded look of the piece. Your shapes should look something like this:

After making some of these around one side, just simply flip them horizontally and place them symmetrically on the other side as well. As always, replacing the pentooling with brushes is also a good idea

Step 10

Now we’re going to be adding some lighting and some more vector shapes around the product. Grab a 200 px soft brush, and pick a light cold color. I personally used a light shade of purple. Put the opacity of the brush down to around 40–50%. Brush softly around the bottom area of the product, as such:

Put this layer blending on Color Dodge, and play around with the opacity until it looks good.

Step 11

Time to bring out your trusty pentool out again. Much like the pentool layer in black, we’re going to make another two sets (or more if you want to add to your piece). Use solid bright colors on these. You’ll also notice I played with the opacity of some of the shapes as well, so give it a more dynamic look. As always, brush sets work fine as well. Also, remember to use symmetry (copy the stuff you made on one side to the other). These are the two sets of shapes I made:

You can use a large soft brush to erase if you want as well.

Step 12

Time to add some gradient maps to our image. To do this, click on the button on the bottom of the layers window, then click on Gradient Map. We’ll be adding two maps in this part. They are as follows:

Soft Light; 25 — 35% Opacity

Luminosity; 90 — 100% Opacity

This should give a nice effect to your image. You should have something that looks a bit darker and more shaded now. Don’t worry about the orange-redish tint; we’ll fix it later.

Step 13

Grab a large (around 200px) soft brush, and pick about 2 — 3 light colors, and 1 — 2 darker ones. We’ll be adding points of lighting around the image now. If there was a step that the .psd file really helps with, it’s this one, so make sure to check it out if you’re having any problems. You want to make some brushing around corner and side areas of the product. Here’s a couple of examples:

After you’re all done, you should have something like this:

Change all these lighting layers to Linear Dodge (Add) blending mode, and play around with their opacity until they each look good and fit. Your result should be:

Step 14

This step is optional, but can really help out with the look of your outcome. Find two C4Ds that are the same style as the shell C4D we used before. Place them in the corners of your product where you didn’t add lighting. Resize these to a fairly small size, and set them to a blending mode of screen:

Step 15

Add another one of those Black & White gradient maps we added above, except leave it at 45 — 55% opacity in luminosity. Next, add a color balance layer (you can do this the same way as adding Gradient Maps). Make the more prominent colors in your piece more heavy oriented using the bars. For example, green and cyan are the colors we want this piece to represent, so the settings below were used:

Now is also the time to add any other pentooling or shaping you would like to, since the piece is nearing completion. After you are all done, you should have something like this:

Step 16

Make a new layer, and go to Image > Apply Image. In this new layer, click Filter > Blue > Gaussian Blur. Set this layer to Color Dodge, and 70 — 80% opacity. Erase all the parts that don’t look good/are too strong, and come out with a result like this:

Step 17

Here’s the part where you add text. You may want to do so, you may not, it’s up to you. This tutorial isn’t really meant to convey advanced text techniques (that is for another day!). So for the sake of simplicity, we will add some simple text. You can look at the .psd to see how the text was done. Either way, make a new layer, and grab a soft black brush (or whichever other color you chose as a background). Brush around this new layer to ‘erase’ parts you don’t like about the piece. This is an important step to cleaning up the overall product. This is what I came out with at the end:

Step 18

Now it’s time to make a reflection. Apply the image to another layer, and flip it vertically the same way that you flipped the image horizontally a couple of steps back. Set this image in a position when a reflection would be believable. Set this layer to screen at around 15 — 20% opacity, and you should have this:

Apply a Gaussian blur of around .3 on it, then erase most of it with a soft brush, set to around 60% opacity. This is just for extra effect, not a real reflection (for real reflections to work nicely, there’s a lot of steps involved which won’t be covered here). Your end result should be this:

Final Step

One last thing we must do. Apply image again, then go Filter > Sharpen > Sharpen. Leave this layer on normal, and change the opacity of it until it looks good. Also, use a soft brush to erase parts that you don’t want sharpen. This will add the final touch to the product, so make sure to take your time. Add anything else you want along with the image, and we are done!

Final Piece:

Closing Remarks

I hope you enjoy the tutorial, and I hope you learned plenty from it. If there are any questions or concerns, I’d be happy to answer you if you contact me. Ways to reach me can be found on the provided jpg. Well, until next time, farewell!

Rafael Zanatta

Step 1—The Background Layer

For this tutorial Im using Photoshop CS4, any version of Photoshop should do the job. Certain tools may be displayed differently however. To start, you first need to create an empty .PSD document, just choose the A5 format in the preset drop-down menu under international paper.

You can start by making the background colour dark grey with the pain-bucket tool. After that’s done, it’s time to add the gradient.

Just add a new layer on top of the background layer. Now right-click the Paint-bucket and click on the gradient icon to select the gradient tool.

Now before you are going to choose and edit your gradient, make the foreground colour black (#000000).

Now click on the gradient in the top left corner to choose your gradient. Choose the second one, in which a black to transparent gradient is displayed.

After choosing the gradient, put it in the blank layer by clicking in the bottom of the screen and releasing your mouse button after dragging your cursor up to the top.

Now you can change the opacity a bit to make the color of the background as dark as you like.

Step 2

Now, I found this image here: http://bestmobile.pl/images/news/LG_shine_KE970_2.jpg picture of the LG Shine on the internet. Just right click and copy it, then paste (Ctrl+v) it into the .PSD file

and select the polygonal lasso tool.

We are going to cut out the phone and erase the white background, the reason I choose this tool for that is that the phone doesn’t display many curves in the picture. Click around the phone to select it with the tool, try to select short lines after each other when you reach a curve. You will probably get something like the next picture. Now hit the right mouse button inside the phone and select layer via cut, after this you can delete the layer beneath the new one because that will contain the white background of the phone.

Step 3

Now I’d like add some contrast to the phone, and a bit darker color. To do this, simply select the Fx icon in the bottom of the layers bar. And select Color overlay.

Now choose black as your overlay color and choose soft-light as your blend mode. You can also add a nice dark glow behind it by selecting Outer Glow, again choose black as your color, and choose 75% as opacity, Normal as blend mode, 125 as your size and 0 for spread.

Step 4

We’re going to add a little effect to the image. Add a new layer first. When you add a new layer, you can name it by double clicking it.

I downloaded this brush from deviantart: http://ianhall.deviantart.com/art/Spray-Paint-Brush-Set-1–61479523

Download this brush & open it, by clicking the brush tool > the arrow in the top left corner next to your brush preview, and then the right arrow on the side of the just appeared screen. Choose load brushes and load the Paint Brush by Ianhall.

Now add some white brushes on the background of the phone, and fool around with it a little bit,

until you get the right result.

Step 5

Next we’re going to draw a few circular shape behind the phone, do this in a new layer, and after drawing a few shapes with the ellipse tool. (make them black)

select all of the new layers, you do this by clicking the top layer, holding shift, click the bottom layer and release shift. Now right-click them and choose merge layers.

After this I made a pattern file, you can try making it, but you can also download it at http://www.jonathansipkema.com/pattern.png. If you want to try to make a pattern yourself, make sure to choose 179x179 as the size. After making or opening the pattern, choose Edit > Define pattern.

Now select the circular shapes that you made and add a pattern overlay (click the Fx icon again)

You can make the stripes as big and small as you want by changing the scale, by I would choose 25%.

Now add another layer and merge it with the layer including the circular shapes.

After this put the final layer in Soft Light as a blend mode.

Step 6

Now I found this image on the internet: http://www.diamondvues.com/archives/davinci diamond-1.gif. The handy thing is that it is already cutout, so you don’t have to do that anymore. Just open it in photoshop, select the right diamond (not the top view) and paste it to the LGShine file.

Now after this, I just played around a little bit, copy them a view times.

Now rotate them and change the size using Ctrl/⌘ + T.

When you think its finished, open up the Fx panel by clicking the icon again. Now put in an inner glow (only change the color to white),

an outer glow of size 62 (opacity 75%, blend mode normal)

and a black color overlay with Soft Light as a blend mode.

You will finally get something like this:

Step 7

Now download this image (www.jonathansipkema.com/smoke.jpg). Open it, cut it and copy it into the LG Shine document.

Now rotate and place it in a nice position.

After that change the blend mode from normal to screen.

You will get this effect.

What is displayed in the image too, is that I duplicated the layer, changed the size and position a bit, and selected the outer line of the phones’ screen. Now cut this part and it will look like the smoke is displayed on the phone.

Substep one – Copy the layer (Ctrl/⌘ + J)

Substep two $ndash; Put the layer in front of the phone.

Substep three $ndash; Rotate and transform it.

Substep four

Select the outlines with the poly tool. What I did too, was that I used this brush: http://ryoku15.deviantart.com/art/Brush-Set-Clouds-v1-24237782. To add some clouds to the picture, you can put them in any place that you’d like. But make sure to put them in a new layer.

Step 8

Now the next part is what kind of makes the whole picture. Open a new .PSD file (A5 format again)

And start by typing one “mines” and two “spaces”, for example.

After making a big line, select the brush tool and click once on the line, you will get a notice, click yes.

Now click Edit > Transform > Rotate 90 Degrees clockwise. Now click Ctrl/⌘ + T and select the warp mode next to the stop sign in the top of the screen.

Now click in the top of the line and start dragging parts of it.

You will finally end up this something like this.

Step 9

Now cut and copy it into the document, You can make some different ones and rotate them a bit till you get a nice end result.

Voila!