Step 1: Getting Started

Setting Up The Layers

So lets get on with the tutorial. First thing to do is open up PS, (yes that’s short for Photoshop), and make a new image, sized at: 590×200. Then create a new group named Dark Button. This is obviously where the dark button is going to be placed. A new layer is now needed called BG. You can now delete the original Background layer that photoshop adds to every new file. Then fill in the BG layer, (which should be inside of the Dark Button group), with #1b1b1b.

Another new layer is now needed. First create the layer ‘Button’; this is where the actual button will be designed…But wait!…How will we position it? Well that’s where the helpful guides come in. Grab a guide from the top and place it 50px from the top. Another one 50px from the left then just continue with the right and bottom.

Step 2: The Button Design

So for the button we need to grab the Rounded Rectangle tool, (right click the Rectangle Tool. Keyboard shortcut is U). Make a selection inside of the guides like so:

The Layer Styles

Now the fun part happens. Making it look good. So for this we’ll use layer styles. The colours are: #474747 to #262626. Below I’ve included an image that demonstrates how to apply each layer style.

Step 3: The Text

It’s time to give our button some text. I’ve decided to go for a nice light colour with some drop shadow and a nice gradient. The first thing to do is to make a new text layer by either choosing it in the Text Tool or by hitting the shortcut key T. Now make a selection inside of the guides, it should be roughly 65px-70px in height. Here are the font options I chose:

• Typeface: Myriad Pro
• Font-Weight: Bold
• Size: 50px
• Anti-Aliasing: Crisp
• Align: Center
• Colour: #f1f1f1 (Colour doesn’t really matter since we’ll be using a Gradient Overlay)

Next thing to do to our text is to add the gradient and outer-glow. Just double click the layer and the layer styles box will appear. The colours used for the gradient are: #c6c6c6 to #ffffff. Here are the options I chose:

Step 4: The HTML & CSS3 Awesomeness

Let’s get this show on the road, shall we? So the first thing to do is set up our files, we need an index.html and that’s pretty much it. Next it’s the code.

The HTML

Let me explain. The HTML is all pretty basic, to be perfectly honest I wanted the HTML to take a back seat in this tutorial so all I’ve done is the following few lines:

<div id="container">
     <div class="button">
          <a href="#">CSS3 Button Baby!</a>
     </div><!--end .button-->
</div><!--end #container-->

The container is just used to center our fancy CSS3 button on the page; Then we have the actual button. If you’re going to use a selection of buttons, (like we have in our new design), then I would suggest using an Unordered List but for this a simple div will do. Inside of the Div we have an Anchor link to hold our text, this will also be the actual element to be selected in the CSS.

The CSS…With Added CSS3

This is where the tutorial actually gets interesting. Below I’ve included all the code used for the button. It may seem like quite a chunk to get through but if you keep reading then It’ll be planted firmly in your brain in no time at all!

Non-Commented Version

