Cinemagraphs and 'Saber'

Type guru and former art director of Men's Health Kerem Shefik (an old work colleague of mine), posted this on Instgram a short while back. He used the free Saber plugin for After Effects to make an animated letter 'O'.

A post shared by Kerem S (@kerumba) on Mar 7, 2017 at 2:58am PST

“I get to be the Sith Lord!”

Pretty much immediately I downloaded the plugin and started messing about with it. It is unbelievably fun to work with, and has a ton of different settings for different 'energy' styles, commonly seen in lightsabers, but also wizard (Patronus) effects used in Harry Potter.

Last year our wedding photographer Chris Giles captured this image of my wife and I mucking around with his lights...

The glows from the lights in this picture are so good that I thought I'd replace the lights with some saber effects and create a cinemagraph. I removed the lights as best as I could in Photoshop, and changed the angle of the red saber to point above Laura's head. There are presets in the plugin that require very little tinkering, and I was able to very easily create Luke's blue lightsaber and Kylo Ren's red one (minus the hand guard). I exported a 4 second video, and then merged 2 seconds over the top so that the video seamlessly looped. After converting it to a gif I was left with this!

This was about 5 minute's work. How amazing is that!?

I made a font (from scratch) in one day

[EDIT: It’s finally live on Google Fonts! You can find it here.]

One Day Builds

I’m a huge fan of Adam Savage’s One Day Builds. At the beginning of the day he starts with a pile of materials, and ends up holding something that he once coveted (this one is my favourite).

So with this in mind (and a day off from work), I set myself a challenge…

Create an entirely new font, from scratch, and submit it to Google Fonts in under 24 hours.

I had a couple of letters already sketched out in an old notebook. I wanted to create a tall, sans-serif, display font that could be used in posters, or large scale artwork. In my early days at Men’s Health, I would have to use fonts like ‘Tungsten’ or ‘Heron’, which were terrible for chunks of body copy, but amazing when used in headlines, or for promotional material (which was my main job there). This was the style I set out to create.

1pm, Wednesday

I went straight to Adobe Illustrator with the two or three letter styles I had sketched out. I set up five grid lines on my artboard, one each for the descender line, baseline, x-height, cap height and ascender line. I then decided on a width for the capital letters, and from there, the thickness of the stem (e.g. the width of the letter I).

I did a lot of research on letter proportions and ratios, and actually measured some existing fonts, working out how the lowercase letters should relate to the caps. From here, I made some rules:

• X-height = 2 × height of ascender/descender.

• Stem width = 1/4 capital letter width

• Lowercase width = 3/4 capital letter width

From here I created the letters O and B first. I made a decision that any letters that would usually have curves, would have a rounded corner instead. Most letters would be a tall block shape, but with letters like O, B and D, the edges with curves would have rounded corners. The outside corner would have a 12mm radius, and the inside had 6mm. With these rules agreed, plus a height for my crossbar (across the letter H) I started churning out my capital letters.

My font was very simple, but with one defining 'flourish', if you will. Any aperture, which is the opening in a letter, like the cut in the letter C, or the end of any arc, like the curved end of the letter J, would be cut at an angle. The hardest letters here were G and K.

With the CAPS completed, I moved on to the lowercase letters. This was undoubtedly harder, but with my rules agreed upon, it was just a case of churning through them. I used a lot more of my 'flourishes' here, especially at the end of the ascenders and descenders. The letters f, g, a and e were the trickiest, as they were completely new styles.

9am Wednesday

I was now moving on to some of the extra glyphs, like the question mark and exclamation mark. My pace picked up, and before bed I had managed to work up around 35 of them.

Thursday morning

In the morning, I completed the numbers 0 to 9 pretty quickly, and then began to actually create the font file.

This was completely new territory. Ian Barnard, a calligrapher pal on twitter (with my surname), recommended a program called Glyphs, which you can download for a free 30-day trial.

I downloaded Glyphs Mini and watched a couple of tutorial videos, then realised I’d set up my illustrator file completely wrong. So I had to paste each character in manually and scale it up to match the guides in the app.

10am, Thursday

With my characters in place, I went about spacing and kerning the letters. This part was incredibly time consuming. There are a series of keyboard shortcuts in this app which you absolutely must master before setting out on this. And before starting the kerning process, you have to get your letter spacing as close as possible to how you want the file to look.

Apparently as a rule of thumb, measure the width of the counter of the letter O (the hole in the middle) and divide that by three. That is the spacing distance you should start with on the left and right side of your letters.

