Learn how to Design the Flash Messaging Area or Feature Area in Adobe Photoshop CS3.
Tags:adobe,adobe cs3 web design,features area,flash messaging area,total training,tutorial,web design
Grab video code:
Okay. So now it's time to focus on the Features area or the Flash Messaging area. In our final design, this area is going to be an interactive flash movie that is going to animate between each of the feature articles in our magazine. Since the Photoshop to Flash workflow has been vastly improved in CS3, we are going to do the bulk of our work in Photoshop.
First, we are going to place a number of images into our document. So to do that, let's quickly open them up; we will go to our File Menu, click Open. Again, in your Lesson 3 folder, we are going to select all of these images, and we will Shift+Select them, and we will open them up.
At this point, we are going to do a simple Ctrl+A to Select All, Ctrl+C to Copy, go to our Window Menu, switch to our Layout, Ctrl+V to Paste it, and we will continue to do that for the other images. Ctrl+A, Ctrl+C, go to our Layout and Paste it. Again, go to the next photo, Ctrl+A, Ctrl+C, and Ctrl+V. Just two more left, Ctrl+A, Ctrl+C, Paste it in again, and again, the last one, Ctrl+A, Ctrl+C to Copy, switch over to our Layout document, and Ctrl+V. So now I have all of these images in my Layers Panel.
What I am going to do here is create a selection around my Flash Messaging area. So I will press the M key to get the Marquee Tool, position my cursor, and click and drag a selection. Now, since I have one of the images selected, I am just going to click on the Add Layer Mask button, and that creates a Layer Mask for that particular image.
Okay. I am going to unlink them again, and what I want to do next is copy the same Layer Mask to the rest of the image layers that I have. So to do this, we are going to select the Layer Mask and again you can tell by the hairline outline that this Layer Mask has been selected and not the image, and we are going to hold the Alt key, and on the Mac it would be the Option key, and drag it on to the destination layer. We will do that now, and that Layer Mask is added, and we will do that again; simply Alt and drag. Do that one more time, and last one. Okay. So that actually has created all of our Layer Masks for us.
While we are here we may as well rename our layers and organize them a little bit. So we will double click and we will rename this to f_surf. We will double click on the layer name again, f_bike. We will do that to the other layer, f_snowboard. Just two more layers to go. So again double click on the layer name, f_climb, and the last one, f_skate.
Okay. Also what I am going to do is just select these images by Shift+Clicking, and in my Layers Menu, I am going to create a New Group from layers, and we will call this, Features. We will click OK, and we will just twirl this down so we can see it.
Now I am going to go through and move these images around. So I am going to press the V key as my shortcut to the Move Tool, and just move this image around so that it fits nicely. Go ahead and toggle the Visibility just for a second. Select the next image, press the V key again, and move it. We will toggle the Visibility, select the image, press V, and we will move this again, and again, toggle Visibility, select the image, press V for my Move Tool and move this around. The last image finally, select it, toggle the Visibility of the upper layer, click V to get the Move Tool, and just move this.
Actually, this one is a little bit larger than I would like, so I am going to resize it by pressing the Ctrl+T shortcut to bring up the Free Transform Tool. I am just going to bring this down to about 80%. So from my Control Panel, I am going to select 80 for my Height, and 80% for my Width. We will go ahead and reposition it. That looks about right. We will press Enter to accept those changes. Perfect!