In this Photoshop tutorial, I am going to walk you through 5 different tips which I think define standard “Web 2.0” design principles. The tutorial will walk you through the creation of several website buttons, badges, glossy spheres, and finally the classic technique of reflections.  Please let us know what you think of our Web 2.0 buttons Photoshop tutorial and thanks for stopping by.

Tip #1:Gradients Are the Key To Web 2.0 Buttons

In my opinion, it is impossible to create web 2.0 style buttons without using gradients.  Gradients are one of the defining characteristics of web 2.0 design style.  So for our first tip, I’m going to explore a couple of the standard gradient techniques that produce web 2.0 buttons.   Remember, feel free to use your own color scheme, the colors provided are not set in stone, and are open to experimentation.

First, let’s create a new document.  I’m going to make mine 1500px X 1500px, but that’s only because I am going to create all 5 web 2.0 Photoshop tips in one PSD file.

After you’ve created your document, we’re going to work with the Rounded Rectangle Tool, since rounded corners are another staple of web 2.0 design.

After selecting the Rounded Rectangle Tool, we’re going to set our Radius in the toolbar to 15px.

Now that we’ve set the Radius of our rounded corners, let’s go to our canvas and create our first button.  My foreground color is a light blue, meaning the button I am creating is going to be light blue.  You should make sure you change your color to light blue as well before creating the button.

When the button has been created, we’re going to be working with the Blending Options of that layer.  This is an area we are going to visit frequently throughout all 5 Web 2.0 Photoshop tips.  To access a layer’s Blending Options, simply pull up the Layer’s bar, then right click on the layer you wish to blend and select Blending Options from the menu.

Once we’re inside the Blending Options for our button, it’s time to apply a gradient.  We do this by clicking the check box that says: “Gradient Overlay”.  On the right side of the Blending Options window, you should see the following Gradient Overlay settings screen.  Let’s set the opacity to 50%

With our opacity set, let’s modify the gradient itself to meet our needs.  To edit a gradient, click directly on the Gradient picture inside the Gradient Overlay settings box .  Now click just outside the gradient picture directly in the center, at the bottom edge.  This will create a new color in the gradient.  Set it to light blue, and adjust until your settings look similar to this:

Now that our new gradient applied, the last thing we need to do to finish our first Web 2.0 button is to put a Stroke (which is a line surrounding the object.)  Let’s make the stroke size 2px and leave the color as black.

Since our first button is created and out of the way, let’s create a new shape to illustrate another gradient method common in Web 2.0 style buttons.  Create a new rounded rectangle below your first button, and color it light green.

Now just like with our last button, let’s open up this layer’s Blending Options, apply a Gradient Overlay, edit the gradient, and create the following settings, noting the diamond on the bottom right side is set to 5%.

Moving on, let’s create a 3^rd button.  This button will continue with the progress we’ve made on the last two buttons, but we’ll add an Inner Glow blending effect, which is another common Web 2.0 Photoshop trick.  We’ll make this button orange, and use the following gradient to start it out

To create an Inner Glow, simply check the Inner Glow checkbox.  Change the color to a light orange/pink and change the Blend Mode to Screen.

Here’s a preview of how your button should look with these settings:

Let’s create a final button to illustrate Web 2.0 gradients in Photoshop.  Remember that these four basic gradient types can be reused over and over again using different color schemes.  That’s really the point of this first Photoshop tutorial, to give you the four basic gradients used in Web 2.0 design.  Our final gradient is very common, being very standard.  What makes it appealing is the fact that the start color is very similar to the end color, meaning it’s a milder gradient than most.  Here’s the gradients settings:

With all 4 of our standard web 2.0 gradients done, here’s what our Photoshop canvas looks like:

Tip #2: Adding Stripes for More Web 2.0 Goodness

Our first tip was about gradients, which I said is one of the most defining characteristics of Web 2.0 Photoshop design.  However, stripes are perhaps the 2^nd most defining Web 2.0 style, so let’s talk about creating them and implementing them with our previous buttons.

To do that, first let’s create a new document with square dimensions.  My canvas is 500×500 pixels.

Next, let’s create a new Rectangle, using the Rectangle Tool.  We’re going to create a big line across the center of our canvas.  This line will serve as our stripe pattern.