.button a {
    font-size:50px;
    font-weight:bold;
    color:#f1f1f1;
    text-decoration:none;
    padding:20px;
    display:inline-block;
    text-shadow:0px 0px 5px #000000;
    -moz-box-shadow:0px 0px 15px #000000;
    -webkit-box-shadow:0px 0px 15px #000000;
    border:1px solid #525252;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    background:#262626;
    background:-moz-linear-gradient(#474747 60%, #262626);
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#474747), to(#262626))
}

.button a:hover {
     border:1px solid #5e5e5e;
     background:-moz-linear-gradient(#525252 60%, #303030);
     background:-webkit-gradient(linear, 0 0, 0 100%, from(#525252), to(#303030));
 }
 .button a:active {
     background:-moz-linear-gradient(#262626, #474747 60%);
     background:-webkit-gradient(linear, 0 0, 0 100%, from(#262626), to(#474747));
 }

Commented Version

.button a {
    /*Font Values*/
    font-size:50px;
    font-weight:bold;
    color:#f1f1f1;
    text-decoration:none; 

    /*Fundamental Properties*/
    padding:20px;
    display:inline-block; 

    /*Shadow*/
    text-shadow:0px 0px 5px #000000;
    -moz-box-shadow:0px 0px 15px #000000;
    -webkit-box-shadow:0px 0px 15px #000000; 

    /*Border And Background Properties*/
    border:1px solid #525252;
   -moz-border-radius:20px;
   -webkit-border-radius:20px;
    background:#262626;
    background:-moz-linear-gradient(#474747 60%, #262626);
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#474747), to(#262626));
}

.button a:hover {
     border:1px solid #5e5e5e;
     background:-moz-linear-gradient(#525252 60%, #303030);
     background:-webkit-gradient(linear, 0 0, 0 100%, from(#525252), to(#303030));
 }

 .button a:active {
     background:-moz-linear-gradient(#262626, #474747 60%);
     background:-webkit-gradient(linear, 0 0, 0 100%, from(#262626), to(#474747));
 }

Explaining The Code

Since this is an advanced tutorial aimed at people with some experience handling CSS then I won’t go through explaining the #body and #container styling.

To start off with we have set a font-size for our button, this is very important because it will make our button more liquid than fixed, especially helpful if you want it to be flexible. Following the other basic font values, I’ve given it some padding to help give the text some breathing room.

We’ve also added a display:inline; property to the button. This now allows it to to be manipulated, as you would with a Div.

The Shadowy Effects

Now comes the CSS3! The first thing I’ve done is add some shadow, to the actual text and the outside of the button. We have to use the special code for Mozilla Firefox, (-moz-) and Google Chrome/Safari, (by using the WebKit property, -webkit-). If you’re wondering what the values of 0px 0px 15px #000000 mean then let me explain:

• 1.) 0px = The placement of shadow of the X Axis. That means left and right. It can also accept negative, aswell as positive values, (-3px, 3px).
• 2.) 0px = The placement of the shadow on the Y Axis. That means up and down. It can also accept negative, aswell as positive values, (-3px, 3px).
• 3.) 5px/15px = This is referring to the amount of blur on the shadow.
• 4.)As you may have guessed, the #000000 is the colour of the shadow. If you didn’t know that, then please stop reading this tutorial and go and learn what #HEX values are.

The Border Radius

You may notice that the border properties are targeted the same here as with the shadow effects, by using -moz- and -webkit-. Even though I’ve only given one parameter here, (20px, which means round the corners by 20px on each side), you can also have a custom radius on each corner. Try pasting 20px 10px 5px 30px in the place of the single 20px value. You’ll notice that each corner now has a different radius. The first 20px value is for the top left, the second the top right, the third the bottom right and the fourth the bottom left. Just like using the margin property.

The Awesome CSS3 Gradients!

We finally get to the part you’ve been waiting for, the gradients! First we have the Firefox specific gradient. Here’s a run down of everything included for FF.

• 1.) -moz-linear-gradient – This can be used to specify whether our gradient is going to be either Linear or Radial. In this case I’ve used linear.
  • 1.) We start with the lighter colour at the top of the gradient. We make it so it covers a little more of the button, (60%), than the darker colour used.
• 2.) -webkit-gradient – This one can look a little tricky at first, but no worries, in just a few seconds it”ll be embedded into your brain. Also this property does not disclose the type of gradient in the value name.
  • 1.) Firstly we declare that it will be a linear gradient.
  • 2.) We then declare where it will be placed. In this example we have 0 0 (from the left and from the top – top left).
  • 3.) Next is giving the size of the gradient. Here we have 0 100% which means start at the very top, (0), and go to the very bottom, (100% of the element).
  • 4.) After that I think the rest is pretty self-explanitory. Just which colours we’re using.

Final Thoughts

In conclusion I would like to say a big thank you to those people who have stuck around through-out this tutorial. If you have any thoughts, be sure to share them below.

Please Note: This tutorial is almost a carry on from an earlier tutorial I did titled Enhance Your Designs With Simple Techniques.

I’ve found that the best way to learn is to actually get your hands dirty and dig straight in. So here we have our first example, a simple search box with a search icon. The first version to the is a pretty bare-bones example of a basic search box. It’s functionality is obvious to the user.

As you can see in the second version to the right, I’ve given this nice, simple search box more depth and visual appeal by adding the following:

• Very light inner-shadow along the left and top sides of the input field.
• Given the button/icon a nice gradient.
• Added some text. Typography can affect design in more ways than you may realize.

The Navigation

Ahhh the nav, it’s an element that can really make or break a design. There’s definitely a set of certain challenges when giving any project navigation because almost every site has there’s designed differently. Below I’ve again designed a basic element and then transformed it into something more appealing.

OK then, so in the above example there haven’t really been that many changes made; however what I’ve done is try and illustrate the difference between a good piece of design and an out-dated piece of design. The first example is nice enough, it’s not terribly ugly, as I’m sure you know some navs can be and it does what it is suppose to do. The problem is that the design is out-dated by a few years, an obvious point here is the underline and the non-current links.

The second example gives a more up-to-date affect because of two reasons. The first is the way the links are setup, it’s obvious which is the current page link. The second is the single highlight going around the inside of the darker border.

I know from experience that this could have been designed a million different ways but for the sake of this tutorial I wanted to keep it simple with as little changing of the basic design as possible.

The Footer

Now we’re onto the last part of this tutorial, the footer. For this section I’ve designed a nice simple footer, a thick border at the top to give it some detail and just three nicely aligned columns.

Click Image For A Larger Version

In the second version I’ve given some real depth to the footer so that it really catches your eye. The first thing that’s changed is the thick border at the top, as you can see I’ve been able to add detail by first making it look indented. This is a really simple effect that can give your design something fresh. Just make it darker than the actual footer. Then add a border to it that’s a little bit lighter than the lightest background colour. Then to give it even more detail I gave it a very fine gradient. Here are all the details:

• The top border has been refined.
• The hover effect of the links has also been given the same refinement.
• An underlining separator has been placed underneath the headers.

I used the font ‘Blue Highway’ not only for the headers but also for the links. I decided on this since we now have the use of services such as Cufon and developers have also started to use Font-Face a lot more now.

If you want to then you can download the Blue Highway font here. So if you’ve got any good short techniques that you’d like to share in the comments below don’t be afraid to tell us.

Personally I love to use sketches, the reason is that I’m a perfectionist and by perfectionist I mean an OCD style perfectionist. Which means that I can waste alot of time creating a wireframe only too trash the whole thing because I can’t get something to look right. As you can imagine, that would waste alot of time for me and a current client or personal project.

A common misconception I’ve found with sketching a design is that it’s a time waster, actually the method is far from it, if you do it right. So lets start of with a simple web 2.0 design sketch.

We’ll start by laying out the ‘Guides’. Here I’ve just given my page a basic border to get me started. If you’re going to go all out on ‘Guides’ then make the outside border heavier than the inner ones.

Note: Before any says it, yes I know I had the paper upside down

Click for a larger size image.

Now that we’ve got our basic outline drawn out we can start adding the content. I always start from top to bottom, (as I’m sure almost everyone would), lets add the logo and tagline.

Click for a larger size image.

The Navigation & Featured Area

I’ve tried to make the design a little different while still keeping it with that Web 2.0 feel, so I’ve joined the Navigation and Featured area together to give a rather stylish effect to it. The point here is that as you add elements you start to get an image in your head of the colours and just how it would look on the web.

You’ll notice that there are three key features here. The first is the rounded corners effect on the top of the Nav and the bottom of the Featured Area. If you’re not clued up on your rounded corners info then let me explain.

The main reason why rounded corners work so well is because they separate themselves from content, for example, straight corners can connect to another element with out leaving any white space; However rounded corners do, so they give a separated effect. As you may have noticed that then gives an even more connected effect to the Nav and Featured Area.

Click for a larger size image.

As I mentioned with the Connect and Disconnected effect, this has the same meaning for the search box aswell by keeping one edge straight yet the other rounded.

Also there are a few features in the Featured Area but there not as important to the design as the previous things I’ve mentioned so lets just move on

The Body Styles & Footer

OK I know I’m probably the only person one earth who calls the rest of the design The Body Styles but ol’ well. The body styles are something which no one ever seems to change, especially in web 2.0 and I’m not going to break that tradition.

Click for a larger size image.

All I’ve really done for the body copy is fill the space but leave enough to the imagination to later on consider adding icons and such. I’ve also added a small image under the text to give it some life; Because nobody likes to just read and read and read…Unless it’s a book but that’s different

Conclusion

If you’re still here then thanks for sticking around to look at my crappy drawing skills. I know I couldn’t draw anything to save my life but creating wireframes this way is just easier for me incase I need to quickly change something. I strongly urge you to give it a go on your next design project.

I’d like to take this chance to explain to the younger-in-mind CSS coders out there, (It means your at the beginner/intermediate level), how to solve the strange no-height issue when floating child elements. I’ve seen this problem affect many advanced coders as well as the newbies, and this is it:

Or

Yes, We’ve all been there. It’s a problem where the Parent element doesn’t recognise the Child elements, only the Child element’s Paragraph tags. Your code will look something like this:

The Problem

(x)HTML

<div id="parent_element">
	<div class="child_element">
		<p>Left</p>
	</div>
	<div class="child_element2">
		<p>Right</p>
	</div>
</div>

CSS

#parent_element {
	width:600px;
	padding:20px;
	border:1px solid #ccc;
	background:#e6e6e6;
}
.child_element {
	width:260px;
	height:50px;
	float:left;
	background:#666;
}
.child_element2 {
	width:260px;
	height:50px;
	float:right;
	background:#666;
}

The Result:

Not Pretty, Is It?

Solving The Problem With Display:Inline-Block;

We only need to add one thing. Take a look, I think I’ve made it pretty obvious :

CSS

#parent_element {
	width:600px;
	padding:20px;
    /***Right Here***/ display:inline-block; /***That's Right!***/
	border:1px solid #ccc;
	background:#e6e6e6;
}

The Magic At Work:

Final Thoughts & Wise Words

All I can say is that it works perfectly. However you can’t center the Div using margin:0px auto; so just add another wrapper. I also realize that there are other ways to fix this issue. However this one works best for me because I’m used to using it. If you enjoyed this or think I’ve failed epically, leave a comment below!

If you are a web developer and have never seen a Syntax Highlighting plugin before then here are the basics:

• They’re mainly used for highlighting syntax, (showing the code), that would otherwise be interpreted by the browser as normal code. In short it stops the browser from outputting the code.
• Most Syntax Highlighters can output many different languages such as (x)HTML, CSS, PHP, javaScript etc…

So lets take a look at the best Highlighter I personally know of: SyntaxHighlighter by Alex Gorbatchev. Yes i know that page with the bright yellow looks very intimidating right now but not to worry that’s why I’m here

Step #1: Downloading The Source Files

So lets go over and download the source files that we need to get the highlighting working.

You should have this:

Step #2: Creating Our HTML File

Now we need to make a HTML page to test our new toy, (yes I am still talking about the Highlighter ).
So set up a page with the following values and Divs etc…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>The SyntaxHighlighter Tutorial Files - By KayRoseDesign</title>
</head>
<body>
	<div id="wrap">
		<div id="container">
			<h2>Everybody Was 'Syntax Highlighting'!</h2>
		</div>
	</div>
</body>
</html>

Just a pretty basic html page.

Step #3: Setting Up All Of The Files

It’s time to get everything in place so that we can link to them the next step; your folder should look as follows:

So we need to add the files named shBrushXml.js and shCore.js into our JS folder. The we need to add the shCore.css and shThemeDefault.css in our CSS folder.

Linking To The Files

In the header section below the title tag, add the following links:

<script type="text/javascript" src="js/shCore.js"></script>
<!-- At least one brush, here we choose XML. You need to include a brush for every language you want to highlight -->
<script type="text/javascript" src="js/shBrushXml.js"></script>

<!-- Include *at least* the core style and default theme -->
<link href="css/shCore.css" rel="stylesheet" type="text/css" />
<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />

As you can see each part has been described very well be Alex Gorbatchev.

Step #4: Adding Some JavaScript

Now we’re onto the last step, yay!
So we only need to add one more piece of javaScript, and here it is:

<script type="text/javascript">
	SyntaxHighlighter.all()
</script>

Just put it below the links to our javaScript file and Voila!

Outputting Some HTML!

Lets show our code shall we?
Well all we need to do is out in some pre tags, like so:

<pre class="brush: xhtml">
<h2>Hello, World!</h2>
	<p>
		Paragraph Tags!
	</p>
	<p>
		<strong>Strong Tags within Paragraph Tags!</strong>
	</p>
</pre>

And the output will looks like so:

I hope you enjoyed this quick tutorial. If you did then leave a comment telling me why you liked or telling what I did wrong!

Final Code

/**
  * Easy Gallery jQuery Plugin
  * Author: Drew Douglass
  * Version: 0.1
  *
  *
  */
(function($){
  	$.fn.easyGallery = function(settings) {

  		//setup some options
  		var opts = $.extend({}, $.fn.easyGallery.defaults,settings);
  		return this.each(function(setting){
  			var options = $.extend({}, opts, $(this).data());
  			$(this).hover(function(){
  				$(this).siblings().stop().animate({
  					opacity: options.opacity
  				},options.duration);
  			}, function(){
  				$(this).siblings().stop().animate({
  					opacity: options.originalOpacity
  				},options.duration);
  			});
  		});

  	}
  	$.fn.easyGallery.defaults = {
  		duration: 500,
  		opacity: 0.5,
  		originalOpacity: 1
  	}
})(jQuery);

Helpful Resources

• A Plugin Development Pattern – Learning jQuery
• Plugin Files/Github Repo

Thank to Jarel Remick for providing the free demo images.

• Program: Photoshop
• Version: CS4
• Difficulty: Easy
• Estimated Completion Time: 30 minutes

Step 1

Let’s start with an idea. If you create this for someone, chances are you have a basic sketch in front of you or at least in your mind an image of how this will look. If you are willing to sell your design as stock, make sure your work is as clean as possible. People like simple, obvious things. When you look at the card, you don’t want to search for the phone number hidden between some design elements do you? So the two things which must be highly visible on the first look is the name and the number. The rest is small text, which shouldn’t be left out. Only if that is the specific need, of course.

So, for this tutorial I’ve chosen a simple and easy design which is not that hard to follow. Nothing fancy or extraordinary, the focus of this tutorial is introducing you to the standards and a quick look on how this is made. Also, you might want to create a 2 sided card. For that, you’ll need to finish this side. Then you can copy it and remove unnecessary text areas and write a company name for example.

This is what we’re going to do today:

Step 2

The dimensions. Before we start, let me explain you how a business card is created. The print company needs a well set up card design, especially if you are serious about it. They might accept less sophisticated files but the end product will not be what the customer wanted. So, the process is the following: They print your card in a bigger size than the end-size. Why? Because they’ll cut it to the final size. Because of this, you’ll need to add a bleed area. The reason behind the name is that the ink will exist on the very edge of the paper as well.

The standard end-size is 3.5" by 2". Bleed area means an extra 0.25" in both directions. Which means 0.125" on each edge. So the working size will be 3.75” by 2.25”.

Step 3

Start by creating a new document. File -> New. Fill out the dimensions – width: 3.75 inches and height 2.25 inches. (If you are not working in inches you can switch here. Or set it in Edit -> Preferences -> Units & Rulers.) Set the color profile to CMYK. It’s important! Do not miss it or you are going to be in some trouble. It’s better to set it in the beginning than in the end when you are finished, and say: oops it should’ve been CMYK. You change the color profile then bam all your colors look different. Don’t worry I’ve got a solution for that problem too but let’s just stay safe for now. Last but not least 300dpi is a must. Do not ever user 72 or anything less than 300 if you are going to print it. You can, but it will look really ugly. Or small if printed with 300dpi anyway. So, set it to 300 then continue to step 4!

Tip: Save the preset to speed up future designs.

Step 4

We’ll add guides to know where to and where not to place artwork and text. Start with the bleed area. The most precise way to add our guides is the following: View -> New Guide…

We need to enter the following numbers:

• Vertical 0.125 in (left)
• Horizontal 0.125 in (top)
• Vertical 3.625 in (right)
• Horizontal 2.125 in (bottom)

I just calculated simply like 3.75-0.125=3.625 etc… You’ll see that anything you place outside this newly formed area will be most likely cut.

Step 5

Before we can work on the actual design there is one more thing to do. To mark the no text area. It’s again a 0.125" space on each side.

So add these too:

• Vertical 0.25 in (left)
• Horizontal 0.25 in (top)
• Vertical 3.5 in (right)
• Horizontal 2 in (bottom)

These are just for you, the print doesn’t really need guides. They need a card which is designed with these things in mind, (this is basicaly padding).

Step 6

The previous steps included everything you need to get started. Follow the rest and you’ll learn a bit more about this! I’d start with a gradient. To do that add a gradient adjustment layer. Click on the 4th icon at the bottom of the layers window, then choose "Gradient…" from the menu. Set it from the color #3a5790 -> #0e2138.

It’s a dark blue gradient. Check Dither to avoid ugly stripes. Angle it by -45, and it will be a linear gradient.

Step 7

In this step we’ll add some texture to the gradient so it will look much better. Create a new layer then go Filters -> Render -> Clouds. Make sure your colors are black and white. If not just click the little black and white icon next to them on the main toolbar. Set this layer’s composition mode to Hard light. Then Image -> Adjustments -> Brightness/Contrast. Check the legacy box, then lower contrast to -80. Voila.

Step 8

Now get a nice font from dafont.com. I’ll use the Harabara.

Step 9

Add a text area for the name, and type in Johnathan Doe. Make it 120 pixels big. Align to the right. Place it near the no text guide.

Step 10

Add 2 more text areas. One for the title and another for the number. Title is 75px, the number is 84px big in my case. The number ends up as wide as the title. The point is that they form a text block this way.

Step 11

Add 2 more text areas again. One for the email-website combo and an other one for the multi-line address. Align left the address, right the other. Use 30px font size. Try to position them nicely, so put them always the same distance from the no text guides. I move them with 2 presses of the shift+arrow combination when working at the zoom of 66%. (These pictures are at 50%.)

Step 12

Here you can add a custom artwork or logo. Let’s place a fancy line there. We’ll make a basic wavy thing out of it soon. Select the Polygonal Lasso (Shift+L twice) and on a new layer draw a line shape with a little bit more width on the left than right. Then fill it with white (Paint Bucket – hot-key: G).

Step 13

Add an outer glow layer style (double click on the line layer) with these settings: vivid light mode, 100% opacity, white color, softer technique, 0% spread, 40px size, 20% range. It should look like a light-saber.

Step 14

Go to Filter -> Liquify and choose the Bloat tool. Be extra careful with this, we only want a thin wavy line with changing width. I don’t know about you but I don’t like the pen tool, for this effect liquify is very natural and good. Don’t make the line too wide because the edges will become jagged and will look like an up-scaled drawing. So let’s just make it wavy, with a tiny variation in width. If you are not satisfied with the result you can liquify again and/or paint over it with a 10% opacity white brush.

Step 15

Almost at the end, but our text areas need a little effect. A drop shadow will do the trick, add a 30% opacity shadow in the layer style of one of the text layers. Make the shadow color rich black. Manually type 100% into the C, M, Y, K fields in the color chooser. This is important whenever you use black in CMYK. If you use 100% K and others 0% it will still look black on the monitor but in print it will look dark grey…

Step 16

Right click on the layer you’ve just added the layer style to and copy layer style. Select the rest of the text layers, right click then paste layer style. Voila.

Step 17 – Optional…Sort Of

Important note: ONLY do this if you forgot to set to CMYK in the beginning! I’ve included this tip because it can happen to anyone, and here is the solution.

I have to admit, on my first attempt at creating a card I forgot to set the color mode to CMYK. If it happens don’t panic. You can change it now, but it’s not as straightforward as you think. First try it out, from the Image -> Mode -> CMYK Color. It looks totally bad isn’t it? I mean, it has nothing to do with what we’ve been doing. You can flatten the whole image then do the conversion so it’ll look good but you can’t edit the layers after that. And flattening is truly a no-no!
Thanks to smart objects we can skip this problem very nicely. Select all your layers (you can leave out the text layers), and convert them together to a smart object: right click menu -> Convert to Smart Object. Then do the color mode change as mentioned above. Dialogs will appear, but you are not going to rasterize, merge, nor choose a different profile. If you need any more editing done, you can do so in the smart object (double click on it), which is still in RGB mode, haha!

Step 18

If you are planning on uploading the card to a stock graphics market, or just show it around on the net, create a slice along the bleed area guides. Then use File -> Save for Web & Devices. And create color variations (this is mostly a combination of adjustment layers such as hue/saturation placed above the background but below the wave artwork).

Step 19

You’ve reached the end of this tutorial. Thank you for reading, I hope it was useful, and I wish you luck in your future designs. Here is our finished card without the bleed area. I did a warm version too just for fun. I’d appreciate if you would take a look at my first business card here. Leave a comment below with your thoughts and/or tips.

Final Result

You can see a live preview here.

Before We Begin

We need to create the folder we’ll be working in. I’ve called it “coding tutorial” but that doesn’t matter, really. In that folder, create the sub-folders “img” and “css”.

Step 1

Let’s start by opening the file we created in the last tutorial. If you lost it, you can download it again.
Now, we’ll need to get the background images and such from the file we created last time. This technique is called slicing. There are many ways of slicing a PSD file, but I’ll use the simplest way for this tutorial. We’ll grab one image for the header and feature area, and one image for the projects bar. We can set the other background colors with CSS.

We’ll also need the generic thumb icon for the project images. First, disable all the text layers by clicking on the eye icon next to the “Text” folder. Now take the single column marquee tool and make a long vertical selection. Exclude the body, projects bar and footer from the selection by clicking on their layers while pressing ctrl-alt.

You should now have a long selection of the header and feature area. Crop (Image > Crop) and Save for Web & Devices (File > Save for Web & Devices). This strips all the excess information from the image, like date and camera info. As we need our website to load as fast as possible we make the images as small a possible. Save as a PNG-24 in the folder called “img”. Call it “bg.png”.

Step 2

Ctrl-Z, (undo), a few times until you have the original file again. Now take a piece of the projects bar. Make a long vertical selection and exclude everything except the projects bar. Crop and Save for Web and call it “projectsbg.png”.

Step 3

We still need the generic thumbnail. Ctrl-click the thumbnails layer, Crop and Save for Web as “genericthumb.png”. That’s it, we’re done in Photoshop! Don’t close it yet though, because we still wan’t to copy and paste the text – it saves a lot of time later on.

Step 4: Code Editor

Mac

Open up your favorite code editor. I’ll be using Coda from Panic Software. Another good alternative for Mac is Textmate from Macromates.

Windows

Intype is a great little editor for the windows users out there, with bundles etc…

Other

Dreamweaver from Adobe is a well-known cross-platform code editor.

Pick whatever works for you. First, we’re going to do the markup, (html). It’s a good practice to do the markup first, and then the styling. Right, lets create “index.html”. Once you’ve done that, we’ll be making the basic structure of an HTML file. We need to declare the Doctype and encoding first. It’s a line of code that tells your browser what type of HTML we’re using. It looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Next, we need to add the html, head and body tags. Also we’ll need to link to a stylesheet. We don’t have one yet, but we’ll be creating one soon. Your HTML file should look like this after you’ve added the neccesary tags:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

</head>
<body>

</body>
</html>

Step 5

I recommend saving this structure for future use. Everytime I create a new website, I use the structure from a previous site. This saves a lot of time.

Let’s add the page title. Type “John Doe’s Website” between the title tags, like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<title>John Doe's Website</title>

</head>
<body>

</body>
</html>

Step 6

Before we can start coding the content, we have to have a vague idea of our layout. Usually you can do this in your head, but for the sake of explanation, I created an image.

Step 7

Finally, we can start with the content! We’re going to add a “container” div first. Why? Well, a container div is a box around all of the other content. This makes it easy to center the site in the browser and position the elements.

If you don’t understand just yet, just follow along, you will later. So, add a div with an id of “container”. Inside that div, create a div with the id of “header”, one with the id of “feature”, one with the id of “body”, “projects” and finally the “footer”. Your markup should look like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<title>John Doe's Website</title>

</head>
<body>

<div id="container">

	<div id="header">
	</div>

	<div id="feature">
	</div>

	<div id="body">
	</div>

	<div id="projects">
	</div>

	<div id="footer">
	</div>

</div>

</body>
</html>

Step 8

Right! Let’s add the text “logo” in the “header” div. Make it an “H1″ tag, as it’s the most important text on the entire page.
Now make an unordered list for the navigation:

<div id="header">
	<h1>Logo</h1>

	<ul>
		<li><a href="#" title="">home</a></li>
		<li><a href="#" title="">about</a></li>
		<li><a href="#" title="">blog</a></li>
		<li><a href="#" title="">contact</a></li>
	</ul>
</div>

Does the above dazzle you? If so, let me explain: an Un-Ordered list, (ul), defines the start and the end of an Un-Ordered list, a List Item, (li), defines the start and the end of an entry in the list, an Anchor, (a), makes the text a link, and the href and title attributes link to a webpage and define the link description, respectively.

The href links to “#”, and that’s a placeholder for now. “#” simply links to the top of the page. Take a look what we’ve made in a browser. Just double-click your HTML file!

Step 9

Onto the feature, add “Hey there, I’m John Doe” in the feature div, wrapped in h2 tags. Also copy and paste the “lorem ipsum”, wrapped in h3 tags.

<div id="feature">
	<h2>hey There, I'm John Doe</h2>
	<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum ullamcorper elit vestibulum luctus. Curabitur.</h3>
</div>

Step 10

Now it’s time to add a “Let me introduce myself” in h4 tags. We’ll need to make some new divs as we have two columns. We are now working on this part:

So, add this in the ‘body’ div:

<div id="body">
	<div id="column1">

	</div>

	<div id="column2">

	</div>
</div>

In the first column, add

<h4>Project 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
Cras ut diam vitae lectus rhoncus consectetur sit amet in lectus.<br />
Donec non tortor a lectus molestie ullamcorper.<br />
Nam imperdiet ullamcorper mi, in gravida elit accumsan.<br />
</p>

<h4>Project 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
Cras ut diam vitae lectus rhoncus consectetur sit amet in lectus.<br />
Donec non tortor a lectus molestie ullamcorper.<br />
Nam imperdiet ullamcorper mi, in gravida elit accumsan.<br />
</p>

Explanation: Paragraph tags, (p), sets the start and the end of a paragraph, the Break tag, (br), is basically a line break. Pressing “enter” won’t work in HTML, because it doesn’t interpret any other whitespace besides one space. We’ve added these purely for learning purposes, if you don’t specify any Break tags the text will automatically go to a new line when it reaches the maximum width for the Div it’s in, (you’ll understand once we get to the CSS coding later on).

Add the same text in column two and replace “Project 1″ with “Project 3″ and “Projects 2″ with “Project 4″.

Step 11

Next we’re going to work on the projects section, In the div “projects” add:

<h2>Projects:</h2>

<a href="#" title="Project 1"><img src="img/genericthumb.png" alt="Project 1" /></a>
<a href="#" title="Project 2"><img src="img/genericthumb.png" alt="Project 2" /></a>
<a href="#" title="Project 3"><img src="img/genericthumb.png" alt="Project 3" /></a>
<a href="#" title="Project 4"><img src="img/genericthumb.png" alt="Project 4" /></a>

Step 12

The last part of the markup! In the “footer” add, in an Un-Ordered List, (ul, li), links for home, about, blog, contact, twitter and support. Try to figure it out yourself, you should have the knowledge by now. If not, here’s how it should look like:

<ul>
	<li><a href="#">home</li>
	<li><a href="#">about</li>
	<li><a href="#">blog</li>
	<li><a href="#">contact</li>
	<li><a href="#">twitter</li>
	<li><a href="#">support</li>
</ul>

And that’s it for the markup! Here’s how our HTML file should look like so far and a screenshot of our file in a browser.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>John Doe's Site</title>
<link rel="stylesheet" href="css/style.css" type="text/css" ></link>
</head>
<body>
<div id="container">

	<div id="header">
		<h1>Logo</h1>
		<ul>
			<li><a href="#">home</a></li>
			<li><a href="#">about</a></li>
			<li><a href="#">blog</a></li>
			<li><a href="#">contact</a></li>
		</ul>
	</div>

	<div id="feature">
		<h2>Hey there, I'm John Doe.</h2>
		<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
			Cras ut diam vitae lectus rhoncus consectetur sit amet in lectus.<br/>
			Donec non tortor a lectus moletie ullamcorper.<br/>
			Nam inperdiet mi.<br/>
		</h3>
	</div>

	<div id="body">
		<h4>Let me introduce myself!</h4>
		<div id="column1">
			<h4>Project 1</h4>
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
			Cras ut diam vitae lectus rhoncus consectetur sit amet in lectus.<br/>
			Donec non tortor a lectus molestie ullamcorper.<br/>
			Nam imperdiet ullamcorper mi, in gravida elit accumsan.<br/>

			<h4>Project 2</h4>
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
			Cras ut diam vitae lectus rhoncus consectetur sit amet in lectus.<br/>
			Donec non tortor a lectus molestie ullamcorper.<br/>
			Nam imperdiet ullamcorper mi, in gravida elit accumsan.<br/>
			</p>
		</div>

		<div id="column1">
			<h4>Project 3</h4>
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
			Cras ut diam vitae lectus rhoncus consectetur sit amet in lectus.<br/>
			Donec non tortor a lectus molestie ullamcorper.<br/>
			Nam imperdiet ullamcorper mi, in gravida elit accumsan.<br/>

			<h4>Project 4</h4>
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
			Cras ut diam vitae lectus rhoncus consectetur sit amet in lectus.<br/>
			Donec non tortor a lectus molestie ullamcorper.<br/>
			Nam imperdiet ullamcorper mi, in gravida elit accumsan.<br/>
			</p>
		</div>
	</div>

	<div id="projects">

		<h2>Projects:</h2>
		<a href="#" title="Project 1"><img src="img/genericthumb.png" alt="Project 1"/></a>
		<a href="#" title="Project 2"><img src="img/genericthumb.png" alt="Project 2"/></a>
		<a href="#" title="Project 3"><img src="img/genericthumb.png" alt="Project 3"/></a>
		<a href="#" title="Project 4"><img src="img/genericthumb.png" alt="Project 4"/></a>
	</div>

	<div id="footer">
		<ul>
			<li><a href="#">home</a></li>
			<li><a href="#">about</a></li>
			<li><a href="#">blog</a></li>
			<li><a href="#">contact</a></li>
			<li><a href="#">twitter</a></li>
			<li><a href="#">support</a></li>
		</ul>
	</div>

</div>

</body>
</html>

Step 13

Ooh, exciting! We can start doing the css! This is going to be fun, I promise. So, let’s start by making a new file called style.css, and place it in the “css” folder. I like to start my css files by making a structure. I make three different categories with comments: “General”, “Typography” and “Style”. Then I make some sub-categories: “Header”, “Feature”, “Body”, “Projects” and “Footer”. It looks like this:

/*--- General ---*/

/*--- Typography ---*/

/*--- Style ---*/

/* Header */

/* Feature */

/* Body */

/* Projects */

/* Footer */

As you can see the different sections are the same as the id’s of the divs in the html.

Step 14

Before we get all too deep in the CSS, I’ll tell you how it works.

The story of the box model

All elements in HTML can be considered boxes. They can contain an image, or some text, or even nothing!
We can give these boxes a color with css, but we can position them too, also using css. We use margin and padding to position them, see the image below for reference.

Step 15

Alright, we need to get rid of the default margins and paddings the browser assigns to the elements, (in most browsers there is default styling already in place, that’s sort of why people complain so much about IE6, because it doesn’t have very good pre-set default margins, among other things).

To do this we add this little line:

body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px;}

