Extreme Website Makeover - Using the Slice Tool in Adobe Fireworks Video

Get it off your chest – be the first to comment on this video!

Extreme Website Makeover - Using the Slice Tool in Adobe Fireworks

Now, before we get too far ahead of ourselves, let us go ahead and save this into that PNG format. As you can see, we are still working on the PSD version of the file. So, I am just going to go up to the “File” menu and choose “Save”. Notice in the Fireworks format, it is automatically going to be saved right into a PNG and that will preserve that PSD file if we need to go back to Photoshop and make any changes and then we can remake our PNG file as needed. I will just choose “Save”. It is going to go right into the Assets folder next to our original files and we will have to use it later. Now, one of the big things we are going to be doing inside of our Fireworks file is not really working with the paint and vector options of the program but we are going to be focusing a lot more on the web aspects of the program. But very specifically, we are going to be working with the web slicing tools. Now, we can see them right over here in our tool palette. What I am going to be using is a slice tool right here, so let us go ahead and select that and I will drag out a slice and we will talk about what that is going to do for us. I am going to go up to the Alien Crew button that we are going to be using on the webpage. Now, I am just going to drag a rectangle around it with the slice tool. Now, when we start making this into a webpage, we are not going to be using one large graphic. We are actually going to be breaking this page up into a lot smaller graphics and that is exactly what the slice is going to do for me. It is going to designate a small area of the screen that I am going to use as a single graphic. That will allow me to extract this graphic right here and use it as a button in my HTML webpage. Now, you will notice as I draw on a slice, the program is drawing other auxiliary lines here in red around it. And in the final version of our page, what we are basically going to be doing is building our page structure from an HTML table that is going to be a large grid area where we are going to be assembling pieces together and controlling their layout. And what we are doing in Fireworks right now is we are starting to define that table and define the layout. Now, the table as a layout device in HTML is pretty fundamental right now. It kind of sets the rules for how we are going to be building our webpages. For instance, all of my table cells are going to be grids. We are going to be building rows and columns of arranged information and our rows and columns are all going to be straight which is going to restrict us to basically rectangular shaped objects in our grid. We will also not going to do a lot of overlapping in these areas. Now, there are some advanced tools that we will take a look at a little bit later that will allow you to break out some of these rules. But for right now, let us focus on using tables in our webpage layout and setting up our slices to help us build our tables. Now, to build up our complete webpage, obviously, we are going to need some more slices. So, I can just continue along with the slice tool. We already have it selected and I can go ahead and draw another slice. Now, let me draw one with the gallery. I am going to draw one specifically a little big than what we did the last time and let us take a look at what that is going to do for us. One thing you might have noticed is that as I got down to the bottom of the slice, it automatically snaps to the same location for the corner of the previous slice that we made. Now, I started up a little bit higher and you can see that the red lines are indicating that we will have to have another row in our table in order to accommodate both the slice and the first slice that we created. So, as for making our slices, we want to be thinking ahead about our webpage as a whole and also about how that table is going to be put together to create our webpage. Now, you will notice, we can modify these slices, we got handles on the corners, so I am going to switch over to the normal selection tool and I will grab a hold of the handle on the slice and I will pull that

Total Training Official Site

Software training for creative minds. Learn from the experts. Award-winning, high-quality online and DVD Training.

http://www.TotalTraining.com

Featured Links:

The Benefits of Outsourcing Your Design Services t

Today, outsourcing website design has taken the internet world by storm. Everyone from small to large-scale organizations is outsourcing their web design requirements to a website design company. Here are some reasons why it works so well.

http://www.articlesbase.com/web-design-articles/the-benefits-of-outsourcing-your-design-services-to-a-website-design-company-635556.html/9461024403

Now, before we get too far ahead of ourselves, let us go ahead and save this into that PNG format. As you can see, we are still working on the PSD version of the file. So, I am just going to go up to the “File” menu and choose “Save”.

Notice in the Fireworks format, it is automatically going to be saved right into a PNG and that will preserve that PSD file if we need to go back to Photoshop and make any changes and then we can remake our PNG file as needed. I will just choose “Save”. It is going to go right into the Assets folder next to our original files and we will have to use it later.

Now, one of the big things we are going to be doing inside of our Fireworks file is not really working with the paint and vector options of the program but we are going to be focusing a lot more on the web aspects of the program. But very specifically, we are going to be working with the web slicing tools.

Now, we can see them right over here in our tool palette. What I am going to be using is a slice tool right here, so let us go ahead and select that and I will drag out a slice and we will talk about what that is going to do for us. I am going to go up to the Alien Crew button that we are going to be using on the webpage.

Now, I am just going to drag a rectangle around it with the slice tool. Now, when we start making this into a webpage, we are not going to be using one large graphic. We are actually going to be breaking this page up into a lot smaller graphics and that is exactly what the slice is going to do for me.

It is going to designate a small area of the screen that I am going to use as a single graphic. That will allow me to extract this graphic right here and use it as a button in my HTML webpage.

Now, you will notice as I draw on a slice, the program is drawing other auxiliary lines here in red around it. And in the final version of our page, what we are basically going to be doing is building our page structure from an HTML table that is going to be a large grid area where we are going to be assembling pieces together and controlling their layout.

And what we are doing in Fireworks right now is we are starting to define that table and define the layout. Now, the table as a layout device in HTML is pretty fundamental right now. It kind of sets the rules for how we are going to be building our webpages.

For instance, all of my table cells are going to be grids. We are going to be building rows and columns of arranged information and our rows and columns are all going to be straight which is going to restrict us to basically rectangular shaped objects in our grid. We will also not going to do a lot of overlapping in these areas.

Now, there are some advanced tools that we will take a look at a little bit later that will allow you to break out some of these rules. But for right now, let us focus on using tables in our webpage layout and setting up our slices to help us build our tables.

Now, to build up our complete webpage, obviously, we are going to need some more slices. So, I can just continue along with the slice tool. We already have it selected and I can go ahead and draw another slice.

Now, let me draw one with the gallery. I am going to draw one specifically a little big than what we did the last time and let us take a look at what that is going to do for us. One thing you might have noticed is that as I got down to the bottom of the slice, it automatically snaps to the same location for the corner of the previous slice that we made.

Now, I started up a little bit higher and you can see that the red lines are indicating that we will have to have another row in our table in order to accommodate both the slice and the first slice that we created. So, as for making our slices, we want to be thinking ahead about our webpage as a whole and also about how that table is going to be put together to create our webpage.

Now, you will notice, we can modify these slices, we got handles on the corners, so I am going to switch over to the normal selection tool and I will grab a hold of the handle on the slice and I will pull that

Transcription by: Scribe4you Transcription Services