Category:Graphic Design

100 Days: Gallery

A few months back, I collected all of the images and animations from my prior 100-day project in a gallery site. I tweeted the link at the time, but may have neglected to tie it back to this blog. Better late than never (this site’s spiritual tag-line):

As is the case with the majority front-end web development now, the app was made using a host of JS packages, but the main technologies used were: TypeScript, the AngularJS 2.0 beta, Sass, JSPM and Gulp. And although I use a fairly similar loadout at work, I was mainly interested in trying out Angular 2 on a small-scale project, given the enormous syntactic and notional differences between it and all 1.x incarnations.

I hosted the gallery’s source on GitHub, and while I wasn’t attempting to build a general-purpose gallery platform, I think it could easily be put to other uses. Give me a shout if you rework it into something else!

100 Days of Artifacts: Update

Approaching the halfway point through my 100 Day Project, I thought it might be a good time to reflect on the process with a critical eye, to call out some of my unconscious sneakiness and correct for bad habits.

Steering around inadequacies

It has proven a double-edged sword to post each item online. On one hand, I’d feel a deep shame to publicly miss a day or give up altogether; keeping everything private would remove that incentive to continue. But on the other hand, the prospect of posting something truly shitty is embarrassing, and so it has proven difficult to select concepts or media that I’m not already confident in.

This of course is absurd: the whole idea is to improve and expand my skill set. If I work only within safe bounds, I’m basically wasting my time. So… no more of this sort of thing!

Time

Some of the pieces I’ve worked on have been more time-consuming to realise than others, and it’s hard to identify a clear pattern. I am probably homing in on a better understanding of which concepts/media have tight scope, and which might keep me up until 4am, but there are still surprises (in both directions, though usually for the worse).

This ties into my public posting issue, and the desire to not embarrass myself. (I am a shame-oriented individual.) One would probably consider it fair, in the spirit of the original project, after a taxing day at work and 3+ frustrating hours spent at a different computer, to down tools and admit defeat on that particular idea; sharing whatever I had to show for it at that point. Aside from the fear of public failure though, I get attached to the initial vision. If I stop and post a half-baked version, how can I revisit and finish it on a different day? That’s against the rules!

Ultimately, without being able to predict accurately how much “rabbit hole” there might be in a certain idea, I should at least be watchful for the emergent scope growth, and try to bend the concept back in a safer direction. After all, many interesting things have been discovered and created accidentally, or by taking an unplanned turn. Time is a force of resistance in my materials, so I should be working within that constraint, improvising if necessary.

Implicit motivations

I find it very interesting (and disconcerting), the degree of murkiness that can exist between behaviour and motivation. Quite often I’ll make decisions or form habits without first considering why, and if I then work backwards to the impetus, I might be surprised by the underlying reason, finding it lacking or foolish.

This exercise is certainly one of those murky examples, and I’m not yet sure whether it’s also rooted in “bad reasons”. Instead of a programmer, do I want to become an artist? An animator? Do I want to be be a fully independent game maker; a one-man, game-creating hermit, perhaps? I kind of do. But are any of those even feasible?

Maybe it’s nothing that significant, and more that I’ve felt inadequate about my artistic and design chops, needing to prove to myself I can match the more artistic of my developer peers (developeers). It’s most likely a mix of all these things, and whatever the case, if I take heed of these observations, I should come out the other side with a better skillset than I went in with, furthering most of those potential motivators to some degree.

Inspiration

There are a few notions that have been simmering in my brain since reading a fascinating article by a digital artist, about their decades-long progression from enthusiast to professional. The foremost concept that struck me was that the only thing that separates experts and amateurs is time and practice. It does seem obvious, but it’s never been intuitive to me. Being able to see this artist’s awkward, unconfident beginnings, and the evolution of their technique, to the point of producing beautifully crafted illustrations, really drove the point home.

The other, more technical item I took away from that article was the need to work from references while learning. This really opened things up for me, because I’ve always hated the prospect of making unoriginal content in any form. And yet, trying to be boundlessly creative while becoming familiar with a whole new medium is the perfect recipe for a gigantic fuck up. And I’ve cooked it up many times!

And so, for most of the illustrations I’ve made during this project, I’ve worked from photographs. It feels like cheating, still – and I am undoubtedly riding on the coattails of many photographers’ beautiful composition and planning work – but I have come to terms with it as a necessary part of the learning process. I would like to put together a basic gallery of everything I’ve made on the project, and when I do, I’ll be able to link to my references, easing my conscience in the process.

Insanity Press

