Loading ...
Create a new document 850 x 800, create your own wood texture or use a premade one and add that as your background, im going to use a premade one (included in PSD download).
Select the rectangular marquee tool and create a rectangle the width of your canvas, leaving about 10 or 15 pixels from the top.
Add these layer styles to your rectangle.
You should have something like this.
Create another rectangle on a new layer the same width as the last one but not has high. Fill with the color #199ad1.
Add your website title, then add a shine on the header using the elliptical marquee tool set layer opacity of your shine to 7%.
The layer styles for the website text are.
Select the rounded rectangle tool and create a small rectangle underneath your website header.
Fill with the color black then add these layer styles.
Now add your navigation text and simple outer glow.
Now select the rectangular marquee tool and create a big white square like this.
With the lasso tool randomly cut off the edges to give the effect of ripped paper.
Do this for TWO rectangles, also rotate then squares slighly by press “ctrl + T”.
Create a third rectangle but dont cut around it. Add these layer styles.
Also add the above “drop shadow” to the other 2 peices of paper. Now add your content onto the main square.
Now go and find a picture of some stationary such as scissors, ruler, pencil etc.. (ive added some in the PSD), remove the background from the items and place around your main content area.
34 Responses to “Portfolio Layout #5”
Momo Says:
:)
Rhys Says:
damn nice =]
D. Carreira Says:
Great tutorial!
Your tutorials are under any tipe of license?
Or we can use it for any purposes (excepted selling the template)
David Carreira
Dule Says:
This is awesome! I give you 10 outta 10!
ADMIN Says:
This work is licenced under a Creative Commons Licence
check the website footer ;)
thx for the comments
Tadd Says:
Lovely. VERY nice. Funny thing .. I’m using this texture as my desktop wallpaper this very moment!
I gave you a shout out on a previous tutorial .. I may do the same for this one also! Well done!
ADMIN Says:
CSS template now added
D. Carreira Says:
@ Admin:
“- Attribution. You must give the original author credit.
- Non-Commercial. You may not use this work for commercial purposes.
- No Derivative Works. You may not alter, transform, or build upon this work.”
If I’ll do a template based in this tutorial, the final result is not a 100% of your work, so I must do a copyright footer with your link, or can only do a reference to your tutorial (or site) in the about page?
I’m not using any tutorial to do my work, but anyway, maybe a day I want to use one to get a great result.
;) Hv-Designs, Great Tutorials!
David Carreira
ADMIN Says:
do a reference to my tutorial (or site) in the about page! as long as my link is somewhere on the site.
;)
D. Carreira Says:
@ Admin:
Ok, continue with your great tutorials, the people thanks ;)
David Carreira
Waqas tasneem Says:
Simply Aweosome.
KSandra Says:
great tutorial, thank you very much!
Lauren Says:
Thanks for this tutorial! It was really helpful. I am just starting out and it was really helpful for me!!
Derick Says:
This is a great tutorial, but I had one problem,
I could not find the wood texture.
Where is it located?
Thanks for your help
ADMIN Says:
have you downloaded the PSD?
Derick Says:
Oh I see thanks!
sumit Says:
Just perfect
London Escorts Says:
Very Nice
Sraddha Says:
Good work, keep it up…
thnx for this amazing tutorial
cicekci Says:
internet üzerinden çiçek sipari?i çiçekçi çiçekçiler.
chuka Says:
killer font…what’s the name?
vic Says:
if you buy it then can you us it or what
ADMIN Says:
course you can providing a link back to my site is placed somewhere on the page
Alex Kim Says:
This is very nice design, and thank you for your time to make tutorial. Really learn alot from this.
Alex,
Devan Says:
Veri nuys
kapil Says:
usual thing only… nothing new….. but a very effective tutorial for beginers
Alex Kolozvary Says:
OK. I went through these steps in Photoshop and they were quiet helpful. Got a pretty nice setup. Now I need help getting this split up to CSS/HTML format. What’s a good tutorial site to get help on exporting PSD to HTML/CSS?
Alexander Kolozvary JR Says:
Never mind. I figured it out a while ago.
Once I got everything into dreamweaver, it was a lot more complex than I imagined to enter text over images. Thought it was going to be as simple as clicking a mouse and a tapping of the keyboard in a split second. LOL. Boy was I wrong. I’m slowly getting it. Check out what I got so far at bushisfat.com. Eventually going to move this over to my name once I’m all done (and yes, I will reference you). I’m not a graphic designer, simply just want to get my resume out there. I do IT work (desktop support).
Bennie Coetzer Says:
Amazing result. Nice work!
Leave a Reply
Trackbacks
search
Learn more about advertising with us.
write for us
Intrested in publishing some articles, tutorials or freebies on hv-designs.? We welcome anyone who is intrested, we'll even return the favour by sending you aload of goodies. Learn More
Learn more about advertising with us.
Recent Comments
copyright
The effects and techniques demonstrated in tutorials on hv-designs.co.uk can be used in whatever manner you wish without attribution. The text, images and tutorials themselves are all copyright © hv-designs.
usage
You cannot copy whole tutorials, either in English or translated to another language unless permission is given by the tutorial author.
friends online