Clicky

Bootstrap Portfolio – Create an awesome portfolio layout in CS6

Please subscribe to our newsletter, Follow us on twitter , or like us on facebook to be announced when we will post the second tutorial:

Coding the Bootstrap Portfolio using Twitter Bootstrap, HTML5 and CSS3

In this tutorial I will show you how to create a portfolio web design using Photoshop CS6 and the 960 Grid System. During the process I will explain some of the new features in Photoshop CS6 and how to use them. In the second part of this tutorial we will learn how to code the design using Twitter Bootstrap. For now let’s get started with the design.

[freebiesub download="http://www.webmaster-deals.com/blog/tutorials/1/bootstrap-folio.psd"]

Final Result Preview

Resources

About the 960 Grid System

To create the web design, we are going to use the 960 Grid System. Download it and unzip the archive file. Then go to the “Photoshop” folder (inside “templates”). There you will find all the .PSD files. For this web design we will use the 12 columns grid.

After you open the .psd file in Photoshop you will see 12 red bars. That is the grid that we will be using. You can hide the red bars by clicking on the eye icon of the “12 Col Grid” layer.

During this tutorial I will ask you to create shapes with certain dimensions. In previous versions of Photoshop we had to keep an eye on the Info panel while creating a shape to see its dimensions. In CS6 now you can select a shape tool (e.g. Rectangle Tool) and click once on your image to open the “Create shape” window in which you can input the exact dimensions of the shape you need.

The .PSD file contains some guides as well which will be very useful. To activate them go to View > Show > Guides, or use the shortcut Ctrl/Cmd + ;. I usually hide the red bars and activate the guides whenever I need them.

Now that we covered the basics of using the 960 Grid System, we can move on to creating the actual web layout. If you want to find out more about the 960 Grid System you can read a more comprehensive guide.

Step 1: Setting up the document

Open the “960_grid_12_col” file in Photoshop. We will start by increasing the size of our document, so we have enough space to work with. Go to Image > Canvas Size (Ctrl/Cmd + Alt/Option + C), set the width to 1200px and the height to 2330px. To expand document from the top, click on the top middle anchor point. You can adjust the height of the document later on, depending on how much vertical space you will need for your design.

Download this pattern from Subtle Patterns and open the image in Photoshop. To convert the image into a Photoshop pattern go to Edit > Define Pattern and click OK. Alternatively, you can download the .PAT file from the website which contains all the patterns ready for you to use.

We will apply the pattern on a solid layer. Go to Layer > New Fill Layer > Solid Color and set the color to white. Name this layer “Main BG”, double-click on it to open the Layer Style window and apply the pattern.

Step 2: Creating the header background

Create a new group and name it “header”. Select the Rectangle Tool (U) and create a rectangle across the top of your document with the height 150px and the color #8bc9d8. Double-click on this layer to open the Layer Style window and apply the same pattern that you used for the main background. Set the blend mode of the pattern to Multiply. This will eliminate the highlights of the pattern, leaving only the shadows visible, thus allowing the base color of this layer to come through.

Note: When you create a shape in Photoshop CS6 the path of that shape is automatically displayed. If you want to hide it, make sure you have one of the shape tools selected (e.g. Rectangle Tool) and hit the Enter/Return key. However, this is just a temporary solution. If you select another layer and then come back to a shape layer, its path is going to be displayed again.

Step 3: Creating a separator

To delimitate the header from the rest of the page we will create a separator using two thin lines and two shadows. Create a new group and name it “separator”.

Select the Line Tool (U), set the Weight to 1px, hold down the Shift key and create a horizontal line at the bottom of your header using the color #f2f4f5. Name this layer “1px line”.

Duplicate this layer (Ctrl/Cmd + J) and set the color of the new line to #428ca1. Select the Move Tool (V) and hit the up arrow key on your keyboard once to move the layer one pixel up.

We will also create two shadows for this separator. First, select the Rectangular Marquee Tool (M) and create a selection with the height 14px right beneath the header (1). Then go to Layer > New Fill Layer > Gradient and use a linear #102128-to-transparent gradient (2).

Put this layer inside a group (Ctrl/Cmd + G). Add a mask to the group (Layer > Layer Mask > Reveal All). Then select a black-to-transparent gradient, hold down the Shift key and drag two horizontal gradients: one from the left edge of the document towards the middle and another one from the right edge. This will create a fade out effect for the gradient (3).

Right-click on this layer and select Convert to Smart Object. Name this layer “bottom shadow” and set its opacity to 7% (4).