As you can see, it sets all the margins and all the paddings of the body, div, img and text values etc. to zero. This eliminates nasty surprises for later on from other browsers such as IE and Opera.

Step 16

Let’s give the site a background color and such. To do this, we’ll modify the body – not the div called “body”, but the body of the HTML file. We’re going to give it a background-color of #142a5b, a background-image that repeats horizontally, and we’re going to set a base font size to work with.

body {
	background-image: url(../img/bg.png);
	background-repeat: repeat-x;
	background-color: #142a5b;
	font-size: 62.5%;
}

Look at it in the browser, you’ll see we have a fancy background!

Step 17

We’re going to set the width of the “container” div. As you can measure in Photoshop, the width should be 900 pixels. We’ll also need to center it. This can be tricky, but once you know how to do it it’s really easy. We’re going to add a margin to both sides of the container, and force them to be exactly the same size – because they’re both the same size, the container will be positioned in the center.

#container {
	margin: 0 auto;
	width: 900px;
}

Step 18

Do a browser check, and you’ll see that our layout is centered! And that’s it for the “General” category. Now, the typography. We’ve already defined the base font size: 62,5%. This makes 1em equal to 10px (em is the font value we’ll be working with – it’s bad habit to use pixels as a font size). Examine the fonts in Photoshop, we’ll discover that H1 is the color #c8d7dc, at a size of 40px, it’s bold, and of course the font is Arial. Also it’s about 20px down from the top. Translated to CSS this is:

