Creating Your Own Simple But Effective Site

twitch

Feb 15 2006, 10:34 AM

Creating your own UKISS site
from beginning to end

Contents
So that you know what is happening and when I’ve compiled this contents section. It will also help you got to the parts that you need without scrawling through everything.

Introduction
Design
- Step 1 – Starting Fireworks and creating your canvas
- Step 2 – Making a base on which to work on
- Step 3 – Head’s up; start with the logo
- Step 4 – Finding your way; creating a menu
- Step 5 – Eyes to the centre; work on the main column
- Step 6 – Extra! Extra! Creating a third column for those tidbits
- Step 7 – Last thing’s last, making your footer
- Step 8 – Polishing it off
- Step 9 – Slice and dice! Getting your image slices ready for the development
Swatting Up
Step 1 – Getting to grips with XHTML
Step 2 – All you need to know about CSS
Development
Step 1 – Starting your XHTML page
Step 2 – Starting your CSS page
Step 3 – Comments!
Step 4 – Developing the header
Step 5 – Hand’s on the wheel, controlling the navigation
Step 6 – Setting up rows within the Navigation column
Step 7 – Main column; all the nitty gritty
Step 8 – End column, not far to go now
Step 9 – Footer, the beginning of the end
BONUS MATERIAL!
- Bonus 3 – Useful resources

(Italic items have not been uploaded).

Due to the size of this tutorial, I will release it in parts over several weeks. Once it is fully released and the kinks taken out of it, then I will make it as a downloadable document. Remember, I am working on it at the time of writing it, so I will be learning some new things as well.

Each part will be release into the originating topic, with a link to it on the list item that corresponds with it.

PS: Sorry about deleting Abhiram and yordan's posts here.
PS2: The screenshots may change slightly in appearence throughout, this is due to the different computers I use.

twitch

Feb 15 2006, 05:01 PM

Introduction
In recent times, the push for simple but effective web sites has increased. You don’t necessarily need to know how to create a stunning Flash-full site to get the visitors, and many would prefer you not to anyway. There are many ways to creating that simple site, from delving into hardcore CSS to using tables and invalid HTML. And of course, it is entirely up to you, but just remember one thing - browsers are being redeveloped all of the time to keep up with cross-platform compatibility and out-do each other. The display of tables may be more accurate cross-browsers now, but wait until that faithful day when tables are longer supported and half of your visitors will be looking at a shabby mess of boxes splattered with dollops of colour. Is that what you really want? No. I didn’t think so. To combat the problem of design versus compatibility, you need to make sure that you think on two levels when creating you plans.

The first level is to think about the catchy aspect of design. You need to think will this design catch my visitor’s eye, and not blind them? Don’t just make one or two plans, make many of them, then take the best parts of each and adapt them to fit in with each other. The colour scheme then follows.

Then there is the second thing to think of. How will you make sure that it works? Are you going to use invalid tables and rely hopelessly that all your visitors use Internet Explorer? Or will you use Mozilla compatible CSS only and have it shown as a mess in IE? It is very annoying, but like most things, until companies design their software around the industry specifics, then problems will always arise for the end users. So that is where cross-compatibility comes in.

To overcome the problems laid down to us, we need to design and develop sites that are eye-catchy and functional. So, what does this have to do with KISS/UKISS (Keep It Simple Stupid/Ultra Keep It Simple Stupid)? Well, from personal experience, over-complicating matters always leads to invalid table use. Using a div-conscience approach to design allows the process of developing your work a heck of a lot easier. The transition from clutter to organised space is hard, but with constant attempts, you will be able to come up with your own valid UKISS site.

Design
Do not fear I am here to help you through both design and development. I wouldn’t just throw in the information and not help you get through the deep end. In this following section, I will be taking you through the basics.

Macromedia Fireworks (MX 2004 or above recommended)
Plenty of fluid and fruit
Patience
Brain
Further resources will be provided throughout

Please be aware, that you do not need a very good computer to run Fireworks. Before I upgraded my computer for the third time, it was running on 128MB RAM, 333MHz Processor. With RAM DEF XT (Google term search it), it kept my RAM at a healthy level to work with. I suggest you get it. Now my computer is at 256MB RAM, it can handle a bit more.

From here on, it is going to be very image heavy, so don’t say I didn’t warn you. Please note if the images do not show, then it is not my problem – literally. The servers that my images are at may go down or do anything strange thing.

Step 1 – Starting Fireworks and creating your canvas
First of all, if you do not have Macromedia Fireworks, then I suggest you download it from the Macromedia home page. You can also buy it from all good software stores. If you are going to be using software other than Fireworks, then I am afraid I can not support you. I have generally no experience in any other graphics program.

Once you have downloaded and installed Fireworks, then we are ready to move onto opening and setting up your work space. The work space is where all of the panels are (the Tools, Layers, etc). When you fire up Fireworks it should look something like the below.

Now, along the Open a Recent Item column, there is a list of file names. This only appears when you have opened or created and saved a file in Fireworks. At the moment, if you have not used Fireworks before, it should be blank.

Click on the Create New > Fireworks File to start a new project. Once you do that, a new box will appear.

As you can see, there is a few options for you to control when setting up your new document. Firstly, note the Width and Height. They are displayed as pixels (in the drop down boxes). You can change these to cm, but it is much more accurate and easier to use pixels (px) when designing web pages or any other related graphics.

The mock design we will be doing is a personal page. This means relatively nothing, but as you think more in depth about it, you start to wonder one thing that is in relation to this part. What size of canvas should I make? Well, a rule I like to keep is that you design everything on a canvas size of 750px wide and 800px high. Once we get to laying it out, then you will understand why this is.

