4.+Prepare+the+Layout

Having your website look good is an important part of design. However, consistency is the most important part of this process. With this in mind it becomes most important to start this from the beginning. From the very start you will want to have the buttons in the same place on every page, content area should be the same size (use scroll bars if more space is needed on pages), sections of the page should be clearly delineated. Over all, everything you do should make your page look attractive the the users.

1. The first thing we are going to do is set up some guide lines. These are helpful in keeping this aligned to each other. Guide lines can be both horizontal or vertical. First thing is to turn on the rulers. This is VIEW -> RULERS menu. Clicking on the rulers and dragging will bring the guide lines out. They are black when dragged and turn a bright blue when dropped. Here is what my guides look like for this website. You can see that it resembles my plan. Having the INFO panel open can help you position your guides exactly where you want them.

2. To make sure that your drawings attach or snap to these guides make sure the VIEW -> SNAPPING -> SNAP TO GUIDES menu item is checked. 3. You will not need the rulers now so you can turn them off in VIEW -> RULERS. 4. Now we will want to draw in the background pieces. Choose the Rectangle button. Choose your stroke and your fill that you want to have. You will most likely choose these from the predefined swatches. For my example I need to have backgrounds for the bottom section of the page and the buttons line. I do not want a stroke color.

5. Use the properties panel to adjust the size of the two rectangles to exactly fit the stage. Using the X coordinate at 0 and the width at 780 will assure that it is a perfect fit. 6 The next piece I need is a folder like tab at the top of my page. In my original design, I want it to look like a file folder. To do this, use the rectangle primitive tool. It is called a primitive tool in that you can control properties such as the corner radius. Check your stroke and fill before drawing. Draw in the rectangle as needed. Next you will need to click on the selection tool (black arrow) and then on the rectangle. Clicking and dragging the corner handles of the rectangle will adjust the radius. You will notice that all four corners have adjusted.

7. Obviously we do not wall all the corners to curve in if we are looking for a tab look so we will use the properties panel to return these. The "link" control is turned on to keep all corners the same. Clicking on the link control will disconnct this and then entering 0 in both the bottom boxes will return the rectangle back to square on the bottom corners only.

8. For the bottom section and the menu bar I want to make the colors into a gradient.First, using the selection tool, click on the menu bar. The next thing we need to do is define the gradient. This is done in the COLOR PANEL which can be turned on in the WINDOW -> COLOR menu. Change the Type to LINEAR and you will now see the gradient bar at the bottom of the panel. Double clicking on the fill boxes allows you to choose the colors for the gradient. For my example I will leave the white at the end and change the black to my blue scheme color. As you make the change, the selected element will change.

9. Here is what my new page now looks like.

10. This however, is not how I want the gradients to look. I want then to still be linear but vertical and not horizontal. To change these I will use the GRADIENT TRANSFORM TOOL which is under the Free Transform Tool. There are three things this tool can do. It can change the width of the gradient (the square box with a right pointing arrow in it), change the center point of the gradient (round empty circle) and rotate the gradient (round empty circle with small arrowhead sticking out at the right). You can also use these with keyboard commands of SHIFT. Make sure the color panel is open to help with fills and effects. 11. Rotate the fills 90 degrees, raise the center up a little and make the size of the gradient smaller. It should look like this when completed.

12. Now I want to give it a more 3D look so I go to the color panel, and change the overflow to the 2nd of three choices.

13. Now I want to do two things - not at the same time but in conjunction with each other. I want to move the open clear circle and the square box until my gradient has a 3D look. You may want to zoom in to 200% to get a better look at the moves. Here is what it finally looks like.

14. I am going to do the same with the bar at the bottom.