Iphone Light Beams

In this tutorial il show you how to create light beams coming from within an iphone. The inspiration behind this tutorial is from a wallpaper i found on devantart, you can view the wallpaper HERE.

Before i continue with the tutorial you will need this image of the iphone. GRAB IT HERE.

Create a new document 600×650 pixels OR however big you want the effect to be, i shall be using the pixels specified. Select the color #393939 as your forground and the color black for your background. Select the gradient tool, using a “radial” gradient drag it onto your canvas.

Open your iphone image in photoshop, using your favourite cutting tool, cut the phone from background and copy/paste onto your canvas.

(Ignore the slight difference in the gradient background its due to the image being saved as a .gif) Label your phone layer “iphone”. Layer labels are really important in this tutorial so i suggest you label all layers relating to the object on that layer. It can get very confusing at times. Duplicate your iphone layer and drag it underneath the orginal, label this “iphone reflection”. Move the object down using the arrow keys on the keyboard. Were looking for something like this.

See how i didnt actual flip the object but it still looks like a reflection. Set the reflection layer opacity to 50% then add a layer mask. Using the colors black as your forground and white as your background, select the gradient tool with a linear gradient. Drag from the bottom of the reflection layer half way up.

Once your happy with the result, right-click the reflection layer and goto apply mask. do the same as above but to the other side. Were looking for this result.

Duplicate the iphone layer once more then drag it between the orginal layer and the reflection layer. Label this layer iphone shadow. Were going to make an old school drop shadow. Move the drop shadow layer down a couple of times then add a “BLACK COLOR OVERLAY” to the layer. Goto “filter > blur > gussian blur” Blur by about 2 – 3 pixels. You should have something like this.

Now select the polygonal lasso tool or the pen tool and draw around the screen of the iphone.

Fill the selection on a new layer called iphone screen using the color #368de7.

Using the color #368de7, select the pen tool and create a big tenticle like shape, fill the shape with the color #368de7.

Set the layer opacity to 20% then add this stroke layer style to the shape.

You should have something like this.

Repeat the process explained above, make as many tenticle shapes as you want all on there own layer, might be a good idea to place them in a group folder in your layers pallette, make them different widths and directions, change the opacity of some of the layers dont keep them all at 20%. I have a total of 9 layers. Once you have all your tenticle shapes, pick one ore two and add this layer style.

Heres how mine looks.

Duplicate one of your tenticles preferbly one of the thin ones. Fill it with the color white instead of blue. Goto “filter > blur > guassian blur” blur by 6.8pixels. Now add this layer style.

Add a layer mask to the white tenticle shape then drag a linear gradient over it from the bottom upwards. Finally set layer opacity to 80%. Were looking for this effect.

HIDE all your tenticle shape layers so your just left with this.

Duplicate the blue screen layer, then drag it right to the top of layers pallette so its above everything. Goto “filter > blur > motion blur” use the setting below.

Make a selection around the bottom half of the motion blur where it goes towards the bottom of the phone and delete it. You should have something like this.

UNHIDE all your tenticle shape layers, Select them all and duplicate them. Leave them selected in your layers pallette, right-click the little eye and goto “show/hide all other layers” ALL layers should be hidden apart from the duplicated tenticle shape layers. Goto “layer > merge visable” then unhide everything. Move the merged layer down and rotate it so it lies horizontally across the blue screen.

Set layer opacity to 50% then add a layer mask. Drag i reflected gradient from the middle outwards. Make sure you have the color white as your forground and black is your background. Once you have done that your end result should be something like below. Hope you enjoyed this tutorial.

11 thoughts on “Iphone Light Beams”

  1. Pingback: psaddict.com
  2. Uhm… I think this tutorial is weak… all you did is placing some half-transparent stripes… and even a final is lame…

Leave a Reply

Your email address will not be published. Required fields are marked *