Chuck McQuilkin

my writings, design experiements & code

Adobe Edge Experiment

Posted by on Aug 5, 2011 in Web Design | 2 Comments

The animation above isn’t Flash, it’s a JavaScript animation created with Adobe Edge. Adobe Edge is a prototype application that allows designers to create iPhone/iPad friendly JavaScript and CSS3 animations. Edge is an HTML5 technology and designed for mobile devices, but it’s not sophisticated enough to be a Flash replacement. Right now it lacks bells and whistles like filters, drop shadows and layer styles. There’s also no coding panel to insert scripts. The application interface looks and feels more like AfterEffects than Flash, hopefully it will eventually evolve into a robust tool for creating cross-platform rich media content.

Important Statistics about Copywriters

Posted by on Jun 30, 2011 in Advertising | No Comments

This made the rounds about a month ago, but it’s funny.

Flip-book animation

Posted by on Jun 27, 2011 in Advertising, Art | No Comments

Disney XD – Pair of Kings from saggyarmpit on Vimeo.

Two flip-book style animations. Both of these are about a year old but still very cool.

Three basic Illustrator tricks

Posted by on May 22, 2011 in Design | No Comments

Lots of helpful Illustrator features are hidden in special key-commands or in the many Illustrator drop-down menus or dialog boxes. These tips may seem trivial, but I know I would have learned Illustrator faster if I’d started out knowing these basic tricks:

Creating smooth paths

The are several ways to achieve smooth paths without perfect fine-motor skills. The pencil and paintbrush tools both have settings dialog boxes where you can specify the fidelity and smoothness of new strokes. The biggest Illustrator secret though is the smooth tool which is tucked away in the pencil menu. You can use it on paths you’ve just drawn or on any path in the document. Just select the path and drag it along the selected path to adjust the contours of the path. It adds or removes points as needed and adjusts the handles. This blog entry explains how to create smooth points in illustrator in more detail.


Adjusting points

Sometimes you need to adjust the curve of a path on only one side of a point while leaving the other side of the path as is. You can ALT-click any point with the direct selection tool (the white arrow) or the pen tool to adjust only one side of a point’s handles.

Sometimes you need to adjust a path in the middle of a curve but it only has one handle, or you’ve got a point with two handles that you need to turn into a 90 degree corner. Find the convert anchor point tool hidden at the bottom of the pen menu and click the point to toggle it between a two-handled point and no-handled point.

Duplicating objects

Often times you’ll need to create a single object, then multiply it across a document. The fastest way to do this is to ALT-click the selected object with the selection tool (the black arrow), and drag out a new copy. No copying and pasting necessary. If you’re stating out with Illustrator I hope these tips can help you save some time.

Where is Autosave for Photoshop?

Posted by on Apr 18, 2011 in Design | No Comments

I’ve lost work as a result of Photoshop or Illustrator crashes many, many times. It’s easy to forget to save, or wait too long before hitting save again. Why doesn’t Photoshop include an auto save feature like InDesign or After Effects? Even the CS5 versions lack auto save functionality. Sure, auto save can disrupt your work and take up lots of disk space, but having a back up when things go wrong is usually worth it. It turns out that there’s a program out for Macs called ForeverSave that can auto save just about any program at set intervals. It’s been around at least since ’09, but it looks like it’s still the best thing out there.

VB&P’s Campaign for Marin County Schools

Posted by on Mar 23, 2011 in Advertising | No Comments

Bake Sale Ad by VB&P for Marin County SchoolsBeing from Marin, and caring a lot about education, it’s great to read about Venables Bell & Partners donating their time and resources to help bring attention to school budget cuts. The audience for these ads in Marin may have deep enough pockets to help turn the situation around, but unfortunately most schools won’t be able to plug the gaps in school budgets with donations.

The ads themselves look good. Typography as the key visual. Interesting-looking, yet still readable.

Denny’s Web Video Ad with Sarah Silverman

Posted by on Mar 23, 2011 in Advertising | 3 Comments

It’s kind of surprising that they’re discussing anal warts in an ad for a food brand, but it’s a funny spot. They do know their audience, as they demonstrated with stoned unicorn ad in 2009. It’s good to see that they do some things besides TV ads with shots of food.

  • Production Company: DumbDumb Productions in partnership with Electus
  • Co-Creators: Jason Bateman & Will Arnett
  • Co-Producers: Jason Bateman & Will Arnett
  • Agency: Gotham
  • Chief Creative Officer: Marty Orzio
  • Content Distribution: Electus
  • Branded Entertainment Agency: Ensemble

Via Agency Spy.

HTML5 Minimalist WordPress Theme

Posted by on Mar 21, 2011 in Code, Web Design | 3 Comments

I really like this blog’s (my old) theme. It was developed by Jeff Star about five years ago. So when I read this article on Smashing Magazine about how to upgrade a WordPress theme to HTML5 I thought I’d update Minimalist. I changed the form styling, and some of the typography, but it’s mostly unchanged and it should validate as HTML5. I just think there’s something ironic about a minimalist bleeding-edge theme.

Jeff released Minimalist for free under the open source GPL so I figured I would release my updated version too. Jeff’s installation instructions are still included along with a complete set of files and images.

Download HTML5Minimalist [ v-1.3 | .zip ]

SVG Graphics

Posted by on Mar 15, 2011 in Code, Web Design | No Comments

One of the most interesting parts of HTML5 from a graphics standpoint is improved support for Scalable Vector Graphics. SVGs can automatically scale to any size because they are a vector format. Compare the SVG graphic of my logo below to the logo in the upper right hand corner of this site:
<p>If you’re reading this you’re probably using Internet Explorer. Time to upgrade?</p>
You can see it’s much sharper than the JPG and if you zoom in, it stays sharp. Safari, Firefox and Chrome support SVGs added inline to HTML5 documents. Safari allows SVGs to be specified as background images using CSS. The best way to embed them into WordPress seems to be to use an iframe. Because SVGs can support animation, they could one day replace Flash on the web and on the iPhone.

I wanted to see if I could build a version of my site using SVGs for the logo and background. Here’s what I learned:

If you check out the test page in Chrome or Safari it looks just like it should, but with crisp vector details. Firefox won’t display the shoe as an SVG background image, and Internet Explorer support is nonexistent. There’s an interesting project called SVGWeb that is supposed to provide SVG support for Internet Explorer, but I couldn’t get it to work.

The hardest part actually had very little to do with SVGs. Apache servers don’t serve SVG files
by default. Instead of displaying an SVG file, the browser delivers a box full of source code. Luckily I found the solution.

Here are some links to the sites I found most helpful:

Converting a Microsoft XML file to <ul>

Posted by on Feb 7, 2011 in Code, Snippets | No Comments

I modified a W3Schools script to get this JavaScript snippet because I needed to add a large excel table to a web-page as an unordered list. I set up a single column table in Excel and exported the table as an XML file called “list” and ran this code in the browser. Hope it helps somebody:

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

document.write("<ul id='navlist'>");
var x=xmlDoc.getElementsByTagName("w:r");
for (i=0;i<x.length;i++)
  document.write("<li><a href='#'>");