Features

The one pager Sifiso has all the right stuff for a strong personal portfolio:

How to Edit

The source code is very pretty straightforward – simply edit the HTML with your own. The PSD contains 4 files – one for each main section of the page. All files are layered, grouped and labeled. To edit a text section – find the layer and edit the text within. Fonts used are “AR Blanca” (for the logo), and “Helvetica Nueu LT Std” for everything else.

Conclusion

Keep in mind that even though Sifiso may be full of images, it is still coded professionally to conform to standards and SEO. I hardly used any “image” tags (except for the portfolio section), and still used HTML text where it should be (see screenshot below).

*Note that I talked about how to code this way in my 3 part post: How to create a single page portfolio from scratch.

Credits to the icon developers:Coffee Mug by Omercitin, Paintbrushes by ArtDesigner.lv and Briefcase by thirteen eightyone.

The project I envisioned was a full website turn around. The company was still using static pages with old style tables and in line styling. My proposal was to completely overhaul their site into WordPress.

As you can see from above I planned on using WordPress as a CMS. A large section that will house a jQuery Content Slider or another form of slideshow that leads viewers to try out the demo. Directly below are a set of three column containers which will pull posts from different categories. A slightly different approach for the footer – which contains six mini columns as the main sitemap.

Feel free to download this fully layered and grouped PSD file from this link. Hopefully you can find a good use for the template. If one of you should become successful in taking some company away from static pages – then I’m happy.

Part 1: The Key

Using the Rounded Rectangle tool, Create a new shape of a square, with fill color #2c2c2c

Using the Add Anchor Point, add new anchors at both lower corners of the shape. Drag these new anchor points upwards to form a nice edge.

Apply a Gradient Overlay on the shape. Adjust the settings as shown below or you can choose your own gradiation.

Duplicate the layer you just created and Ctrl + T to transform. Transform it to about 90% less than the original size. Make sure you constrain the proportions.

Apply a new layer style – Stroke, with fill type as gradient, size of 3 and the rest of the settings like shown below:

Using the rounded rectangle tool and the ellipse tool, create two more shapes. The rounded rectangle will have a fill color of #ffffff, the ellipse with fill color #2c2c2c. Apply the same layer styles to both – stroke with gradient fill. Play around with the gradients and try to match the outer shapes:

Next is the shaft of the key. With the Pen Tool, start outlining the jagged edges of the key shaft. You can use a real key as a guide. I used two shapes for the shaft – one for the main, the other for the underlying teeth behind the main shaft. I also used the line tool to draw a line on top of the main shaft.

Again, apply some layer styles to the two main shapes. First is a stroke with gradient fill type – reduce the size of the stroke line to 1 and adjust the gradient colors. Do the same thing for the teeth.

The final result should be something like below. We now move on to the car alarm part.

Part 2: The Car Alarm

Hide all the layers you’ve done so far so you won’t get distracted. Starting again with the rounded rectangle tool, create a new shape – slightly bigger than our key head before. Make the radius to 50 pixels for a more rounded look. Go to “Edit” > “Transform” > “Perspective” and drag the upper handles closer to each other.

Again, apply layer styles to the new shape: An angled gradient overlay with the setting below, as well as a thick stroke with gradient fill type – again play with the shades.

The first shape should look like something like below. Note that when playing with gradient fills – there’s no exact way to do it. You just have to follow what looks right with your eye considering the light, shadows etc.

Next is to add two more shapes using the ellipse tool. One is for the keyhole which is smaller, the other for the button. Both will have stroke styles with gradient fill types. By now you should know how to play with this effect. Remember that the keyhole is to have a fill of white – or whatever background color you have, and the button is a darker red, also filled with a gradient:

And we’re done with the car alarm part. Next part is pretty easy – the key rings.

Part 3: The Rings

Start with the ellipse tool, create an oval shape (size it according to the key and the alarm). Apply layer style stroke of 1 pixel, with type gradient fill. Adjust the gradient accordingly varying colors from light grey to dark.

