Icons and Logos
Page icons and logos can be designed in Macromedia Fireworks or Adobe Photoshop. Or, they can be created using a vector illustration application such as Adobe Illustrator or Macromedia Freehand. The advantage to using a vector file is the quality of the graphic and the ability to edit the graphic.
Converting vector text and logos to curves (Converting vector based text in programs such as Adobe Illustrator and Macromedia Freehand makes the item a graphic. The text is no longer editable and the font appearance is preserved.) application without loss of quality. The edited file can then be re-imported into an image editing program.
By creating a vector graphic and importing it into an image editing application, the font data is preserved and the font appearance remains unchanged. The graphic can then be saved or exported as a Web- friendly format, as we mentioned several times already, GIF or JPG.
I created a personal logo for my Web portfolio using Macromedia Freehand. The logo type was designed and then converted to curves when complete.
By converting the file to curves, the font data is not needed and the editable text turns into an un-editable graphic. The file can now be saved as an .eps file. Then, it can be opened in Fireworks or Photoshop and eventually exported or saved to GIF or JPG format.
Navigation and Buttons
One great way I found to create graphical buttons is to make them in Macromedia Fireworks and then slice and export them out as a Web page containing a nice neat table.
Then the table can be copied and pasted into a layer and positioned anywhere on the Web page freely and easily.
The visual advantage to this is that you can work directly in Macromedia Fireworks, make a Web screen, and see how the navigation fits into the Web page itself.
You can create shapes using the shape tools in Macromedia Fireworks and place type on the shapes to create individual buttons. Or, you can make complete navigation panels that incorporate all site controls. Remember, navigation also can be HTML Web text only.
A Word About Slicing and Exporting Pages
Both Macromedia Fireworks and Adobe Photoshop provide image slicing and exporting functions. However, I prefer the slicing and exporting tools found in Fireworks better than in Photoshop. On the other hand, I like the typographic effects, image editing features, and overall design control I get with Photoshop. Navigation an d button bar in Macromedia Fireworks (You can make navigation bars and buttons in Macromedia Fireworks quickly and easily. Buttons can be sliced and exported to make navigation bars for use in Macromedia Dreamweaver.) As well, in many cases, I have legacy documents that are in Photoshop file format. My point here is that I use both applications when I design Web site screens. You might favor one over the other. But for slicing, exporting, and integration with Dreamweaver, Fireworks wins hands down in my opinion. Not to worry though, Fireworks opens native Photoshop files with layers and the text is completely editable.
As long as versions are up to date, the integration is seamless. You could design all your pages and navigation graphics in Photoshop and then open them in Fireworks to optimize, slice, and export. If you create pages in Photoshop, you can save the files as PSD format. Then, you can open the PSD file directly in Fireworks. You can tweak the page and slice and export. Lastly, you can save the file as PNG so that it is easily edited and re-exported in the future. Macromedia was purchased by Adobe in April 2005, but Fireworks and Photoshop still remain individual products.
In the future, it will be interesting to see how Adobe integrates the applications to create a Web graphics tool that will enable even the newest Web portfolio designer to create Web screens and output them to Web pages quickly and easily. The process is good now, however there always be improvements made to digital workflows as technol- ogy progresses. We have overviewed various pieces in the Web production process up to this point.
We covered several approaches to creating Web pages. Web screens and using Dreamweaver for creating Web pages from scratch are main points that we discussed. Also, we covered various graphic file formats used for Web images and we establish which formats to use for various types of artwork. We also established basic designs for our Web portfolio pages and developed storyboards to guide us through the development process. In the next sections we take a closer look at the tools and explore some of the most important techniques used to create Web portfolio pages.
Don’t expect to learn the applications and each technique immediately after reading the tutorials. You should become familiar with techniques by reading about them and then attempting to execute them repeatedly on your own while tackling a Web portfolio design project. As I mentioned previously, you will develop your own personal workflow and technical approach as your practice and experi- ence preparing assets and creating Web pages expands. With that said, let&rs quo;s begin by using Macromedia Fireworks to design, slice, and export a Web page.
Make a Web page layout in Macromedia Fireworks MX 2004:
1.Open Macromedia Fireworks and immediately go to Window>Properties and Window>Tools to show the tool bar and property inspector. Both palettes may be open on start up.
2.Go to File> New and create a document at the size you want your Web pages to be: use 800 x 600.
3.Set the resolution of the document to 72 dpi and choose a Web safe background color from the palette.
4.Start by creating a page header and navigation bar. If you are using HTML text-based navigation, you can skip this section. Your navigation will not be graphical. That’s fine and very appropriate for a Web portfolio. But if you want get a bit fancier, the following are a few steps on how to create page headers and graphical navigation buttons. To make a page header, create a box that spans the top of your Web page (800 wide by 75 high). Set the header box to the desired color and then add text to the bar or open an image and drag it into the Web page document directly from its window (see next). Scale the graphic accord- ingly in the Web page document and then place it on the navigation bar.
The header text should state the page name, for example bio or resume would be typical headers (categories). To make the navigation buttons, create boxes or circles (around 50 x 50 pixels) and align them vertically or horizontally. Then overlay the corre- sponding category text. Be sure to align the text and the buttons correctly so that the visual appeal is consistent. If you need help with alignment, you can go to the menu item View> Grid and View>Guides — Drag guides from the rulers on to the page. Align elements using the guides. Leave the rest of the page blank. We will add layers to this content area later on when we open the newly sliced Web pages in Dreamweaver.
5.If you want to push the pages further in Fireworks, you can open the Web graphics you created into your screen designs by dragging and dropping from window to window, copying and pasting, and by importing. The easiest way is to drag and drop. You can open images in Macromedia Fireworks and drag from one window to the next. Each image comes over on to its own layer. Use the scale tool or simply click CRTL+T and you will get a free transformation bounding box around the graphic. Hold the corner node and shift key and scale the graphic; hit return to complete the operation. You can design pages with g raphics completely using Fire- works or place the individual images on the Web pages later using Dreamweaver. We will show both techniques in this web design tutorial, the choice of design methods will be yours.