Learn How To Manage Assets and Working with Layer Groups in Photoshop
Tags:adobe creative suite 2,adobe dreamweaver,adobe fireworks,adobe flash 8 professional,adobe illustrator,adobe photoshop,adobe web bundle,cascading style sheets,cmyk,html,jpeg,live,mac,macromedia studio 8,microsoft windows,rgb,total training
Grab video code:
Now, let us do a little housekeeping before we go forward. I want to do a few layer manipulations and I can see we have the very big thumbnails in our layer palette and also, we really have not been managing our layers too much and I am going to start doing that now and continue it for the rest of the project.
Like all websites, we are going to have a lot of elements contributing to our design and I found that the better management you do in the beginning, the better things are going to be later down the road for you. I do not think we are going to be using most of the rest of the palettes for now, so I am going to close them up and give ourselves a little bit more room for the layer palette, stretch it on up to filled space.
I will switch over there and I could probably minimize these other graphics since we have already got them imported into our design. Minimize them all in case we need them later. And let us make a quick change to our layer palette itself. I am going to go up to the fly out menu.
We will go to “Palette Options” all the way here at the bottom and I am just going to go to a much smaller icon. I know that is a little bit harder to see but it is going to help in giving us more room to see the layers that we are going to be adding to our project as well as being able to see these layer names here on the side.
Now, I am kind of a stickler about this. I will go in and edit my layer names for the content that is going to go inside each one of them. Now, all I need to do is double click on the name itself in the layer panel in order to change the layer panel in order to change the layer names.
In this case, this is going to be our crew button and I am specifically calling these all buttons, so that I will be able to identify them by the web object that we are going to have later. Second one is going to be our “gallery” button, “options” button and the last one is going to be the “what we do” button. I try to make sure I can identify the web elements as we work through our project.
Now, another thing we want to manage while we are organizing things is grouping. We can make our layers much more convenient by grouping like elements together. I want to do that with the images that we have here.
Now, a great new technique for doing this in CS2 is to select all the layers. So, I am going to click on the top image layer and shift click on the crew button layer and with all four of those layers selected, I can go up to the fly out menu and you will notice instead of just choosing “New Group”, I can choose “New Group from Layers”. That is the layer we have selected and will automatically gang those together. Let us call that group button images and we will just click “OK” to accept that and you can see we have easily created a new group that can manage all those buttons altogether.
Now, we can see how these groupings are going to help right away because what we are going to do for our final image is actually, I am going to use the button backgrounds as a base color for all of these images.
Now, you can see by placing it behind, I am not seeing the colors at all except in this area that is sticking out underneath the flames. But what we are going to be doing for a layout and again, we are thinking ahead towards our website and webpage as it is finished, I am going to take the button images and take all of them and set the opacity down quite a bit.
If I go down to about, let us say 20% opacity, you can see that the group allowed me to do all the opacity settings on four layers at one time. Our finish result is going to show these buttons just like this originally. You can see the color and the base image is coming right up.
It is retaining those colors in our design and we are going to set up a roll over image, so that when I use it, it rolls over to each one of the individual buttons, the full opacity of the graphic will be revealed. So, we will get that bright image still retained and get the colors set up into it. So, I am going to drop that back down to 20%. I am going to leave it like that because that would be a s