Awesome Design & Development Apps for the Serious Appaholic

Hi, my name is Jeff and I’m an appaholic.

I love apps. I love to play with apps and explore and test them to see what they can and cannot do. I love all the features of the apps I use, I love the interface and the little buttons & icons. Hell, I’d eat apps if could. My favorite thing in the whole world (except for motorcycles) is when my favorite apps release a new version, or even just an update. I love to see what’s been added, removed, streamlined or just improved. I suppose it was inevitable that I would end up designing app GUI’s and graphics: it’s the ultimate in playing with apps!

Contributing to my app addiction is a handful of apps that I depend on every day for my work: building app UI’s, web sites and other types of web-based graphics, and printed media too (marketing & promotional design and the like, which I’m not doing as often these days). This batch of apps that I’m dependent upon for almost every type of job that I do are worth a look for every designer that works in the web design (& development) and app/app UI design fields. Some extend beyond the web and mobile design world to other digital art based types of work also.

Before I get into the list however, I’d like to say that my collection of daily apps has grown quite a bit over the past couple years, mainly due to Adobe and it’s resistance to listening to it’s beta testers and users (me, on both counts) when a serious bug has been pointed out. They’ve chosen to ignore the bugs and issues in order to make the release date for the Creative Suite (6) rather than resolve the pending issues. This is one of the reasons that I’ve gone outside the Adobe Creative Suite in search of other options; something I haven’t done in over a decade being the rabidly dedicated and loyal user I was. Now that I have ventured outside the walls of Adobe, I’ve found a bunch of other apps for my development process that I’ve come to love and depend on (including and in addition to my Adobe apps of course). Here are a few:

In The Graphics Department

Adobe Photoshop CS6

Adobe Photoshop CS6.

No matter what fancy, new apps I find out there, Photoshop is my number one favorite app of all time and has been since the early 90′s. I can’t live without Photoshop anymore than I can live without air and water. However, this is one of the CS6 apps that was released with a couple of major bugs that I documented more than once during the pre-release beta testing but they chose to ignore. In fact, after CS6 was released to the public, I spoke with an Adobe support tech about one of the bugs which I tracked down to a problem with the layers and paths panel when running more than one display, and possibly graphics card compatibility, and his response to it was to “not use more than one monitor”. Really? After nearly twenty years of running two to 4 monitors on my Mac I should now just ignore my second graphics card, unplug my 2nd and 3rd monitors and just use one because of a Photoshop CS6 bug that didn’t get fixed during development? What kind of a dumb ass answer is that?

 

Adobe Illustrator CS6

Adobe Illustrator CS6

Again, I can’t live without Illustrator any more than I can live without Photoshop and the other Adobe apps I’ve depended on for more than twenty years. These apps are just too powerful and I’ve been using them religiously for so long that I wouldn’t know what to do without them. Over the past couple Creative Suites they’ve (Adobe devs) really come a long way in the integration of the apps in the Creative Suite.

 

ColorSchemerStudio

ColorSchemer Studio

$19.99

ColorSchemer is a very handy little color management app that really makes life a lot easier in the scope of design and development while working between a variety of apps. This app has a lot of great features for working with color swatches and color schemes for your project, and it also imports and exports all the mainstream formats, such as the .ase format for Illustrator and Photoshop, and many more.
Available in the AppStore.

 

ADTK

Art Directors Toolkit

$19.95 by Code-Line Software.

ADTK shipped with every desktop Mac a few years ago, which is how I stumbled across the app. I first launched it to see what the app was for before I deleted it (which I did with all the extraneous apps that came bundled on every system) but found it to have a lot of very useful features. It has a great little measuring tool; very handy for finding the size of an element or the space you have to work with on a web page, for example. It has tons of color-based tools for mixing colors, creating custom color swatches and themes, and too many other features to mention here. This app is similar to ColorSchemer Studio for working with colors but that’s where the similarities end. ADTK is the Swiss Army knife of graphics utilities apps.

Listed under “Utilities for Graphic Design & Production” on their web site, here’s their own short description:

Art Directors Toolkit is a collection of 11 distinct utilities that offer countless solutions to the daily madness that goes hand-in-hand with design.

 

IOS Icons

ICONS

$4.99 by Empoc, LLC

