Slicing in Photoshop and Fireworks

Last night, I put together a really quick screencast on exporting slices from Photoshop but decided this morning to put something together that I thought might be even more interesting: exporting slices from Photoshop and Fireworks.

Over the years, I've been a fan of Fireworks and export any of my own work right from Fireworks but I've aso had to work with designers who use Photoshop. In order to get their designs sliced, I stick with using Photoshop.

So, in this quickie screencast, you get to see how I slice up a file from both Photoshop and Fireworks.

View Slicing Screencast.

If you guys like it, I'll definitely look to put together some others. I did this using Screenflow and exported into a Quicktime format. Let me know if you have any problems viewing the screencast or have any recommendations on how to improve for next time.

Published December 19, 2008
Categorized as Design
Short URL: https://snook.ca/s/923

Conversation

30 Comments · RSS feed
Jonathan Snook said on December 19, 2008

And since I've already had a couple people on Twitter ask about it, I'm just going to mention it now: The custom dock was done by using the Leopard Dock App which lets you put spacers in. Then I used the Blue LED Indicator dock (about a third of the way down the page).

Jambla said on December 19, 2008

Saw this link from your twitter post.
Liked the tutorial, very clear and informative. Although I'm a Photoshop fan (more of freak) in this tutorial I think I preferred the Fireworks approach. Doing everything on the main screen rather then in another popup window. I will give both a try. I usually do the copy merge method.

Neal G said on December 19, 2008

Good to see I'm not the last person on earth still using Fireworks. I find it far superior to photoshop for web mockups.

Milan said on December 19, 2008

Jonathan, thanks for creating this screencast. Keep up the good work! :)

chris said on December 19, 2008

great screencast, would love to see you do more :D

Matt Brett said on December 19, 2008

Good stuff, Jonathan.

I don't use slices at all, but can see how they would be useful. Aside from the logo, I generally don't have many areas of a mock that I can simply export as is. Normally, I have to do a bunch of layering or extending of backgrounds to ensure they repeat accordingly, etc.

Nice to see Fireworks in action, though. I've been curious about it for some time, but have never been able to find time to really demo it. Would definitely be interested to see more screencasts of Fireworks.

Yannick said on December 19, 2008

Very nice screencast Jonathan. I liked that it was short and to the point. I'll add my vote for more screencasts.

Brendan Falkowski said on December 19, 2008

Maybe embed the video from Vimeo next time since HD is supported (though .mov > .mwv). It's sort of odd hearing your real voice, since it doesn't match the "internal voice" my head assigned to your writing style. I felt the same way when Bryan Veloso did his Avalanstar design screencast a while back. Fireworks FTW.

Sean said on December 19, 2008

Yes, nice work. I don't know anything about FireWorks so it was interesting to watch from that standpoint too. More please.

Emil said on December 19, 2008

Nice screencast. Bring us more interesting parts from Fireworks, it seems like a better alternative for web design.

John Faulds said on December 19, 2008

I always use Fireworks (even when working with PSDs that other designers send me) but I have a slightly different process for exporting. I draw slices on my objects (usually by selecting an element on the canvas, right-clicking and choosing 'Insert rectangular slice' which draws a box around the element's boundaries), but then prefer to use the Image Preview option so that I can get an idea of what the image is going to look like in different formats, number of colours, level of compression etc.

Jacek Becela said on December 19, 2008

Great layout btw, superb work. Watchin the screencast now...

Ulrich Egouy said on December 20, 2008

Very useful indeed. I don't need to deal with the slicing process anymore, though.

Like Brendan said, I thought you had a less mature voice, maybe because it's how I see myself and other designers!

Tim Shortt said on December 20, 2008

Nice screencast of the basics of slicing using both apps. I too have used both, but I have to say I still find each slightly flawed (for different reasons). I was initially very excited when FW began "supporting" PSDs. However, for better or worse I typically receive very large psds from colleagues (>20MB) and FW just doesn't handle them well (layers not showing correctly or at all, performance issues, etc.). My main gripe with PS is when Adobe discontinued ImageReady, they threw out the Slices Palette--which was pretty much the only reason to use the piece-of-junk ImageReady (sorry, just how I feel about it). So with the more complex slicing scenarios, it's a pain to navigate from slice to slice when the slices sit on top of one another (slices palette treated slices like layers).

So here's hoping Adobe either provides better support for Photoshop files in Fireworks (which I love), or just adds the Slices Palette to Photoshop files.

Jerry said on December 20, 2008

I'm embarrassed to admit I've never even tried Fireworks. Strictly Photoshop. I guess I'll have to give Fireworks a try too.

Matt Robin said on December 20, 2008

Nicely made screencast Jonathan, informative and interesting to watch.

This caught my attention in my rss reader because a) I haven't seen any screencasts by you before, and b) it's always interesting to see Photoshop (which I use) and Fireworks directly compared.