h1 {
	color: #c8d7dc;
	font-family: Arial, helvetica, sans-serif;
	font-size: 4em;
	font-weight: bold;
	padding-top: 20px;
}

Editors Note: As you can see, each value is quite simple to understand, it’s remembering those values that can be tricky. Try typing it out as put above, then delete it, then type it again, and repeat maybe 3-5 times untill you remember it by hand, now don’t just keep on and on repeating it if you can’t remember it, just carry on with this tutorial and use my little tip through out, after a while it’ll be imprinted on your brain ~ KayRoseDesign.

Step 19

Now we need to do the navigation. This is a lot of work, but it’s not hard. We need to eliminate a list-style, and we need to give it about 40px padding-top. The li needs 5px padding left and right – this spaces the navigation links out. Finally the color of the links is #c8d7dc, the font is Arial, size 16px. Also, we want an underline on links we hover on. Follow my lead:

ul {
	list-style: none;
	padding-top: 40px;
}

ul li {
	padding-left: 5px;
	padding-right: 5px;
}

ul li a {
	color: #c8d7dc;
	font-family: Arial, helvetica, sans-serif;
	font-size: 1.6em;
	font-weight: normal;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

Step 20

Wait! The navigation isn’t aligned to the right, and the links aren’t on the same line! How do we do that? We add a float: right on the “ul”. It works as you’d expect: it floats the element in question to the right. However, it wont be on the same line as our logo. To do that we need to add float: left to the logo. That pushes both of the elements in opposite directions, and they fit next to each other, on the same line. Also we need to add a float: left on the “li” element. Those are a lot of floats! Check it out:

h1 {
	color: #c8d7dc;
	font-family: Arial, helvetica, sans-serif;
	font-size: 4em;
	font-weight: bold;
	float: left;
	padding-top: 20px;
}

ul {
	list-style: none;
	float: right;
	padding-top: 40px;
}

ul li {
	float: left;
	padding-left: 5px;
	padding-right: 5px;
}

Step 21

Ugh, now there’s text all over the place! That’s because we floated items in opposite directions! To prevent this, we’ll add a “clearing div”. Basically, it clears up right and left. If we place a clearing div beneath our navigation, our problem should be solved. We need to go back to our HTML file and add:

<div class="clear"></div>

Then in our CSS file, under the category general, add:

.clear {
	clear: both;
}

Step 24

Practise time! Let’s test your skills. Translate the following data to CSS:

h2

• color: #244386
• font-family: Arial, helvetica, sans-serif
• font-size: 4em
• font-weight: bold
• text-align: center

#projects h2

• float: left
• padding-left: 20px
• padding-right: 20px
• padding-top: 25px

h3

• color: #244386
• font-family: Arial, helvetica, sans-serif
• font-size: 2.4em
• font-weight: normal
• text-align: center
• padding-top: 20px

h4

• color: #85b2d3
• font-family: Arial, helvetica, sans-serif
• font-size: 3em
• font-weight: bold
• text-align: center

h5

• color: #85b2d3;
• font-family: Arial, helvetica, sans-serif
• font-size: 1.2em
• font-weight: normal
• text-align: center

h5 a

• color: #85b2d3
• text-decoration: none
• padding-left: 5px
• padding-right: 5px
• padding-bottom: 20px

p

• color: #85b2d3
• font-family: Arial, helvetica, sans-serif
• font-size: 1.6em
• font-weight: normal
• text-align: justify

strong

• font-weight: bold

Have you succeeded? Great! If not, here’s the CSS for the above.

/*--- Typography ---*/
h1 {
	color: #c8d7dc;
	font-family: Arial, helvetica, sans-serif;
	font-size: 4em;
	font-weight: bold;
	float: left;
	padding-top: 20px;
}

h2 {
	color: #244386;
	font-family: Arial, helvetica, sans-serif;
	font-size: 4em;
	font-weight: bold;
	text-align: center;
}

#projects h2 {
	float: left;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 25px;
}

