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.
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.
Conversation
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).
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.
Good to see I'm not the last person on earth still using Fireworks. I find it far superior to photoshop for web mockups.
Jonathan, thanks for creating this screencast. Keep up the good work! :)
great screencast, would love to see you do more :D
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.
Very nice screencast Jonathan. I liked that it was short and to the point. I'll add my vote for more screencasts.
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.
Yes, nice work. I don't know anything about FireWorks so it was interesting to watch from that standpoint too. More please.
Nice screencast. Bring us more interesting parts from Fireworks, it seems like a better alternative for web design.
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.
Great layout btw, superb work. Watchin the screencast now...
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!
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.
I'm embarrassed to admit I've never even tried Fireworks. Strictly Photoshop. I guess I'll have to give Fireworks a try too.
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! :)
great screencast, it seems you are liking the new laptop =)
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?
@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.
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.
I love it and want one for NETTUTS. :) Just emailed you.
å¦ä¹ ä¸â€¦â€¦for the horde!!
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.
@scual: you can hit me up on Twitter at @snookca.
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. :)
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.
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.
Great little screencast.
I have always used Fireworks for this kind of thing.
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
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.