Welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott, and I'm a trainer here at Bring Your Own Laptop. Uh, this training course is for people new to Dreamweaver and new to Web Design in general. Okay. The topic for this course is gonna be showing you how to produce images that will work in your website. So, um, Dreamweaver does not produce images.
It's a, think of it more as a construction tool. You put together all the elements. You might have typed out your content in Word, you might have made your images in something like Photoshop or Fireworks, and you put them together in Dreamweaver. Okay? So what we're gonna do is look at Photoshop. Now, Photoshop is a really common tool to visualize websites.
So I'll show you something I've been working on yesterday. This is a new photography course that, um, we're looking to put together or, um, amen. Our existing one, and I'm just designing a new webpage. Okay? Now this looks like a website, but it's really not. It's just a Photoshop file with lots of, uh, layers.
So it looks like a website though. What I can do in this is I can be very creative in Photoshop, whereas Dreamweaver is really a production tool. Think of it like, um, Photoshop being the architect and Dreamweaver being the, uh, builder. Okay? The builder doesn't side halfway through the building that he, he's gonna add another floor. It wouldn't work that way, but in Photoshop you can decide to move things around and adjust them quite easily.
Okay? So what we're gonna do in this one is, um, I'm gonna show you once you have decided on your layout or you've decided what kind of visuals you're gonna use, I'm gonna show you the little practice one we'll use here. We've got a logo, we've got a button and an image. This text here will be produced in Dreamweaver, so I don't need to save that as an image, but these other ones here, I need as little graphics to go into my website. Okay? So we've got a logo, we've got a little button, and we've got a bit of an image going on here.
Now, to save them out, we're gonna use something called the Slice tool. Then we've got to decide what format they should go. Should they be gifts, should they be p and g, should they be jp? Alright, so let's start with the Slice tool. Now, over here is my Slice tool. Okay?
My Slice tool is actually hiding underneath the crop tool. So hold the crop tool down, crop, crop, crop, hold it down and grab the slice tool. Okay? And what the slice tool will allow me to do is draw boxes around these little graphics. So I've drawing a box around there. It's pretty good at snapping to the edges.
So I'm drawing one around this one, this one as well. All right. So I've drawn little boxes around. You can see it's got these little blue, um, dots, uh, blue boxes for the ones I've drawn and Photoshops gone along and created all these other squares just to fill in the holes. Okay? So what I'd like to do now that I've drawn the boxes around these is go to file, save for web.
Okay? And what this will do is it'll separate out those little images and their own separate files. So if I go to files, I don't wanna use save, save will save out just a full, um, a full image. I wanna use a Safer web 'cause it uses special, um, jpeg formats that are more useful on the web rather than your standard print jpeg. We've gotta file Safer Web, okay? And what we're doing in here is I can decide on which of these images okay, are best for which format.
So we talked about before, um, a gif A and a p and G. Okay? So we're gonna look at this button first. Okay? This button is nice and simple. Um, it has text in it, so maybe a GIF might be useful.
It doesn't have many colors in there. There's a little gradient in the background, but not a lot. Okay? And you can, you can see over the side here that, um, this little window here shows me my 256 colors. And you can see this greens and whites only actually occupies about a hundred of these squares. So there's lots of color to get by.
Whereas if I click on the image over here, you can see the color is mixed out. Like there's no more space for it. So it's actually starting to clip some of the colors off. So for this button at the top here, it's perfect. Okay, so I decided on a gif. I don't have to worry about any of these things underneath, like diffusion and selective anymore, okay?
That used to be it's a little bit old school, leave it all as the defaults and you'll be fine. Okay? So GIF is perfect for this one. When I get down to this guy down the bottom, I know a GIF's not gonna work because there's just not enough colors and it's, it'll be hard to see on the, um, video unless you're watching it in HD is you'll notice that, um, through some of these parts is that the colors, um, there's not enough colors, so it ends up, um, blocking a lot of colors together and it looks, uh, a little, uh, it doesn't look good in terms of quality. So I'm gonna zoom back out. Um, you'll see the file size of this as well is 60 kilobytes very big, okay?
Images should be a very big image. A huge image is about a hundred kilobytes. A small images are 10 or below, okay? So you want to aim around the, you want between the 10 and kind of 20 or 30 for, for a reasonable size image for this like, uh, for this type of size of image. So don't go. Um, yeah, if you've got anything above a hundred kilobytes, that's far too big, okay?
But um, you are aiming around the 20 kilobyte mark. Alright? So G's not gonna work if I go to jpeg. Okay? Last thing about the JPEG is you can see, um, even without playing with any of the settings, it's down to 29 kilobytes. And what we've got to play around with in jpeg is this lossy format, which pretty much just means I've got a quality slider, I can go up to a hundred and I can get down to zero.
And you'll notice on my, um, um, image here if you're looking at it on hd, is that when the quality's down at zero versus a hundred, okay, a hundred looks perfect, zero looks terrible. Now where the slider should be is totally up to you. Now my range is between, I go no higher than a 80 and no lower than 40. Okay? I find that quality range is kind of the scope of where you need to be. Now, good quality images can go quite low in terms of quality and still look really good.
If you've got a really, um, bad image, it will look really bad really quickly as soon as you start lowering the quality. So it really depends on your image. It also depends on what this image, um, is used for. If I'm a photographer selling my photography, I'm gonna keep the quality quite high because I don't want any chance of any sort of bad quality images going through. But in this case, this is a, um, uh, an image that just supplements a website. It's just a pretty graphic.
It doesn't have a whole lot of, um, it's not an, an essential part of the website. So I know I can get the quality quite low and not worry too much about affecting the result of my website. So what I'm gonna do is if I look at it down at zero, it's terrible. And what I'm gonna do is the limbo game. It's how low can you go? Now, in this case, if I try my lowest, which is about 40, it's looking okay, but if I zoom in, I can start to see there's a bit of, they call interpolation around these bits.
It's starting to get a bit grainy, okay? So, um, what I want it to be is probably about, in this case, I'm just dragging it up for me, 60 feels like a good quality image still, okay? And the file size is nice and small, 22, okay? If I crank it up to 80, it jumps and almost doubles the size of the image. So I'd like to keep it around 60, okay? But this will depend on the image and, um, you know, what you want from that image.
So we're gonna do it at 60. So we've got this one, this button is a gif, this is a jp and we've got this one at the top here. And I'll essentially, it should, because it's just type and text and logos, it should be a gif. But what I want for this one is I wanna do something slightly different. I want to have a transparent background behind it at the moment. It's gonna wipe background.
So I'm gonna click done and Photoshop and in my layers turn off my background image. And you can see this little checkerboard stuff appears. That means that it's transparent background. If I go back into file Safer web, what I'd like to do is this image here, okay? Um, if I have a, a gif, GIF has, um, a little bit of transparency, it's pretty poor. I zoom right in, I'll show you what I mean.
Okay? Can you see around the edges here? There's no actual see-through parts because a GIF can only turn a pixel completely off. So it's see-through, okay? Or it's completely opaque, which is decided. Some of this gray stuff, and I'll show you between the GIF and the lovely p and g.
So we don't use PNG eight PNG eight's, but um, uh, an old version of it, let's use PNG 24. Or if using a different program you can use PNG 32, whatever comes up as a setting, okay? If I go to 32, let's watch the difference here. Can you see all the transparency starts appearing in between the buttons, uh, parts of the icon, okay, so P and G 24 with transparency on will allow a transparent background. JPEGs, let's watch jpeg. Sorry, that's a gif.
Let's go JPEG that has a full white background. It won't let you do anything other than white background. GIF has poor transparency and a lovely p and g 24 has full transparency. The trouble with it is can be very big file size. In this case, it's tiny. It's only three kilobytes, so I'm happy with that.
So zoom map. So I've got a p and g, I've got a gif and I've got a jp. Let's hit save. Okay? And it's gonna ask me to name my files. So I'm gonna call mine H for home, which is the brand of this one.
I'm gonna stick them on my desktop, okay? And I've got the options in here. Image is only perfect where it says all slices. Remember earlier on, uh, we dragged out three separate slices. But what happens is Photoshop goes and fills in all the gaps with other slices. I just want my user slices, okay?
They're only gonna gimme the three that I did, otherwise they're gonna have a pile of, um, different slices that I don't need. So I hit save and I'll jump to my desktop. Okay? And you'll see I've got an images folder that's put there, and I've got the three files, so p and g gif and a jpeg and you can rename them if you like. I'll just show you here. Here's my p and g with a lovely transparent background.
There's the gif and there's my jpeg. Now what I'd do is I'd copy them and put them in my site file. So earlier in the tutorials, we looked at, um, creating a site. So we went to desktop and we created a site called Example tutorial, and there was an images folder. So I'm gonna paste them in there, then I can use them for my website. All right?
So that's how to use Photoshop and it's slice function to slice out different images in their different formats. All right, let's move on to the next tutorial. I.