Dec 01

Tagged in: Comments:Add

iPhone Gift Ribbon

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

Delicious Stumbleupon Digg

Coding Clean and Semantic Templates N.Design Studio Redesigned

Comments

Pages: 11 10 9 8 7 6 5 4 3 2 1 » Show All

There are 109 comments (+Add)

  • 109 triathlon wetsuit http://www.triathlon-wetsuit.org/

    This is my aboriginal time i appointment here. I begin so abounding absorbing being in your blog abnormally its discussion. From the bags of comments on your articles, I assumption I am not the alone one accepting all the amusement here! accumulate up the acceptable work.

  • 108 marathon training http://www.marathontrainingschedule.net

    Nice! Now I know what to do, thank you! And as this information is educational so this site has been added to my RSS feed for later browsing. To know more about
    marathon training visit: marathontrainingschedule.net
    [ marathon training ]

  • 107 nofel http://nofel.saputra08.ipb.ac.id

    hmm good tutorial, thx ^^

  • 106 kai http://oki.maulana08.student.ipb.ac.id

    amazing… this is great tutorial

  • 105 TV http://www.yamgo.com/

    This is nice tips. This is good tips for some users like me.

  • 104 Discount Hotels http://www.discount-hotels.com/

    I found this article is necessary for newbie and also for the people from different stage.

  • 103 raymond mill http://www.raymondgrinder.com

    this is very nice! Looks pretty easy and not so time consuming

  • 102 marathon training schedule http://www.marathontrainingschedule.net

    As this information is educational so this site has been added to my RSS feed for later browsing.

  • 101 Mark http://www.logandesigns.co.uk

    really good tutorial

  • 100 C group http://www.janome-embroidery-machine.com

    This is really neat! Site has been added to my RSS feed for later browsing.

Pages: 11 10 9 8 7 6 5 4 3 2 1 » Show All

Post Your Comments

(required)

(required)

Comment Guidelines

  • Please keep comments related to topic. And be nice, don't spam!
  • Basic HTML tags are allowed:
    <a href> <abbr> <acronym> <blockquote> <code> <em> <strike> <strong>
  • Note: un-related or spam comments will be deleted.

Live Comment Preview

Back to top