Create a Realistic Blackberry Style Mobile Phone From Scratch

Jul 5th in Designing by Jeremy Roux

If you ever have to create a slick phone or Blackberry design, and you don't feel like buying stock images, then this tutorial is for you. I will show you how to use Vector Shapes, Masks, and mostly Layer Effects to create this elegant design.

Author: Jeremy Roux

Hello all, my name is Jeremy Roux, Im a graphic and web designer originally from Paris, but now living and working in Montreal, Canada. As a total graphic addict, I spend most of my time on photoshop, either working, trying new tutorials, or writing them.

Final Image Preview

Before we get started, let's take a look at the image we'll be creating. Click the screenshot below to view the full-size image. As always, the layered Photoshop file is available via our PSDTUTS Plus membership

Step 1

Create a new document, roughly about 1000 pixels by 1400 pixels, with a black background. Choose the Rounded Rectangle Tool (U) and draw a rectangle of approximately 600x 1000px. Note that the angle radius doesn't matter since we are going to edit the shape.

Grab the White Arrow Tool (A) and start dragging your anchor points until you reach the desired shape. Note that I had to remove some to have large rounded corners, by using the Delete Anchor Tool.

Step 2

Now that our main shape is done, we need to give it some effects to create the illusion. A slight grey to black gradient Overlay will simulate the light, and a combination of a Bevel and Hard Inner Glow Effects will create the soft rounded frame. To apply those, make sure the Shape Layer is selected and click on the Effect Button down on your Layer Palette, use the settings below.



Step 3

Below is the result so far.

Step 4

What would be a Blackberry without its large screen? Let's use the Rectangle Tool (U) and draw the rectangle in the upper half. Use a bit of Gradient Overlay and Inner Shadow again.



Step 5

To make the screen even more glossy, let's add another reflection. Duplicate your "screen" layer, and use the Transform Tool (Control+T) to make it slightly smaller (about 3-4px). Then change its color to white, Transparency to 5%, and set its Blending Mode to Multiply.

This will turn any white pixel into a transparent ones, revealing the layer underneath. Our layer will become transparent, leaving only the effect visible. Edit the Gradient Overlay, and replace it with a white to transparent one. Give it full Opacity and set it at a 45 degree angle.

Now click on the path in your Palette Layer, and play with the White Arrow and the Convert Point Tool to create a nice curve on the screen.

Step 6

To create the central button, we are going to use a series of circles piled up and centered. The first circle uses a Gradient on the stroke, as well as an Overlay Gradient, while the other circles are a mix of Inner and Drop Shadows.

Step 7

