iPhone 5 Illustration, vector PDF

iPhone5-illustrationWhen I’m working on a project and need some kind of image or graphic, I rarely can find an acceptible specimen to work with. I search every dark corner of the web and my own libraries for something workable, but it always ends in me doing my own illustration of the subject matter. Usually I spend less time doing an illustration than the time I spent searching. Here’s another one of those items that I needed today – an iPhone 5.

It’s all vector art created in Adobe Illustrator. The art is a PDF but fully editable in Illustrator. Feel free to download and abuse it any way you see fit.
Please let me know if it is to be used in any marketing or advertising materials.
Enjoy.

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.

2006 Mac Pro 2.66ghz and ATI Radeon 5770 graphics card upgrade

macpro-5770-comp

Mac Pro 1,1 2×2.66GHz Dual-Core Intel Xeon with ATI Radeon HD 5770 graphics card upgrade.

mac-pro-2006-front
In 2006 I purchased a Mac Pro 1, 1 2.6GHz Dual Core machine with 2 NVIDIA GeForce 7300GT graphics cards to run my 4 displays. Packed with ram and a 750GB hard drive in every bay, the old Mac Pro worked great without a single problem for a very long time. The first problem I had with this Mac Pro was with one of the graphics cards: one port quit working completely for some reason in the fall of 2009. Kind of a pain in the ass maybe, but not a huge deal, I thought, until I had to look for replacements!

macpro-side

I began the hunt for replacement graphics cards immediately. I just wanted to replace the one that went bad. In 2006 I wasn’t able to mix & match graphics cards without creating problems with Photoshop’s GPU settings. In fact, the Photoshop GPU settings wouldn’t even function properly unless the graphics cards installed were matching units. Unless I wanted to give up on using the Rotate View tool and several other core PS features dependent upon a good graphics card that I simply can’t live without, I had to install matching graphics cards, which is why I ended up running two Nvidia GeForce 7300′s rather than the one 7300 that shipped with the Mac and an upgrade to a better one for the second card.

NVIDIA GeForce 7300GT

ATI Radeon X1900

Even back then, only a couple years or so after I purchased the Mac Pro, I had a hell of a time finding replacement graphics cards and there weren’t many choices to begin with. Besides the Nvidia GeForce 7300GT that shipped with the Mac Pro, the only other options were the ATI Radeon X1900 and the ATI Radeon HD 3870. I went ahead and ordered two ATI Radeon 3870′s for a couple hundred bucks each (roughly), which seemed like the best solution for the long term given the recent issues with the GeForce 7300′s. I replaced the original Nvidia GeForce 7300′s and replaced them with the two new ATI Radeon 3870′s and figured I would be good to go until I was ready to buy a new Mac.

Turns out I couldn’t be that lucky. In 2011 one of the ATI Radeon 3870′s developed the same problem: one port on one of the cards quit working and left me with only 3 active displays. That wouldn’t be the end of the world, but when a port goes out on a graphics card there’s a noticeable lag in the response and redraw time in the remaining ports and displays. Both times I had to remove the bad card entirely to continue working without the lag, which makes working in Photoshop nearly impossible.

I spent countless hours scouring the web and digging around in every dark corner of every Mac forum known to the computing world for information on the graphics cards that will fit in the old Mac Pro, but only found the same 3 cards as being confirmed compatible cards. In 2011 however, the pickings were damn slim for available compatible cards on the market, since they were pretty much out of production and had been for some time already, and after a major issue with purchasing a total piece of shit replacement Radeon 3870 from an eBay seller, I gave up and was forced to come up with a different solution. The card I purchased on eBay arrived looking like a used card in an open and obviously used anti-static bag, was stuck in a plain brown box, and had the same damn problem as my other defective cards: one port was bad! It only takes one burn like that for me to learn and I will never buy any critical computer hardware from some eBay jackass ever again. eBay will not support the transaction in any way and it’s up to the morals of the seller as to whether you’ll be refunded or screwed. In this case the seller was less than reputable and the experience was like being left alone in locked, dark room with your pants down.

By 2011 Photoshop was able to run any combination of graphics cards and I was able to replace the defective ATI Radeon 3870 and with the one good original Nvidia 7300 without creating any issues in Photoshop. Of course I realized that the old 7300′s days were numbered and would really put me in a bind with work when it finally died, I decided to purchase a new Mac Pro 2.4GHz Quad-Core in the spring of 2012 before any other issues had a chance to come up and interrupt my work. The old Mac Pro became my backup system and media server at that time and has been running in the background ever since, until last fall when the ATI Radeon 3870 finally bit the big one. With very few options left and not wanting to spend a bunch of money on such an old machine, I removed the 3870 and put the old original Nvidia GeForce 7300 with the bad port back in. Since then it has been running two displays just fine for a media server and TV, but with all the OS updates and the recently upgraded EyeTV HD unit, it’s been working pretty damn hard to keep up and display the big graphics. Then a couple months ago one of the ports on the last good Nvidia 7300 stopped functioning. Again, I dug up all the old cards and put the other defective Nvidia 7300 in my top PCIe slot and was able to limp along running a display off of the one good port on each of the cards. That worked for awhile until last week when the last good port on one of the defective Nvidia cards began to shut down. I just assumed that finding a replacement card now would be almost impossible. Thankfully, I was wrong.