ICONS is the best damn app out there for converting an icon to all those different sizes required for any iOS, OSX or Android app, and also web site favicons. Until I found this app, I had my own system (set of Photoshop Actions I set up specifically for this one purpose) of exporting app and web icons for development, but that was so much slower. ICONS takes that sweet little app icon you spent all day designing and exports every conceivable variation of it in one shot. It will do multiple icons at the same time too. The app makes it super simple to add rounded corners, that nice glossy effect and other nifty little details too, and you can save all your custom settings for next time when you’re done. I don’t know what the hell I did before this app came along!
In the AppStore

 

Shrink-O-Matic

Shrink O Matic

Free

Shrink O’Matic is an AIR application to easily (batch) resize (shrink) images. It handles JPGs, GIFs and PNGs.

 

ImageOptim

ImageOptim

Free.

ImageOptim is a little app that doesn’t have a bunch of features, but what it does, it does very well. If you are a designer or developer that has to worry about the size of your images or bandwidth, this is an app you really should have. Their web site declares:

ImageOptim optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations.

Save a PNG image from Photoshop’s Save For Web command, note the size, then check it again after you’ve run it through ImageOptim: There’s no arguing with the results!

 

slicy

Slicy

(formerly Layer Cake)
$29 from MacRabbit

When I’m creating app UI graphics, Slicy is used almost as often as Photoshop and Illustrator.

Slicy truly reinvents Photoshop slicing. To export PSD elements as assets for your website or app, rename your layer groups once and let Slicy do everything else. Designers and developers, rejoice!

Slicy makes the process so much faster by doing all the exporting and resizing for you. All you have to do is name your Photoshop layers or groups with the name (and extension) you wish to give your exported graphic (button.png, for example) and that’s it. Leave the PSD file as you would normally build a PSD file and Slicy does the rest. You don’t have to crop anything or put graphics in their own separate files – it can all live in one Photoshop document. To save standard and Retina graphics, you can simply name your layer(s) “button@2x.png” and Slicy will export both a 1x and 2x(Retina) size for each graphic.
There’s a lot more Slicy can do so if I were you, I would already be over at the macrabbit site checking it out.
Well? What are you waiting for?

 

Cocoapotrace

Cocoapotrace

Free

Cocoapotace is a simple app for converting bitmap images into vector art. Take any photo or scan, run it through Cocoapotrace and you’ll have a nice vector-based version that you can tweak till the cows come home, in Illustrator or your other favorite vector app.
Normally, Adobe Illustrator’s Trace feature does a pretty good job and creates a relatively clean vector conversion to play with, but sometimes when you need to work faster and simpler, this app is the way to go. Don’t look for a lot of help and support with this one, or even a UI that’s better than fugly, because it just ain’t there. In fact, the whole web site is in Japanese so just finding the damn download link can take awhile. You are a genius though, despite what your GPA may have indicated, because you are reading this and know that I wouldn’t go through all the trouble writing this up without including a link to the download.

And here’s the aforementioned DOWNLOAD link.

Okeedokee, that about wraps up the graphics apps for the time being. Let’s move on to the next big thing…

 

In the Code/Text Editor Department

Coda

Coda 2

$75 by Panic.

Download Coda
AppStore

This is one app that runs on my Mac all day every day. I used to do the majority of my coding and web development in Adobe Dreamweaver until I stumbled upon Coda. One of the reasons for the switch was due to support for LESS CSS, which Dreamweaver hasn’t touched yet. Although Dreamweaver has a few features that Coda doesn’t have yet, it isn’t far behind, and it’s a much cleaner, simplified and streamlined app whereas Dreamweaver has become extremely bloated over the years. Also, any issue I’ve come across in Coda, which isn’t often, their developers respond damn quick to resolve the issue. They’ve yet to tell me to unplug my extra displays.

 

Espresso

Espresso

$75 by MacRabbit

Espresso is another excellent code editor that is very clean and simple and makes development so much faster. Although I prefer Coda 2 to Espresso for most of my coding, I do like Espresso for some of the features it has that Coda does not.
From the macrabbit site:

