Howdy, today we will be creating a nice design for your online portfolio. What we will learn here is how you can use a combination of textures and patterns to create a nice old-school look and how to use guides in a smart way. Here is what we will be making:
Resources for this tutorial
- Icons from Iconsweets
- Sample images for the center image
- PSD Download – but really, you should follow the tutorial first!
Step 1: Setting up the Document
- Start by creating a 1600px x 1600px document in Photoshop.
- Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.
- Rulers: Ctrl + R
- Guides: Ctrl + ; or Ctrl + H
- The total width of our content will be 960px. Our canvas is 1600px width. So what you have to do is go to View – New Guide. Set the value to 320 px. Repeat the step but now change the value to 1280 px, this will make a total of 960 px to the center of our canvas.
- Because this design will have a 3 column set up, you will need 2 more guides. 960 / 3 = 320 px.
- So repeat the step again twice, but now with the value of: 640px and 960px.
- So what you now should have, is an empty canvas with 4 lines. Which represent the alignment we will be using. You can hide these guides by Ctrl + H
- Fill the background with: #272e2e.
Step 2: Working on Base Background for Header and Slider
We are going to give this header background a nice old-school look. We will use a texture and a pattern for this. Combining these with the right colour should give the style we are aiming for. Start by selecting the rectangular marquee tool (M), create a 100% by 390px shape, color #2daaa5. Go to Blending Options on this layer and select Gradient Overlay. Below are my settings: Next, we have to add the texture. You can use the one below or download your own.
- I used the one above at 20% opacity.
- Now, for the Pattern. What I did was make a new document, 5 x 5 px and background Transparent In here we will make the pattern.
- Zoom in all the way (1600%), select the Rectangular tool (M) and make a cross in the document.
- Go to Edit -> Define Pattern. Here you’ll save the pattern which you can use in every other .psd file.
- Back to our work file, Ctrl + left mouse click the blue layer. This will load the selection of the layer. Now, at the bottom of the layer panel select the black/white icon and choose Pattern Fill. It should automatically show your pattern but if not, select the arrow next to the thumbnail of the selected pattern. You’ll see a selection of patterns which should include your defined pattern.
- Hit OK and there is your pattern.
- Opacity = 3%.
- Now we will make a nice line at the bottom of the header background. There’s actually 2, 1px lines. the upper one is #26938e, and the one below is #44c6c1.
- To make these lines it’s easy to use the (horizontal) Single Row Marquee Tool.
Should look close like this: So far for the header background. Of course you can experiment with colours and different textures/patterns.
Step 3: Filling The Header With Logo/Nav & Slider
So, we made the document and we have a nice background for the header. Now it’s time to fill it up with content. First step, making a logo. What I did was quite easy. The font I used is Century Gothic. The settings can be found here: Kroal Portfolio Kroal: Color overlay is white. Portfolio: The last part of the logo is a vertical line which should be on your guide. Like this: I made that line with the Rectangular Marque tool. color: #289a96. Second step, the navigation. The navigation is just some simple text fields with 13px Open Sans font. The slashes in between are the same font but 10px and 37% opacity. The Blending Options for the nav text are: The lines beneath the text are 2 layers, made with Rectangular Marquee Tool. Colours are: #289a96 and just white for the active line. Third is the slide show, mine is 960px by 410px. Of course you can choose any size. Use the Rectangular Marquee Tool to create the shape. I recommend to switch to Fixed Size style-mode. I used Drop Shadow and Stroke, settings below. Use the Rectangular Marquee Tool again to make the little zoom icon caption. Hold shift while making this square. This will keep the dimensions right. The icon can be found in the Iconsweets pack. Also the caption to the right of the slider is made with the rectangular marquee tool. The text settings are below: /WEBDESIGN: AVICII BLOG The next part we will make are the small dots beneath the slider which show on what slide you are right now. I recommend making them with the Ellipse Tool (U). What you have to do is make 3 circles of about 15×15 pixels. The layer styles for these layers can be found here: Drop Shadow Inner shadow Color Overlay One of the dots needs to be the active one. Make this circle again with the Ellipse Tool (U). Blending options: Inner Shadow Gradient Overlay You may have noticed there’s a shadow beneath the slider. Let’s make that! The shadow was made with the Pen tool (P). Try to make a shape like this:
- Next, fill the shape with black, and go to filter > Blur > Gaussian blur. Choose a radius which fits you best. Mine was about 4 px.
- For the content background. It’s kind of the same as the header. But now you’ll just use the pattern and not the texture. Fill the background with #272e2e.
- Add another pattern overlay with the same pattern.
- Opacity is about 15%.
Then the arrows beneath the slide show. You can make them with the pen tool or just use a standard icon. Blending options left arrow: Drop Shadow Inner Shadow Color Overlay
- Just a solid black #000000
- Blending options right arrow.
Drop Shadow Inner Shadow Color Overlay Color: #607474 You may have noticed there is a line to separate the slider from the content below. These are 2 1px lines 100% width. Upper one is #1f2626, lower one is #2b3232. made with Single Row Marquee tool.
Step 4: Filling In The Content
- The content starts with a 3 column showcase of text about your website.
- If you don’t see your guides you made at the start hit Ctrl-H. This should make them pop-up ;).
- I like to have some icons to give some information about what the content includes. So search for icons which fit what you would like the visitors to see. It should fit the reading content. Mine are from the Iconsweets pack.
- Next to the icons is a single header title. Font is Open Sans, it’s all capital 15px and the colour is just plain white.
- The lorem text also is open sans, but now it´s 12px.
- Next, the read more button. Select the Rounded Rectangle Tool (U). Make it 3px radius and make yourself a nice sized button.
Blending options below: Drop Shadow: Inner Shadow Gradient Overlay There’s another line beneath these 3 columns. You can just duplicate the ones you made before.
- Next is another 3 columns, but now it’s a showcase of the last 3 portfolio items.
- Another icon + title as a header. And all the way too the left is a button to the portfolio. It has same dimensions as the buttons before but different styling.
Drop Shadow Inner Shadow Gradient Overlay Stroke Then, the images. The thumbnails are 306px by 135px. Make an inner stroke that is 3 px plain white. and put an image on clipping mask. The shadow beneath the thumbs are made the same way as for the slideshow.
Step 4: Let’s Make A Footer
First we have to make some sort of separation between our content and the footer we’re about to make. You can see in the image above that there are 4 1px lines. Make them again with the Single Row Marquee Tool. Play around with color and opacity until it feels natural. The background colour of the footer is #161a1a. I made the field with the Rectangular Marquee Tool. The footer again contains the 3 column build-up. Recent Tweets, Recent News & Contact form. I think the text is pretty easy to create with what I explained earlier. The buttons have the same blending options as the View Portfolio button. The only new thing is the contact form. I pulled out the Rounded Rectangle Tool (U) and created 3 shapes with 3px radius. The blending options are the same for all the 3 fields. Drop Shadow Inner Glow Gradient Overlay So, we’re almost there. Only one thing left to do. Make the copyright bar at the bottom. It has the same background as the content so that’s easy. The lines can be copied from the top of the footer and the text is just open sans again. This time the color is #c4c4c4. That’s it for this tutorial, I hoped you guys learned some new techniques. Still got some questions? Just leave a comment below. Have a great and creative 2012!
Dillen Verschoor is one of the two designers from http://www.juicygraphics.net. He lives in The Netherlands in the great city The Hague. He puts the world of design to a whole new level with his great passion for Web & Graphic design. Follow us on twitter: @juicy_graphics