# HELLO~

FeCREATING A FRONT ENDFW

ADOBE® FIREWORKS® CS 5

AiADOBE® ILLUSTRATOR® CS 5

Web Arts #1 - Fireworks

By Yanju Chen

FWADOBE® FIREWORKS® CS 5

FWADOBE® FIREWORKS® CS 5

Fireworks is a bitmap and vector graphics editor formerly developed by Macromedia and since 2006 developed by Adobe.

The main purpose of Adobe Fireworks is for creating expressive, highly optimized graphics for Web, screen and various devices .

It should be noted that because of its main purpose, Fireworks has certain limitations: it supports only RGB/RGBa colors and the maximum canvas size of its files is approximately 10,000×10,000 pixels.

WHAT IS IT?

© WOY & sysuMSTC 2012

FW

With Fireworks you can make websites, user interfaces and rich Internet application (RIA) interfaces which are editable in both vector and bitmap modes.Fireworks has Pages/Master Pages, Layers, States and Symbols – all features that considerably speed up development of Web designs.

You can also use it to create wireframes and interactive prototypes —you can apply behaviors to objects to simulate interactivity; you can add text, symbols, images and also import Illustrator and Photoshop assets; and once ready with the design you can export the files as clickable PDF mock-ups for approval.

WHAT IS IT GOOD FOR?

© WOY & sysuMSTC 2012

ADOBE® FIREWORKS® CS 5

FW

HOW IS AN ICON GENERATED?

© WOY & sysuMSTC 2012

ADOBE® FIREWORKS® CS 5

FW

EXAMPLE #1 SLICING

© WOY & sysuMSTC 2012

ADOBE® FIREWORKS® CS 5

FW

EXAMPLE #2 ACCURATE POSITIONING

© WOY & sysuMSTC 2012

ADOBE® FIREWORKS® CS 5

FW

EXAMPLE #3 FAST & SIMPLE FILTERS

© WOY & sysuMSTC 2012

ADOBE® FIREWORKS® CS 5

FW

MORE OR LESSNOT THE SAME…

© WOY & sysuMSTC 2012

ADOBE® FIREWORKS® CS 5

AiADOBE® ILLUSTRATOR® CS 5

Ai

Adobe® Illustrator® CS6 software is powered by the new Adobe Mercury Performance System so you can work with speed and stability on large, complex files.

A modern, updated interface streamlines daily tasks. Advanced creative tools enable you to capture your vision better than ever.

WHAT IS IT?

© WOY & sysuMSTC 2012

ADOBE® ILLUSTRATOR® CS 5

Ai

Over years Adobe Illustrator has become the standard application when it comes to illustration design.

Artists, illustrators and graphic designers use Illustrator to create vector-based graphics which — contrary to raster-based editors such as Adobe Photoshop — can be easily rescaled without the loss of quality.

E.g., Illustrator is often used to quickly transform hand-drawn sketches on a sheet of paper into lively and colorful digital images.

WHAT IS IT GOOD FOR?

© WOY & sysuMSTC 2012

ADOBE® ILLUSTRATOR® CS 5

Ai

EXAMPLE #1SIMPLE AMENDMENT

© WOY & sysuMSTC 2012

ADOBE® ILLUSTRATOR® CS 5

Ai

EXAMPLE #2EXTRACTING FROM .EPS

© WOY & sysuMSTC 2012

ADOBE® ILLUSTRATOR® CS 5

Ai© WOY & sysuMSTC 2012

ADOBE® ILLUSTRATOR® CS 5

EXPLORING MORE POTENTIAL…

FeCREATING A FRONT END

AND HOW YOUCREATE A FRONT END?

Fe© WOY & sysuMSTC 2012

CREATING A FRONT END

THINGS YOU NEED #1IDEAS / INSPIRATIONS

Fe© WOY & sysuMSTC 2012

CREATING A FRONT END

THINGS YOU NEED #2RESOURCES

Fe© WOY & sysuMSTC 2012

CREATING A FRONT END

THINGS YOU NEED #3TOOLS

Fe© WOY & sysuMSTC 2012

CREATING A FRONT END

THINGS YOU NEED #4STILL INSPIRATIONS…

Fe© WOY & sysuMSTC 2012

CREATING A FRONT END

SPECIAL OFFERS #1GET THE COLORS YOU NEEDUSING COLOR SUCKER

Fe© WOY & sysuMSTC 2012

CREATING A FRONT END

SPECIAL OFFERS #2GENERATING YOURSELF BY YOURSELF…

Andrea Mosaic

Fe© WOY & sysuMSTC 2012

CREATING A FRONT END

# THE END ## NEXT # WITH CSS …