h3 {
	color: #244386;
	font-family: Arial, helvetica, sans-serif;
	font-size: 2.4em;
	font-weight: normal;
	text-align: center;
	padding-top: 20px;
}

h4 {
	color: #85b2d3;
	font-family: Arial, helvetica, sans-serif;
	font-size: 3em;
	font-weight: bold;
	text-align: center;
}

h5 {
	color: #85b2d3;
	font-family: Arial, helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: normal;
	text-align: center;
}

h5 a {
	color:  #85b2d3;
	text-decoration: none;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 20px;
}

p {
	color: #85b2d3;
	font-family: Arial, helvetica, sans-serif;
	font-size: 1.6em;
	font-weight: normal;
	text-align: justify;
}

strong {
	font-weight: bold;
}

ul {
	list-style: none;
	float: right;
	padding-top: 40px;
}

ul li {
	float: left;
	padding-left: 5px;
	padding-right: 5px;
}

ul li a {
	color: #c8d7dc;
	font-family: Arial, helvetica, sans-serif;
	font-size: 1.6em;"
	font-weight: normal;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

Step 23

With the typography done, we can move on to the styling part. Let’s look at our first element: the header. It’s the first element on the page, containing both the logo and the navigation. But actually, we don’t need any positioning for that element! It’s right where it should be, we can leave it right there. Next element: the feature. It looks alright actually, but it needs a margin on the top to be moved down. I used about 65 pixels. You should know how the CSS should look like.

#feature {
	margin-top: 65px;
}

