A while ago

Save for Web Goodness in Pixelmator

Nearly everyone is aware of the fact that Pixelmator has a built-in Save for Web feature. But few know that Pixelmator’s Save for Web tools are actually the best in their class.

Almost every website contains some sort of image, and there is a good chance that the image has been touched-up by image editing software. The reason why we prepare (or optimize) images for the web is so our browsers can open websites as fast as possible.

Save for Web is a process of preparing images for use in websites. Usually, Save for Web workflows look like this:

1. Slice images (if required);
2. Optimize images;
3. And then save (optimized) images.

For this post, I’ve decided to remind you about Pixelmator’s Save for Web tools, since those truly deserve your notice.

The easiest-to-use Save for Web. Ever.

The whole Pixelmator Save for Web experience consists of a single consistent palette which you use to optimize your images. Once you decide to prepare an image for the Web, even without knowing how to use Pixelmator, simply choose File > Export for Web.

And—surprise—the Export for Web palette that pops up is the only thing you will ever need to completely prepare any of your images for Web sites!

The palette has everything—a preview mode option, optimized image file size options, a file format pop-up menu where you choose between standard web file formats (JPEG, PNG, PNG Indexed, and GIF, or even the new WebP, if you wish), and optimization settings for the currently selected file format.

As you can see, anyone can easily take advantage of the pro-grade image optimization tools in Pixelmator. That’s the whole of Save for Web. Simple, isn’t it?

Yep. But there is more goodness…

Fast and Powerful (and Slice Tool)

Pixelmator’s Save for Web feature is extremely fast. When you experiment with different optimization settings (using the Export for Web palette, as mentioned above) Pixelmator instantly shows you the preview of the image or image slice you are optimizing.

Yup—image slicing is right there as one of the choices. Just use the Slice tool in Pixelmator to divide an image into smaller images and to optimize each part of an image with its own optimization settings. Slicing is particularly useful for web page layouts that feature different elements such as buttons, logos, layouts with different backgrounds, and other objects.

Pixelmator’s powerful Slice tool allows you to easily do just that. It works hand in hand with the Export for Web palette and shows an optimization preview for each slice in real-time.

Fun

But again, there is more.

In addition to a beautiful Slice tool and extremely easy-to-use Export for Web palette, Pixelmator’s Save for Web works just the way you would like it to work. It has all that OS X goodness built-in. For example, once your image or slice is optimized, you don’t have to go through an entire Save As process. Instead, you can simply drag and drop the thumbnail of an image or image slice with some optimization settings onto your desktop to instantly save the optimized image. Now, that’s handy! You won’t find any other apps that can do that.

But again, there is much more.

Save for Web Accessories

There are many more features built into Pixelmator that are useful for you as a web developer. (Yep, you’re already a web developer if you use Pixelmator.)

Trim and Reveal All

I know many web designers use these. Even I find that I use these two features a lot. Trim allows cropping of an image by trimming the surrounding transparency or background pixels in a specified color. Reveal All does exactly the opposite of the Trim feature: it reveals images that are hidden somewhere under the canvas area. Try them—these two are real time savers.

Web Colors

Web Colors is a plug-in for the Apple Colors palette that allows you to select and copy hexadecimal colors quickly to the HTML or CSS apps.

If you use Pixelmator, Web Colors will automatically be there for you—no need to do any additional installation.

Image Size

You know what Image Size does, right? You use it a lot to change image dimensions (Image > Image Size). The good thing for web devs is the Fit Into feature, which allows you to quickly fit the image into desired dimensions by choosing the size from a presets pop-up.

Everything Else

And Pixelmator has almost everything else you might ever need, not only to create, edit and enhance your images, but also to quickly and easily prepare your images for the web.

For more specific information about using Save for Web or other tools in Pixelmator, please see the Pixelmator User Manual or in-app Help.

Have fun creating your next great web site!

