Making your own portfolio web page

April 23rd, 2008 by ART-D Posted in Adobe Photoshop, Web Layout

   

Need personal web page? In this tutorial we will learn to create nice personal portfolio web page.

One of the benefits of this kind of marketing and web design is that it does not feel as if you are trying to make a sale. It feels as if you are establishing a relationship with your viewers, and as if you care about them as individuals. This sort of connection makes it much easier for them to accept your later sales pitches, whether you’re selling sweaters or computer website templates.

Start working by creating a new file (File>New), having 770×750 px and 72 dpi. We shall use on this new made file the Rectangle Tool (U) to represent the background of the site’s page to be.

Making your own portfolio web page in Photoshop CS3

Set the next parameters for this layer by making a mouse click on the layer we work with on the layers’ panel: Blending Options>Gradient Overlay

Making your own portfolio web page in Photoshop CS3

Gradient’s parameters:

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Choose again the Rectangle Tool (U) to represent that place reserved for the author’s portrait and the lateral menu. Firstly we have to represent the common primary layer and then press Alt button to divide the zones, applying the same tool, used before.

Making your own portfolio web page in Photoshop CS3

The layer’s parameters: Blending Options>Inner Glow

Making your own portfolio web page in Photoshop CS3

Take now the site’s author’s photo and insert it on the picture. Don’t forget to apply Free Transform option to place the photo the same way indicated next image:

Making your own portfolio web page in Photoshop CS3

Press Alt button and make a mouse click between the photo’s layers and the prepared zone (on the layers’ panel) for the photo to get in the frame’s limits. Create also the lateral menu.

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Next make a click on the bottom part of the layers’ panel on Create new fill or adjustment layer> Photo Filter

Making your own portfolio web page in Photoshop CS3

  •  

  •    
  •  

 

Post Pages: 1 2 3 4 5 6 7 8 9

  • 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 :D .

  • 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 :D 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.. :)

Control your training process by 70-640,70-649 and 640-822.Our E20-591 and 220-701 are also fastest and cheaper way to train you.