Once you’ve created your rectangle, hit CTRL+T or goto Edit > Transform > Rotate to rotate the rectangle.  We want to position it exactly in the middle, so that when we create a repeating pattern from this picture, it lines up perfectly.

Next we’re going to need to put two copies of our rectangle on the top left and bottom right respectively, again so that we make this a pattern, it will repeat seamlessly.  To do that, I am going to create 4 guides.  To create guides, first make sure that the Ruler is visible (goto View and make sure there is a checkmark next to Rulers) and also insure that guides are visible (goto View > Show and make sure Guides are checked off.)  After  you’re sure that guides and the Ruler are displayed, the way you create a new guide is to click and drag from the ruler, to your document, like so:

You’ll notice that my four guides are setup to tell me where the current rectangle goes off screen.  This is because we’ll need to put two copies of the rectangle onto our canvas as I mentioned earlier.   Right click on your Rectangle layer and click Duplicate Layer.  Repeat.  Now drag them into position as indicated in the screenshot below.  Once both duplicated layers are position correctly, goto the Layer menu and select Flatten Image.

Now that the image has been flattened, it’s time to make our pattern.  We do that by selecting the entire canvas (CTRL + A)  With the entire canvas selected, goto Edit > Define Pattern…  and name your pattern.

With our custom stripe pattern defined, we’re ready to add them to our previous buttons from earlier.  Select all the layers of your buttons and right click, select Duplicate Layers.  Now choose the Move Tool and drag the newly duplicated buttons to the right of the originals.   To apply the pattern, right click on the Rounded Rectangle layer of your button, choose Blending Options, then check the box next to Pattern Overlay.  Find your pattern in the drop down pattern selection screen, and change your opacity to 6%.

Here’s what our buttons look like now with the stripes applied.  As you can see, they are very “Web 2.0” looking at this point.

Tip #3: Web
2.0 Badges Are Still Sexy

Despite the Web 2.0 design trends having been around for years, they are still modern and not at all out of style.  Badges are another staple of this design paradigm, so let’s explore how to quickly create one.  To start out, let’s use the Custom Shape tool.

Let’s create a layer with our custom shape:

We should color it light yellow, manila almost.  Remember, you can use whatever color scheme you want.

Let’s add a Stroke to our badge, size 3, with a darker orange.

Next, we’re going to add an Inner Shadow, use these settings:

Next, we’re going to add a Web 2.0 glossy look to our badge.  To do that, first let’s duplicate our custom shape layer.  After that, right click on the duplicated layer, click on “Convert to Smart Object” then right click again and select “Rasterize Layer”.

Now select the Elliptical Marquee Tool, we’re going to use it to delete most of our duplicated layer.

Select the bottom right of our duplicated layer as pictured below.  Once you’ve done that, goto the Select menu and then click Inverse.

Now hit the DELETE button on your keyboard.  Your layer should look like this:

Let’s make this layer stand out now by tweaking it’s Blending Options.  We’re going to add a Gradient Overlay with the following settings:

With the gradient applied, it’s time to move onto an Outer Glow. We’re going to overboard with this and make the size of the glow 92px.

Finally, let’s change the opacity of the entire layer to 56%

Add some text that says Beta and we’re done:

Tip #4: Glossy Spheres Are Easy to Make & Look Great

Like badges, glossy spheres are common but look great. We’re going to make one by using the Ellipse Tool and making an orange circle (hold shift down while creating your ellipse to make a perfect circle.)  Once your circle is created, let’s add an Inner Shadow.  Use these settings, paying attention to the size at 59px:

Next we’re going to add a Gradient Overlay with these settings:

Now for an Inner Glow:

With the foundation done, we can now work on the glossy effect.  To do that, we’re going to add a new layer with the Ellipse Tool. This time, we’re going to make an oval, as pictured:

To make the oval align correctly with our underlying circle, let’s use the Warp tool to move the top of the oval slightly.  The Warp tool is available from Edit > Transform > Warp

We’re going to add a Gradient Overlay to this layer now, to give it the look of a glossy shine.  Use these settings, noting the angle:

]

Let’s duplicate that oval layer.  Once duplicated, immediately right click on the layer, choose Convert to Smart Object, and then right click on the layer again and choose Rasterize.  Once rasterized, hit CTRL + T and invert the oval as picture below.  Move it the bottom and resize it so that it is much smaller than the original:

Now decrease the opacity to 47% and add your text to finish the glossy button!

Here’s the final results:

Tip #5: Last But Not Least, Reflections!

What roundup of Web 2.0 tips would be complete without a tutorial on creating reflections?  Seriously, along with stripes, gradients, and badges, nothing says “Web 2.0” like an image with a reflection.  So let’s grab a duplicate of one of our buttons from earlier, and give it a reflection. We’ll also add an arrow that tells web users what to click on… namely your button!

Once you’ve duplicated one of your buttons from earlier, let’s use the Customer Shape Tool and select an arrow:

Dragging it over our button, we end up with something like this:

Since this is web 2.0 design, I’m going to style the arrow with a gradient… go figure.

Now to make a reflection, I am going to duplicate everything I wish to reflect.  Once they are duplicated I am going to select all the reflection layers together at the same time, and then right click and select Convert to Smart Object, then right click on the newly created smart object layer and select Rasterize.  With the layer rasterized, I will hit CTRL + T to transform the layer, and will again invert it by dragging down the top center box until I get a screen that looks like this:

Now to line up the reflections:

We want the reflection to look angled, and will use Edit > Transform > Distort to accomplish this.

This is how we want our distort transformation to look:

Let’s delete anything that overlaps.  We’ll select it then hit the DELETE key.

In order to simulate a reflection, we’ll use a standard black and white gradient over the reflection layer, only changing one of the positions as indicated below:

Since our background is white, we will use Lighten on our gradient.

Finally, we turn down the opacity of the entire layer to 37%, giving us the following final image:

So there you have it!  Five web 2.0 tips that are still useful even after all these years.  Have questions, comments, or concerns.  Let us know, we’d love to hear from you.  Thanks for reading and have a great life!

There are many not-so-fun things you will have to do as a freelance web designer, and having the right skills can help you stay in business longer and enjoy the freedom of working for yourself. If you don’t have all of these skills yet, I’d highly recommend you buying a few books or attend some courses. So here are the three important skills you must have if you want to be a successful freelance web designer.

1. Selling – Are you good at selling on the phone or in person? If not, you better to learn it quick. You don’t have to be the top sales person in your town, but you do need to be able to understand what your client’s needs are and tell them how your service can benefit their business. You have to communicate effectively with business people who have little to no computer knowledge. By having a strong sales background, a web designer will have much better chance in get a client to sign the contract and to keep them coming back for more work.

2. Search Engine Optimisation – People are expecting more from web designers as the industry is getting more competitive. Your competitors are offering more website features and work, therefore you have to at least offer the same if not better. Search engine optimization is one of those things that many businesses are looking for right now. They are understand the importance of top rankings in the search engines, and you can deliver this within their budget, you will stand a better chance of getting the work.

3. Networking – People usually trust friends and family members more than strangers. The more people you know, the better chance a friend of yours will mention your name and service when talking to their friends. They will be doing all the ‘hard work’ for you. So this is why it’s extremely important that you go out there and network with people. You can go to seminars, business meet ups, events..etc Be sure to have some business cards with you ALL the time. You are not only limited to the real world networking, you can also network with people online. Websites like Facebook and Myspace are places where you can do just that. There are also more focused networking websites on the net. Simple do a search for web designer networks and you will find many than you can join for free. These are just a few examples, not to mention there are forums and newsgroups.
Southern Web Group provides SEO, development services, Atlanta web design, and much more – Check them out today!

See what I did there? A cheap reference to a cult classic, with a simple but obvious twist to draw your closer attention. Before getting started, if you haven’t already, you really should read zen and the art of motorcycle maintenance by Robery Pirsig. Its bloody good!

So what has zen got to do with web design, and more importantly, why should you care? Well, if you want to stand out as a creative and original force on the web, then this is important to you. So listen up!

This article actually has precious little to do with zen in its proper sense, but it does borrow liberally from the ideological elements, the state of mind it suggests and the sense of balance it carries. I could bang on and on for hours about balance in design at this point, and what techniques you can employ to make your designs jump off the page, and force feed the viewer with your shiny content. But I won’t, because there are many, many much better designers out there than me, and a whole wealth of resources and tutorials. This article is more about approach, priority and process.