Comments

  • hamsta

    Learned a few things from this post. Thanks!

  • Armin

    Sorry to say this, but the GIF export is still buggy (i.e. not “top of class”). Try exporting a gradient, even with less than 256 colors, it will trash colors.

  • Christoph

    Unfortunately, Save for web kills EXIF data. Export does show the output size, but doesn’t give me a quality preview – any tips?

    I’m using Pixelmator to prepare my daily photo for my photoblog, and my EXIF data is important to me 🙂

  • Chen

    Agree with Christoph, “quality preview” for “Save for web” is one thing still missed. 🙂

  • Saulius Dailide

    Christoph,

    why would you want to store EXIF data for your optimized web images? I believe not storing EXIF data is part of optimization.

  • Christoph

    Well, as I said, Pixelmator is my tool for editing my photography. EXIF contains interesting information regarding shutter time, aperture and other camera/lens settings. I would like to keep this data in my pictures, as it can be read and automatically displayed (for example on Flickr).

    I understand that while “Export for web” is meant for web graphics like buttons etc. and does not need EXIF data, the “Export” function leaves EXIF intact and that’s why I use it instead of “Export for web” (which has a quality preview, Chen: “Preview”!). Maybe I could have been clearer in stating my wishes: I would love to see a “Preview” in “Export” so I can keep my EXIF data and still judge the quality of the export while adjusting the slider. 🙂

    Saulius, thank you for answering by the way!

    PS: Shadows and Highlights is hidden but works rather well, looking forward to the final version! 😀

  • timmfin

    I think you’ve done a great job with the Save for Web UI (and the rest of Pixelmator btw!), but I think that you could do a better job at reducing image size. I try to remember to run ImageOptim (http://imageoptim.pornel.net/) on all the images I create, and it often shaves off 10-25% off the size of images (mostly PNGs) I’ve edited in Pixelmator. Would it be possible to embed some/all of those image compression logic/hacks from ImageOptim into Pixelmator?

    It definitely isn’t necessary, but it would be nice to save that extra step.

  • jimmy

    All these tools are great for web design; however untill you have some kind of path and pen tool they’re essentially useless IMO.

    I’bve never met a designer that doesn’t work in paths rather than rastor for this kind of work. I think you got the implementation of the tools the wrong way round; i.e get the tools needed for web design in, THEN enable them to easily export the work.

  • jimmy

    @Armin

    Even with dither at 100% in most apps you still won;t get smooth gradients.

    tbh GIF is the wrong format for that kind of image.

  • Chris

    I’ll second what Jimmy says about the path and pen tools and add additional type functions (actually just having kerning/tracking and line spacing would make me buy instantly) to make Pixelmator my go-to web design app. Right now the type tool is not much better than a very basic text editor (actually even TextEdit has kerning). It must be a significant amount of work to do this as these type of requests have been around for ages and not much has happened.

  • Zaph

    +1 for the path and pen tools 🙂

  • Emmanuel

    I totally second that ImageOptim request especially if you install the PNGOUT plugin for it… in real world tests, it saves anywhere between 2% to 54% on .PNG, 8% to 18% on .JPG and about the same on .GIFs

    I now use it as my default step after editing an image.
    [ImageOptim can be a bit CPU intensive as it is running through multiple algorhythms and procedures but nothing too crazy]

    Keep going Pixelmator you’re doing a great job! Just keep focus on the important tools for your customers [and on that note, while WebP support is cool and ‘we did it almost before anyone else’ 🙂 [well you did on the Mac anyways] – PLEASE don’t stray from the more important areas of development for your up and coming and beautiful product!

    Pixelmator is NO Photoshop and thank god for that but it could still use some more features 😉

    Cheers,

    Emmanuel.

  • marcus

    where is this gone in pm 2? can’t seem to find it in the “file”-dialogue.
    thanks.

  • anavarre

    Yep, what @marcus said. Can’t find Export for Web in 2.0

  • anavarre

    Ha! Share > Export for web 🙂

  • Jennifer M.

    It’s a little deceiving to have a slices tool that doesn’t behave at all like the slices tool in Photoshop. I was expecting it to allow me to add web addresses to the different slices in my image, but this isn’t what it’s for at all. You might want to name this tool something different so people aren’t disappointed when it isn’t doing what they thought it should be doing.

  • Dave

    There’s no preview in Save For Web or Export, for that matter, which makes it nearly as useless as tiny dark gray text on a black background.

  • Toddz

    This info is outdated. Please show a note at the TOP of the article saying that, so we don’t waste our time trying to do this in PM 3.1 .

  • Itziana

    I don’t have the Export to Web feature in my pixelmator marble version. How does this feat work?

  • Ausra

    @ Itziana: you can find Export for Web by choosing Share > Export for Web.