The art and craft of screen graphics – interview with James Brocklebank

Continuing the ongoing series of interviews on fantasy user interfaces, it’s my pleasure to welcome James Brocklebank. In this interview he talks about the ever-evolving set of tools at his disposal, the increasing demand for motion graphics world in film and other fields, working on load movies for video games, and being a part of huge sci-fi film productions in the last few years. In between and around, Ryan dives deeper into his work on video games such as “Call of Duty: Black Ops” and “Titanfall 2”, as well as screen graphics on “Passengers”, “Ghost in the Shell” and the recently released “Pacific Rim: Uprising”.

Screen graphics for Ghost in the Shell. Courtesy of James Brocklebank.

Kirill: Please tell us about yourself and what brought you to where you are today.

James: I am a motion designer based in London, UK. I’d always loved drawing as a kid and studied art throughout school. It was when I was doing my Fine Art foundation course at Art College in Hastings, that I first discovered Photoshop and that steered me towards doing a degree in Graphic Arts and Design at Leeds Met University, where I specialized in photography, image manipulation and film making.

Once I left Uni, I became a runner, essentially a tea boy, firstly in an editing facility in London and then at a VFX house.

All the while I was working in the evenings on my own portfolio and trying to learn as much software as I could. Then I got a job as a junior designer in motion graphics, first designing DVD menus and then working in music, making commercials for albums, promos, content for award shows and the odd CD cover, which was great, as CDs and music videos were some of the things that got me into wanting to do graphics in the first place.

I went freelance about 2008 and since then I’ve worked across a wide range of projects for a variety of clients. From broadcast, live concerts, projection mapping, branding, commercials, computer games and more recently I’ve been doing some film work which you’ve seen.

Kirill: Between the powerful digital tools at your disposal and the ideas in your head as the designer, is there more importance to one than the other?

James: I primarily start with the ideas. That can be the brief from the client or a self initiated project. If you’re doing film work, there’s the director and a hierarchy of people who have their own visions. The tools are there to facilitate you executing their visions.

That said, sometimes it can be a little seed of an idea that someone has, and that’s where you then go and explore. That’s where the software comes in amazingly handy, because you don’t actually know where you’re going to go. You’re experimenting and that’s why I really enjoy the look development stage. You’re playing around, pushing the software to see what it will do, exploring different approaches.

Kirill: In my little part of the world, there’s usually a team of designers that work on the overall experience, and the particular parts of it, like visuals, animations, overall flow. And then there are developers that take those mock and implement them. Does it feel that in your field you’re wearing both hats at the same time?

James: I come at it from a drawing/art background, but you need technical skill to make a living in this field. There’s a lot of software I have learned since the beginning of my career. The technology has developed massively, and with that the responsibility of what you need to know for each job has increased exponentially. I primarily work within motion design, but a lot of the jobs I now work in are more of a visual effects pipeline, which encompasses everything from 3D animation, compositing, simulations, camera tracking, etc. Not that I need to know all of the software that comes with that, as there are a lot of people working within each facet of the project, but you need to have an understanding of it all.

Screen graphics for Passengers. Courtesy of James Brocklebank.

Continue reading »

Production design of “Elizabeth Harvest” – interview with Diana Trujillo

Continuing the ongoing series of interviews with creative artists working on various aspects of movie and TV productions, it is my pleasure to welcome Diana Trujillo. In this interview she talks about the art and craft of production design, finding stories that resonate, building lasting relationships in the industry, and creating worlds that feel authentic for the camera and the viewers. Around these topics and more, Diana looks back on her work on the first season of critically acclaimed “Narcos”, and dives deep into the spellbinding “Elizabeth Harvest”, a story of a brilliant scientist, his all-consuming obsession and a single-minded, tragic pursuit of the long-lost past.

Kirill: Please tell us about yourself and your path so far.

Diana: I was born in Colombia and my original field of study was architecture. In the middle of doing that degree, I went to New York for about a year, intending to study photography. I had a certain conflict between two dimensional and three dimensional art design, and before ending my career in architecture, I really wanted to see what was behind photography.

When I was there, I lived with some Colombian friends that were studying film in NYU. During my photography studies at the new school, I started to play with them to do kind of art direction. I started learning what art direction was and it made me consider that maybe this is something that I could be really good at. I’ve always been in love with cinema and I’m fond of art, but what I did not know was that you could choose that as a way of life.

