Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Colourful Portfolio Design

Colourful Portfolio Design


1. Create a new document (800*600).

2. Fill the background with #ffffff using the paint bucket tool (my guides are shown in the screenshot, you might want to use them for the next steps).

image 1
Click to enlarge

3. In this next step we're going to select 4 rectangles using our rectangular marquee tool on new layers (layer - new layer). We will adjust all of their blending options and add a gradient overlay! So go on and select the first one like shown below and apply the blending options like shown in the second screenshot.

image 2

image 3

4. We're going to this for the other 3 boxes as well! You can see the gradient overlays of the other ones below… Don't forget to create a new layer for every rectangle you create!

image 4

image 5

image 6

5. You should have something like this for now…

image 7
Click to enlarge

6. Create another new layer (layer - new layer) and then use your polygonal lasso tool to select something like shown below (I hope you all know how to use it)… Fill the selection with #000000!

image 8
Click to enlarge

7. On the same layer we're going to add grass using a standard photoshop brush! So go ahead and select your brush tool with the following settings and start brushing using the grass brush indicated in the screenshot below! Make sure you use different sizes of it to make it look more realistic! Also make sure your foreground and background color is black!

image 9

8. I ended up with this…

image 10
Click to enlarge

9. Now for this next step I've added a few silhouettes to the rectangles I've created before. Create a new layer and start brushing using one of these brushes! This is what I made with it…

image 11
Click to enlarge

10. Now it's time to add some simple text… I've used a font called microsoft sans serif with a size of 35px and caps lock on… I've also rotated the text a little bit (edit - transform - rotate)!

image 12
Click to enlarge

11. Here I've just added some text to show you how it would look like when you would use it for real…

Colourful Portfolio Design
Click to enlarge


Author's URL: PhoNuts.org
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Reader's comments
comments Ryland August 28, 2011 says:
How could i stretch this to fit the whole webpage?
Reply
Add comments to "Colourful Portfolio Design"

Captcha