So, for those who haven’t quite grasped it, put 750 into the Width box and 800 into the Height box. Resolution for web graphics is best at 72px/inch. Inches are an old unit, but if you wanted to use centimetres, then it would be 28.35px/cm. If you are creating images specifically for high-resolution gaming and model work, then your resolution needs to be at least 200px/inch, for the detail.

Canvas colour is something that is entirely up to you. I personally prefer the default setting of White, but you may have it as transparent or any other colour. I use white as it helps me design on an easy surface. Dark text on a Light background is always easier to read, and also helps to prevent me from having headaches or migraines.

When you have done with this, select Ok.

Macromedia Fireworks (MX 2004 or above recommended)
Plenty of fluid and fruit
Patience
Brain
Further resources will be provided throughout

Hopefully, your new document should look similar the one above. If you have a different panel layout or canvas colour, then don’t worry, it’s just my personal profile settings. If it looks completely different, then retrace the above.

Throughout this extensive tutorial, I suggest you save at every step, that way you’re not going to loose anything major if your computer crashes or you have a power-cut. I also suggest that you take a five minute break after every two steps, that way your eyes and muscles get a break from the strenuous reading and keyboard/mouse work.

Now that we have the fundamental basics up, let’s get started with the design.

Step 2 – Making a base on which to work on
I have said this many times before on several forums. A background is the fundamental foundations of a working site. If you do not choose your background carefully, then it will come back to haunt you. In order to create the best background for the effect you are trying to reach, you need to make several attempts. I warn you now, if you think you have made a decent background in one shot, then do it again, because not even the best of the professionals out there can do it. Creating a background that is 99% perfect for your site is a long and hard process, and many prefer to leave it to the end. Those that do not really care about their visitors thoughts often shove down any old psychedelic or plain coloured background as a time saver. One thing you need to get clear with design. It can take MONTHS for the 99% perfect design to be reached. It can also take just a few hours, depending on the thought power.

Since I have had a few days at working at this, we can get the best results in only a minute or less.

So that we know what we are doing and can design more accurately, zoom into 100%. This can be achieved in so many ways that it is quite amazing.

Keyboard shortcut CTRL+1
Use the Magnifier Tool
Zoom Level select 100% from drop-down arrow
View > Zoom In
View > Magnification > 100%

Well, five ways to zoom into 100% isn’t bad. Now that you’ve zoomed in so that you can design it properly, we’ll start with the background.

Before you can start leaping into making the background, you need to know the colour scheme you will be using. In this tutorial, I will be using the following colours for the background:

#97B9D5

This is a soft blue. You may be wonder, why only use one colour? This is the base colour, and seeing as though the magic of Fireworks can calculate the rest of the colours, this and #FFFFFF is all that we need. So, to create our stepping block, you must firstly select the Rectangle Tool IPB Image

found in the Tools panel. Then, draw a rectangle of any size onto the main area of the document. After you have your square, don’t bother formatting it just yet. We need to sort out the size and position of the graphic first. Firstly, in the X Co-ordinate change it to 0 (from here on shown as (x (px)) e.g. if x co-ordinate equals 5, then I will show it as (x5)) and the Y Co-ordinate to 0 (from here on shown as (x (px),y(px)) e.g. if x co-ordinate equals 5 and y equals 12, then I will show it as (x5,y12)). By having the rectangle at (x0,y0), it will be in the top left corner, 0 pixels from the left and 0 pixels from the top. If you do not know your co-ordinates in maths, then you will struggle slightly to understand this and CSS background image properties. But I will do my best to explain.

Then in the Width box, change the value to 750 and in the Height box, change the value to 800. These two combined will make the rectangle stretch the full length of the canvas, and will look just like the background of a site. If you have no idea where these are found, relate to the screenshot below.

Now to make it look like a background. From the screenshot above, you can see where it says Solid in the drop down box. This controls the type of colour formatting that is about to take place. Click in that box, the go to Gradient > Linear.

When you have done that, the linear gradient will be horizontal facing. Never design a site with a horizontal background – they are pigs to get right and it often takes quite a lot of time working out how to make them work, as well as the often very large file size.

So, to beat this, when designing KISS/UKISS sites, you are best off making a vertical design that goes from the primary colour into white, or a colour that can be completed by CSS later on. This helps reduce file size, loose stress and generally makes everyone’s life easier.

To achieve the vertical gradient, hold left click on the DIAMOND selector on the gradient, and then drag it to the top of the Rectangle. Once you have done that, it is more than likely that the gradient has shifted, but it should still be horizontal. In order to change the direction of the gradient, Hold left click on the SQUARE selector on the control line (if you can’t see it, then zoom out until you can) and move it so that it is exactly straight down your document. Once you have done this, you should end up with something that looks like the below.

It may take several attempts before you get it bang on straight; it still takes me a couple of times before it finally gets into the appropriate position.

The good thing is that we have the gradient and the main part of the background. Now all you need to do is replace the white with #97B9D5 and the black with #FFFFFF. To do this, make sure that your rectangle is selected, then where you changed it to a gradient, there is a box of gradient colour that matches the gradient on your canvas. Click on the box, then on the white little colour selector (see screenshot below). Once you click that, a colour palette appears. Where it displays the HEX code (seen as #FFFFFF), change it to #97B9D5. Then, on the second colour selector, change the HEX (seen as #000000) to #FFFFFF.

You should then end up with a happy little background, that will suite us for now. I’m not saying that it is 100% efficient, but it is as good as it is going to get at this stage.

twitch

Feb 15 2006, 05:15 PM

Step 3 – Head’s up; start with the logo
The first two steps have been covered (and I hope you have been saving it), so now it is time to have a quick review of what you should have. Your screen should look similar to the below.

Hopefully it does, because if there is anything completely different, then I suggest you back through the previous two steps to figure it out. In design, there is no room for idol mess. If you genuinely forgot to do something, then you’re not a bad person really. Anyway, moving things on you need to get your logo made. To keep in line with the UKISS theme we are adopting, we need a logo that is modular in design, with hard edges but subtly blends in with the rest of the theme. This is a great disappointment to those that like having psychedelic colours splashed across the screen, but tough. To be a true designer, you must get past personal comforts and put yourself in other people’s places. Would you like to spend half of your time waiting for a page to load because it is filled with meaningless coloured junk?

Producing a logo can often be hard and strenuous on your creative ability. Therefore, you’re going to struggle in the future, as I and all of the designers out there do. But, as we are only making a temporary logo, we don’t need to concentrate to heavily on the style of it. So, to start your logo, select the rectangle tool, and draw a rectangle that is (x25,y25) and (w40,h40). This should produce a box that is 40x40 pixels, 25 pixels from the top and left sides. If it doesn’t, then you have simply done something wrong. It is more than likely that if you are continuing from the last step without closing down Fireworks or working on another project, that the box will have a linear vertical gradient, but this doesn’t matter as we can easily change this. To give you an idea of what we will be making, here is a completed version.

Select your rectangle, and remove the solid colour. To do this, click on the colour type select and click on none.

Now your box should become invisible. This is because there is no stroke, which is the line surrounding an object, nor is there a colour fill. We are going to apply a stroke, in order to get the border appearance shown on the preview. Firstly, click on the colour filler box on the right hand side of the pencil within the properties panel. This will bring up the colour palette. Into the HEX selector, put in the following code:

#729DC0

This will produce the desired colour. It should also make it a 1-Pixel Hard (or Soft) stroke.

If you have keen eyes, you would have noticed that I have changed Rectangle to Bg in the Layers panel. Every time you make a new object, it’s always best to change the name of it in this panel, that way it is easier to find and edit at a later point. You do not have to do this, but it certainly helps me. To change the name of something in the Layers panel, double click it and then type in your custom name.

We’re now going to make the main box of the logo icon. To achieve the same effect, you will need to know the following things:

How to make vertical linear gradients
How to apply first and second colour

If you don’t know any part of these two parts, I suggest you go back to Step 2 and re-read it. Hint: it is the same way we made the background.

Create a rectangle, that is (x27,y27) and (w36,h36). This will more than likely create a similar object to the border. Take off the stroke (the same way as you take off the colour fill), and apply a vertical linear gradient with the first colour as #78A1C1 and the second colour as #355773. It should create a gradient square that looks like the below.

To get the dynamic, switch-like graphic as well, it requires a bit more skill. Make another rectangle within the box, that is (x30,y30) and (w30,h30). When you are creating your linear gradients, you’ll notice two more colour selectors on the top of the coloured bar (see image below if you have no idea what I am talking about). Well, the first one controls the starting transparency level and the second one obviously controls the ending transparency. Knowing that, we can apply a 30% transparency to the first one and 0% transparency on the second. Make sure that the two colour pots on the bottom are filled with #FFFFFF (white). If you didn’t quite understand that, below is a GIF animation which throws together the steps.

After this, I grouped the three new objects (excluding Bg). You can do this by hold SHIFT and selecting the objects, followed by going to Edit > Group or CTRL+G.

If you think you have done making the logo icon, then you are unfortunately wrong. Sorry. This part requires that you have a specific font, named baby blocks. I do not have permission to redistribute this font, so you will have to download it from the place I did. But to save you time, I will put the direct download link for you.

Click here to obtain the Baby Blocks font.

If you haven’t installed a downloaded font before, then here is some instructions (for PC users only).

Download the file.
You will now need a ZIP file extractor. If you are using Windows ME or XP, then they come with built in self-extractors. IF you aren’t, then you can use either WinZip which is a good all round ZIP file extractor or WinRAR is another favourite. Once you have downloaded these and installed them, double click on the font file you downloaded in 1, and extract the font file (TTF) into C:\Windows\Fonts (or whatever you have for C:\ ). If you have a partition, then your Windows folder may be named something else. Just make sure that the path you are extracting into is correct.
If you don’t know how to extract, then I suggest you look at the Help Files that come with the software.

The font will be ready for you to use in Fireworks. Using the Text Tool (the capital A found on the Tools Panel), creat a small field which you can enter your text. Once you have marked it out, type in a letter, I have used P which stands for Personal Page. You can have whatever you like. After you have done that, you’ll need to move it so that it doesn’t look out of place. In order to do this, use the Pointer Tool (keyboard shortcut 0 or V). Then, select your text field and move it so that it is at (x30,y24). To resize it, DO NOT change where it says (w,h). If you do, it will screw up. Simple as. You need to manually change the size using the pointer select tool, and click on the square dots around the field, to change the size. Make sure that it is (w30,h35) this way it will be in the middle (sort of). To put the text in the middle, you should see a centre align on the properties panel, click it and your letter should be in the center. Remember, when handling Baby Blocks, capital letters are put into blocks, so use lower case whenever I mention using Baby Blocks font. Also remember to change the colour of the font to #D2E1ED and the text size to 27. If you can’t figure it out, then look closely at the screenshot below.

Now that you are able to create a text object, make the following, using font colour #3A5D79, size 25 and left aligned.

Once you have done that, create another one below it, with a slogan or tag line.

