90 Comments

Portfolio Design Part 1

September 23, 2008

This is the first of a two part tutorial teaching you how to create a side-scrolling portfolio site. If you’re planning to get serious in the design industry then you need to get yourself an online portfolio. Here I’m going to show you how to draft up the layout in Photoshop then next time I’ll be showing you how to code it in html/CSS.

Introduction

It’s been a few days since I posted my last tutorial, the reason for this is because I started writing this tutorial with no intention of coding it but I ended up coding in html/CSS then I added a few more features and a bit of PHP then I added image upload functionality and threw in a database as well and before I knew it I had created a simple CMS for portfolios, so I’ve been developing this while writing the tutorial and I’m hopefully going to release the CMS after I’ve posted both the tutorials.
Before we get started, you can check out the live demo of he portfolio we will be making here as well as the full size image. *The portfolio demo doesn’t work in IE at the moment, I’ll need to develop a separate stylesheet*

Step 1

Create a new document with dimensions; 2000x680px then change the foreground color to #0c0c0c. Now fill the background layer with this color; you can do this by hitting Alt+Backspace. With this design we want it to be side-scrolling so we don’t want to have to scroll vertically, I worked out that on all browsers running on a 1024x768px screen resolution there is at least 650px of vertical space to work with (unless you have hundreds of toolbars). Just to be safe we’re only going to use 520px as well as a margin of 80px at the top. So go View>New Guide and create a horizontal guide at 80px and then another one at 600px. If the guides aren’t showing then make sure View>Extras is checked as well View>Show>Guides. Lastly turn on snap by checking View>Snap. In the images below each step I’ve only shown half of the document as there isn’t enough space here to show it all so just ignore the fact that your proportions may look a bit different.

Step 2

Create a new layer then change the foreground color to white, next select the rectangle shape tool and draw two rectangles snapping to the guides at the top and bottom and get something that looks like the image shown below.

Step 3

Now we need a floral pattern to go as the background, good floral patterns are actually quite hard to come by but I found an absolutely awesome free pack containing about five hundred seamless patterns; this has quickly become my favorite pattern pack and is definitely worth downloading, you can get it here or you can just download the single image that I used here. Open up one of the floral images in Photoshop then go Edit>Define Pattern and save the image as a pattern, you can now close that document and go back to our portfolio.

Step 4

Right click on the layer with the two rectangles and go to blending options then add a pattern overlay and a stroke using the settings below and the pattern that you saved.

Step 5

In the layers panel change the fill opacity of this layer to 0%.

Step 6

Using the text tool add your name and a small bio on the left and add some menu items and align the menu to the right. I wanted to go for a slab serif font so I used Courier New but you could also use Rockwell. Put your name in a different color and either remember this color or add it to your swatches, When we come to code this we’ll have the menu items changing color when we hover over them so you can change the color of one of them just to see what it looks like.

Step 7

We’re going to add in an image now so open an image that you’ve made then go Image>Image Size, make sure constrain proportions is checked then change the size so it has maximum dimensions of 480x360px. Now just copy and paste this image into your portfolio document and position it like shown below.

Step 8

Add a stroke to this layer in the same way as we did in step 4 and use a size of two pixels and use the same color as you did for your name then add a title and put some other information below; I decided to put the name of the client below in the lime color.

Step 9

I thought it would be cool to have some wall lamps between each image to separate each one and make it look more like a real art gallery. I used a stock image for the lamp but had to make a lot of modifications to it like extracting the lamp then adding a new glow behind it and some shadows then mirroring one of the halves and scaling it down, if you want to do it yourself then you can get the original image here or you can just download the edited image here, this is in PNG format so already has transparency so all you need to do is to copy and paste it in like so.

Step 10

Now all you need to do is to repeat steps 7, 8 and 9 to add another image in then that’s you done.

Conclusion

Although here I’ve used a dark gray background, a floral pattern and a lamp as a divider, once we go on to code this then it’s easy to substitute these for different images or colors which means that using the same layout you can go around in Photoshop and change these parts until you get something that you like and when I bring out the coding part you can code your own personal portfolio. Hope you enjoyed this tutorial and I’ll get the coding part to you as soon as I can.

Check out Part 2


Similar Tutorials:

Save and Share this Post

We like people who share our posts! Del.Icio.Us - StumbleUpon - Float - Reddit


Or why not subscribe to the feed? RSS - Email

