Slicing with photoshop

Get Started
1

So I’m slicing with photoshop, and when I open it up in Dreamweaver to clean it up… Photoshop has made about 20 small cells bordering the website design. Then theres a spacer.gif (1px) in each of the cells…

Any ideas why this is? :frowning:

THanks! :slight_smile:

2

Don’t slice it in photoshop/imageready for starters :wink: Learn how to code good HTML and then you can just select and save pieces of your design (and re-use them where possible), makes for very clean pages and faster laoding. Perhaps you could post the design and we can make some suggestions? :slight_smile:

3

That was really confusing how you put your question, Designbin. I think that platinum’s suggestion’s a good one, both allowing us to help with your problem, whilst allowing us to possibly make suggestions on the overall design of the website (though for that you might want to go to the site review forums) :slight_smile:

4

That’s how I did it when I was starting, but nowadays you don’t need tables atall. Anyway, to answer your question, the spacer.gif hacks are there to make sure that the table doesn’t fall apart, and to keep all the image in position. You may or may not need them if you are keeping the table, you definatly don’t need them (or half the rest of the code produced by Photoshop either) if you were to use a CSS based layout. Google “CSS layout” and you should learn something, or read everything on this site (There isn’t much, but what there is is good) http://css-discuss.incutio.com/

Regards,
Douglas

Another post on this: http://www.sitepointforums.com/showthread.php?threadid=131591

5

So how would you slice the overall image up? Just by selecting certain pieces and then >Save As to the .jpg or .gif, then use them in your design?

6

The 1px spacer.gif’s are caused from Photoshop/ImageReady by you not correctly joining the slices. Make sure the slices all connect to each other, without leaving 1/2 px gaps between them.

Tryst

7

Can’t you name slices in PS? That’s how I do it in Fireworks, add slices, then as I do the XHTML right click on the one(s) I want, then “Export Slice”.

Douglas

8

Yeah - takes a couple of extra seconds, but worth it in the long run :slight_smile:

9

I don’t really use slicing; I just use the square selection tool, and select what I want, having a contrasting background to whatever I’m working on so that I’m able to select just the areas I want.

…never really have thought of using slices, either. I’m still not thinking about it :slight_smile:

10

How would it be worth it in the long run … it doesn’t take that much time to slice them in ImageReady/export images and then code them in your own HTML … ?

Please, don’t think I’m trying to start an argument or anything, I’m just a newbie seeking enlightenment =P

11

I build pretty large websites, so I don’t even code… most of the time, though sometimes I will hand-code certain things on sites above 30 pages, yet still under 2,000 like meta-tags, and such.

12

Tnt, so you just use all of the code that’s pumped out by ImageReady/Dreamweaver or whatever program you happen to use?

13

The code these programs put it is so bloated and crappy it’s not funny. When you slice a template, you can reduce the coding and graphics space a heap by using methods of tiling background images, and saving parts as highly optimised fast loading gifs which can be used throughout your design for example. It also makes fluid sites far easier to create :wink:

14

Aye. Thanks Platinum, every word helps =]

15

I use imageready. Once I’ve got all my slices I take any large images that are a background color and specify it that way. Then I export and open in dreamweaver and it’s pretty easy. Anytime I need to change a part of the graphic or image I just open up imageready make my change and export only those new images. Works great for me!

16

Tnt, so you just use all of the code that’s pumped out by ImageReady/Dreamweaver or whatever program you happen to use?

yep.

I often will review the code, and try to simplify what I can, but my WYSIWYG editor does an okay job of that. I also don’t get too bothered by the random spaces, etc. put in, but I think I need to find a way to turn that off; every byte counts :slight_smile:

17

Yea, that is how I used to do it before I learnt CSS. It works for the most part. Really ugly code, but the user doesn’t see the code.

You could probably cut the size of the HTML down by 70-90% by moving to CSS though, as you seem to care about that sort of stuff :wink:

Douglas

18

I personally find ImageReady A WHOLE LOT better than photoshop for slicing! It’s much more easier and clearer to work with…

Also, maybe try repairing your site / optimizing it by hand? :slight_smile: