ComputerArts June 2012

201

“We have a responsibility as content makers to reward users for their attention by making consistently excellent stories,” Anrick Bregman, p26

June 2012 computerarts.co.uk

201 the new heroes of design the design manual

£6.00 June 2012 computerarts.co.uk

Inside__ Büro North • sehsucht • Edi Inderbitzin gareth o’Brien • dixonBaxi • olimpia Zagnoli Teacake Design • Kris hofmann • Ben Secret anrick Bregman • Estúdio Alice • evermade Use Illustrator Cs6’s Pattern Creation mode mi • Master Photoshop’s new 3D tools abby Byrne • Wendy Tan-Lui Chan your portfolios & more

studio profile teacake design Projection mapping comes of age

PHOTOSHOP AND ILLUSTRATOR CS6 VIDEO TRAINING

Plus expert tutorials in After Effects and Indesign

Master Photoshop’s new 3d tools Mi:Playstation Vita uncovered

NEW HEROES of Design young, talented and after your job: the world’s hottest new creatives reveal their powers

Cover illustration by André gottschalk

GREAT PORTFOLIO = GREAT JOB

Industry secrets including:

• D&AD on being more employable • 10 ways to pitch to clients and win • Set up your own pop-up shop

discover what agency bosses and art directors are looking for June 2012

C$19.95 £6.00

06

c o n t e n t s If you see this, then it’s on the cover

output

10

opinion

26-30

Meet the creatives behind the best new design work – from stunning motion graphics to saucy kitchenware

Anrick Bregman:can a website make you cry?

Edi Inderbitzin:be brave with branding gareth o’Brien:step away from the computer

the Design manual

33

the new heroes of Design

52

great portfolio = great JoB

66

the designer’s guide to everything.this month we bring you 10 job-winning ways to make yourself more employable

Meet the new wave of talented young creatives who are helping shape the world of design

We ask our panel of experts exactly what creative pros look for in the portfolios of potential employees

reverting to type

70

the light fantastic

76

creative sKills

82

how teacake design’s founders fuse a love of craftmanship with fresh, modern creative to produce impressive results

Projection mapping has finally come of age – and its popularity shows no sign of waning. so what’s actually involved?

Learn how to work smarter and faster in Photoshop, Illustrator, Indesign and more with our in-depth, expert tutorials

exposure

106

my Design classic

114

this showcase section gives you the chance to show off your talent, creativity and design skills to the wider world

designer and illustrator Anthony Burrill on the unsung hero of the product design world:the classic wooden chip fork

suBscriBe

65

get every issue of Computer Arts delivered to your door for the next 12 months – and save up to 40% off the normal asking price

studio profile:teacake design _Page 70

Computer Arts June 2012

www.computerarts.co.uk

Contents Issue 201

07

Create a distinct brand identity using type _Page 94

the new heroes of design _Page 52

Master Photoshop’s new 3d tools _Page 84

opinion:gareth o’Brien _Page 30

Projection mapping _Page 76

studio Mi and the Playstation Vita _Page 98

output:olimpia Zagnoli _Page 14

subscribe at www.computerarts.co.uk/shop or see page 65

Create a cube calendar _Page 92

Colour adjustments in After Effects _Page 102

Computer Arts June 2012

84

Computer Arts June 2012

Creative skills 3d in Photoshop

www.computerarts.co.uk

Creative skills 3d in Photoshop

85

adobe photoshop cs6 beta

Master Photoshop’s new3dtools Luke O’Neill shows how to harness the power of Photoshop Cs6 beta’s 3d capabilities

With every new release of Photoshop there are the Adobe fanatics who are super-excited to see what’s new and those who are somewhat less enthusiastic,due in part to some iterations having only had minor tweaks and additions. I often fall into the latter camp, but with the release of Cs6 there are some distinct improvements that are certainly worth taking note of. the first thing you’ll notice is that the interface has taken on a slick, dark grey look and is now by default in a closed environment. having used Photoshop for years in its old clothes, the first thing I did was to go to Window>Application frame to open it up again and then in the interface preferences changed the colour back to a cool grey - sometimes change is not good. styling aside, my main interest is in the vastly improved 3d tools to intuitively create and map 3d artwork and text on the fly. through this tutorial I’ll run through the basics of the new 3d tools in the context of creating a vinyl album jacket. I’ll show you how you can quickly and easily create, edit and render 3d objects, and build them into your design and illustration work without the need to switch to another program. A free public beta of Photoshop Cs6 is currently available (as we go to press) for download from Adobe Labs at http://labs.adobe.com/technologies/photoshopcs6.

01

Exact dimensions of vinyl jackets vary, but for this tutorial set up a new document in Photoshop measuring 312x312mm at 300dpi and in greyscale mode. With the snap to guides on, drag the horizontal and vertical guides to establish a centre point, fill the layer with 20% black and, holding shift, re-size it to create our background.

02

Now to explore some of the 3d shape presets. Create a new empty layer and go to 3d>New Mesh from Layer>Mesh Preset>Cube. you will be taken into the 3d environment: a new 3d panel will appear in the Layers panel and the Properties panel just above this holds the editing options. In the Properties panel you’ll notice five options to rotate, roll, drag, slide and scale the cube. Begin by playing around with the rotate 3d object option until you’re satisfied with the angle.

03 Luke O’Neill Art editor of Computer Arts Collection,Luke is a northern designer and illustrator living in the southern province of Bath. he has a penchant for clean,black lines and has been known to partake in impromptu experimental dance sessions after a shandy or two.www. computerarts.co.uk

Time needed 2-3 hours Assets you’ll find the video and files accompanying this walkthrough here: www.computerarts. co.uk/disc-contents

Skills Work with 3d objects and type Work with patterns and textures Map artwork onto 3d shapes

subscribe at www.computerarts.co.uk/shop or see page 65

Experiment with the camera view, position and scale of your 3d object, and then click on the cube layer in the 3d Layers panel. A Move tool will appear over the top of the cube, and we can now edit the object independently of the environment along the X, y and Z axes. Either hover over the handles of the Move tool and pull them in the desired direction, or choose the Move tool you require from the top bar and click-and-drag anywhere on the canvas.

Computer Arts June 2012

86

Creative skills 3d in Photoshop

05

Now to have some fun and start mapping our cube with some textures. download the file Liquify_Inverted.psd from www.computerarts.co.uk/disc-contents or simply create your own by upping the contrast levels of a black and white image and then using the Liquify filter to push, pull and distort the image until it has been suitably abstracted. then simply hit Cmd/Ctrl+I to invert it, and save it out as a separate file.

04

Click on the Environment layer, where you’ll notice that in the Properties panel you can edit the global ambient light, the ground plane and even load a background texture or image. Click on the colour option and select white as the colour, then reduce the colour intensity to roughly 47%.

06

Back in the 3d environment, hover over one of the cube’s faces and Ctrl/ right-click to bring up the pop-up panel. Click on the Materials tab, and under the diffuse drop-down menu click on replace texture. select our Inverted Liquify texture, and the 3d engine will map the texture onto the face of the cube. repeat for all visible faces. rotate the shape to show faces that haven’t been mapped with artwork, and you can quickly apply textures to the faces on the fly in the same way.

08

on a new layer, select the type tool and type out either a word or single letter. don’t worry too much about picking the perfect font, as the type will remain completely editable once in the 3d environment. With the type selected, hit the 3d button in the top bar to create a 3d extrusion of the type.

Computer Arts June 2012

07

Now to have a look at the lighting options. Click on the filter By: Lights tab in the 3d panel, or navigate to the Infinite Light layer. here we’re able to fine-tune the direction, type and intensity of our object’s lighting and shadows by simply dragging the lighting tools’ positions and editing their properties. to keep things simple, change the direction of the lighting so that it’s almost vertically directed down from above, and increase its intensity to 120%.

09

once in the 3d environment, we’re able to affect the type in exactly the same way we were with the cube, changing its position and lighting. the beauty of 3d type in Cs6 is that we’re still able to edit it on the fly through the Character panel, adjusting its size, colour, and even adjusting the leading and kerning of whole passages of text.

www.computerarts.co.uk

87

10

At this stage, add a film grain texture to the front face of the letter, which can also be downloaded from www.computerarts.co.uk/disc-contents. By Ctrl/right-clicking on the type and navigating to the deform tab, you can also increase the extrusion depth to add a more severe perspective to the character. In the interests of keeping the composition clean and graphic, I avoid any of the more radical deform options and also choose to turn off the shadows for both shapes in the lighting options.

11