How many times have you landed on a truly beautiful website, and been awed by its visual balance and grace, only to find it breaks the minute you enlarge the text, or use an unusual browser or page reader? If you’re anything like me, lots. Using linux opens your eyes to narrow or non existent browser support. Or, as is more often the case, find the spectacle before you dims very quickly into the background radiation of great designs on the web?

Why is this?

As far as I’m concerned it is entirely down to a lack of understanding about what the web is, and how to use it. And it’s not surprising really. There are many myths about the web which directly impact the value it has as an information portal, and a marketplace.

The problem occurs because the web is treated like a piece of paper, and one can be forgiven for doing so, as it’s easy as a designer to confuse the two, because they share many features. But they are very different indeed. The relationship that the web has with print media is already quite imbedded, because the people making the pages so often have migrated from the world of print, and have taken their principles with them. It is still a new medium let’s not forget.

Of course, I’m not calling into question the ethics of print design, rather pointing out that they so often don’t apply to the net. A website in its most basic sense is a program. Even a static HTML site is a program (just!). Failure to understand this can result in badly functioning web pages with no real handle on usability and data structure.

The thing about print design is that the page is absolute. Your only constraints are space, time and cost. The rest is totally under your control, and every person who sees that page, will have the same experience. Have you ever looked to see how many browsers exist for the net? Not to mention how many operating systems, screens, and user preferences come into play. Need I say more?

A computer screen is not a piece of paper. Someone, one day, is going to view your page using lynx. Get over it! The more absolute control you crave over layout, the more temperamental the performance of your page. The web is a breathing organism in comparison to the printed page. Openness to the organic development of the web is crucial to success in web design. (Note – by success, I mean a website that works well, looks good, is accessible and doesn’t break. I’m savvy enough to know that fancy graphics alone can create the other kind of success quite nicely, thank you. A shame, really.)

This is why I have called web design a craft. It is not art, although art is very often an important element in web design, but the whole process is so much more; a collection of usability, accessibility, relevance, visual appeal, and mechanical integrity.

A preconceived idea of the web, if it is too narrow, too personal, too fixed, can ultimately compromise your success. An open mind should attend each project at each moment in order to find the best implementation of a brief. So many designers simply rehash the latest trends (very well in many cases), but they fail to say anything interesting about themselves, and more importantly, about their clients.

Web design is a meeting of many different disciplines. Do not be disheartened if you are not a master of all of them. Copywriter, graphic artist, SEO expert, web programmer, usabililty & accessibility guru to mention a few. The best we can all do is to always have an eye on these requirements during each project, and farm out the bits you feel could be done better by a dedicated professional.

Here’s a funny thing: the internet is a text based medium.

Take a deep breath. Silence your internal critic. I shall now repeat: the internet is a TEXT BASED medium. Of course the key words here are ‘text’, and ‘based’. I’m not saying there’s no pictures, movies, music and other media on the web, just that it’s primarily a text based medium. So thinking about it in terms of pictures and layout (design) can lead you easily to poor decision making.

Why is your site? What is its purpose? If you can’t answer these questions, then maybe you shouldn’t have a site at all. The purpose of the site needs to dictate the function of the site, which is itself a key element of design don’t forget. It dictates the layout, which in turn dictates what the rest of us call the design. This final step is basically packaging.

So that’s the craft side pretty much tied up – hopefully complete with art for the final sheen, but where does the zen come in? This is the part that’s hard to quantify, but these following pointers can improve things drastically:

• Be yourself – humans are cunning creatures. If you are pretending, they will notice.
• Express your personality – it’s nothing to be ashamed of, we’ve all got one, and it’s what makes you worth listening to*.
• Never use the word ’solutions’ when referring to services. Please!
• Be natural – similar to being yourself, being natural has an element of spontoneity and even playfulness about it. Anything too rigidly planned or contained is prone to miss out on that accidental stroke of genius.

People will come to your site for quality content. If you don’t have it, it won’t matter one bit how fancy your ‘design’ is, nobody will stick around. Once you have content worth coming back for, make sure you don’t lose visitors through poor design. The site should be intuitive, friendly, robust, quick to load, and appropriately dressed.

Anyone who’s used OS X and windows XP/ Vista will get that this is an excellent illustration of my last point. Both machines will do what you want them to do, but OS X will do it more simply, with less effort, in a way that’s more fun, more gracefully, and with style. Nuff said.

*this does not apply to scientologists, sorry.

This Article was written by Anthony Lane from A Branch of Design and NotBanksy’s Blog

