How to Design a Website Using
Adobe Fireworks

This is the first lesson where I'm gonna show you how to create web graphics in Adobe Fireworks...

Download everything we made in this video (ZIP)

Hey everybody, Greg Davis here. In this video I'm gonna show you how to create web graphics using Adobe Fireworks.

Now you probably know Photoshop and Photoshop is great, I love it, it's the best photo editing program but Fireworks was designed specifically to create screen graphics and optimized graphics for the web.

And it's much better when it comes to creating web graphics so that's why web designers use it. And you can download a free trial of Fireworks just sign up at Adobe.com and you can download a fully functional trial.

So when you open Fireworks you are gonna see the START SCREEN as you can see right here.

I'm gonna create a NEW document. Fireworks uses an enhanced version of the PNG format as it's native file format and it maintains all the information in the file all the layers and everything. It's pretty much like the Photoshop PSD format.

Ok!

Canvas size: actually, all my web graphics are gonna be stored inside this document and I need some real estate. So I MAKE it 5000 pixels wide and 5000 pixels high. It should be enough.

Resolution: doesn't matter now because I define the canvas size in pixels.

Canvas color: actually you can change it anytime but I go with transparent. CLICK Ok!

And I have a brand new document. Let's SAVE it first.

Ok, you need a site folder for every website project so I just CREATE a new folder.

Your site folder name could be something like yourdomainname.com but I'm gonna NAME it as "site1"

And inside my site folder I CREATE a new folder for my Fireworks documents.

I'm gonna NAME it as "fireworks".

File name also could be something like your domain name but again I'm gonna NAME it as "site1"

File format is PNG as I mentioned before. I just CLICK save.

And now you can see the Fireworks user interface. And I'm gonna show you everything you need to know when we get there, but let's start working now because that's how you can actually learn stuff by doing, right?

So I recommend you do everything I do on the screen and you're gonna master Fireworks very quickly and I start it from scratch just like you so let's get started! I need some cool web graphics I can use.

And web graphics are typically the place where people stumble and fall. And yet it's one of the easiest things to create because once you understand where to find good graphics and recognize them. The Internet is crammed with good graphics that you can nick or rip.

And even Picasso had a saying he said "Good artists copy great artists steal." So I'm gonna show you how to get a design, edit it, make it to your own so it's different and it's stands out.

One of the best places to find great web graphics other than just searching for images on the Internet is templatemonster.com.

They deliver the best templates on the net, just like they say, and they really do, they have templates created by the best web design studios in the world.

And here on the site you can search by CATEGORY and find templates that are designed specifically for your market. Or you can even search by COLOR, so that's pretty cool!

I'm gonna SEARCH for website templates, CLICK Apply!

And I CHECK out the let's say design category. APPLY and SEARCH let's what I got!

Ok, I've got almost 600 templates to get ideas from. Which is insane! It's a lotta templates.

And here you can actually buy templates and get a full design. But I'm not gonna buy any templates now. Obviously, I'm just shooting this video for you. But I try get one and copy it.

Like THIS one is pretty cool. Let's CHECK it out!

Ok, this one is perfect for an exercise, so I'm gonna copy this header image and paste it in Fireworks. I just RIGHT CLICK on the image (or hold down the ctr key and click on the mac) and choose COPY IMAGE.

Now if you can't copy the image for some reason maybe it's a flash file or whatever, then you can capture your screen. On the PC keyboard there is a key called "Prt Scr" and it basically captures your entire screen. On the mac you can press cmd,shift,3 to capture the entire screen or cmd,shift,4 to capture a part of the screen that you select.

And once you've done that, you've copied the image. Let's GO back to Fireworks!

And I PRESS ctr,v (or cmd,v on the mac) and paste my image in.

I'm gonna zoom in a bit. Now, there are lotta different ways to zoom in Fireworks:

You can use the magnification tool right HERE and you can choose any of these preset zoom values.

You can also press ctr,+/- to zoom (command,+/- on the mac)

Or you can just hold down the ctr key and use the scroll on your mouse. It's the same thing.

But make sure you select the object you wanna zoom in because Fireworks is gonna zoom in on the middle of your selected object. If nothing selected then on the middle of your canvas. So make sure you select first and don't get lost on your canvas.

But you can also use the ZOOM TOOL up here, or just press z and CLICK and DRAG over the area you wanna zoom in. I'm gonna zoom out a bit. Alright!

