Article written

  • on 06.10.2007
  • at 01:52 AM
  • by Admin
  • with 32,311 views
  • 1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
    Loading ... Loading ...

Professional Looking Design 3

Pages: 1 2

Create a professional layout for a website with some great brushes and wonderfull colors using just photoshop.

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

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

weblayoutd1

3. Now create a new layer (layer – new layer) and select a rectangle shaped box in the middle and fill it with white #ffffff.

weblayoutd2

4. Adjust the blending options of the layer and add a drop shadow with the following settings to give it a smoother look so it can blend in with the background.

weblayoutd3

weblayoutd4

5. Now create another new layer (layer – new layer) and select a rectangle shaped box on the left of your previous content box and fill it with grey #333333. We are going to add a drop shadow again in the blending options but this time it will be a darker shadow with these settings!

weblayoutd5

weblayoutd6

weblayoutd7

6. This next step is totally up to you, my finished work looks like the picture you can find under this sixth step but yours can be totally different! I created a few new layers just above the background layer and used some brushes to make it look more interesting for the visitors! The color used for the splats and drips is #921818 and for the soft grunge on the background a color like this #d5d4c3! These values can be different and can be adjusted just the way you like them! I ended up with this (the tree is a little extra thing colored in #921919, you can add anything you like to use it as a logo)!

weblayoutd8

7. Step number 6 wasn’t an easy one, but that’s how you learn to improvise and do your own thing! Anyway, in this step we’re going to add a title and a slogan to the grey (almost black) box on the left! Take your text tool and start typing in white #ffffff (the font I used is called monotype corsiva).

weblayoutd9

8. To grab the attention of the viewers we’re going to add a little red stroke under your title like this! Use your rectangular marquee tool to select it on a new layer (in my example the stroke has a heigth of 2px) and fill it with #d40351 using your paint bucket tool!

weblayoutd10

Pages: 1 2

subscribe to comments RSS

There are 3 comments for this post

  1. thanks says:

    Great job!

  2. Jose says:

    Nice funky tutorial!

  3. Pegasus says:

    Wow, very nice.

Please, feel free to post your own comment

* these are required fields

PhoNuts is powered by WordPress.
Back to Top