Use the same techniques we’ve already used to create some more 3d shapes, in this case I’ve added two more spheres and a preset cone shape that I’ve mapped with a zigzag texture I found online. It’s also possible to paste in vector shapes from Illustrator, as I’ve done here with the three black bars, then simply go to 3d>New 3d Extrusion from Layer.

WorKINg WIth tyPE IN PhotoshoP Photoshop Cs6 has much improved type capabilities, and it’s now possible to set character and paragraph styles in much the same way as in Indesign.however,because Photoshop runs on a raster engine and so renders type as an image,it will never be able to achieve the crispness that the vector-based Indesign and Illustrator can,which is of the utmost importance when setting small,subtle type.

12

the beauty of working with 3d in Cs6 is that we can go ahead and create new 2d layers while the 3d layers still remain editable until we render them. you can add some character and colour to the composition by colouring our background square 26% yellow and the background to roughly 10% black. I then drop in some handmade brush textures and set them to Multiply.

13

At this stage I decide to add some simple 2d graphic elements to contrast with the 3d shapes. In Illustrator, use the Pen and Brush tools to create some simple 2d shapes and rough squiggles, colour them white and paste them back into your composition. In Photoshop, duplicate the yellow square layer, turn its fill to 0% and add a 10px stroke layer style the same grey as the background.

15

14

Now to add the final details and set the type. Launch Indesign and set up a new document at 312x312mm and place the Psd into the document. At the top, paste in and position your logo or chosen band name. I’m calling my album Abstract Beats, and I set this in 15pt futura Medium. I also add a volume number.

I chose to keep the type and details quite subtle to contrast with the bold shapes of the background illustration.

subscribe at www.computerarts.co.uk/shop or see page 65

the final stage in the whole process is to render the 3d elements in our scene back in the Psd. depending on your requirements, you can adjust the rendering options in the preferences pane, but to set a layer rendering simply choose the layer, draw a marquee around the area you wish to render and go to 3d>render. depending on the spec of your computer and the quality at which you’re rendering, the process can take a very long time, and it’s a good idea to close other programs and stop your computer from sleeping so the process is not interrupted.

Computer Arts June 2012

Welcome Issue 201

03

w e l c o m e

Inside issue 201 find out how to make yourself more employable, what Craig Ward’s superpower would be and master Photoshop Cs6’s new 3d tools

IssUE 201 JUNE 2012

Last issue was a little special for us – it’s not every day you turn 200,after all.so how do we follow that? Well,with all the nostalgia whizzing around in our heads (did you see we made issue one of Computer Arts free on Apple Newsstand?) we thought the ideal follow-up would be a look to the future.And more specifically:which creatives are going to be making waves over the next year.We’ve got a pretty good track record of predicting future talent (even if we say so ourselves) so make sure you keep an eye on our aptly labelled ‘new heroes of design’. read the feature on page 52.

As usual,the design Manual is packed to the rafters with invaluable industry advice – including how to become more employable as a designer, no matter what your current position or job title is. And if you’re looking for your first job, turn to page 66 where we’ve interviewed some top creative professionals – including Wired’s art director – on what they look for in a portfolio. finally, Cs6 is upon us, and although I know not all of you will be upgrading instantly, we’ve got it and decided to bring you some tutorials on the new features. see the full Creative skills listing on page 82. oh, and don’t forget to check out our website at www.computerarts.co.uk for a daily dose of design inspiration.

Cheers, Rob Carney Editor rob@computerarts.co.uk twitter.com/computerarts facebook.com/computerarts

subscribe at www.computerarts.co.uk/shop or see page 65

Computer Arts June 2012

Opinion Edi Inderbitzin

Illustration: Constanze Moll, www.constanzemoll.com

28

‘LEt’s fIght MEdIoCrIty’ If a brand wants results that it’s never seen before,it needs to do something that it’s never done before.Exploring new avenues might scare the client,but a good idea can take a brand somewhere it’s never been,and gives you a better shot at doing some truly amazing work. these days there are two kinds of agencies: the ones that make advertising and the ones that make communication.

I’ve worked at some good agencies, on some good accounts.

And I’ve had the opportunity to work at some great agencies with some great people. there is a difference. remember those days when you sat down in the kitchen and your parents asked how your day was? that was communication. you discussed the school system; you fought with your parents. But you had a discussion. It was two-way.

