How to create a web page wireframe in Fireworks CS4

Even if you don't know how to develop a website using HTML and CSS, you can still give your web developer an idea of what you want by drawing pictures of the layout. You can do this on paper, but for a more precise, clean rendition, you should use tools such as Adobe Fireworks CS4 to achieve the look you want. This is usually called a wireframe - a stripped down, visual representation of the page that only shows the layout, not the individual elements or content like buttons, colors, and images. In this tutorial, we're going to look at how we can create a web page wireframe in very little time using Fireworks CS4.

First, open Fireworks and create a new document by clicking File then New. You can make it any size you want, but I advise making your document a screen size resolution. I've made mine 1280 px wide by 800 px high; you always want your document to be wider to mimic a computer screen. You also want to choose your background color here. If you'd like to make it a custom color, then do so, but if you'd rather let someone else help you figure out the colors or you haven't figured them out yet, then choose white for now.



Usually, when designing a page, I start with the elements that frame the page, such as the header and the footer. Here, we can start by designating space for the top banner and the logo. We'll need to use the rulers and guides to measure out the space. If you don't see rulers, click View then Rulers. Likewise, if you are not able to pull down guides by clicking and dragging from the rulers, then click View, Guides, then Show Guides and Snap Guides. Once you've dragged your guides in place, make sure the Pointer tool at the top of the Tools panel is selected. Then you can hold down Shift to check the measurements between guides.

For this demonstration, I've pulled three guides out and measured 90 px from the top and 50 px on each side (for white space) for the banner and logo area. You can measure any amount you'd like. Once you have your guide in place, select the rectangle tool from the Tools panel. It may be hidden under another shape tool, in which case you should click on the black arrow at the corner of the button.



Now choose your color for the fill and the stroke (border) of the rectangle. To do this, look at the properties panel and click on the color swatches next to the pencil and paintbucket. If you don't see the color you want on the swatches provided, then click on the color wheel at the top of the pop up box to get more options. You can choose any color you'd like, but I generally use neutrals for wireframes. This keeps the focus on the elements of the page. I've chosen to use gray for my boxes.



Next, create some boxes to represent the logo and any other information you want to put at the top. Use the guides to measure some white space around them, so they won't be pressed against the border of the banner or the banner space. Then, select the text tool in the Tools panel and choose a font that you want to type into the boxes. You can use the Properties panel at the bottom to choose the font family, font style, font weight, font color, alignment, etc.



Since we have our banner area finished, we can move on to the navigation bar. For this demonstration, I've chosen to use a horizontal navigation bar at the top. Use the guides to measure out width and height (I've made mine 50 px high with the same width as the banner area). Use the rectangle tool to drag the box out; you can use a different color or shade for the fill if you'd like.



To represent different buttons on the navigation bar, we need to divide it and use the line tool to create dividers. To do this, measure the length of the navigation bar using your guides, then divide it by the number of buttons you want to have. For example, my navigation bar is 1180 px wide and I want 5 buttons. So I need to divide 1180 by 5, which gives me 236 px per button. Use the guides to measure out 236 px, then use the line tool (located above the rectangle tool) to create dividers. To get a perfectly straight line, hold down Shift while dragging the line down.



Next, use the Text tool to choose a font and a font size and type the names of the buttons on the navigation bar. You can use the pointer tool and guides to move the text and line them up.



In a likewise manner, you can use the same guides for the header and the navigation bar to create your footer. Just draw a box within the guides and type placeholder text where you'd want to put your actual text, such as copyrights, the year(s), and the companies or individuals that need to be credited.

Then, use the guides to measure the different divisions of your page. I've chosen to divide mine into three sections. For the first horizontal section, I've measured 160 px from the bottom of the navigation bar. For the second column, I've measured 285 px from the right side of the page. After you've decided how much space you want to give to each section of the page, select the line tool and use the color picker in the Properties panel to select a color. I've chosen a light gray to make it as unobstructed as possible. Then, hold down the Shift key while following your guides.



You can use the rectangle tool to create another placeholder (for an image, text, another element) in the sections, or you can use the Text tool to type a text placeholder. I've chosen to paste some dummy text in the top section. Again, you can choose the colors, the styles, the font family, etc.