90 Responses:

  • September 23rd, 2008

    Side-scrolling portfolio tutorial | WhiteSandsDigital.com:

    [...] a portfolio site this part is on the Photoshop stuff, the next part is on the html/CSS stuff.read more | digg [...]

  • September 25th, 2008

    Dylan P:

    OMG Thank You So Much This Is Very Helpful As Im Very Interested In Becoming A Graphic Designer!

  • September 25th, 2008

    Dainis Graveris:

    Very easy tutorial, You’ll add HTML/CSS tutorial too?

  • September 25th, 2008

    Ross:

    Dainis,
    I’m going to try and get the html/CSS one up tomorrow if I can, it should be good.

  • September 26th, 2008

    Portfolio Design Part 2 | Learning Resources for Adobe Photoshop:

    [...] you haven’t already read it then you should check out part one of the tutorial. I’ve not gone into all the basics of html and CSS but if you know some of the basics then [...]

  • October 1st, 2008

    Best Design Resources of September 2008 | CrazyLeaf Design Blog:

    [...] a cool portfolio – Part 1 and 2 Tutorial teaching you how to create a side-scrolling portfolio site. If you’re planning to [...]

  • October 14th, 2008

  • November 2nd, 2008

    Michael D.:

    Great portefolio

  • November 15th, 2008

    chicas latinas:

    stavo cercando per informazione stato necessario per cose molto tempo. Grazie!!))

  • November 24th, 2008

    Portfolio Design | DeanWorks:

    [...] Click here for Part 1 of the tutorial. [...]

  • December 11th, 2008

    Portfolio Design Part 2 | Web Design Abyss:

    [...] you haven’t already read it then you should check out part one of the tutorial. I’ve not gone into all the basics of html and CSS but if you know some of the basics then [...]

  • December 24th, 2008

    Kumail.H.T:

    Hi,

    That was good, although it needs to be more 3d and dynamic.

    I had used a similar layout in my portfolio http://www.kumailht.com

  • February 3rd, 2009

    40 Useful Photoshop Web Layout Tutorials:

    [...] Portfolio Design Part 1 and Portfolio Design Part [...]

  • February 7th, 2009

    40????PhotoShop?????? — qybaby Blog Life [ ?? . ?? ]:

    [...] Portfolio Design Part 1 and Portfolio Design Part [...]

  • March 5th, 2009

    Portfolio? - puting one togeather?? - Design Contest Forums:

    [...] uses Photoshop and some simple html/Css coding. Portfolio design. Part1.. set up in Photoshop Portfolio Design Part 1 | Learning Resources for Adobe Photoshop Part2.. more along the lines of coding html/CSS Portfolio Design Part 2 | Learning Resources for [...]

  • March 6th, 2009

    fxencore:

    @kumail.H.T : the dynamic you can do with mootools (javascript) framework.

  • March 26th, 2009

  • April 1st, 2009

  • April 2nd, 2009

  • April 20th, 2009

    Portfolio Design Part 2 | Graphic Designer:

    [...] you haven’t already read it then you should check out part one of the tutorial. I’ve not gone into all the basics of html and CSS but if you know some of the basics then [...]

  • April 26th, 2009

    ims:

    thanks :)

  • June 17th, 2009

    Tutorials Creating Web Layouts From Scratch Using Photoshop | Themeflash:

    [...] Portfolio Design Part 1 and Portfolio Design Part 2 [...]

  • July 1st, 2009

    ??? » Blog Archive » 40????PhotoShop??????:

    [...] Portfolio Design Part 1 and Portfolio Design Part [...]

  • August 14th, 2009

  • August 29th, 2009

  • August 12th, 2010

    Nh?ng h??ng d?n Layout Web b?ng Photoshop h?u ích | Undozone:

    [...] Portfolio Design Part 1 and Portfolio Design Part [...]

  • August 18th, 2010

    roneybalack:

    Photoshop tutorial, from beginner to advanced. Including Photoshop text effect tutorials, photo manipulation tutorials, give you joomla templates,joomla extensions,wordPress theme,web templates,
    if you think i make a spam please remove this comment.
    You have good tutorials and i had post it on my website. http://download60s.com

  • September 26th, 2010

    40 Useful Photoshop Web Layout Tutorials | ilkaymola.com:

    [...] Portfolio Design Part 1 and Portfolio Design Part [...]

  • October 12th, 2010

    Tutorials ??? ?????????? web layout ??? photoshop « Web Resources:

    [...] Portfolio Design Part 1 and Portfolio Design Part 2 [...]

  • November 9th, 2010

    WAY » 40?photoshop??????:

    [...] ???? Part 1 and ???? Part [...]

  • December 23rd, 2010

    Valerie:

    Hey, this is awesome! Appriciate it so much! Thanks!

  • June 14th, 2011

    40 Useful Photoshop Web Layout Tutorials | Graphic Techniques:

    [...] Portfolio Design Part 1 and Portfolio Design Part [...]

  • June 15th, 2011

    kalabilla:

    very nice awesome

  • June 25th, 2011

    Misza:

    Pretty stylish illustration.

  • August 17th, 2011

  • August 31st, 2011

    22?Photoshop???????? – ??? | ???????:

    [...] 6. Portfolio Design Part 1 [...]

  • August 31st, 2011

    Photoshop Web Layout Tutorials | | Psd P2PTuts:

    [...] Portfolio Design Part 1 and Portfolio Design Part [...]

  • March 6th, 2012

    22?Photoshop???????? | ????:

    [...] 6. Portfolio Design Part 1 [...]

  • March 26th, 2012

    Marc by Marc Jacobs outlet:

    I’m still learning from you, as I’m making my way to the top as well. I definitely love reading all that is written on your blog.Keep the information coming. I loved it

  • July 18th, 2012

  • August 2nd, 2012

    40 úteis de Layout Photoshop Tutorials Web | TruiZz - Desenvolvimento de web sites e design:

    [...] 20. parte de design de carteiras 1 e Parte Portfolio Design 2 [...]

  • September 1st, 2012

    » Portfolio Design Part 2 Design It:

    [...] you haven’t already read it then you should check out part one of the tutorial. I’ve not gone into all the basics of html and CSS but if you know some of the basics then this [...]

  • October 20th, 2012

    Suzi uncel:

    shoponlinefashion Your post is extremely helpful for me and I hope you will soon update your blog with more information.

  • December 22nd, 2012

    Delila:

    Thank you for the good writeup. It if truth be told was once a entertainment account it.
    Glance advanced to more delivered agreeable from you!

    By the way, how can we keep up a correspondence?

  • July 11th, 2013

    Skincare Reviews Reveal The Best Skincare Brand On The Market:

    Duplicate Rolex Milgauss Mens watch This wakefulness comes pennon with a Rolex Caliber 3131 machine, so you can enumerate on your wakefulness working when you need it the most.

  • August 26th, 2013

    22?Photoshop???????? - ?? - ???Guopr.com?:

    [...] a creative portfolio in Photoshop5. Create a nice portfolio/showcase web layout in Photoshop6. Portfolio Design Part 17. Design a Sleek Portfolio Layout in Photoshop8. Online Photo Portfolio9. Photo Portfolio Web Page [...]

  • March 2nd, 2014

    ??????? ??? ????????? ? ??? ?????? ?? ??????? ???????:

    ????? ????? ? ?????? ?????? ????? ???????
    ???? ?? ????? ????? ? ????????????? ??????? ? ????????
    ???? ?????? ?? 24 ???? ? ???? ??????
    ? ???? ??? ???? ?? ???????? ?????? ?? ????? ?????????? ???? ????, ?
    ????? ?????????? ?????? ?? 24 ????, ??????????? ?? ???? ????????????? ?????? ???
    399 ??, ????? ? ???????? ???????? , ?????? ? ??????? ??
    ?????????? ?? ???????, ???????????? ?? ?????? ??????, ?????? ?????? ?? ????? ????????
    ?? ???-??????? ??????, ??????????, ?????? ? ?????? ??????
    ?????? ?? ?????????????? ? ??????? ?? ??????, ??????? ??????????.

  • May 22nd, 2014

    android Tablet:

    Pretty!Thiss waas an incredibly wonderful
    article. Many thhanks for supplying this information.

  • September 2nd, 2014

    Minecraft admin hack:

    Our minecraft force op resource has entirely improved just how minecraft computers work.
    An administrative thinks that they are the sole types
    which will management their server. They are incorrect! Along with the minecraft force op tool, you may now get whole control of the web server and use it, because you
    you should. You can even kick away other administrative!

  • September 24th, 2014

    best Bodybuilding documentary:

    By 2012, bodybuilding was now element of a gigantic sector in which milions of dollars are generated.

  • October 2nd, 2014

    Rosaria:

    Hey There. I found your blog the usage of msn. That is a very well written article.
    I’ll make sure to bookmark it and return to learn more of your
    helpful information. Thank you for the post. I will certainly comeback.

  • October 5th, 2014

    mitchells skip hire website:

    Undeniably believe that which you said. Your favorite justification appeared to be on the
    web the simplest thing to be aware of. I say to
    you, I certainly get annoyed while people consider worries that they plainly don’t know about.
    You managed to hit the nail upon the top and
    defined out the whole thing without having side effect , people can take a signal.
    Will probably be back to get more. Thanks

  • October 6th, 2014

    Joyce:

    The lack of this publicity contributes directly to
    the amount of the population that watches other sports instead of soccer.
    With all the dueling monologues, there is no dialogue.

    A team with 2 losses might have lost both games right before the upcoming game, and be on a losing streak.

  • October 6th, 2014

    skip hire norwich:

    I do not even know how I stopped up here, but I believed
    this publish was good. I don’t realize who you are but certainly you’re going to a well-known blogger in case you are not already.
    Cheers!

  • October 6th, 2014

    judsonevcq.deviantart.com:

    Very nice post. I just stumbled upon your blog and wished to say that I have
    truly enjoyed browsing your blog posts. After all I will be subscribing
    to your feed and I hope you write again very soon!

  • October 6th, 2014

    chan thien my:

    Hello friends, its enormous paragraph regarding tutoringand completely explained, keep it up all the time.

  • October 6th, 2014

    wizard 101 cheats for crowns:

    You are so cool! I don’t think I’ve resad a single thingg
    like this before. So geat to find another person with some
    genuine thoughts on this issue. Seriously.. thanks for starting this up.
    This site is something that is needed on the internet, someone with some originality!

  • October 7th, 2014

    SEO Sales and Services Center:

    It’s actually very complicated in this busy life to listen news on Television,
    therefore I simply use web for that purpose,
    and get the latest news.

  • October 7th, 2014

    Dee:

    I’m gone to convey my little brother, that he should also go
    to see this blog on regular basis to take updated from latest gossip.

  • October 7th, 2014

    life hack:

    I am genuinely glad to glance at this web site posts which contains
    tons of helpful facts, thanks for providing these data.

  • October 8th, 2014

    20+ Portfolio Website Layout Photoshop Tutorials - Design Bump:

    [...] 6. Portfolio Design Part 1 [...]

  • October 8th, 2014

    Eleanor:

    Thanks for sharing your thoughts about design & interface.
    Regards

  • October 9th, 2014

    peru surf trips:

    Great information. Lucky me I camke across your website by accident (stumbleupon).
    I have bookmarked it for later!

  • October 9th, 2014

    bola tangkas:

    Can the knowledge of mathematics help a gambler to win.
    In the long run sports like soccer, cricket, volleyball and
    other exclusive sports events World Cup and Olympics are more enclosed because
    of their ideal viewership in the world which furthermore captured a large number of the dignified viewers.
    A team with 2 losses might have lost both games right before the upcoming
    game, and be on a losing streak.

  • October 9th, 2014

    murah:

    When I originally commented I clicked the “Notify me when new comments are added” checkbox and now
    each time a comment is added I get three e-mails with
    the same comment. Is there any way you can remove me from that service?
    Many thanks!

  • October 11th, 2014

    Fred & Rosemary West:

    Identified as the “Monster of Port-Rouuge”.

  • October 11th, 2014

    www.worldweb.com:

    They are giving away $1,000,000 in Jamaican Cash in the Planet J$1
    Million Jamaican Dollars Sweepstakes. According to the US Bureau of Labor Statistics, employment for automotive engineering jobs will grow as
    fast as the average of all other occupations through to the year
    2014. Car covers will protect your paint and car surface.

  • October 11th, 2014

    Frankie:

    Thanks for finally talking about >Portfolio Design Part 1 | Learning Resources for Adobe Photoshop <Loved it!

  • October 12th, 2014

    www.microimage.com.cn:

    By using a smooth bottom with a bow in the middle,
    perpendicular to the length of the car, and skirts along the side will create a low-pressure
    area behind the bow. They will take a “short deal” on the front and make
    it up by making a killing on the back end. You also want to know how you will be treated
    after the sale, such as if you must return something.

  • October 12th, 2014

    agen tangkas:

    You will discover a lot of types of playing, but none payout like profitable
    the lottery. In the Internet one could find some Offshore Sportsbook sites with similar
    information, but they are probably charge you money for
    that information. Many cheap travel options exist
    to visit Las Vegas including cheap airplane tickets, discount hotel rooms,
    and cheap vacation packages.

  • October 12th, 2014

    Alexandre Ber:

    They are giving away $1,000,000 in Jamaican Cash in the Planet J$1 Million Jamaican Dollars Sweepstakes.
    They’ll be stopped at regular intervals only for carrying out maintenance work.
    Car covers will protect your paint and car surface.

  • October 12th, 2014

    Alexandre Ber:

    I would like to warn you that caution should be executed whenever servicing a battery, as they contain acid that can burn less important things such as clothes but more important.
    According to the US Bureau of Labor Statistics, employment for automotive engineering jobs will grow as fast as the average of all other occupations through to the year 2014.
    You also want to know how you will be treated after the sale, such
    as if you must return something.

  • October 12th, 2014

    x.co:

    Shipping is very fast, and they also make it easy for you to track your order
    through the tracking number that they provide. Complicated car problems can easily be solved with the help of such reference materials.
    Car covers will protect your paint and car surface.

  • October 12th, 2014

    play mobile:

    Hello there, You have done a fantastic job. I’ll certainly digg
    it and personally suggest to my friends. I’m sure they’ll be benefited from this web site.

  • October 13th, 2014

    Goods Market:

    I am actually thankful to the owner of this web page who has
    shared this impressive piece of writing at at this time.

  • October 13th, 2014

    free films:

    An impressive share! I’ve just forwarded this onto a coworker who was doing a little homework on this.
    And he actually bought me breakfast because I discovered
    it for him… lol. So let me reword this….
    Thank YOU for the meal!! But yeah, thanks for spending the time to discuss this matter
    here on your internet site.

  • October 14th, 2014

    verify phone:

    I do not even know how I stopped up here, but I
    thought this submit used to be great. I do not understand who you’re but definitely
    you are going to a well-known blogger in the event you are not already.
    Cheers!

  • October 14th, 2014

    Lavina:

    Excellent beat ! I would like to apprentice at the same time as you amend your web site,
    how could i subscribe for a weblog site? The account helped me a applicable deal.
    I had been a little bit familiar of this your broadcast offered shiny clear idea

  • October 14th, 2014

    Merlin:

    This tool is one thing like a reverse on-web page Search engine optimisation analysis.

    This SEOmoz critique will not just focus on the tools.

  • October 15th, 2014

    Smadav 2014 Pro Registration Name And Key:

    What i don’t realize is in fact how you are now not really much more neatly-appreciated
    than you might be right now. You are very intelligent.
    You know thus considerably in the case of this matter, made me personally believe it from a lot of numerous angles.

    Its like men and women aren’t fascinated until it’s something
    to do with Woman gaga! Your personal stuffs excellent.
    All the time care for it up!

  • October 15th, 2014

    juicing recipes reboot your life:

    I have been exploring for a bit for any high-quality articles or weblog posts on this kind of space .
    Exploring in Yahoo I ultimately stumbled upon this site. Studying this info So i am satisfied to show that I have a very excellent uncanny
    feeling I came upon exactly what I needed. I most surely
    will make certain to don?t overlook this site and give it a look regularly.

  • October 16th, 2014

    Luisa:

    You’ve made some decent points there. I
    checked oon the internet to learn more about the izsue and found
    most pople will go along with your views on this web site.

  • October 17th, 2014

    Sue:

    I blog often and I genuinely thank you for your information. This article has truly peaked my interest.
    I’m going to book mark your website and keep checking for new details about once per week.
    I opted in for your Feed too.

  • October 17th, 2014

    solusi:

    I’d like to thank you for the efforts you have
    put in writing this site. I’m hoping to see the same high-grade blog posts by you
    in the future as well. In truth, your creative writing abilities has motivated me to
    get my very own website now ;)

  • October 17th, 2014

    https://sites.google.com:

    Hello, everything is going nicely here and ofcourse every one is sharing facts, that’s actually good, keep up writing.

  • October 18th, 2014

    Pamela:

    What’s up all, here every one is sharing these experience, thus it’s
    nice to read this website, and I used to go to see this web site everyday.

  • October 19th, 2014

    http://niss.co.in:

    Admiring the dedication you put into your site and detailed information you provide.
    It’s good to come across a blog every once in a while that isn’t the same out of
    date rehashed material. Great read! I’ve saved your site and I’m including your RSS feeds to my Google account.

  • October 20th, 2014

    books:

    whoah this weblog is magnificent i love reading your articles.
    Keep up the good work! You realize, a lot of persons are hunting round for this information, you can aid them greatly.

  • October 20th, 2014

    sans aucun risque. Comment ça marche? Vous vous demandez sûrement comment certains font pour avoir des milliers voir des millions de crédits? La réponse est simple: ils trichent! Mais si eux le font:

    Thank you for the good writeup. It in truth was
    once a amusement account it. Glance complicated to far introduced
    agreeable from you! By the way, how can we be in contact?

  • October 23rd, 2014

    William Hawthorn:

    Hi everyone, it’s my first visit at this web page, and paragraph is truly fruitful in favor of me, keep up posting such content.

Leave a Comment

©PSDlearning 2014. This site is brilliantly hosted by Mediatemple.