If you have parents like the ones I have, they try to help you and, if possible, they open your mind to new ways of thinking and interacting. some brands have made an effort to interact and communicate with consumers in new ways. to use an analogy: they no longer stand on a street corner and scream at consumers. they don’t just want to sell a product. they want to sell a brand, a feeling, an image and an idea. they’ve stopped their shouting and opened a dialogue.

It can be more difficult to reach consumers today.

Nobody actually likes advertising. our competition is other

Computer Arts June 2012

forms of entertainment like movies, tV, games, art, music – any content that people are trying to experience instead of being force-fed advertising. People want to have nice experiences, they want to play, they want to talk with – not at – and they want to be amazed by nice, respected and well-done communication.

And that is advertising’s saviour.

When I’m at home, I have my computer running. facebook is always beeping, people on twitter tell me about the news from around the world, my iPad gives me new options to find and read news, and the tV is playing my favourite show.

I’m sure younger audiences do even more at the same time. here’s where a brand can communicate and give us something interesting. Is traditional advertising utilising borrowed interest from a celebrity enough? that might work in some cases. however, I don’t think future generations will be persuaded unless it’s entertaining. they have so much more they can do – why spend the time on something boring? But how can a brand communicate to us without being boring?

Let’s take Nike+ as an example. Nike+ was developed by an agency that believes there are better ways to communicate with an audience. It developed an app that lets you experience the brand in a positive way. But it also found a way to make games with that application. And while you are running against a friend or even by yourself, you are interacting with the brand in a positive way. you will remember that brand. And next time you see a shoe or someone talks to you about Nike, you remember that brand. In my opinion this is one of the best examples of a brand actively communicating with an audience. yes, Nike has to sell shoes, and yes, it has tV commercials. yet it explores new ways of communication. that is where great agencies stand out. they help their clients to come up with new ways to speak with consumers. Instead of giving the client what they want, they give the client what they need. A good relationship between client and agency is one where they challenge each other. there should be tension.

Just like dating. And if everything works out, the client has more to spend on advertising and the agency has awards it can brag about. the less timid a brand is, the more it stands out. technology brings new opportunities for everybody. Is there a way to change the way we communicate? the way agencies work? the way creatives work? yes. this industry was built by people who believed in something – people with passion. Let’s remember that. Let’s be passionate and let’s fight mediocrity.

Let’s stand up and fight. Let’s sell this shit! Is it a pen? Be passionate about the freakin’ pen – make the pen awesome.

Change the pen and make the pen better. Make yourself better.

Make the work better. Make communication better.

A multi-award-winning, multi-lingual art director and graphic designer, Edi Inderbitzin spent three years in Hamburg at Grabarz & Partner, and took a creative sabbatical at the Miami Ad School Europe where he interned at Saatchi & Saatchi Stockholm, CP+B Boulder and Y&R NY before moving to Detroit. www.edi-inderbitzin.com

www.computerarts.co.uk

33

The D&AD’s job-winning ways to...

Make yourself more employable

INDUSTRY SKILLS vital know-how for your daily design work

1 Energy Employers look for electricity.they want to see a twitchiness to learn, a desire to create new things and the ability to transfer your energy in some way – through your personality, through your work and so on. A lot of young people are scared when they arrive for an interview. But being boring kills it, so find the things you love, and learn as much about them as possible so you can be engaging when you talk about them. Continued

subscribe at www.computerarts.co.uk/shop or see page 65

Computer Arts June 2012

34

2 Anthropology Being excited, amused or intrigued by human behaviour will give you an insight into how people interact with the world, and that can be integral to success as a creative. getting excited by how people behave at gigs or football matches, or how they move through a particular space, will give you an insight into how we navigate through the world in groups. drawing from life experience always helps you be a better designer.

3 Interaction

7 Appreciate both art and copy

5 Technology versus technology Being optimistic about the possibilities of technology, but staying skeptical about its limits, will help create work that breaks down barriers. People who push tech are the ones who do new things.you don’t have to be a developer or coder to be brilliant in digital – often people have a friend or colleague who can help. But having an understanding of the culture of code – that sense of breaking things to remake them – will enable you to push the boundaries and create new ideas.

the traditional silos of art director or copy writer might be defunct, but having a point of view on aesthetics is vital. Creative businesses thrive on flare:flare in words, flare in visuals. A taste for both and a love of good design will get you far.

All illustrations by sophy hollington www.sophy hollington.com