Cool! And if you need some real estate you can collapse your panels down to just icons by CLICKING this arrow up HERE. You can expend them back out by CLICKING again.

Or you can also PRESS your tab key and hide, or show all your panels and tools. Or by PRESSING the f key a couple of times you can access the full screen mode.

And these are pretty handy if you need some real estate.

Now I'm gonna edit my image. First, I'm gonna delete the lower part. And then I'm gonna get rid of THIS text, logo and search field as well. But before you do anything make sure you select your image first!

Some designer had a saying he sad "To have an effect you must select" And it really applies to Fireworks! So I GRAB my pointer tool, SELECT my image.

And then I GRAB my "Marquee tool" and SELECT the area I wanna delete.

Ok, I ZOOM in a bit just to make sure I only delete the white part.

I can MOVE my selection using the arrow keys on my keyboard. I can move 10px if I hold down the shift key.
And if I HOLD DOWN the spacebar I can SCROLL on my canvas using the mouse.

And also if I HOLD DOWN the shift key I can ADD to my current selection. Or if I hold down the alt key (or option key on the mac) I can GET RID OF the selection.

Also there are many different types of selection tools. Like: Marquee tool, Oval marquee tool. I have Lasso tool, Polygon lasso tool and a Magic wand tool as well. So you can use any of them.

But my selection is fine so I just PRESS my delete key and delete the lower part.

Cool! I PRESS escape to deselect, or if it doesn't work I just RIGHT CLICK and CHOOSE deselect.
Ok, I'm gonna zoom out a bit. I select my image and ZOOM OUT.

And now I'm gonna get rid of the text and logo and search field. But before I start editing my image I CREATE a copy of it and keep an original version just in case.

So I HOLD DOWN my alt key (or opt key on mac) and CLICK the image, GRAB a copy and DRAG it over here.
Ok, I ZOOM IN and I GET my Rubber Stamp Tool.

And the way rubber stamp tool works is it samples pixels from a location and copies them into the area you wanna fix. Let me show you!

If I HOLD DOWN my alt key and CLICK once I select the location I wanna sample pixels from. And once I let GO my alt key and CLICK again I copy pixels into that area.

See, I can just EDIT my image.

But make sure you're locating an area that's got similar coloration, brightness and detail. Fortunately, I don't have to worry about it since my image has pretty much the same coloration all over it.

But I'm gonna CHANGE the brush size to 50.

And I also CHANGE the edge to the minimum because I don't need it.

You can also change the opacity. For me 100% is fine! So I just edit my image.

Ok, it's all gone! I GRAB my Pointer tool, SELECT my image. And down HERE on the properties panel I can see the actual size of my image. It's 970 pixels wide and 165px high.

And it's pretty cool because the ideal header image is somewhere between 800 and a 1000 pixels wide. But I'm gonna resize it just a bit.

I wanna constrain proportions so I TURN this on.

And now I CHANGE the size to 950px wide. As you can see the height also changed proportionally.
And actually I wanna make it even lower but I don't care about proportions now since I don't have anything special on my image. If you have people on your image or something you definitely wanna constrain proportions. But with my image it doesn't really matter, so I TURN IT OFF.

And I only CHANGE the height to 150px.

Ok, now I'm gonna put my own logo and text on it. But first, let's talk about the Fireworks user interface because there are a couple things I wanna show you.

Here on the LEFT you can see your tools. On the RIGHT you can see your panels. If you ever try to find a panel and you can't see it on your screen the Window menu is the place to go.

All the different panels are listed HERE and there is a checkbox beside the ones that are currently visible and you can turn off or turn on any panels you need.

You can also float panels. Like I can GRAB a panel and just DRAG it outta the canvas.

I can MOVE it around and I can MOVE it back over to it's group. There you go!

One panel I wanna point out for you is the Layers panel. Layers help you organize your objects.

And any Fireworks document even if it's a brand new file you've just created is gonna have at the very least a Web layer and content layers.

The Web layer is where web objects are stored. Things like slices where you optimize and export your images for the web. We're gonna talk about that later.

The content layers are where you store all your visual elements. Your images, your text and all those different things that are in there.

Inside my content layer which is called "Layer 1" you can see my 2 IMAGES.

I can DOUBLE CLICK on the layer and RENAME it. I'm gonna CALL it "header"

And HERE at the bottom I can create a new layer. I can create a new sublayer, or I can delete any selected layer or object.

I can also TURN OFF an object or a layer, so I can't see it. I TURN it back ON.

