iPhone/Blackberry in Photoshop

Sometimes life is much better if you can find what your looking for without looking for it. Since I am not the greatest writer in the world, I simply want to offer you and myself a great tutorial that I have found and make some adjustments to it. One, I want to make sure I have this at my disposal so I can find it. Two, I can say the layout is exactly the same for the iphone so my comments will be in Blue.

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.

What we will be making:

Iphone_Blackberry_Tutorial

Creating a Phone Shape:

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. iPhone Step 1:

Iphone_Blackberry_Tutorial_Photoshop

Adding 3d Phone Depth:

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.  iPhone Step 2:

Iphone_Blackberry_Tutorial_Photoshop2Iphone_Blackberry_Tutorial_Photoshop2b
Iphone_Blackberry_Tutorial_Photoshop2c

Below is the result so far. Note: This is obviously the same shape as an iPhone. The 4th generation iPhone is not as curved as the first 3. It is a really boring rounded corner shape tool. I like the rounded look better, if you wanted to make the exact replica of the 4th Gen iPhone then there would be no bevel on the top or bottom of the phone. It would simply be a rectangle with rounded corners.

Iphone_Blackberry_Tutorial_Photoshop3

Making a Phone Screen:

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. iPhone Step3. Drag this step further down the phone so roughly 80% of the rectangle covers the phone. You can always adjustit later using the Free Transform Tool (CTRL + T).

Iphone_Blackberry_Tutorial_Photoshop4
Iphone_Blackberry_Tutorial_Photoshop4bIphone_Blackberry_Tutorial_Photoshop4c

Adding a Phone Shimmer:

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. iPhone Step 4. Just keep it simple here. Use a conservative 25% of the screen layer. This is more than enough to get the subtle “glassy gradient” you are looking for.

Iphone_Blackberry_Tutorial_Photoshop5

How to Make a Phone Button:

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. iPhone Step 5. Obviously this button is in the lower portion of the iPhone.

Iphone_Blackberry_Tutorial_Photoshop6

Giving a Phone Button Depth:

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. iPhone Step 6. These two outer bars were in the original iPhone. They were indented. Once you draw the two marquee rectangles. Be sure you’re on a blank layer. (g) Gradient tool. Select Radial or Use the steps in Adding a Phone Shimmer to create a hint of fill then simply press cntrl + d or command + d to deselect.

Iphone_Blackberry_Tutorial_Photoshop7

Putting Reflection on a Phone Button:

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. iPhone Step 7.

Iphone_Blackberry_Tutorial_Photoshop8

Making a Phone Button Separation Bevel:

Add a 10px thick line to separate the buttons from the screen. Then add a white Inner Glow. iPhone Step 8. Add this step in its own folder. Put it below the screen and above the button as shown; However make the title of the folder (Optional) because you may drop it. The original style of the iPhone is really clean and does not include this line. But you may want to add it. Skip to Adding Blackberry Phone Corner Gradient.

Iphone_Blackberry_Tutorial_Photoshop9

Creating a Blackberry Phone Keyboard Curve:

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.

Iphone_Blackberry_Tutorial_Photoshop10

Creating a Blackberry Phone Keyboard Outline:

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.

Iphone_Blackberry_Tutorial_Photoshop11
Iphone_Blackberry_Tutorial_Photoshop11bIphone_Blackberry_Tutorial_Photoshop11c

Adding Blackberry Phone Corner Gradient:

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. iPhone Step 9. Keep in mind you may decide to omit half of the phone shimmer. Depending on where you see the light source in your mind.

Removing half the shimmer is partially complicated. First select the layer and duplicate it by using Alt or Option to drag another copy of it in the Layer menu. Stick 1 copy into a folder called “Original” for safe keeping. Right click the layer copy. Press Rasterize. Simply use the (m) Marquee Tool to drag over the half of it you want to remove. Delete. Skip to How to Make a Blackberry iPhone Speaker.

Iphone_Blackberry_Tutorial_Photoshop12
Iphone_Blackberry_Tutorial_Photoshop12b

Creating a Blackberry Phone Keyboard:

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.

Iphone_Blackberry_Tutorial_Photoshop13

Creating a Blackberry Phone Spacebar:

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

Iphone_Blackberry_Tutorial_Photoshop14

Keyboard Layout on a Blackberry Phone:

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. My numbers are Grey, but red works.

Iphone_Blackberry_Tutorial_Photoshop15

Giving a Blackberry Phone Keypad Depth:

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%.

Iphone_Blackberry_Tutorial_Photoshop16

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.

Iphone_Blackberry_Tutorial_Photoshop17

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.

Iphone_Blackberry_Tutorial_Photoshop18

How to Make a Blackberry iPhone Speaker:

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. iPhone Step 10.

Iphone_Blackberry_Tutorial_Photoshop19

Adding Phone Background (Optional)

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. (Optional)

Iphone_Blackberry_Tutorial_Photoshop20

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.

Iphone_Blackberry_Tutorial_Photoshop21

Final

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

Iphone_Blackberry_Tutorial_Photoshop22

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.

Making a phone is pretty cool. It can really pump up your marketing. Support us by sharing our articles using the social media buttons below. Also, if you find yourself a Novice and trying to complete this tutorial and need something explained, leave a comment and I will elaborate in detail the step so future readers will have a better understanding.

Full Credit Goes to Jeremy Roux for this great tutorial. Thanks Buddy.

1Comment
  • Mary
    Posted at 01:24h, 21 September

    Much appreciated for the information and share!

Post A Comment

Facebook