I used Tahoma 11 to get that effect, and took my time on getting it aligned with the text above it. When it comes to web design, your visitors need to be caught up in the moment of seeing your website. The first thing their eyes will be directed towards I your header, and that is where you should put in the effort. It is often hard to try and create a decent and hook-line tag or slogan, but just thinking philisophically can help. When it comes to personal pages, if you think of Life and what it means to you, it’s much easier to think of your own mini-proverb. If you create a good one, then more people are going to notice it and recognise it with themselves, which opens the connection of being personal with your visitors. So, make it quite but loud.

Guess what. You’ve actually finished the header. Because we are going for a UKISS design, there is only often a logo icon and proceeding text. Everything else is classed as pollyfiller.

Dooga

Feb 16 2006, 11:47 PM

And how long did this take? lol

twitch

Feb 17 2006, 07:46 AM

QUOTE(Dooga @ Feb 16 2006, 11:47 PM)

And how long did this take? lol

In total, it has so far taken me 8 hours to make it, get the screenshots, eat and drink, and write about it. Before I released Step 3, I re-wrote it.

twitch

Feb 18 2006, 08:20 AM

Step 4 – Finding your way; creating a menu
There are many web designers out there that ruin their efforts because they don’t put the due care into making their navigation. If you don’t properly structure your site or have a usable menu, then you’re literally dead in the water. Overcoming the mass problem of bad site structure and navigation is simple, as long as you take your time and review it. Whenever I make a design, I spend most part of it constantly refreshing the menu; whether it be the spacing, colours, font or even adding accents like bullets. When you put effort into your work, you will get the recognised return on it.

So that you know what type of menu you should make in the future, here are a few simple pointers.

Vertical menus are much preferred over horizontal ones. This is because vertical menus are often easier to amend/add-to. This is because most layouts are expandable, in a vertical sense. Horizontal menus are also constricting when it comes to space, just think about it, you can only have five or six decent sized menu items for a 1024x768 screen resolution.
Text based menus are more sightly and better for loading times than 100% graphics. Unless your design requires that you use 100% graphics to create your menu items, I suggest for your sake that you keep away from them. Great effects can be created with a small graphic, CSS and XHTML.
Use standard or obvious terms, it will help with your site being indexed and causes less human confusion. I have come across some sites, where I couldn’t figure out how to get to the home page, because all of the menu items were named completely strange things. This can be very annoying, so just keep it short and simple.
Avoid flashes of imagery or bright colours, as some of your audience may suffer from acute headaches, migraines and/or epilepsy.

Starting with the rectangle tool, draw a rectangle that is (x25,y75) and (w190,h3). This will create a short bar that is exactly 10 pixels from the bottom edge of the logo icon. Give it a solid colour of #385A77. If you have been wondering at all throughout the design process, how I get the colours that work, it’s rather quite simple, but it takes about a minute or so.

To find a colour from the beginning:

Change the appearance of the colour palette, using the right-facing arrow. I usually change it to continuous tone; it helps with me seeing the true colours. You do not have to do this though.
Select a blue from the palette. I have gone with the mild #0099CC.
Once you have the base colour, click on the colour wheel, found along the top border of the colour select palette.
Select a soft blue using the crosshair on the main system colour palette. Then, change the tone level to suite you.

To find a colour for other elements after base colour is made:

As you will know you base colour, simply enter that into the HEX, then using the colour wheel symbol, change the tone or base colour’s so that it fits in with the overall primary colour.

Moving on, we’re going to change the solid colour so that it doesn’t stand out too much. Transparency, or better known as Opacity, is what controls the amount of visibility the object has. For example, a glass has an Opaque appearance, this means that light can pass through it at around 50%. The other 50% is refracted and reflected to our eyes, so that we can see it. An object that has 0% opacity is invisible and something with 100% opacity is solid, like wood.

The opacity control can be found in the properties panel, on the right hand side. Change the opacity to 45%

This bar will act as a visual divider, separating the header from the navigation. Please be aware, that things like this will not be used as images, simply because there is no need. As we can not use CSS during the design phase, we have to represent CSS elements with graphics. Also be aware that this is just the canvas size, and not absolute. When we come to developing, most items will be in a percentage.

Now we are going to be creating the bullets for the menu items. I always make my bullets the same size – 13x13 pixels. This helps to keep them properly-aligned with the text that follows it. To make bullets though in Fireworks, it is much better if you use the bitmap tools. The bitmpa tool which will be the most use for us is the Pencil tool. However, before we even think about touching it, we need to make our first rounded corner rectangle. Now most people would use the preset rounded rectangle tool to create it. But trust me, when you want an easy way to make four corners the same roundness, then use the roundness feature within the properties panel. So, to start making our bullet, use the rectangle tool to create a square that is 13x13 pixels. Give it the solid colour of #6F8C77, which is a moss like colour, but works well with the existing colour scheme. Remember, colour co-ordination isn’t just about one colour with different tones, it’s also about seeing and using a multitude of colours and tones that match the primary colour. It takes time to find colours that match manually, but the effort is well worth it. Anyway, to give our rectangle the rounded pixel look, use the Rectangle Roundness feature within the properties panel and set the level to 27. To avoid the corners from blending in (which would remove the feel that we want), make sure you set the Edge to HARD.

Next step is to create the bitmap arrows that will form the main part of the bullet. Select your rectangle, and zoom in so that it covers most of the window. You can use the keyboard shortcut CTRL and the plus (+) sign. You should then notice that the rectangle has one pixel missing from each of the corners. Anyhow, to start creating the bulle, select the Pencil tool, and start the pattern of two across and one down. When creating arrows for the web, always use the 2-1 method, it gives a nice looking bullet that is still subtly noticable. Use the solid colour #DAE6F0 for the first one.

