Create a Moleskine Notebook Icon in Photoshop

December 21, 2012 by in category Photoshop, Tutorials with 0 and 0
In this Tutorial we’ll create a nice Moleskine Notebook App Icon you can use in a dock, on a website project or any other projects, we’ll use some Layer Styles, Filters and nice techniques.


Resource Needed for this Tutorial:

Crumbled Paper
Grain Texture
Elastic Pattern

Step 1 – THE New Document

Open Photoshop and create a new document of 1250x1250px with a White background.

Select the Rounded Rectangle Tool (U), click on the canvas, this will open a option panel, I’ve created 1024x1024px with a 175px radius.

Next let’s add some effects to the app icon shape using layer styles, just double-click on the shape layer or go to Layer – Layer Style and enter those parameters:


Step 2 – Leather Texture

You could use a texture image for the leather but I prefer to create it myself. Create a new layer, Fill it with white, then go to Filter – Filter Gallery then Textures – Stained Glass with Cell Size : 10, Border and Thickness : 4 and Light Intensity : 3.

Create a new layer, fill it with white and apply the same Stained Glass Filter change the opacity of the new layer to 50%. Merge the two stained glass layers together. Add some Noise, Filter – Noise – Add Noise, 15% amount.

Select all the canvas, Select – All, then copy, Edit – Copy, go to the Channels, create a new channel and paste, Edit – Paste. Go back to the Layers panel, create a new layer, fill it with Black, To finish this texture, go to Filter – Render – Lighting Effects and enter those parameters, make sure the Alpha channel is selected for the Texture Channel.


Step 3 – Leather and Stripe

Make a selection of the rounded corner square we created at the beginning, Ctrl+left click on the thumbnail in the layer box, select the Leather texture layer and create a Layer Mask, Layer – Layer Mask – Reveal Selection. Change the opacity of the Leather layer to 25%.

Select the Rectangle Tool (U), create a rectangle in the centre of the icon with the same width and a green colour, #C5E61D. add a Drop Shadow Layer Style to this shape with those parameters, make sure to check the box in the Blending Options next to Layer Mask Hides Effects.

Apply the same layer mask to this shape than on the Leather layer.


Step 4 – Highlight and Textures

Create a new layer, select the Brush Tool (B), with a big soft rounded brush and white for the colour, paint on the top left side of the canvas. create a clipping mask, right click on new layer – Create Clipping Mask. change the opacity to 50%.

Next we’ll use two textures that you can find at the beginning of this tutorial in the Ressources Needed section. drag the grain texture first, resize it if needed, place it on top of the other layers, change its Blending Mode to Overlay and create a clipping mask.

Drag the second texture, the crumbled paper texture, resize it if needed, create a clipping mask, change its opacity to 15% and Blending Mode to Darker Color.


Step 5 – Shadows

Duplicate the original rounded corner shape twice, place both new layers on top of the others, set the Fill to 0% for both layers. On the first one apply those layers styles:

and those layer styles on the second rounded corner layer:


Step 6 – Elastic Stripe Part 1

Now we have our notebook, let’s create an elastic stripe to keep it closed. Use the Rectangle Tool to create a black stripe on the right side with the same height than the app icon.

Add a Pattern Overlay and Drop Shadow layer styles to this shape, the Pattern I used is available in the Ressources Needed section a the top of the Tutorial.

Create a new layer, paint in white with the same brush on the right part of the canvas, change the opacity to 50%, make a selection of the Elastic stripe shape, create a layer mask on the new layer.

Duplicate the original Elastic stripe shape layer, place the new one on top of the others and change its opacity to 15%.


Step 7 – Elastic Stripe Part 1

Create 3 thin stripes using the Rectangle Tool on the Elastic Stripe and apply the same layer styles to the 3 stripes:

place all the Elastic stripe layers we’ve created in step 6 and 7 in a group, create a blank layer mask on this group. Select the Brush Tool with a small soft rounded brush, maks sure you’ve got the layer mask selected and the foreground colour is set to black. paint on the top and bottom part of the elastic stripe, this will give more depth to it.

Here’s an exemple with an image i added on top of the green stripe.

That is pretty much it! I hope you enjoyed this Tutorial, you can create a lot of app icons using those technique of shadow and highlights. Feel free to leave a comment and share your creations.


Add comment

PROUDLY POWERED BY WORDPRESS ~ BY Adrien | Supercolor Studio