Todd

I ate up Dirk Gently’s Holistic Detective Agency season 1 on Netflix recently, and it cemented Elijah Wood as one of my fave actors. I tried to capture his likeness here in one of his most confused moments as Todd, but only partially succeeded…

Todd.png

How to do datamoshing in Photoshop

Datamoshing is “the practice of intentionally using compression artifacts in digital video and animated GIFs to create glitch art”.

It’s an effect popularized by Kanye West in his video Welcome To Heartbreak, but it’s mostly been an effect exclusive to video. There are a few crazy ways to get this effect on images by editing them with text or audio editors instead of image editors, but it’s hard to find a straightforward way to just do it in Photoshop. But, there is a fairly simple way to emulate it with a few filters. Here’s how:

Continue reading “How to do datamoshing in Photoshop”

A little more conversation,

My friend Alper is working on an ebook about Conversational bots and UI, something we worked on together at Hubbub too. It seemed only fitting that I drew the cover for his book. So I did. You can preorder it here.

smaller_20cover.jpeg

My workflow – exporting multiple images

I thought it might be fun to share some tips and insights about my workflow on here, so here is the first post about that.

I’ve been working with Photoshop for years and years, and I’ve picked up some cool tricks along the way. But Photoshop itself keeps changing too, so today’s tip is cutting-edge, using the latest features in CC 2015.1 to export images in multiple sizes with one click. This uses two great new features, namely Artboards and The Generator.

Artboards are old news for users of Illustrator, but in Photoshop they can really enhance your workflow too. I wasn’t a big fan at first, but using it in conjunction with the Generator makes a strong case in their favor.

The Generator is probably a feature not many people know about. Exporting multiple layers in the past was mostly the domain of Export > Layers To Files, or using Slices in Save For Web, but The Generator is the next evolution; all you have to do is turn on Image Assets under File > Generate, then append .png to the names of the layers you want to export, and when you save your PSD, it automatically crops and exports these layers.

I found this extremely useful for exporting character limbs for game development, but it has its uses in webdevelopment also. I’ll show you how I use it at my job to export different sizes of the same illustration:

Screencap_generator

The source file is very high resolution, obviously, and when it’s done, I have to export into two 1200×628 pngs – one with a text banner for Facebook, and one clean one for the blogpost itself – plus a cropped 700×628 version for Pinterest and Instagram.

Resizing and cropping manually is a small pain, but a pain nonetheless, especially when you have to go back and change something later.

So, what I do is make an artboard at the size of the original illustration and convert all the layers in it to a smart object. Then I make three extra artboards at the size I want the exported images to be, copy the smart object into them, and add .png to the artboard names. This way, whenever I make a change in the original illustration, the change is propagated to all the other art boards, and when I hit Ctrl+S it automatically saves them out to separate pngs, ready to go onto the site (well, after they go through ImageOptim).

Using this setup as a template whenever I start a new illustration saves me a bunch of time otherwise spent exporting images by hand. Hopefully this is useful to some of you too.