And if I wanna make sure an object doesn't get edited, even by me accidentally, I can lock it, so I can still see it but I can't select it or edit it. I'm gonna LOCK my header images.

And I'm gonna bring in some text.

I GRAB my Text tool.

And I want my text right HERE. So I just CLICK and DRAG and when I LET GO the mouse I can start typing. You can type in your own slogan or whatever your brand requires.

I just TYPE in "Professional Web Design Made Easy"

Ok, I GRAB my Pointer tool, SELECT my text and I ZOOM OUT a bit.

And I CHANGE the font family to impact.

Font size will be 35px.

And I CHANGE the color. I can pick a color here, I can use my color picker or I can pick any color from the screen. And I PICK the color from my original image.

And I like the color range but I wanna MAKE it brighter. So I'm just gonna adjust it a little bit and MAKE it brighter. Ok!
Actually I GO back for a second. You can also experiment with fill options. I'm not gonna do that now, so I just CLICK away.

And HERE you find all your basic text editing stuffs. You can CHANGE the color of the stroke to red for example. Ok, I CHANGE it back to transparent.

And you can change the horizontal scale, you can bold your text, you can change the opacity, the blend mode and you can add live filters.

I'm gonna ADD a Drop Shadow live filter. Sorry you can't see it. Shadow and Glow, and Drop Shadow.

I can edit it. I can change the color of my shadow, I can change the distance, I can change the opacity, the softness and the angle. And if I CLICK away, I can see my filter right HERE.

I can TURN it off, I can TURN it on, I can double CLICK it and edit it, or I can add even more filters, or I can just SELECT it and DELETE it by CLICKING this minus icon.

And the cool thing is: you can experiment with filters as much as you want without effecting your actual object. I mean, you can always go back and edit your filters or even delete them so filters are cool. I use them a lot.

But you can also apply styles to your objects and I show you how to do that in a second. I just make a copy of my text real quick because once you apply a style to an object it's very difficult to get rid of it. It's not like filters, it's more than that!
So I HOLD down my alt key (or opt key on mac) and CLICK on my text and DRAG a copy over here.

Ok I GO to my Styles panel and HERE you can see a lotta different style families.

I'm gonna check out my Wood Styles. And I'm gonna CHOOSE this one (Wood/3.)

Ok, it looks good! Now if you take a look at the properties panel, you realize that styles are a combination of different fills, strokes, live filters and photoshop live effects. This means I can edit the style and after that I can even save my own style by clicking this little ICON here. So that's pretty cool!

And you can apply styles to any object, not to just text, even to photographic images. So keep that in mind!
Ok, I DELETE my white text and I REPOSITION this one.

Ok, now I'm gonna create some background for my website. I GRAB my Rectangle tool.

And I just CREATE a rectangle right HERE.

Ok, there is an overlap, so I GO to my Layers panel and I CHANGE the order of my objects. I MOVE my rectangle to the bottom. There you go!

Actually I CREATE a new layer for my background. So I CREATE a new layer and I'm gonna NAME it as "background"
And I GRAB my background rectangle and DRAG it over inside my background layer.

Ok, there is an overlap again so I CHANGE the order of my layers. Header goes to the top.

And now I SELECT my background rectangle and I RESIZE it to let' say 920px wide and 1500px high.

Color fill will be WHITE. No stroke and I GET rid of the texture as well. Ok!

And I'm gonna ADD a live filter. Sorry you can't see it. Shadow and Glow and Glow.