Just like Matt (above), I also don't use the slices tool myself - although I can see the usefulness of it - and that's just a personal preference.

Again, nice screencast, I hope to see more like this! :)

Brian Artka said on December 22, 2008

great screencast, it seems you are liking the new laptop =)

Alan Tucker said on December 22, 2008

Great screencast. So thats what you sound like ;-)

Do you find that you get better file size with Fireworks rather than Photoshop when exporting your images?

Jonathan Snook said on December 23, 2008

@Alan: Exports from both apps should still be compressed even further. (Try Smush.it.) Otherwise, Fireworks has the advantage for being able to do PNG8 with alpha.

Drew said on December 23, 2008

You have no idea how happy it made me to see you were on a mac. I am one step closer to being exactly like you. If we were in prison I would protect you in the shower.

Oh yea, and nice blog post as well.

Jeffrey Way said on December 28, 2008

I love it and want one for NETTUTS. :) Just emailed you.

丁鉴 said on January 04, 2009

学习中……for the horde!!

scual said on January 05, 2009

I think that Photoshop is most oriented for "pixel perfect designs" and Fireworks for quick wireframing ..., anyway this is my opinion and maybe not reflect yours ..., achieving the goal is more important.

Greetings from Belgium and thank you Jonathan for the great resources :)

oh... btw, didn't find a Twitter link to follow u.

Jonathan Snook said on January 05, 2009

@scual: you can hit me up on Twitter at @snookca.

Nishant Kothary said on January 07, 2009

Nice. Hits the nail on the head. I've been using slicing in Photoshop a whole lot recently... it's particularly useful for a scenario like creating ads where you resuse content, but have loads of sizes. I set up a 1000x1000px doc, laid out the different sizes as slices, configured the output settings and bam - each time I want to make a small change, I do it in one place, and hit save.

Also, glad to hear that there are other Fireworks lovers out there. :)

Neal G said on January 16, 2009

For any of you that are curious about Fireworks, if you already use Dreamweaver as your main web editing program, the layout, panels and general use of Fireworks is very similar and thus makes moving to Fireworks an easy process. I've always felt that Photoshop had a lot of bloated features and that Fireworks had the things I use on a daily basis right at my fingertips.

3hurray said on January 17, 2009

I found this through RSS. I liked it. Short and sweet. That's the best always. I hope I will see more of these.
Thanks Jonathan.

Matt Kempster said on January 18, 2009

Great little screencast.

I have always used Fireworks for this kind of thing.

Andy Greer said on January 20, 2009

At Max this year, an Adobe Product manager said to use Fireworks for exporting web graphics - the export engine used in Fireworks produces significantly smaller file sizes. Also said there was not time to incorporate this into CS4

Michal said on January 21, 2009

Great screencast. I have yet to use Fireworks in any project but you definitely made me want to.
I was curious how you deal/would deal with rollover graphics/slices when you want to keep them in a single image file (two/three-state images for rollovers... background aligned top, bottom, center, etc). I tend to have to merge, copy, create 200-300% wide or high document, paste...go back in history, change layers around/activate/deactivate for next state...merge... copy-paste into new document...rinse, repeat.

I would love to be able to streamline that part of my workflow...maybe I'm just going at it all wrong...

Cheers.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.