119 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

119 Responses:

  • May 22nd, 2015

    waleed:

    I was very happy to see this site. I wanted to thank you for your time just for this fantastic work
    I definitely enjoyed every little bit of it and I have you saved as a favorite to
    see new stuff in your site. hashmi. . . . . . .

  • July 6th, 2015

    Shanaya:

    The design is looking fabulous i will also this as my portfolio.

  • September 11th, 2015

    poker indo:

    This is very attention-grabbing, You’re an overly professional
    blogger. I have joined your feed and stay up for
    looking for extra of your excellent post. Also, I’ve shared your site
    in my social networks

  • October 31st, 2015

    vodafoneturkiye:

    Resim çizme eski ça?lardan günümüze kadar süregelen bir sanatt?r. ?nsanlar farkl? ?ekiller çizip somutla?t?rmak kendilerini ve duygular?n? anlatma ihtiyac? hissetmi?lerdir. Resim çizme sanat? bu yüzden önemini koruyarak, günümüzde de de?eri bilinmektedir.
    Resim çizmek insana güzel duygular uyand?r?r. Resim çizerek , sanat?n size uyand?rd??? güzel duygular e?li?inde ruhunuzu dinlendireceksiniz. Resim çizerek sanat? s?radanl?ktan kurtar?p daha renkli daha anlaml? hale getirir. Sizde hayat?n?za renk katmak, içinizdeki duygular? ?ekillendirip resmetmek istiyorsan?z sizleri Bak?rköy resim kursu Ubeyt ÇA?ATAY hocam?z?n e?li?indeki profesyonel ekibe bekliyoruz.

    S?TE: http://ruyaavcisi.com/

  • November 15th, 2015

    vodafoneturkiye:

    37.si düzenlemen vodafone ?stanbul maratonu bugün tamamland? . Tüm yurtta merakla izlenen yar??may? kenya as?ll? sporcu kazand?. Ayr?ca yar??maya kat?lan binlerce ki?i vodafone ayr?cal?klar?n?n fark?na vararak nas?l bir operatör oldu?ununda fark?na varm?? oldular. Vodafone net ile ko?unuzu anl?k hesaplaya bilme imkan?na sahip olan yar??mac?lar katettikleri mesafeyi heran takip edebiliyorlard?. Vodafone adsl ile evlerinize i? yerinizede inernet ba?latabilirsiniz üstelik ek bir ücret talep etmeden . Telefonsuz evlere vodafone yal?n internet ile ba?lanmak e?siz bir mutluluk vermektedir.

    http://vodafonnet.net/

  • November 15th, 2015

    vodafoneturkiye:

    Fiber optik h?z?nda bir internet kullanmak istiyorsan?z sitemizdeki formu doldurarak bizlerle ileti?ime geçebilir, yada beni ara iletisi b?rakabilir yada sitemizdeki telefon adresinden bize ula?arak ???k h?z?nda ki internet kampanyalar?ndan faydalanabilirsiniz. Vodafone ba?vuru ile sizleri geni? alan a??m?za davet ediyoruz.

    http://vodafonebasvuru.com/

  • November 23rd, 2015

    Fred's Camping Shack:

    I think this is among the such a lot vital information for me.
    And i am satisfied studying your article. But want to commentary on some normal issues, The web site style is wonderful, the
    articles is really nice : D. Excellent activity, cheers

  • January 18th, 2016

    paykasa:

    thanks for your post. its great.

  • February 8th, 2016

    mahi:

    really nice innovative work great effort hard working admin

  • February 18th, 2016

    Jojobet:

    Jojobet bahis sitesi sayesinde en yüksek oranlar ve Jojobet giri? adresini ö?renebilirsiniz. http://jojobetgiris.com

  • March 9th, 2016

    Perabet Giri?:

    Perabet’e giri? yap?p en yüksek oranlardan bahis yapabilirsiniz. Bonus ve promosyonlar? en iyi sitelerden bir tanesi olmasada yüksek oranlar? ile ilgi çeker.

  • March 9th, 2016

    Perabet:

    Perabet giris ve yeni adresi

  • March 11th, 2016

    Bahis Siteleri:

    nice portfolio! thanks

  • March 28th, 2016

    Bahis:

    Bahis Sitesi.

  • March 28th, 2016

    Casino:

    Best casino site.

  • April 21st, 2016

    Betpas Giri?:

    betpas giri? ve fazlas?

  • May 25th, 2016

    Odeonbet:

    Odeonbet giris adresi burada!

  • June 13th, 2016

    Angelina veronica:

    I am going to read your next part also as its looking so interesting to me.

  • September 27th, 2016

    Bahis Sitesi:

    best live betting site in Turkish and English

Leave a Comment

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