Using the Rectangle Tool, draw what will become our main buttons right below the screen. Using the Convert Point Tool, add a curve to the bottom part of your rectangle and change its color to a dark grey (#131313).

Using the Rectangular Marquee Tool (M), make two selections at 5px wide, of equal distance from the center. Then while holding the Alt button on your keyboard, click the Mask Button in your Layer Palette (holding Alt will invert your mask automatically). Congratulations, you've created your buttons! Now let's give it some styles too.

Step 8

Looking through your layers, retrieve your main shape. Then expand the list of effects used (click the small arrow in the right). Then Right-click the Gradient Overlay and copy the Layer Style. Come back to your new shape, Right-click and paste the Layer Style.

Add a slight Drop Shadow with a Distance of 0, Opacity of 90%, and a size 25px. Also, give it a reversed black inner glow. This will give it a thin reflection of light on the edges.

Step 9

Add a 10px thick line to separate the buttons from the screen. Then add a white Inner Glow.

Step 10

Duplicate your button layer, delete the mask and the effects, and change its color to white. Move it slightly down by a couple of pixels, and use the Delete Anchor Tool to remove the top two anchors, but keep the bottom curve. Use the Convert Point Tool to adjust the path, as shown below.

Step 11

Apply the Drop Shadow and Inner Glow settings shown below. Duplicate the shape three times, spread them out evenly using the Distribute Vertical Spacing Tool, create a group (Control+G), and switch its Layer Blend Option to Multiply to soften the edges.



Step 12

Using the Pen Tool (P), draw the bottom part of the phone. Using the same copy/paste layer style trick, apply the Drop Shadow used on the buttons in Step 5 to this shape. Add a light-grey to dark-grey Radial Gradient Overlay. Then use your mouse to move the gradient to the corner.

Now duplicate this layer, change its color to white and its Blending Option to Multiply (once again to cancel its white pixels). Edit the Radial Gradient Effect, and move it to the other corner. Play around with the Opacities until you get the same amount of light on each side.


Step 13

To create the mini keyboard, let's duplicate the button layer. Then resize each button to fit between each white separator. Delete the Mask, pull out Guides from the Vertical Ruler, and work your Grid to form a ten column wide keyboard. Using the same method as in Step 5, create a new version of the mask.

Step 14

Use the Pen Tool to draw the last row of keys. Use the styles and masking technique to separate them as well.

Step 15

Using your favorite font, place each letter on its respective key. Some of the signs (backspace, return, shift arrows) are pre-existing shapes from my library, but you can always look through dingbats fonts for a solution.

Step 16

The keys are now in place, although the result is not complete yet, as we need more light! Duplicate the first key layer. Then clear the styles and apply a simple black to white gradient, with the white barely appearing at the bottom. Don't forget that you can click and drag the gradient around on your canvas. Finally, change the Opacity to 70%.

Step 17

Create a Mask on this new layer. Then grab the Elliptical Marquee Tool. Starting from the left, drag a circle that passes through the top right and bottom left of the key. Then paint the Mask black. Repeat the same process for the other keys, but mirror the Mask from the center.

Step 18

Duplicate your layer twice. Place them on top of each rows of keys. Repeat the same step to create the reflection layer on the bottom row. For the space bar, make two circular selections on each side, and add a rectangle in the middle.

Step 19

The Blackberry itself is just missing the speaker to be complete. Draw a Rounded Rectangle, with a large Angle Radius. Pick a light grey tone and add some Inner Shadow.

Step 20

We're pretty close to being done now! Let's add a bit of texture in the background. I chose leather to emphasize the luxury and high quality finish.

I picked this image from istockphoto, since it's exactly what I was looking for. It's not quite there for the color though. Bring it into Photoshop. Then go to Image > Adjustments > Hue/Saturation (Control+U) and De-Saturate until you get a complete grayscale image.

Add a Mask and draw a large circular white to black gradient. If needed, use the Free Transform Tool to adjust it (Control + T), but don't forget to unlock the Mask first by clicking the link button. Then add a new layer in background, fill it with black, and flatten both layers.

Step 21

Let's bring the texture into your main design. Move it just above the black background layer and set its blending mode to Screen. This will make all the black pixels transparent, revealing the next layer. Duplicate it, and Rotate it 180 degrees. Then go back to the main shape and add a bit of Drop Shadow.

Final

That's it, you've done it! Not that hard huh?

Conclusion

So what have we learned? The use of Layer Effects can save a significant amount of time. Sure, the same result could be achieved with a regular brush, building layers upon layers, but the advantage of these effects are that they are totally scalable. The vector shapes can be easily resized as needed.


Enjoy this Post?

We'd love your vote!

User Comments

( ADD YOURS )

  1. Brent Nelson July 5th

    Looks good! Maybe try something like it, too many phones!


  2. Michael T July 5th

    Great tutorial. The final outcome looks good! I will have to try this for sure.


  3. Jamie July 5th

    Amazing tut outcome was sick


  4. Dave July 5th

    Yay! Amazing results and I actually made #4 this time :)


  5. D.T July 5th

    Very clean design, I guess it almost looks like a photo.


  6. The Mafalian July 5th

    awesome, thanks for this great tutorial


  7. chinedu July 5th

    nice but i want to create my own unique designs


  8. Craig Snedeker July 5th

    Awsome! Big! lol


  9. Mark July 5th

    very nice


  10. david July 5th

    Great tutorial…i love it.


  11. David B July 5th

    Great tut. Looks just like a photo. I’ll have to make sure I try it out.


  12. Andrei Constantin July 5th

    Many dont understand that is not the outcome but the technique….


  13. Cooper Shrieve July 5th

    So if you dont want to buy a stockphoto you make the blackberry. but then you buy a stock photo for thebackground?!


  14. Jared July 5th

    Very nicely executed. A few suggestions though:

    1) Instead of setting a layer to Multiply and then using the Layer Effects to create what you want, you should instead leave the layer set to Normal but then lower the Fill Opacity to 0% and then apply the same Layer Effects. This way if you are using the same technique with a color that is not white, the fill of the original shape will still be completely transparent. (Not to mention it makes Photoshop’s processing job easier if you were working on this in a super hi-res document.)

    2) Because you used pixel-based masks in a few different places, this design is not truly completely scalable. Instead, take advantage of the vector masks that you are using with your vector shapes by holding down the Alt/Opt key with the Rectangle Tool to mask out spaces between the keys. Additionally, you can use vector masks to accomplish the glossy highlights on the individual keys.


  15. Danny July 5th

    i love the outcome its so nice!


  16. kamel July 5th

    very fuckin nice thank you


  17. kaleesh July 5th

    Super cool! I’m gonna create a custom batphone :))) looking phone … You get what i mean (:


  18. VertigoSFX July 5th

    This is great…I was thinking at first “not another electronic device recreation tut” but this one is the best looking one i’ve seen…great job.


  19. Joefrey Mahusay July 5th

    Awesome tutorial. Thanks for sharing. :)


  20. D. Carreira July 5th

    Fantastic tutorial! Thanks!

    David Carreira


  21. crazyhunk July 5th

    that was some wicked tut…… very detailed…..

    thanx alot… :)


  22. Ali July 5th

    Awesome, will def try it


  23. Edwin July 5th

    Pretty cool!


  24. Ruben July 5th

    Definitely looks like the real deal… very good. Thanks!


  25. Raj July 5th

    cool tutorial m8. Thanx a lot!


  26. mac funamizu July 5th

    Great! Thanks.


  27. Muffenz July 6th

    Nice job man, how do you think of these tutorials.


  28. Jeremy July 6th

    Thanks all!
    @Muffenz: actually I dont know… it usually just pops out of my brain!


  29. dimaknt July 6th

    KOOOOOOOOOOOOOOOOOOOOOOl!


  30. изИЗ July 6th

    Very good, Congratulations!
    That was one of the best and most realistic that already saw! ^^
    very good
    Thx! ;)


  31. ZaFaR July 6th

    Nice job man, how do you think of these tutorials.


  32. Braden Keith July 6th

    Superb. Liking the background


  33. locjan July 6th

    its look easy. thanks you are always awesome


  34. Andy July 6th

    Perfect. As a former 3D artist I’ll never understand how to create those realistic light transitions and shadows in a 2D software like PS. I mean, technically it’s more or less obvious after reading your tutorial, but you need a really good sense of physically correct illumination to create something like this. In a 3D shadow you don’t have to take care about this. When your light sources are places appropriately, the render engine will do the rest.


  35. Lawrence July 6th

    now-a-days its boring here!!


  36. Mark Abucayon July 6th

    I like this one. Thanks for sharing this tut. great job.


  37. Shane July 7th

    fantastic end result - photo-realistic stuff :)


  38. wildwise July 7th

    nice


  39. SV Creation July 9th

    That are amazing work thanks


  40. Kaka July 9th

    Awesome!


  41. dominique July 9th

    Waaaaaaaaaaawww thats amazing gona try it myself, thx for teaching


  42. Evolved Templates July 11th

    Interesting tutorial, might give it a try later. Thankyou


  43. mushroomumbrella July 14th

    Always wanted to do this. Thanks a lot for teaching. I thought they use some other program for concept product.


  44. Robert Anderson July 31st

    In the second step I can’t get the bevel to go all around the sides. Any advice would help :)! Thanks!


  45. Ooty Blog August 5th

    very Cool. Thanks.

    http://ootyblog.blogspot.com


  46. femi August 23rd

    very nice one.looks very real,ehm i need more tutorials on photoshop.


  47. RUGRLN September 8th

    U’ve forgotten to give the styles options for the contour!!!


  48. Neko September 11th

    Nice tutorial but so many things left out that I guess are obvious to those who use photoshop every day in work/professional creations.

    Got lost trying to make the screen-reflections and gave up around there when it came to the buttons.


  49. sean steezy September 20th

    Awesome detail. I did this in illustrator tho b/c I’m making some contact us icons. its not much different, but looks easier in Photoshop… thanks!


Add Your Comment

( GET A GRAVATAR )
  • Gravatar

    Your Name November 20th

Arrow