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.
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:
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.
Before I start on a drawing that has a complex lighting and color setup, I usually do a color key first to make sure I can pull it off. I did the top one yesterday afternoon and was pretty pleased with it, but this morning someone pointed out it was a bit gloomy, and looking back after the changes I made (bottom) they were totally right.
[UPDATE] and the finished piece:
We looked back at 2015 earlier this month, now it’s time to look ahead at all the things coming for Hedgefield in 2016.
I started this project last summer with the intention to finish it up in a month or two, but then I got caught up in other things eventually leading me to my current job at Yoast, so the development timetable for this project has been stretched out somewhat. But this year I’m definitely finishing it and putting it out in itch.io.
I can’t tell you what it is yet, but this year I’m working on a game spearheaded by Sytze Schalk, though I’m keeping my role in it limited to some design and prototyping work, leaving the heavy lifting to contractors. But that’s a great opportunity to involve some people I’ve wanted to work with.
This again? Yes. I’ve done a lot of thinking about this game since I completed the vertical slice in 2014. It was way too ambitious, while still missing some crucial mechanics. So I’m slowly writing a new draft, and so far it’s looking pretty solid. 2017 here I come.
It sounds weird considering my day job IS drawing, but I want to make more quick little drawings in my free time and learn new techniques. Just get better at it, basically.
I’ll be talking more in-depth about these things in my newsletter, so sign up for that.
I’ve yet to visit Venice in person, but it has always held my interest and imagination, so when I could draw a classic Venice canal as a Yoast illustration I jumped at the chance.
And just the background:
A recent illustration for Yoast, for a post about their plugin. I’ve always been enamored with dockyards circa the 1950s (blame it on TinTin) so this was a nice opportunity to do something with that imagery.
This here’s an infographic I made for Yoast website reviews. I’m happy with the layout and the colors, but the most fun part was making the car and the guys inspecting it. It’s made completely in vectors, something I don’t often do.
I’ve started schooling myself in using color recently, and this was one of the first test images I made.
I used to do it on gut feeling mostly, like I do with perspective – I mean I know things about bounce light and indirect shadows and color temperature, but when I have a bunch of colors that don’t work well together I didn’t really know why.
So I started watching Sycra and Ctrl+Paint videos again to get a handle on some kind of technique. And the biggest shift in my thinking came when I installed a color wheel for Photoshop. I use Coolorus, and once you learn how to use it it’s a great tool.
I recommend these videos on the subject if you want to learn too.
Just submitted this piece to the Witcher 3 fanart competition. Had fun making this one.