Tutorial – Designing and coding your very first site – Part I

In this tutorial we’ll be designing a simple website. This tutorial is meant for those new to web design, so it should be easy to follow! Today we’ll make a wireframe in Fireworks, and color the site in Photoshop. In the next tutorial we’ll code it up in standards-compliant HTML and CSS. Grab a cup of coffee and some nice music and let’s get started!

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