Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The last graphics we have to create are going to be for the navigation. So let's open nav_buttons.psd in the Art Templates folder. I'm going to zoom up on these. Now, the way that these are built is we're going to actually use these as a CSS sprite. We're going to have one graphic that's going to have three different states of this particular graphic, and we're going to use these inside of anchor tags to create the rollover states and the selected state for indicating the little dots that show us the marquee panel that we're on. Now, inside of our Photoshop file, I have a gray layer in the background labeled f.p.o. We're going to turn this off before we save it, but we have it on so we can actually see the colors we're creating, since all of this is white.
I have a dots layer at the top. Now, what we're going to do on this dots layer here is just take this dot and move it into the center of the third dot. This particular dot is going to be the selected state, so we know which one of the marquee panels we're on. Then we have a rollover block, which is just a straight color block which is going to have the rollover color inside of it. Now what I want to do here is only change the color of the circle when we roll over this. So I'm going to hold the Option key, or the Alt key in Windows, come in between the rollover and circles panel, and when I roll over here and have my Option key selected, I get this little symbol here that represents a clipping group.
What this means is I'm going to take the rollover layer and clip it into the circles layer. So the rollover layer will only be visible wherever it intersects pixels that are not 100% transparent in the circles layer. So when I click, I see this little arrow here, and then I can see the rectangle circle of rollover only visible inside of the circle area. To better understand this effect, if I click the Move tool and just move this around, you can see the square is only showing up inside of the circle areas.
This technique can be a nice alternative to using layer masks, especially for doing things like clipping photographs in circles or nonrectangular shapes. So now that my three different states are set up--we have our normal state here, our hover state, and our selected state-- let's turn off the f.p.o. layer. Let's choose File > Save for Web & Devices. Let's zoom up here. I don't have any slices to worry about, so make sure we pick PNG-24, hit Save, template, nav_buttons.png, and hit Save.
Let's close. Save our file. Let's come back out to our operating system, and we have all of our graphics created. We have our four photographs inside of the photos directory, and we have all of the graphics that we need inside of the templates directory for creating our interface. At this point, we can close our Art Templates folder, and in the next movie, we're going to jump back over to Dreamweaver and start creating our markup for other marquee.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.