3D Metal/Stone Effect

Stunning 3D Text Effect

Bling Text Effect

Bubble Text Effect

Digital Text

Grass Text

Your Text Is On Fire! – Sorry horrid reference to Kings of Leon song!

Hell Text Effect

Lego Text

Destructive Text with Dramatic Splash Effect

Matrix Text Effect

Meteor Text

Neon Text

License Plate

Written in Sand

Smoke Text Effect

Smooth Glass

Stitched Text

Typography Wallpaper in Photoshop

Typography Poster Design

Water Effect

Wood Inlay

Test All Wrapped Up

What will the prize be?
We are going be giving away either an iPod Nano, an iPod Touch, a Mac Mini, a Macbook or an iMac.

How do you enter?
All you have to do is follow us on twitter – @webdesignerhelp.

How will the prize be chosen?
The prize will be chosen depending on how many followers we have at 12pm GMT 30th June.

If we have 100K in followers will be giving away an iMac
If we have 75K in followers will be giving away an Macbook
If we have 50K in followers will be giving away an Mac Mini
If we have 25K in followers will be giving away an iPod Touch
If we have 15K in followers will be giving away an iPod Nano

How will the winner be chosen?
One of our followers will be chosen randomly, and then we post your prize to you.

Why are we doing this?
We would like to thank our readers/followers on twitter, and thought what better way than to hopefully giveaway an iMac!

Web design is subservient to content

But, understanding what web design is, you’re not offended because you know any kind of design (architecture, graphic design, fashion etc.) is about communication and function. Design that fails to communicate or fulfil its functional requirements is decoration and will not be successful.

You know the 5 critical aspects of a website, in order of importance, are:

1. Content — the substance of the website. The largest and most important aspect. It’s why the website exists and what visitors come to see.
2. Functionality — dictated by the content, the purpose of the website and the audience… what interactivity is required/ desired to fulfil the website’s aim.
3. Usability — user-friendly with a simple and reliable interface. The design must make the content easily accessible no matter the technology its viewed on.
4. Visibility — a website must reach its audience. The site must provide quality content optimised for search engines and to attract visitors/ backlinks.
5. Appearance — graphic design creating the optimal layout and visual style to reinforce the message being communicated.

Starting with quality content, the site must then meet functional requirements, ensure usability and visibility. Only once this is achieved can or should the appearance be decided.

A successful website is one that communicates effectively with its target audience. And what’s our primary means of communicating? Words. Copywriting is essential in effective communication and it’s no accident that the vast majority of online content is the written word.

Attention-grabbing headlines and ad copy, creative and memorable marketing messages, NLP and engaging web content, killer sales copy and strong calls-to-action… these all place different demands on the design.

In other words, web design is dictated by content and therefore by copy. Everything from the number of pages, structure, semantic XHMTL and onsite SEO to the layout… Copy should also have a huge influence on the appearance as both must work in harmony.

Photoshop is the final stage in a long design process — before you reach for it ensure you’re designing to maximise the value of the content, not producing pretty but ineffective decoration.

John Broughton is an SEO copywriter at Vivid Copy and you can find more of his copywriting articles on Escaping the Word Cage.

Setting up your profile.
There is more to setting up than just signing up. What you should do is upload an avatar which will represent you, upload a avatar, add your location, add a link to your website (if you have one) and add a 140 character bio. Doing these simple tasks will make your profile a look a lot better than someone who has just signed up and hasn’t bothered adding their details. Look at the images below and you will see that adding your info makes you look a lot more respectable.

Good Profile

Bad Profile


Finding Followers
The best way to find friends on twitter is if your friends already have twitter if they do you already have a head start, but here is a few tips into finding followers:

• Use twitter directories such as; TwitDir, Just Tweet It, Twellow, Wefollow and Twitter Link Up to find followers who are interested in the same thing as you.
• Use twitter searches such as; Twitter Search, Twitter Grader Search and Twitseeker to find people who you may know or who have the same interests as you.
• Use twitter trend sites such as; Twitscoop and Twitturly to find users are tweeting about things which interest you.

Interact with people
Now that your following people, you should interact with them here are a few tips:

• You can use the @ to reply to people example. “@thomasjhardy I agree Internet Explorer is rubbish!”.
• Retweet people’s links, “RT @thomasjhardy Google a great search engine http://www.google.com”. Make sure to check the site first don’t just RT everything you then run the risk of Retweeting spam.

