The design style that we’re aiming for with this template is clean and minimal – we therefore only want to include essential details and make subtle use of colors and fonts. On a small business site it’s very important to highlight exactly what the business does and the types of services it provides, so we need to make this clear.

We also want to point people in the direction of some of our best work/case studies – so having a “Featured Projects” section can be useful for showing that we’ve worked on other projects in the past and that people have been happy with the work. Below is a screenshot of the template that we’ll be creating.

Step 1: Create a New Document

Create a new document with a size of 1100×2000. Then add some vertical guides at 70px and 1030px – that gives us a width of 960px which should easily fit on most screens. Set the background color to #FFFFFF (white).

Step 2: Create The Background

We now want to add a dark bar at the top of the template along with a grey-white gradient. Using the Rectangle Tool, set the foreground color to #222222 and draw a box around 10px in height across the top of the document.

We now want to place a gradient just below that box – add a new layer – then use the Rectangle Tool draw a new box about 150px in height and create a Gradient Overlay effect with the following settings:

You should end up with something like the following (it might be difficult to see in the image below, but there’s a slight gradient just below the dark line):

Step 3: Add The Header

In the header we want to add the name of the small business – select the Myriad Pro font, set the size to 90px, and type the name of the company. Position it next to your left border.

To make this stand out a bit we want to add a Gradient Overlay effect and a Drop Shadow:

You should end up with something like the following:

Step 4: Create The Navigation

To create the navigation bar we need to use the Rounded Rectangle Tool and set the Radius to something like “6″. Change the foreground color to #222222 and draw a box around 50px in height from the left border to the right.

Next we need to add a Drop Shadow effect with the following settings:

Finally, we need to add the links – set the font to Arial, the color to #EEEEEE, the font size to 12px, and write your links with a “/” separating each of them.

Step 5: Create The Featured Content Section

There are two main sections to the featured content section – the area on the left that contains the textual content and the image on the right. For the content on the left, we need to add a main title that highlights what the company does – set the font to Myriad Pro, the size to 32px, and the color to #444444. Type “Professional Web Design & Development Services”.

To make the text look a little more professional we want to push the characters closer together – set the letter spacing to -40px.

We then need to add a tagline – set the font size to 30px, the color to #888888, and type “Exceptional Services At Great Prices”. As with the main title, set the letter spacing to -40px.

Now add some dummy text – this will be an area where more details about the company can be provided. Set the font size to 14px, the color to #444444, and type some text.

We now need to add the button – using the Rounded Rectangle tool, set the radius to something like “12″ and draw a button that is approximately 120×30px in size.

Add a Gradient Overlay with the following settings:

Also add a Drop Shadow with these settings:

Now add some text – use the Myriad Pro font, set the color to #FFFFFF, the font size to 14px, and type in uppercase “LEARN MORE”.

For the area on the right, add an image that is around 380×230px in size. Position this image against your right border.

Add a Stroke and Drop Shadow with the following settings:

Your design should look something like this:

The final step here is to create a line – using the Line Tool, set the weight to 4px, the color to #444444, and draw a line from the left border to the right.

Then add a Drop Shadow with the following settings:

Here’s how the line should look after adding these effects:

Step 6: The Featured Projects Section

In the featured projects section we want to highlight some related work using both an image and a small amout of text where a brief overview can be provided.

Firstly, we need to add a title for this section – set the font to Myriad Pro, the font size to 28px, the color to #444444, and the letter spacing to -40px. Type “Featured Projects”.

We then need three images that are all around 295×150px in size – I’ve used a range of screenshots from some of my premium web templates, but you can use whatever you choose here. Add around 35px of spacing between each of the images.

To improve the appearance of these images we want to add a drop shadow to each of them using the following settings:

Also add a Stroke:

You should then get something that looks like the following:

Underneath the images, we need a title and some text – for the title, set the font to Arial, the size to 16px, and the color to #E86E14. Type a title:

