PSD Tutorial: Making A Wood & Scrunched Paper Effect Web Layout
In this Photoshop tutorial, I'll be creating an illustration that can be used to design either a whole CSS layout or a simple web graphic, for instance an icon or menu navigation. This tutorial begins with designing a scrunched and torn paper effect. We will overlap the sheets, and then add surrounding paint, rulers, sharpeners, pens, erasers, pencils and any other stationary on a wood textured background; or else save as a PNG, so that it takes the default background of your website. The tutorial finishes by using a handwritten font called Hand Of Sean, finalising this desk-space scene.
If you don't have Adobe Photoshop, or you would like to upgrade to the new CS5.5 Version, take a look at the Adobe Special Offers from the online Adobe Store. If you're new to Photoshop, we have some beginner tutorials and basic tips coming very soon for some of the lesser established designers.
If you don't have Adobe Photoshop, or you would like to upgrade to the new CS5.5 Version, take a look at the Adobe Special Offers from the online Adobe Store. If you're new to Photoshop, we have some beginner tutorials and basic tips coming very soon for some of the lesser established designers.
Download Photoshop (PSD) File
Download Handwritten Calligraphy Typeface
Download Scrunched & Crumpled Paper Effect
Photoshop Tutorial Step 1: Ripping, Scrunching & Creasing The Paper Effect
1.1. Set up the canvas, any size, with your desired background.
1.2. Create A New Layer (Ctrl + Shift + N), form a rectangle in the shape of a piece of note Paper, and Fill (G) it white.
1.3. Now, using the Rectangular and Elliptical Marquee Tool again, erase areas (like below) to resemble a note Paper effect.
1.4. Create A New Layer (Ctrl + Shift + N) again.
1.5. By using the Single Row/Column Marquee Tool, form the note lines and fill them respectfully blue and red with 50% opacity.
1.6. Create A Clipping Mask over the note Paper and then Merge Down (Ctrl + E) into it.
1.7. Add a Layer » Layer Style » Drop Shadow, but leave the settings as they already are.
1.8. Add a Layer » Layer Style » Inner Shadow - maximize the Size to 250px and make the Opacity 10%.
1.9. Select the Oil Pastel Large 63 Brush and rip or tear edges of the note.
1.2. Create A New Layer (Ctrl + Shift + N), form a rectangle in the shape of a piece of note Paper, and Fill (G) it white.
1.3. Now, using the Rectangular and Elliptical Marquee Tool again, erase areas (like below) to resemble a note Paper effect.
1.4. Create A New Layer (Ctrl + Shift + N) again.
1.5. By using the Single Row/Column Marquee Tool, form the note lines and fill them respectfully blue and red with 50% opacity.
1.6. Create A Clipping Mask over the note Paper and then Merge Down (Ctrl + E) into it.
1.7. Add a Layer » Layer Style » Drop Shadow, but leave the settings as they already are.
1.8. Add a Layer » Layer Style » Inner Shadow - maximize the Size to 250px and make the Opacity 10%.
1.9. Select the Oil Pastel Large 63 Brush and rip or tear edges of the note.
Photoshop Tutorial Step 2: Duplicating The Ripped & Torn Paper Effect
2.1. Duplicate (Ctrl + J) the layer with all it's styles intact.
2.2. With Edit » Transform, Rotate the layer to make it overlap the first one. You can also rip and tear it more.
2.3. Reduce the Distance on the Drop Shadow to 2px, the Opacity to 50%, and the Size to 8px.
2.4. Repeat these steps with a third sheet of Paper if you like.
2.2. With Edit » Transform, Rotate the layer to make it overlap the first one. You can also rip and tear it more.
2.3. Reduce the Distance on the Drop Shadow to 2px, the Opacity to 50%, and the Size to 8px.
2.4. Repeat these steps with a third sheet of Paper if you like.
Photoshop Tutorial Step 3: Adding Rulers, Pens, Erasers, Pencils & Stationary
3.1. Now, obtain a photo of a Ruler, and again, use Edit » Transform appropiately to fit it into your Photoshop document.
3.2. If you wanted, you could slip the Ruler in between two sheets of Paper for a realistic effect.
3.3. Add a Layer » Layer Style » Drop Shadow. Make the Opacity 30%, the Distance 3px, the Spread 0%, and the Size 5px.
3.4. Add a Layer » Layer Style » Inner Shadow. Make the Opacity 30%, the Distance 0px, the Choke 0%, and the Size 80px.
3.5. With Image » Adjustments » Brightness/Contrast, raise the Contrast by 50.
3.6. I shortened my ruler by erasing a little of it, and then added some more stationary with the same effects.
3.2. If you wanted, you could slip the Ruler in between two sheets of Paper for a realistic effect.
3.3. Add a Layer » Layer Style » Drop Shadow. Make the Opacity 30%, the Distance 3px, the Spread 0%, and the Size 5px.
3.4. Add a Layer » Layer Style » Inner Shadow. Make the Opacity 30%, the Distance 0px, the Choke 0%, and the Size 80px.
3.5. With Image » Adjustments » Brightness/Contrast, raise the Contrast by 50.
3.6. I shortened my ruler by erasing a little of it, and then added some more stationary with the same effects.
Photoshop Tutorial Step 4: Adding The Handwritten Calligraphy Font
4.1. Now, using the downloadable creased, scrunched & crumpled Paper effect, make it the scaled layer that is on top.
4.2. Alter the Opacity to 15%, and the Blending Mode to Multiply.
4.3. With Image » Adjustments » Brightness/Contrast, lower the Contrast by 100.
4.4. Now, with the Text Tool, type your text in the Hand Of Sean font.
4.5. Within the font Character options, there is a symbol with a capital A, and then a lowercase A on top of an up arrow.
4.6. Fyi, you can use this to change the spacing between each line to fit inside the lines of your Note Paper effect.
4.7. From here, you can alter the tutorial slighty to make this into a menu nagivation for a CSS layout, or a basic web graphic.
4.2. Alter the Opacity to 15%, and the Blending Mode to Multiply.
4.3. With Image » Adjustments » Brightness/Contrast, lower the Contrast by 100.
4.4. Now, with the Text Tool, type your text in the Hand Of Sean font.
4.5. Within the font Character options, there is a symbol with a capital A, and then a lowercase A on top of an up arrow.
4.6. Fyi, you can use this to change the spacing between each line to fit inside the lines of your Note Paper effect.
4.7. From here, you can alter the tutorial slighty to make this into a menu nagivation for a CSS layout, or a basic web graphic.
