I recently spotted an iPhone ad which inspired me to write this tutorial. It is a gift ribbon, consisting of various app icons, wrapped around an iPhone. This effect can be easily achieved with Photoshop Warp transform tool. Christmas is around the corner and I hope you may find this tutorial useful for upcoming projects. If you are not familar with the Warp tool, I sugest you read my Photo Strip tutorial first.

Preview of The Final Image

preview

1. Download The Source Files

Download the zip file which includes the iPhone image, app icons, and final PSD file.

2. Place The App Icons

Open the iPhone PSD file. Paste the app icons on top of the iPhone layer. Align the icons in a vertical column as shown.

vertical icons

Now, repeat this step for the horizontal row.

horizontal icons

3. Mask The Icons

Merge the icon layers and group them. Load the iPhone selection by holding the Cmd key and clicking on the iPhone layer. With the layer group selected, click on the "Add layer mask" icon to mask the layer group.

mask the icons

4. Shadows

With the Gradient tool, apply a black gradient close to the edge of the phone, making them look like they are wrapping around the phone.

mask the icons

5. Right Loop

Select any two app icons of your choice. Merge them together in one layer. Go to menu Edit > Transform > Warp. Now you should see a overlay grid on top of the image. Drag the points, handles, or any where in the grid to warp the image.

right warp 1

Choose any 3 icons and merge them together. Again, go to Edit > Transform > Warp and repeat this step.

right warp 2

Repeat this step.

right warp 3

6. Knot

Paste the Setting icon in a new layer. Use the Warp tool to make it look like a knot.

knot

7. Left Loop

Now, work on the left loop by repeating the warping step.

left warp 1

left warp 2

8. Shading

Create a new layer and set the Blending Mode to Multiply. Load the selection of the icon layer. Apply a light black gradient to create the shading effect.

shading

9. Highlight

Now we need to hightlight the ribbon. Load the selection of the icon layer. Create a new layer. Fill the selection with white. Shift the selection 1px down, 2px right, and then delete the selection.

highlight

10. Repeat The Shading and Hightlighting Step

Repeat the previous step to create the highlight and shading for the bow.

highlight and shading

11. Bow Shadow

Create a new layer under the bow. Use the Lasso tool and draw a selection. Feather (Select > Modify > Feather) the selection by 10px. Fill the selection with black and mask the layer with the iPhone selection.

bow shadow

Final

Here is the final image.

bow shadow

139 Comments

1 5 6 7
  1. Juno Mindoes
    Dec 24, 2010 @ 10:34 pm

    I want iphone 4 white as my christmas present!

    Reply

  2. cygnis media
    Dec 28, 2010 @ 2:32 am

    I really enjoy to read this awesome blog post.
    mobile phone application development

    Reply

  3. Rolex Sea Dweller
    Dec 28, 2010 @ 2:33 am

    Great post thanks for sharing a informative article keep it up

    Hi
    this is really good,
    Interesting post about The Power of Information Review launches
    Good day

    The Power of Information Review launches excellent topic!!
    Rolex Sweep

    Reply

  4. judaic
    Jan 7, 2011 @ 4:38 am

    very good and very easy to use. thanks for sharing.

    Reply

  5. willson
    Jan 12, 2011 @ 3:19 am

    Very happy to see your article, I very much to like and agree with your point of view. Thank you for sharing.ugg outlet

    Reply

  6. Ben
    Jan 13, 2011 @ 3:42 am

    Hey this is a great post. I’m going to email this to my buddies.

    Reply

  7. PSDartist
    Jan 28, 2011 @ 7:43 pm

    Great tutorial. Thanks for sharing.

    Reply

  8. tütüne son
    Jan 29, 2011 @ 3:52 pm

    The christmas time is comeing, white iphone 4 conversion kit will be the best present for yourself and family.

    Reply

  9. altın çilek
    Feb 2, 2011 @ 7:00 am

    Great tutorial .Thanks for sharing.

    Reply

  10. orhanbt
    Jul 15, 2011 @ 4:48 pm

    This is verry good

    Reply

  11. orhanbt
    Jul 15, 2011 @ 4:52 pm

    this is verry good.

    Reply

  12. Nargile
    Jul 18, 2011 @ 2:47 pm

    Good job.thank you

    Reply

  13. complex41
    Aug 23, 2011 @ 11:51 am

    And then he handed you the thirty-five 45

    Reply

  14. δονητές
    Sep 12, 2011 @ 3:08 am

    I’ve observed that in the world nowadays, video games are classified as the latest craze with children of all ages. There are times when it may be impossible to drag your kids away from the video games. If you want the best of both worlds, there are various educational activities for kids. Interesting post.

    Reply

  15. B2B Marketplace
    Oct 13, 2011 @ 6:39 am

    Woof great i really did this with my iphone. i will post pics

    Regards.
    Mujtaba
    B2B Marketplace

    Reply

  16. yoursurprise-bellatio-4
    Dec 7, 2011 @ 8:18 am

    Hey there would you mind letting me know which web host you’re working with? I’ve loaded your blog in 3 completely different internet browsers and I must say this blog loads a lot faster then most. Can you suggest a good internet hosting provider at a fair price? Thanks, I appreciate it!

    Reply

  17. yoyo
    Oct 4, 2012 @ 10:28 pm

    Good Design

    Reply

1 5 6 7

Leave a Reply