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!
