• Apps
Vitaly Friedman November 12th, 2009

20 Free Mac Apps For Web Designer’s Toolkit

Professional web designers on the Mac platform rely on commercial heavy-hitters like Adobe Photoshop, Illustrator, Fireworks, and InDesign for their graphic design needs. And when it's time to slice and dice, some depend on the excellent Dreamweaver CS4 for WYSIWYG design/development; while many Mac code jockeys swear only by editors like Coda, BBEdit or TextMate. Others prefer to mix, match or blend. Designers also rely on various supporting apps to accomplish every day jobs like FTP uploading, cross-browser testing (important if you're designing/developing on a Mac platform only), screen-shot snapping, pixel measuring, and the like. While many of these programs are slick, they also of course cost ... money. Which brings us to free apps for the Mac crowd. Which are the best compared to their commercial counterparts? Or are simply great apps in a league all their own? Put away that credit card for now and let's find out!

Free Photoshop alternative

GIMP (Mac) In a nutshell, GIMP provides designers with the power to accomplish almost any task that Adobe Photoshop is used for. Mac users familiar with typical Cocoa apps will find GIMP's interface and menu system very "un-Mac" like (requiring the X Window System, commonly called X11), but if you soldier through you'll find a powerful image editing program with all the fixins – advanced multi-layering, text and image effects, pro-level image manipulation, and a full range of design tools. High quality plug-ins are freely available to extend the app, including the ability to use some native Photoshop ones. Also check out: Seashore Based on GIMP, Seashore is a pure cocoa app which makes it very OS X friendly. A range of tools for gradients, textures, layers, and drawing are found in Seashore. However, the program lacks many of GIMPs more powerful features so it's not exactly a GIMP replacement either. LiveQuartz Sporting a sleek Mac interface, LiveQuartz describes itself as a "simple and powerful free photo editor for Leopard." It does two thing very well: layers and filters. Basic drawing tools are also included but, as with Seashore, it's not billed as a Photoshop replacement either. In the hands of the right designer, however, fairly sophisticated designs can be created with this nice app, which is also fun to use.

Free Illustrator alternative

InkScape (Mac) The open-source InkScape, another Mac application that requires X11, is a viable alternative to Adobe Illustrator with its ability to create and edit graphics in scalable vector format. AI users will feel at home using InkScape with options like layer control, gradients, connector path control/manipulation, various brushes (including calligraphy), type effects, masking, EPS exporting, a 3-D shape tool, object tweaking/sculpting, and even a diagram connector tool useful for a variety of purposes, like creating site maps. Depending on the complexity of your design, files can be exported from InkScape and into Illustrator and vice-versa. Inkscape Mac

Free Dreamweaver alternative

KompoZer (Mac) Featuring WYSIWYG website creation and robust CSS editing, KompoZer is a mature, open-source alternative similar to Adobe Dreamweaver on the Mac, and has many of the same bells and whistles, too. Although it can't top Dreamweaver's rich offerings, KompoZer offers full CSS support, code viewing/editing, tabbed views, FTP site management, a color picker, clickable hierarchical properties view bar for code isolation, split views, live preview, and much more. There is even the option to call W3C's HTML validator to check for valid markup. KompoZer is built on the NVU architecture, but is less buggy and more feature-rich than NVU since development on that project was stopped and has been replaced by KompoZer. Also check out: SeaMonkey For creating very simple web pages. Amaya A project started by W3C, Amaya aims to be a WYSIWYG editor for standards compliant web developers, but lacks KompoZer's power. It also claims to be a web browser, but will likely not pass muster for most people's normal web browsing activities.

Free InDesign alternative

Scribus (Mac) This open-source page layout program for the Mac, similar to Adobe InDesign, is geared towards print professionals in creating business cards, ads, magazines, newsletters, brochures, posters, signs, or just about any other kind of printed material. scribus mac Although the application doesn't allow for measurements in pixels, web designers can still take advantage of Scribus's multi-page capabilities, master pages, and precise typographic control for quickly generating rough ideas for web banners, buttons, or even website mockups faster than you can say Photoshop! The ability to create PDFs within Scribus (including interactive ones) is another plus. Image export options include PNG, EPS, and PDF. Check out "5 Free and Paid Alternatives to Adobe InDesign" for more alternatives.

Free Mac text/coding editors

TextWrangler (Mac) A powerful general purpose text/code editor for OS X, TextWrangler has many of the same pro features found in commercial editors, such as multi-file search and replace, open/save in various line-ending formats and character sets, find/compare/merge file differences, hard/soft text wrap views, FTP/SFTP support, tabbed viewing, and more. TextWrangler Mac Simple CSS (Mac) Simple CSS sports a Mac-friendly interface that helps you point and click your way to building CSS stylesheets. One column allows for style creation, and a main window gives you complete control over fonts, displays, borders, and box dimensions. Multiple projects can be opened simultaneously, and styles are displayed via a WYSIWYG pane. Finalized CSS code can then be previewed and exported. SimpleCSS Mac Firebug (Mac Firefox plug-in) A must-have Firefox extension for web developers, Firebug offers an impressive array of features for live in-browser code viewing, testing, editing, and debugging of HTML, CSS, and Javascript. Firebug easily overrides HTML and CSS on any webpage for live previewing in Firefox – saving you precious design/development time. A DOM inspector adds to the extension's impressive capabilities. Firebug Mac

Free cross-browser and server-testing apps

VirtualBox (Mac) VirtualBox sets up a professional virtualization environment on your Mac, similar to Parallels or Fusion, allowing you to install Windows XP, Vista, Windows 7 and others. But if you just need a Windows environment for browser testing on your Mac, the good news is that you don't even need a licensed copy of Windows to run IE6, IE7, or IE8. VirtualBox can be configured to run all three browsers by installing the VirtualPC disc images (for free) directly from Microsoft. VirtualBox Mac Adobe BrowserLab (Mac/PC) This free online screenshot service (still in beta) shows you what your latest web design will look like on the PC side in IE's 6, 7, 8 and Firefox; and on the Mac side in Safari and Firefox. Although it only takes static screenshots, BrowserLab is useful for catching pesky CSS layout issues, especially with the difficult-to-justify-installing-but-still-important IE6. There are a number of online browser-testing screenshot services out there already, but BroswerLab is different because load time is much faster than the others and the interface is much better. For Dreamweaver users there's a slick plug-in that allows you to preview the page you're working on at the touch of a button. Browser screens can be compared side-by-side, and an interesting Onion Skin View can help idenitify layout quirks at a glance. MAMP Although OS X allows you to run a full-blown Apache server out of the box, setting up a properly configured PHP server on your Mac can sometimes be a frustrating endeavor to get just right. Enter MAMP, which stands for "Macintosh, Apache, MYSQL, and PHP." MAMP Mac Everything you need to run a PHP server is included, complete with phpMyAdmin, SQLiteManager, and a nice control interface to easily start and stop the server. MAMP will not interfere with other Apache installs or modify them in any way. It's all self-contained within the application folder and can easily be removed. An OS X Dashboard Widget gives you start/stop server controls.

Free Mac FTP program

Cyberduck (Mac) For Mac users the robust and stable FTP browser/client, Cyberduck, is an open-source must-have for tasks requiring FTP, SFTP, WebDav, Mosso Cloud Files, and Amazon S3 server interaction. Its clean and straightforward operation allows you to quickly upload and download files without the interface clutter found in some FTP programs. CyberDuck Mac Features include file synchronization, access to file permissions, bookmarks, and integration with various text editors to edit files directly. OS X technologies like Spotlight, Bonjour, Keychain, and even Quicklook are all supported. An included OS X Dashboard widget allows for quick access to servers. Various localizations are also available. Also check out: FileZilla The interface is definitely not Mac-like in elegance, and it doesn't make good use of integrated Mac technologies like Cyberduck does, but those looking for a dual-pane FTP browser will find it in FileZilla.

Free supporting apps for designers on the Mac

Skitch (Mac) If a picture is worth a thousand words, then the ability to annotate a picture may be worth even more. Beyond your average screenshot app, Skitch combines the ability to capture anything on-screen with drawing and annotation tools. With Skitch, for instance, you can quickly capture a design you're working on and mark it up with non-destructive colored arrows, text, highlights, boxes, and lines – helpful for illustrating concepts not easily conveyed using words alone. Or you could use Skitch to create a series of screenshot tutorials. Skitch Mac Screenshots with our without edits are managed in the app's history and can be revived later for further editing; or simply drag and drop to the desktop or directly into any application that supports images (like Mail, TextEdit, or any graphic app). You can even upload your screenshot creations to a free skitch.com account or to your own FTP server by simply selecting the "webpost" button. Since Skitch is in beta, rumor has it that the developers will start charging at some point, however this fact is not entirely known and the app has been free of charge for some time now. Paparazzi! (Mac) Have you ever been frustrated by the seemingly simple process of capturing a webpage screenshot that scrolled beyond your screen area? Instead of taking multiple screenshots and then pasting them together to form a single file, Paparazzi! allows you to capture an entire page from top to bottom and then export it as a single file into PNG, PDF, JPEG, or TIFF format. Optional cropping parameters can be set, and different screen resolutions can be tailored to fit your needs. A handy timed-delay snapshot function can also be adjusted. Paparazzi! Mac Imagetricks (Mac) This handy little app claims to "reveal the hidden power of your images," and that's exactly what it does. The free version of Imagetricks boasts a myriad of popular Photoshop-like filters and effects. Various masking effects can also be applied to allow for even more options. Modified images can then be exported in any of the major web file formats for insertion into your next layout. ImageTricks Mac Pixius (Mac) This Adobe AIR application gives you a slick tool for measuring anything on-screen in pixels. Easy resize handles give you quick measurements in height and width, and the multi-screen mode allows you to move the tool back and forth between screens for dual-monitor users. Pixius Mac A light-dimming feature darkens the background but leaves your focus area lit. You can also pick between three skins for the app, two of which emulate browser chrome for IE and Safari Mac, respectively; handy for quickly checking screen sizes during design-time without taking your design into a browser. Screenshot functionality is slated for a future release. Also check out: PixelStick Uses the Cartesian coordinate system for exacting on-screen measurements. Calipers This Adobe AIR app floats above all other applications. Future release plans include custom skins, alpha transparency, and customizable blade colors. Colors (Mac) Colors lets you sample color values anywhere on-screen. You can then copy and paste the RGB values into any application. Simple, fast-loading, and very handy for your design toolbox. Also check out: DigitalColor Meter Many of us forget that Apple already provides a free color-sampling tool. Just look inside your Utilities folder! Formats include RGB, YUV, and CIE. Xee (Mac) A lightweight and ultra-fast image viewer, Xee can replace OS X's Preview while also offering designers additional power options like the ability to move, copy, or rename files while viewing. Opening an image within a folder containing other images allows you to browse all the images in that folder with keyboard shortcuts and forward/back commands, or via the automatic slideshow. You can even browse images inside archives. File type, EXIF info, creator, and color space are displayed front and center. JPEG lossless is supported. Xee Mac Integrity (Mac) Moving, modifying, or deleting file names is a common practice for web developers, but it can be all too easy to incorrectly re-link files during the process, too. Conversely, outgoing links on your site can change unexpectedly. Integrity removes the tedium of manual link-checking by quickly crawling internal and external links on your site and reporting broken ones. Integrity Mac MindNode (Mac) This dead-simple open-source "mind mapping" program is a great way to quickly explore creative concepts of all shapes and sizes, and also works for site map layouts during website planning. It sports a lean interface and is especially handy when you want to get ideas down fast. MindNode lets you create multiple maps, and nodes remain connected to their respective maps, yet can be moved anywhere in the pasteboard area; which expands automatically to self-adjust. The free version lets you customize background color, node paths, and fonts – individually or in groupings. Export options include PNG, PDF, and HTML. MindNode Mac

Conclusion

The number of quality web design apps on the Mac has grown along with the surge in popularity the platform has enjoyed in recent years. Finding decent free apps can still be a challenge, however, especially for graphic designers. Hopefully you've found a few on this list that are interesting to you. One caveat: the term "free," used liberally throughout this article, should also be followed with "donation requested" kept in mind if a program is particularly useful to you and the author requests it. Please help support your Mac development community. Happy web designing!

About the author

Corrales Cachola is principal of Corrales Creative, a web and print design firm based in Portland, Oregon. On weekends he stays in shape by carrying CRT monitors and an Apple LaserWriter up and down flights of stairs. Follow him on Twitter and he'll tell you all about it.

43 comments

  1. what do you think of VirtualBox, i use parallels at the moment but could use some lightweight app for ie testing. i will take a look and would to know your opinions.

  2. MAMP isn’t something I would recommend. To enable PHP on a Mac only requires you to edit like two lines in the Apache configuration file. If you know enough to write a PHP script you know enough to edit said configuration file. Plus I have had problems with MAMP not playing nice with other servers (even non-http servers) on the same machine/network.

    1. Interesting. Where can we find information on these two lines of code and the operating mode to correct them + information on how to install MySql on top of this?

      1. [For mac os x 10.5]

        Edit /etc/apache2/httpd.conf with root privileges (i mean: $ sudo pico /etc/apache2/httpd.conf) and remove the comment (understand the ‘#’) before the php module line (#LoadModule php5_module libexec/apache2/libphp5.so) and that would be ok with php (ah! don’t forget to restart your apache server in system preferences | share | web share)

        To install mysql, just download the installer from
        http://dev.mysql.com/downloads/mysql/5.1.html#macosx-dmg
        to get the version 5.1.40 and run it.

        It’s that simple!

  3. WOW! Very great list. The stuff of the “Supporting apps” is what got me. Woo hoo. I use Skitch a lot, the others I will most certainly check out. Thank you so much for the post.

  4. Thanks for this. I had been searching for a simple, straightforward app which would allow me to resize images. I tried GIMP, but it’s pretty clunky on a Mac. Seashore looks like it will fit the bill nicely. (and Xee is pretty nifty too.)

    Great post.

  5. Thanks! I didn’t even know that Adobe BrowserLab was available. That alone was worth reading the article, but there were definitely more apps on here that I hadn’t heard of before.

  6. Good list
    BUT …
    you write : “the good news is that you don’t even need a licensed copy of Windows”

    Could you please write a “how to” post to install this ?

    thanks

  7. For coding and FTP, I highly recommend Aptana Studio (aptana.org). (And it’s free :) I really like the ability to open a file directly from my server via FTP, and save right back to the server instead of having to save to my hard drive and then upload using another app for FTP. Best I’ve found so far.

  8. Nice post! I was wondering, as I normally follow most of the entries here is there any way I can get updates sent to my inbox?

  9. Thank You for this post. Just found it on google and i have to say that i;m really really surprised :)
    Thanks again and cheers dude!

  10. Howdy! This is my first visit to your blog! We are a group of volunteers and starting a new initiative in a community in the same niche. Your blog provided us useful information to work on. You have done a wonderful job!

  11. Really liked the idea of being able to use VirtualBox for IE testing however the MS provided images linked to here all seem to require an XP disc to install drivers, are filled with WGA failure dialogs, and I was unable to get networking working.

    Asked around with others who were using VirtualBox and copied their network settings exactly but still no joy. I’m on a MacBook and tried every setting and adapter type available in the settings.

    Anyone have any insight they can share? Would really like to get that working.

  12. Hello!
    Thousands of thanks to you for providing such a detailed collection of free programs! I am actually enjoying it! Was a really great help!

    Greetings!

    Michael

  13. Hi, thanks for the useful article. Gimp seems really interesting. I have tried Photoshop and I like it, but its very expensive to buy. I have also looked at the illustrator programs because I wanted a program to make some graphics for my music site. One problem that I already have is Firebug and thats really useful to see the code in your CSS. To use it you have to use the Firefox web broswer

  14. Very thorough list — one of the best I’ve seen! One small addition I would suggest. Lucidpress is a free app that can replace InDesign. It’s online so works across Macs and PCs.

Leave a Reply

Your email address will not be published. Required fields are marked *