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.
3. Now create a new layer and select a rectangle shaped box (about 600*600 pixels) and fill it with white #ffffff.
4. Ajust the blending options of your layer (layer – layer style – blending options) to add an outer glow with the following settings!
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.
6. We are going to add a gradient overlay to the black rectangle we created in the previous step with the following blending options!
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!
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)…
Pages: 1 2












Wow, great tutorial!!!
At step 3: “450*300 pixels”… Is that right? Isn’t it too small?
Hey!
You’re right, it should be 600*600px! Thanx for the advice Jorn.
Great tutorial! Keep ‘em coming pls
.
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!
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!
Nice and simple
! Nice work man!
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.
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!
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?
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!
Thanks alot admin, you’re the hero.
Very interesting. I’m adding in RSS Reader!
Thanks for sharing
!