Employers in the creative industries often look for people who think about systems in the broadest sense. digital consists of input and outputs, which is a bit like cause and effect. Understanding how people interact with each other is just as important as understanding how they interact with a cash machine. What happens next? What happens if I push this button? What happens if I say it like this?

8 Prototypers 4 Curiosity Be interested in lots of different things: how they work;how they move;their nature. An investigative attitude is vital – why is it doing it like that? Why is it there? this is not just an interest in mechanics, however:chemical, visceral or emotional responses to things can inform your work and practice just as effectively.

Computer Arts June 2012

6 Shallow passion versus deep passion Being an authority on 19th century french literature is useful, but having a knowledge of all sorts of different things is equally important. Creativity is about breadth, so the more things you’re aware of, the more references you’ll have and the more likely you are to spot an unlikely connection.

Employers aren’t looking for perfect answers, particularly from someone starting out.they’re looking for the potential to deliver those answers in the future. People with a toolbox of skills are often better at solving problems, and if you’ve executed your ideas – even imperfectly – it makes you better at explaining them, which helps sell them.

It doesn’t matter if it’s done in After Effects or Powerpoint or carved out of balsa wood, people who make things break them in the process, and learn more. Employers like people who can solve their own problems.

www.computerarts.co.uk

The design manual Become more employable

35

The employer’s view How to get noticed

D&aD ceo tim lindsay explains how to stand out from the crowd and win your dream job not a paper one.Very occasionally a second look changes one’s mind, but not often enough to encourage one to make the effort.

CA:What’s more important:knowledge and skill,or passion and raw talent?

TL:skill, passion and raw talent – that’s the stuff that can’t be taught.

9 Northern industry

CA:How important is it that an interviewee ‘fits’ into an organisation personality-wise,and how do you decide that they’re the right fit at interview?

TL:‘fit’ is a funny thing.you want people who challenge the status quo, but constructively. organisations have to adapt constantly and people have to agitate for change. I like agitators.

Putting the hours in, especially in design, is the best way to get really good. there’s truth in the adage that 10,000 hours will make you brilliant, and if you maintain a good work ethic, it will really show in the quality of your work. If you want a job that is also your hobby, put the time in and you’ll soon shine.

Tim Lindsay is CEO of D&AD,former chairman of Publicis UK,and former president of TBWA UK and Ireland.He has over 30 years’ experience working in advertising for an impressive line-up of international agencies,and has seen more than a few CVs in his time. www.dandad.org Computer Arts:You see hundreds of CVs. How do you decide who to interview?

Tim Lindsay:I look for something, anything, that’s original. do something that – without being cheesy, rude or crude – gets you noticed. Be relevant, clever, funny, cool.that, and have a brilliant degree.

10 Good shoes People think they’re making a statement with their t-shirt, but really the shoes say everything. remember that. d&Ad New Blood presents the work of graduates in graphic design, visual communication, advertising, digital media, illustration, photography and other commercial creative arts. see www.dandad.org/talent/new-blood

subscribe at www.computerarts.co.uk/shop or see page 65

CA:What mistakes do you see?

TL:the biggest mistake is to think any way of getting noticed is oK. It’s not. someone once attached their CV to a bag of water with a goldfish in it, with a note that said: ‘I want to be a small fish in your big pool’.

Not good, though the goldfish came home with me and lived for five years.

CA:A candidate who looks great on paper interviews poorly.How do you react?

TL:the door, I’m afraid. It’s all about the ability to make a personal impression,

CA:You’ve finished asking the candidate your questions – now it’s their turn.What kind of things should they ask? And what do you think their questions tell you?

TL: they should ask questions that make the interviewer think – not about stuff they could have researched beforehand.‘What big changes do you foresee for the industry over the next three to five years?’ is good. ‘how many people work here?’ is bad.

CA:A potentially great candidate turns up late for interview.How do you react?

TL:It depends entirely on what the reason was and how they handle it. It’s not a great start though...

CA:Suit and tie or T-shirt and shorts?

How important is it to look the part?

Is it better to dress conservatively than try to be too casual or flash?

TL:Clothes don’t really matter much.

But you’re being interviewed for a position in a business that has clients, partners, suppliers and existing staff, so obviously you do a little bit of research and dress appropriately. Not in slavish imitation;just sensibly and politely.‘Modern business’ is a good guideline. When you’ve been successful, you can wear what you like.

Computer Arts June 2012