Making your own portfolio web page
April 23rd, 2008 by ART-D Posted in Adobe Photoshop, Web Layout
inscriptions on the section useful links
the links
data
the text of white color
the rest of the text
The inscriptions in the section useful links have the same parameters, shown below: Blending Options>Stroke
Create again a new layer (Create new layer) and insert the pointers near the links, choosing the same tool we’ve applied for drawing the same elements of the menu’s buttons. The color in this case is white.
It’s time to write the site’s copyright, keeping the same demands introduced in the next table:
The personal web site is finished!
View full size here.
If you enjoyed this article, please consider sharing it!
Web designers
04/09/2009
Very nicely and personally presented tutorial really good.
roko
19/09/2009
great tutorial. i have to try this
Timo Körber
20/09/2009
very nice layout and great tutorial…
Behnam
27/09/2009
Awesome scheme… Thx
strony internetowe
04/10/2009
Realy Beautiful website:)
Arminder
15/10/2009
It is a great tutorial, and very well explained. However like many other tutorials around the web it lacks the next stage – converting this design to XHTML and CSS. It would be nice to see how the concept can be made into reality.
DMVP
22/10/2009
Yes, where could I go to learn how to convert a design such as this to XHTML / CSS ? I would like to use Joomla as the CMS..
lor
01/11/2009
Marvelous, keep on the good work
hulek89
01/11/2009
ok, this really looks good, but how long does it take to open a website with that amount of heavy graphics!?
Eview
04/11/2009
Nice and simple layout good tutorial thanks mate
Paige
09/12/2009
How do we insert the content/make working links for this? It looks like it’s a layed background >.<
Roempoen
18/12/2009
Awesome…
Thanks Dude…
nosisme
27/12/2009
Great Tutorial, it help me alot
.
car lock out
06/01/2010
Wow really good flow tutorial. Easy to learn and gain ideas.
Ltd. gründen
17/01/2010
Well, it could have been a bit more detailed.
maria
19/02/2010
Great tutorial now how would you make that LIVE on the web??
Umar
01/03/2010
excellent tuorial but it will be more then excelent if u also go further and tell us how to convert it into web pages
rostar
15/03/2010
Beutiful design I must say. I am sure going to try this one out myself.
About people asking how to convert the design into a web page and it’s just simple html/css coding really. Just save all the images you need to use (background, menu buttons, the headlines and the scroll bar, if you want to use it. I would recomend using the “opacity” property in css or save just 1px of the content background as an half transparent image (.png) and use that as background. You don’t want to save the entire content background as an image because then you have alot of work to do if yoy want to extend your page with more content.
There are a lot of css-tutorials out there and it’s mostly just divs with the properties padding, background, float, width and height you need.
Good luck to you!
Iñaki
17/03/2010
For those who ask about converting the design to html, I found a photoshop plugin that supposedly makes it a 5-minute-job. Haven’t tried it, but I’m about to. It’s called Divine, and here’s the link
http://www.divine-project.com
custom pop art
19/04/2010
Great design!
Ffin
25/04/2010
Thanks, very nice tutorial..
Mdct
26/04/2010
What’s the point of using the gradient overlay panel when you just end up with a solid color?
Great tutorial btw-
Saira
30/04/2010
Thanks, very nice tutorial..
Amanda
30/04/2010
I am stuck! When you place the photo, I am not getting how to make it go into that rectangle…..
Web Design
04/05/2010
great stuff
thanks for the share
HD
17/07/2010
very nice ..thanx
ScriptPlazza
25/07/2010
nice design, good work
NANCY
03/08/2010
very nice. i liked it. now i’m gonna try it with my pic.
nana
08/08/2010
muy buene la pagina
Magda
13/08/2010
Love your tutorials:))) Thanks for help:))
nick
14/08/2010
aweful tutorials for beginners. none of the dimensions for shapes are included, making it very frustrating when trying to replicate what you have here
jonus
10/09/2010
It would be nice if the instructions were in English. I cant understand 1/2 of what its trying to say. Besides I got everything working except the photo image straddles the dividing rectangle, not hidden behind like in the example. What am I missing?
CodeFade
19/09/2010
State of the Art tutorial…. Superb graphics and color combinations. The layout is neat and methods used in Photoshop is really professional. But how about moving to a bit more advanced and make it to a reality, ae. if you can explain the conversion to XHTML & CSS of the Photoshop artwork!
Mark Crosbie
02/10/2010
Hey thanks for that,I struggled in bits but was good learning, had most trouble with the gradients but it be just a case of different years of packages we each have anyway thanks il be posting it on my blog!
Rajesh Mergu
10/10/2010
Good stuff, i am learning photoshop to design my webpage this seems to be helpful,
yogesh
12/10/2010
thanx
Lars Newton
19/10/2010
Make Video Tutorials, it will be easier for everyone to understand what to do, not only the ones wits experience in Photoshop.
Christian
30/10/2010
I love this tutorial. I added it to my favorites. It is so helpful and well-explained.
Diesel Engine
06/11/2010
There are a lot of softwares who allready have this premade and easy editing , but yeah sure
if you want to feel that you;ve done it by your hand , is a great way to do it. THanks for the tutorial
zaifox
10/11/2010
your tutorial, is not good for me.. you need to be specific sometimes..
Nimbus
18/11/2010
this is only the home page…how about the other pages? how would it look like after choosing some navigation buttons?…
simpletutors
12/12/2010
very useful for website development like portfolio….keep it up and posts like this type of wonderful post …:)
kenichifc
17/12/2010
Nice and simple layout good tutorial thanks mate
chrisfranklin
09/02/2011
cool tut
Subhro
25/02/2011
Great !!!
Web Design Mauritius
28/02/2011
Thanks for sharing. Great tutorial.
johnson Thomas
07/03/2011
Great !!!
FullSailWeb
15/03/2011
Im going to try it out!! Really nice
jan
16/03/2011
great tuts men.. thanks for sharing.. GOD bless, keep it up..
hamza
02/04/2011
requir more information about each step
no much information is there
me
02/04/2011
How can i make the site on the all screen?
Retheesh
07/04/2011
Cool tutorials ! I liked this tutorial. Thanks
quạt tích điện
22/04/2011
Thanks nice tut
jaydeb
24/05/2011
great tutorial. i have to try this
Poonam
24/05/2011
Thanks.
nice guidance.
cssrex
06/06/2011
Amazing tut bro, I am loving it
Skweekah
20/06/2011
Nice Nice Nice! A signle page view would have made life a bit easier but who’s to complain with such a fantastic design!
R.Gunasekar
24/06/2011
Simple and fantastic Tutorial. I will try to implement in my website’s
Thank you very much
shrill dhameja
26/07/2011
good
naresh
06/08/2011
Nice and simple layout good tutorial thanks
Youmna
23/08/2011
Cool!!
I just did it
It’s very nice tutorial thanks!
rao vat
03/11/2011
Thanks you very much. It’s really nice and It’s useful for me !
priya
12/12/2011
really grt work and thank u for this tutorial
When I place the photo, I am not getting how to make it go into that rectangle…..
joan
16/02/2012
nice tutorial,
thank you..
trev
01/03/2012
awesome, but as with the hundreds of other similar tutorials, you’ve made a great PICTURE of a website. Not a website. I can make pictures of fantastic sites all day- but how do you make it functional? Like you drew a slider for a text box. What’s the practical use of drawing it? How do you get it to function in CSS? This is the same place where the line between designer and coder always breaks down. Can anyone point to a good tutorial that will tell me how to turn a great looking design into an actual webpage?
Vitalis
08/04/2012
its a great tutorial but I don’t see how to add the image to the layer as stated
Great job!!!
Arfat Khan
19/06/2012
Beautiful Tutorial, Great Job.
Thomas
20/07/2012
Can i have a copy of the .psd file please?
cnatraining
24/07/2012
Hello! I’m at work surfing around your blog from my new iphone 3gs! Just want to say I love reading your www and look forward to all your posts! Carry on the fantastic work!
arlen
25/07/2012
it help me a lot………… thanks for that……..
jay
25/08/2012
where sours files
Nuno
24/11/2012
guys bare in mind this is a PICTURE not the actual HTML/CSS file.
this tutorial, as ANY other photoshop tutorial, just helps you illustrate whatever that you have sketched.
In order to deploy a website similar to this one, you will need to have some basic understanding of HTML or even HTML5 (flavour of the month) text scripting and CSS3 to edit for example the page layout and the colours to be used.
After that, the sky is the limit!
Zach
23/01/2013
Greet tutorial. I always appreciate those who take the time to teach good tips.
crazysuresh
11/02/2013
every body is just saying here but who really know n have experience in converting this design into css/html.please mention the css tutorial site which is reliable like this site.
YASER
25/04/2013
this is an awesome tutorial i’ll try..