I went back to Colombia and I finished my degree in architecture, but I always kept on coming back to that time in New York. As those friends of mine graduated, they went back to Colombia and created a production company. Andi Baiz was going to do his first feature called “Satanas”, and Rodrigo Guerrero the film producer called me asking me to be Andi’s visual consultant. I didn’t really study anything yet about the lenses or Set design, per se, but I knew about depth of field, layers and principles of architecture, photography and the basics of set decoration.

On the set of “Undertow”. Photography by H. Alvarez. Courtesy of Diana Trujillo.

I pictured everything in my mind, but I hadn’t put everything together. That collaboration was a turning point for me, and I never went back to architecture.

I was basically making all the aesthetic decisions with him. He had his production designer, art director, costume designer and makeup designer, and I remember this experience because nobody knew who I was. I was next to him and he asked my opinion on costumes, decorations and everything else. After that I decided that I really wanted to go into art direction.

My grandmother had a really big house with many different rooms and pieces of furniture and objects of many eclectic styles. I always liked that space, and I used to ask her to let me use the furniture. I started bringing these crazy collection pieces and showing them to my directors. After doing a couple of movies as a set decorator, they started asking me to be the art director. It all happened very fast. I used to draw the plans and to sketch the perspective of how a space for a frame will look. I had it in me, but I didn’t know about it until I started doing it.

Still from “Elizabeth Harvest”. Production design by Diana Trujillo.

Kirill: If I can bring you back to your first productions, was there anything particularly surprising or unexpected for you?

Diana: What really caught my attention was that moment when the director says “Action”, and everybody has to stay silent and not move at all. It’s like the time freezes for a while. You have to really listen to what they’re saying. When I watched it, it looked like a ritual. It was the perfect place to be in, because you’re creating something in that moment.

You’re creating through the director of photography, through his camera. You can feel it around you, there is the silence, and then you see it. You’re looking at this tiny monitor,and you are looking at the work of 80 people. I remember saying that this is something that I really enjoy doing. Definitely it’s magical to be there, to be creating as a team.

Still from “Elizabeth Harvest”. Production design by Diana Trujillo.

Continue reading »

The art and craft of screen graphics – interview with Ryan Uhrich

Continuing the ongoing series of interviews on fantasy user interfaces, it’s my pleasure to welcome Ryan Uhrich. In this interview he talks about what it takes to create engaging and compelling screen graphics for the imagined worlds of feature film and episodic productions, and what considerations go into finding the right balance between the their technical nature and the demands of the overall story around them. In between and around, Ryan dives deeper into his work on “Star Trek: Beyond” and “Altered Carbon”.

Kirill: Please tell us about yourself and the path that took you to do screen graphics for film and TV.

Ryan: I was one of those kids who daydreamed… a lot. I would doodle and draw during most of my classes. But, in high school, I started to realize that art class was something I was actually pretty good at. It was around this time that I saw a computer lab running a brand new copy of 3D Studio v3 for DOS (now called 3DS Max). I saw a computer generated sphere on the screen and I was awestruck. I remember thinking it looked so realistic! haha. This moment sparked a lifelong passion – but at the time I didn’t know how far it would take me. In the early nineties, computers were quite primitive and art class was where you went to avoid doing the “real” classes. Fortunately for me, I got to make a career out of it.

After high school, I taught myself how to make graphics with Photoshop and make web pages in HTML. The internet was brand spanking new and it was calling me in a big way. It satisfied my excitement for art and computers and I quickly found companies wanting to pay me to make stuff for them. From there, I got a job at a multimedia company converting old text manuals to interactive 2D & 3D lessons for Bombardier aircrafts. I started to learn Flash and I was a huge fan. I loved how it combined art & code and it gave me my first taste of animation. Eventually, by the mid 2000’s I enrolled in Grant MacEwan College for their Design Foundations program and subsequently went to Vancouver Film School for the Digital Design program, specializing in motion graphics.

