Wasting time is so old-fashioned. It also means you’re wasting money! So, let’s review some ways that you can automate and systematize your Photoshop workflow. And be sure to download the project base for all of your new designs!

File Tree & Re-usable Project Base

The first step in systematizing your workflow is to organize your files. Identify all common elements you use within your designs.

You may come to a list such as the following:

• Home Page template
• About Page
• Contact Page
• Services Page
• Fonts
• Assets

The Project Base

Consider how your final deliverables are used. If they are shipped to a coding business, be as organized and thorough as possible, including notes and fonts where applicable.

You can ensure that you have perfectly organized themes by creating a package that allows you to “fill in the blanks”, so to speak. Simply copy this folder, assign it to the project by renaming it to the project and get working. This is a very simple and efficient way to work, and means that websites you built four years ago can easily be edited, because everything is packed into its very own place.

Download the Project Base

In the zip file, you’ll find a simple re-useable template starting point. This file contains elements such as dividers, buttons and a pre-gridded template to speed up your design workflow.

See how simple starting a new project is now? It may take a couple of minutes to set-up, but the time saved later is more time for you to be doing what you love best – designing!

Now that we have a solid base to build upon, we can starting filling out our ‘boiler-plater’ with specific files and concepts.

Web Template

The sample template will allow you to create a page of your most used elements, ready for quick inclusion in your latest project.

If you’re a web designer in particular, you’ll find that a lot of your projects, even those different in every possible way – use and re-use common elements.

Begin by building a few re-usable templates. Don’t worry about which elements you wish to include just yet, because you can always go back and look at your previous projects and analyze more popular features – then re-create them here.

Personally, I use just one template. I have a home page (this contains elements such as news bulletins, blog post stylings, menus, logos and call to actions). I can modify this template to suit blog pages, buy it now forms and more.

The page also has a 960.gs pre-applied. This has been included for download at the end of the article, in the template boilerplate.

Once you’re set-up with this concept, you can build designs very quickly. However, you should definitely consider developing your own, and tailor it to your clients and team. You could go further by adding icons, search elements and online store related items – anything to suit your client base.

Grouping & Organizing

The above image demonstrates the tangible difference between an organized layer palette, and a messy one!

When you’re in a real creative flow, it can be difficult to stop and start naming and grouping layers. Photoshop doesn’t really help in this area by default either!

So, take the time as you go to name and group layers. This will help you later when coding the design, or if you ship if off for coding elsewhere.

Name each layer, and try to use a descriptive and short word – such as ‘menu’ for the navigation. Group specific areas, such as the header or a contact form.

This has a two-fold benefit.

1. You can toggle whole areas (or the whole design) on or off in order to work on the background or other elements.
2. You can move sections of a design without the need for moving each element. This can save hours per project!

So, take the time to stop every five minutes or so, and name and group each element. You’ll be glad you did!

Make good use of the select tool! You can toggle the select mode between layers and groups. This facilitates mass updating and re-aligning designs, so don’t forget it!

Actions

If you don’t use actions in your work-flow, then you should begin using them immediately.

Photoshop actions are entirely configurable lists of actions Photoshop should carry out automatically. You can create your own, or choose from the bounty available online. If you work on Photographs for example, and have 400 pictures to edit and resize, this would take a long time. Instead, you can create an action that adjusts the contrast, alters the size and then saves the file in .jpg format, blasting through 400 files in seconds! You must use actions!

If you do not have the knowledge, or experience to create your own actions, GraphicRiver has a large selection of actions available for purchase from $1!

The actions on sale range from simple photo effects to this action which can add various pre-formatted text sections such as contact details or blog posts in seconds.

Start using Actions and you will notice a significant increase in your productivity and reduce the amount of times you need to repeat monotonous tasks over and over.

Creating and Using an Action

Making your own action is easy. As an example, we’ll create a simple action to re-size several images at once, then save them.

First off, you need to hit the new action button, on the actions palette.

You shouldn’t need to change any settings as standard, bar changing the name for better organization. Photoshop is now recording your actions. So, all you need to do is re-size the image. Go to image size, and alter the dimensions. The action will change any image to these dimensions. Then hit save.

Finally, press stop on the action palette.

Now, when you press play on the action you’ve created, Photoshop will follow the list of defined actions on your image. Although very simple, an action such as this one could save you hours of monotonous resizing photos and images. This is only a very simple look at actions. They can do so much more, so take your time to get to know them and really use them. The beauty of them is in how you can record basically any action in Photoshop – selecting, changing styles, transforming, re-sizing and saving.

iPhone & UI Design

Do you work with user interfaces? If so, you really need to download a GUI element pack for Photoshop.