Underneath that we want some more text – using the Arial font, set the size to 12px, the color to #555555, and type some dummy text. We then need to add a link underneath the text – change the color back to #E86E14 and type “Read More >>”:

Follow the same process for the other two images:

Step 7: Create The Footer

The footer is really simple to do – take a copy of the Rounded Rectangle that you created in Step 3 to create the navigation background – place this at the bottom of the template:

Next we need to add the footer text – set the font to Arial, the size to 10px, the color to #EEEEEE, and type something like “Copyright © 2010 / Design Studio / All Rights Reserved”:

That’s everything done! Your final design should hopefully look something like the following image:

Conclusion

I hope you found this tutorial useful – the effects used are subtle and simple, but I think it creates a nice overall look. Remember that you can check out the live demo if you want to take a closer look at the template – you can also visit the Saburo details page to get more details about the theme.

In this first tip I’m going to focus on adding an author bio section to the bottom of your blog posts (like the one at the bottom of this post) – having an author bio can be a great way to create a more personal feel on your blog and show your readers that there is a real person behind the site.

There are a number of different approaches you can potentially use to add an author bio, but I’m going to show you one approach using some of the functionality that WordPress automatically provides you with. There are also written instructions below the video (with screenshots) that detail how to go about doing this.

Just a quick note: if you have problems viewing the code in this video, it might be worth watching the video in High Definition and Full Screen mode.

Video Notes

In this example I’m going to use the blog section on the Sanura WordPress Theme – by default there isn’t anything at the bottom of the individual blog posts in this theme – you simply have the blog post content followed by the comments.

We therefore want to add an “About The Author” section just above the comments – the first thing that we need to do is access the “Users” section in your WordPress Admin panel – enter all of the details requested on this page. In particular, you want to ensure that you set the “Display name publicly as” field to your full name and that you complete the “Biographical Info” section.

Note that you can include links in the “Biographical Info” section if you surround the appropriate text with <a> tags. As you can see above, I’ve done this with my Twitter username (@cpcreed) – doing something like this will make it easier for people to click through and follow you. It’s also a great way of advertising other sites/projects that you’re working on.

OK, now it’s time to write some code. For our author bio section we need to access the public name you entered and your biographical information. We can get the author name via the WordPress function <?php the_author() ?>. Similarly, we can get the biographical information that you entered via the WordPresss function <?php the _author_description ?>.

You need to enter these WordPress tags into your single.php file – open that file and locate the place where you add your comments (i.e. the line where it says <?php comments_template() ?>).

Just above that you’ll need to add the following code:

<div id="author-bio">
	<h3>About The Author</h3>
	<img src="<?php bloginfo('url'); ?>/wp-content/themes/sanura/images/chriscreed75x75.png" alt="Chris Creed" />
	<h4><?php the_author(); ?></h4>
       <?php the_author_description(); ?>                        
</div><!--end author-bio-->

Let’s break that down a bit. On line 1 we create a new author biography container – we then have the title (“About The Author”) followed by an image. Make sure that you change the URL of your image to a URL where you have a photo that has dimensions of 75×75px (or whatever size is appropriate for your template).

