If you enjoyed this article, get email updates (it's free).
Join over 77,235 Subscribers Today.
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:
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.
Should look close like this: So far for the header background. Of course you can experiment with colours and different textures/patterns.
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:
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
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.
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.
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.
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!
Join over 77,235 Subscribers Today.
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