There are many available for most popular operating systems and mobile platforms.

For example, if you work with the iPhone, you can download the iPhone GUI pack that contains all elements available in the iPhone interface library, and then simply start designing your app. Simple, quick and much easier than attempting to create these from scratch.

Android GUI Kit

http://www.smashingmagazine.com/2009/08/18/android-gui-psd-vector-kit/

Teehan Lax Kits

The agency, Teehan Lax have several high quality, life-like UI kits. These are great for building an iphone app sales site, or designing the actual UI of an app. Kits are available for the iPhone, Palm Pre and Browsers.

Palm Pre

http://www.teehanlax.com/blog/2009/07/08/palm-pre-gui-psd/

iPhone

http://www.teehanlax.com/blog/2008/11/06/iphone-gui-psd-update-13/

Browser Elements

http://www.teehanlax.com/blog/2008/12/16/browser-form-elements-psd/

Conclusion

I hope we’ve given you some tips that you can use to improve your productivity and efficiency. Photoshop is a wonderful tool, but, if we’re not careful, we can find ourselves repeating the sames tasks over and over. So be sure to implement the above tips and start saving time, money and your sanity!

Download the Project Base

Do you have any Photoshop time-saving tips? Have any ideas on other tasks that could be automated to save time and repetition? Feel free to share them with the community via the comments.

Other Viewing Options

• MP4 Version (!ads)
• iTunes/Downloadable Version

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.

In Depth Video Training

Final Design

Join Tuts Plus

For those unfamiliar, the family of TUTS sites runs a premium membership service called “TUTSPLUS”. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!

• Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.

In this video quick tip, we’ll learn how laughably simple it is to do this with a touch of jQuery, and the resize() method.

By utilizing jQuery’s “resize()” method, we can easily listen for when the user changes the width of their browser window.

function checkWindowSize() {

	if ( $(window).width() > 1800 ) {
		$('body').addClass('large');
	}
	else {
		$('body').removeClass('large');
	}

}

$(window).resize(checkWindowSize);

Then, subsequently, we target our desired CSS properties accordingly.

#container {
	width: 800px;
	height: 1000px;
	background: #e3e3e3;
	margin: auto;
}

/* Change container size for larger windows. */
.large #container {
	width: 1000px;
}

#nav {

	width: 100%;
	height: 100px;
	border-bottom: 1px solid white;
	background: #999999;

}

.large #nav {
	float: left;
	width: 200px;
	border-bottom: none;
	border-right: 1px solid white;
	height: 1000px;
}

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.

But – in five minutes, I’ll try to simplify the process of working with custom fonts as much as I possibly can. Services like Font Squirrel help to make the task a cinch!

Final CSS

@font-face {
font-family: 'blok-regular';
src: url('type/Blokletters-Potlood.eot');
src: local('Blokletters Potlood Potlood'),
 local('Blokletters-Potlood'),
 url('type/Blokletters-Potlood.ttf') format('truetype');
}

@font-face {
font-family: 'blok-italic';
src: url('type/Blokletters-Balpen.eot');
src: local('Blokletters Balpen Balpen'),
 local('Blokletters-Balpen'),
 url('type/Blokletters-Balpen.ttf') format('truetype');
}

@font-face {
font-family: 'blok-heavy';
src: url('type/Blokletters-Viltstift.eot');
src: local('Blokletters Viltstift Viltstift'),
 local('Blokletters-Viltstift'),
 url('type/Blokletters-Viltstift.ttf') format('truetype');
}

h1 { font-family: blok-heavy, helvetica, arial; }

Notice how we’re referencing both an .eot and .ttf font? This is because, of course, Internet Explorer only uses its own format, that has yet to truly catch on. As such, we must first import that .eot file, and then move on to the different formats for Firefox, Safari, etc. It’s essential that you load the .eot version first.

Next, we search for the font on the user’s computer by using the “local” attribute. If it’s unfound, only then do we pass a url that will load the font.

Why Doesn’t IE Try to Load the TTF Fonts?

This was definitely a concern. If Explorer can’t work with the truetype format, we don’t want to waste time trying to download the font. Luckily, because of all those local attributes, and the commas, IE won’t understand any of it. As such, it will simply skip the line all together, thus, only utilizing the .eot version.

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.

In this first part, you’ll learn how to design a neat-looking website that you can easily adapt to your business. It’s time to get started!

Step One – What We Will Be Making

I suppose you might want to know what our design will look like once finished. I’m not going to make you wait any longer; here is what we will be building throughout this tutorial.

The reasons this design will be fairly appealing to your readers are:

• Usability, user-friendliness.
• The “living” atmosphere, with the picture and shadows.
• Content-centered, the layout doesn’t take the reader’s attention from the useful information
• The blog and twitter integration creates a closer relationship between the reader and your company.

Step Two – Structure

Something utterly important when starting the design of a website is to define a clear structure that you will follow no matter what. The first reason this is important is because you want your content to be as visible as possible, and not lost in a messy layout. The second one is that you’ll want to guide your reader’s eye through all the information contained on the page. The human mind will start reading a web page from the top left and will scan it all the way down to the bottom right. For that reason, putting a sidebar at the left of your content could distract your reader and in a worse-case scenario, even lose him.

I’ve chose the following structure for this design:

There are a few reasons for which I chose such a structure:

• As I’ve already said, it’s content-centred.
• It has a professional website feeling to it; it doesn’t look like a blog.
• It is not actually complicated to code!

Step Three – Getting Started

In this tutorial, I’ll be using Photoshop CS3 on Windows Vista, but you should be able to follow it with any CS version of Photoshop, since the techniques used are fairly easy. I’ll be sure to point out differences between Windows and Mac too, if there are any.

That being said, let’s get started! We are going to start with a blank document of 1600 by 1200 pixels, with a transparent background, a resolution of 72ppi and RGB 8 bit in Colour Mode should do just fine.

You may ask yourself why I’m using such a wide document. The reasons are simple:

• It gives you spaces to work, and hence doesn’t look cluttered.
• It shows you do care about widescreen resolutions when designing, which many web designers don’t.

Step Four – Setting Up Our Workspace

You’ll realize while reading this tutorial that I am somewhat of a guide geek. I simply love having rulers to guide me in my design process. You should therefore start by displaying rulers. Go to View->Rulers or simply use the shortcut Ctrl/Cmd + R. Make sure they are displayed in pixels by right-clicking on a ruler and choosing “Pixels” from the list.

Next, we will set up some vertical guides. Activate Snap (View->Snap or Shift + Ctrl/Cmd + ; ), and start by putting a guide at 800 pixels. This is where the snapping comes in handy because it “magnifies” the guide to the centre of the document. We will also need guides at 400px and 1200px. Why so? Well simply because 1200 – 400 equals 800 and that we want our design to display properly on 800*600 screens too.

The last thing we need to do is to set horizontal guides at 450px for the middle, and 300 and 900px for a top and bottom margin.
I usually also set guides at the edges of my document to grab the corners more easily.

This leaves us with a coherent grid layout that we will be able to develop for our design.

In this case I have just coloured our otherwise transparent background so that you can see the guides better.

Step Five – The Status Bar

We will start our design from the top and then design our way down to the footer. This ensures minimal issues with vertical spacing.

I like keeping things organized in my PSD, so we are going to start by creating a new Layer Group called Status Bar, in which we are going to keep all our layers related to this bar.

The Shape

Before going any further, we obviously need to make our background ready. We want it to take up the entire width and have a height of 50px. That’s why we are going to place a new horizontal guide at 50px.

Then, in a layer group called Box, create a new rectangle with the Rectangle Tool (U). The colour of this rectangle should be #f8f8f8, which is a very light gray, and not as bright and tiring for the eye as white.

The following step concerns the border. We want to separate this bar from the rest of the design, so a bottom border is appropriate here. Create a new layer called Border then grab the Single Row Marquee Tool, hiding under the Rectangle Marquee Tool (M), and select a line right under the shape we recently created. Fill the selection with #959595 using Alt + Backspace. Then go to Select->Transform Selection and hit the down arrow once in order to make the selection shift down by one pixel. Now fill it with white (#FFFFFF). This makes a pretty nice beveled border:

The final step is to add a little shadow to create some volume. Create a new layer called Shadow and add a clipping mask between the Background layer and this one using Ctrl + Alt + Click between those two layers. Grab the Gradient Tool (G) with a linear gradient from black to transparent, and make a 15px high gradient starting from the bottom of the box. Set the layer’s opacity to 15%.

Welcome Message

Now that our box is created, we can start populating it with some text and other useful things. We will start with the welcome message. In the Status Bar layer group, create a new layer called Welcome.

Now, with the Type Tool (T), and starting at 400px from the left border, we are going to write our message. Be sure to centre the text vertically within the box as well.

The font I’m using is:

• Arial Regular
• 12px
• Smoothing: none
• #515151

This will be our default paragraph font.

Actions

Let’s get done with the action bar. I like using such a bar in my web designs because it’s a place where you can place elements that just don’t fit anywhere else.

Create a new layer group called Action bar, in which we are going to draw a Rounded Rectangle (U). It should be 30px high to leave 10px margin top and bottom and wide enough to wrap our links. Make it 55% opaque and align its right border to our centre guide.

Next, just write some links that would be relevant for your site. I chose login, sitemap, and license.

Notice that I’m still using the same Arial font with a white colour.

Search Box

A very important feature of this top bar is the search field. I’ve chosen an Apple-like form because I think it looks very smooth, and it’s actually very easy to design as well.

Start with the Rounded Rectangle Tool (U) with a radius of 10px, and make a shape that is 20px high in order to make the edges look perfectly round. Name this layer Field and put it in a new layer group called Search Box, align it with the 1200px vertical guide, and add the following layer styles:

Then, using the Custom Shape Tool (U), and the Magnifier Glass shape from Web.csh (which is a default shape but that you may have to load), make a little icon inside the field in order to show what the field is for.

Finally, type the word “Search” in the field using Arial and the dark grey we used for the welcome message.

That’s it! We’re done with the Status Bar, you can fold in all the layer groups to make our layer palette cleaner.

Step Six – The Header

The most important aspect of a web design is probably the header. That’s the place where you can unleash your creativity and make your website look astonishing. However, your header also needs to display a logo or a text bloc with the name of your company.

I’ve decided to use a picture as my header for this design, because it’s easy and fast to make, and it looks just brilliant. I found this great picture over at stock.xchng, but feel free to select your own. The great thing with using a picture as a header is that you can totally change the feel of your website just by changing the image. You can even have a different image on each page!

Adding the Image

First, we’ll need to create a new layer group called “Header”. In that group, using the Rectangle Tool (U) and the guides that we drew earlier, make a shape between 50 and 300px high. This is going to be our box. Then import your image into your document using drag & drop. Resize it, and create a clipping mask between the image and the shape.

Notice how we already have this really cool look to our design?

Logo

You should obviously put your own logo here, but for the purpose of the tutorial, we’ll just make an easy one using some typography tricks.

I’m going to use the font Myriad Pro, which should be installed on your computer with Photoshop CS. If not, you can try to find another cool font because Myriad is unfortunately very expensive.

Using this font:

• Myriad Pro
• 48px
• #4d4d4d
• Smoothing: Smooth

I’m writing the name of a ficticious company: Roadside. This layer is aligned to the 400px vertical guide.

Next, the subheading “Studio” is going to be written underneath it. I’m still using Myriad Pro, but this time with the following settings:

• 12px
• #6ebacd
• All-Caps
• Bold
• Letter-spacing: 2300

This makes the subheading the same width as the company name, without taking too much attention from the reader. To keep things organized, I’m putting this into a layer group called “Logo”.

Now that we are done with the header, let’s get started with the huge part of the tutorial, the content!

Part Seven – The Content Box, Wrapper, and Tabs

To make the content box, we need to decide how high the footer should be. I think 100px is good; not too high nor too small. We don’t need to write a whole lot of text, so 50px is enough. Then we also want the bottom of the image to make the footer less boring. We’ll give that 50px too.

We should therefore put a new horizontal guide at 1100px. To keep things tidy, create a new layer group called Content too. I’ll explain later why keeping the PSD clean is very important, but for the moment, you’ll just need to believe me when I tell you it is.

The Box

Create a new Layer Group called Box, and using the Rectangle Tool (U), and the same light gray that we used for the Status Bar (#f8f8f8), draw a rectangle going from 300px to 1100px high, taking all the space horizontally.

Next, we need to create borders. We are going to use the same borders between the content box and the image that we did between the status bar and the image. Instead of doing the whole selection thing again, just fetch the Border layer in the Status Bar / Box layer group, duplicate it twice using Ctrl / Cmd + J, and call those two layers Border top and Border Bottom. Then put them in the Content / Box layer group. You can leave the Border Bottom layer as it is, and just place it at 1200px high; however, you’ll need to flip Border Top vertically to have a consistent border around the image. Enter Free Transform Mode (Ctrl / Cmd + T), right-click the box, and select Flip Vertical. Put the border at 300px high.

The final step is to add shadows to the top and the bottom of the box. We are going to do the same thing we did before for the shadow; create two layers over your Shape, Shadow Top and Bottom, and add a clipping mask between them. Then grab the Gradient Tool (G) with a black to transparent gradient, and make a 15px gradient on each layer. The layers should be 15% opaque.

Page Wrapper

Instead of starting with the tabs and the navigation menu, we’ll just make the page wrapper first in order to set the width and have something to go after.

We want 50px between the header and the tabs, to make the design breathe. The tabs are going to be 35px high. We should therefore set up some guides (yes, again!) at 350 and 385px. To even things out, the page wrapper is going to be 365px high, so we’re putting our last guide at 650px.

Next, create a new layer group, “Wrapper” in our Content group. This is where we are going to put our layers now. You also need three layer groups inside it: Box, Slideshow, and Message.

Out vertical guides will now come in handy. Using the Rectangle Tool (U), make a white (#ffffff) rectangle in the newly defined box. Then add the following layer styles to it:

This is what it should look like:

The Slideshow

Let’s start with the slideshow. Slideshows, carousels, sliders, or whatever you want to call them, are an effective way to display a lot of pictures, diagrams, or any other media in a very small box. It’s fairly easy to set up in a website, and with some smooth JS effects, it does look really cool! That’s why I like slideshows very much.

But before we begin with the content of the page wrapper, make 15px worth of padding around the box (yes, you should use guides). We also want to cut this wrapper in two parts; one with the carousel, and one with the little text box. Luckily, our 50% width guide does this for us. However, we don’t want the text and the slider to be right next to each other, so we should set 15px padding on each side of the middle of the box.

This is what it should look like:

As you can see, the 50% height guide separates our box in two vertical boxes too. Let’s take advantage of this. Here’s what the structure of our box will be:

Now we can really start building the slideshow. Make a black rectangle covering the entire Image box (Cf. Illustration), then add a 1px inside stroke with the colour #a7a7a7. Next, create a new layer called “Image” over your rectangle and add a clipping mask between them. You can now import the picture you want, resize it, and make it look good. I’m using one of my web designs that you can find here if you want to use it for the purpose of the tutorial. In a live website however, you should obviously use your own.

Now we need to create our command panel. Using the Rounded Rectangle Tool (U), with a radius of 5px and a black colour, create a box that’s 30px less wide than your image. Make sure to hide the rounded corners at the top behind the image. Set the layer’s opacity to 55%. Considering I’m a Layer Group maniac, I’ve created a new one called Commands, which I put behind our image layer.

Then, using the Polygon Tool (U) with three sides, make two triangles to act as your previous and next commands, then, with Arial 12px white, write the title of your image.

Great! Now we’re done with the slideshow. Notice how it is extremely simple, nothing distracting from the image. That’s what I meant with content-centred and not layout-centred.

The Message

Before we go any further, we should just add a separator between our two blocks. As I said before, the middle of the document cuts the box in two equal parts, but we still want to emphasize that using a 1px border. Create a new layer called Separator, and then use the Single Column Marquee Tool to make a line at 900px wide. Fill it with black, and use the Rectangle Marquee Tool (M) to clear the exceeding parts of the line. Set the layer’s opacity to 30%.

Ok, now that we’ve done that, we have to find a catchy headline for our welcome text. The title here will obviously depend on what kind of website you are building. I chose to design a layout for a web design agency, so I’ll just put “We build great websites!”. Yes, I know it does sound a bit over-confident, but the thing is it does push the reader to look further into your site.

This heading will be the second element visitors will see after the logo, so we have to make it stand out. I’m still using the font Myriad Pro for my headings:

• Myriad Pro Regular
• 24px
• Smooth
• #6eb9cc

This will be the default heading font.

Notice how the colour we use is the same one that we used for the subheading in the logo?

Use our guides to place the heading with the correct padding.

I’m not going to bother with the text right now, since this is more about the design than the content. So, I’ll just use a simple Lorem Ipsum placeholder text.

A few details about text in web design: Don’t forget that text is ugly. Text makes a web design look cluttered, and difficult to read. To prevent this, we will need to make our text look nice. A trick for doing this is to have as little text as possible, to keep the paragraphs short, and to use 1.5x line spacing. This last tip makes your text look friendlier and more readable than a single line spaced text.

Click and drag with the Type Tool (T) in order to create a text box, and then fill it with some random text. I’m using my paragraph font, Arial, here:

• Arial Regular
• 12px
• Line-spacing 20px
• #4d4d4d

The following step will be to add some contact information. It is a good idea to provide this on your home page, considering it creates a closer relationship with your client, showing that you’ve got nothing to hide.

To emphasize this information, we’ll use two of Photoshop’s default custom shapes: the phone and the letter from the file objects.csh.

Start with your phone number. Grab the Custom Shape Tool (U), and select the phone shape. Using the colour #7d7d7d, draw a small phone centred on the 600px guide, then using our Arial font, enter your phone number. I decided to put this in a new layer group called “Contact Info”.

On the same line, do the same with your address. Since an address is rather long, I decided to split it on several lines, but you can decide to keep it on a single one if it fits your needs.

M’kay, now that this welcome page is done, let’s make our tabbed navigation menu.

Navigation Bar

I chose tabs because I think it’s a great way to display pages with. It feels really straight forward and natural because of the fact that we are used to flicking through tabs in real life. I also decided to include previous and next commands. This may not be relevant to your site, but in this case, your reader will land on this welcome screen, then he might want to go and take a look at the portfolio, then read something about the company, and finally contact us if he is interested in our services. To make this process more easy, next and previous are really handy.

We’ll need to create a new layer group under the “Box” layer group before we get started. Call it Tabs. To make things tidier, I’ll just create a new layer group for each tab too, respectively Previous, Home, Portfolio, About, Contact, and Next. We won’t type any text right now. Instead, we will just create the structure. To give you an idea, this is what it will look like once it’s finished:

Let’s start with the right side. Grab your Rounded Rectangle Tool (U), with a black colour and a radius of 5px, and then make a little nice rounded rectangle at the top right edge of the content box. Hide the rounded corners at the bottom behind the box. Don’t forget that you want the top of your tabs to be 50px under the header image, so use the created guide to help you.

We’re not done yet. We need to get rid of the rounded corner on the left. To do so, use the Convert Point Tool, hidden under the Pen Tool (P), click on the path to make the anchor points appear, then, with the Delete Anchor Point Tool, delete to two anchor points at the extreme left. Photoshop will try to compensate this by dragging the handles and this will create a weird shape. Just grab the Convert Point Tool again, and click on the two remaining anchor points on the left to reinitialize the handles. Review the animation below to make things clearer:

Great, now we just need to set the opacity to 55%. The next step is to add the rectangles for each page. Don’t forget to put it in the correct layer group. You should obviously use the Rectangle Tool (U), with a black colour, and then set the opacity to 55% as well. Leave some margin between each rectangle too to make things cleaner. This is what you should have now:

The last part of the structure is the previous button shape. You’ll need to use the Pen Tool (P) for this one, so go ahead and learn how to use is it if you don’t already. It’s not a waste of time: the Pen is probably Photoshop’s most powerful tool.

If you know how to use the Pen Tool (U), draw a shape like this one:

Then place it in the Previous layer group, and on the left side of the current shapes.

For the links, I’m using Myriad Pro again, this time size 14, and #f6f6f6 as colour. Since “Home” is our current page, we are going to set its weight to bold in order to emphasize it. I usually show the hover effect in the menu as well, so that explains why we should put the “Portfolio” link in blue #6eb9cc. The links are obviously centred to give it a nicer look.

Now, using the same technique that we used to create the slideshow commands, we should now create two arrows, one pointing left, and one right, to symbolize Previous and Next. Make your Polygon Tool (U) burn!

This looks great! However, it does look a bit weird to have the blue link all alone. To symbolize the fact that it is a hover effect, we’ll just add a cursor over the link. You can grab this one:

This is what your finished tabbed navigation menu should look like:

It does look pretty neat doesn’t it? Believe it or not, we are now done with the Wrapper. This was the more “corporate” area of our design. What we are going to do now is the more entertaining part, I’m talking about the blog module and the twitter module.

Step Eight – The Blog Module

We will need to set up a few guides here as well. To keep consistency in our design, we will have a 50px margin between the wrapper and the modules. This makes us place a guide at 700px high. We also need a new layer group inside the content layer group called Module 1 – Blog.

I’m a huge fan of icons in web design. It adds a little extra something that gives a nice overall feeling to the design. However, the icons we use have to be relevant for the content, and should fit the rest of the design. For this tutorial, I chose Crystal Project by Everaldo, which is a huge icon set under LGPL license, which allows us to use them wherever we want without having to pay. And the best thing about this is that they are simply gorgeous! You can reach them here.

Once this is downloaded, we need to find an icon that suits our needs. We want something reflecting the idea of blog, news, or updates. In my opinion, the news.png icon from the mimetypes folder does this more than well. I chose the 64*64px size, which is just the right size for our design.

The Header Bar

Great, now import it into your document by Drag & Dropping it. Resize it a little bit, if you find it necessary. I don’t find it too big, so I’ll just keep it like so. Align it with the intersection of the 700px high and 400px width guide.

Now we need to give our module a header. Instead of using Myriad Pro here, which was our convention for headers, we’ll use Arial. Why? Well I think it looks better. But in order to make it look like a heading, we’ll add a black rounded rectangle behind the text.

Grab your Rounded Rectangle Tool (U), with a black colour, and a radius of 5px, and make a rectangle that is about 30px high and that stops 15px before the middle of our document. We’ve already got a guide there, so there is no need to add a new one. Hide the left corners behind the icon to show that the icon is related to the entire block, and finally set the layer’s opacity to 55%.

Now we just need to add our text. I think making this blog and twitter area a little more intimate is a good idea. So instead of writing something like “Latest News”, we’re going to write something a bit longer and more personal: “Latest entries from our blog”. Use this font:

• Arial Regular
• 12px
• #f6f6f6
• Smoothing: none

And write our text. Be sure to offset it a little bit from the icon to keep things spaced. I decided to put those layers in a layer group called Header Bar too.

Entries

Now we need to populate this module with a few entries. The good thing here is that we just need to create one, then duplicate it and just change the text.

Start by putting a vertical guide at 445px. This adds an extra 15px margin to our block, which shows that the header actually contains the entire entry section, and not just a simple link.

I’m going to use a lipsum placeholder text here as well, but you can use an existing entry from your blog if you’d like.

For the title of the entry, I’ll use our heading font, with a smaller size however:

• Myriad Pro Regular
• 18px
• Smooth
• #6eb9cc

We are not going to offset this the entire way to our recently added guide at 445px. Instead, we’ll start typing at 430px, and offset the content of the entry to 445px. Place it 15px under the header bar.

Then we need to add some meta info such as the author and the date. This is not very important information, so we’ll type it in a small font:

• Arial Regular
• 10px
• Smoothing: None
• #707070

To make our entries a little more condensed, we’ll just put this info on the same line as the title. I just chose a random name and date here.

Align this text to the right.

For the content of the entry, we’ll just put a few descriptive lines to keep as little text as possible on the screen. This text should be offset to 445px. Using the Type Tool (T) we can make a paragraph bloc to make thing easier for us. The font I’m using is:

• Arial Regular
• 12px
• Smoothing: none
• #525252

As you may have noticed, I put those three layers, Title, Meta, and Content in a layer group called “Entry 1″. This will make things easier for us since we will just duplicate it two times by dragging them over the “New Layer” button. Rename those groups”Entry 2″ and “Entry 3″, respectively, and place them one under each other. You should obviously leave some margin between them, but just not too much or it will look weird. This is what you should have:

You’ll have to agree that it does look pretty awkward with the same entry three times. To change this, just generate some new Lipsum and place it there.

Read More Button

What if the reader actually wants to visit the blog, you might ask. Well the first thing is that the titles will be links in the coded design. If your reader just wants to go to the home page of your blog however, he won’t be able to do it if we leave it like so. We could have added a link to the header bar, but that doesn’t look half as cool as a button saying Read More!

Create a new document with a transparent background that is 210*25px. Create a Rounded Rectangle (U) with a radius of 10px. The colour doesn’t matter. Make sure to make the shape 20px high so that the edges blend into a half-circle. Leave some space at the bottom and on the right for the drop shadow.

Now we need to spice up this button by adding a few layer styles: a drop shadow, a gradient overlay, and a stroke.

This style gives a nice little 3D effect to the button:

Then we need to add text to this. I’m using Myriad Pro, size 12 and #393939. Don’t forget to centre the text!

Final step of this button will be to add a bevel to the text:

Now we just need to import this into our document by drag & dropping, and we’re all set! I decided to align it to the right, but it does look good centred or on the left too, so it’s up to you to choose. I also put those two layers in a layer group Read More, to make it easier to move around.

Doesn’t this look just awesome? Anyway, now that we are done with the Blog module, it’s time to get done with the Twitter module!

Step Nine – The Twitter Module

Since this is pretty much the same thing as the Blog module, it will probably go a lot faster.

The Header Bar

To get started, just duplicate the header bar from the Blog Module and put it on the other side of the middle of the document, then place it in a new layer group called “Module 2 – Twitter”. Replace the text with something like “Follow the Roadside Team on Twitter”. Make this message really personal. Indeed, Twitter is something that should be friendly and personal, because it allows your readers to get closer to you.

I decided to use the Twitterific icon for the purpose of this tutorial, since it is for educational purpose only. However, should this website go live, we would have to use another icon to comply with copyright restrictions. But I just think it looks cool, so I decided to use it here. You can fetch it on Wikipedia by searching for Twitterific for example.

Include the icon to your document, resize it with Ctrl / Cmd + T, and place it instead of the newspaper. I decided to make this icon a bit bigger than the newspaper, simply because it didn’t look good otherwise.

Tweets

Next we’ll have to indent our content. Place one vertical guide at 830px and another at 845px to give us a solid base to work with, we also need a guide at 770px high to create a 15px margin between the twitter icon and the first tweet.

What are we going to put here? Each member of the team will have his own line with his latest tweet. A tweet is usually built with a profile picture, a name, and a sentence.
Create a new layer group called “Tweet 1″, which we are going to duplicate to create our other Tweets.

We’ll start with the picture. You can find pictures at stock.xchng in their portraits category.

Before we add this picture, we will need to create a shape to make a clipping mask. Use the Rectangle Tool (U), to create a square that is 35*35px, and add a 1px inside stroke to it with a colour of #202020.

Once you’ve found a picture you like on stock.xchng, we can add it to our design. Simply drag & drop it on the design, and create a clipping mask between the recently created Shape layer and the picture. Resize the picture with Ctrl / Cmd + T, if necessary.

Now we need to add the name of the team member. I’m going to start with the name I used in the blog posts, to show consistency. I’m using Myriad Pro here, as usual with our headings:

• Myriad Pro Regular
• 18px
• Smooth
• #6eb9cc

Be sure to leave a 15px margin between the picture and the name by adding a new guide.

Now, let’s add our status. I’m using Lipsum here as usual. Be sure not to write more than one line because it might break our design otherwise. Use our paragraph font as usual:

• Arial Regular
• 12px
• Smoothing: none
• #525252

You don’t need to make a paragraph block here since we’re only writing a single line.

Great, now that we are done, we can simply duplicate the layer group, “Tweet 1″, to create the other Tweets. Rename your layer groups to Tweet 2, 3 and 4, respectively. Leave 15px margin between each one.

It’s highly improbable however that every single team member is called Jonathan Davidson, so we’ll need to change their names, their pictures, and also their status to make it more plausible.

Now, the only thing missing compared to the Blog module is a “Read More” button. So we’ll just duplicate the “Read More” layer group from the Blog module, put the duplicated group in the Twitter Module group, and rename it “Get More Tweets”. We will not leave the same “Read More” message in order to make things look more personal and to show that we actually spent some time doing these buttons.

The only thing to do is to change the text layer to “Get More Tweets!”. The exclamation mark fits the informal Twitter spirit. Align this button horizontally with the Read More one, and vertically to the right.

Congratulations! We’ve now finished the content part of the design! It was really a tough nut to crack. Things will be easier from now on. We only have the footer left. Let’s just take a moment to admire what we’ve been creating for some hours now:

We’re really getting somewhere aren’t we?

Step Ten – Footer

We could have placed the footer text directly under the content. To be honest, when preparing for this tutorial, that was exactly what I did. But I found that something was missing; the design wasn’t really balanced. Adding the bottom of the header image to the footer gives a nice frame in which the content can live, so that explains why we are putting it there.

We don’t want the image to be too big though; 50px seems appropriate. So, we’ll add a new horizontal guide at 1150px in order to help us draw the shape.

We should create a new layer group called Footer, in which we are going to have the groups Image and Bar.

Image

Use the Rectangle Tool (U) to draw a rectangle taking 100% of the width and 50px high. This layer should be in the Image group.

Now, Drag & Drop our stock header image into our document again, and create a clipping mask between the image and the Shape layer. Use Ctrl / Cmd + T to place it correctly.

Footer Bar

Okay, we are done with the footer image. We now need to make our footer bar. Create a new group in the Bar group called box, and with the Rectangle Tool (U), fill the remaining transparent part of the design with #f8f8f8.

Now create a new layer called Shadow, create a clipping mask between Shadow and Shape, and with the Gradient Tool (G), make a black shadow that is about 15px high. Set the layer’s opacity to 15%.

Finally, to finish this box, duplicate the Border Top layer from the Content box using Ctrl / Cmd + J, drag this layer into the Footer Bar Box layer group and rename it Border Top.

Finally, create a new text layer, and with our paragraph font:

• Arial Regular
• 11px
• Smoothing: none
• #525252
• Text-align: Centre

Write some copyright license or anything you want to put in the footer. I decided to put Copyright, the company name, and a little “All Rights Reserved” too. In order to space things out, I put this on two lines. Align this text layer with the 800px wide guide.

Step Eleven – Admire!

Yes, that’s it, we are done! All this struggle and now we’re finished, but the final result was probably worth it, right?

Step Twelve – Final Thoughts

We’ve now designed our website using Photoshop. In Part II of this tutorial, to be released tomorrow, you’ll learn how to turn this PSD into a semantic, standards-compliant web page using xHTML 1.0, CSS 2.0 and JavaScript.

I sincerely hope you’ve enjoyed this tutorial, that you’ve learn some new techniques, and that you’ll now be able to make outstanding web designs yourself!

I’ll see you tomorrow for Part II!

• Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.