Step 24

The same problem for the body: it should be positioned a little lower. Add “margin-top: 120px; to “#body”.

For the columns we’re going to work with floats again. Float “#column1″ to the left, and “#column2″ to the right. Make both of the columns 400px wide. Also both columns need a “padding-top: 30px;”, “padding-left: 20px;” and a “padding-right: 20px;”.

/* Body */
#body {
	margin-top: 120px;
}

#column1 {
	padding-top: 30px;
	padding-left: 20px;
	padding-right: 20px;
	width: 400px;
	float: left;
}

#column2 {
	padding-top: 30px;
	padding-left: 20px;
	padding-right: 20px;
	width: 400px;
	float: right;
}

Step 25

Ugly! It looks all messed up! How can this be solved? “Clearing div” to the rescue! Place it beneath the body but above the projects bar. We can reuse the clearing div as it’s a “class”.

<div class="clear"></div>

Step 26

We’re at the last part of the CSS! Technically there’s still the footer, but it doesn’t need any special styling. All that’s left is the projects bar. The projects bar has a background image, a width of 860px to make it just as wide as our body text and a height of exactly 100px. It also had a 20px top and bottom margin and we’ll center it using “auto”.

#projects {
	height: 100px;
	width: 860px;
	margin: 20px auto;
	background-image: url(../img/projectsbg.png);
}