Managing your twitter account
Managing your account wont be an issue when you first start but once you starting following over 100 people it will become harder to keep up with all the tweets just using the twitter site. This is where twitter apps come in, there are plenty around such as; Twhirl, Twidget and Mad Twitter, but the one I recommend is Tweetdeck.

Hashtags
When I first started at twitter I had no idea why everyone was using hashtags, so I thought I best add it in after Eris commented about it.

An example of a hashtag in use “I think google should buy twitter, no more fail whale! #failwhale #twitter #google #buy”. Now because of the hashtags this tweet would show up in twitter searches under the keywords which have been hashtagged.

Folder Setup

Ok first things first I set up my folders and my standard CSS setup.
First I created a folder for the site.

I then created two sub-folders called img and CSS, to contain the images and CSS files respectively.

Next I created 3 CSS files, called style.css, reset.css and master.css.

Here is what I inserted into all of this CSS files.

Style

@import url('reset.css');
@import url('master.css');

What this does is imports the other two css files in.

Reset

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, img {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

This resets all of the CSS, giving us a level playing field to start from.

The master.css file for now is empty.

Index
Now that we have a file structure set-up and the starting point for the CSS taken of, we will create our index.html

This code creates a XHTML 1.0 Strict page, and sets up the initial HTML, head and body tags as well as adding a title to the page and linking the page up to the css file’s in the head section.

Slicing the PSD

Now we are going slice the PSD up and get it ready for use on the web. The PSD we are using is a one we recently created in a tutorial on this site. If you haven’t already we recommend you check that tutorial(link to tut) out, but if you want you can just download the PSD from the one we made earlier.

The first thing we are going to slice up is the background, to do this we just cropped down the PSD like shown below.

We then saved this for the web (save into the img folder we created earlier) and undo what we did so we had the original PSD back.

The next we are going to slice is the header, again just cropped down the PSD, how we cropped it is shown below.

We then saved this for the web (save into the img folder we created earlier) and closed the PSD.

This was a very quick way of the slicing the image, we could of removed the logo from the header and saved that as a separate image but for this tutorial we decided to keep it as simple as possible.

The CSS

I am now going to walk you through how I created the CSS.

body
{
background: url(../img/bg.jpg) repeat-x #156cd5;
}

This is the body tag, I have the set the background the image I sliced earlier, I then set it to repeat-x so that goes all the way across the screen horizontally finally I added the colour from the bottom of the image so that once the image ran out the colour would continue down.

img {border: solid 3px #b0aeae;}
 
p {
padding-bottom: 5px;
}

The img tag adds a 3px solid border to all images, this could be changed to a class tag and then added to specific photos if you had some photos you didn’t want to have a border or have a different colour border etc.

The p tag adds 5px padding to the bottom of all paragraphs.

#wrap {
width: 738px;
height: 100%;
margin: 0 auto;
}

This id is the wrap which contains all of the site and is used to center the site, the width is 738px, the height is 100% therefore it stretchs to whatever the content is, the margin is set to 0 auto which automatically centres the site by splitting up the space left on either side of the wreap evenly.

#header {
width: 738px;
height: 151px;
background:url(../img/header.jpg)
}

This stes the width of the header to 738px the same as the wrap, the height is 151px as this is the height of the background image wee are using for this section, which is the header we took from the PSD.

#contentwrap {
width: 738px;
height: auto;
background: #e8e6e6;
}

This is the content wrap which will contain the navigation and page content. Again the width is 738px, this height is set to auto so it stretches dependent on what content you put in. The background colour is a light gray.

#navcontainer{
width:738px;
height: auto;
padding: 15px 0 5px 13px;
font-family: "Arial Black";
font-size: 14px;}
 
ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
 
#navlist li
{
display: inline;
list-style-type: none;
}
 
#navlist a { padding: 3px 10px; }
 
#navlist a:link, #navlist a:visited
{
color: #000;
background-color: none;
text-decoration: none;
}
 
#navlist a:hover, #active
{
color: #fff;
background-color: #000;
text-decoration: none;
}

This is the css for the navigation div, the nav ul (Unordered List), nav li (List Items) and any link states. The main things to take not of here is the display: inline; which make the li items display horizontally instead of vertically.