Use the following colour #B8C7BC to create the second bullet. Make it 2 pixels from the edge of the last one. To make it easier and quicker for yourself, you can copy and paste the arrow, move it into position then go to the Effects (in the properties panel) Adjust Colour then Colour fill. Change the Normal to Colour and apply the colour stated above to make it a different colour immediately. Using the effects feature within the properties helps cut the time down what it takes to reproduce items.

Since we have the bullet, it is time to add the text. Using the text tool, on the tools panel, create a new field and enter Home page into it. Set font to Tahoma, size 12 and colour to #3D607C. Remember to make sure that there is NO anti-aliasing. If there is, then it goes all smooth and will not represent what it would look like in the browser. To make sure that we align it properly with the bullet, zoom in so that you cansee both closely. Then, from the capital H, make sure it is in the middle of the right edge of the bullet.

Once you have it aligned, hold SHIFT and press the right arrow key ONCE to move it exactly 10 pixels. This helps to save time, rather than pressing the right arrow key ten times.

In all, that wasn’t too difficult, and to be honest, once you know your way around Fireworks, it only gets easier. With that said, we’ll now fill in the rest of the menu. Using the copy and paste feature, space 4 more items 5 pixels in distance from the bottom edge of the bullet to the top edge of it (see screenshot below if you don’t get it).

To finish our little happy menu off, we’re going to add a base divide, similar to the top divide. Using your skills, create a rectangle that is align with the top one, 10 pixels distant from the bottom edge of the last menu item bullet, width 190 pixels and a transparency of 30. IF you don’t remember the transparency part, then I suggest you start reading this step again. Change the height of the object to 2px. (see the screenshot above).

lemonkiss

Dec 25 2006, 07:31 PM

Woah. That was long. It kinda helped but I'm already good at webdesign. Does anyone know how to do CSS???

Alegis

Dec 25 2006, 09:40 PM

QUOTE(lemonkiss @ Dec 25 2006, 08:31 PM)

Woah. That was long. It kinda helped but I'm already good at webdesign. Does anyone know how to do CSS???

Those who are good at webdesign do

Not that difficult to learn, study it for a moment. Or only look up the things that are necessary.

I don't really need help in making websites, but finishing them. I never finish anyth

yordan

Dec 25 2006, 10:06 PM

On my PC I can't see your images. I guess they are named S0XX.jpg, but where are they ? I can't see them neither with IE6 nor with Netscape. I only see the text "IPB Image".
where is the problem coming from ? My side or yours ?

sparkx

Dec 26 2006, 12:30 AM

Wow this must have took long! I really didn't read it all to tell you the truth. You probably could have made a very, very good PHP website generator in the time it took to make this whole topic laugh out loud. It's very good. Hopefully this helps people. I may read threw it just to see if there is stuff I don't know yet in it. Good Job!

QUOTE

Woah. That was long. It kinda helped but I'm already good at webdesign. Does anyone know how to do CSS???

I know CSS just P.M. me and ask what you want to know about it. I may make a tutorial about it lol. I know CSS, HTML, Javascript, PHP, MySql, some C++, some Java... If you have any questions in any of these programing languages feel free to ask me.

Again good tutorial

Latest Entries

Cain

Apr 1 2008, 11:34 PM

Thank you for this tutorial mate, it worked out fabulous

Habble

Mar 16 2008, 02:12 AM

Step 3 – Head’s up; start with the logo
The first two steps have been covered (and I hope you have been saving it), so now it is time to have a quick review of what you should have. Your screen should look similar to the below.

Hopefully it does, because if there is anything completely different, then I suggest you back through the previous two steps to figure it out. In design, there is no room for idol mess. If you genuinely forgot to do something, then you’re not a bad person really. Anyway, moving things on you need to get your logo made. To keep in line with the UKISS theme we are adopting, we need a logo that is modular in design, with hard edges but subtly blends in with the rest of the theme. This is a great disappointment to those that like having psychedelic colours splashed across the screen, but tough. To be a true designer, you must get past personal comforts and put yourself in other people’s places. Would you like to spend half of your time waiting for a page to load because it is filled with meaningless coloured junk?

Producing a logo can often be hard and strenuous on your creative ability. Therefore, you’re going to struggle in the future, as I and all of the designers out there do. But, as we are only making a temporary logo, we don’t need to concentrate to heavily on the style of it. So, to start your logo, select the rectangle tool, and draw a rectangle that is (x25,y25) and (w40,h40). This should produce a box that is 40x40 pixels, 25 pixels from the top and left sides. If it doesn’t, then you have simply done something wrong. It is more than likely that if you are continuing from the last step without closing down Fireworks or working on another project, that the box will have a linear vertical gradient, but this doesn’t matter as we can easily change this. To give you an idea of what we will be making, here is a completed version.

Select your rectangle, and remove the solid colour. To do this, click on the colour type select and click on none.

Now your box should become invisible. This is because there is no stroke, which is the line surrounding an object, nor is there a colour fill. We are going to apply a stroke, in order to get the border appearance shown on the preview. Firstly, click on the colour filler box on the right hand side of the pencil within the properties panel. This will bring up the colour palette. Into the HEX selector, put in the following code:

#729DC0

This will produce the desired colour. It should also make it a 1-Pixel Hard (or Soft) stroke.

If you have keen eyes, you would have noticed that I have changed Rectangle to Bg in the Layers panel. Every time you make a new object, it’s always best to change the name of it in this panel, that way it is easier to find and edit at a later point. You do not have to do this, but it certainly helps me. To change the name of something in the Layers panel, double click it and then type in your custom name.

We’re now going to make the main box of the logo icon. To achieve the same effect, you will need to know the following things:
How to make vertical linear gradients
How to apply first and second colour
If you don’t know any part of these two parts, I suggest you go back to Step 2 and re-read it. Hint: it is the same way we made the background.

