|
Author: Scott Webb
Type: Photoshop
Difficulty:Medium
Description: In this tutorial we will be going through a full photoshop design of journal/personal type website.
Click on the images to see them in full size!
NOTE: To be able to complete this tutorial your should have good knowledge of photoshop and where to find its tools.
For an affordable web design Melbourne service contact Vivation Design.
Step 1: Open up a new photoshop document 1000 pixels wide and 750 pixels high. Fill the background layer with black.
1st we will be making the background. Find an image you would like to use as the website background, im going to use a free stock image found here. If you use any of the free stock images that I suggest throughout this tutorial then please obey the creaters usage rules.
Place the image into your document and then duplicate the image untill you have filled your intire document with the texture. Merge all of these layers and then name the layer "Background1"
Now duplicate the "Background1" layer and call the new layer "Background2". Set "Background1" layers opacity to about 10%. Now create a mask on "Background2" and use an Radial Gradient to create something like below.
Duplicate the "Background2" layer and call the new layer "Background3". Now create another radial mask at the bottom of the document so that it looks something like below.
Now create a new adjusment layer Layer > New Adjustment Layer > Hue/Saturation and click OK. Select Colorize and then play around with the colors untill you find something you are happy with.
Now create a new layer and call it "Background4" and then go Image > Apply Image. Now go Filter > Sharpen > Sharpen.
Thats the background finished. Create a new folder and call it "Background" and move all of our background layers into it.
Here is how mine turned out.
Step 2: Now we are going to create the "Journal". Find a picture of an old peice of paper that you would like to use as the journal, im going to use this free stock image found here. Remember to check the usage instuctions on the stock images.
Place your paper ontop of your document and remove the white edges by using the "Magic Wand Tool". Set its tolerence to about 32, dont worry about getting if perfect as we are going for a messy type look.
Resize the paper to a similar size to mine below and then call the layer "Paper1". Duplicate the "Paper1" layer and call it "Paper2" and then place it on the left side of "Paper1".
Now flip the "Paper2" layer by going Edit > Transform > Flip Horizontal.
Your image should now look something like mine below.
Now duplicate layers "Paper1" and "Paper2" a couple times each. Lock the top layers of "Paper1" and "Paper2" because we dont want them moved. Now rotate the duplicated layers slightly at different angles so that it looks like there are many pages in the journal.
Now create a new folder and call it "Journal" and place all of our journal layers in there.
Here is how mine turned out.
Step 3: Now duplicate one of the journal layers and then place it ontop of all the other journal layers, call this layer "ContactBg". Now for this step you can just resize and rotate the "ContactBg" layer untill it is a similar to the picture below or you can merge differnt parts of the paper together using the eraser and a soft brush.
Place it at the top right of our journal on a slight angle.
Here is how mine turned out.
Now do the same thing again but call this layer "TitleBg" and then place it on the top left of our journal.
Step 3: Now we are going to make the books binds. I will be using this image. Move your chosen image into the document and call the layer "Bind". Use a soft eraser brush to make the bind blend in with your image. Duplicate the "Bind" layer a few times and postion them along the spine of the journal.
Here is how mine turned out.
Step 4: Now we are going to create our paper clips. Select the custom shape tool and then find the paper clip shape under the "Object" Shapes. Create a paper clip and then copy the layer style settings below.
Now rotate and resize your paper clip untill it looks like mine in the image below. Place a paper clip ontop of the "ContactBg" layer and "TitleBg" layer so that they look like they are holding them in place. Use the eraser tool to rub out the parts of the paper clip that should be hidden behind the page.
Step 5: Now we are going to start setting up the content on the site. 1st of we will make the title and contact details. I used a font called "Journal" which can be downloaded here. For the contact details try to use fonts such as "Arial" because we will want to be able to edit these once the design is coded in xhtml.
Here is how mine is looking.
Now we are going to place some images on the page. Duplicate the "ContactBg" layer and call it "PhotoBg" and then drag it into a postion like in the image below, you will also have to move the "PhotoBg" layer below the "ContactBg" layer. Now load up a photo that you would like to use in your journal and then resize it so it sits nicely ontop of your "PhotoBg" layer. Try get it to look something like mine below.
Now we are going to make the photo look as though it has been worn away a bit with age. Create a new layer above your photo and call it "Grunge1". Now slect the "Brush tool" and select a "Spatter" brush. Now brush around the edges of your photo like in the image below.
When you are happy make sure you still have the "Grunge1" layer selected in the layers palette and go Select > Load Selection keep the default settings and click OK. You should now have a selection around your "Grunge" layer.
With the selection still active hide the "Grunge1" Layer Layers > Hide Layers and then select your "Border" layer in the layers palette. Now hit the delete button and then hit Crtl+D to deselect your your selection. Your image should now looking something like below.
Now add some more photos into your journal, use the same steps as above to give them that aged look. Also make another copy of your paper clip and move it into a postion so that it looks like it is holding your photo in place.
Here is now mine is looking.
Step 6: Now we are going to make some sticky tape to that it looks like the rest of our photos have been stuck onto our page. You can make your own sticky tape our you can download a brush pack like this one here. I set the layer opacity of the sticky tape to 95%, I then used the burn tool on the sticky tape to give them a bit more of an aged feel.
Here is how mine is looking.
Step 7: Now we are going to create the text. For the sake of the look of the tutorial I will be using the "Journal" font for the text, but of course if we were to be coding this then we really should be using one of the web standard fonts such as "Arial".
When designing in photoshop I like to use random text generators such as this one, can be a quick time saver.
Here is how mine is looking.
Step 8: The last step of this tutorial is just to randomize the look of the paper a bit so its not so clearly obvious that we have just done a whole lot of copy and pasting. Create a new layer at the very top of your layers pallete, call this layer "Burn". Now with the "Burn" layers selected go Image > Apply Image.
Now select the the burn tool and use a 100px soft brush with the exposure set to about 25%. Now just go around your journal burning different sections untill you are happy with the result.
Finished Result:
If you enjoyed this tutorial please show some support for the site by registring. Thank you!
Post your result on the forum! We would love to see how you went :)
A big thanks to the creators of the stocks used throughout the tutorial!
|
