Article written

  • on 04.10.2007
  • at 10:52 PM
  • by Admin
  • with 60,962 views
  • 1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
    Loading ... Loading ...

Attractive Portfolio Layout 14

Pages: 1 2

This is a simple tutorial to create an attractive though very clean website layout or portfolio for your website.

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

2. Fill the background with #ff9900 using the paint bucket tool and add a gradient overlay in the blending options with these settings.

weblayoutc1

weblayoutc2

3. Now create a new layer and select a rectangle shaped box (about 600*600 pixels) and fill it with white #ffffff.

weblayoutc3

4. Ajust the blending options of your layer (layer – layer style – blending options) to add an outer glow with the following settings!

weblayoutc4

weblayoutc5

5. In this step you should create a new layer again (layer – new layer) and select a 50px high rectangle like this and fill it with black #000000.

weblayoutc6

6. We are going to add a gradient overlay to the black rectangle we created in the previous step with the following blending options!

weblayoutc7

weblayoutc8

7. To make the menu look al little bit nicer we are going to add a 2 pixel stroke under the black area we’ve just created!Make sure you add it on a new layer and place it under the wite layer where you can add text and content!

weblayoutc9

8. Now it’s time to add a banner! So go ahead and find a nice looking picture for the header and place it like this (my header is 590*150 pixels and I found it on deviantart)…

weblayoutc10

Pages: 1 2

subscribe to comments RSS

There are 14 comments for this post

  1. SnedekerDesignz says:

    Wow, great tutorial!!!

  2. Jorn says:

    At step 3: “450*300 pixels”… Is that right? Isn’t it too small?

  3. PhoNuts says:

    Hey!

    You’re right, it should be 600*600px! Thanx for the advice Jorn.

  4. Row says:

    Great tutorial! Keep ‘em coming pls :) .

  5. Seth says:

    Great work! I’ve being working on my 1st site and I’m having trouble with the background image… But this has certainly cleared things up for me! Once again… Great job and thanks!

  6. anniething says:

    Hey, this is sweet :) ! I like it… Simple but it lifted me up, ’cause of the bright colors I guess… Nice work, just go on like that!

  7. thnx says:

    Nice and simple :D ! Nice work man!

  8. addy says:

    Hey, nice work man. Just one question for you. So, I made the same type with little variation and was wondering how do you give links to the navigation buttons like home, contact, etc? Because when I save this as a .png file and use dreamweaver to take this as a background image, it doesn’t let me give a link to the icons?
    Thanks.

  9. Admin says:

    Hi, go to goole and search for this “html link image”! That should solve your problem if you end up on the right sites… Good luck and kind regards!

  10. addy says:

    I do know how to link an image. But what I am wondering is that after I have my final layout (everything on one page as ONE .jpg file), to dreamweaver it’s just ONE .jpg file. So how can I have links to home and contact button? One more question, what would be the best idea? Typing in dreamweaver or typing in photoshop?

  11. Admin says:

    Oooh… You have to do that in photoshop, it’s called “slicing a layout” so you can export it to dreamweaver and add text there and link every single button… Just check out some of the links on this site. I’m sure you’ll figure it out using those tutorials, it’s not that hard… Good luck and if you have more questions I’ll help you if I can!

  12. addy says:

    Thanks alot admin, you’re the hero.

  13. andrew says:

    Very interesting. I’m adding in RSS Reader!

  14. Arun says:

    Thanks for sharing ;) !

Please, feel free to post your own comment

* these are required fields

PhoNuts is powered by WordPress.
Back to Top