Step 27

Nearly there! The images need correct spacing:

#projects img {
	margin-right: 20px;
	margin-top: 20px;
	border-width: 0px;
}

Final Result & Download!

Look at that, we’re done! Now go admire your work in a browser, we’ve acomplished alot today, be proud! This maybe alot for you to handle at first, but if you go over it a few times you’ll get the hang of it, and remember to drop a comment below!

Final Result

You can see what we’ll be making right here. The website won’t be absolutely stunning design, but it will be very effective for learning.

Step 1

Great, lets get cracking! Open up Fireworks, and create a new file, 900×1000 pixels. Let’s tidy the layers. To do this, open up the “Layers Window” (Window > Layers or F2). Rename “Layer 1″ as “Shapes”. Add another layer “Text”. Note: The layer “Web Layer” can not be deleted.

Step 2

Let’s make the header. Take the rectangle tool (U) and draw a shape. We’ll position it using the properties panel (Window > Properties). Enter “900″ for the width, “100″ for height, “0″ for X and “0″ for Y (this positions it at the very top). Give it a dark color, using the bucket to open up a color palette. I’ve used the darkest shade of grey for the header. Be sure to name this shape “header” (this is done in the Layers window).

Step 3

Next up is the feature area. Use the same technique as before, using “900″ for the width, “300″ for the height, “0″ for X and “100″ for Y (we want to position it beneath the header). I used the next shade of grey to color it. Also, don’t forget to name this shape “feature”.

