full-photoshop-web-design-journal

by 3loomi Thu Oct 28, 2010 9:49 pm

Photoshop,webdesignFull Photoshop Web Design - Journal

full-photoshop-web-design-journal Journalprev

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.

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 touse as the website background, im going to use a free stock image foundhere. 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 untillyou have filled your intire document with the texture. Merge all ofthese 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%. Nowcreate a mask on "Background2" and use an Radial Gradient to createsomething 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 itlooks something like below.

Now create a new adjusment layer Layer > New Adjustment Layer >Hue/Saturation and click OK. Select Colorize and then play around withthe 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 oldpeice of paper that you would like to use as the journal, im going touse 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 byusing the "Magic Wand Tool". Set its tolerence to about 32, dont worryabout 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 thelayer "Paper1". Duplicate the "Paper1" layer and call it "Paper2" andthen 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. Lockthe top layers of "Paper1" and "Paper2" because we dont want themmoved. Now rotate the duplicated layers slightly at different angles sothat 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 allthe other journal layers, call this layer "ContactBg". Now for thisstep you can just resize and rotate the "ContactBg" layer untill it isa similar to the picture below or you can merge differnt parts of thepaper 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 thisimage. Move your chosen image into the document and call the layer"Bind". Use a soft eraser brush to make the bind blend in with yourimage. Duplicate the "Bind" layer a few times and postion them alongthe spine of the journal.

Here is how mine turned out.

Step 4:Now we are going to create our paper clips. Select the custom shapetool 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 theimage 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 shouldbe hidden behind the page.

Step 5:Now we are going to start setting up the content on the site. 1st of wewill 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 wewill 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 postionlike in the image below, you will also have to move the "PhotoBg" layerbelow the "ContactBg" layer. Now load up a photo that you would like touse 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 awaya bit with age. Create a new layer above your photo and call it"Grunge1". Now slect the "Brush tool" and select a "Spatter" brush. Nowbrush around the edges of your photo like in the image below.

full-photoshop-web-design-journal Brush

When you are happy make sure you still have the "Grunge1" layerselected in the layers palette and go Select > Load Selection keepthe default settings and click OK. You should now have a selectionaround your "Grunge" layer.

full-photoshop-web-design-journal Grungeslected

full-photoshop-web-design-journal Grungeslected

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 yourselection. Your image should now looking something like below.

full-photoshop-web-design-journal Deleted

full-photoshop-web-design-journal Deleted

Now add some more photos into your journal, use the same steps as aboveto give them that aged look. Also make another copy of your paper clipand move it into a postion so that it looks like it is holding yourphoto in place.

Here is now mine is looking.

Step 6:Now we are going to make some sticky tape to that it looks like therest of our photos have been stuck onto our page. You can make your ownsticky 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 burntool 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 thetutorial I will be using the "Journal" font for the text, but of courseif we were to be coding this then we really should be using one of theweb 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 thepaper a bit so its not so clearly obvious that we have just done awhole lot of copy and pasting. Create a new layer at the very top ofyour layers pallete, call this layer "Burn". Now with the "Burn" layersselected go Image > Apply Image.

Now select the the burn tool and use a 100px soft brush with theexposure set to about 25%. Now just go around your journal burningdifferent 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!

source:----------------------------------------------
http://tutocity.com/index.php/photoshop/full-photoshop-web-design-journal.html