39 Comments
Funky Stickers
August 14, 2008This will show you how to create that slapped on sticker effect I’m sure you’ve seen popping up around the internet. Its simple to make but looks really good in pieces of art and also on webpages for example as an image link to an RSS feed. Read on to discover how to create these in only a few steps and learn a really easy way to achieve a 3D text effect at the same time.
Tutorial Files
If you are a PSD PRO member then download the PSD file and much more by going here.
Introduction
This sticker effect looks great when slapped on web pages, I’m sure you’ve noticed them for RSS feeds or post comments or something along those lines. Well the effect is simple to make and worth learning. I’d definitely recommend downloading the PSD file for this tutorial from the tutorial files page as It will come in handy especially in the last few steps just to refer to and is probably the best way of learning Photoshop. I’d also like to see how creative you can get with these stickers so upload your image at the end of the tutorial.
Step 1
Start by creating a new document with dimensions; 10x10px. Now we want a grid to show so go Edit>Preferences>Grid… and set it to a gridline every 5px and 1 subdivision. Make sure the grid is showing, if its not then hit Ctrl+’. To make the next step even easier we will turn the snap on by going View>Snap.
Step 2
Select a blue color, something like #0b7dac should work well then select the line tool and make sure in the main toolbar that the fill pixels button is active, the weight is set to 1px and that anti-alias is checked. Now just draw a vertical line then a horizontal one so that the image looks like the one below. Go Edit>Define Pattern and save the pattern then close this document.
Step 3
Create a new document with dimensions; 500x500px then create a new layer then hit D to reset the colors then hit Ctrl+backspace to fill the layer white. Right click on this layer and select blending options and add a pattern overlay using the settings shown below.
Step 4
Select the text tool and type some text, if you go Window>Character you will open up the character editor which will give you more control over the text. I used Impact regular italic as the font and also adjusted the tracking (horizontal spacing of characters) and the leading (vertical spacing between lines). You can now change the color of the text; for ‘PSD’ I used #ec7299 and for ‘LEARNING’ I used #62acd1 but feel free to experiment.
Step 5
Go into the blending options for the text layer and add a stroke with the settings shown below, using a dark blue as the color.
Step 6
We now want to make this look 3D, there are a few ways to this but most of them them would just overcomplicate this as we don’t need it too accurate. So firstly, create a new layer and choose a vanishing point which in mine I marked with a simple black dot. If the vanishing point is below the text it will give the appearance that we are looking up at it, if its above it will seem that we are looking down at it and the same rule applies for putting the vanishing point at the left or right. Things tend to stand out better and look bigger if we put the vanishing point below the object like I have done here. Next I selected the line tool and starting at the vanishing point I drew lines extending up to any outside edges that made a tangent. If you’ve done any technical drawing or graffiti art then this should be quite easy. Study the image below if you don’t know what I’m talking about.
Step 7
Create a new layer then move it below the text layer and make sure the foreground color is the same color as we used for the stroke. Select the polygonal lasso tool and make selections within the perspective lines then hit Alt+backspace to fill them with the dark blue color and do this for all the lines. If you did it correctly it should give the same effect as shown below.
Step 8
We want to get rid of part of the bit at the bottom so using the polygonal lasso tool again make a selection around the bit you want to get rid of then hit delete. You could also use a layer mask here if you think you might want to go back and change something. You can also delete all the perspective lines.
Step 9
Below I’ve shown what my layer panel looked like at this point so try and arrange your layers to look similar to this and make sure that the text layer and the 3D bits are within a layer group. Now right click on the layer group and if there is an option saying ‘Convert to Smart Object’ then click it, if not then go back and left click on the layer group and hit Ctrl+E to merge the group.
Step 10
Right click on the merged layer or smart object then go to blending options and add a drop shadow and a stroke with the settings shown below.
Step 11
Now hit Ctrl+T to enter free transform mode then move and scale this layer like shown in the image below.
Step 12
You can now add some extra things to your image; I’l breifly describe what I did. I flattened the pattern layer and added a displace filter using clouds as the map, if you don’t know much about the displace filter, I wrote another tutorial using it here. I also made a clouds layer above the pttern layer and set it to overlay. I used a splatter brush for just behind the sticker. I then used the brush tool with a 3px brush to give the effect of a biro pen.
Similar Tutorials:
- Dance Photo Manipulation Part 2
- Spray Paint Text
- Luminescent Lines
- Colorful Spirograph Poster
- Scanline Text
Save and Share this Post
We like people who share our posts! Del.Icio.Us - StumbleUpon - Float - Reddit
August 21st, 2008
xeh:
nice tut!! easy to understand.
August 22nd, 2008
Ross:
xeh,
Thanks, glad you like it:)
November 15th, 2008
solo sexo:
Here is much work done, obviously. Good site
December 29th, 2008
Johdek:
Nice tutorial, need to make a webtemplate for a game and try this effect to create a funky logo.
February 6th, 2009
dan w:
this is the first tutorial of yours i’ve managed to finish! haha. it looks class though. maybe not as neat… but it’s definitely looking good. cheers man.
February 13th, 2009
Tom:
Great tutorial!
but i really dont understand the vanishing point part at all. i created a vanishing point (ctrl-alt-v) but then dont understand what to do from there, and what to do with the black dot etcetc
March 23rd, 2009
vman:
Great tutorial!
Helped me create a cool looking header for my website
http://www.vmancentral.com/
Thanks!
June 5th, 2009
oreo:
Great Effect! Im in the phase of making album covers now :P I used this for this one:
http://i39.tinypic.com/ngqzwh.jpg
July 13th, 2009
dudee:
which brush set u used
July 26th, 2009
ace:
great tutorial ^_^
thanx
July 26th, 2009
James:
I also dont understand the Vanishing Point part
August 10th, 2009
sparazza:
tnx man, cool tutorial,
god bless…
August 18th, 2010
roneybalack:
Photoshop tutorial, from beginner to advanced. Including Photoshop text effect tutorials, photo manipulation tutorials, give you joomla templates,joomla extensions,wordPress theme,web templates,
if you think i make a spam please remove this comment.
thanks.. find more best tutorials here http://download60s.com
September 6th, 2010
Brites:
Hi! Great Tut!
Im a newbie and managed to get it right… so the teacher must be awsome!
Thanks!
I just couldnt get the distort part right at all… That cluod mapping… I dont know if Im supposed to have other file, or what… can u help me with that?
I followed the link u suggested but still dont know what to do.
Great stuff!
Thanks again!
October 12th, 2010
Manik:
Great tutorial. Now with the help of this tutorial I can create cool headers.
Thanks a lot for sharing.
February 23rd, 2011
saurav:
nice tuts………….
June 13th, 2011
Keaton Cohen:
Bruna Buschur
July 15th, 2011
polo shirts:
Hello, i read your blog occasionally and i own a similar one and i was just wondering if you get a lot of spam remarks? If so how do you reduce it, any plugin or anything you can suggest? I get so much lately it’s driving me mad so any assistance is very much appreciated.
July 19th, 2011
765roulettesite:
Howdy! I could have sworn I’ve been to this site before but after browsing through some of the post I realized it’s new to me. Nonetheless, I’m definitely happy I found it and I’ll be bookmarking and checking back often!
July 19th, 2011
345guidepoker:
Hey just wanted to give you a quick heads up. The text in your article seem to be running off the screen in Ie. I’m not sure if this is a formatting issue or something to do with web browser compatibility but I figured I’d post to let you know. The design and style look great though! Hope you get the problem fixed soon. Thanks
July 19th, 2011
aapokersites:
Hi there! I just wanted to ask if you ever have any trouble with hackers? My last blog (wordpress) was hacked and I ended up losing many months of hard work due to no data backup. Do you have any methods to protect against hackers?
August 21st, 2011
dota 2:
Hello, I think your website might be having browser compatibility issues. When I look at your blog site in Opera, it looks fine but when opening in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up! Other then that, great blog!
August 23rd, 2011
android:
Thanks for your personal marvelous posting! I actually enjoyed reading it, you will be a great author.I will be sure to bookmark your blog and may come back later in life. I want to encourage that you continue your great work, have a nice holiday weekend!
September 13th, 2011
kurs prawa jazdy katowice:
I am glad to be one of several visitors on this outstanding website (:, thanks for putting up.
October 31st, 2011
lightweight vacuum cleaner:
For my Creative Writing class we have to write a short story, I really want to write some thing along the lines of Columbine, but I’m worried about the reaction of my teacher. As far as I know, he has no personal history with the idea, but … I don’t know. What would you want to see out of a short story for a creative writing class?.
November 23rd, 2011
Gwyneth Dolbow:
Random Google results can lead to wonderful blogs such as this. You are performing a good job, and we share plenty of thoughts.
November 25th, 2011
Lenny Leck:
I like the stuff you put in here. Very suitable information. Consider yourself saved.
March 4th, 2012
Augustus Naranjo:
This are actually remarkable yet again routines that assists you to chill out your spinal cord and as well sleep suitably without the practical knowledge on the subject of kind inside your all over again.