In this tutorial I want to show you how “I” build a website from designing the layout in Photoshop to coding it in Dreamweaver A to Z. I am expecting this to be a 2 part series. The first part will be the designing phase which is all done in Photoshop. Part 2 will be taking the design, slicing it up and coding it.

This tutorial assumes you have familiar background in a graphics program and coding program so I will not go into the details on those techniques. We are simply going to focus on the details of the workflow from design to html/css.

Let’s have a look at the final design we are going to build together.

Ok I know this is no award winning website however it will cover all the basic elements of a website.
Without further ado, lets get started. Here is what is needed:

• Photoshop or similar graphics software (i.e. Gimp)
• Dreamweaver or similar HTML coding software (i.e. trusty notepad)
• Lots and lots of coffee!!

I have included the icons/images I used for this tutorial so you can use it to follow along.
Click Here
I am also purposely not including the finished design in the PSD because that won’t help you to learn. You learn by doing it yourself…

STEP 1

First we want to make the layout 960px wide center aligned on the page. With that in mind, let’s create a new document in Photoshop 1200px wide by 1043px high with a white background.

STEP 2

Now we have our new document, lets setup all the guidelines which will make elements easier to create. Since we know we want a centered aligned website of 960px wide, lets set the first guideline to 120px. To do so, go to VIEW>NEW GUIDE>set to vertical guide>120px and click ok. Do the same for the second guideline which will be at 1080px. The calculation here is 1200px – 960px = 240px. That means you have 240px left on both sides so you divide that by 2 and you will get 120px which is where we set our first guide. Then you simply add 960px from there which gives you 1080px where we set our second guide. Now you have a perfectly centered 960px wide page. Now we want to set the rest of the guides to position the elements such as the header, content area, sidebars and footer. Using the method I showed up above set the following guidelines. NOTE: for horizontal lines, simply click the horizontal bubble in the dialog box.

• Guideline at 0px (vertical)
• Guideline at 600px (vertical) just a center line for reference
• Guideline at 810px (vertical) gutter between content and sidebar
• Guideline at 820px (vertical) gutter between content and sidebar
• Guideline at 1200px (vertical)
• Guideline at 233px (horizontal)
• Guideline at 805px (horizontal)

Still with me? Ok lets move on…

STEP 3

Ok now that our foundation is set, let’s pour in the concrete. Start by creating the header background. Make a new layer and grab your marquee tool (m) and draw a marquee 1200px wide by 233px high on top. Now you see why I told you to draw out all the guides? It simply snaps into the boundary of the guidelines (assuming you have snap to guidelines turned on). Next select a foreground color of #174FA3 and a background color of #061F41. Now select your Gradient tool and set it to “foreground to background” radial gradient. Remember I had you create a guideline in the center at 600px? This is where that comes into play. With the marquee marching ants still visible position your gradient tool at the bottom line of the header at the center guideline click your mouse and pull up while holding the shift key to constrain a vertical movement. Pull it all the way up pass the top guideline by approximately 120px.

Ok now put your mouse down and sip some coffee….ahhhhhh……let’s continue…

STEP 4

Let’s create our logo and tagline. With your type tool set it to 48pt and the font Franklin Gothic Heavy. If you don’t have that font in your system feel free to use anything you wish. Note that it doesn’t matter what color it is as we will style that later. Now type “Your Company Name”. Now you should see a new type layer created for you in your layers panel. Double click on that layer to pull up the Layer Style dialog box. Set the settings as follows:

Now you can move it in position roughly where I have it in the image (we will refine the position later when coding).

I then added a rounded-corner box behind the text “Name” for added style and depth. Grab your rounded rectangle tool (u) and draw a rectangle box that is 142px wide and 52px high and position the layer below the logo text layer and behind the text “Name” (center it). Using the layer option I showed you above set a gradient overlay effect and set one gradient at 0% color #A4D047 and one gradient at 100% color #B5DF5B. Set the angle to 90 degrees and click ok. Now you should have something like this:

Now let’s type a tagline under the logo. Using your type tool set to 18pt Verdana (substitute font if you don’t have this) white color type “I sell innovation to the world. I am a Mac…”. Position this centered under the logo. Again this will be positioned later when we code. Next we want to add two links on the top right corner for users to login or register and with a icon next to it. Feel free to use the icon included in the PNG file from above. Using your type tool just type “Login | Register” at 14pt Verdana (substitute if needed) white color. Position this to the top right. Moving on we have the icon of a shopping cart and text indicating items that are in the cart. Same as with above type the text out and put an icon of a shopping cart next to it. The reason I am not indicating precise location is because this will be done in the coding section. Next to it let’s also put in a RSS feed icon so customers can subscribe to the feeds. Both the icons can be found in the PNG file included above.

