Padding 101

One of the most difficult aspects of designing when you first start is spacing. Some elements will be out of proportion and the padding between elements is also likely to fluctuate. The key thing to learn is to be consistent. Try to stick to certain paddings and margins and stick to it throughout the template. That way each element flows together without breaking the visual hierarchy of the design.

One way in which I like to do this is to use guides. You can add guides say 15px inside your template/column guides. This was its incredibly easy to see if the sides of elements are lining up. Other than that my favourite method is to create a box in photoshop. Fill it in with a bright color. In the select menu reduce the outline by 30px and fill in with white. In layer blending options then add another bright colour stroke, 15px wide and positioned inside. Set the opacity of the layer to 30% or so. You can then reposition and resize this rectangle and it will show you a 15px and a 30px padding marker. Generally speaking this is the padding I will use. I’m sure other people prefer 20/40, 10/20 or various other combinations.

To see these methods in action take a look at the screencast above. The key point in spacing is to be consistent. Consistency comes with experience, but to start out you should set up guides and really calculate the sizing and paddings of each element.

Requests?

If you have any requests please let me know. Also if you followed the photoshop tutorials be sure to post some of your end results. Its always nice to hear from viewers.

Simple Footer

Designing the whole footer.

1. Using the rectangle outline create a large rectangle spanning the whole document width.
2. Color with #d9d9d9.
3. In blending options add a 1px inner shadow to the top, color white.
4. Add a 3px stroke of a darker grey than the background.
5. Using the rectangle outline create a thin strip directly above the main footer rectangle.
6. Fill with any color then in blending options add a pattern overlay of diagonal dark pixels. (attached)
7. As in the featured area create a bar to go along the bottom of the footer. Fill with black and set opacity to 10%.
8. As in the navigation create dividers to split the footer into four columns (use guides). Draw a 1px vertical line color white leaving around 15px top and bottom. Do the same 1px to the side on the same layer but using black.
9. Set the layer style to overlay and reduce the opacity to 60%.
10. Add title text for each quarter. Size 18pt, color #333 and with a 1px white dropshadow.
11. First quarter will be example links. Simple type some example links as a paragraph of text with each link being on a new line.
12. Change line spacing/leading to 24pt, size 12pt, color #666 and make the text underline.
13. Second quarter will be about us. Simply paste an example paragraph leaving space to the right and left of the dividers. Make line spacing/leading 20pt, size 12pt and color #666. No underline.
14. Third quarter will be recent comments. Do the same as the first quarter but write each line as "admin on Post title" where admin and post title are separate links and "on" is regular.
15. The last quarter will be a simple find us section.
16. Copy the map image and paste in place. Add a 3px white stroke and a simple regular dark drop shadow.
17. Type some example copyright right information and "back to top" link in the darker bar at the bottom of the footer.
18. Finally create a new rectangle which is about 30px high and above the patterned bar. Add a gradient overlay where the bottom and top are the colour of the main background but the top section has opacity set to 0.

These instructions are intended as a guide to go along with the screencast. For a better understanding of what’s going on view the video.

That is the end of the Complete Photoshop Design Course. There is however an addition tutorial which goes over spacing. Check it out on the Photoshop section of the website.

Main Column Set Up

Bigger left side column.

1. Show guides, main column will be left two thirds.
2. Add title text to left side 30pt, #333 and Museo Sans.
3. Add paragraph of text underneath the title, spanning with two thirds with about 15px padding to the right guide line. Color #444, 12pt and Arial.
4. Add another title and small paragraph for the "Services" boxes.

Service Boxes

Rounded corner rectangles with service icons and details.

1. Create a new folder in your layers called "service1".
2. Using the rounded rectangle tool add a 180x250px shape.
3. In blending options add a gradient overlay of light grey at the top to white at the bottom.
4. Add a stroke 1px #ccc.
5. Add an inner shadow coming from the top, color white 1px.
6. Type a title inside this rounded rectangle. Size 18pt, color #444 and 1px white drop shadow.
7. Type a short excerpt of text below the title. Size 12pt and color #666.
8. Open up credit card icon and paste under the excerpt of text, center it within the shape.
9. Duplicate the folder containing all these layers and reposition about 30px to the right.
10. Change title text and icon and then repeat for the third.

