WARNING: This is a VERY image heavy tutorial and will take time to complete
Notice from twitch:
Topic closed until I can find the time to complete it, and I am getting mad with the large scale plagrism of other articles.
Also, the images will no longer work, as I have changed domain name and also removed the images to make space.
Also, the images will no longer work, as I have changed domain name and also removed the images to make space.
Creating a basic but effective website
For beginners
Introduction:
Ok, so maybe you want to make a website that is “worthy” of the web. That is to say, you have made small taster sites before in FrontPage or something basic like it. And realised that no matter how you tried, you could only do so much, and it still wasn’t looking as good or respectable as larger sites. I was in this position only a few months back. Through sheer determination, I eventually learnt that it takes more than some WYSIWYG editor and Paint to create a site. And the site doesn’t need to be all hip to be good.
Unfortunately for me, I threw myself in the deep-end and took on everything like a bull in a China shop, and literally got no where in a hurry. It wasn’t until I started relaxing and taking my time that my abilities started to rise. I am still a beginner in the design industry (I have not even scratched Photoshop yet) and would like to share with you all, my take on design and development.
In this two part tutorial, I will show you how to design and develop your site.
If you do not want to design, but want to start on the development, then download THIS FILE, inside you will find two folders:
- PNG - This is where you will find complete.png, the file I used for this tutorial
- Fonts - This is where you can find all the fonts used in this tutorial.
What you will need:
In order to complete or even start this tutorial, you will need the following.
- Macromedia Fireworks MX 2004 or 8 - you can get it by visiting http://www.macromedia.com
- Macromedia Dreamweaver MX 2004 or 8 - find it at the same place as Fireworks
- Brains - if you haven’t one brain cell, then unfortunately I don’t know where to download one.
Firstly, once you have Fireworks, fire it up. Then, create a new file. Make it 1500pixels by 750pixels. The reason we are making it so large, is so that we can accommodate for the larger ranged monitor resolutions, with the background pattern we will be creating. Keep the resolution of the document at 72 pixels/inch and the canvas White. I personally prefer the white canvas as it is much easier to work with, a transparent one scares me. It is your choice, but it may be easier following the way of the white. As for having the document resolution at 72 pixels/inch, this is the default resolution, that all or most designers use, when creating web projects. Below is a screenshot of what you should have.
Screenshot 1
Now that we have our document, we are going to start by zooming in to 100%. On your keyboard, hold CTRL and press 1 on the numeric keypad. The size may seem imposing, but in time it will all fall into place.
We are now going to create the background. Those who saw an earlier version of my website will recognise the background we are going to create. Anyway, let’s get on with it. Firstly, select the Rectangle Tool, located on the Tools Panel.
Screenshot 2
If you can not see the panel, go to Window > Tools. Once you have the tool selected, create a rectangle that is small, it doesn’t matter about the size yet, as we are going to adjust it in a minute. Once you have your small rectangle made, change the X and Y co-ordinates to 0 and the Width to 495 and the height to 750. This will make the larger rectangle that will make up the left hand side of the background.
Screenshot 3
Now that we have that, we are going to make it sightlier. I consider the background to be as important as any other part of a website, and to leave it to the last minute is often a bad decision. The background is the foundations of a website, and with dodgy foundations, comes an unstable building.
To make it more appealing, we are going to add a gradient and a texture. This may sound simple, but the effect created for the amount of effort is very good. Click on the drop-down that says Solid to Gradient > Linear.
Screenshot 4
It might not be the same colours as I have on my screen. Now that we have a gradient, the colours are still not the ones that are in the colour scheme. Click on the little down arrow on the gradient box, and then click on the bottom-left colour pot. Change the colour to #009900.
Screenshot 5
Then, on the bottom-right pot, change the colour to #004F00. That is that part done. The colour scheme is going to consist of greens, blues, blacks, whites and the occasional other-colour.
We are now going to apply the texture. Please note that in Fireworks, there are two ways of styling a fill. Using the Pattern simply changes the whole thing and fills it with the desired pattern. I almost always never use this, unless I have created a specific background tile and want it to be used across the document. The Texture is what I use more commonly. It keeps the current formatting, just applies the texture inside the object. We are going to use Line-Diag 2 for this one. Then, change the percentage to 15%, so that it is not over-powering.
Screenshot 6
There, we have created the first panel of the background. Now, select your rectangle and copy/paste it. Then, go to Modify > Transform > Flip Horizontal, this will make it a lot easier for making the opposite panel of the background.
Screenshot 7
Move the newly created panel to X = 1005 Y = 0. This will put it on the other side of the document. Now, we need to change the texture so that the lines go in the opposite direction (vertically). So, in the texture’s drop-down, choose Line-Diag 1.
There, we have almost finished the background. Now to add a simple part, the centre column. For this, we are going to use a simply colour, so, instead of messing around with a new rectangle, will pick the easy way out. In the Properties Panel, at the bottom of the application, change the colour pot of the canvas to #4C4C4C.
Screenshot 8
I suggest at this point you save. Throughout this tutorial, I will continuously tell you to save. Personally, I save all my work with the generic name of Layout_[pagename].png. Fireworks saves all of its work in .png (until you start exporting) and the layers and parts of your development are kept. So, to save, it is pretty simple. File > Save.
Now, the background isn’t finalised. Although this is just management, I find it useful to do. Select both of your rectangles, by either holding Shift and click on each one, or in the layers panel, hold Shift and select each one.
Screenshot 9
Then, once they are selected, hold CTRL and press g on your keyboard to group these objects. Then, simply change the name of the grouped object to BG (double click on the object in the layer panel).
Adding the main layout:
The background was the foundations of the site design, so now it is time to move onto the main attraction, and possibly the hardest part of the design.
Firstly, we are going to look at the header. After all, it does make sense, it is the first part of the site most people will notice. For this, we are not going to do anything too fancy and technical. Use the Rectangle Tool, and create a rectangle that is 500 pixels wide, 75 pixels high, X = 500 and Y = 0. Now, the graphic you will get, will have the formatting of your BG. No worries, this is because the program has simply remembered the last formatting control. Now, we want to remove the texture, so, in the percentage field, change it to 0%. And the line-diag will disappear. However, the gradient isn’t the colours that we want. Change the bottom-left to #336699 and the bottom-right to #172F46. This will give use a better and calmer gradient. The balance against the site is now, unfortunately out. So, we are going to change the direction of the gradient from horizontal to vertical (for those into the mathematical side, y=0 to x=0). To do this, make sure your rectangle is selected. A gradient angle/position object will appear. Hold left click on the Circle pointer and move it so that it is on the bottom of the rectangle. Then, angle/distance the square pointer, so that it is EXACTLY adjacent to the circle pointer.
Screenshot 10
We now need an example logo. Although many designers may frown at putting it on now, I actually think it is better to put a “beta” of the logo in the place of where it is going to go. Using the Text Tool, draw out a rectangle, anywhere within the header.
Screenshot 11
Afterwards, in the text-box, put PERSONAL PAGE. Change the font to Trebuchet MS (or Tahoma), size 25, Smooth Anti-Alias.
Screenshot 12
Moving on:
With a header, underneath comes a navbar. A navbar or navigation bar is needed on every site. No matter how many pages or its structure. Even Flash websites require navbars. For this, we are going to create something dark, but subtle and keeps in touch with current colour scheme.
Directly underneath the header, make a new rectangle that is 500x20 pixels. Make sure the gradient is changed to Solid and the colour set at #172F46. We are also going to apply a subtle texture. In the texture field, choose Hatch 2, and have the percentage at 8%.
Screenshot 13
To add the items of the navbar, we are going to use the text tool. Again, draw a text box, and fill it in with what you can see on the screenshot below. To get the spacing between the words and dashes, use TAB key.
Please note that you will need AgencyFB font installed. You can find it by downloading the file packet found at the beginning and end of this tutorial. For the positioning of the text box, revert to the screenshot.
Screenshot 14
DONE. Seriously. We have covered the design aspect. As I am only covering the homepage, no other designs are needed. To create an image holder, use the skills you have accumulated so far.
So what about the rest of the design I hear you say? Well, the next parts are done with pure CSS/HTML.
The header is ok as it is. If you want to spice it up between now and the next part of the tutorial, then ok.
