Learn how to create a Web Layout from a Photoshop file in Adobe Flash CS3.


More DIY videos at 5min.com

Video Transcription

Now, we are going to use a different method for the layout of our project file. We are going to bring out our layout for an external Photoshop file. So, let me get rid of these two objects right here. I will just click and delete them off the screen and let us move over to Photoshop. I am just going to hit ALT TAB but you will find this Photoshop file called background layout.psd in the lesson five folder. Now, if you have got Photoshop you can open this file up and take a look at your self or you can just look along with me. Now, first of all this method is going to be really handy if you are doing your layout separate from Flash or perhaps may be even another department is providing the layout for you. This background layout file is preset up with a whole bunch of layers containing all the different content elements that we are going to be using inside of Flash. So, I am going to take a quick look to the layers we have available to us. I am just going to grab the layers tab and pull it out. You can see that the interface is identical to what we are seeing in Flash as for panels. I wanted to take a detailed look at these layers to see how I layout files composed specifically because all of these features are going to be transferable right directly into our Flash file with this new version of Flash. We have got a lot of more communication going on between programs like Photoshop, the Illustrator and Flash file where we get before. Now, if we take a look to the layers, we can see that we have got of bunch of content background layers. These include things like the layout squares that we have got here for our content as well as the layout squares for the header. You can see that we have got some darker squares up there that we will use for a company title and maybe a menu banner. We have also got several background images that we can swap in and you can see how the transparency is set up to show those backgrounds through and still have readable texts in our content areas. One difference that will become apparent once we bring this into Flash will be our white backgrounds versus our darker black backgrounds. The white backgrounds have been prepared just using a bit map white square and we can see the bit map transparency with the checker board in the icon. Our darker layout bars are actually created using the rectangle tool in the program and this allows to actually create a vector type shape instead of a bit map object and we can see that in the layer with the representation of a black fill and a mask that is cutting the shape that creates our layout. Now, Photoshop has one more feature we can take advantage of and we can see that inside the Windows palettes. Let us take a look at layer comps. I want to pull this down to the bottom so we can still see our layers palette and I have got several layers comps drop into the program already. The layer comps feature allows you to manage the visibility of different layers in your program. For instance, I have already got a home section laid out. We can view it by clicking in the first column of our layer comps. What we did there is we set the visibility of several layers that are going to be used in the home section of our movie file. Now, that is going to use the blue background. We are going to have both header layers and we will have the left and right box one as well as the robot right layers. Now, if we go to the product section, I will just click on that layer comp and you can see we have got a different background and a few different layers showing to make up the elements of our product section. Layer comps are pretty easy to use but what I would like to do is used the layer palette to assemble the visibility of the last section of our movie which will be the content section. Now, we are going to be using the red background for this so I am going to turn on the red background. We will turn off circuit two, the yellow one. I am going to use the left box one and the right box one but I am going to switch over from the left robot to the right robot. That composition of layers is what we will use for our context section so I can save that as a layer comp by going down to our layer comps panel. I will choose create new layer comp and we will simply give it a name of contact section. We will click okay and now you can see contact section appears as one of our valid layer comps. I can still click on the other layer comps and we can go back to contact section and it will reassemble the visibility of the layers we see here.