#content {
width: 738px;
padding: 10px 5px 3px 23px;
font-family: Helvetica, Arial;
font-size: 11px;
}
 
.itemleft {
width: 318px;
height: 183px;
padding-right: 10px;
float:left;
}
 
.itemright {
width: 352px;
float: left;
margin-left: 5px;
padding: 0 0 10px 10px;
}
 
.bottomcontent {
width: 692px;
clear: left;
margin-left: 5px;
padding-top: 10px;
}
 
.footer {
padding-top: 5px;
font-size: 9px;
}

This chunk of CSS is for the content area, it has a main ID to hold everything, it has has 4 classes two for the top area to hold the image on the left and the text on the right and one for the text and then one for the footer. The main thing to take note of is the clear: left in the bottom content, this means that no floating elements allowed on the left side of this class therefore this class will be position below the two above.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
	<head>
		<title>PSD to XHTML/CSS</title>
               <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	</head>
	<body>
	<div id="wrap">
 
	<div id="header">
	</div>
 
	<div id="contentwrap">
 
	<div id="navcontainer">
	<ul id="navlist">
	<li><a href="#" id="current">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Contact Us</a></li>
	</ul>
	</div>
 
	<div id="content">
	<div class="itemleft">
	<img src="img/landscape.jpg" alt="landscape" />
	</div>
	<div class="itemright"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper. Aenean arcu risus, imperdiet et, tempus in, interdum quis, massa. Donec magna elit, tincidunt gravida, egestas ut, vestibulum quis, lectus. Nullam porttitor. Nullam egestas mi eget mi malesuada condimentum. Fusce gravida libero non leo. Pellentesque nunc. Sed non augue. Nunc non risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vestibulum quam id purus. Ut dui est, vulputate quis, sollicitudin vel, sodales id, mauris. Praesent placerat, felis at hendrerit interdum, mauris odio malesuada mi, sit amet ullamcorper orci massa eu odio. Proin eros felis, pharetra vel, elementum et, egestas vitae, felis. Donec eget libero et magna ultricies euismod. Vivamus mi. Mauris dui arcu, facilisis vel, fringilla sollicitudin, sagittis eu, dui.</p>
	</div>
 
	<div class="bottomcontent">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper. Aenean arcu risus, imperdiet et, tempus in, interdum quis, massa. Donec magna elit, tincidunt gravida, egestas ut, vestibulum quis, lectus. Nullam porttitor. Nullam egestas mi eget mi malesuada condimentum. Fusce gravida libero non leo. Pellentesque nunc. Sed non augue. Nunc non risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vestibulum quam id purus. Ut dui est, vulputate quis, sollicitudin vel, sodales id, mauris. Praesent placerat, felis at hendrerit interdum, mauris odio malesuada mi, sit amet ullamcorper orci massa eu odio. Proin eros felis, pharetra vel, elementum et, egestas vitae, felis. Donec eget libero et magna ultricies euismod. Vivamus mi. Mauris dui arcu, facilisis vel, fringilla sollicitudin, sagittis eu, dui. Vestibulum quis orci vitae nulla mattis tempor. Fusce ullamcorper.</p>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper. Aenean arcu risus, imperdiet et, tempus in, interdum quis, massa. Donec magna elit, tincidunt gravida, egestas ut, vestibulum quis, lectus. Nullam porttitor. Nullam egestas mi eget mi malesuada condimentum. Fusce gravida libero non leo. Pellentesque nunc. Sed non augue. Nunc non risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vestibulum quam id purus. Ut dui est, vulputate quis, sollicitudin vel, sodales id, mauris. Praesent placerat, felis at hendrerit interdum, mauris odio malesuada mi, sit amet ullamcorper orci massa eu odio. Proin eros felis, pharetra vel, elementum et, egestas vitae, felis.</p>
 
<p>Donec vestibulum quam id purus. Ut dui est, vulputate quis, sollicitudin vel, sodales id, mauris. Praesent placerat, felis at hendrerit interdum, mauris odio malesuada mi, sit amet ullamcorper orci massa eu odio. Proin eros felis, pharetra vel, elementum et, egestas vitae, felis.</p>
 
<p class="footer">Made by WebDesignerHelp</p>
	</div>
 
	</div>		
	</div>	
	</div>
	</body>
 
</html>