Duplicate the shadow layer (Ctrl/Cmd + J) and go to Edit > Transform > Flip Vertical. Then move this layer right above the dark line and name it “top shadow”.

We will use this separator throughout the entire design. Therefore, it might be a good idea to convert it into a smart object. This way if we decide that we want to make a change to all the separators, all we need to do is apply the change to the smart object and all the separators will be updated.

Right-click on the “separator” group and select Convert to Smart Object. Then name this smart object “bottom separator”. When we need a new separator for other areas of the web design, we will duplicate this one.

Step 4: Creating a top bar for the header

Select the Rectangle Tool (U) and create a rectangle with the dimensions 1200px by 14px and the color #4c93a9. Name this layer “top bar bg” and move it at the top the header. Then create a separator for this bar using two horizontal lines. For the first one use the color #316272 and for the second one use #8dc5d4.

Step 5: Creating the logo

Create a new group and name it “logo”. Select the Rounded Rectangle Tool (U), set the Radius to 5px and create a rounded rectangle with the dimensions 380px (5 columns of the 960 grid) by 56px. If you have a copy of Photoshop CS6, you can click on your image with the Rounded Rectangle Tool to open the “Create Rounded Rectangle” window. Here you can input the width, height and radius of your shape and then click OK to create it.

Name this layer “logo bg”, double-click on it to open the Layer Style window and use the settings from the following image. For Stroke I used the color #37778c and for Drop Shadow I used #0d1c24. Make sure this layer is aligned with the left edge of the grid.

Select the Type Tool (T) and write the name of your web design inside the rounded rectangle using the color #717b80. I used two fonts: Lato Light for the word “Bootstrap” and Lato Bold for the word “Folio”. Add a white drop shadow effect to your text layer using the settings from the image below.

Download the Twitter logo in EPS format. To import the logo in your Photoshop document use one of the following methods:

  1. If you own a copy of Adobe Illustrator, open the EPS file, hit Ctrl/Cmd + A to select the logo and copy it (Ctrl/Cmd + C). Then go back to Photoshop and hit Ctrl/Cmd + V. A new window will appear asking you how you prefer to paste the vector shape. From that list select “Shape Layer” and click OK. This option has the advantage of keeping the vector paths, so you can modify the size of the shape without loosing any quality.
  2. If you do no have a copy of Adobe Illustrator, open the EPS file in Photoshop, set the dimensions and click OK. Photoshop will then open a rasterized version of the vector file. Now you can use Move Tool (V) to move the image into your web design document.