You design and develop for the Web? Espresso turbo-charges your workflowwith the perfect blend of features. Speed through day-to-day edits with extensive language support, contextual completions, powerful smart snippets, and Zen actions. Use the Navigator and code folding to prevail over the most complicated documents. Watch your web pages update in real time with live styling, visualize and inspect your layouts with X-ray, then push the changes to your server withSync or Quick Publish. Oh, and did we mention CSSEdit 3 is built in?

Espresso has a beautiful file preview built into it’s workspace that allows me to see the contents of any file in my project without actually opening it. That alone makes it worth the price, and it’s one of the reasons I keep it running right alongside Coda almost every day. I can’t begin to cover all of it’s other features here so I suggest checking it out yourself. Hey, it can’t hurt.

 

CodeKit

Codekit

$25

Another app that depend on daily in conjunction with Coda, is CodeKit. It compiles Less, Sass, Stylus, Compass and tons of other languages and manages frameworks from one location for use in every project, plus a ton of other features that just make development a hell of a lot easier. Coda 2 also compiles Less, Compass and some of the other languages and works very well too, but I like CodeKit for it’s handling of all the frameworks, the compiling and minifying, and it even optimizes images.

Here are a few highlights from the developer’s site:

Compile Everything
Process Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript and Compass files automatically each time you save. Easily set options for each language.

Easy Frameworks
Keep just one copy of a file on your drive and easily use it across many projectswithout worrying about file paths. No more copying files into every new site.

Optimize Images
Losslessly reduce JPEG and PNG file sizes with one click and see the savings. One less thing to do at deployment. (More compression options coming soon!)

Download CodeKit here.

 

Sublime Text 2

Sublime 2

$70

Download Mac version

 

BBEdit

BBEdit

“It doesn’t suck.®”
$49.99/Single User
from Bare Bones Software.

For a simple text editor, BBEdit has way too many features to list, so I pasted their description and some highlights from their home page below.

BBEdit is the leading professional HTML and text editor for the Macintosh. Specifically crafted in response to the needs of Web authors and software developers, this award-winning product provides an abundance of high-performance features for editing, searching, and manipulation of text. An intelligent interface provides easy access to BBEdit’s best-of-class features, including grep pattern matching, search and replace across multiple files, project definition tools, function navigation and syntax coloring for numerous source code languages, code folding, FTP and SFTP open and save, AppleScript, Mac OS X Unix scripting support, text and code completion, and of course a complete set of robust HTML markup tools.

With BBEdit, you can…

  • Exercise Total Control Over Text
  • Work YOUR Way
  • Command Files, Folders, Disks, and Servers
  • Enjoy Textual Omnipotence
  • Live Up To Standards
  • Integrate Smoothly Into Existing Workflows

 

TextWrangler

TextWrangler

Free

No complications but plenty of useful features for development. If you don’t need to access your server and can live without the extra FTP capabilities of BBEdit, TextWrangler will handle the job just fine. Even though I’ve upgraded to BBEdit for all of the additional functionality, I still use TextWrangler when I just need to take care of some simple editing outside of my main code editor and development apps.

TextWrangler is the “little brother” to BBEdit, our leading professional HTML and text editor for the Macintosh.
TextWrangler vs. BBEdit

TextWrangler is a very capable text editor. What sets BBEdit apart is its extensive professional feature set including Web authoring capabilities and software development tools.

 

TextEdit

TextEdit

Free, included with OS X. Even after all the money I’ve spent on other editors, I still use TextEdit by default. Mostly because it IS the default text editing app on any Mac, but also because it is so lightweight and yet displays images and even HTML beautifully. After I’ve viewed or tweaked whatever I was working on, I can save it right to iCloud if I wish. This is really nice when I want to work on my shit from my iPad on the couch.

TextEdit is a highly versatile word processor included with OS X. TextEdit lets you create all kinds of text documents. It includes tools to format and layout your page, edit and stylize text, check spelling, create tables and lists, import graphics, work with HTML, and even add music and movie files.

 

And that’s all for now. I’m sure I’ll have purchased a couple more new apps by Monday, but these are the ones I use every day for my mobile app UI and web development projects. A few of these apps I found in various articles in .net magazine, where I find a lot of excellent information related to the development of apps and web sites. If one person finds a useful app in this list to help in their development workflow my time will not have been wasted.
Share on, kiddies.

Cocoaopotrace