Recent Comments

Recent comments section of the right sidebar.

1. Using the rectangle outline create a grey bar about 5px high which spans the width of the right sidebar (last third on the guides, leaving 30px to the right and 15px to the left.
2. In blending options add a gradient overlay of light grey on the left to darker grey on the right.
3. Type "Recent Comments" for the title text below this bar. Size 18pt and color #444.
4. Create a new folder called "link1".
5. Create a rectangle the same width as the grey bar but around 50px high.
6. Fill with #f6f6f6, stroke 1px #ccc and inner shadow from the top 1px white.
7. Open up thumbnail and place on the left side of the rectangle.
8. Select the outline of the thumbnail, enlarge by 3px then create a new layer and fill with white. Then add a 1px stroke, color #ddd. Make sure this layer is below the thumbnail image.
9. Add text 12pt, color #444. First line being an example link title and second being an example date.
10. Color the first line – which represents the link – in blue and add an underline.
11. Duplicate this link folder and place directly below. Repeat until you have 5.

Client Testimonial

Client testimonial section of the right sidebar.

1. Copy the grey bar and title from recent comments and place below the end of the links.
2. Change text to Client Testimonial.
3. Open the icon of the client.
4. Paste to the left side under the testimonial title.
5. In blending option add a light grey color overlay.
6. Type an example client name under the icon, 12pt and color #444.
7. Type an example paragraph to the right of the icon. Change color to #666.

These instructions are intended as a guide to go along with the screencast. For a better understanding of whats going on view the video.

Main Background Area

The main featured area background.

1. Create a new layer just above the white rounder corner shape.
2. In the layers menu hold CTRL and left click on the shape layer to get its outline.
3. Go to select then modify and contract the selection by 15px.
4. Fill in with colour #5ea22d
5. Using the rectangle outline, remove all of this area which is below the small grey bar. So it lines up with the bottom of the grey bar..
6. Add a gradient overlay of around 10%.
7. Add a 1px stroke to the inside, colour being a slightly darker green.
8. Add a new layer above the one just created, select the outline of main area and using the rectangle outline select the bottom 30px or so. (hold alt to deselect the top however section). Fill this with colour black, set blend mode to darken and opacity 7%.
9. For the shadow use the eliptical tool to create a black shallow eliptical shape running the length of the featured area but with around 15px less on either end.
10. Go into the filter menu and select gaussion blur. Set to around 9px.
11. Using the rectangle outline tool, delete the top half of this shape.
12. Reposition so its directly below the featured area and is centered.
13. Reduce the opacity.

Featured Area Title Text

Creating the text and the background to the text.

1. Type the text, font Museo Sans, size 30pt, anti-aliasing crisp, colour white.
2. Go into blending options and add a 1px drop shadow (darker than background).
3. Using the rectangle outline select an area which stretches roughly half the width of the featured area and holds the text with around 15px padding on top and bottom. Make sure it is aligned so that it is flush with the left side of the featured background.
4. Fill this layer in and go into blending options. Remove fill colour (0%).
5. Add a gradient overlay black to black, left to right with the right side being 0% opacity.
6. Add a gradient overlay to this rectangle, the same colour as the background for both ends (#f9f9f9). Set the second colour and set to 0% opacity. This should hide the shadows at the bottom making it seem like the shadows fade away. Make the blend mode overlay, opacity around 20%.

Featured Slide Main Content

Main content for the slide.

1. First make sure the guides are visible.
2. Go to lipsum.com and generate a paragraph of dummy text.
3. In the last 3/4 of the template create a pargraph of text and paste from lipsum.com. Size 12pt, Arial and no anti-aliasing.
4. Add a new layer and using the rectangle outline create a white box to hold a thumbnail. Make it so it has around 15-30px spacing from other elements.
5. Add to this box a 1px stroke with a darker green colour.
6. Open up an example image for the thumbnail. Copy and paste it onto a layer above the box. reposition it so it covers the box.
7. Get the outline of the box below and contract the outline by 3px.
8. In the select menu also select inverse selection and delete.
9. This should leave a 3px white border around the image, with the addition of a green border to that.

Featured Slide Icons

Icon and details section.

1. Open up the 3 different icons and paste onto the darker area at the bottom of the featured area, to the right of the thumbnail so they line up with the left side of the paragraph of text.
2. Space them out and example text for each – 12pt, Arial, none, white.
3. For the clock image press CTRL and T then at the top of the screen reduce the size to 16px x 16px to fit with the others.
4. For each image go into blending options and add a colour overlay of white.

Previous and Next Controls

Button containing the next and previous arrows.

1. Using the rounded rectangle create a rectangle to hold the arrow.
2. Rasterize the shape and delete the section where the featured area ends and the shadow starts.
3. Add a gradient overlay, grey at the top, white at the bottom.
4. Add a 1px white stroke.
5. Using the rectangle outline tool delete all the shadow layer which is directly under the button.
6. Using the custom shape tool select an arrow show and holding shift create an arrow.
7. Set the colour to the same as the admin link.
8. Add a 2px inner glow of darken black, 10%.
9. Add a 1px stroke which is the colour at the very bottom of the arrow (1px down from the arrow – so the background colour there). It should be lighter.
10. Duplicate the shape and go into edit and transform. Flip the outline horizontally and reposition.

These instructions are intended as a guide to go along with the screencast. For a better understanding of whats going on view the video.

Changes To Last Tutorial

The video shows some elements to change from the last screencast. If you followed the written instructions on the previous tutorial there should be no changes needed.

Admin Link

The admin link a simple inset looking button to be displayed in the top right.

1. Write text for link "Admin" in bold, Arial with anti-aliasing set to none.
2. Using the rounded rectangle tool create a button for the text to be displayed on. Make sure to place this shape below the text layer.
3. On the shape set a black colour overlay set to darken and 15% opacity.
4. Add an inner glow, set to black and darken, reduce the opacity from 100%.
5. Stroke set to 1px, almost white.
6. Add a 1px drop shadow to the admin text. Blend mode normal with a light grey colour.

Main Content Area

The main content area is a white box running the full template with rounded corners on the top and shadows to the sides.

1. Rounded rectangle with fixed size of 1000px x 500px. Placed centrally, around 30px below the navigation.
2. Add to this a drop shadow at -94 degrees, 22% opacity.
3. Duplicate this shape but change the angle of the drop shadow to -86 degrees.
4. Create a new layer and using the rectangle outline select the rest of the area in the central 1000px (starting from the mid-point of the white rounded rectangles) and fill in with white.
5. In order to fade the shadows to the side out create a new layer. Using the rectangle outline tool create a rectangle which is roughly 100px tall and placed on the last 100px of the left shadow. Fill this in with any colour.
6. Add a gradient overlay to this rectangle, the same colour as the background for both ends (#f9f9f9). Set the second colour and set to 0% opacity. This should hide the shadows at the bottom making it seem like the shadows fade away.
7. Duplicate the layer and reposition on the right side shadow.
8. Finally create a new layer, just above the background and select a rectangle going across the whole 1400px document width, just below the small grey bar. Fill this in with any colour and go into blend options.
9. Add a gradient overlay from black at the top to the colour of the background at the bottom. Set opacity to around 10%.
10. Finally add some text to show the user where they are on the page. Position this between the navigation and main content. Make this a grey colour with a black 1px drop shadow.

These instructions are intended as a guide to go along with the screencast. For a better understanding of what’s going on view the video. In the next part I will describe how to design the main featured area. If you haven’t already done so be sure to check out part 1 – setting up the document and designing the header.

Setting Up The Document

Follow the instructions below, if you need help view the screencast above.

1. Create a new document with size 1200px x 1600px, 72px/inch and color profiles turned off.
2. Fill the background in with an off-white colour (#f6f6f6).
3. Add vertical guides at 100px and 1100px to set the outline for the template (1000px wide)
4. Add vertical guides at 433px and 767px to split the template into 3 columns (thirds).
5. Add vertical guides at 350px, 600px and 850px to slit the template into 4 columns (quarters).

Top Header Background

The top header is a very simple grey bar.

1. Rectangle outline, new layer and fill with colour #D7D7D7
2. Gradient overlay, blending set to overlay using gradient black to white. Opacity set to 30%.
3. Pattern overlay of stripes, blending set to luminosity and opacity 3%.
4. Inner shadow so the shadow is on the bottom, reduce opacity until it is a subtle effect.
5. Stroke set to 5px and outside, color white (#FFF)

Dark background and small grey bar

The dark background uses a pattern I already have. The grey bar is positioned below to tie in with the colour of the header.

1. Rectangle outline, new layer and fill with any colour.
2. Pattern overlay with the dark pattern selected.
3. Black to white gradient overlay, blending set to overlay, opacity set to 30% and direction reversed.
4. Thin rectangle outline below dark area, new layer and fill with #D7D7D7.
5. Add a 1px drop shadow to the bottom, slightly darker than the background (#D7D7D7). To do this make size 0 and distance 1.
6. Add a 1px inner shadow to the top, colour white. Same method as above, make sure to set blending mode to normal.

Simple Logo and Navigation

The dark background uses a pattern I already have. The grey bar is positioned below to tie in with the colour of the header.

1. Type the text for your logo and change the font to Museo Sans, size 30pt and anti-aliasing crisp.
2. First word colour #444, second word #666.
3. Black to white gradient overlay, blend mode overlay and opacity 30%.
4. Drop shadow 1px, 120 degrees, color white, opacity 60%.
5. Use the rounded corner rectangle tool with fixed size 1000px by 50px and corners 10px. Position so the top 10px or so overlap the white border of the header.
6. In the layer menu, select rasterize shape. Then using the rectangle outline select the top section which overlaps the white border and delete it.
7. Set the gradient overlay so there is white at the top and a light grey at the bottom.
8. Add a 1px border/stroke to the inside of this.
9. Add the text for the links, colour #444, size 16px, font Arial and weight bold.
10. Add the light drop shadow as you did with the logo text.
11. Draw a 1px wide white line going from the top of the navigation (top of the white border) to the bottom of the navigation.
12. Do the exact same on the same layer as the white line, except with black and to the right side of the white bar.
13. Go into layer blending options and set to overlay, opacity 70%. This is the divider to separate links.
14. Copy this layer to separate all the links your typed..

These instructions are intended as a guide to go along with the screencast. For a better understanding of whats going on view the video.

If you want to learn more about taxonomies let me know and I will provide a more detailed tutorial on them. They are incredibly useful for things such as hosting parameters and ingredients for a recipe site.

The Images

The images used in this tutorial are slightly different from those in the last. In the last we simply created JPEG images to be used for the background and dividers. For this tutorial we need the highlight/overlay images. They can’t have a background and must fade from white to completely transparent. To do this you need to copy the highlight layer you want in Photoshop to a new document and save as a PNG image. This is a very useful little tool to create some great effects. Check the video for the images being used.

The HTML

The first thing to do is open up the HTML document you created last time. All we are going to do is add an empty span and an empty em element. These will both be positioned absolutely containing a highlight image. One will be the main overlay highlight and the other will be a bar at the bottom with a highlight image in the center. The HTML should look like as follows:

	
Home
    
Tutorials
    
Screencast
    
Videos

The CSS

Next thing we need to do is style the empty elements we just created. Here is the extra CSS we need to add:

ul li span{
	position:absolute;
	width:100%;
	height:2px;
	bottom:0;right:2px;
	background:#008aff url(dark-btm-highlight.png) center no-repeat;
	z-index:3;
	opacity:.0; -moz-opacity:.0; filter:alpha(opacity=0); 
}
ul li em{
	position:absolute;
	width:100%;
	height:34px;right:2px;
	bottom:2px;
	background:url(dark-overlay.png) repeat-x  bottom;
	z-index:4;
	opacity:.0; -moz-opacity:.0; filter:alpha(opacity=0); 
}

A key thing to pay attention to is the opacity. We set the opacity to 0 which means as default the images are not visible. We will then use jQuery to animate this opacity to 100% (1) when the anchors are hovered over. More information is given in the screeencast at the top of the page.

The jQuery

The final thing to do is to animate the highlights created above. To do this we first set up the jQuery document and apply a function which will animate the highlight opacity.

$(document).ready(function(){
	$("ul li").hover(function(){
		$(this).find("span").animate({opacity:1},100);
		$(this).find("em").animate({opacity:1},400);
	},function (){
		$(this).find("span").animate({opacity:0},500);
		$(this).find("em").animate({opacity:0},200);
	});
});
    

The first and last line signify the standard and end of the document ready function. This means anything within this will only occur once the document has been loaded. Inside that we have a simple hover function. When a list item is hovered over we select a span which is contained within this list item. This span is then animated to an opacity of 1 over a duration of 100 milliseconds. The exact some for the em except the speed is slightly slower. We then have another function for when the list item is no longer hovered over. This animates the elements back to opacity 0 – making them invisible.

By using PNG images and two different elements we can use this effect with different color bottom bars, without a jQuery plugin and animate the two elements at different speeds. This is a nice trick to learn. You can expand it even further or try different animations. For example, you could have an overlay images which is animated to pass through the anchor from top to bottom creating a flash effect similar to those used in flash.

If you have any questions or requests please post a comment. Also remember to check out the screencast at the top of the page. Demo and download links are to the right of the screencast as usual.

The first thing to be aware of is the images used in this tutorial. From the full PSD we create a 1px wide image for the background and a 2px by 15px image for the divider. These are the only two images which will be used in the tutorial. The below image highlights the two areas used for these images:

Creating the images

The Code

Due to the simplistic nature of this tutorial I will simply provide the full code then highlight some sections in the paragraph below. If you need more detailed explanation please watch the screencast.

HTML

	
Home
    
Tutorials
    
Screencast
    
Videos

CSS

@charset "utf-8";
/* CSS Document */

body{
	background:#333;
	padding:50px;
}
ul{
	padding:0;
	margin:0;
	list-style:none;
	background:url(dark-bg.jpg) repeat-x top;
	height:40px;
	border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	width:600px;
}
ul li{
	float:left;
	background:url(dark-divider.jpg) right no-repeat;
	padding-right:2px;
	position:relative;
	overflow:hidden
}
ul li a{
	font-size:16px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	color:#ccc;
	text-decoration:none;
	padding:10px 15px 10px 15px;
	display:block;
	position:relative;
	z-index:5;
}
ul li a:hover{
	color:white;
}
ul > li:last-child{
	background:none;
}
ul > li:first-child span{
	width:75px;
   	-moz-border-radius: 0 0 0 2px;
	border-radius:  0 0 0 2px;
	-webkit-border-radius: 0 0 0 2px;
}

Some Explanation

The code should be very straight forward if you have experience with HTML and CSS. I will quickly explain a few key points. In the HTML we have a very simple unordered list (ul in CSS) which contains list items (li in CSS). Each list item holds an anchor which represents the link (a in CSS). If you then look at the CSS we have added the main background image to the unordered list and added the divider image to each list item. This is all very simple. Where you may not be so familiar is with the first-child and last-child selectors. These are very useful selector as you will soon notice. By adding the divider image to the right of every list item we would usually have an extra image shown on the last item. In order to stop this all we need to do is select this list item using last-child and set background to none. The same principle applies when adding a rounded corner to the first list item.

One other tip which you may be unaware of is the z-index property. It is used to signify the order/layering of elements. If an element has a z-index less than another it will be displayed below. This only applies to elements with a position property, for example absolute or relative. In our example we use the z-index to make sure the anchor is always on top, therefore making the links click-able.