SEARCH
  Tutorials Photoshop Web Layout How to Create a Paper Sticky Note in Photoshop

How to Create a Paper Sticky Note in Photoshop

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:

img

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.).

img

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.

img

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:

img

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.

img

img

img

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.

img

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):

img

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.

img

To make it even more realistic, rotate a little bit the tape.(Edit->Transform->Rotate). Now, the design looks really good.

imgimg

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.

img

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!

img

subscribe to newsletter