ATI Radeon HD 5770
A bit of digging turned up a new option for the old Mac Pro that I just had to check, recheck, and check some more to make sure it wasn’t just bullshit, or wishful thinking: The ATI Radeon HD 5770. The official Apple Store description details are

“The ATI Radeon HD 5770 includes 1GB of GDDR5 memory, uses the PCI Express 2.0 interface and includes two Mini DisplayPorts and one dual-link DVI port.”

ATI Radeon HD 5770
Several posts on the Apple Store’s Q&A section confirm the card is compatible with the 2006 Mac Pro 1,1 2×2.66GHz Dual-Core Intel Xeon and also confirmed by OWC.
OWC: ATI Radeon HD 5770
OWC has a nice little preview of all Mac Pro compatible models:
OWC-macpro-lineup

Wanted: WordPress Plugin for managing free downloadable files

20120408-123234.jpg

This article is about WordPress plugins for managing downloadable content such as .zip files, pdf files, .psd files, etc., on a WordPress site. The plugins I’ve explored so far are Download-Manager, Download Monitor, and Marketpress. Download Monitor, and Marketpress is a shopping cart plugin but the first two are plugins developed specifically for managing downloadable content. They all have their strengths and weaknesses but none worked for my particular situation.

The Problem.

I have a network of WordPress sites running on a WP Multisite network. My problem is that I want to give away art and graphics for free on one of my network websites but managing the free content is proving to be really difficult. At first it was simple: Go into WordPress, add a new post, upload and attach media that can be downloaded by clicking. Other media, such as PDF files and .zip files would be uploaded to the server and linked to in a post. Not a big deal. Over time however, I’ve added lots of stuff and it’s getting harder to maintain.
Continue reading

Download Manager plugin for WordPress, engineered to enrage!

The plugin is called WP Download Manager by InteliSoft Solutions


I found it while searching for alternative methods to managing the free graphics I provide on the site. There’s a wide array of other plugins out there that do the same thing, most of them for free or at least very cheap, but this one appeared to have some really nice features that definitely apply to my needs. After spending a good chunk of time browsing the details of the features and the prices for everything on their website, I decided to install their free version to see if it would be worth the $45.00 for the Pro version. Continue reading

HTML 5 Cheat Sheets from IMH

The folks at Inmotion Hosting sent out a newsletter to it’s customers with this helpful information about HTML 5 tags and other elements, and it’s worth sharing!

The images will take you to larger images on IMH’s site if you have trouble seeing the small code.

HTML5 Cheat Sheet – Tags

HTML5 Cheat Sheet - Tags

HTML5 Cheat Sheet By InMotion Hosting – A Virtual Private Servers Provider

HTML5 Cheat Sheet – Event Handler Attributes

HTML5 Cheat Sheet - Event Handler Attributes

HTML5 Cheat Sheet By InMotion Hosting – A Web Hosting Provider

HTML5 Cheat Sheet – Browser Support

HTML5 Cheat Sheet - Browser Support

HTML5 Cheat Sheet By InMotion Hosting – A Dedicated Server Provider

WordPress Twenty Eleven child theme progress

Since the “Twenty Eleven” WordPress theme was release, I’ve been dying to put it to use. Until now I’ve been using the “Twenty Ten” theme as a base to create custom child themes that perform more like a regular website than a blog. Twenty Ten was easy to tweak and customize via template pages and a few additional custom functions, and it worked great. However, I spent a lot of time figuring out how to get a few things to show up on the home page, which was a static page, like my recent posts and other custom post types that I wanted to display in the sidebar. All of these features and more are built right in to the Twenty Eleven theme. It’s all built on HTML5 too. Very cool.

Over the past couple weeks I’ve been rebuilding my site. I created a new child theme with Twenty Eleven as the parent template. It hasn’t been as easy as I’d hoped. While most of the template pages and functions work similar to Twenty Ten, the new way of doing things is a bit different than the Loop used to generate posts and pages through template pages in Twenty Ten. “Content.php” loads the appropriate template pages depending on the content (makes sense, right?). For example, if you choose to use a static page for your home page, like I usually do, there is now a template page called “showcase.php” that you can select as your front page template, which then loads “content.php” and “content-featured.php” for example, to display Sticky Posts with a nice big image right smack in the middle of your front page. You can choose the “sticky” option for several of your important posts and they will show up all together in a nice little slider that your users can flip through. Again, really cool. Continue reading