Inspiration for digital creatives

Buy the latest issue NOW!

Digital Arts February 2010 - out now Brand new retro
10 new ways to sell your art
Behind the scenes on The Road
New art showcase
Amazing tutorials
Vue 8 Digital Arts Special Edition on free CD!

EDIGIT SIGN-UP

The twice-weekly newsletter with all the latest creative news, reviews, and features



More info...

Tutorial: 3D peeling sticker effect

Wednesday 31 Oct 2007

On the surface, they’re the ultimate in cheese. But for designers, creating a realistic, peeling sticker effect should be stock in trade.

Question of the day!

Neil Bennett
Editor

Do you share your creations online?

Question of the day!

Do you share your creations online?

% of Digital Arts readers agree with you

Yes
TBC
No
TBC

What do you create and how do you share it?

124 characters remaining

Follow the conversation at @TabletChat

I've just used iWork to share a presentation. I use MobileMe to share photos too.RT @markhattersley

I try to do Illustrator illustrations starting from pencil drawings. I try to make myself better! RT @hariana_v

I personally use Balsamiq Mockups rather than paper & pencil. RT @ithain


This is one of those effects that is just fun to create and play with, much in the fashion real stickers were when we were all a bit younger. And, despite the rise of low-end tools that claim to deliver canned sticker effects, the ability to roll your own to your own specifications is just one of those skills that every designer should have.

This method for creating a peeling effect provides you a lot of flexibility in your styles, allowing you to create the effect with your own personal style – and you can use your sticker not just in print, but mix it with Web 2.0 palettes to enhance stamps on Web sites.



You’ll need Photoshop CS2 or higher to create this effect, as it relies heavily on the Warp Transform tool.


01. You can start with almost any image you like. Whether you’re starting with an object or a photo, you’ll want to start by putting what you want “stickered” onto its own Layer. You can do this easily by making a selection with a Selection tool, or just highlighting the layer in the Layers palette and pressing Ctrl + J.


02. Double-click on the right-hand side of the Layer in the Layers Palette to bring up the Layer Styles dialog, or more traditionally go to Layer > Layer Style > Stroke. Set the stroke size to something large, giving your image a nice thick outline. In my case, I set it to 15px.


03. Still in the Layer Styles dialog box, select the Outer Glow menu. Set the Blend Mode to Normal, Color to Black, and adjust the size to a few more Pixels than your Stroke setting. Adjust the Spread until you get a nice, soft outline.


04. While still in the Layer Styles dialog box, select the Drop Shadow menu. Set the Blend More to Normal, Angle to 90- degrees, and adjust the Distance and Size until you get a subtle shadow below your image. Click OK to apply your Layer Effects.


05. Press Ctrl + T to bring up the Free Transform bounding box. Within the box, right-click and select Warp from the menu. Click and drag the lower-right handle up and inward slightly distorting the corner.


06. Press Ctrl + Shift + N or go Layer > New > Layer to create a new Layer above your image layer. Press Ctrl + Alt + G to apply a Clipping Mask. Set the Layer Mode to Screen and Opacity to around 50 per cent.


07. Press Ctrl + D to reset your colours. Select the Gradient Tool G. Click on the Gradient in the Options bar to bring up the Gradient Editor dialog box. Select the default Foreground to Background preset. Drag the right marker, the white one, to a Location of 50 per cent. Click on the left marker, the black one, and then click on the Gradient to the far right. This will add another black marker. Drag your position stops in slightly towards the middle on both sides.


08. With your new Gradient selected, click and drag a small distance, from the top left to lower right, over the distorted corner of your image. You’ll want the gradient line to mark the bend of your sticker. It may take a few tries to get it perfect and this method of using the Gradient tool gives you a bit more flexibility.


09. In your Layers Palette, right-click on the fx icon of your layer to bring up the menu. Select Create Layers and press OK when the confirmation box appears. This will turn each of your Layer styles into its own Layer.


10. Select the Layer labeled Drop Shadow. Press Ctrl + T to bring up the Free Transform again then right-click in the bounding-box and select Warp from the menu. Click and drag the lower-right corner down and to the right. This will stretch out your drop shadow and give your sticker the appearance of being lifted.


11. Next we’re going to soften the shadow a bit. With your Drop Shadow layer still selected, click on the Add Layer Mask button at the bottom of your Layers palette, or go Layer > Layer Mask > Reveal All.


12. Press D to reset your colours again, just in case. Press G to select your Gradient Tool again and then click on your Gradient in the Options bar. In the Gradient Editor dialog box, select the Foreground to Background preset.


13. With your Drop Shadow layer’s Layer Mask selected, drag your gradient from top left to lower right, over the lower part of your shadow. You don’t want your shadow to disappear completely, just soften the edge a bit.


14. You can now adjust your individual Layer Style layers to fine-tune the effect. Once you’ve tuned the styles, you’ll want to select your Highlight layer, hold the Shift key, and then select the bottom-most Style layer, Drop Shadow. Press Ctrl + E to merge all of the layers.



15. Create a new layer above your merged layer. Press Ctrl + Alt + G to set the Clipping Path, set the Layer Mode to Multiply and Opacity to 15 per cent. Select the Gradient tool G and you should still have the default Foreground to Background gradient selected. Drag from the Highlight to the nearest corner to create a shadow effect.


16. The nice thing with this method is that you can use it on almost any image. It also gives you a lot of options to adjust your styles and effects to suit your needs, many with easy methods of adjustment.

Tommy Maloney

Learn about our amazing creative tutorials as soon as they're published -- click here follow @digital_arts on Twitter.


Submit to: DiggDigg deliciousDel.icio.us redditReddit

What is this?

Tip

Some filters, such as the Render filters, are disabled when you are working in CMYK. To get around this, work in RGB mode with CMYK preview turned on (CTRL/CMD+Y). Build your file as normal; when you are finished, convert it to CMYK. This will allow all the filters to work, give you a smaller file, and you won’t lose your colours when you convert the file.

Who: After working for some of the biggest names in the Photoshop-industry, Tommy Maloney created photoshoplab.com. Tommy is now a full- time Web developer.
Contact: photoshoplab.com Software: Adobe Photoshop CS2
Time to complete: One hour
On the CD or download: All files for this tutorial can be found on the cover CD or can be downloaded here