Building a web page with Photoshop and Dreamweaver CS4

Posted on November 26th, 2009 in Dreamweaver Tutorials by admin

This video is a tutorial part 2 on slicing, in Photoshop for your website designed in Adobe Dremweaver. In part 1, slicing is almost done. There are various slices on screen. In this tutorial, saving the slices in desired format and getting these images transparent is emphasized. The slides are numbered first in correct order. Those slides are numbered and saved properly but after opening those images, white background and spots are seen.

The reason for this is file format. Those images are currently saved in JPEG format. The only worthwhile format in fact is PNG24. So, all the slides are saved in this format one by one and it gives desired result.

So, this shows the slicing we’ve already completed and you can see I have my logo sliced up here in the top left and the tile here, so, I don’t need this… this document any more a..m.. want to switch to a..m.. the original again and I think what I want to do then is a… turn off the background and stuff also I’m also going to get rid of this example and I’m just going to open up the… the original. So, these files.. we know that this layer sliced from part 1 is when we just saved, so I’m going to go back to the original layer, I’m going to open this one up.

Ok, so the objective here is to get it so these images can show up as transparent the rest of the way through. Now I’m going to go down and I’m going to turn off the gradient so you can see what I mean about the transparency. You can see here at the box that has the gradient in the background for the content, I can actually a.. m.. just slice this section out of that to a… to produce that effect, so I just draw a slice box which switch to the slice tool, click and drag across there… now I want to be careful obviously I don’t get any of the text. I want to slice for the Sony Ericsson on top there, along with the K790. Now this is good if you want to have any of web page, some kind of custom font. So, I am just going to zoom in there, now if I turn my background back on, I can get a better look of what I’ve grabbed here.

I’m just want to increase the height of that just a bit. Ok, and it looks good. It looks like a.. m… not getting any of this extra stuff at the bottom, I just want to be sure I am not getting any lines from that, ok? And here’s the guy I may want to have a look at, it’s right there, that looks good.

Ok? So, the other thing I need to get out is just the phone. So, I can use the a.. m.. top bar that is given me here, go all the way down. So, that way the top of that graphic matches the a.. heading. And there we have the entire phone image inside there as well. So, to get the transparent, it’s actually simply a matter of a.. turning off the.. the gradient in the back, to get out that. Now you could slice this all the way up to the top here a… not sure how necessary that is. Then I have to turn off the shadow and everything. Remember you can control the margin a… for the box here, once we get into building —- and CSS, it’s actually pretty easy to bump content downwards so I wouldn’t worry about it.

So, I’ve got all the slices I need I’m now going to switch to my slice select tool and by the way, a.. if you hold down your control key, you can change into the slice select tool at any time as well. So that’s a.. that works nicely. So you can see I just held down control and it switches. ok? So, I’m just going to switch to permanent exit, no need to draw any more slices.

So, I’m going to go to my third slice here. Obviously that’s how it’s numbered, and on the slice, I’m going to call that K790 header. Oops! Remember it’s going to be one word. Spacebar my mistake there. Ok? Go to this one, and this is my content tile. Bar should say content BG. Keeps me consistent with the other one. And, we’ve got the phone. So, K790 phone. And there we’ve named all our slices. So, my next objective is to go to my save for web. Actually I’m going do Save As first. — and I want to call this one since this is layers sliced, but I’m going to put on this one, under scroll transparent, and save that.

So what this tells to me is if I do have to adjust any of my slices I’ve got, Photoshop document, I can go back to it if there need to be changes made. So, that’s just the safer way to operate. Now I can do this, Save for Web and devices and you can see that I’m getting a white background and all these spots and it’s because it’s JPEG. The only worthwhile format for all of these slices in fact is PNG24. So, you just want to go through every single slice and set them all to PNG24. Ok?

Now — transparent all the way through. Now this guy here you can see is 81k. So that’s the biggest image in this whole layer. I typically a.. pass on this to students you probably don’t want to have a… all your graphics accumutively been over about a 100 kilobytes. So you want to try and keep within … at… within that range, so, this side or page rather so far is looking like a.. it’s going to stay fairly close to that. Ok, So, I’m going to hit a… that I’m done here — I’m going to save it. And by the way, the purpose of the done button is if you’ve made some decisions in the box here and then you realize you have to change something in your layers, —- good to remember your settings. If you hit cancel, you’re going to loose this accept this to PNG24, potentially whatever file format you switched it to.

Now, I don’t’ need to go in the images folder. It is going to produce an images folder like it did before inside the K790 folder so, it’ll add whatever images we send — to appear into that. So, I shouldn’t have to change anything, you can see it says Images only and it’s going to use all.. all user slices again, so, I hit Save. And there we are. Let’s have a look at er… our folder, and you can see I’ve got all my images inside that directory. Oh! Thanks for watching the slices tutorial for Photoshop and we will see you in the a… part 3 with the Dreamweaver section of this tutorial. Thank you.

Tags: , , , , ,

Tags

Post a comment