11am Thursday

With the spacing set up (accounting for wider letters like M and W) I started kerning. This was a massively painstaking process. I visited this website, and pasted in their example kerning text.

Using the keyboard shortcuts (use this tutorial) I plodded through and adjusted kerning groups for every single distance that didn’t look right to me. The obvious ones are between V and A, but there are so many letter pairings within that example copy that I wouldn’t have thought of.

Once complete, I converted the kerning text to all caps and did the whole thing again, to pair the capital letters.

12:59pm Thursday

I exported my font and converted it to a .ttf file ready to submit to Google. With quite a few glyphs still missing (like square brackets and copyright symbols), I was certain that it wouldn’t be accepted. I also didn’t have time to include the multitudes of accents required for full language support.

It’s not the greatest of fonts, but it wasn’t bad for my very first go. And considering I had to teach myself how to use the Glyphs software from scratch, and it was completed in a single day, I was pretty proud!

The name?

Odibee Sans

…pronounced “oh-dee-bee”. My very own ‘One Day Build’ (ODB).

Afterword

I submitted Odibee Sans to the Google Fonts team back in May 2017. The team quite rightly suggested that I should spend some additional time on the font to refine the design (although they admitted that this was against the spirit of the project).

With this in mind I spent an additional day on the font. I have since added all the extra glyphs (I think) required for extended latin support. I also made some major changes to around 30 of the glyphs, including new styles for the letters (caps) S, B, R, and lower case s, c, y, a, e, r, f, t, p, q and j, as well as a couple of number tweaks.

On top of this, there are now more than 1500 kerning pairs, which has made a massive improvement to the typeface.

And I made a website! odibeesans.com

The site was also made in a day using Adobe Muse. More on this here.

Thanks for reading! I’d love to read about any projects you may have tackled in one day. It’s quite an effective technique, if you can spare the time (God bless the freelance lifestyle)!

Press:

Medium (published on Freecodecamp)
The Next Web (syndicated article)
Design Taxi
The League of Moveable Type Newsletter (and podcast)
Adobe Illustrator (tweet)
Adobe Create (tweet)
Font Squirrel
Digital Arts
Web Designer Depot
Freebie Supply
Befonts
Flexible (dribbble)
Free Design Resources

Batch editing in Lightroom: My Japan Trip

In April, I fulfilled a lifelong dream and took a trip to Japan. My wife and I actually spent a few days in Beijing on the way over, and visited the Great Wall. We then flew to Tokyo, where we caught the bullet train and visited Kyoto, Hiroshima and many other wonderful locations. I took along my old Canon 550D, with a new 55-250mm zoom lens and did my best at capturing our trip.

Japan is one of the most photogenic places I've ever visited. The mix of the ultra-modern and pristine ancient landscapes is unbelievably captivating. But because we were on the go so much, I shot pretty much the entire trip using the 'full-auto' setting on the camera. While this does a pretty good overall job, it simply doesn't sell the vibrancy of the colours we experienced, and on particularly dull days a lot of my pictures were fairly lacklustre.

I would usually edit my snaps in Photoshop. However, I took over 1500 pictures on our trip, and processing each and every picture here would be painstaking. I also needed a way to quickly cull or crop a vast majority of these pictures. So, using Adobe's Lightroom (for the first time in my career!), I set out on the task of batch editing all of my pictures.

Step 1. Crop & Straighten

With my files imported, I hit the Crop Overlay tool under the Develop menu. From here I straightened and cropped my pictures either to look more centralised, or to put points of interest into the 1/3 area of the picture, using the guidelines. In this example, I moved the centre of the bridge into the bottom-right third of the crop.

Step 2. Colour Treatment

Most of the shots in my library were massively over-exposed and had a crappy white balance setting. So I brought the exposure down and reduced the blacks setting. Then, I highlighted any colour in the image by increasing the clarity, vibrancy and saturation of the picture.

Step 3. Sharpen

These images were mainly going to Facebook, so to increase any detail in the image (handy for online viewing) I sharpened the image a touch. This can be found under the Detail menu.

Step 4. Copy and Cull.

With these settings complete, and still under the Develop menu, I simply hit Command-C to copy the settings, and Command-V to paste them onto the next photo. This is a huge time saver. Each photo had to be cropped again, but the colour and detail settings can all be copied directly to the next pic. Obviously, the colour and sharpen settings also need to be tweaked for each picture (especially the saturation). I actually combined my DSLR shots with some iPhone pics I took, and these had massively different needs.