Create a rectangle, that is (x27,y27) and (w36,h36). This will more than likely create a similar object to the border. Take off the stroke (the same way as you take off the colour fill), and apply a vertical linear gradient with the first colour as #78A1C1 and the second colour as #355773. It should create a gradient square that looks like the below.

To get the dynamic, switch-like graphic as well, it requires a bit more skill. Make another rectangle within the box, that is (x30,y30) and (w30,h30). When you are creating your linear gradients, you’ll notice two more colour selectors on the top of the coloured bar (see image below if you have no idea what I am talking about). Well, the first one controls the starting transparency level and the second one obviously controls the ending transparency. Knowing that, we can apply a 30% transparency to the first one and 0% transparency on the second. Make sure that the two colour pots on the bottom are filled with #FFFFFF (white). If you didn’t quite understand that, below is a GIF animation which throws together the steps.

After this, I grouped the three new objects (excluding Bg). You can do this by hold SHIFT and selecting the objects, followed by going to Edit > Group or CTRL+G.

If you think you have done making the logo icon, then you are unfortunately wrong. Sorry. This part requires that you have a specific font, named baby blocks. I do not have permission to redistribute this font, so you will have to download it from the place I did. But to save you time, I will put the direct download link for you.

Click here to obtain the Baby Blocks font.

If you haven’t installed a downloaded font before, then here is some instructions (for PC users only).
Download the file.
You will now need a ZIP file extractor. If you are using Windows ME or XP, then they come with built in self-extractors. IF you aren’t, then you can use either WinZip which is a good all round ZIP file extractor or WinRAR is another favourite. Once you have downloaded these and installed them, double click on the font file you downloaded in 1, and extract the font file (TTF) into C:\Windows\Fonts (or whatever you have for C:\ ). If you have a partition, then your Windows folder may be named something else. Just make sure that the path you are extracting into is correct.
If you don’t know how to extract, then I suggest you look at the Help Files that come with the software.
The font will be ready for you to use in Fireworks. Using the Text Tool (the capital A found on the Tools Panel), creat a small field which you can enter your text. Once you have marked it out, type in a letter, I have used P which stands for Personal Page. You can have whatever you like. After you have done that, you’ll need to move it so that it doesn’t look out of place. In order to do this, use the Pointer Tool (keyboard shortcut 0 or V). Then, select your text field and move it so that it is at (x30,y24). To resize it, DO NOT change where it says (w,h). If you do, it will screw up. Simple as. You need to manually change the size using the pointer select tool, and click on the square dots around the field, to change the size. Make sure that it is (w30,h35) this way it will be in the middle (sort of). To put the text in the middle, you should see a centre align on the properties panel, click it and your letter should be in the center. Remember, when handling Baby Blocks, capital letters are put into blocks, so use lower case whenever I mention using Baby Blocks font. Also remember to change the colour of the font to #D2E1ED and the text size to 27. If you can’t figure it out, then look closely at the screenshot below.

Now that you are able to create a text object, make the following, using font colour #3A5D79, size 25 and left aligned.

Once you have done that, create another one below it, with a slogan or tag line.

I used Tahoma 11 to get that effect, and took my time on getting it aligned with the text above it. When it comes to web design, your visitors need to be caught up in the moment of seeing your website. The first thing their eyes will be directed towards I your header, and that is where you should put in the effort. It is often hard to try and create a decent and hook-line tag or slogan, but just thinking philisophically can help. When it comes to personal pages, if you think of Life and what it means to you, it’s much easier to think of your own mini-proverb. If you create a good one, then more people are going to notice it and recognise it with themselves, which opens the connection of being personal with your visitors. So, make it quite but loud.

Guess what. You’ve actually finished the header. Because we are going for a UKISS design, there is only often a logo icon and proceeding text. Everything else is classed as pollyfiller.

Then we get this Lol its to much

Habble

Mar 16 2008, 02:10 AM

Introduction
In recent times, the push for simple but effective web sites has increased. You don’t necessarily need to know how to create a stunning Flash-full site to get the visitors, and many would prefer you not to anyway. There are many ways to creating that simple site, from delving into hardcore CSS to using tables and invalid HTML. And of course, it is entirely up to you, but just remember one thing - browsers are being redeveloped all of the time to keep up with cross-platform compatibility and out-do each other. The display of tables may be more accurate cross-browsers now, but wait until that faithful day when tables are longer supported and half of your visitors will be looking at a shabby mess of boxes splattered with dollops of colour. Is that what you really want? No. I didn’t think so. To combat the problem of design versus compatibility, you need to make sure that you think on two levels when creating you plans.

The first level is to think about the catchy aspect of design. You need to think will this design catch my visitor’s eye, and not blind them? Don’t just make one or two plans, make many of them, then take the best parts of each and adapt them to fit in with each other. The colour scheme then follows.

Then there is the second thing to think of. How will you make sure that it works? Are you going to use invalid tables and rely hopelessly that all your visitors use Internet Explorer? Or will you use Mozilla compatible CSS only and have it shown as a mess in IE? It is very annoying, but like most things, until companies design their software around the industry specifics, then problems will always arise for the end users. So that is where cross-compatibility comes in.

To overcome the problems laid down to us, we need to design and develop sites that are eye-catchy and functional. So, what does this have to do with KISS/UKISS (Keep It Simple Stupid/Ultra Keep It Simple Stupid)? Well, from personal experience, over-complicating matters always leads to invalid table use. Using a div-conscience approach to design allows the process of developing your work a heck of a lot easier. The transition from clutter to organised space is hard, but with constant attempts, you will be able to come up with your own valid UKISS site.