Right after graduation, I moved to Copenhagen, Denmark to work at a studio called Thank You, where we created TV commercials. It was pretty nerve-racking to leave my home in Canada and venture off for my career, but I would definitely recommend it. It was an amazing opportunity and ended up providing a lot of experience, both personally and professionally. Another move to Sydney, Australia meant working for MTV, Z Space, and Collider. After three years abroad I somehow ended up back in Vancouver and was provided with the opportunity to work on an upcoming film called Ender’s Game. I instantly jumped on the offer because I was passionate about the aesthetics of UI and screen graphics and it felt like the right path.

Screen graphics for “Altered Carbon” under the creative direction of G Creative. Courtesy of Ryan Uhrich.

Kirill: Looking back at your first production, what was the most unexpected part of working in film?

Ryan: I was accustomed to tight deadlines from advertising and conceptualizing on the fly. However, the software pipeline was quite different and I found myself struggling to convert the 3D camera data from Maya to Cinema 4D. I remember spending a lot of time with those technicalities rather than designing and animating – which was what I was hired to do. Unfortunately, all these years later, VFX to motion graphics pipelines can still be problematic. I hope someday it will get easier. Haha.

Screen graphics for “Altered Carbon” under the creative direction of G Creative. Courtesy of Ryan Uhrich.

Kirill: How do you craft something compelling that keeps the viewer in the story?

Ryan: The largest component to screen graphics is storytelling. Our goal is to provide a tool for the director to convey important information to the audience at the right moment. It should communicate quickly and move the story forward without distracting the viewer. The second layer is the mood or feeling we are trying to elicit from the audience – it should harmonize with the narrative and not feel out of place. Once those are dialled we spend time thinking about all the fun stuff like plausibility and sexiness.

Screen graphics for “Altered Carbon” with Chris Cooper under the creative direction of G Creative. Courtesy of Ryan Uhrich.

Continue reading »

Converting List to Enumeration in Kotlin

There’s a bunch of helper extension methods that the Kotlin standard library provides for working with collections. However, it would seem that at the present moment java.util.Enumeration has been left a bit behind. Here is a simple extension method to convert any List to a matching Enumeration:

/**
 * Extension function for converting a {@link List} to an {@link Enumeration}
 */
fun <T> List<T>.toEnumeration(): Enumeration<T> {
    return object : Enumeration<T> {
        var count = 0

        override fun hasMoreElements(): Boolean {
            return this.count < size
        }

        override fun nextElement(): T {
            if (this.count < size) {
                return get(this.count++)
            }
            throw NoSuchElementException("List enumeration asked for more elements than present")
        }
    }
}

And here is how you can use it to expose the local file system to the JTree component. First, we create a custom implementation of the TreeNode interface:

data class FileTreeNode(val file: File?, val children: Array<File>, val nodeParent: TreeNode?) : TreeNode {
    constructor(file: File, parent: TreeNode) : this(file, file.listFiles() ?: arrayOf(), parent)
    constructor(children: Array<File>) : this(null, children, null)

    init {
        children.sortWith(compareBy { it.name.toLowerCase() })
    }

    override fun children(): Enumeration<FileTreeNode> {
        return children.map { it -> FileTreeNode(it, this) }.toEnumeration()
    }

    override fun getAllowsChildren(): Boolean {
        return true
    }

    override fun getChildAt(childIndex: Int): TreeNode {
        return FileTreeNode(children[childIndex], this)
    }

    override fun getChildCount(): Int {
        return children.size
    }

    override fun getIndex(node: TreeNode): Int {
        val ftn = node as FileTreeNode
        return children.indexOfFirst { it -> (it == ftn.file) }
    }

    override fun getParent(): TreeNode? {
        return this.nodeParent
    }

    override fun isLeaf(): Boolean {
        val isNotFolder = (this.file != null) && (this.file.isFile)
        return this.childCount == 0 && isNotFolder
    }
}

Note a few language shortcuts that make the code more concise than its Java counterparts:

• Since File.listFiles() can return null, we wrap that call with a simple Elvis operator: file.listFiles() ?: arrayOf().
• The initializer block sorts the File children in place by name.
• To return tree node enumeration in children(), we first map each File child to the corresponding FileTreeNode and then use our extension function to convert the resulting List to Enumeration.
• Looking up the index of the specific node is done with the existing extension indexOfFirst function from the standard library.

Now all is left to do is to create our JTree:

val tree = JTree(FileTreeNode(File.listRoots()))
tree.rootVisible = false