Article written

  • on 06.11.2007
  • at 07:56 AM
  • by Admin
  • with 34,912 views
  • 1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
    Loading ... Loading ...

Colourful Portfolio Design 14

Pages: 1 2

A colourful portfolio design, created using some simple rectangles and grass brushes.

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).

weblayoutk1

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.

weblayoutk2

weblayoutk3

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!

weblayoutk4

weblayoutk5

weblayoutk6

5. You should have something like this for now…

weblayoutk7

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

weblayoutk8

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!

weblayoutk9

8. I ended up with this…

weblayoutk10

Pages: 1 2

subscribe to comments RSS

There are 14 comments for this post

  1. Free Icons says:

    Great layout tut! Thanks for sharing!

  2. Leavened says:

    Nice simple effect. I love it.

  3. TehPopeye says:

    Omg, hot outcome :) .

  4. ghirarda says:

    It’s fantastic!

  5. scott says:

    You are amazing…

  6. Murrali says:

    Hey man, this is awesome! I might wanna use it for a portfolio page of mine. Suits my dream theme! All credits will go to you :) .

  7. Paulo says:

    Good tutorial!

  8. Slim says:

    Hey man,this awesome!!! Thank you for sharing! I’ll use it for my website!

  9. Ian says:

    Just came upon this through pixel2life, very nice tutorial!

    Made me chuckle ’cause I got a leaflet from a company called Wardbright Accommodation who used this :P !

  10. Andy says:

    I got a question.. How do you use this in dreamwaver? Like with active links to home, about, contact etc.

  11. Admin says:

    Go to google and search for “photoshop slice and code layout”, check out a few of the results and I’m sure you’ll find what you need ;-) !

  12. znrx says:

    Thanks! I`ve been looking for something like this for a long time now!

  13. Texture plus says:

    Wonderfull tutorial! thanks a lot!

Please, feel free to post your own comment

* these are required fields

PhoNuts is powered by WordPress.
Back to Top