White and Orange Portfolio

1. Create a new document (640*480).

2. Fill the background with #ffffff using the paint bucket tool.

3. Now create a new layer and select a rectangle shaped box (about 450*300 pixels) and fill it with white #ffffff and then adjust the blending options of your layer (layer - layer style - blending options) to add a drop shadow.

4. The next step is easy… You have to duplicate the layer created above 2 times (layer - duplicate layer) and then you should transform all of them except the top layer (edit - free transform) and rotate them a little bit so you end up with something like this… Note that the top layer should have another color, so fill it up with #e3892e to achieve the same result as me!

Click to enlarge

5. Now it's time to create another layer adjust the blending options of the top layer (layer - layer style - blending options) with the other color you've chosen to use. The drop shadow should have copied itself when you duplicated the layers, though we have to add a few more blending options…

6. The next step is to add some text in this #e3892e color to display the name of your site or anything you want! So we use the horizontal type tool and type something (I used arial black with a size of 60px). Then we want to make it a bit more attractive so we adjust the blending options of this text layer.

Click to enlarge

7. Now it's time to add a menu under the 'shadowpapers'… Create a new layer, place it just above the background layer and select a rectangle shape with your selection marquee tool, fill the selection with #fffff and copy the layer style of the 'shadowpaper' layer (right click the 'shadowpaper' layer - copy layer a style - right click the menu layer and paste the layer style)! You should have something like this for now!

Click to enlarge

8. We should also add some text to the menu… Change your foreground color to #c85aff and start typing (I used the franklin gothic font with a size of 10px) and now we're going to add a drop shadow with these settings using the blending options!

9. The last thing that has to be done to complete this tutorial is adding content and slicing the website to export it in html/css! The whole thing should look something like this but if you didn't complete it you can still download it by registering…

Click to enlarge