Week 5 Summary – Part 2: Notes

Adobe Fireworks

Fireworks is a hybrid graphics program that allows you to  simultaneously edit both vector and bitmap images within the same document.  Primarily combines the features of Photoshop and Illustrator, although it also  has elements in common with Flash (such as making and nesting buttons). It is a  very good tool to use for laying out website mock-ups, to give you a visual  reference when programming a webpage. The tool bar has more in common with Illustrator than Photoshop because of it’s vector capacity (i.e. instead of the
swatches in the tool bar toggling between foreground and background color, you  have stroke and fill colors). Fireworks does not support the smart objects and  adjustment layers features of Photoshop.

Import files into a document instead of placing. When you import,  you can determine the size the imported file will be by clicking and dragging  (or click only once to maintain the original size). Placing your cursor between 2 guides and holding down the shift
key will bring up a pop-up indicating the distance between the guides.

Window–>Extensions–>Kuler: panel that connects you to an  RSS feed from the Kuler website and allows you to use the Kuler features within  Fireworks instead of opening a separate webpage. Button in the lower right  corner of the Kuler panel will allow you to import a chosen color theme into you  swatch menu.

To create a symbol, select the object you wish to covert and press  the F8 key. This will bring up a ‘convert to symbol menu’. You can tell that  something is already a symbol if you click on it and a plus sign appears.

Symbols can be nested.

Common library–>(categories to choose from): archive of  pre-made symbols you can use. Drag and drop from the library panel if you want  to use one.

In Fireworks there are lots of premade templates which are already  the sizes of various applications (such as for different screen sizes of mobile  devices or standard monitor resolutions, etc). Some have premade grids that  are ideal for layout a standard webpage. (These are under ‘grid system’.)

The content of the properties panel changes based on the objects  or tools you have currently selected.

The native file format for Fireworks is ‘Fireworks PNG’. The  Fireworks PNG is editable, and supports layers. Regular PNGs are flattened and  not editable. The editable PNG is of course larger file sizes than standard  PNGs so if you are working on a file to be uploaded to the internet you should  export as a regular PNG when you are finished.

The controls to optimize a file are built right into the main  interface of fireworks.

Working with vector in Fireworks:

You can change the edge of a path (like giving it a feathered  edge) directly from the properties menu, instead of having to apply a filter  like a blur, etc in Illustrator. You can also add effects to your stroke (like  a charcoal, airbrush, etc, effect.)

With the pen tool you can change if an anchor point is for a  curved or straight line simply by clicking it with the pen tool (simpler than  having to use a special ‘convert anchor’ setting under a pen drop down like in  Illustrator.)

** To delete an anchor point you have to click on the point twice (the first time converts it, the second time deletes it.) There is no ‘delete anchor point’ pen option under the pen icon on the tool bar like in Illustrator.

You can apply pre-made textures to the fill of a path (in the  properties menu). You can also add effects such as shadows and glow from the  filter drop down menu in the properties menu. These are “live  filters”.

Nine slice scaling – Divides a selected object with a grid of 9 segments. You can move
around the lines marking the divisions. When you scale, only the center squares  of the grid will distort, the outer corners will retain their original  dimensions. Good for stretching out the center of an object without having to  cut it apart.

You can make a stroke dashed with the ‘edit stroke’ menu in the  properties menu. You can set numeric values for both the dash and the gaps  between the dashes.

If you save a custom stroke it will not appear directly in the  stroke menu, but under a drop-down from the category the stroke was created  under (i.e. pencil stroke, etc.)


pixel = “picture element”

The direction of lines on your page conveys different moods and  effects. Diagonal lines create movement. Jagged lines create tension,  agitation.

Adding rounded corners to boxes makes your page feel more organic.  The easiest way to get rounded corners is with CSS3, although not all browsers  will support it, so it is best to use rounded corners in a subtle manner where  the design won’t be noticeably disrupted if the browser loads the corners as  square instead.

Rotated objects add more interest to a page design. The standard  way to achieve this is by rotating the image before inserting it into the page  (transform in Photoshop and save image pre-rotated). An image can also be  rotated after adding it to the page, through CSS3, although like the rounded  corners, this will not load properly in every browser.

Economy of Line
Using as few lines as possible to achieve maximum impact with a design.

Create depth and volume with light and shadow.

This entry was posted in ART 170: Web Design 1. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s