Photoshop Training Video Site

You need to look at it if you have your web site or use Photoshop or Dream Weaver for any other purpose. As you know, Navigation Bar is very important while working with websites; you can learn how to use it for Roll Over’s while working in Photoshop or Dream Weaver.

Roll over is a feature provided on almost all websites. This means you can see the icons or menu options in different colors as you guide your cursor to that place. For example, you can see menu options like File, Edit or View in white letters, once you take your cursor down there, that particular option becomes red. You will get the feel after watching this video.

Hello and welcome to this video tutorial brought to you by Photoshop —- and in this tutorial we’re going to take a look at Photoshop and Dream Weaver. On how to create roll over images for your navigation bar a… now I already have my navigation bar setup and obviously you’d be doing this on your own navigation bar, in your own website a… but I’m just… I have saved both document setup a… just to… is only going to have a navigation bar so we’re going to served off by…

I have my white text set up a… it could be whatever call you want. A… and I also have my slate setup and as you can see this all on in one text layer right there so I’m going to start off by going File, Save for Web and Devices and change this gap ANKI — to PNG-8 a… and I’m going to hit, spicily hit Save and a… Default Settings, Images Zoom link a… Root folder, all slices saved.

Come over here into Dream Weaver and refresh page. As you can see we have our Images folded setup. Expand that and why we only one PNG, that is very interesting a… sure we have all of them, all the area, ok? Make sure you select all your slices and then change them to PNG-8. Then hit Save. Images Zoom Link, Save Replace. All right, now if you refresh, there you go. I’m actually doing delete my GIF’s or GIFs, ok, there we go. This is what it should look like. Well, just make sure you still like all of your slices when you’re selecting what, File Type, you want your images to be.

So, once you have that, I’m going to drag my images into here, just to… to have my navigation bar setup. And my jag at edges a… it should look like jag at edges. It is not for me its… it will on the video though. Ah! I do not know why but once we have our navigation bar setup, you can come over here to… back to Photoshop and we’re going to change this color to red and I’m just going to come over here, right up here, in my Swatches oh! And hit Alt.. Alt backspace.

That… that changes your text here, foreground color. Now I’m going to go up here to File, Save for Web and Devices again anha… but this time, keep all you settings, when you hit Save, Images Only, I’m going to slate the Images folder and come down here to Default Settings, Other sav… and under Saving folder here, see yours is Put Images in folder, Images. I’m going to change verses Images to Roll Overs.

Press Ok. So now what I’ll do is inside of the Images Folder, it will save them into Roll Over’s folder. Hit save, come to Dream Weaver and refresh the site. We have, inside of the Images Folder, a Roll Over’s folder. So what we’re going to do, we’re going to click on Home, come up here to Window and go down to Behavior. You can also press Shift F4 on your keyboard a… once that Behavior’s window open, you’re going to come over here to this Plus and click out. A… drag out so everybody could see it. Click that and come down here to Swap Image. Click that and make sure you have both these checked, hit Browse, a… go to your Roll Over Folder a… click whatever image, we’re doing it for our self, this one. I’m going to swap image, here you go. —— swap the image, the contact. So one more of the FAQ, aha… pretty straight forward. Pretty simple too and until that, ahh… you can not fit the Roll Over’s in a Preview in Dream Weaver but if you save your file, a… Control S. Hit F12 on your keyboard to open up in a browser, you can see that when you Roll Over, ya! View Roll Over’s and again, the jag it at this, do not… should not… a… they do not show up for me but they will for you. That is quality a… you changed that.

But a… anyway, you see the effect that it’s giving you. That nice Roll Over effect. A… so ya, there you have it a… straight forward, simple to do. And once again, you’d be doing this on your own Navigation Folder or Navigation Bar a… on your own website and a… hope you learnt something from this, so see you in the next one.

Tags: adobe photoshop elements, photoshop tutorials, adobe photoshop album, photoshop plugin, adobe photoshop, photoshop 6 download, photoshop ebooks

Tags

Photoshop Tutorials

This entry was posted on Wednesday, January 20th, 2010 at 8:52 am and is filed under Photoshop Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.