Portfolio project: Low-poly portraits

I’m slowly making my way through Avinash Kaushik’s Web Analytics 2.0, which is ‘The Book’ to read for making sense of the overwhelming amounts of data at the online marketer’s fingertips – check out his blog for hundreds of posts on getting to grips with modern web analytics.

I plan to do a write-up on the key need-to-know points when I’m finished, but in the meantime I’ve been working on a small graphic design project and wanted to share the results. The profile pic on my portfolio needed a little jazzing up, and I came across a good tutorial on how to turn a photograph into a low poly portrait. Having always wondered what I’d look like in a late 90s First-Person-Shooter, I decided to give it a go over a weekend.

Taking a fancy portrait shot I had on my hard drive, I decided to skip the annoying/unnecessary steps of combining a bunch of similar photos to create a perfect amalgamation of my face. Any minor changes would be likely lost in the low poly creation process, and it seemed to be a waste of time considering the final look I was going for.

What was not unnecessary however was the wireframe sketching process; I jumped straight into Illustrator and started with the Pen tool immediately, only to quickly realize that it was a gigantic pain in the ass without guide lines. Since using the Pen tool to add new anchor points deselects the existing paths and anchors, it’s nearly impossible to tell where to join your paths without laboriously adding a single anchor, selecting all paths on the layer, re-selecting the Pen tool then hovering around the area where you other paths are to highlight them. This is an incredibly complicated and unhelpful way of saying: don’t skip sketching your wireframe with the Brush tool in a separate layer.

Wireframe over portrait

Sketching a wireframe with the brush tool

As you can see, I end up looking like a younger, whiter MFDOOM, which is pretty cool in of itself. Then came the time-consuming part of creating a wireframe path on a separate layer using the helpful brush sketch as a guide. This ended up taking a solid three hours, so take the advice in the tutorial and brew some coffee, dig up your old Hip Hop mix tapes from the 90s and focus.

Eventually, after working your way through all of Biggy’s Ready to Die, you are finished and get to enjoy the relatively breezy process of colouring in your triangles with the Live Paint Brush and Eyedropper tools.

Low poly portrait of Ian

The final product: a low poly portrait

I ended up looking like a slightly demonic character from an RPG circa 1998. The eyes are a little scary, but the idea of an HR manager seeing this while checking out my work is amusing, so for now it’ll stay. I’ve thrown it up on my portfolio, as it fits with the low-tech theme and feel I have going there.

If you’ve got some spare time, give this tutorial a try. It’s a good way to become more familiar with Illustrator, and produces some good portraits that you can show off on your resume or website. Illustrator’s vector-based foundations really shine here, as resizing or moving the paths is so much easier than using Photoshop – no pixel distortions or loss of resolution! I’d recommend choosing photos with good contrast and shadows for maximum poly-effect, and if you scroll down the tutorial’s page people have submitted all kinds of cool examples of how you can take this one step further.

Now back to reading about macro analytics and data segmentations…

Creating a brand guide for your blog: making a logo in Adobe Illustrator

This post will showcase a quick design process for creating a simple brand guide and logo for your website or blog project. Creating a logo (or mark) is one of the best things you can do to make your blog stand out from the crowd, as well as being a great opportunity to learn or improve on your graphic design skills.

For those who think that they can’t draw or find Illustrator too complicated to use, keep reading! A month ago I’d never used Illustrator in my life, hadn’t drawn seriously since middle school, and generally felt that graphic design was an area best left to people with fancy art degrees or exotic drug habits*. Everything I’ve learned since then was thanks to Team Treehouse’s excellent tutorials; if you’re not familiar with Treehouse, it’s an e-learning service with a low monthly fee that has in-depth tutorials on everything from web and graphic design to app development and business courses. I’ll talk more about them later, but for now all you need to know is that they have a free two-week trial period which is more than enough time to complete the Illustrator basics course and get started on your own logo project.

Since this blog is in need of a shiny new logo, and my portfolio needs updating, lets kill two birds with one stone and create a brand guide for the Job Hacking blog.

Following the design process outlined in Treehouse’s Adobe Illustrator basics course, lets start with a mind-mapping exercise. This is a trendy way of saying “write down key words related to your project and extrapolate on each term.” So, I wrote down key terms that I was interested in, such as “social media”, “web design”, “communications” and so forth. Once I had three to four main words, I’d go back and start branching out from each one, until I had a page full of connecting words and themes. This is great for overcoming the “I have no idea where to even start,” stage and getting visual inspiration for the next step; sketching logos.

Brand guide sketches

Step 1: Sketching your ideas

Now for the fun bit; start drawing pictures and shapes that build on the themes you identified from the mind-map. In my case, I was focusing on the themes of this blog: data, analytics, conversations/storytelling, success, and technology/code. As you can see, this eventually turned into something kind of cool and unique. Once I’d decided on what I wanted the logo to look like, it was time to fire up Illustrator and create a digital version.

Early draft of Job Hacking logo

An early draft of the logo

I decided early on to use a monochrome orange palette: monochrome for it’s simplicity and because it was the preferred palette of most larger brands, and orange due to the strong association with established data analytics tools like Google Analytics. With the basic shape and design in place, it was time to play around with fonts, colours and refining the mark design.

Shortlist of Job Hacking logos

This took longer than all the previous steps combined.

Then I spent hours fussing over small details and driving my girlfriend crazy by asking her what she thought of each iteration. I wanted the mark to be tied visually to the text to convey the idea that technology and data can be used to tell a story with the right analysis. The final data point outside the icon with the arrow pointing up implies that success can only be achieved by thinking outside the box (yes, very deep), while the stylized H bonds the icon and text both graphically and symbolically. In the end, this is what I created:

Job HAcking official brand guide

The completed brand guide and logo for the blog

With the mark and text finalized, it didn’t take too long to create a few different sized iterations for favicons, black and white alternates and a colour guide (useful for choosing accent colours on web design projects). Export the artboard as a high quality PNG and we’re done!

To be clear, I am not a professional graphic designer and there are doubtless many improvements that could be made, but hopefully this will inspire you to try creating your own logo or start learning some Illustrator skills if you’ve never tried it before. And if there are any pros looking at this who have suggestions or advice, I’m all ears!

Ironically, I can’t use the logo or brand guide on the blog right now, since being unemployed at the moment makes it difficult to justify paying for the WordPress upgrade to access the CSS and customization options 😛 I’ve added it to the About page and my Portfolio. Hopefully I can feature it better on this blog sooner rather later. For now, I’ll patiently await a call from Jony Ive, congratulating me on my stellar work along with a job offer that will let me buy all the WordPress upgrades, as well as the fancy red car and vacation house in the Bahamas…

*I’m joking of course. I’m in awe of incredibly creative people and their design process, even more-so the ones who can earn a living from their talents. Besides, real graphic designers never earn enough money to afford exotic drugs…