Dec 01
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
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.
Now, repeat this step for the horizontal row.
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.
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.
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.
Choose any 3 icons and merge them together. Again, go to Edit > Transform > Warp and repeat this step.
Repeat this step.
6. Knot
Paste the Setting icon in a new layer. Use the Warp tool to make it look like a knot.
7. Left Loop
Now, work on the left loop by repeating the warping step.
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.
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.
10. Repeat The Shading and Hightlighting Step
Repeat the previous step to create the highlight and shading for the bow.
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.
Final
Here is the final image.
Coding Clean and Semantic Templates N.Design Studio Redesigned
Comments
Pages: 9 8 7 6 5 4 3 2 1 » Show All
There are 90 comments (+Add)
Pages: 9 8 7 6 5 4 3 2 1 » Show All
Loading ...
90 icons for vista http://www.vista-style-icons.com
March 7th, 2010 at 11:44 pm
Really i am glad to apply this. thanks for sharing these unique knowledge.
and for all tutorial.
89 sbobet http://www.sbobet-th.com
March 4th, 2010 at 3:48 am
I try to follow the examples already. Results have recently been encouraging.
88 wayfarerdesigns
March 1st, 2010 at 1:35 pm
this is great!
thanks for the great tutorial, and i love your site, very useful!
keep up the great work!
87 capsiplex http://www.capsiplexzayiflamahapi.net/
February 23rd, 2010 at 5:33 pm
thanks for this useful bussines directory
86 Watti Stevens
February 22nd, 2010 at 9:22 pm
What does that say? Car Kit!? GPS!?
Nice site! Your doing a great job. This was a fun tut.
85 Firmalar http://www.firmasayfam.com
February 11th, 2010 at 10:06 am
thanks for this useful bussines directory
84 motaheda http://www.el-motaheda.com
February 10th, 2010 at 7:14 am
greaaat i have mobile store in egypt and i’ll use this design thnkx so much
اتحدنا جميعا واخترنا لك الافضل وطورناه من اجلك … لنجعلك متميزا
ومن اجلك ايضا أنشأنا الشركة المتحدة ش.م.م … وكلاءٌ لأجهزة المحمول Anycool وG-Tide و وكلاءٌ للأجهزة الالكترونيه للسيارات مثل الـ Car Kit والـ GPS من Unitronics والحاصلين على شهادة الجودة الاوروبية والحاصلين على ضمان لمدة عام كامل ضد عيوب الصناعة من الشركة المتحدة .
نحن حولك اينما كنت . فقط اتصل بنا على 19043 او زور موقعنا الالكترونى http://www.el-motahed.com
المتحدة الخبرة والثقة
83 pjann
February 8th, 2010 at 4:41 pm
Thank you for the tutorial!
82 Divya Rao
February 6th, 2010 at 1:12 pm
wow. keka ra babu. love it !
81 Energie
February 6th, 2010 at 12:47 pm
You need to check your comments. Full spam over here. Very good tutorial anyway.