In
this Photoshop tutorial I'm going to show you how to design a nice and
clean paper sticky note. Sticky notes are very useful when you're
building creative website layouts for example. Combined with other
elements, the result might be stunning.
What we'll be doing today:
As usually, first step is to open Photoshop and create a new document
of 600x400px. Set the background to transparent.(I use it as a default
setting when working in Photoshop. I find it being a nice way to
start.).
A layer has been automatically created. Before starting to work on
the layer, let's make sure the layer will be fully editable. The
technique used is considered to be a non-destructive technique. The
first layer will be used as background and I want to make it looking
like a wall. This means I'll apply both smart filters and blending
options. Grab the Paint Bucket Tool(G) and paint with white the empty
canvas.
Now, go to Filter->Convert for Smart Filters to convert the layer
for filters. Stylize the layer by adding a "Color Overlay" style. Set
the color to #e3e3e3 and change the Blend Mode to Multiply.
Go to Filter->Noise->Add noise and add a monochromatic gaussian
noise of 4px. Notice that the layer has received a new layer effect
category called "Smart Filters". Now, you can change anytime the color
of the background and the noise.
The background looks like this:
Let's build the sticky note. Grab the Rectangle Tool(U) and draw a
rectangle of 300x250px. Again, make sure to work in "Shape Layers" mode
to ensure that the design will be editable after finishing it.
Add some layer styles to the paper shape like color overlay and stroke to make it look like a real paper.
Grab the Line Tool(U) and with a weight of 1px, draw 7 horizontal
lines and then color them in a dark yellow(#f2f0df). Arrange them at
30px distance one of each other.With the same Line Tool(U) draw 2
vertical lines this time(color #ef8b8b) and arrange them on the left
side of the shape, at a distance of 5px one of each other. Now our
design really looks like a real paper.
To make it looking like a real sticky note, the design needs a sticky
tape. The process is simple. We'll use the Pen Tool(P) to create a
sticky tape shape. Grab the Pen Tool(P), make sure to be in "Shape
Layers" mode in order to create a new shape and layer, set the color to
white and draw a shape like in the image(to draw straight lines, hold
Shift key while clicking):
The shape still doesn't look like a real sticky tape. To make it
looking real, reduce the opacity of the layer to 60% and add a smooth
drop shadow of 1px.
To make it even more realistic, rotate a little bit the tape.(Edit->Transform->Rotate). Now, the design looks really good.
Let's add a nice shadow at the bottom of the paper. With the Pen
Tool(P) draw under the paper layer a shape like in the image.(Make sure
to draw a little bit outside the corner of the paper).
Convert the new layer created for Smart Filters(Filter->Convert
for Smart Filters) and add a gaussian blur of 2px. Reduce the opacity of
the layer to 25% and you've just obtained a clean shadow. Duplicate the
layer, flip it horizontally(Edit->Transform->Flip Horizontal) and
position the second shadow under the bottom-left corner of the paper.
And this is how you design clean and smooth shadows for any type of
shapes.
Let's add a final touch, some text inside the paper. I used a beautiful calligraphic text-font called "Daniel". Download it and with a clean blue, type in something interesting.
With this final touch, our paper sticky note is done. Take a look at what we've done today!
