Short "slicing" Tutorial if you have photoshop...

Ok if you have Photoshop and Dreamweaver and you have no idea how to slice images in photoshop and how to export it to dreamweaver here is a short picture-guided tutorial...

 

NOTICE: This tutorial will show you only how to slice FLATERNED photoshop image and export it to html and open in Dreamweaver...

 

Ok here we go...

 

I hope this was understandable...

Hey finaldesign...real cool stuff. I always wondered how to do that...Thanks..And the wallpapers on your site are awesome too!!

The last part of the tutorial with the Dreamweaver helped me a lot because I just got it and I am really lost in it. I have to spend some time looking over the features and reading the help file. Anyways this tutorial is great, and it is pretty easy to fallow. Awesome job!

great tutorial finaldesign - but it'd be better if you didn't post the whole instruction set as ONE GIANT Image... this post wouldn't have fetched you more than 1 credit - so this goes out as an advice to all of you.If you're posting a graphics intensive tutorial, make sure you break up your graphics into small blocks - preferably according to each step, and put in a couple of lines of text explanation and then the graphics... step-by-step.. One Giant Image like this wouldn't fetch you even 1 credit... You only get credit if images are used alternately in conjunction with text.So there...

great tutorial finaldesign - but it'd be better if you didn't post the whole instruction set as ONE GIANT Image... this post wouldn't have fetched you more than 1 credit - so this goes out as an advice to all of you.

 

If you're posting a graphics intensive tutorial, make sure you break up your graphics into small blocks - preferably according to each step, and put in a couple of lines of text explanation and then the graphics... step-by-step.. One Giant Image like this wouldn't fetch you even 1 credit... You only get credit if images are used alternately in conjunction with text.

So there...

<{POST_SNAPBACK}>

Ok, I really didn't try to get credits this way, I just wanted to assemble this tut on a fast track, because many people asked me before how I did stuff on my webpage so this is a kind of "fast reply" in form of a tut. Anyway, I'll try to post more smaller images in tutorials later, thanks for the tip.

Newb question here again '''But for your table as image that you've created (specifically cells 4, 5 and 6) will text (that you add later within the html code) appear on top of that image? as in...the image is the table's "back drop"?Also, if the above question proves true, what happens if the amount of text entered with the html becomes too great for the cell? does the cell expand or remain constant? does that screw up the image if it expands? (I'm going to guess that, because you have specific sizes, the cell does nto expand?)

There are a few ways you can make text appear on top of the images. The easiest and probably most common way is to use a div with absolute positioning, if you're not sure what i'm talking about, go to http://forums.xisto.com/no_longer_exists/. The other easy way is to make the bit you want your text on one slice, and then in the table instead of <td><img src .. ..></td> put in <td background=... ..>insert the text you want on the image here</td>.

 

About slicing, there's another way I use which I find easier. I don't like dragging the shapes straight out with the slice tool, because more often than not I get the size wrong. In Photoshop, when your rulers (View => Rulers [i think]) are on, click on the ruler and drag down to create a guide. When you have guides everywhere you want a slice, click the export to Imageready button. In Imageready, there's a menu item called Slices, and under that you should find something called Create Slices From Guides. Of course, you'll probably end with slices you don't want, so with the slice select tool select the ones you want to be one slice only (shift + click), then right click and choose "Combine Slices".

About slicing, there's another way I use which I find easier. I don't like dragging the shapes straight out with the slice tool, because more often than not I get the size wrong. In Photoshop, when your rulers (View => Rulers [i think]) are on, click on the ruler and drag down to create a guide. When you have guides everywhere you want a slice, click the export to Imageready button. In Imageready, there's a menu item called Slices, and under that you should find something called Create Slices From Guides. Of course, you'll probably end with slices you don't want, so with the slice select tool select the ones you want to be one slice only (shift + click), then right click and choose "Combine Slices".

<{POST_SNAPBACK}>

This is also another usefull technique... Well done.

...Great tutorial. I like the use of images in every step--very good.

Is it better to edit flash templates with photoshop or with flash mx? If anyone knows how to make drop down flash menus I could sure use some help. I have been looking for days. I still cant quite figure everything out about it.

Is it better to edit flash templates with photoshop or with flash mx? If anyone knows how to make drop down flash menus I could sure use some help. I have been looking for days. I still cant quite figure everything out about it.

<{POST_SNAPBACK}>

well, try to go to pixel2life.com there is soo many tutorials for bunch of programs... Im sure you'll find it there...

Great tutorial. I tried it and when I link it to other html page, it creates white thin lines between the slices. Is there anyway to avoid this or get rid of it? thanks.-prana

Replying to finaldesignBrilliant! thank you so much for this tutorial, very appreicated from this end - BTW Greetings from New Zealand :0)-reply by firstlove