After you imported the Twitter logo in your Photoshop document, set its color to white and its Fill to 50%. Then double-click on this layer to open the Layer Style window and use the settings from the image below. For the Stroke effect use the same color that you filled to the text layer with (#717b80).

Name this layer “twitter logo” and use Free Transform (Ctrl/Cmd + T) to scale it down (hold down the Shift key to maintain proportions while scaling). Move this logo in front of the text layer.

Step 6: Creating the navigation bar

Create a new group and name it “navigation”. Select the Type Tool (T) and write the name for your navigation items. I used the font Lato Bold with the size 15px and the color #f5f7f8. Leave 50px distance between navigation items.

Add a drop shadow effect to your text layers using the settings from the image below.

To indicate the active navigation item we will add a line beneath it. Select the Line Tool (U), set the Weight to 2px, hold down the Shift key and create a horizontal line beneath the first navigation item. Add a shadow to this layer using the color #428ca1 and the settings from the image below. Name this layer “active item underline”.

Move this line 8px beneath the text layer and make sure it is aligned with the bottom edge of the logo, as you can see in the following image.

Step 7: Adding a testimonial

In an article wrote by Sacha Greif on common portfolio mistakes, one of the mistakes he talks about is having a stupid tagline such as “I create beautiful and usable designs” which does not impress anyone. I have been guilty of this mistake as well during my freelancing career. Sacha suggests to replace the tagline with a client quote. I think it is a very good idea, so this is what we will do for our portfolio website.

Create a new group and name it “Top Testimonial”. We will start by creating a photo frame. Having a photo of your client next to the testimonial adds credibility. Select the Rounded Rectangle Tool (U), set the Radius to 5px and create a rounded square with the dimensions 138px by 138px and the color #f6f7f8. If you wonder why I used 138px instead of 140px, it is because we will apply a 1px stroke effect to this rectangle, which will increase the width and height by 2 pixels, thus creating a square with the dimension 140px.

Name this layer “photo bg”, double-click on it to open the Layer Style window and use the settings from the following image. For the Stroke effect I used the color #c9cbd1 and for the shadow I used the color #0d1c24.

Select the Rounded Rectangle Tool (U), set the Radius to 2px and create a rounded square with the dimensions 128px by 128px and place it in the middle of the first square. Name this layer “image_holder”. This area can be used to display a photo of your client.

Note: To display a photo in this area, open it in Photoshop and use the Move Tool (V) to move it in your web design document. Name this layer “photo” and place it over the “image holder” layer. Then right-click on the “photo” layer and select Create Clipping Mask. Now your photo will be visible only inside the “image holder” layer.

Now we will create a background for the testimonial. Select the Rounded Rectangle Tool (U), set the Radius to 5px and create a rounded rectangle with the dimensions 778px by 138px and the color #f6f7f8. Again, when we will apply the stroke effect the total dimensions of the rectangle will be 780px by 140px.

Copy the layer style from the “photo bg” layer and paste it to this one. Name this layer “testimonial bg” and make sure it is aligned with the grid and the photo frame.

Now we will add a quote icon using the font Lato Bold. Select the Type Tool (T), click on your image and insert the quotation marks. Set the text size to 110px and the color to #d8d9da.

Select the Type Tool (T) and add a few lines of text for the testimonial. I used the font Lato Italic with the size 20px and the color #677075. I also set the leading (the space between lines of text) to 28px from the Character panel (Window > Character).

Use the Type Tool (T) again to add the name of the client and their website address beneath the testimonial. I used the font Lato Bold with the size 17px and the leading 22px. For the URL I used the color #27a3c4.

Add a drop shadow effect to all the text layers you created in this step using the settings from the following image.

To complete this area we will add a “more testimonials” button. Select the Rounded Rectangle Tool (U), set the Radius to 3px and create a rounded rectangle with the dimensions 150px by 28px and the color #f6f7f8. Copy the layer style from the “testimonial bg” layer and paste it to this one. Name this layer “button”.

Select the Type Tool (T) and write the text “more testimonials” using the font Lato Bold with the size 12px and the color #717b80. Then apply the same white shadow effect that you used for the other text layers. Group these two layers together (select them and hit Ctrl/Cmd + G). Name this group “button”.

Step 8: Creating the background for the “portfolio” area

Create a new group and name it “Portfolio”. Duplicate the “header bg” layer (Ctrl/Cmd + J), name it “portfolio bg” and place it inside the “Portfolio” group. Move this rectangle 40 pixels beneath the testimonial area (measure from the bottom edge of the button). Then use Free Transform (Ctrl/Cmd + T) to increase the height of this rectangle to 970px (you can come back and adjust the height after you add the content for this area).

Duplicate the “bottom separator” layer from the “Header” group and move it inside the “Portfolio” group. Then go to Edit > Transform > Flip Vertical. Name this layer “top separator” and move it at the top of the portfolio area.

Step 9: Adding a portfolio navigation

If your portfolio contains projects that fall into more than one design category, it is a good idea to include a navigation that allows prospect clients to see only the projects they are interested in.

First, select the Type Tool (T) and add a headline for the portfolio area using the font Lato Black with the size 28px and the color #f5f7f8. Add a shadow to this layer using the settings from the image below. Leave a distance of 30px between the top of the portfolio area and this text layer.

Create a new group and name it “portfolio navigation”. Then select the Type Tool (T) and write the name for your portfolio categories. I used the font Lato Regular with the size 16px and the color #f5f7f8. Then add the same shadow that you applied to the “Portfolio” text layer.

Duplicate the “active item underline” layer from the “Header” group and place it inside the “portfolio navigation” group. Then move this layer beneath the first item of your portfolio navigation (you may need to reduce the width of this layer using Free Transform).

Make sure that the text layers of the navigation are bottom aligned with the “Portfolio” headline, as you can see in the image below.

Step 10: Creating a portfolio container

Now we will create a light grey background for the portfolio. Select the Rounded Rectangle Tool (U), set the Radius to 5px and create a rectangle with the dimensions 1000px by 840px. Why 1000px wide you ask? The width of the content area for this web design is 940px and we will leave a distance of 30px around the portfolio items. Therefore, we need a 1000px wide container. Move this rectangle 20px beneath the “Portfolio” text layer.

Name this layer “portfolio container”, double-click on it to open the Layer Style window and use the settings from the following image. For the Stroke effect I used the color #428ca1.

Step 11: Adding the portfolio items

Create a new group and name it “portfolio items”. Open in Photoshop the http://www.webmaster-deals.com/blog/tutorials/1/images that you want to display in the portfolio and crop them at the dimensions 220px by 170px.

I used 220px wide http://www.webmaster-deals.com/blog/tutorials/1/images because my portfolio has four columns and each column is 220px wide. If you want a different number of columns, activate the grid and calculate how wide your http://www.webmaster-deals.com/blog/tutorials/1/images need to be (e.g. if you want a 3-column portfolio, each image should be 300px wide). Make sure you align the http://www.webmaster-deals.com/blog/tutorials/1/images on the grid. Take a look at the following image for reference.

Apply the following settings for Stroke and Outer Glow to all your portfolio http://www.webmaster-deals.com/blog/tutorials/1/images. For the Stroke effect I used the color #f0f3f7 and for the Outer Glow effect I used #35424a.

Choose one image that you want to display as active, right-click on it and select Clear Layer Style. Then apply a 2px inner stroke to this image using the color #56c3dc.

Note: In Photoshop CS6 you can apply layer styles to groups. Simply double-click on the group and the styles that you add will be inherited by all the layers inside that group.

Step 12: Creating the “active project” area

When a person clicks on one of the portfolio http://www.webmaster-deals.com/blog/tutorials/1/images we want to present them with more information on that specific project. The project details will be displayed beneath the portfolio items.

Create a new group and name it “active project info”. I split this area into two main columns: one for text, which is as wide as 5 columns of the 960 grid, and another one for http://www.webmaster-deals.com/blog/tutorials/1/images which is as wide as 7 columns of the grid.

Select the Type Tool (T) and write the name of your active project using the font Lato Bold with the size 22px and the color #4e5559. Then add a couple paragraphs of text beneath the title using the font Lato Regular with the size 16px and the leading 24px.

Create a “Visit website” button, just like you created the “More testimonials” button, but a bit more large. Then add an image next to the text description of your project. Again, make sure you align each element to the grid.

Step 13: Adding a separator at the bottom of the “portfolio” area

Duplicate the “bottom separator” layer from the “Header” group and move it inside the “Portfolio” group. Then select the Move Tool (V) and move this layer at the bottom of the blue background.

Note: If you are having difficulties finding a specific layer in your Layers panel, you can use the new search function of Photoshop CS6 to search through your layers. Select “Name” from the drop-down menu at the top of this panel, write the name the layer you are looking for and click on it. Then deactivate the search by clicking on the red square next to the input field. All your layers will appear again and the one you clicked on will be selected.

Step 14: Creating the “About” area

Create a new group and name it “About”. Then select the Type Tool (T) and add a headline for this area using the font Lato Black with the size 28px and the color #4e5559. Add a 1px white shadow to this layer using the same settings that you used for the other text layers. Move the “About” text layer 30px beneath the portfolio area.

Duplicate the “photo bg” and “image holder” layers from the “Top Testimonial” group and move them in the “About” group. Then click on the “photo bg” layer and duplicate it one more time (Ctrl/Cmd + J). Select the bottom “photo bg” layer and rotate it using Free Transform (Ctrl/Cmd + T). This will create the effect of two photos stacked on top of each other.

Open a photo that you want to display in this area and move it over the “image holder” layer. Then right-click on the”photo” layer and select Create Clipping Mask to make the photo visible only inside the “image holder” layer.

Select the Type Tool (T) and add some content next to the photo. Use the same text settings that you used for the paragraphs from the “portfolio” area.

Step 15: Creating the “Testimonials” area

Now we will add a couple of testimonials next to the “About” area. Create a new group and name it “Testimonials”. Add the headline for this area with the same settings that you used for the “About” area headline.

Duplicate the top testimonial (without the photo) and move the layers in the new “Testimonials” group. Set the width of the rounded rectangle to 620px. Then set the text size of the testimonial and the client details to 16px and the size of the quotation marks to 80px. Take a look at the following image for reference.

Select all the layers of your testimonial, right-click on one of them and select Convert to Smart Object. Duplicate this layer and move the new testimonial 20px beneath the first one.

Step 16: Adding the footer background

Duplicate the “portfolio bg” and the “top separator” layers from the “Portfolio” group. Group these two layers together and name the new group “Footer”. Move the background and the separator layers 40px beneath the “About” area.

Step 17: Adding a Twitter feed

The footer will be split into two columns: one for the Twitter feed and one for the contact form. Create a new group and name it “Twitter feed”. Select the Type Tool (T) and write the headline for this area using the font Lato Black with the size 28px and the color #f5f7f8. Add a 1px black shadow with the opacity 30% to this text layer.

Select the Type Tool (T) and write the words “Follow me »” next to the headline. Make sure these two text layers are bottom aligned. The entire width of my Twitter feed area is 380px (5 columns of the 960 grid).

Select the Type Tool (T) and add three paragraphs of text for the tweets. I used the font Lato Italic with the size 16px and the color #f5f7f8. Add a shadow to these text layers using the same settings that you used for the headline shadow.

Step 18: Creating dashed line separators

One of the great new features of Photoshop CS6 is the ability to create dashed/dotted strokes. In previous versions we could only create a solid stroke and had to rely on tricks to achieve a dashed stroke effect. Not anymore.

Select the Line Tool (U) and create a horizontal 1px line. From the options bar above your image set the Fill to none and the Stroke to white. From the Stroke Options panel select the dashed or the dotted line presets and that’s it. If you want to adjust the settings, click on the “More options” button.

Name this layer “separator”. Duplicate it two times and place one separator at the top of each paragraph of text.

Step 19: Creating the background for the “Contact” area

Now we will create a contact form next to the Twitter feed area. First, create a new group and name it “Contact”.

Select the Rounded Rectangle Tool (U), set the Radius to 5px and create a rectangle with the dimensions 538px by 410px. Name this layer “contact bg”. Copy the layer style of the “portfolio bg” layer and paste it to this layer.

Use the Type Tool (T) to add a headline that reads “Contact” similar to the “About” or “Testimonials” headlines. Move this text layer 20px from the top edge of the “contact bg” layer and 30px from the left edge.

Step 20: Creating the contact form

Create a new group and name it “contact form”. Select the Rounded Rectangle Tool (U), set the Radius to 4px and create a rounded rectangle with the dimensions 478px by 38px and the color #f6f7f8. Copy the layer style from the “testimonial bg” layer and paste it to this one. Name this layer “input field”.

Select the Type Tool (T) and add a placeholder inside the input field. I used the font Lato Italic with the size 15px and the color #717b80. Add a 1px white shadow to this text layer.

Add one more input field for email and a text area for the message. Set the height of the text area to 170px.

Now we will create a “Send” button. Create a new group and name it “button”. Select the Rounded Rectangle Tool (U), set the Radius to 4px and create a rectangle with the dimensions 98px by 36px and the color #4dbada. Double-click on this layer to open the Layer Style window and use the settings from the following image. For the Stroke effect I used the color #218fae.

Select the Type Tool (T) and write the word “Send” on your button using the font Lato Bold with the size 15px and the color #f5f7f8. Add a 1px black shadow to this text layer with the opacity 15%.

Step 21: Creating the “Copyright” area

Create a new group and name it “Copyright”. Select the Rectangle Tool (U) and create a rectangle with the height 60px at the bottom of your footer using the color #41859a. Double-click on this layer to open the Layer Style window and use the settings from the following image. Name this layer “copyright bg”.

Select the Line Tool (U), set the Weight to 1px and create a horizontal line at the top of the “copyright area” using the color #8dc5d4. Name this layer “1px line”.

Duplicate this layer (Ctrl/Cmd + J), change the color of the new line to #316272 and move it one pixel down.

Select the Type Tool (T) and add a copyright statement in the middle of the copyright area using the font Lato Regular with the size 15px and the color #cbe2ea. Add a 1px black shadow to this layer with the opacity 30%.

Final result

We’re finished. Click on the image below to see the large version of the web design. I hope you enjoyed this tutorial and you learned something new.

Stay tuned for the second part of this tutorial where we will code the design using Twitter Bootstrap.

[freebiesub download="http://www.webmaster-deals.com/blog/tutorials/1/bootstrap-folio.psd"]

11 Responses

  1. Great tutorial and nice clean layout! Looking forward to the Bootstrap coding. I am putting together a portfolio site and this is a great start for me.

  2. Nice tutorial! will stay in tune for the next part the bootstrap part :D

  3. Drew

    Thanks for the great tutorial can’t wait for part two! Are you releasing it any time soon?

  4. Dmitriy

    When can we see the second part?

  5. Drew

    Sounds great can’t wait!

  6. Maxim

    Oh, how I need a second part! ;)

  7. Drew

    I can’t find the link to the second tutorial am I missing it somewhere on this page? Thanks

Leave a Comment

What's on your mind? Fill out the form below to let us know.