How to Draw a Realistic Mobile Phone with Photoshop

Preview

First, let’s take a look at the cell phone we’re going to create in this tutorial. This cell phone is modeled after one of Nokia’s products.

Preview

Step 1: Determining the Light Source

The most important factor in creating a realistic product digitally is consistency with the light sources. Therefore, before you draw anything, you must determine where light is coming from because it will affect the detailing, coloring, and shading of your work.

In this tutorial, we will pick the top right corner of the canvas for our light source. The first consequence of this is that the shadows will be at the bottom left of object. The second result of having the light source at the right side is that the object will be darker on the left side.

How to Draw a Realistic Cellphone in Photoshop

Step 2: Drawing the Base Shape

Let us begin drawing. First, in Photoshop, create a new document (Ctrl/Cmd + N) with Width at 500px and Height at 1000px.

Start by drawing the main base shape of the cell phone. Usually, it’s easier to begin by drawing a predefined basic shape such as rectangle, ellipse, or star, then edit it manually using the Pen Tool (P). In this case, the basic shape is a rounded rectangle. Draw a rounded rectangle with the Rounded Rectangle Tool (U) with Radius set at 10px and Color set to a gray color (#acacac).

How to Draw a Realistic Cellphone using Photoshop

With the Pen Tool (P), make 4 additional anchor points by clicking on the shape’s path at the middle of each side.

How to Draw a Realistic Cellphone in Photoshop

Select the corner anchor points at the top and pull them down to create a hump at the top middle of the shape.

Press Ctrl/Cmd + T to activate the Free Transform command for the selected points. Hold down Alt and move them inward.

How to Draw a Realistic Cellphone in Photoshop

Repeat the same process for the bottom portion of the base shape.

How to Draw a Realistic Cellphone using Photoshop

Note: We will be using this technique quite frequently in this tutorial, so it’s best to get the hang of it now.

Step 3: Adding Layer Styles for a 3D Effect

After creating the base shape, we need to add some layer styles to its layer to give it a realistic look. We will add an Inner Shadow, an Inner Glow, and a Gradient Overlay. These layer styles will add a 3D effect onto the shape. To apply layer styles, double-click on the layer in the Layers Panel, which should open the Layer Styles dialog window.

Inner Shadow

How to Draw a Realistic Cellphone using Photoshop

Inner Glow

How to Draw a Realistic Cellphone using Photoshop

Gradient Overlay

How to Draw a Realistic Cellphone in Photoshop

Step 4: Draw the Inner Area of the Cell Phone

Use Rounded Rectangle Tool (U) combined with the Free Transform command to draw the inner shape. Use the same technique that we used for drawing the base shape. Make sure to remove the fill of this shape by right-clicking inside of its path on your canvas, choosing Blending Options from the contextual menu, then under Advanced Blending, lowering the Fill Opacity to 0%.

How to Draw a Realistic Cellphone using Photoshop

We will make it look as if the inner area is pressed down into the base shape. We can do this by giving its layer a Bevel and Emboss layer style and a Gradient Overlay layer style.

Bevel and Emboss

How to Draw a Realistic Cellphone in Photoshop

Gradient Overlay

How to Draw a Realistic Cellphone using Photoshop

Step 5: Duplicate the Inner Shape

Duplicate the shape we have just created by selecting it in the Layers Panel and then pressing Ctrl/Cmd + J. Scale it down to 95% of its original size using Edit > Transform Path > Scale. You can also do this freehand using Free Transform (Ctrl/Cmd + T), it’s up to you how accurate you want to be.

How to Draw a Realistic Cellphone in Photoshop

Give our duplicated inner shape an Outer Glow and a Gradient Overlay (you know the drill by now). Make sure to adjust the layer styles’ options to match the direction of our light source.

Outer Glow

How to Draw a Realistic Cellphone using Photoshop

Gradient Overlay

How to Draw a Realistic Cellphone in Photoshop

Step 6: Create the Right Button

Duplicate the shape layer (Ctrl/Cmd + J) we just made. Use the Pen Tool (P), but switch the mode to Paths and utilize the Intersect path areas option in the Options Bar (this saves us from having to be very accurate on the edge of the inner shape).

With the Pen Tool, draw a path that represents the right button on the most recently duplicated layer.

How to Draw a Realistic Cellphone using Photoshop

Next, apply an Outer Glow, a Bevel and Emboss, and a Gradient Overlay.

Outer Glow

How to Draw a Realistic Cellphone in Photoshop

Bevel and Emboss

How to Draw a Realistic Cellphone using Photoshop

Gradient Overlay

How to Draw a Realistic Cellphone in Photoshop

Step 7: Duplicate the Button

Duplicate the button shape. Use Free Transform on it by hitting Ctrl/Cmd + T. Inside the transform control box, right-click and then choose Scale from the menu. Change the size of the duplicated button to 95%.

How to Draw a Realistic Cellphone using Photoshop

On the duplicated button that we scaled down, add an Outer Glow layer style and a Bevel and Emboss layer style.

Outer Glow

How to Draw a Realistic Cellphone in Photoshop

Bevel and Emboss

How to Draw a Realistic Cellphone using Photoshop

Step 8: Create the Second Inner Shape

Remember the first inner layer we created? Duplicate that layer. With the Pen Tool (P), draw a path that arcs, and make sure that the Intersect path areas option for the Pen Tool is selected.

How to Draw a Realistic Cellphone in Photoshop

Give the second inner area an Outer Glow layer style and a Bevel and Emboss layer style.

Outer Glow

How to Draw a Realistic Cellphone using Photoshop

Bevel and Emboss

How to Draw a Realistic Cellphone in Photoshop

Step 9: Duplicate the Second Inner Shape

Again, duplicate the previous shape and scale its size down to 99%. Set its fill color to black (#000000) and lower its Fill Opacity to 40% so that it appears darker than its background but also lets the gradient overlay of the shape below it show through.

How to Draw a Realistic Cellphone using Photoshop

Give the duplicated shape a Bevel and Emboss and an Outer Glow.

Bevel and Emboss

How to Draw a Realistic Cellphone in Photoshop

Outer Glow

How to Draw a Realistic Cellphone using Photoshop

Step 10: Create the Background of the Center Buttons

Next up, we will need to create an area at the bottom of the second inner shape for the main mobile phone buttons. First, duplicate the shape from the previous step. Use the Rectangle Tool (U) to make rectangular path at the bottom (remember to select the Intersect path areas option).

Set the color of this path to black and make sure that it has 100% Opacity and 100% Fill.

How to Draw a Realistic Cellphone in Photoshop

Give this shape a Bevel and Emboss layer style.

How to Draw a Realistic Cellphone using Photoshop

Step 11: Create the Cell Phone’s Screen

Use Rectangle Tool to draw the screen’s shape. It shouldn’t have a fill color.

How to Draw a Realistic Cellphone in Photoshop

Give it three layer styles: Bevel and Emboss, Inner Shadow, and Color Overlay.

Bevel and Emboss

How to Draw a Realistic Cellphone using Photoshop

Inner Shadow

How to Draw a Realistic Cellphone in Photoshop

Color Overlay

How to Draw a Realistic Cellphone using Photoshop

Step 12: Draw the Main Button

Draw an arced shape with the Pen Tool as shown below.

How to Draw a Realistic Cellphone in Photoshop

Give this shape a Bevel and Emboss layer style and a Gradient Overlay layer style.

Bevel and Emboss

How to Draw a Realistic Cellphone using Photoshop

Gradient Overlay

How to Draw a Realistic Cellphone in Photoshop

Step 13: Draw the Left Button

Above the main button, create another button shape.

How to Draw a Realistic Cellphone using Photoshop

We will use the same layer styles as with the main button (Bevel and Emboss and Gradient Overlay).

Bevel and Emboss

How to Draw a Realistic Cellphone in Photoshop

Gradient Overlay

How to Draw a Realistic Cellphone using Photoshop

Step 14: Create the Right Button

Just duplicate the left button, hit Ctrl/Cmd + T to enter Free Transform, right-click inside the transform box and choose Flip Horizontal from the menu that appears. Afterwards, use the Move Tool (T) to move it to the right side.

How to Draw a Realistic Cellphone in Photoshop

Step 15: Draw the Joystick Navigation Background

Draw a circle shape in the middle of the main button using the Ellipse Tool (U). Hold down Shift to make a perfect circle.

How to Draw a Realistic Cellphone using Photoshop

Give the joystick’s background a Bevel and Emboss layer style.

How to Draw a Realistic Cellphone in Photoshop

Step 16: Draw the Joystick Control

Draw another circle shape (or just duplicate the joystick background and scale it down and change its Color).

How to Draw a Realistic Cellphone using Photoshop

Give the joystick control a Bevel and Emboss and a Gradient Overlay.

Bevel and Emboss

How to Draw a Realistic Cellphone in Photoshop

Gradient Overlay

How to Draw a Realistic Cellphone using Photoshop

Step 17: Draw the Button Icons

Just draw a simple polygonal shape on each button using the Pen Tool (P). Feel free to replace them with a shape of your own.

How to Draw a Realistic Cellphone in Photoshop

Step 18: Draw a Bottom Corner Highlight

The cell phone shape is very flat at the moment; we will fix that by adding some highlights and shadows. Draw a path for the highlight on bottom right corner. Convert this path into a selection by right-clicking inside the path and choosing Make Selection (or just press Ctrl/Cmd + Enter).

Create new layer and fill (Edit > Fill or Shift + F5) your selection with white (#ffffff) on this new layer.

Deselect your selection (Ctrl/Cmd + D) and then apply a Gaussian blur filter (Filter > Blur > Gaussian blur) with a Radius of 5px.

How to Draw a Realistic Cellphone using Photoshop

Step 19: Create the Left Bottom Corner Highlight

Just duplicate the highlight layer we just drew and flip it horizontally (Edit > Transform > Flip Horizontal). Place the flipped highlight on the opposite side using the Move Tool (V).

We must remember that our light source is from the top right, so the highlight on left side should not be as strong as the right side. To lower its brightness, simply reduce the layer’s Opacity to 70%.

How to Draw a Realistic Cellphone in Photoshop

Step 20: Create a Dark Spot on the Left Corner

Create a new layer for the dark spots on the bottom corners. Use the Brush Tool (B) to paint a dark spot on bottom left corner and reduce the layer’s Opacity to around 20%.

How to Draw a Realistic Cellphone using Photoshop

Below, you can see the difference before and after the highlights and shadow. These small and subtle details add big differences to the realism of our work.

How to Draw a Realistic Cellphone in Photoshop

Step 21: Draw the Speaker

Draw a sort of half-moon shape for the speaker using two ellipses and the Ellipse Tool (U). See the image below to guide you. Set the Opacity to 100% and Fill to 0% and choose the Subtract from from path area option.

How to Draw a Realistic Cellphone using Photoshop

Give the speaker shape a Bevel and Emboss, an Inner Shadow, and a Gradient Overlay.

Bevel and Emboss

How to Draw a Realistic Cellphone in Photoshop

Inner Shadow

How to Draw a Realistic Cellphone using Photoshop

Gradient Overlay

How to Draw a Realistic Cellphone in Photoshop

Step 22: Create a Photoshop Pattern for the Speaker’s Fill

Let’s create a pattern for the inner part of the speaker. To start, create a new Photoshop document with size of 32x40px.

How to Draw a Realistic Cellphone using Photoshop

Use the Zoom Tool (Z) to zoom in really close to the canvas. Draw a black circle at the top right corner.

How to Draw a Realistic Cellphone in Photoshop

Duplicate the circle and place it on the lower left corner.

How to Draw a Realistic Cellphone using Photoshop

Save the pattern by selecting around the canvas (Ctrl/Cmd + A) and going to Edit > Define Pattern. I named our pattern "2 dots", but feel free to name it anything you want.

How to Draw a Realistic Cellphone in Photoshop

Step 23: Apply the "2 dots" Pattern

Return to speaker layer. Double-click the layer to access the Layer Styles dialog window. Add a Pattern Overlay layer style, choosing the "2 dots" pattern we created from the Pattern dropdown menu.

How to Draw a Realistic Cellphone using Photoshop

Step 24: Add the Cell Phone’s Name

We won’t get fancy with our mobioe phone’s name. Just use the Horizontal Type Tool (T) to write a simple text block for the cell phone’s brand (in my case, I just called it "CELLPHONE").

How to Draw a Realistic Cellphone in Photoshop

Step 25: Drawing the "Connectivity" Icon

Remember the button we drew on the left side of the phone? We’ll revisit it and give it an icon. Start by creating a small rounded rectangle with the Rounded Rectangle Tool (U).

Duplicate the path and move it a few pixels down and right. Transform the duplicated path’s size to around 95% of the original and select the Subtract from path area option.

Then create a rectangular shape on the left side, also selecting the Subtract from path area option.

How to Draw a Realistic Cellphone using Photoshop

Add an Inner Shadow layer style to give the "connectivity" icon a debossed effect.

How to Draw a Realistic Cellphone in Photoshop

Duplicate the shape, flip it horizontally (Edit > Transform > Flip Horizontal), and then flip it vertically (Edit > Transform > Flip Vertical).

How to Draw a Realistic Cellphone using Photoshop

Move this button on top of the left side button. Use Free Transform to angle it appropriately.

How to Draw a Realistic Cellphone in Photoshop

Step 26: Draw the Power Button

Draw a rounded rectangle with the Rounded Rectangle Tool that goes across the top of the mobile phone. Add a new anchor point at the top middle of the rounded rectangle’s path (using the Pen Tool) and pull it up to create an arc at its middle.

Draw a triangular path and select the Subtract from path area option to make an indentation at the top of the cell phone.

How to Draw a Realistic Cellphone using Photoshop

Apply an Inner Shadow layer style and a Bevel and Emboss layer style to give it a 3D effect.

Inner Shadow

How to Draw a Realistic Cellphone in Photoshop

Bevel and Emboss

How to Draw a Realistic Cellphone using Photoshop

Step 27: Draw the Base of the Keypad

Our phone is a sliding mobile phone. When you slide it down, the keypad is revealed. Let’s draw this keypad starting with the base shape.

Use the Rounded Rectangle Tool to draw a rounded rectangle at the base of our cell phone. Use the Pen Tool to modify the rounded rectangle’s anchor points to get the shape depicted in the image below.

How to Draw a Realistic Cellphone in Photoshop

Give the shape an Inner Shadow and a Bevel and Emboss to give it a 3D effect.

Inner Shadow

How to Draw a Realistic Cellphone using Photoshop

Bevel and Emboss

How to Draw a Realistic Cellphone in Photoshop

Step 28: Duplicate the Keypad Base Shape

Next, we need to create the inner area of the keypad. Start by duplicating the base shape and then transforming the copy to a smaller size (about 80% of the original size). Also, change its color to #080808.

How to Draw a Realistic Cellphone using Photoshop

Add an Inner Shadow layer style and a Stroke layer style.

Inner Shadow

How to Draw a Realistic Cellphone in Photoshop

Stroke

How to Draw a Realistic Cellphone using Photoshop

Step 29: Create the Second Inner Shape of the Keypad

Duplicate the previous shape, then resize it down. Change its color to #323131.

How to Draw a Realistic Cellphone in Photoshop

Give the second inner shape a Stroke and an Inner Shadow.

Stroke

How to Draw a Realistic Cellphone using Photoshop

Inner Shadow

How to Draw a Realistic Cellphone in Photoshop

Step 30: Draw an Indentation at the Bottom of the Keypad

Duplicate the second inner shape. Draw a rounded rectangle path at the center bottom and select the Intersect path areas option.

How to Draw a Realistic Cellphone using Photoshop

Give this shape an Inner Shadow to create the effect of an indentation.

How to Draw a Realistic Cellphone in Photoshop

Step 31: Draw the Base of a Key

Now we need to create the keys for our key pad. Start by drawing a black rounded rectangle and modifying its anchor points with the Pen Tool until you create an irregular diamond shape.

How to Draw a Realistic Cellphone using Photoshop

Give this shape a Bevel and Emboss layer style.

How to Draw a Realistic Cellphone in Photoshop

Step 32: Create the Inner Area of the Button

Duplicate shape we just created and resize it down to 95% of the original size. Change its color to #606060.

How to Draw a Realistic Cellphone using Photoshop

Add a Bevel and Emboss layer style onto it to give it a 3D effect.

How to Draw a Realistic Cellphone in Photoshop

Use the Horizontal Type Tool (T) to type some letters onto the key.

How to Draw a Realistic Cellphone using Photoshop

Step 33: Duplicate the Key

Duplicate shape we created, press Ctrl/Cmd + T to activate Free Transform, right-click inside the transform box, and choose Flip Horizontal. Move this to the other side of the keypad and also add a different letter using the Horizontal Type Tool (T).

How to Draw a Realistic Cellphone in Photoshop

Step 34: Draw More Keys

At this point, you already know how to draw a key on our keypad, so I’ll let you use your creativity to finish it up. Use the techniques we’ve already discussed.

How to Draw a Realistic Cellphone using Photoshop

Step 35: Give the Mobile Phone a Texture

In real life, nothing’s perfect — there’s always some sort of defect on every product; whether it’s through normal wear-and-tear or a manufacturer’s shortcomings, cell phones will always have imperfect surfaces.

To make our work as realistic as possible, we need to add these flaws to our design.

Hold down Ctrl/Cmd and click every layer’s thumbnail in the Layers Panel until the cell phone has a selection around it.

Create a new layer above all the other layers and fill it (Shift + F5) with black (#000000).

Choose Filter > Noise > Add Noise.

After applying the filter, switch the Blend Mode to Screen and reduce the layer’s Opacity to 80%.

How to Draw a Realistic Cellphone in Photoshop

Step 36: Reduce the Noise on the Mobile Phone’s Screen

We don’t need the noise texture to be too — shall we say, "noisy" — on our mobile phone’s screen. To do this, make sure to select the noise layer and then click on the Add layer mask icon at the bottom of the Layers Panel. Use the Rectangular Marquee Tool (M) to create a selection of the mobile phone’s screen. Go to Edit > Fill and in the Use option, pick 50% Gray.

How to Draw a Realistic Cellphone using Photoshop

In image below, we can view the difference before and after we remove some of the noise. The difference is subtle, yet important.

How to Draw a Realistic Cellphone in Photoshop

Step 37: Create a Drop Shadow

Create a new layer and place it behind all the other layers in the layer stacking order. Select the cell phone again using the method we discussed previously.

Fill the selection on the new layer with black.

Use the Move Tool (V) to shift the filled selection down and left (because our light source is from the top right corner).

Go to Filter > Blur > Gaussian Blur with Radius at around 9px. Then, reduce the layer’s Opacity to 40%.

How to Draw a Realistic Cellphone using Photoshop

Step 38: Finish up the Drop Shadow

This is the final step we need to accomplish. The shadow will cast a softer drop shadow on the floor. To do this, we just need to duplicate the previous shadow we created and apply another Gaussian Blur filter on it using a bigger Radius value.

How to Draw a Realistic Cellphone in Photoshop

Tutorial Summary

In this tutorial, we created a realistic cell phone completely from scratch using shape tools, the Pen Tool, and plenty of layer styles. I hope these techniques have imparted a few tips to you that you can incorporate into your workflow when drawing your own realistic products.

Preview

Download Source Files

  • http://richworks.in Richie

    Damn.. that indeed looks real…… excellent work.. I was hoping you would pick a new generation phone. This one’s decades old πŸ˜‰ Just saying.. good work ,Jeprie

  • http://sixrevisions.com Jacob Gube

    I see your point Richie, but if we took a new generation phone like the iPhone, it would be too simple! What I found valuable in Mohammad’s tutorial are the techniques he employed and the concepts he shared such as being aware of consistent lighting, paying attention to the details (like reducing the noise on the phone’s screen since, in reality, that surface should be smoother), using the Pen tool to modify paths, and so forth. The phone has irregular, asymmetrical shapes that gives Mohammad the chance to explore more difficult topics by way of a practical example.

    For example, when I think of the Pen tool the way he’s described it, I always think, “Oh I need to do that in Illustrator and copy+paste my path into Photoshop,” but now, it’s made me look into using Photoshop’s Pen tool in situations such as this.

  • Terris

    This looks amazing… wow. Thanks for the tut!

  • http://www.flickr.com/glandix/ Jesse Kaufman

    wow … I’ve seen lots of “how to make a realistic ______” posts, but all of them seem to fall short of ACTUALLY looking realistic … some are close, but really should be called “surrealistic” instead of “realistic” … this is probably the most realistic-looking of all the posts I’ve ever seen! great work!

    @Jacob Gube: oh definitely look into Photoshop’s pen tools … they are amazing and offer the ability to do so much that you’d normally have to do in Illustrator … I’d say a good 75% of all my website design work is done using Photoshop’s SVG tools … if for nothing else, the ability to go in and alter the layout later without having to redo any work (or losing image clarity/quality)!

  • http://sixrevisions.com Jacob Gube

    I agree with you on the realism. When Mohammad first sent me a preview, I thought it was a tutorial on how to trace a cell phone because I really believed it was a real photo of a cell phone. I didn’t think he’d actually create it from scratch. But he did!

    As for the Pen tool: see, when you referred to SVG, I automatically thought “Oh I need to do that in Fireworks.” Maybe it’s because I’ve been using Photoshop for a while, so I still have these preconceptions about what application to use where. Back when I first started, Vector paths = Illustrator, image/raster editing and creation = Photoshop, SVG, raster/vector hybrid = Fireworks. It’s gotten to the point where you can do most of these things just in Photoshop.

  • http://www.ericvasquez.net Eric Vasquez

    This is a great tutorial, and I agree with the other posts that it looks incredibly detailed and realistic. I will have to try this one out for sure. And in regards to the PS/AI what to use where, I agree with Jacob that so much stuff can be done exclusively in Photoshop now which I think is great. I typically only find myself using Illustrator nowadays when I need to use some type which I may need to resize so that I can just scale the vector-based type instead but other than that? Maybe for some vector illustration work, but that’s about it! Nice work on this tutorial though, really good!

  • http://www.dmd-digital-retouching.com DMD

    This is incredible, at some point this week I’ll follow this step for step. I imagine it’ll teach me a lot, I haven’t done much ‘from scratch’ work, so thanks for the tutorial.

    Danny

  • http://desaindigital.com/en Jeprie

    Do you mean iPhone? iPad?

    They are way too simple. I just draw another mockup on iPad and it only took 20 minutes to do it. It just made from some rounded rectangles with inner glow and gradient overlay.

  • http://desaindigital.com/en Jeprie

    I don’t use Illustrator a lot.

    Yesterday I draw an iPad. The path is made in Illustrator and then imported to Photoshop. In Photoshop, I turn all path into smart object and add some layer styles. It does easier.

    I don’t know if others already knew this technique but I find it very useful.

  • http://desaindigital.com/en Jeprie

    Most of them is not realistic because they make it too perfect. When everything is too perfect you’ll just get a realistic icon. There are some things you need to remember while creating a realistic object.
    1: Consistent Lighting
    2: Shadow and Cast light
    3: There’s no solid color in reality. There is no pure black, pure white, or pure red. That’s why we need to add gradient overlay to every shape.

    I think the best aspect of pen tool is that you can resize it without degrading its quality. I always try to use a layer shape if possible.

  • http://desaindigital.com/en Jeprie

    Thanks.

    You can do almost everything in Photoshop. The best thing of Illustrator is great control on path. If Photoshop has that control I’ll stop using Illustrator. You can also create illustration in Photoshop, just make sure to use correct resolution, 300 dpi for print.

  • http://richworks.in Richie

    No no.. Jacob is absolutely right.. Tutorials are not about going from point A to point B. Its about what you learn in the process and not trying to imitate the end result.

    You say:
    “In this tutorial, we will pick the top right corner of the canvas for our light source. The first consequence of this is that the shadows will be at the bottom left of object. The second result of having the light source at the right side is that the object will be darker on the left side.”

    You are indeed right about that, however the data provided is insufficient and (assuming it is a shiny phone) there are other reflections that have to be added too (of the room or wherever the phone is placed). My suggestion would be to take an actual picture of the phone and try different lighting settings and see how the shadows vary in intensity as the light sources goes farther (plus the room is illuminated too) and other sorts of things like that. This is just a thought. “When you aiming for perfection.. every last detail must be giving utmost attention” πŸ™‚

    Apart from that, I think you did a great job with the tutorial. You have taken the Pen tool to a whole new level. I certainly learnt a very useful technique and I am very happy about it. I am

    OK, coming back the where I was: Maybe what I meant was, when people are so tantalized by the aesthetic appeal these days, “most” of them have an eye for something which is modern and state-of-art (however, this might be completely untrue in a different context) but you get my point, right πŸ™‚

    But hey! you were insisting more on the realism of lighting and shadows and that’s the beauty of writing a tutorial: to teach the fundamentals of visual appearance/realism and effectively utilizing the “tool” to transform the true object into a digital one.

    The problem nowadays isn’t just the tutorials themselves or their usefulness; it’s how they are positioned relative to design. Most of the tutorials are not β€œdesign” tutorials; they are, more accurately, tool tutorials(tools in this case are PS and IL).

    This may seem a negligible difference to some. The problem with the former is that it falsely implies that you are learning to design but in actuality you are just embracing the tool! If someone follows certain steps in creating an effect, that is learning how to use a particular software application. (this is just my perception)

    I’m sure my comment is no way related to my statement but I thought I’d let out what I had in my mind. I appreciate the work you put in, Jeprie and it’s commendable. Please don’t take this personally guys πŸ™‚

    Thanks

  • http://www.fluidbrush.com Rajeesh

    very realistic effect…
    Excellent !!

  • http://desaindigital.com/en Jeprie

    Thanks for your comment.

    It will be great if a tutorial also teaches the concept of design. That is going to be an awesome tutorial. But you must also understand that not every writer can do that. For example, myself. I’m not sure if I can do that with my limited English skill. I also don’t learn design formally. I don’t anything about the concept of design. How can I teach it to others?

    I don’t even know what is design and what is art. I don’t even consider my work as an art or a design. I just love to draw all those stuff. Sometimes others like it, call it art and call me an artist.

    And no! I won’t take it personally, I’m still learning.

    Actually, I do want to draw a concept cell phone. I guess it’s cool to design something new and different. You’ve got that on your site. http://richworks.in/2010/04/27-creative-and-futuristic-cell-phone-concept-designs/

  • http://sixrevisions.com Jacob Gube

    @Richie: Rock on, that’s exactly what I meant. I think a lot of other sites do is focus on the final product. But I think more than the final product, what we envision here on Design Instruct is not only a good final product, but the meaning between point A and point B. That’s why I love it when people leave comments like, “well you could have done X instead of Y to get the same effect, but in less time.” because it means they’re internalizing the techniques and strategies, and thinking about why we’re doing what we’re doing in the steps.

  • http://www.iconebula.com Supratim Nayak

    This is more than realistic. This is real!

  • http://desaindigital.com Jeprie

    Thanks.

    Sometimes, I want to made it like an icon. But I don’t know why it always ends up like this.

  • Daniel Schwarz

    LOL this does actually look freakishly real 😐

  • http://lime-arts.de/blog/ Manuel Anderer

    This is one of the most awesome tutorials i saw in the last years!
    Amazing picture, and how great every single step is written down.
    Great Work Mohammad!

  • http://www.moodeyit.com/website-design-dunstable bob

    Thats Really Cool Looks like a real phone. Awesome

  • http://dznfx.com Jafar

    Really detailed, great tutorial.