If you are a designer or illustrator, graphic artist or whatever, then you’ve probably had an image, a photo, a logo image, or some kind of image object that you would like to convert from a bitmap image to something a little more useful like a vector object that you can work with. I do – all the time.
Maybe you have a specific type treatment, like a logo with a font that’s been tweaked beyond recognition, and you need to use it at a variety of sizes and other scenerios that make working with a JPG or other bitmap image really difficult. What do you do?
Scan, trace, redraw, etc. You waste a lot of time reproducing the graphic is what you do. There should be an easier way, right?

There is. I found an app that does nothing but trace bitmap images, converting it to vector. The app is called Cocaopotrace (“Potrace” for Windows). It does a fantastic job tracing images. It can be adjusted to refine the way it traces; tighter paths, less points, more or less detail, and so on. I first came across it in a post by David Malki on Wondermark.com. I was so glad I checked it out!

Adobe Illustrator has it’s Live Trace/Live Paint features which does the same thing, and more, but the accuracy just isn’t there. Cocaopotrace really gets you close to a vector replica of your scanned image and since that’s all it does, it’s fast and clean and does a very nice job.

I still find myself using Live Trace on ocassion, but when I need a really clean vector outline of something, it’s Cocaopotrace all the way. Since I started using it my vector textures have been turning out much tighter. A photo of a texture, such as a cast iron manhole cover with lots of different textures, is really easy to convert and I can refine the settings to make the vector output as accurate as I choose.

Many, many years ago before global warming, the moon landing and the assembly line, back in the 90′s actually, there was an app called “Streamline”.

Project 365

