In this tutorial I plan to get you stuck on web stickers. Placing a custom sticker on your website is a great way to add an additional level of personalization while adding value to your content. Plus, everyone loves stickers! So let’s get started.
Step 1
We’ll first start out by opening a new document and setting the width and the height to 400 pixels. The resolution should be set to 72 pixels/inch and the color mode to RGB Color at 8 bit with the background content set to white.
Step 2
Next unlock the background by double clicking on the padlock.
Step 3
A small window will appear. Click “OK”.
Step 4
With a foreground color of #777777 and background color of white select the gradient tool.
Step 5
Along the top make sure the settings are as follows: Linear gradient is selected. Mode is set to Normal.
Opacity is 100%. Dither and Transparency are checked.
Step 6
With the gradient tool selected start at the bottom of the page, hold down the “shift” key and drag to the top of the page.
Step 7
Next you should create a new layer above the gradient,label it sticker then select the Elliptical Marquee Tool.
Step 8
Starting somewhere in the upper left hand corner hold down the “shift” key and drag down towards the lower right corner. Select a background color of #f4fd00. Then press ctrl+backspace to fill the selection.
Step 9
The next step is to apply some layer styles to our sticker. Go to: Layer>Layer Style>Blending Options. In the “Layer Styles” menu check the “Stroke” option. Set the Size>13px, Position>Outside and Color>#ffffff.
Step 10
Next you should check the “Gradient Overlay” option and set Blend Mode>Multiply, Opacity>26%, Gradient>Black and White, Angle>102 degrees and Scale>46%.
Step 11
With the selection still in place add a new layer, above the layer titled “sticker”, and title it “shine”.
Step 12
Select the “Gradient Tool” and set the foreground color to Black and the background color to white. Edit the gradient by staggering the black and white so you have something similar to below.
Step 13
Then create the gradient starting at the lower right hand corner and dragging to the upper left. Set the Blend Mode>Screen and reduce the Fill>50%.
Step 14
With the “shine” layer selected hold “ctrl” and click on the “sticker” layer. Then press ctrl+E to merge both the layers.
Step 15
Next select the “Lasso Tool” and make a selection which will cut straight across one of the top corners.
Step 16
Once you have your selection press ctrl+J to add the selection to a new layer then title it “peel”.
Step 17
Select the “shine” layer and hold “ctrl” then click on the “peel” layer. This will create a selection of the “peel” layer. With the “shine” layer still selected press “delete”. Then press ctrl+D to remove the selection.
Step 18
Select the “peel” layer. Go to: Edit>Transform>Flip Vertical. Then press ctrl+T to select the transform tool. Rotate and align with the “shine” layer so you have something which looks like the example below.
Step 19
Above the “shine” layer add some text. Then create a new layer above the text. Hold “ctrl” and click on the “peel” layer. Fill this selection with black. With the new layer still selected go to: Filter>Blur>Gaussian Blur and set the Radius>8px.
Step 20
Next select Edit>Transform>Distort. Grab the lower right corner and pull down and to the right. With the new layer still selected hold “ctrl” and click on the “shine” layer. Press ctrl+shift+I to invert the selection. Then press ”delete” to remove any unwanted artifacts outside the area of the sticker.
Step 21
Finally if you like, you can add a subtle drop shadow to the “shine” layer for looks. If you’d like to use if for the web with background transparency, turn the gradient layer off and save it with a .png file extension. Enjoy!
Download PSD
Related posts:
KapDesignStudio is a blog dedicated to inspiring creativity in the areas of graphic design, web design and development. Check out the collection of wonderful tutorials, inspirational articles and free wallpapers for your desktop or phone.
0 comment