On line 4 we then add the author name (i.e. <?php the_author(); ?> and follow that with the biographical information (i.e. <?php the_author_description() ?>.

If you save this code and then view your site you should find that you have something like the following:

To tidy this up we need to add a bit styling – add the following code to your CSS stylesheet (i.e your style.css file):

#author-bio { border-top: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; padding: 15px 0; }
#author-bio h3 { font-size: 18px; margin: 0 0 10px 0; }
#author-bio h4 { font-size: 14px; margin: 0 0 3px 0; }
#author-bio img { float: left; width: 75px; padding: 2px; border: 1px solid #cccccc; margin: 5px 15px 0 0; }

You may need to play around with the CSS code above to make it consistent with your site, but this code should be a good starting point. You should end up with something like the following:

That’s it! I hope you found this tip useful – please let me know if you have any questions or if there are any other specific areas you’d like me to focus on with these quick tips.

From a freelancer’s perspective this can be advantageous as it means that you can essentially make more money. For employees it means that you can impress your managers and potentially enhance your chances of getting a promotion or pay rise (depending on who you work for ).

However, being more efficient isn’t always about making more money – sometimes it can simply be about having more spare time to do things that you enjoy such as participating in your favorite hobby or spending time with friends and family. It all depends on your goals and personal circumstances.

In this post I want to highlight a number of things that have helped me to become more efficient when doing web design work.

1. Get Organized

This first tip is fairly obvious – if you want to become more efficient you have to become more organized. This includes organizing your tasks, client work, files, web bookmarks, accounts, and anything else that is relevant to your work. If you’re constantly looking for things you can’t find, or are unaware of approaching deadlines, you’re going to miss things and cause problems for yourself.

One of the main things that has helped my productivity is organizing all of my tasks into a single place. Before this I found that my daily/weekly tasks would end up all over the place either scribbled on different bits of papers or hidden away in emails. This clearly isn’t optimal and there are some great applications out there such as Things and Omnifocus that can help you manage your tasks more effectively.

2. Review Your Daily Tasks

This is an absolute must for me! I find that creating a list of tasks each evening that need to be completed for the following day makes me SO much more productive. Whenever I fail to do this I find that my focus for the following day is lacking and I never get as much done as I’d like. For some reason doing it the night before is always more effective for me than first thing in the morning.

3. Eliminate Potential Distractions

Given that we do most of our work online there’s the potential for so many different types of distractions – whether it’s being notified of tweets, Facebook updates, or new email, it’s very easy for your flow to be interrupted when doing design work. I’ve found that in order to get some serious work done all of these applications need to be switched off! I then tend to switch them back on when I need a break (normally after an hour or so) for around five-ten minutes before getting on with work again.

4. Tailoring Your Tools

This was something that I rarely used to do in the past and it was a big mistake! I just wanted to get on with new projects and never took the time to configure and optimize the tools I was using. Instead I would just use the default settings that the application/software came pre-configured with.

Making a few tweaks to optimize your software to support your workflow can provide massive benefits to your productivity. The Adobe suite of products are a great example of this – there are lots of ways in which you can optimize these applications through the use of keyboard shortcuts. The same also applies to development applications such as Coda and TextMate.

Whilst it might seem a pain in the short-term, take some time to learn how your tools work and how you can tailor them to suit your personal needs – in the long-term it will make you much more efficient and productive.

5. Keep A Library Of Code Snippets

This one goes without saying. If there are pieces of code that you are using on a regular basis it’s a good idea to keep a central copy of them that you can easily access when you require that particular type of functionality for a project.

They can be your own code snippets or they can be other ones that you collect from around the Web (e.g. check out Snipplr). There’s obvious benefits to using code snippets – for instance, they help you save time as you can literally copy and paste the code into your new project.

They also make your code consistent across multiple projects – this can be particularly handy if you have to do some work on an older project as you will instantly be familiar with the code and will be able to make the appropriate updates much more efficiently.

6. Use Plugins

Where possible it’s worth considering the use of plugins to create the type of functionality that you’re after. I suppose here I thinking primarily in terms of WordPress and jQuery plugins that are often freely available around the Web. This stops you from having to reinvent the wheel each time and allows you to save on development time.

A recent example of this is the affiliate program that I set up here at Voosh Themes – I was considering building something myself as I thought it would be interesting to do, but I also knew it would take up a considerable chunk of time that I didn’t really have available. So instead I purchased a WordPress plugin (WP Affiliate Program if you’re interested) that did everything for me. It works great, was very reasonable in terms of price, and saved me a huge amount of development time.

The same also applies with jQuery plugins – if there are some nice interactive effects you want to use on a site see if there’s a jQuery plugin that you integrate into your work. Obviously there’s a balance here – coding solutions yourself can be interesting and will provide you with some good experience – but you have to weigh that against the time you have and the deadlines/tasks you have to get done.

7. Set Yourself Challenging Deadlines

This is something I regularly do myself that I find helps make me more efficient. For example, instead of saying that I need to complete task X by the end of today, I find it useful to set a more specific and challenging deadline like “I need to complete task X by 3pm”. It’s only a subtle difference but I find it helps to focus my attention on the task in hand and motivates me to get it completed in good time.

8. Creating A Nice Working Environment

A pleasant working environment can really do wonders for your productivity! The definition of a “pleasant working environment” is quite a subjective thing, but for me it includes have a clean and tidy desk to work from in a room with lots of natural light (i.e. near a window). However, I know this is down to personal taste – a lot of people like clutter and actually enjoy working in that type of environment more.

I used to have quite a messy desk on a regular basis, but a while ago I decided to make a conscious effort to keep things tidier – and I have to say that I much prefer it and find it much easier to focus on my work without lots of bits of paper, books, and other rubbish lying around.

9. Be Aware Of Your Optimal Work Patterns

I think this is a very important point. You need to be aware of when you do your best work – not only that, you need to know which *type* of work you do best at which times of the day.

For example, I find that I write best first thing in the morning – if I try and do it in the middle of the day, or later at night, I just seem to struggle with it more and the words don’t flow quite as well. When doing design work I find that I do it best (and enjoy it more) when I work in the evenings.

Take some time to consider what works best for you and when you work most efficiently.

10. Avoid Working Long Hours

I have to admit that this is something I really struggle with! Whenever I generate some extra time through getting daily tasks completed ahead of time, I tend to fill that “spare” time with more work. This is largely because I enjoy what I do, but at the same time I think it’s important to get away from the computer and do something else.

Having that “burned out” feeling isn’t nice and can result in you seeing your work as a chore and you’ll become less motivated. Taking regular breaks will help to keep you fresh, enthusiastic and motivated – which in turn will make you more efficient and productive.

Conclusion

I hope you find some of these tips helpful – a lot of them are just common sense, but I think it’s helpful to be reminded of them from time to time. Do you think there’s anything important that I’ve missed? What techniques do you use to make yourself more efficient and productive? I’d love to hear your thoughts in the comments below.

A number of different topics are covered in this guide including keyword research, obtaining high-quality backlinks, managing duplicate content, and WordPress SEO plugins.

You don’t need to implement absolutely everything that’s included in the posts below – pick the tips/techniques that are best suited to your site and you should soon start to see a boost in traffic.

Here are the posts …

1. WordPress SEO – Introduction

As the title suggests, this post introduces the main SEO concepts that I cover in the later posts and defines what I mean by “SEO” for the purposes of the guide.

2. Researching Great Keyphrases To Help Drive Traffic

This article is all about keyword research – this is an essential activity that will enable you to target high-potential keyphrases that have a decent number of daily searches and relatively weak competition.

3. Ten Ways You Can Generate Quality Backlinks To Boost Your WordPress SEO

Getting a large number of high-quality backlinks to your site is absolutely essential if you want to move up the search engine rankings. This post highlights a number of useful places where you can obtain such links.

4. Ten Quick Power Tips To Drive More Visitors To Your WordPress Site

There are several ways in which you can tweak your WordPress site to help optimize it for the major search engines. This article covers ten different approaches that you can implement right now!

5. WordPress SEO Issues – Managing Duplicate Content Effectively

Duplicate content is a common issue with WordPress blogs – left untouched it can have a negative impact on your site’s rankings. This post describes how you can manage duplicate content effectively and reduce the potential risks.

6. Top Eight Free WordPress SEO Plugins

There are lots of great (free) WordPress plugins out there that can help automate a number of tedious (but necessary) SEO tasks. This posts highlights eight of the very best SEO plugins around.

7. Eight Tips For Promoting Your WordPress Site

This article isn’t specifically about SEO – it’s more about other methods that you can use to drive large amounts of traffic to your site. Implementing just a couple of these approaches can have a dramatic impact on the amount of visits your site attracts.

8. Great Tools For Analyzing The Impact Of Your WordPress SEO

Measuring the impact of your WordPress SEO efforts is of vital importance if you want to get a sense of what’s working and what’s not. This article highlights a number of useful tools that you can use to monitor and track the effectiveness of your WordPress SEO campaign.

I hope you find this guide useful and that it helps to drive lots more traffic to your site. Please leave a comment below if you have any feedback or if you think there are any important topics that I missed

You can earn 40% of each sale made by someone that you refer to the site – that’s $14 for each Premium WordPress theme that is sold and $4 for each HTML template.

There’s an Affiliate Control Panel (screenshot below) that you can use to monitor (in real-time) all the clicks that your links/banners have received, the number of sales you’ve generated, and the amount of commission you’ve earned.

There are also a range of banners available for you to use on your own site to help generate clicks and sales, along with instructions that you’ll find useful if you’re relatively new to affiliate marketing.

So, if you’re interested in earning some extra cash, you can sign up here – it’s very quick and easy to get started. If you have any questions regarding the affiliate program, please leave a comment below, or get in touch at support@vooshthemes.com.

Designing a portfolio template can be quite challenging – it’s tempting to include details of all the projects you’ve ever worked on – but this will potentially overload your visitors with too much information. It’s important to include only what’s absolutely necessary – for example, details of a subset of your best project work, advertising of your service(s), and making it easy for people to get in touch with you. Having a blog can also be useful for driving traffic to your site and for showing that you are active in the community within which you work.

The template that we’ll be creating In this tutorial will include several of these “features” – there are no overly fancy effects – just subtle ones that all combined create a nice and professional feel.

Here’s a screenshot of the template that we will be creating:

Step 1: Create A New Document

Create a new document with a size of 1100×2000. Then add some vertical guides at 70px and 1030px – that gives us a width of 960px which should easily fit on most screens.

Step 2: Create The Header

In the header we need to include the name of the portfolio owner and a subtitle that includes their job title/profession. The first thing that we need to do, however, is to create the template background. Add a Gradient Overlay to your background layer using the following settings (where the colors used are #EEEEEE and #FFFFFF):

In the Gradient Editor, move the white and grey boxes closer together:

This will then create a subtle grey-white gradient at the top of your template (see the screenshot below). To create the name, use the Myriad Pro font, set the size to 100px, the font weight to bold, the letter spacing to -50px, and the color to #333333. Then type some text and place it next to your left border.

Underneath that we want to add the job title – using the same font, set the font size to 60px, the color to #CCCCCC, and type some text. Position this directly under the name.

Step 3: The Navigation Section

To add the navigation links, change the font to Arial, set the size to 24px, the color to #333333, and type the different page names that will be included in the template. Separate each page name with a “~”. Also set the “Home” text color to #E86E14.

Underneath the text we need to draw a line – using the Line Tool, set the line “Weight” to 2px and the foreground color to #EEEEEE – then draw a line from the left border to the right.

Step 4: Add The Featured Text

Following the navigation section we need to include the featured text – switch the font to Myriad Pro, set the font size to 56px and the color to #222222. Type some text that covers two lines and place it around 60px under the navigation section.

Then select the second line of text that you added and set the color to #BBBBBB – you should end up with something like the following:

Step 5: Featured Projects

In the “Featured Projects” section, we need to add a title and three images that each represent a different project. Let’s start by creating the title – use the Myriad Pro font, set the size to 40px, the color to #333333, and the letter spacing to -50px – then type “Featured Projects”.

Next we need to add the three images – I’ve used some screenshots from some of the premium web templates available here at Voosh Themes, but use whatever is relevant to what you do. Ensure that these images are 300×300px in size and place them next to each other with around 30px space between them.

We now want to add a subtle drop shadow effect to make them stand out a bit. Use the following settings (where the color of the shadow is #CCCCCC):

Also add a stroke effect with the following settings (where the color is set to #DDDDDD):

This should result in something like the following:

Finally, create a copy of the line you added in step 3 and place it around 60px under the images (as can be seen above).

Step 6: The Services Section

In the services section we need to add a title, an image for each service, and some descriptive text. To add the title, ensure that you’re using the Myriad Pro font, set the size to 32px, the color to #333333, and type “Services Available”.

Underneath that we need to add details of the first service – let’s start by creating the image – add an image that has dimensions of 56×56px. I’ve again used some template screenshots just for the purposes of the tutorial, but use whatever you like here.

Add the following drop shadow effect to your image (where the color is #CCCCCC):

Also add a stroke effect with the following settings (where the color is #DDDDDD):

We now need to add some text to the right of this image – set the font to Arial, the font size to 14px, and the color to #E86E14. Type something like “Web Design and Development” and place it to the right of your image.

Underneath that we need to add a couple of lines of descriptive text – set the font size to 12px, the color to #555555, and type some dummy text.

Select the image and text and create two copies – position the services under one another and change the text and images to something that you’d like to display. You should end up with something like the following:

Step 7: Latest Blog Posts

The latest blog posts section is basically the same as the services section we just created – therefore, create a copy of everything in the services section and position it against the right border. Change the images and text to something more appropriate.

Following this we need to add a vertical divider between the two sections – so, using the Line Tool, set the line “Weight” to 2px and the color to #EEEEEE, and draw vertical line between the services and blog posts sections.

Step 8: Footer

Creating the footer is very straightforward – create a copy of the line you added in step 3 and place it below the services and blog posts sections. Then, using the Arial font, set the size to 12px, the color to #888888, and type something like “Copyright © 2010 / Steve Anderson / All Rights Reserved”.

Step 9: Conclusion

I hope you found this tutorial useful. As you can see, it’s not always necessary to use lots of fancy fonts and a wide range of color and images to create a nice design. Remember that you can check out the live demo if you want to take a closer look at the template – you can also download the template from the Sanura features page.

The theme has a clean design and comes with a wide range of templates that you can use to create a professional online presence. The download file includes all of the source code, the fully layered PSD file, and instructions about how to install and configure the theme.

You can find an overview of the individual page templates and features below along with screenshots – there’s also a live demo of the theme available:

Stylish Front Page

Sanura comes with a custom front page template that allows you to display some of your best work. In particular, there’s a “Featured Project” section where you can highlight a few different projects through use of some images/screenshots.

There’s also an area towards the bottom of the front page for highlighting the services you provide, as well as your most recent blog posts.

Portfolio Page

Sanura also comes with a portfolio template where you can easily display a wide range of different projects that you have worked on.

Project Page

In addition to the portfolio page, there’s also a “Project” template where you can display screenshots/images related to a project along with some further details about the work you undertook.

Blog

The blog design that’s included with Sanura has a very clean and minimal style where the focus is purely on your content. The comments section supports threaded comments and the use of gravatars.

Fully Functional Contact Form

Sanura also comes with a fully functional contact form that includes error checking functionality. Configuring this form is very straightforward and full instructions are provided with the theme.

Theme Options

Sanura includes a number of options that you can use to configure the theme to your specific requirements. These include details that are displayed on the front page, the ability to choose between six different color schemes, specifying the contact details you want to display on the site, and Google Analytics support.

Check out the Sanura Features Page for more details about the theme.

Before we get into the details, let’s first consider what we need to include in such a design. I’ve discussed this before in a previous article (9 Essential Tips For Creating A Single Page Portfolio Website), but some of the key things you’ll want to incorporate are a section that includes some background information about yourself, details about the services you provide, examples of previous work/projects, and a means for people to get in touch with you.

Achieving this successfully without overloading users with information requires quite a bit of thought and effort. It’s imperative that no space is wasted and that only absolutely essential details are included in the design – keeping everything very clean and simple is of particular importance in single page designs.

Here’s a screenshot of Kazuko – the template that we’ll be creating:

Step 1: Create a New Document

Create a new document with a size of 1100×2000. Then add some vertical guides at 70px and 1030px – that gives us a width of 960px which should easily fit on most screens. Set the background color to #EEEEEE (a light grey).

Step 2: Add The Header

In the header we need to include the name of the portfolio owner and the job title/profession. To create the name use the Myriad Pro font, set the font size to 92px, and the color to #222222. Type your name and then add a drop shadow effect with the following values (set the color of the shadow to #CCCCCC):

Position your text against the left border – it should look like the following:

Next we need to add the job title – using the Myriad font again, set the font size to 34px and the color to #AAAAAA. Type some text and then position it against your right border.

Step 3: About Me

In this section we need to add an “About Me” and a “Get In Touch” section that includes some basic contact information. Start by creating a line below the header section – using the Line Tool, set the weight to 1px, the color to #CCCCCC, and draw a line from the left border to the right. Do the same again, but add a white line (#FFFFFF) and place it directly underneath the first line you created.

Now we need to create the “About Me” area – using the Rectangle Tool – set the color to #CCCCCC and draw a box that has dimensions of 154×154px. Then import a photo that is 146×146px in size and place it on top of the box you just created.

Now we need to add the details that go to the right of the photo – set the font to Arial, the font-size to 20px, and the color to #555555. Type “About Me” and align it towards the top of the photo. Next we need to put some dummy text under this title – keep the font as Arial, change the size to 12px, and type some text.

The last part of this section is to create the “Status” text – set the font size to 16px and type something like “Status: Taking On New Projects”. Set the color of “Status:” to #555555 and the text after that to #888888. You should end up with something like the following:

Step 4: Contact Information

The Contact Information will go to the right of the About Me section – we first need to create a vertical border to divide the two sections. So, using the Line Tool, set the color to #CCCCCC and draw a vertical line around 150px in height – do the same again, but this change the color to #FFFFFF and place it directly to the right of the first line you created. Position this line about 40px to the right of the About Me text:

To create the section title, use the Arial font, set the size to 20px, the color to #555555, and type “Get In Touch”. Underneath that we need to add some dummy text – set the font size to 12px and type some text. We then need to add our email address and phone number – set the font size to 16px and type “Email: your@email.com” and “Phone: 01234 567 890″. As with the status in the previous section, set the title (i.e. Phone and Email) colors to #555555 and the text after that to #888888.

Finally we need to create a border at the bottom of this section – create a copy of the horizontal lines you created at the start of step 3 and place them about 35px underneath the photo.

Step 5: Portfolio Screenshots

Now we need to create the portfolio screenshots/images – using the Rectangle Tool, set the color to #CCCCCC and draw a box that’s 310×210px in size. Copy this box five times – position them so that you end up with two lines of three boxes.

You then want to place some images/photos/screenshots inside the boxes – I’ve used some screenshots of the web templates available here at Voosh Themes, but use whatever is relevant to your portfolio. Ensure that the images you use are 300×200px in size.

Again, we need to place a border at the bottom of this section – create a copy of the line you created in step 3 and place it underneath the images you’ve added (as can seen in the screenshot above).

Step 6: Create A Services Section

To create the services section we firstly need to add a title – using the Arial font, set the font size to 20px and the color to #555555. Type something like “Services Available” and place it under the line border that you just added. Underneath this title we need to add a section for each service that includes a title and some details about that service.

To create the title, set the font to Arial, the text size to 16px, the color to #555555, and then write something like “Web Development”. I’ve also used a tick icon (search IconFinder for some tick icons) and placed it to the left of this text. Underneath that we need a few lines of dummy content – set the font size to 12px and type some text.

Create two copies of the tick, title, and text – and then place them next to each other. Then place a line border underneath the dummy text that you added – you should end up with something like the following:

Step 7: Testimonials

To create the testimonials we need to create an image with a border and place some text next to it. Select the Rectangle Tool, set the color to #CCCCCC, and create a box that’s 84×84px in size. Then, in a layer above the box, add an image that is 78×78px – this might be a photo of the person providing the testimonial or a company logo (or something else that’s relevant).

Next we need to place some text next to the photo – set font to Arial, the font size to 12px, and the color to #555555. Type a couple of lines of text – then underneath that enter the individual’s name and on a separate line add the name of their company/affiliation. Set the font weight of the name to “bold” – set the color of the company/affiliation to #035AA6 (with a font weight of “regular”).

We now need to create two copies of the photo and text and then place them underneath each other. Finally, we need to add a vertical line border like the one created in step 7 – however this time it needs to be larger (set the the height to around 360px). Place it to the right of the testimonials:

Step 8: Contact Me Form

To create the contact form we initially need to add the title – set the font to Arial, the size to 20px, and the color to #555555. Type the text “Contact Me” and place it to the right of the vertical border you just added. Underneath that we want to include a brief message, so change the font size to 12px, and write some text. You should have something like the following:

To create the first input field, select the Rectangle Tool, change the color to #FFFFFF, and draw a rectangle with dimensions of around 250×35px.

We then need to add some effects to this rectangle – start by adding a drop shadow with the following settings (where the color is set to #CCCCCC):

Then add a gradient overlay (where the colors you go from #EEEEEE to #FFFFFF):

Finally, add a stroke using these settings (where the color is #CCCCCC):

You should end up with something that looks like the following:

We now need to add some text in the box – so set the font size to 12px with a color of #888888 and type “Name”. Place this text inside the box. You’ll then want to make a copy of the rectangle and text to use for the “Email” input field – place these under the “Name” input box and change the text to “Email”.

Next, we need to add the larger text area – we do this in exactly the same way as above, but instead the box needs to be wider and higher – set the dimensions to something around 365×125px. Then apply the same drop shadow, gradient overlay, and stroke effects detailed above.

To finish we need to create the blue submit button – select the Rounded Rectangle Tool, set the “radius” to 6px, and draw a small button that’s around 100×30px in size.

We then need to apply a couple of effects – add a bevel and emboss effect using the settings below (where the color is set to #888888):

Then apply a gradient overlay using the following settings (using the colors #035AA6 and #1D89E7):

Finally, we need to add some text in the box – set the font to Myriad Pro, the size to 12px, the color to #EEEEEE, and write in uppercase “SEND MESSAGE”.

Step 9: Create The Footer

The final thing that we need to do is add the footer – this is very simple – copy the horizontal line border that we created in step 3 and place it just below the testimonials and contact form. Then, set the font to Arial, the size to 12px, and the color to #888888. Write something like “Copyright © 2010 / Steve Anderson / All Rights Reserved”.

Conclusion

I hope you found this tutorial useful – remember that you can check out the live demo if you want to take a closer look and download the template from the Kazuko features page.

The design includes a header where you can add your name, job title, and some contact information. Below that you can display some screenshots/images of featured projects – clicking on the images results in an animated effect that displays a larger screenshot.

Underneath that there’s a section for including some details about the services you offer and an area for displaying some testimonials. A fully functional contact form is also included that enables your visitors to email messages to you (this is very simple to configure).

Check the out Kazuko features page for more details and screenshots – there’s also a live demo that you can view to get a feel for how it looks.