While progressing through my album, I deleted photos as I went. You can remove pictures from Lightroom only (option-backspace), so you're not deleting any originals, and from my original 1500 I managed to ruthlessly select around 200.

Step 5. Export for Screen

With my pictures chosen and edited, I went to export them (select File - Export). From this menu, I renamed the new shots, and made sure that they wouldn't unnecessarily take up too much size on my computer. I limited the file size to under 1.5MB each (still pretty large) and brought the height and width down.

Results.

Here is a selection of shots I'm particularly proud of. The whole process was a huge amount of fun, and most-importantly, a huge time saver.P.S. Go to Japan. You won't regret it.

My doppelgänger in Northern Irish politics

A couple of weeks ago I found myself on the homepage of the BBC News NI website, after I tweeted the leader of the Social Democratic and Labour Party in Northern Ireland. This is my third time going viral, and each time is no less exciting (and mental). The first was after I wrote a letter to Nestle. The second was for a guide on how to make your own wedding invites. But this one escalated so quickly that it made my head spin.

On the 22nd Feb 2017 I was sent a picture of the leader of the Social Democratic and Labour Party in Northern Ireland, Colum Eastwood. He was running an election campaign for a seat in the NI Assembly and all over the TV in the UK, which is where my friend Luke spotted him and sent me this...

When I showed this to my wife, she asked where the picture was taken as she'd just assumed it was me. From this angle, we look almost identical. So I had a little fun with the web camera and tweeted him some pictures, asking if he needs a body double:

Saw @columeastwood on TV last night and god we look similar. Let me know if you need someone to play you at parties! #doppleganger pic.twitter.com/JJBbftJOPb

— James Barnard (@barnarddotco) February 22, 2017

When Colum himself retweeted it, a journalist at BBC Radio Ulster got in touch, and then that evening this article appeared on the BBC News NI homepage, as well as getting a mention on the radio.

Then everyone in Northern Ireland had a little fit...

...and now I've got a new buddy! Honestly, the whole thing was a bit silly. But it was a lot of fun meeting Colum, if not a little weird. We were genuinely laughing our asses off, and his campaign team took a short video, which again made it on to the BBC website. I posted the whole thing to image site Imgur, and it made the front page, getting around 150,000 views in a day. Check it out here: http://imgur.com/gallery/ofQbC

Press:
BBC News: NI Assembly election: 'Newsnight' and Eastwood double
BBC News: SDLP leader Colum Eastwood meets doppelganger in London
Belfast Live: Could this Colum Eastwood doppelganger be the best lookalike ever?
Irish News: Spot the difference: Colum Eastwood has a doppelgänger
Derry Now: Seeing double! SDLP Leader Colum Eastwood contacted by English doppelgänger
Imgur: My doppelgänger in Northern Irish politics

From Illustrator to Ink: Designing my own tattoo

I already have a few tattoos. I once went through an 8-hour sitting on a hangover, so I'm no stranger to the process (and a little pain), but I've never had the balls to design my own. This is for the same reason I couldn't design the logo for my freelance business; I'm my own worst critic. I'd be forever wanting to tweak and change the design, and this isn't exactly possible with tattoos.

However, I've been doodling these little geometric shapes for years now (some older examples here) and I finally decided to put my money where my mouth is and be proud enough of one of my designs to get this done. Thanks again to Marcus from Evil from the Needle in Camden who helped me through the process. We needed to make sure that the tattoo was large enough to incorporate the detail. FYI, the needle used for the line work is similar to that of a 0.6 size fine line pen, so if you can draw the intricate parts of a design with this pen, you can replicate this detail in a tattoo.

[Edit: So my brother saw this and asked me to design him one too. He liked it so much he had it done the next day!]

WINNER! Cateys Awards 2016

Last night I earned the right to put 'award-winning' in front of my bio, after winning 'Best Use of Technology' at hospitality industry Oscars, The Catey Awards 2016. As 'digital and brand manager' at M Restaurants (read out by the same guy that does the voice of God from X Factor) I was luckily allowed to represent M after creating the 'Choose Your Table' Functionality' on the restaurant websites.

The presenter, Claudia Winkleman, read this from the judges, "This clever use of disruptive leading-edge technology empowered the customer to be the integral part of the booking process. The solution would challenge the rest of the [restaurant] industry to sit up and take note."

Read more about how I went about setting up this AWARD WINNING feature here.

twitter

Cateys Awards 2016

Cateys Awards 2016

Cateys Awards 2016

Cateys Awards 2016