Design
Do not fear I am here to help you through both design and development. I wouldn’t just throw in the information and not help you get through the deep end. In this following section, I will be taking you through the basics.

Macromedia Fireworks (MX 2004 or above recommended)
Plenty of fluid and fruit
Patience
Brain
Further resources will be provided throughout

Please be aware, that you do not need a very good computer to run Fireworks. Before I upgraded my computer for the third time, it was running on 128MB RAM, 333MHz Processor. With RAM DEF XT (Google term search it), it kept my RAM at a healthy level to work with. I suggest you get it. Now my computer is at 256MB RAM, it can handle a bit more.

From here on, it is going to be very image heavy, so don’t say I didn’t warn you. Please note if the images do not show, then it is not my problem – literally. The servers that my images are at may go down or do anything strange thing.

Step 1 – Starting Fireworks and creating your canvas
First of all, if you do not have Macromedia Fireworks, then I suggest you download it from the Macromedia home page. You can also buy it from all good software stores. If you are going to be using software other than Fireworks, then I am afraid I can not support you. I have generally no experience in any other graphics program.

Once you have downloaded and installed Fireworks, then we are ready to move onto opening and setting up your work space. The work space is where all of the panels are (the Tools, Layers, etc). When you fire up Fireworks it should look something like the below.

Now, along the Open a Recent Item column, there is a list of file names. This only appears when you have opened or created and saved a file in Fireworks. At the moment, if you have not used Fireworks before, it should be blank.

Click on the Create New > Fireworks File to start a new project. Once you do that, a new box will appear.

As you can see, there is a few options for you to control when setting up your new document. Firstly, note the Width and Height. They are displayed as pixels (in the drop down boxes). You can change these to cm, but it is much more accurate and easier to use pixels (px) when designing web pages or any other related graphics.

The mock design we will be doing is a personal page. This means relatively nothing, but as you think more in depth about it, you start to wonder one thing that is in relation to this part. What size of canvas should I make? Well, a rule I like to keep is that you design everything on a canvas size of 750px wide and 800px high. Once we get to laying it out, then you will understand why this is.

So, for those who haven’t quite grasped it, put 750 into the Width box and 800 into the Height box. Resolution for web graphics is best at 72px/inch. Inches are an old unit, but if you wanted to use centimetres, then it would be 28.35px/cm. If you are creating images specifically for high-resolution gaming and model work, then your resolution needs to be at least 200px/inch, for the detail.

Canvas colour is something that is entirely up to you. I personally prefer the default setting of White, but you may have it as transparent or any other colour. I use white as it helps me design on an easy surface. Dark text on a Light background is always easier to read, and also helps to prevent me from having headaches or migraines.

When you have done with this, select Ok.

Hopefully, your new document should look similar the one above. If you have a different panel layout or canvas colour, then don’t worry, it’s just my personal profile settings. If it looks completely different, then retrace the above.

Throughout this extensive tutorial, I suggest you save at every step, that way you’re not going to loose anything major if your computer crashes or you have a power-cut. I also suggest that you take a five minute break after every two steps, that way your eyes and muscles get a break from the strenuous reading and keyboard/mouse work.

Now that we have the fundamental basics up, let’s get started with the design.

Design
Do not fear I am here to help you through both design and development. I wouldn’t just throw in the information and not help you get through the deep end. In this following section, I will be taking you through the basics.
Macromedia Fireworks (MX 2004 or above recommended)
Plenty of fluid and fruit
Patience
Brain
Further resources will be provided throughout
Please be aware, that you do not need a very good computer to run Fireworks. Before I upgraded my computer for the third time, it was running on 128MB RAM, 333MHz Processor. With RAM DEF XT (Google term search it), it kept my RAM at a healthy level to work with. I suggest you get it. Now my computer is at 256MB RAM, it can handle a bit more.

From here on, it is going to be very image heavy, so don’t say I didn’t warn you. Please note if the images do not show, then it is not my problem – literally. The servers that my images are at may go down or do anything strange thing.

Step 1 – Starting Fireworks and creating your canvas
First of all, if you do not have Macromedia Fireworks, then I suggest you download it from the Macromedia home page. You can also buy it from all good software stores. If you are going to be using software other than Fireworks, then I am afraid I can not support you. I have generally no experience in any other graphics program.

Once you have downloaded and installed Fireworks, then we are ready to move onto opening and setting up your work space. The work space is where all of the panels are (the Tools, Layers, etc). When you fire up Fireworks it should look something like the below.

Now, along the Open a Recent Item column, there is a list of file names. This only appears when you have opened or created and saved a file in Fireworks. At the moment, if you have not used Fireworks before, it should be blank.

Click on the Create New > Fireworks File to start a new project. Once you do that, a new box will appear.

As you can see, there is a few options for you to control when setting up your new document. Firstly, note the Width and Height. They are displayed as pixels (in the drop down boxes). You can change these to cm, but it is much more accurate and easier to use pixels (px) when designing web pages or any other related graphics.

The mock design we will be doing is a personal page. This means relatively nothing, but as you think more in depth about it, you start to wonder one thing that is in relation to this part. What size of canvas should I make? Well, a rule I like to keep is that you design everything on a canvas size of 750px wide and 800px high. Once we get to laying it out, then you will understand why this is.

So, for those who haven’t quite grasped it, put 750 into the Width box and 800 into the Height box. Resolution for web graphics is best at 72px/inch. Inches are an old unit, but if you wanted to use centimetres, then it would be 28.35px/cm. If you are creating images specifically for high-resolution gaming and model work, then your resolution needs to be at least 200px/inch, for the detail.

Canvas colour is something that is entirely up to you. I personally prefer the default setting of White, but you may have it as transparent or any other colour. I use white as it helps me design on an easy surface. Dark text on a Light background is always easier to read, and also helps to prevent me from having headaches or migraines.

