Photoshop & Dreamweaver

Dreamweaver tutorial 09: How to use Photoshop CC with Dreamweaver CC

Hi, Welcome, My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop. This course is designed for people who are new to Dreamweaver and Web Design. The topic we are covering today is: Photoshop for Web Design
Dreamweaver does not produce images. It is more of a construction tool. You put together all of the elements, e.g You may have typed up your content on Word, you may have made your images in Photoshop or FireFox and you put them together in Dreamweaver. We will be looking at Photoshop.

Photoshop for web design

Photoshop is a really common tool used to visualise websites. This is what I was working on yesterday. This is the new photography course that we are looking to put together. I’m designing a new web page. This looks like a website but it’s really not. It’s just a Photoshop file with loads of layers. I can be creative with Photoshop. Dreamweaver is more the construction tool. Think of Photoshop as the Architect and Dreamweaver as the Builder. The builder doesn’t decide half way through the building that he is going to add another floor. But in Photoshop, you can move things around easily. 
Once you have decided on your layout or decided what kind of visuals you are going to use. I will show you what you can do with a practice image here.

Using the slice tool in Photoshop CC

We have a ‘logo’, a ‘button’ and an ‘image’. This text here will be produced in Dreamweaver so I don’t need to save this. But I do need to save these graphics here. To save these we are going to use the ‘Slice tool’ to save them. We then need to decide whether they are going to be GIFFs, PNGs or JPEGs. Over here is my ‘Slice tool’ it is hiding under my ‘Crop tool’. Hold the Crop tool down and then down to Slice tool. This will allow me to draw boxes around the little graphics. So I’ve drawn these boxes then go to file and save for web. This will separate out these images in to their own separate files. In here I can decide which of these images is best for which format.

Slicing a button in Photoshop

I am going to look at this button first. It has text in it, not many colours. On the side see this window that shows all of the colours being used. There’s lots of colour to get by. But in the image there’s no more space for colour so it’s starting to clip some of the colours off. So for this button at the top, it’s perfect. 
So I’ve decided on the GIFF.

How big should a web image be?

When I get to this button down here I know that GIFF isn't going to work because there aren’t enough colours. It doesn’t look good in terms of quality. The file size is 60 kilobytes, very big. A huge image is 100 kilobytes and small image is 10 or below. You want to aim around the 10 to 30 for this type of image. GIFF won’t work. 
If I go to JPEG, it’s down to 29 kilobytes . I can use the lossey format to play around with quality so I can go up to 100 or down to 0. When the quality is down at 0 it looks terrible. I go no higher than 80 and no lower than 40. It depends on your image and on what you are using the image for. 
In this situation the image is just a pretty graphic so I can go quite low with the quality without affecting my website. I can go to 0, it looks terrible. At 40 it looks ok, but when zoomed in it looks grainy. In this case, 60 looks like a good quality image and the file size is good at 22. At 80 it doubles the size of the image.

How to make a transparent image in Photoshop (PNG)

This image at the top needs to have a transparent background. Go in to ‘file’ – ‘save for web’. If I have it as a GIFF, there is a little biit of transparency but its poor. If we go to PNG 32 there is a massive difference. With transparency on it willl allow a full transparent background.

Hit ‘save’. It is going to ask me to name my files. I am going to call mine 'hforhome’ and save it to my desktop. I’ve got the options here. Where it says all slices, where earlier, I dragged out 3 separate slices. Photoshop drags out all the slices. I just want my 'user slices', just the 3 that I did. Hit ‘save’, jump to desktop, in ‘images folder’, I have the 3 files, ‘PNG’, ‘GIFF’ and ‘JPEG.’ Then copy them and put them in my site files. Earlier we created a site called ‘example tutorial’- ‘images' folder.

That’s how to use Photoshop and its’ Slice function.