And I CHANGE the color to grey (#666666), 2px wide. I CHANGE the Opacity to 75%, Softness 10 and Offset 0 is fine.
I just CLICK away and you can see my glow right HERE.

I CHANGE the roundness of my rectangle to 5%. Let me show you! You can see it's rounded right HERE.

And I REPOSITION my rectangle and once I start MOVING it I get these kind of pink smart guides. By default they are turned on. And what they do is they help you align objects based on the position of other objects on your canvas.
So based on the position of my header image I ALIGN center.

Ok, I LOCK my rectangle.

And I GET my Zoom tool and ZOOM IN to this area.

And I'm gonna create a triangle and fill out THIS gap if you will.

I GRAB my Arrow tool and I CREATE an arrow.

I CHANGE the color to grey (#333333).

I CHANGE the size to 100px wide and 50px high.

Ok, sometimes when you resize a vector object you get this little anti-alias edge. If you wanna get rid of it you can either change the edge to hard down HERE at the Properties panel. Or you can go to your Modify menu and choose SnapToPixel. It's gonna handle that for you, but I'm not gonna do that.

I just REPOSITION my arrow using my arrow keys. And if I hold down my shift key I can move 10 pixels on the canvas. I ZOOM IN a bit.

There you go! And I MOVE my arrow to the bottom of my layer. So it's not overlapping my site.

And I need a different arrow on the other side. So I just SELECT my arrow GO to my Edit menu (or Fireworks menu on the mac) and CHOOSE duplicate.

And I just GRAB this copy and DRAG it over to the other side.

Ok, I have to flip this arrow. I can do it USING my Scale tool and just ROTATE manually. Or I can GO to my Modify menu CHOOSE transform and flip horizontal.

There you go, I just REPOSITION it.

Ok, I LOCK my arrows, so I can't reposition them anymore.

And I'm gonna create some background for my website. Like right HERE. So I GRAB my Rectangle tool and I CREATE a large rectangle.

I MOVE it to the bottom of my background layer.

And I CHANGE the size to 1600px wide and 600px high.

I REPOSITION it to the top of my header image.

And I CHANGE the color to grey (#999999).

Ok, I GET RID of my texture. I don't know why it's here anyway. Cool! No stroke.

And I want my background to fade from grey up the top down to white down here at the bottom. So I'm gonna apply a mask to my rectangle.

I GO to my Commands menu and CHOOSE Creative Auto vector mask. And I wanna GO from solid to transparent. So this one is cool. I CLICK apply and I have a fancy fading background.

Actually, it looks kind of weird because my canvas is transparent and I can see the checker board underneath it. So I SELECT my canvas and I'm gonna CHANGE the canvas color to white.

Ok, I'm gonna edit my mask. I GO to my layers panel and HERE you can see the mask applied to my rectangle.
If I CLICK on it I can edit it. You can see a line here appeared. This is the actual fading. I can MOVE it around, I can CHANGE the angle, I can MAKE it shorter or longer or whatever I want.

And if I wanna get rid of it I just CLICK on the mask, PRESS my delete key and CHOOSE discard.

Now it's gone! But I'm gonna undo these changes by PRESSING ctr,z (or cmd,z on the mac) and I leave my mask here. It's fine.

I just wanna make sure it fades out before the end of my actual rectangle because if it doesn't I'm not gonna have a nice fade-out on my background.

Let me show you what I mean: If I MOVE the fade-out point down a HERE, you can see there is no fade-out at the bottom and it's not nice at all. So I MOVE it back UP.

Actually I MOVE it over here and make sure it's on my rectangle. There you go!

And the starting point is fine. So I just I LOCK my background rectangle. I DESELECT it and LOCK it.

Good! I LOCK my rectangle. And I'm gonna create some logo using vector objects. You already know vector objects. Text is a vector object, rectangle is a vector object.

And unlike bitmap objects which are made of a bunch of pixels, vectors are more of a mathematical formula that describes an object size, the color it's filling the object and also the stroke around the object.

One of the advantages to vectors is unlike bitmaps they can be scaled and there is no degradation in quality. I mean you can resize a vector object significantly and there is no image quality breakdown what so ever.

But you can't do that with bitmap images obviously. Like this image I got from templatemonster this is a bitmap image. And like any photographic image it's made of a bunch of pixels.

And if I started scaling it sooner or later I could see the pixels and it would be fuzzy. So I can't make it any larger than it is. I can make it smaller but I can't make it any larger.

So that's the difference between vectors and bitmaps. And now I'm gonna show you how to work with vectors.
I GRAB my pen tool. And the way pen tool works you can create 2 different types of lines. You can create straight lines or curved lines.

To create a straight line I simply CLICK once to get the pen started and then I just DRAG across.
If I CLICK again I can change direction, so I can MOVE down for example. If I HOLD down the shift key I can create horizontal or vertical lines.

And if I wanna add some curves I CLICK and DRAG and when I drag I get a curve. If I LET go the mouse I can MOVE further in my design and I'm maintaining the curve.

So I can CLICK again and create a different curve. Or if I need a straight line I just CLICK this point and create a straight line.

And I GO all the way back to the beginning and when I get back to the beginning I can CLICK one more time and close the path. You don't have to do it but you can.

And I can CHANGE the color of my stroke for example. I can make it thicker.

And I can even CHANGE the fill color. So I have a filled object.

I can USE the scale tool to ROTATE my object. Or I can SCALE it and I can make it as large as I want because it's a vector object.

I can also GRAB my rectangle tool and add to it. Let's add to it. I can even SUBTRACT.

And if I GRAB my subselection tool I can MOVE these rectangles around.

Also I can GET my freeform tool and FORM my object. There you go!

Ok, but this was just a quick exercise so I DELETE it and I show you the common library symbols. You can find them down HERE on the right.

Here you can find all kinds of different symbols. Let's see what I got inside my 2D objects folder.

These are pretty commonly used symbols you can see them up HERE.

Let's say I wanna use these GEARS for my logo. I just GRAB it and DRAG it onto my canvas.

I make sure it's INSIDE my header layer. It is so it's cool!

And symbols are vector objects so I could make it as large as I want without image quality breakdown. I'm not gonna do that but I wanna APPLY some style to it.

Like this one or maybe this one. This one is cool! (WOOD/3.)

Now, if you create your own logo for yourself make it as simple as possible. The best brands in the world like Nike or Apple they all have a simple logo. So make your logo as simple as possible.

Ok, so HERE is my website.

And if I wanna see my site with text on it I can bring in some text. But if I don't wanna type I can GO to my Commands menu and CHOOSE Text and Lorem ipsum or whatever.

And this brings in some text for me. And I can format it and I can create a perfect prototype. Ok, I just wanted to show you this I DELETE it now.

And I'm gonna show you how to create buttons. I GRAB my rectangle tool and I CREATE a rectangle.

I CHANGE the size to 240px wide and like 60px high.

I CHANGE the roundness to let's say 60.

And I also CHANGE the color. And I wanna use the best possible color for my order button which is actually yellow. I don't know why but it's been tested and yellow buttons get the most clicks so I CHOOSE yellow.

I GRAB my text tool and I'm gonna create some text. I TYPE in "Add to Cart"

Ok, I SELECT my text. I'm gonna CHANGE my font family to tahoma.

I BOLD it. Actually there is 2 places to bold it. Whatever. This one is enough.

I CHANGE the size to let's say 28px.

And I CHANGE the color to blue (#003366).

And I wanna make sure my text is aligned center. So I'm just gonna ZOOM IN a bit.

Ok, now I SELECT my rectangle. I GO to my Commands menu. Creative Auto Vector Mask. And I CHOOSE a fading. This one CLICK apply. I'm just gonna adjust it a little bit. Cool!

I SELECT my text and DO the same thing. And I ADJUST my mask. Cool!

And I wanna create some reflection for my button. So I SELECT my rectangle, GO to my Edit menu (or Fireworks menu on the mac) and CHOOSE Duplicate.

I MOVE the copy right HERE.

I CHANGE the color to grey (#999999)

I ADJUST the mask a little bit.

OK, I have a nice reflecting button. But I'm gonna create a few more because I wanna show you all the different ways to create your buttons.

So I SELECT my button the whole thing. I HOLD down my alt key (or opt key on the mac) and DRAG a copy over here.
Ok, I DELETE the reflecting part.

I also DELETE the mask. CHOOSE discard.

And I ADD some live filters like photoshop live effects.

Let's TRY Gradient overlay.

I CHANGE the opacity to let' say like 30. Click Ok!

And it's pretty cool. Now I have a different kind of button. But let's create 2 more.

I CREATE an other copy.

And I DELETE the photoshop live effects.

And I APPLY some style. Like this one. (Dark chrome styles/3.)

And I can actually edit the style. So I CHANGE the color to yellow. OK!

I also CHANGE the color of the stroke to a darker yellow. So I ADJUST it, MAKE it a little darker. Cool!

And I CHANGE the tip size to 2px.

And I wanna ALIGN stroke to inside to maintain my button size.

Good! I create one more button. I GO to my common library.

And actually I have a Buttons folder with some buttons. But I GO to my HTML folder and I GET a button here for example this mac button. I GRAB it and DRAG it onto my canvas.

Ok! I'm gonna CHANGE the label. So I go to my Symbol properties panel and here I can change the label. I TYPE in "Add to Cart" Ok, I just HIT enter and now it's on.

Ok, so there are lotta different ways to create your buttons. You can also find a button on the Internet, edit it, make it to your own and I show you how to do that as well. But I show that on a checkmark, not on a button because I need a checkmark as well.

So I GO to google and I TYPED in "checkmark" and I search for IMAGES and I need a good quality image so I CHECK large. Ok, let's see what I got!

This one is pretty cool and pretty large too, so I just CLICK on it. And it's a great quality image, not fuzzy at all. So I just RIGHT CLICK on the image (or hold down your ctr key and click on the mac) and CHOOSE copy image.

I GO back to Fireworks and I just paste it in by PRESSING ctr,v (or cmd,v on the mac).

Ok, I SELECT the image and I ZOOM OUT and MOVE it over here to the right.

And this is large image, but I wanna edit it first and I resize after editing. So my editing will be much more difficult to spot. I hope it make sense to you but that's how great designers think.

So I edit it first. I wanna change this green area to blue so I GRAB my replace color tool. And I SWITCH back to my properties panel.

I wanna CHANGE the color to blue. Ok, I replace color from IMAGE and I INCREASE my brush size to the max – which is 100. Tolerance 15 is fine and strength 200 is fine.

So I just GO ahead and REPLACE the green color. You see this tool is pretty smart.

Alright, even if my tool is pretty smart I've replaced the color inside my checkmark as well. You can see it's kind of blue HERE.

I could have tried it with lower tolerance but whatever I GRAB my Paint bucket tool and fix it.

I wanna go with solid color and I CHANGE it to white. Actually, I PICKED the color here even if it's white I want the same exact color. And now I just CLICK on this blue area.

It's gone! There is another one I CLICK on it as well.

Ok, it's all gone. But if I ZOOM in a bit I can see some blue pixels on my checkmark. So I GET my Brush tool to get rid of them.

Ok, I CHANGE my brush color and brush size let's say 18 is fine. And I just PAINT these blue pixels manually. Ok good!
I ZOOM out.

And it's pretty cool! But if I SELECT my canvas and CHANGE my canvas color to transparent I can see a white background on my image which I don't really want because I may end up using this image on a web page where the background is not necessarily white. And I want my image background to be transparent.

So I SELECT my image and I GRAB my Magic Wand tool and I SELECT the white background. Now, once I've selected it I can CHANGE tolerance and see how it affects my selection. Ok, one is fine!

And make sure your edge is anti-alias because you don't want hard edge where you can see the pixels. It's not nice!
Ok, my selection is fine! So I just DELETE my selected area by PRESSING my delete key.

I PRESS escape to deselect and now my image background is transparent.

Actually, I wanna make sure it's totally transparent. So I SELECT my canvas and I CHANGE my canvas color to black for a minute just to make sure my background is totally transparent on the image.

Ok, it is! But the lower part of my image is not really rounded. So I SELECT my image and I GRAB my Oval Marquee tool and SELECT my image trying to maintain a curve for the lower part.

Let's try it again! There you go!

I can MOVE my selection USING my arrow keys on my keyboard.

Ok, and I wanna delete the outside part of my selection. So I GO to my Select menu and CHOOSE Select inverse.

Now the outside part of my image is selected. And before I delete it I wanna make sure my edge is anti-alias. Ok, it is! So I PRESS my delete key and now it's perfect.

And I'm gonna reduce the size anyway so I just PRESS escape to deselect.

I SELECT my image, TURN on constrain proportions and I CHANGE the size to let's say 36px wide and now it's pretty small.

Ok, I CLICK on my canvas and CHANGE the canvas color back to transparent.

And I'm gonna create a brand new layer to organize my objects. So I go to my Layers panel. Actually, I collapse my Common library panel down.

And I CREATE a new layer. I'm gonna CALL it "assets" and I wanna MOVE my checkmark and all my buttons inside my "assets" layer. There you go!

Ok, and I MOVE it to the top so I can always see my images. Ok!

You can also create different individual pages inside your Fireworks document. And you can use them for your different web pages on your website. Like you can create a page for your index.html, another one for your contactus.html and so on.

And if you have a lotta pages but you have some content that is the same on every page like your background for example you can set a page as master page and the master page content shows up on every page. So you don't have to store your background on every page. Just put on the master page and if you change it, it automatically updates on every page. So that's pretty cool!

But honestly, I don't really use it because I never prototype my websites in Fireworks. For me I don't know why but I think it's a waste of time. It's probably good for web designers who create a website every week. I don't, so I just try to put together my graphics as quickly as possible and then I work with Dreamweaver.

Same thing with the states. States are part of creating animated images and interactive markups.

You can create different states of an image and export it to animated GIF format. And it's great but the best websites in the world don't have animated images at all. But you can also create rollover effects using the states. And I'm gonna show you how to do that as well but I'll show you that in Dreamweaver not in Fireworks because it's much better to do that in Dreamweaver.

Ok, I have all the graphics I need for my website, so I'm just gonna export single images for the web.

I SWITCH back to my Layers panel. And I GRAB my slice tool and I just CREATE a slice STARTING out with my header image.

Ok, I make SURE my slice is covering my header image properly. So I ZOOM IN a bit.

And I SELECT my slice and I can resize it. But I think it's fine!

Ok, slices are stored inside the Web layer. And I'm gonna NAME my slice as "header" and I used lower-case letters only because this is gonna be the actual file name and I export it for the web.

I just optimize my image I GO to my OPTIMIZE PANEL and I wanna EXPORT it to PNG24 format. And you probably know JPEG is the most popular format on the web. And JPEG really is a good choice for photographic images but it doesn't handle solid colors that well.

Use JPEG for photographic images, it's great! But use PNG24 for web graphics or PNG32 for web graphics that have a transparent background.

My header image has no transparent background so I go with PNG24 and I export the image. I just RIGHT CLICK on my slice (or ctr,click on the mac) and CHOOSE "Export selected slice"

Ok, I need a folder for my website images inside my actual site folder. So I CREATE a new folder and I'm gonna NAME it as "images"

Again, I only use lower-case letters because I'm gonna store all my website images inside this folder. So this is for the web.

Ok, the file name is the actual slice name. And I've already named it so I just CLICK Save and that's it! Now I'm gonna export my buttons as well.

But I MOVE my assets to the right because I have to see the checker board behind them if I wanna export them with transparent background. So I just SELECT my assets layer. I ZOOM OUT a bit and MOVE them here to the right. And my checkmark right here. I ZOOM IN.

And now instead of using my slice tool I just SELECT one of my buttons, like this one. RIGHT CLICK on my mouse (or ctr,click on the mac) and CHOOSE "Insert rectangular slice" and I need a single slice.

You can see the slice covers my button perfectly so I don't have to worry about it. I just NAME it as "bn_order"
"bn" stands for button! And if you have a lotta buttons it's pretty useful to tag them.

Ok, I EXPORT it to PNG32 format because I need it to have a transparent background. Like right HERE!
But if you wanna export your image with transparent background make sure your canvas is transparent as well and you can see the checker board behind your image.

My canvas is transparent so I just RIGHT CLICK on the slice (or ctr,click on the mac) and CHOOSE "Export selected slice".

All my website images go inside my "images" folder. I just CLICK save. And one button is enough!
I export my checkmark. I SELECT it, RIGHT CLICK on my mouse (or ctr,click on the mac) and CHOOSE "Insert rectangular slice".

I'm gonna NAME it as "checkmark"

You can name your slice HERE as well! And again your slice name is is gonna be the actual file name so make sure you don't use upper-case letters on the web.

Ok, I RIGHT CLICK on my slice (or ctr,click on the mac) and CHOOSE "Export selected slice" CLICK Save.
And I've exported some of my images. But if I wanna have a website that looks like THIS. I mean fading background and all that I need those images as well.

So I GRAB my Slice tool and I CREATE a slice for my background starting from the top. And I'm gonna resize it in just a bit. But I SELECT my background rectangle to SEE that it's 600px high. So I NEED a 600px high slice.

I GO back SELECT my slice and I MAKE it 600px high.

And it doesn't matter how wide it is because it's gonna be repeated horizontally in the CSS code. So I MAKE it as narrow as possible to have a small image for the web. Like 1px is fine! I TURN OFF constrain proportions and I MAKE it 1px wide. Cool!

And I'm gonna NAME it as "bg_body"

"bg" stands for background and "body" because it's gonna be the background of my body in the CSS code. You will understand it in the next video when we set up the site in Dreamweaver.

Ok, I EXPORT my slice to PNG24 format because it doesn't have to be transparent.

I SELECT my slice so I can ZOOM on it. And I RIGHT CLICK on my slice (or ctr,click on the mac) and CHOOSE "Export selected slice" CLICK save.

And now I'm gonna export my actual website background. I mean this white rectangle right HERE. So I CREATE a new slice.

And it has to be exactly as wide as my header image. And my HEADER image is 950px wide so I need a 950px wide slice. But these red lines can help me out.

There you go! It's exactly 950px wide. I just LET GO the mouse and I MOVE my slice to the bottom because I can't have the fading background on it. So I MOVE it to the very bottom.

Now, this image is also gonna be repeated but it's gonna be repeated vertically. So I CHANGE the size to 1px high to get a small image for the web. Make sure you turn off constrain proportions. And I MAKE it 1px high. Cool!

And this image has to be transparent because it would have a white border right HERE. And it would be repeated over my grey background so I EXPORT it to PNG32 format to make it transparent.

And I'm gonna NAME it as "bg_container"

It's gonna be the background of my container layer on my website. Again, you will understand it in the next video when we set up the site in Dreamweaver. Now I just export it.

I SELECT it so I can zoom on it. RIGHT CLICK on my slice (or ctr,click on the mac) and "Export selected slice" CLICK Save.

And that's it! I ZOOM OUT. And I want a rounded corner like THIS down here at the bottom for my website.
So I CREATE a new slice which also has to be 950px wide just like my header image. So I MAKE it 950px wide I LET GO my mouse and I MAKE it 120px high.

I just REPOSITION it. And I'm gonna NAME it as "bg_footer".

And this image can not be transparent because my repeated image would show up underneath it right HERE at the bottom. So I EXPORT it to PNG24 format.

Ok, I RIGHT CLICK on my slice "Export selected slice" and CLICK save.

And the last piece of the puzzle is the header part. I CREATE a new slice.

It also has to be 950px wide just like my header image. But it has to be higher than that to cover THIS bottom part as well. So I MAKE it let's say 165px high.

And I'm gonna NAME it as "bg_header".

And I export it to PNG24 format because it can not be transparent.

But before I export it I turn my header layer off because I don't need my header to be on this background image and I get a smaller file without it. So I just TURN my header layer OFF.

Now I RIGHT CLICK on my slice (or ctr,click on the mac) and CHOOSE "Export selected slice" CLICK Save and I TURN my header layer back ON.

I ZOOM OUT and I've exported pretty much all the graphics I need. So I can just go to Dreamweaver and set up the website.

But, I need just one more image: a favicon!

Now the favicon is a small icon that appears on your web BROWSER right next to the address bar. It also shows up in your bookmarks and in the tab display as well. So for like Google this is their favicon right HERE.

And not every website has a favicon so if you are lazy like me you can skip this part. Most of my websites don't have a favicon and sell pretty well. But I'm gonna create one from my logo so it's not gonna take that long.

I just TURN OFF my Web layer and I GRAB a copy of my logo. I HOLD DOWN my alt key and DRAG a copy over HERE because I need it to have a transparent background.

Now the favicon has to be a 32px wide and 32px high image.

So I CREATE a new slice and I make it exactly 32px high and 32px wide. I just RESIZE it. There you go!
I ZOOM IN a bit.

Ok, I TURN my slice OFF for a second.

And I have to resize my logo to fit in this square. So I TURN ON constrain proportions and I MAKE it 32px wide.
OK, it's too big, it's 35px high. So I MAKE it 32px high then. Still too big! So I MAKE it 30px high. Let's see! Ok! Now it's good!

And I TURN my slice back ON.

I'm gonna NAME it as "favicon".

And I export it to PNG32 format because I want it to have transparent background.

Ok, I RIGHT CLICK on the slice and CHOOSE "Export selected slice" CLICK Save and that's it!

I ZOOM OUT.

Actually, a favicon should be exported to ICO format. But according to wikipedia only Internet Explorer doesn't support the PNG favicon. Maybe it supports it by now or it will soon in the future.

But if you wanna convert it to ICO format go to icoconverter.com

Actually, I show you! Just go to icoconverter.com upload your PNG file you've just exported. The size must be 32x32px. And color depth this one is fine. Just click convert and it converts it for you. Easy!

So now I have all the images I need for my website. I hope you enjoyed this video and I see you in the next video and I show you how to set up your website in Dreamweaver! Bye!

Next video:

Building a Website Start To Finish With Dreamweaver>>>

All videos in recommended learning order:

How to design a website using Adobe Fireworks>>>

Building a Website Start To Finish With Dreamweaver>>>

How To Embed a YouTube Video On Your Website>>>

Floating Div Tags in Dreamweaver>>>

How To Create a Table in Dreamweaver>>>

Building a Web From in Dreamweaver>>>

Dreamweaver CSS Website Layouts>>>

Creating a CSS Drop Down Menu in Dreamweaver>>>

Creating a Spry Menu Bar in Dreamweaver>>>