For the second section, I've chosen to create some image placeholders. I've chosen a light blue to set it apart from the rest of the elements. Just like with the navigation bar, some math might be involved (if you have precise numbers and images already chosen; otherwise, you can eyeball it). Measure out the width of the second division from the edge of the header area to the vertical divide. Decide how much space you want between each image (and between the final image and the vertical divide) and add it up. Subtract that number from the total width and then divide that answer by the number of images you have (in this case, 3). That should give you the width of each box. You can create one box and then copy and paste it to create the others.



Now, finish adding in your elements. You can use the text tool and/or the rectangle tool to represent text and images/videos/other dynamic elements on your page. Place them wherever you'd like and format that in any way you'd like. The best rule to keep in mind is to give each element some white space on each side and line them up with other elements. The guides will help you with this.



The final result looks good – and it shows how things are laid out without overwhelming stylization. This will give you (or the web developer) a good idea about how to code the page when it comes time. Finally, save your file by clicking File and then Save As.



Now that you've seen how you can create a web page wireframe, you can design layouts and get a feel for how it will look before you start developing your site. You can talk to a design company, such as Codank Web Design, to get help developing your concept and your website.

About CODANK Web Design

CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.

For more information, visit us at www.codank.com

Creating an animated GIF in Adobe Fireworks CS4

If you've ever worked with images, you've probably wondered how to create an animated GIF. Although it may seem difficult, the truth is that creating GIFs is easy when using the right tools. In this tutorial, we'll look at how to create an animated GIF using Adobe Fireworks CS4.

First, open Fireworks. Click on File and Open, then navigate to the folder where you've saved the images you want to use in your animation. After you open them, you need to check their sizes. To do this, click Modify then Canvas and Image Size.



A dialogue box will pop up, showing the size of the image and allowing you to change it. For this demonstration, the pictures I used were too big, so I changed the size to be 200 px wide and 133 px high.



Now you need to open your other picture files and make sure their image sizes are the same. If they haven't already been created to be the same size or resized, then change their sizes to be same width or height. You should be constraining proportions and keeping the objects to scale, so if one of the other values is different after you enter a new value, you can use the crop tool in the Tools panel until you have the exact same size as the first picture. It's very important for all your pictures to be the same size. If you need to crop, select the tool, drag your selection, and hit Enter.



Create a new document by clicking File then New. When the dialogue box appears, make sure the background is set to transparent and enter new values in the width and height boxes. Make sure the canvas size is the same size as your pictures.



At this point, you want to show the States window (called Frames in earlier versions of Fireworks). States are used similarly to layers, though instead of being on top of each other, they're used for images that are to be shown in ordered succession. In order to show the States window, click Window and then States.



Switch over to the tab of your first image. Select it by clicking Select and then All. Next, copy it and switch over to your new document, then paste the image. This will put the image in the first state (or frame) of your document. At this point, you can label your states to tell them apart. To do this, double click on the name (like State 1) and enter a new name.



Now add a new state. You can do this by navigating to the States panel on the right side of the workspace and clicking the notepad icon on the lower right.



Copy and paste your second picture into the document, and rename the state. You can do this as many times as you need to, depending on how many pictures you have. Once you're finished copying and pasting, you can change the speed of the animation. The default is 7/100, where 100/100 is one second. To change the value, double click on the 7 next to the State name and enter a new value.



Here, you can customize some other options if desired. For example, you might not want your animation to keep playing continuously, or you might want the images to gradually fade into the next. To change the way the GIF behaves, look at the bottom of the States panel and click the icons to explore your options.



Clicking on the arrow will give you the option of changing how many times the GIF plays. I want to leave mine on a continuous loop, so I keep the default.



The first icon controls onion skin options. Using onion skin means that your images will gradually fade into the next image instead of switching over. This provides a smoother transition.



At any time during the process, you can preview your animation by clicking the play button at the bottom right of the workspace, just above the properties panel.



Now that you've chosen your settings, it's time to save. Navigate to the Optimize panel at the top of the right side of the workspace and click the drop down for file extension. Choose Animated GIF.



Next, click File then Export. Give it a name and navigate to the folder you want to save it in. You can view your GIF by going to the folder it's saved in and right clicking, then moving down to Open with and choosing Internet Explorer.



And that's it! Now that you see how simple it is to create animated GIFs, you can make icons and other moving images quickly and easily.

About CODANK Web Design

CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.

For more information, visit us at www.codank.com