Aug 26
How do you slice today?
2004 at 05.30 am posted by Veerle Pieters
Since using CSS to code the design of my webpages I came to the conclusion that less slices are needed compared to old-school table layout. And because of that I just crop and export my images right from Photoshop instead of FireWorks like I used to. For me this is faster and easier, since you have only 1 document instead of 2.
When working with FireWorks, I just used all the traditional features including rollover actions etc., exported the entire page to DreamWeaver, opened it and had my table layout almost completely finished. Well now, my workflow is completely changed, FireWorks is being ignored most of the time because of the different approach with CSS. You don’t always need to slice everything up. In a lot of cases you might just need some elements and that’s it.
You might find this a bit weird, but to define slices I crop from the layout, add a new Layer Set and create a layer for each slice which is filled with a random visible color (with 50% transparency). Each layer has the dimensions of the slice I need to crop and the layer name is the name of my sliced image (and sometimes I add just the path: /images/b_home.gif).
Most of the time I’m not the only person who works on a project, that’s why I often add notes in my documents where some instructions for my colleagues are added. They are like small stickies that have your name on top and that you can place in your document to type some info in. This way others know where to pay special attention to. Very handy feature.
One thing that puzzles me though, is that I can’t seem to find a way to hide those stickies. Cause sometimes so many of them scattered over my document that’s rather disturbing. I’ve looked into “Photoshop Help” but it just mentions it is possible but it doesn’t explain what I need to do :-S I’ve looked all over the place, used my second mouse button to see what is in the contextual menu etc. but so far no luck. I got the feeling it’s rather simple, obvious and in my face, but I must be blind or look too hard, I don’t know. Maybe one of you knows the answer here? Maybe Andrei… if you are ‘here’ ;-)?
Oh, and you can also change its color, size of the text etc. Speaking of text… I have this odd habit of changing everything into Lucida Grande, and I mean really everything. Where I can: SimpleText, Entourage, my notes in Photoshop,... Thank God Apple is using Lucida Grande as default system font! A bit crazy I know, but I have a thing with font-faces, I love nice ones ...eh no correction, I only “allow” nice ones. I really hate to look at ugly ones, I almost refuse to read text that uses an ugly font-face, can’t help it. A typical designer thing? I don’t know, could be just me.
And how about you? Do you use the slice tool in Photoshop? Or do you use FireWorks?
39served
1
Hiding sticky notes: Go to menu View -> Show -> Annotations
2
@Marten, I did suspect it was that obvious :-) My colleague just mentions that I’m a “short-cut freak” I don’t visit those menu’s too often :-D Guess that’s true. Thanks! I won’t forget now.
3
I still use old fashion way with tables already done by Photoshop. I am looking for tutorials from which to learn about designing using only CSS and no tables. I have seen that you have a tutorial on your site. I will check that out. Any other tutorials/resources on this subject are welcome. THX
4
I still slice up a comp in Fireworks to get the various elements I need, such as a repeating background shadow.
I change everything to Lucida Grande too - except the source view in Omniweb, where it won’t let me! Grr!
5
Hi Veerle,
Lol, my ex-boss was a stick-on freak she used to cover my computer screen with those, so I did manage to teach her how to use it in several programs. Yeah, it’s so simple, you go to view then show and click on annotations.
I do use both fireworks and photoshop. I have to say every time they release a new version of photoshop gets better and better.
6
I now do the same as you Veerle, I can’t be bothered with fireworks anymore, I never really found it to be very intuitive for me. I’ve always been a photoshop man. I find it very quick now going from a photoshop comp to a working CSS page. I’m also finding that i’m using a lot of the same code, so that makes the transition even quicker.
Unless fireoworks comes out with some ground-breaking CSS support, i’ll definitly be staying with the mighty photoshop
Great blog by the way, i’ve been reading for a while now.
7
I typically use fireworks to output my images because I’m addicted to .pngs and fireworks’ exported (not just saved) .pngs typically weigh in at a few K less than the equivalent photoshop/imageready output. Also, the always-available web-safe color palatte is nice. Wish it could handle decently sized bitmaps though - my machine slows down when using fireworks to edit anything much bigger than one screen-size at 72dpi.
8
I use to use Firework but am now using Photoshop. I find it can export a nicer looking gif. I wish you could type in x and y position of objects like you can in Fireworks, it is such a pain getting every thing right where I want it in Photoshop. Does any one have any tips?
9
Jared,
If you are working with version 6 and up. Then you select the layer with the pick tool, make sure you have “show bounding box” on. Select one of the 8 square and look at the “tool option bar”
and there you have the x-y positions
10
I dont know if it is just me being wierd or what, but as a web designer, I’ve never really gotten into making design comps in photoshop/fireworks. I’ve always just had an idea in my head and headed for dreamweaver. Sure, i will visit fw/ps for making images but normally just one at a time as needed. I guess to me it makes sense to lay the foundation and work everything out without graphics before i size up and make graphics. That way i know they will fit in my layout that I made in Dreamweaver. Maybe its just me, i dont know…
11
I don’t use Fireworks, I’ve barely even tried it actually. I use Photoshop exclusively for web work.. and, I don’t use the slice tool, either.
I put guides whereever I feel they’re needed, and only slice my design up once I consider it 100% finished, at which point I make selections and do Copy Merged for each “slice”.
12
I always use Photoshop, but I don’t slice my images up too much: CSS does a lot of nice things. Slicing is nasty, cause sometimes, I just don’t know where to slice to use an image efficiently. But I get over that.
13
I use pretty much the same method as Tomas. I only use Photoshop, and once I feel satisfied with my design I just use the selection tool to extract the various image elements that I need.
I’ve never used the slice tool. Ever. Maybe I’ve been missing out?
14
@Jon, glad I’m not the only one, thanks for making me feel a bit less weird ;-)
Thanks for sharing all this with me. Guess we all have a different way of working, though for me it would be difficult to work the other way around like some of you do (first DreamWeaver and then create the graphical elements), maybe that’s because my primary background is graphic design and I start from there, first design then the coding.
When I slice, I click + hit command on the slicing layer in the Layer Palette I’ve created (to get a selection of the slice), I hide the slicing layer (or other layers if necessary), then go to Image > Crop and export the file. But the Copy Merge trick that Tomas mentions is not so bad either ;-)
@Bryant, I also use FireWorks when size is really important, it does a better job in exporting then Photoshop.
Keep’em coming it’s great to hear all those different things, we’re all learning here ;-)
15
I still start my designs with pen(cil) and paper =). Most of the time I won’t even do a 2nd mockup in Photoshop but instead start coding away and loading PS when I need an element that calls for it.
I haven’t touched Dreamweaver since Dreamweaver Ultra Dev. I may look into though, as it’s probably easier to do copy editing in it than Taco HTML.
16
I started out using dreamweaver when I started moving from print design to web design. Now I do all CSS and work in Photoshop for my images, CSSEdit for my styles and SubEthaEdit for my code. I could never get into Fireworks - I’m a big believer in keeping things as simple as possible.
BTW, (Not sure if I commented on this before) but I saw on the Duoh! site some web design for Ernst & Young - I work for them in New York. Heh, gotta love those icons, eh?.
17
Addition to my first comment:
I start with either Photoshop, pencil and paper or UltraEdit. So there’s no standard for me :D
Starting with UltraEdit makes it a lot nicer, but sometimes, you just can’t do with some images.
18
Lucida Grande is a very nice font indeed. I think I’m starting to like Helvetica Neue 10pt though. Sorry Veerle. ;)
I’m still stuck with Photoshop 4. Never tried Fireworks nor any newer version of PS. PS4 suits my needs at the moment… should I upgrade? ;)
19
@Denis, if photoshop 4 does everything you need, then I really wouldn’t say that you need to upgrade.
On the other hand though, I have to say that Photoshop CS (well, the whole CS package actually) has some really well thought out features that you won’t have (nice file browser anyone!?) but you may find useful.
As always, if it ain’t broke, don’t fix it!
Cheers Veerle, starting reading your blog after finding a link to it on sitepoint. cracking stuff. Must get my ass in gear and get mine running!
20
I start either in Photoshop or directly in CSS if I’m not sure an idea is feasible. I use ImageReady for the slicing but I do different document for different part of a page : One for titles, one for the main menu, one for the header images…
Using either rollover or multiple slice in a document (laying out title in a column), I find it’s easier than trying to find what file hold a particular title.
A little off subject, I was using GoLive but I’ve just started to use skEdit and my own app for the html and css.
p.s. I too change every app I can to Lucida Grande, still not sure if I prefer 11 or 12 point.
21
I remember that I felt like a real ‘pro’ when I fist discoverd the wonderful things you could do with slicing (I believe it was more fashionable to call it ‘dicing’ in those days) ;) That was back in ‘98 (the stone age).
There were no professional tools that could do the job easily, so I used the photoshop guides to draw a nice grid. I used the crop tool to cut everything in pieces and I exported them as jpg or gif… then I did an ‘undo’ so i got the whole image back and cropped the next piece :) I coded the table by hand with all the right measurements (I wrote them down first)... quite a hassle.
Later on, it became very easy to slice images with ImageReady and Fireworks. It was not fun anymore and through the years, it became more and more ‘unprofessional’ to slice up images… since I’m using semantic markup and CSS for lay-out, I’m sure that I will never slice again!
It’s nice to notice that ImageReady CSS allows you to export XHTML-compliant ‘slice-code’ that uses absolutely positioned divs instead of table cells. It’s a cool trick, but it’s nothing better than using tables… it’s till not semantic at all and the code is even more bloated. In Belgium, we say ‘het is willen, maar niet kunnen’ :p
That’s why I’m not really proud of this site I made (not so long ago): http://www.grid-vfx.com/ If you look at the code, you will notice the sliced divs :)
22
Fireworks left the office by the time javascript rollovers left too. BBedit became the main tool after Dreamweaver left the office together with Fireworks. So now only photoshop and BBedit are my main tools. About slicing: I hardly slice, but whenever I need it I use crop-export-history.
@Jon, SubEthaEdit I just tried, looks very nice, but I miss the color palette and the entity-table, but SubEthaEdit has some real nice features.
23
I only use Photoshop for - well, photos. Usually I draw a whole lot of designs with a pencil and then I remake it in Illustrator. With a thought for html/css peculiarities in the design process, I can pretty easily code it afterwards.
No-one else using Illustrator here?
24
I do all my designs in Photoshop. However I really hate the way it handles slicing. As such, I usually take the photoshop file into fireworks to slice and dice it. I also find fireworks does a better job at file size optimisation that Photoshop.
25
@Roel, I’m surprised that almost no one uses ImageReady (me included). The only time I do use it is to create an animated gif and that’s it.
@Theodor, I do use Illustrator a lot too, but just really for illustrations, logos or graphical elements that need to be drawn. Then I copy them into my Photoshop design (like the small cactus in my tutorial design). I love working in Illustrator, use it since version 3 and it’s one of my favorite programs.
@Andy, I agree with that, the export feature is indeed better. When size really matters I still use FireWorks. Then I open a (temporary) flattened Photoshop file in FireWorks and start from there. I use a flattened version since the support on layer modes, effects, even font appearances aren’t exactly the same, so I don’t bother anymore to import/open my layered file. If there are changes on the layout, I do it in Photoshop, save a (temporary) flattened copy to open in FireWorks and copy paste the adjusted layout into my FireWorks document (with the FW slices layer still intact on top of it).
26
It’s funny to notice that tools that are developed for ‘web professionals’, are rarely used by those professionals… A lot of features in ImageReady are just too cumbersome to be really useful (like the slicing…). Why isn’t ImageReady integrated in Photoshop anyway? It happens that I launch ImageReady by accident and then I get frustrated because my beloved keystrokes don’t work as expected… Damn ImageReady :p
27
Good ol’ Paint Shop Pro.
I’m a prgrammer, not a designer… And damn, it’s idiot proof!
-Shade
28
hi @all,
it’s really quite interesting to see all these different »work styles«, thank YOU veerle for making US share it. btw i deeply admire your clear and detailed way of explaining things in the css tutorial, always a pleasure to learn with you - thanks again..
i do phshopping since the last century (‘96) and i love the grown up file browser and some other new features - but i never once used the slicing thing (image ready only for animated gifs as said yet), copy merge is still the good ole way.. ;o) i never used fireworks (dreamweaver was it) but maybe i didn’t know what i missed.
but what the hell is SubEthaEdit ? is it for holy mac too..?
29
@Anne: I try to my best in explaining everything as easy as possible. It’s good to hear that people find it useful. FireWorks is a cool program but to design in it you have to think very different then Photoshop in some ways and that’s way I am only using it for exporting files that need to be small in kb. It’s a matter of personal taste I think if you like or not.
SubEthaEdit is indeed a program for Mac. Never used it personally but to my knowledge it is a bit like BBEdit but less bloated, so a text editor that understand all kinds of coding languages. Maybe someone else here who uses it can explain it a bit better.
30
wow,
cool, thanks for the link, i will have a lokk at it (i also enjoyed very much your expression3-tip - found a bunch of sites with tutorials but not the pdf-manual, did you get it with the microsoft-download??).
cheers
anne
31
can any one recommend a good css/xhtml tutorial book: i know this one:Dan Cederholm’s Web Standards Solutions: The Markup and Style Handbook
32
SubEthaEdit is a text editor with syntax highlighting, integrated web preview, all kinds of regular expressions, and it is the only text editor which allows people to work on one text document at the same time, using Rendezvous/OpenTalk and the Internet. Very, very cool.
33
hi denis,
thank you for response, i just looked at the SubEthaEdit site and i guess it’s a cool thing - even when at the moment i’m not really in the position to work with others at the same time working on my own..
but who knows..
34
Great topic!
I’ve just begun to use CSS (referred here from Sitepoint, I think, for the CSS tutorial), so I’ve been trying to figure out the best place to begin a design… and what to do with a layered Photoshop file once the basic design is done.
A couple of musicians/friends/clients came over to work with me while I was redesigning their website. I had downloaded their old one and was fiddling around with simple stuff, using GoLive. But when they arrived, they wanted something much more graphically aligned to their new album.
So we switched back to Photoshop, got what they wanted there, and now I’m trying to figure out how to produce it (though they may get more technically adept friends to do the rest). Especially since they wanted their navigation on a curve! I set up the words on a curve in Illustrator and imported into Photoshop, but am stumped about how on earth to do drop down menus for them.
Back to your question, though. I’m comfortable using Photoshop, with few slices. Especially since I now know that CSS can do the positioning.
35
Hello Veerle. I would like to say that your blog are helping me a lot in understanding the possibilities of css. But I really would like to use a wysiwyg software to see my page while making the code. But I don´t know any good wysiwyg css tool. Even Dreamweaver MX 2004 don´t show correctly the CSS. Anyone knows any good software for this case?
36
@Aleph Ozuas, at this moment I don’t know of any tool who is wysiwyg that shows everything perfectly. DreamWeaver gets the closest but is far from perfect. GoLive CS is worse the nDreamWeaver. Lets hope things change a in next update ;-)
37
hi
I’m using PS since version 4.0, but I never found this “comment function” where you can make notes on your screen.
Did I get this wrong and you can make this only in fireworks (which I only used for one project - never touched after this) ?
38
veerle,
I’m a little confused about this process. I think this gets at the heart of what is important in learning to design CSS-based websites. I never learned the “slice-and-dice” method with table-based program generated code. Would it be possible to elaberate on this design process? As a graphic designer, do you design the complete look (interface) of the site in photoshop… then slice away the parts to fit into your site structure? Its a lot to ask I know, but do you maybe have an sample .psd file you could share? Thank you! I appreciate all the knowledge you have shared and I have learned a lot from it.
39
i prefer using Fireworks to slice, mainly because i use Dreamweaver as my HTML editor - tight integration between image and HTML editing. basically, after everything is laid out, i create a sliced grid (green highlights) which helps me visual the soon-to-be HTML mock design. even if i want to export bits and pieces, it’s easier now since i could just select that piece and export it.
Commenting is not available on this article.