Just recently I came across another neat little app for the iPhone that I think is worth sharing. The app is called “Project 365″. It’s basically a calendar that allows you to add a photo and comments for each day.
It doesn’t sound like much based on my simplified description, but it really is a cool way to log what you do every day and be able to look back later and see what you did. Visit their website for a better description and details (http://content.photojojo.com/tutorials/project-365-take-a-photo-a-day/).
One of their suggested uses is mainly for photographers and a way to practice and develop your style. I use it to track what I’ve done all year. I couldn’t tell you what I did or what I was working on two days ago and Project 360 has helped me see just how productive I have been. I’m always busy with work or one of my many projects but I still feel lazy. After a couple weeks of tracking my days with this app, I realized just how much I actually do and couldn’t believe how many projects I had worked on in that time. Now I don’t feel so bad about taking a day off!
It’s a good learning tool for new photographers and it’s great for a visual diary of your past. I would recommend checking it out if you’re like me and have trouble remembering yesterday.

Photoshop CS5 – update

I’m part of Adobe’s Prerelease Program for beta testing it’s apps: Photoshop & Bridge, specifically. It’s getting close to the end of the process for CS5 and will be on the market soon enough. So this week I’ve been working Photoshop and Bridge CS5 pretty hard and watching for bugs and issues. I haven’t come across many worth mentioning. In fact, it’s working great and I love it!

Back in the beta testing phase of CS4, there were tons of bugs and issues. In fact, it wasn’t until late in the testing that I was actually able to trust Photoshop enough to use while working on a live project. In all fairness, the Adobe developer team had a pretty big job to tackle with CS4 since the architecture of the software had changed radically from all previous versions. I’m amazed it worked as smoothly as it did. But it had bugs.

When I began testing CS5, I expected similar issues. I also expected I would have to switch back and forth between CS4 and CS5 in order to get my real work done. This never happened. I’ve been able to use Photoshop CS5 for all of my work with limited problems. The bugs and quirks I have encountered haven’t even been severe enough to interrupt my workflow and have been mainly little cosmetic problems. This week while working on a massive job with tons of elements to design, I was able to log more than 70 hours in a single week in front of CS5 and was fully expecting any problems I hadn’t found yet to reveal themselves. To my surprise and amazement, I really only came across one tiny issue, and it wasn’t enough to slow me down.

Now that it’s getting near the end, I think most of the issues have been logged and worked out or at the very least, recognized. When CS5 launches, I will be the first in line to purchase the Suite! There have been several new features added to Photoshop and Bridge that really make a difference. I’m so excited, I wish I could talk about them, but it’s proprietary and confidential in this phase. All I can say is that anyone who loved all the cool stuff that CS4 had to offer will be even more excited about the features that have been added in this release. Once again Adobe’s developers have really done a damn nice job. I’m just happy to be a part of the process!

EyeTV: All I can do is bitch.

So just before Christmas 2007 I purchased EyeTV for my Mac. I figure I spend most of my time in front of this thing anyway, may as well watch TV while I work.EyeTV 250

I was a more than a little reluctant to spend $200 on a little plastic box with some software to watch TV on my computer, but after looking at what I could do with it I decided to go for it. As it turns out, I absolutely love having TV running on my machine as I’m working. The EyeTV software is fairly easy to use, has some nice features for recording and converting video, and after the pain in the ass of setting up an account and getting the program guide stuff working it sits here and runs on my fourth monitor all day keeping me company while I’m working (I have no friends).

Then a week ago the unit just quit working. No power to the box, no more TV for me. I went to the company’s website to submit a ticket for service last Saturday, 6 days ago. This is the only way to get software/hardware issues resolved with their products; go to their website and submit a ticket. Then wait. And wait. And wait some more.

They finally sent a response on Wednesday in which they said maybe it could be serviced but there’s only a year warranty, so they needed the date I purchased everything. I replied immediately with that information, and I never heard from them again. Right now I’m really not sure how this will go. Is it worth $200 plus a software upgrade worth $40 every 18 months to watch TV while I work? Maybe when times were good, but when the economy is floating in the shitter and I haven’t had a project in a couple months it’s really hard to part with another $200 for something that I know is going to crap out on me again in the near future.

Normally I wouldn’t think twice about it, nor would I take the time to write about my frustrations, but when a company leaves a customer dangling like these people do, all I can do is bitch. I’m really hoping they come through and take care of the problem, but when a company that sells computer technology doesn’t have any way for it’s customers to directly contact them, I really don’t have much hope for resolution. It’s obvious that they don’t want us calling them. They certainly don’t want to be bothered with some pesky issues that a customer may be having; it’s just not profitable. I love how easy they make it to purchase their shit, but good luck when you have issues with it.

This isn’t the first time I’ve had to deal with their support and service. A couple months back there were some serious issues with their providers and programming service. I went through the same crap trying to get them to respond and just tell me what was going on. They didn’t even need to fix anything; they just had to tell me if the problem was on their end or mine so I could skip all the troubleshooting and hours of screwing around with the system on my end. That took more than a week.

No, I don’t have much faith in ELGATO as far as taking care of this issue. I hope I’m wrong. I hope I have to eat my words. If they come through for me in the next 24 hours and fix my unit or send out a replacement, I will take it all back. Well, not the part about the severe laps in response time it takes them to get around to dealing with stuff; that’s all on them. They SUCK at doing anything for their customers in a timely fashion. As far as dealing with ELGATO and purchasing their products, I wouldn’t recommend it. Not unless you have the patience to deal with the service of indifference. It’s just not worth the $200 bucks.

I guess I’ll post an update when this gets resolved, one way or another. That’ll give everyone some idea of how long it takes for these guys to get off their asses.

Art Directors Toolkit application: My thoughts…

Art Directors Toolkit, for those who aren’t aware of it, is a little application that is part of the bundled software that ships with every Mac. At least I think it ships with every Mac computer; it’s been on every Mac I’ve ever purchased or worked on.

ArtDirectors Toolkit 4 - screen grab

ArtDirectors Toolkit 4 - screen grab

This is a snapshot of what it looks like.

Of all the agencies I’ve worked for and all the Art Directors that I know and work with, I’ve never known one of them to actually use this application. Most of the features this app has can be found within the primary applications we all use, like Photoshop, Illustrator and InDesign, so why would anyone open up yet another application on top of the usual suspects that are eating up everyone’s RAM all day long? Additionally, the typical Art Director doesn’t spend much time exploring the folders on their machines just to see what’s in there, or curiously opening up programs to see what they are and what they do. So ADT is just another free, bundled application installed on Macs everywhere just taking up space.

I’m curious. I explore every folder on my machine. I open and run every application because I have to know what it is! Maybe it does something really cool and useful. Why would they install a bunch of totally useless apps on every Mac shipped?

Art Directors Toolkit is one of those apps that I found while exploring one day several years ago. I opened it, played with it, and found that it had some interesting features, but they weren’t enough to make it one of the apps that I use every day and can’t live without so it was closed and never seen again… until the next major upgrade. I’ve repeated this process through several generations of Mac computers and operating systems, until about a month ago. I was going through my Applications folder cleaning it out, backing up all of my older versions of applications to disk and tossing the useless stuff. Then I came across ADT4 again. I opened it, played with it for a few minutes and like every other time was about to quit, but found something that made me think. The Ruler. I’ve played with it before, but this time I just happened to be working on my website and needed to know how much space I had in a column between two Divs, and I thought about the Ruler. Perfect! The Ruler feature is pretty cool for several reasons: it’s “L” shaped, so it measures X and Y coordinates, but also calculates the angle between the two. You can set it units to any measurement; inches, centimeters, pixels, etc., and you can change it’s orientation so that the corner of X and Y is Upper Left or Right, or in the Lower Left or Right corner. You simply drag the ends of the ruler out to get the measurement, which works great when working on a website as it allows you to accurately measure any area on a page. It floats above all other applications so the Ruler is always visible, but you can change it’s appearance as well making it as noticable or as unobtrusive as you wish, and you can even change the opacity so that you can see what you’re working on right through it. Pretty cool!

ADT has a few other features that come in handy on occassion also. It will figure out proportions, scaling percentages and unit conversions. You can store color swatches, mix and blend colors and work with all the color modes to get accurate numbers, which is another great feature for website work. If you need to sample a color from one application and use it in another, ADT makes it easy to do so across apps. ADT also has it’s own little Application Launcher and Folder Drawer where you can store your favorite programs or directories and access them with a click all from within ADT. That is a feature of the newest version 5, however.

It was working on a website that got me reaquainted with Art Directors Toolkit and for that it proved to be very useful. Their version checker told me that there was a newer version available so I downloaded and installed it. Even better! This new version is V5 and has the launcher feature as well as some color swatch features that version 4, which ships with all Macs, doesn’t have. I was very happy with the latest release and I found myself using it every day. Things were great.

Then I booted up my machine one day last week and went to Launch ADT 5 while working on another website only to get a message telling me the demo expired and I needed to purchase a license. Bummed out, disappointed and broke, I was forced to go back to working with ADT4, the one that came with my MacPro. I wasn’t as happy, I was missing some features that I had gotten used to, not to mention all the color swatch groups that I had saved which I now had no access to, and every time I launched ADT4 it opens with it’s default settings, unlike V5 which saves your prefs and settings. I checked on the price of the update and it’s $40 that I don’t have, so resigned myself to working with the old version.

Contact Tech Support Page

Contact Tech Support Page

A couple days went by and I had finally come to terms with it, when upon launching the old free version 4 I got the message telling me my frickin’ demo had expired and I need to purchase a license!! Moving way beyond disappointment into the violent rage I experience every time I get ripped off and scammed, I contacted them to find out what to do about getting the old version working again or if there was an upgrade price to get the new one. A few days went by and no response. I read through their license agreement to make sure I wasn’t missing something again, and found that to get the old version working, I have two choices: I need to either reinstall my original operating system, which is Tiger – several OS versions back – and of course I’m running the latest Leopard so that’s not an option at all – OR – the preferred solution is to contact them and register my software, then they would supposedly send a license to me for the old version. So I contacted them again and tried to request a license. Their site reroutes you to the page where you purchase the new upgrade and asks for the damn license of your existing version, which I don’t have and can’t get because now I’m in an endless loop!!!!!!

So in the end I’ve concluded that if money wasn’t an issue, I would have purchased the upgrade. However, that was before my experience with their website and lack of customer support. Now I’m so pissed off that I seriously doubt I’ll ever use their software again. They will have to respond eventually and be really nice to me before I’ll even consider it, but based on my experience with contacting them and their Customer Support and Technical Support, I don’t think it’s anything I’ll have to deal with for a long, long time.

If anyone is curious or wish to help me extract Customer Support from these folks, the name of the company is Code Line Communications, and this is a link to their site: Art Directors Toolkit 5.

Go ahead, see for yourself. Send them an email and see how long it takes to get a response! Here’s their email address: Customer Support. I’m willing to bet we’ll have Bin Laden as our President before these folks take an interest in their customers.
Good Luck!