When you have done with this, select Ok.

Hopefully, your new document should look similar the one above. If you have a different panel layout or canvas colour, then don’t worry, it’s just my personal profile settings. If it looks completely different, then retrace the above.

Throughout this extensive tutorial, I suggest you save at every step, that way you’re not going to loose anything major if your computer crashes or you have a power-cut. I also suggest that you take a five minute break after every two steps, that way your eyes and muscles get a break from the strenuous reading and keyboard/mouse work.

Now that we have the fundamental basics up, let’s get started with the design.

Step 2 – Making a base on which to work on
I have said this many times before on several forums. A background is the fundamental foundations of a working site. If you do not choose your background carefully, then it will come back to haunt you. In order to create the best background for the effect you are trying to reach, you need to make several attempts. I warn you now, if you think you have made a decent background in one shot, then do it again, because not even the best of the professionals out there can do it. Creating a background that is 99% perfect for your site is a long and hard process, and many prefer to leave it to the end. Those that do not really care about their visitors thoughts often shove down any old psychedelic or plain coloured background as a time saver. One thing you need to get clear with design. It can take MONTHS for the 99% perfect design to be reached. It can also take just a few hours, depending on the thought power.

Since I have had a few days at working at this, we can get the best results in only a minute or less.

So that we know what we are doing and can design more accurately, zoom into 100%. This can be achieved in so many ways that it is quite amazing.
Keyboard shortcut CTRL+1
Use the Magnifier Tool
Zoom Level select 100% from drop-down arrow

View > Zoom In
View > Magnification > 100%
Well, five ways to zoom into 100% isn’t bad. Now that you’ve zoomed in so that you can design it properly, we’ll start with the background.

Before you can start leaping into making the background, you need to know the colour scheme you will be using. In this tutorial, I will be using the following colours for the background:

#97B9D5

This is a soft blue. You may be wonder, why only use one colour? This is the base colour, and seeing as though the magic of Fireworks can calculate the rest of the colours, this and #FFFFFF is all that we need. So, to create our stepping block, you must firstly select the Rectangle Tool found in the Tools panel. Then, draw a rectangle of any size onto the main area of the document. After you have your square, don’t bother formatting it just yet. We need to sort out the size and position of the graphic first. Firstly, in the X Co-ordinate change it to 0 (from here on shown as (x (px)) e.g. if x co-ordinate equals 5, then I will show it as (x5)) and the Y Co-ordinate to 0 (from here on shown as (x (px),y(px)) e.g. if x co-ordinate equals 5 and y equals 12, then I will show it as (x5,y12)). By having the rectangle at (x0,y0), it will be in the top left corner, 0 pixels from the left and 0 pixels from the top. If you do not know your co-ordinates in maths, then you will struggle slightly to understand this and CSS background image properties. But I will do my best to explain.

Then in the Width box, change the value to 750 and in the Height box, change the value to 800. These two combined will make the rectangle stretch the full length of the canvas, and will look just like the background of a site. If you have no idea where these are found, relate to the screenshot below.

Now to make it look like a background. From the screenshot above, you can see where it says Solid in the drop down box. This controls the type of colour formatting that is about to take place. Click in that box, the go to Gradient > Linear.

When you have done that, the linear gradient will be horizontal facing. Never design a site with a horizontal background – they are pigs to get right and it often takes quite a lot of time working out how to make them work, as well as the often very large file size.

So, to beat this, when designing KISS/UKISS sites, you are best off making a vertical design that goes from the primary colour into white, or a colour that can be completed by CSS later on. This helps reduce file size, loose stress and generally makes everyone’s life easier.

To achieve the vertical gradient, hold left click on the DIAMOND selector on the gradient, and then drag it to the top of the Rectangle. Once you have done that, it is more than likely that the gradient has shifted, but it should still be horizontal. In order to change the direction of the gradient, Hold left click on the SQUARE selector on the control line (if you can’t see it, then zoom out until you can) and move it so that it is exactly straight down your document. Once you have done this, you should end up with something that looks like the below.

It may take several attempts before you get it bang on straight; it still takes me a couple of times before it finally gets into the appropriate position.

The good thing is that we have the gradient and the main part of the background. Now all you need to do is replace the white with #97B9D5 and the black with #FFFFFF. To do this, make sure that your rectangle is selected, then where you changed it to a gradient, there is a box of gradient colour that matches the gradient on your canvas. Click on the box, then on the white little colour selector (see screenshot below). Once you click that, a colour palette appears. Where it displays the HEX code (seen as #FFFFFF), change it to #97B9D5. Then, on the second colour selector, change the HEX (seen as #000000) to #FFFFFF.

You should then end up with a happy little background, that will suite us for now. I’m not saying that it is 100% efficient, but it is as good as it is going to get at this stage.

All that is to much to follow lol

Miles

Feb 28 2008, 04:53 PM

As said by halo3fanboy, all the images are broken, not surprising considering this tutorial ahs been here for a while. If possible, can you reupload them? I looked through the text and it seems a very good tutorial.

halo3fanboy

Feb 28 2008, 12:55 AM

Nice but i can not see the images all it says is "IPB Post" please fix the images i would love to see them

-Joshua

ADD REPLY / Got an Opinion!	a humble request :-)	RAPID SEARCH!	Free Hosting	[X]
Express your Opinions, Thoughts or Contribute your information that might help someone here. Ask your Doubts & Queries to get answers.. "Together, We enlight each other!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE

Creating Your Own Simple But Effective Site - To be resumed soon

Creating Your Own Simple But Effective Site - To be resumed soon

Latest Entries