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.