Now if you look at the final design you will see a divider with a drop shadow underneath the shopping cart icons and items. I will show you how I created that.
Create a new layer and grab your pencil tool set at 1px with the color #154997 and draw a straight horizontal line the length of the shopping cart icon to the rss feed icon (hold down shift key while dragging your mouse from left to right to constrain a straight line). Right beneath that line draw another straight horizontal line with the color #092954 same length. Create a new layer beneath the line layer you just created and grab your elliptical marquee tool and draw a flat oval across the lines center it 80% the length of the lines. Fill the marquee with black and deselect. Then go up to your filters menu and select Gaussian Blur and blur it with 4.5px. Now delete anything above the lines from the oval layer. Merge the two layers (lines and oval) and create a mask by clicking on the mask icon on the bottom of your layers panel. Next grab your gradient tool and set it to black,white and check the box “reverse” and set to reflective gradient. From the center of the lines draw out the gradient tool to the right passing the end of the line by approximately 15%.

Continuing on with the header, let’s put in the navigation buttons. Nothing complicated, just three buttons for this purpose. Let’s grab your rectangle tool (u) and draw out a box of 138px wide by 48px high. Double click on that new rectangle layer it created to get your layer options dialog box. In there select your gradient overlay at 90 degree and enter at 0% location the color #F1DA34 and at 100% location the color #FFFFC8. Duplicate this button two times for the total of three buttons. With black text tool of 18pt Verdana (substitute if needed) type in “HOME”, “SHOP” and “CONTACT”. Now center the text on top of each button respectively and tile the buttons horizontally across towards the left bottom corner of the header section. Now create a new layer and using a tool that you are familiar with to create a indicator to depict the active state of the button.

Finally let’s create the search bar.
Using the rounded rectangle marquee tool (u), draw out a 10px radius rectangle of 219px wide by 36px high. Set the color to white and open up your layer option dialog box and set the following settings to get the effect we want.

Now position the search bar below the divider line we created earlier and let’s also add a search icon next to it to serve as a button for users to click.

I was not contempt with the header so I added an additional drop shadow to the header background layer. Double click on the header background layer and click on drop shadow make sure global light is unchecked and set the angle to 90 degree with the rest at default settings. Your header completed should now look like this.

Wow, that was a BIG LONG step but it is complete….now drink some coffee if it is still hot and if not, go warm it up, I will wait for you here.
The meat of the design was all in the header in this design so the rest should be easy…crossing my fingers…

STEP 5

Utilizing the guidelines I had you create, grab your rounded rectangle tool (u) and draw out a rectangle 690px wide by 528px high. Double click the newly created layer and get your layer options dialog box. Select stroke with 1px color #CFCFCF position “inside”. Now on that same layer, make the fill 0% to drop off the color and keep the stroke only.

Now grab your text tool with 30pt Verdana Bold and type “Introducing the all new Macbook Air! Everything you need in a notebook without the weight…”. Make sure it is center aligned in the text tool. Position the newly created text in the top center of the rounded rectangle you created. Now add in the image of the Macbook Air below it. Feel free to use the image in the PNG file from above.

STEP 6

Now let’s create the two sidebar boxes. Using your rounded rectangle tool (u) with the radius of 10px draw out a rectangle of 260px wide by 260px high. Grab your type tool with 24pt Verdana and type “SAVE 20% on our COMBO deal!”. Make sure the type is set to right aligned. Now to the left of that add in the Star icon you see in the design. Feel free to use the one in the PNG file above. Below the combo deal text add in the mouse and keyboard image. Again it is included in the PNG file. Now we need a way for the user to be able to click on something so this combo item can easily be added to the shopping cart. Take out the rectangle tool (u) and draw out a rectangle that spans across the combo deal box with the height of around 40px. Drop the opacity to 50% so the image from the bottom shows through. On top of that create a text with your type tool that says “add to cart” in white. Your design should look like this.

To finish up the sidebar create the same rounded rectangle box you did before and this time type the text “Learn to use the Mac!”. The icon on the left will be different as well which you use the one in the PNG file above. The semi-transparent button will state “click and learn”.

STEP 7

On to the footer…Grab the rectangle tool (u) and draw out a rectangle 1200px wide by 239px high. Remember to use the guidelines to make it easier. By now you should know exactly how to get into the layer options and set a gradient right? Ok set the 0% location to color #000000 and 100% location to color #262626 with 90 degree as the angle.

Finally you type in your usual copyright yadi yadi yada and I have also included a secondary navigation on the bottom right hand side. It is always a good practice to do so when you have navigation buttons as images.

There you have it, a totally completed design begging to be sliced up and coded. You can now put down that coffee and pat yourself on the back if you have followed along throughout the whole step by step tutorial. Well I hope you guys enjoyed the first part of this 2 part series.

Here is Part 2 of this series.

If you enjoyed this tutorial, please support me by tweeting it below or even sending it to a friend…..