Duplicate the first ring twice. The duplicate rings should have a Fill (not Opacity) of 60 percent each. Adjust the angle of the gradients of each layer stroke to go in different directions. Again, its up to your judgment what looks best. You’re trying to achieve the illusion of aluminum texture with the shines.

From these three shapes – you want to duplicate them into another group. Click Ctrl – T to transform about 80 percent smaller than the first group.

And that is the final step for the rings. Next section is combining all the elements together.

Part 4: Combining Them Together

The easiest way to work with what we have so far is to rasterize the shapes into more manageable sections. Rasterizing means to flatten the shape for a different kind of editing. It is good practice to always keep your layers grouped and organized – in my case, I’ve grouped them into three sections: key, alarm and rings. To rasterize – I select one group, duplicate it and from that group I merge layers. Once its merged – the key group is going to be just a key layer, the alarm group – an alarm layer and so forth. DO NOT rasterize the original group! Its good practice to keep the vector shapes intact just in case you want to change something.

So after merging each of the groups – we should now have four layers: key, alarm and the two rings.

First rotate the key a few degrees clockwise. Put the bigger ring on top of the key layer. Using the ellipse marquee tool, select the inner section of the rings and start erasing the area where the key is supposed to be visible.

Do the same thing for the ring layer. You can use any selection tool that you’re comfortable with using: Lasso, Magic Wand – I use the pen tool because it’s more precise and have more control.

Finally, add some shadows in the places there should be shadows. I do not know of an efficient way to do this but to use the brush tool. Using the built in Photoshop shadow or glow effects apply it in the entire layer – leaving you with having to separate the layer, then erasing – this may be suitable for larger surface areas – but for our purpose, just dab a few brush spots – play with the brush types, opacity and strength, and you should have a pretty decent effect:

Do the same to the rest of the layers. You will be using a combination of rotating, erasing and painting to achieve the interlocking illusion as in a real set of keys. It is important to pay attention where the light, the shines and the shadows are supposed to be. Also, keep in mind – you may rotate your layers, but DO NOT – I repeat DO NOT resize them. Resizing rasterized layers result in extreme loss of quality. If ever you need to resize say the key image – you will have to go back to your vector layers for that. The interlocking rings, key and alarm should look something like this:

And there you have it. You’ve just created a key with car alarm entirely in Photoshop. You may download the psd file from this link. All I ask is for you leave me a nice comment below, follow me in Twitter or subscribe to my RSS Feeds.

The Home Page

The Garamond’s home page mimicks a magazine layout. This was made possible without any special wordpress queries, nor does it filter by categories. Instead, the latest post is automatically styled different. Thanks to this neat trick by Ruhani Rabin. The feature image and the thumbnails are automatically resized upon client request. Meaning, you can upload any size image (preferably wider than 540 pixels – which is the size of the container), assign it to a custom field – and voila! Images are cropped, zoomed and sharpened when once the browser hits it. The code I used is from Darren Hoyt known as TimThumb.

The Inner Pages

The Garamond is a bloggers theme. Traditional templates are intact: search, archive, category etc. I also included an authors bio at the end of each single post, as well as an author template which grabs all their articles. I went a little overboard in styling the subheadings for the post (shown below). The default font family used is of course – Garamond; although since it is not a standard font – Georgia is used as back up. The contrast between the larger text and the tiny Verdana is striking – which I felt was good.

Other Features

The two sidebars and the footer are all widget driven. Comments support Gravatars, pagination as well as multi-level threads. I’ve also added a random quote container right below the header – which requires the Stray Quotes plugin by Italyisfalling.com


You can view the demo from this link, or download directly from here. All I ask is for you leave a comment below – or follow my updates via twitter.

The Traffic Logo is done by another designer which was required to stay intact. You can download the .psd files from this link. Please feel free to comment below or follow me in Twitter.