Step 4

We still need a body, a projects bar and a footer, so lets continue. I’ll let you make the shapes now, you should know how to do that by now.

Body:

• Width: 900
• Height: 400
• X: 0
• Y: 400

Screenshot Area:

• Width: 900
• Height: 100
• X: 0
• Y: 800

Footer:

• Width: 900
• Height: 100
• X: 0
• Y: 900

Step 5

Onto the text. Enter the “Text” layer we’ve created. Grab the Text tool (T). The properties window we have been using will transform into a Text tool properties window. Choose “Arial” as the font, 40 pixels, bold. Click on your canvas and type “Logo”. Enable “Smart Guide Snapping” (View > Smart Guides > Snap to Smart Guides). Take the pointer tool (V, O) and drag the text to the upper left corner. The smart guides will pop up when the text is in the middle of the header, leave it there. Now add a 20 pixels indent using the properties window.

Step 6

We also need navigation links. Add these, using Arial at 16 pixels, normal width. Type “Home About Blog Contact” with three spaces in between each word. We’ll add these links using HTML, so it doesn’t need to be perfect.

Step 7

I’m going to speed up a bit. Type “Hey there, I’m John Doe” in Arial, 40 pixels (if you like, you can use your own name). Type some more text in 24 pixels until it looks like the image below.

Step 8

Make sure the text you just typed is dead center, using the smart guides.

Step 9

Add text and position it using the smart guides yet again – they’re your friend! See the image below for guidance.

Step 10

Add the word “Projects” to the bar and add buttons, 100×60 pixels, with 5 pixels roundness. Again, use smart guides to position them in the center of the bar. Copy and paste them until you have four of them, 20 pixels margin in between them.

Step 11

We’re almost there! All we need to do is adding some text in the footer. Follow my lead:

Step 12

Hey, take a break, you’ve done great! When you return we’ll be exporting it to Photoshop and coloring the design.

Save your file (file > save) and then “Save as…” (file > save as…) and select “Photoshop PSD (*.psd)” from the drop-down menu. The result looks like this:

Step 13

You can close Fireworks and open Photoshop. Open up the file you just exported. Open up the Layers window (window > layers). Mind you, layers and folder differ between Fireworks and Photoshop. Don’t get confused: in Fireworks a layer is a “folder” containing shapes, or text. In Photoshop a folder contains several layers. Those layers are shapes, or text.

Step 14

Lets give the header bar a nice gradient overlay. Right click the header shape, and select “Blending Options”. This will open up a window with lots of options. Go to the tab “Gradient Overlay” and click on the gradient you see. That will open up yet another window, with the gradient information. Make a gradient from color #244386 to color #2c539e.

Step 15

Do the same to the feature area, only this time using color #a7c7dc to #85b2d3. Result looks like this:

Step 16

Give the body a Color Overlay with #142a5b. This is done just like the Gradient Overlay, only this time you need to pick the tab “Color Overlay”. Do the same to the footer. Give the screenshot area a gradient overlay from #a7c7dc to #85b2d3.

Step 17

It’s actually starting to look like a website! All that’s left to do is to style the content. Select the “Logo” with the text tool, and give it the color #c8d7dc. Do the same to the navigation items. Give the “Hey there, I’m John Doe” text the color #244386.

Step 18

On to coloring the text in the body. Color all the text #85b2d3, including the footer links.

Step 19

The screenshot buttons still look plain. As we don’t actually have any projects to showcase, we’ll give them a generic look using layer styles. First, give them a Gradient Overlay from #244386 to #2c539e. Now give it a 1 pixel Stroke with color #244386. Finally, add an Inner Shadow with color #ffffff, Blending Mode: Screen, Distance: 0 pixels and the Size: 1 pixels. Look in the image below for reference. Apply this layer style to all the elements.

Final Result

And that’s it, we’re finished! Take a look and admire your work. Soon we’ll be coding it up, be sure not to miss that tutorial, so be sure to subscribe today!

Source Download

Take a look at the design we´ll be creating today, it´s a very clean and minimal iPhone application site. We have released the final .PSD file for everyone to download for free!

Before We Get Started

What we need to do before we begin is to download the 960 Grid PSD and the iPhone GUI PSD 3.0. If you haven´t seen the ‘iPhone GUI PSD 3.0′ kit before, take a quick look at the image below.

Step 1 – Getting Started

Open up the ’960 Grid System’ in Photoshop and change the canvas size to 1200×1500 pixels. Change the background color to #232323 and add some noise. Go to Filter >> Noise >> Add Noise (use the following settings):

Step 2 – Add the iPhone

Now open up the ‘iPhone GUI PSD 3.0′ and transfer the ‘Vertical iPhone’ over to our document. Get rid of the images under the folder “Sample Screens” and add your own little background.

As you saw in the Final Result I´ve created one myself and named our tutorial application “aura”. Make sure you place the iPhone something like I have done below. (194px down and 130px from the edge)

Insert a nice logo and add the menu. Since this is only an application design we don´t really need an extensive menu, so we will just do a simple one. Place the logo, align it with the left side of the iPhone and put the menu level with the top of the logo and align it to the right like I show in the images below.

Step 3 – Adding Content

Now we will add some content to give the site the look and feel of an iPhone application site. I´ve added some text and some thumbnails to make the design more informative and creative. Use the settings for leading and letterspacing as the image below shows.

Step 4 – Creating the Buttons

To create the buttons we use the “Rounded Rectangle Tool” and create a nice big button to fit our text in. I´ve made my buttons in the sizes 222px wide and 74px high. To give it the nice gradient I´ve added to mine some really simple settings to use. For the gradient I have used a blue color to match the application screen background. Use these colors for the gradient: #1461a9 to #86bef2.

After applying the gradient and other settings you can add a nice shine effect by adding a white half circle with these settings: “Soft light >> 15% opacity” and erase the parts that should be there.

Here is my finished result. The green button uses the same settings as the blue. All you need to do is to use these colors for the gradient instead: #7fb727 to #afdc74

Step 5 – Adding more content

We need to fill the design with some more content, as for this moment it looks quite empty and boring. We need to give it more life and more information about the app itself. I´ve created two lists, one that shows the features and one that shows the requirements needed for the app to work.

Step 6 – Adding a footer

All we have left is to create the footer and give the footer some information. For the footer I´ve created a 390px high background and added a big-border-like-line to give it more depth. For the gradient on the border I´ve used the colors #313231 to #505150 which are a very subtle combination of darker colors. Now all you need to do is to fill it with some nice content

Source Download