A while before leaving the UK’s blustery shores for a land more maple-y and hockey-rich, I decided I couldn’t say farewell to my best friend without marking the occasion. Kris, as he is known to most, has been my acquaintance for more than a decade, after insisting one day on following me home from school, then calling round for me the next morning to walk back. Sure, his family had just moved across the street from my house, but I was distrustful of this sudden and unsolicited act of friendship. Nonetheless, he persisted, my contempt gave way to fondness, and the rest is a beautiful and only slightly unsettling bromantic saga.

And so: armed with many years’ worth of SMS logs between the two of us (amusing to exactly two human beings in the known universe), I set out to compile a mini-anthology of our textploits, over the course of our friendship. This is what it ended up looking like:

The first and most arduous step was sifting through the stupefying quantity of raw material to find the print-worthy conversations. I didn’t have a word count in mind when I started out, and the quality threshold was a little hard to find, but I got there. I used a very simple XML schema to manage the data, which looked like this:

<all>
 ...
 <conv div="And then:">
  <msg name="k"><![CDATA[Just WALKED down ye olde ass sliding stairs.]]></msg>
  <msg name="a"><![CDATA[Changed times... *single tear rolls down cheek*]]></msg>
  <msg name="k"><![CDATA[My ass will never slide these streets again.]]></msg>
  <msg name="a"><![CDATA[*solemn nod* 'Tis a burnt out husk of an ass.]]></msg>
 </conv>
 ...
</all>

Once I had sifted through the eons of texts and copied them into my XML file, I was left with a script of about 12,000 inane words. I then started work on the visual design, and decided on a retro-pixel look, to compliment the great deal of gaming shenanigans we undertake. I made up some 9-slice resizable speech bubbles and accompanying 8-bit avatars, then started work on a layout system in AS3 (for compilation to AIR for desktop). A finished page looked like this:

I knew the final size of each page would be A5, per the printing company I’d chosen, so I worked with a 1:1.4142 aspect ratio and wrote some classes to paginate the full script into bitmap-after-bitmap of carefully placed speech bubbles. From here, I added some code to save each page sprite out to PNG, ran this, and was left with a set of 48 page images.

I then took to the Colour Lovers site to borrow and manipulate some of their lovely patterns and palettes, and ended up with a set of 24 pixel-art-esque background spreads to use throughout the book. I brought the backgrounds and the previously-exported page content together in Photoshop, then printed the whole thing to PDF, conforming to the print-shop’s format.

The print and binding shop I opted for was the Gloucestershire, UK-based Inky Little Fingers, who did an excellent and speedy job of printing the books. I was pretty short on time amidst the many tasks involved in moving country, so I decided not to have a proof printed in advance of the final set. Sadly, as it turned out, the matte finish I picked for the front/back cover desaturated the design somewhat. To contrast to the printed shots above and below, here’s the original cover image. It would have been good to crank up the contrast and vibrancy to compensate for the finish, but as that was my only issue, and the rest of the book turned out great, I have no complaints.

Colour Extractor Utility

This is a quick post to share a utility I put together to extract all unique RGB hex colours from a given image.

My use case: I’m working on a project where a grid of clickable colour swatches needs to be generated. Due to limited space, it’s been difficult to settle on the the specific palette, knowing that the flexibility of an RGB or HSL colour picker isn’t an option. So I’ve been mocking up a few different arrangements of swatches in Photoshop, and experimenting with their layout.

At the same time, things like available space could change at any point, so between that and the need to adjust colours down the line, I don’t want to lay all the swatches out by hand and be tied to one arrangement. The layout has to be generative, and so I just need a raw list of colours to work with. The initial plan was to use the eye-dropper and pick out each one, pasting the hex values into a text file – but then I noticed I’d have to do that 60+ times for each revision, and thought: “Hello?! This is the 90s! Make the computer do it.”

The utility is very simple, and will just sift from the top-left pixel, traversing right, then to the next row – comparing against a running list to identify all the unique colours. Each colour is stored as a hex value (e.g. 0xBADA55) on a new line in the clipboard-able text data. You can then use some basic find-and-replace commands to get the list into a workable format for your needs.

If your image has gaps between swatches as mine does, and a background colour, this will be picked up as the first (or second) colour in the list – so you’ll likely want to trash that before going further. Another potential gotcha is the presence of anti-aliasing in your image, which could add unwanted in-between colours into the list. If you’re dealing with such a palette image, I would consider scaling the image down using a non-resampling algorithm – such as the ‘Nearest Neighbour’ mode in Photoshop. With some experimentation you should be left with only your core palette colours, ready for import into the extractor utility.

Hello

I'm Adam Vernon: front-end developer, free-time photographer, small-hours musician and general-purpose humanoid.