Ecstasy Magazine

ISSUE 1 ECSTASY 1 JUNE 2012

Articles

uk £5 usD $10 EUR €6

CREATE A DIGITAL PAPER SCULPTURE in photoshop

Pick me up exhibition

COMPOSE RETRo GRAPHICS IN ILLUSTRATOR LAYER VECTOR GRAPHICS DesIgn A STRIKING EXHIBITION POSTER IN INDESIGN PUBLISH IPAD MAGAZINES WITH INDESIGN

www.ecstasymagazine.com

1

contents

8

14

N 1 o

Featured 4

4 34

44

18

28

Pick Me Up Exhibition

8

Matthew The Horse

18

Phil WrigglesWorth

28

Depth of field Photoshop turorial

40

Compose retro graphics in illustrator

14

Mimi Leaung

22

Pick Me Up Showcase

34

Create a digital paper sculpture using Photoshop

44

Layering vetcor graphics tutorial

50

Create a striking exhibition poster with inDesign

56

How to publish Ipad magazines

40

Creative Director Sebatstian Luff Executive Editor Sebatstian Luff Associate Publisher Sebatstian Luff

56

50

ECSTASY D

2

E

S

I

G

N

M

A

G

A

Z

INE 3

Pick Me Up, the UK’s first annual contemporary graphic art fair and festival, celebrating graphic arts in all its forms, returns for its biggest edition yet this spri ng. Open from 22 March to 1 April, the fair will showcase the very best illustrators, graphic novelists, cartoonists, and graphic designers from around the UK and the world with original works and prints available to purchase from just £10.

A selection of the most exciting graphic art collectives and galleries have been invited to occupy Somerset House’s Embankment Galleries to create unique spaces and installations, including Nelly Duff, the London gallery that represents among others Barack Obama’s favourite street artist Ben Eine and the fine line drawings of Jessica Albarn, sister to Blur’s Damon Albarn.

Pick Me Up exhibition 4

Ecstasy sends our cheif editor Sebastian Luff to the latest Pick Me Up exhibition at Somerset House.

The fair offers the opportunity to meet the artists, watch them work andget involved, with a lively events programme ranging from a children’s illustration weekend to a portrait booth with Guardian regulars Modern Toss, workshops on comics and cartooning from Pick Me Up favourites NoBrow and SelfMadeHero and a Paper Toy Workshop with Creative Review magazine.

5

New this year will be a space dedicated to workshops, live music, spoken word and live drawing with a bar open every evening.This year, Pick Me Up’s artists in residence will be the London based illustration collective Peepshow, who will present their Museum of Objects and Origins and invite a rosta of special guests, as well as running workshops throughout the fair.

Also part of the fair is Pick Me Up Selects, an exhibition of 20 specially selected international rising stars of the graphic arts world including Riikka Sormunen, Mimi Leung and Zim and Zou. Each will be producing new, exclusive work to see and buy.

Other highlights include East London based gallery Nelly Duff’s pop-up zoo of animal characters made from a jungle of newly commissioned prints and independent publishing champions Beach London’s selection of prints and range of limited edition and smallpress artists’ books and zines displayed in a vintage library setting.

As well as providing a platform for emerging talent, Daily Specials will bring the finest names in illustration to the heart of the gallery on a daily basis including legendary graphic artist George Hardie, who was responsible for many cult 60s and 70s album covers such as Led Zepplin’s debut and Pink Floyd’s Dark Side of The Moon. Other guests will include Mr Bingo, character designer James Jarvis, children’s book illustrators Bruce Ingman and Marion Deuchars, who will run her Art Factory workshop for families at the fair.

There will be international contributions from Netherlands gallery Ship of Fools and Spanish duo Cachetejack, as well as a special focus on talent from the South West of England from SOMA gallery and Scrumping with Puck Studio. With lots more workshops and weekend events, as well as talks, performances, DJs and portfolio reviews, the 11 day fair promises to be the most exciting yet.

MATTHEW THE HORSE Matthew The Horse is not a horse; he is in fact a regular man who lives in Leeds. Or, perhaps he’s not that regular of a man considering that he says that he’s a horse, but really who am I to nitpick when he draws such excellent work! I’m pretty much in love with everything in his portfolioand his work has such a great sense of fun and energy about it.

His use of line and shape creates images that feel fresh and fun and there is something almost psychedelic in the way he draws these weird and wonderful characters. His images are at times quirky, often odd and sometime hilarious and they’re all the better for it.

8

9

We adore the work on Matthew the Horse’s wall. Every piece is overflowing with humour and color and personality. Just looking at the collection on the wall made us effervescent.

The work is truly funny. It has sweet elements with rounded faces, expressive gestures, and very cleaver lay outs that read extremely well.

The combination of his line work, characters and compositions is perfection. Matthew the Horse inspires a gut reaction similar to watching the Muppet Show, and we LOVE the Muppet Show.

Matthew the Horse’s limited edition artwork for Ecstasy Magazine.

Matthew Hodson aka Matthew The Horse is an illustrator from Leeds, UK. And no, he is not a horse, he is a reglar guy.

His works have been featured in different papers and magazines like Grafik Magazine and Dazed Digital. His works are fun and fresh, and sometimes little odd, which makes them even better.

First question of course, why Matthew the Horse?

I think Matthew is a good name for a horse.

Why and when did you start making art?

When I realised it was a good way to communicate ideas. I did a lot of showing off as a kid but didn’t fancy performing as a career. I was probably about 15 years old.

You do illustrations, ever thought about changing to another art form?

I think that a good illustration practice is born from a broader interest in art. I also write daft poems, teach and make artwork and clothing which is all part of a wider practice.

12

Where do you draw your inspiration from? How do you come up with the ideas/ concepts for your works?

I day dream when I can. I try to make work that’s silly so I’m inspired by silliness. Mostly my ideas begin as sketchbook drawings which I then refine.

Those moments where you’re being really uninhibited with people you feel cofortable are the moments I try to respond to. Put on a hat and eat a sausage.

Whom you think should we interview next and why?

Mike Dolan is a super talent.

Check out his ipad stuff! Lovely guy and an incredible wealth of illustration knowledge.

What is your philosophy of life?

Have a go. Keep going. Stay free.

Think of others. Knob about.

How does a usual workday of Matthew Hodson look like? Are you still working part time as a tutor?

I’m teaching more than ever and doing some training so my art time is reduced to windows of doing. Along with networking/ blogging and that crazy stuff I find work comes in waves. I spend more time in the tackle shop than out at sea fishing.

13

14 15

Mimi has exhibited in solo shows in London and Hong Kong, between which she currently shares her work and life.

In 2008 she was shortlisted in Vice’s Creative 30 Competition and in May 2009 she performed a night of live drawing for Heavy Pencil at the ICA London.

The LĂźrzer Archive lists her as one of 200 Best Illustrators Worldwide.

Her work has featured in Vice magazine, Dazed and Confused, Time Out (HK), MiLK and The Guardian.

Mimi Leung is an artist and illustrator based in Melbourne.She has exhibited internationally and her images have been used by groups like AOL, Nike and Vice magazine.

MIMI LEUNG

Mimi Leung about the Creative 30 project, her inspirations and that Kanye West Blog!

Hello Mimi! Could you describe to our our readers what you do and how you got started?

I am an illustrator and artist. I make commissioned paintings/drawings for various clients as well produce artwork for my own exhibitions. I’ve always loved drawing and painting, I spent most of my spare time when I was younger drawing and looking at things. When it came to choosing a degree I just decided to go with my passion and study art.

Who or what would you say are your inspirations? I love cartoons and anime, japanese manga and am a big fan of the German Expressionist painters. I also really like ukiyo-e prints and old school etchings. These all feed into my work, but I have to say when making work I am most influenced by my surroundings and the people around me, also I always listen to music to get inspiration. Currently it is Iggy Pop. I noticed you got some love from Kanye West on his blog! How crazy was it finding that out? Yeah, that was pretty cool but I guess if you’re Mr K West you get a whole bunch of people writing your blog for you. If he saw my work and liked it then that’s awesome. Oh though they got my name wrong in the title and all the commenters thought I was a man!

That was weird.

Lastly what does the future hold for you? I’m trying to get a solo show in london for next year. I’m working on more canvas pieces and some painted objects. i’m trying to get some fullsize shop mannequins for the show, but we’ll have to see what happens with that. currently I have a canvas up in a group show at the macbeth in hoxton with some friends I studied with a few years ago. I am also in the middle of organising a show in Hong Kong for next September.

PHIL W RIG G LE S WO R TH 18

Phil Wrigglesworth has taken his work to a new level with his love for bright and hectic fight scenes.Look if you dare, they are getting more and more mental!

Blue haired men, giant bears, and tennis being played on the moon, Phil’s mad world caught our BlogAndBuySale eye recently and we just can’t get enough now. He has a huge collection of paintings on his portfolio site for with a cast of fun characters for you to meet.

So much so that Phil decided to do more of his crazy fight scenes.

Since his puzzle book feature Phil has whipped up a ‘Water Fight’, ‘Food Fight’, ‘Pillow Fight’.

19

SHOWCASE This next feature involves various graphic artists that were on display at this years Pick me up exhibition. Admire the artwork or take inspiration for your own designs.

Whatever you do, enjoy the bold and creative design work on show.

From far left: Sac Magique Zeloot Martin Nicolausson Time McDonogh (Left) Zim & Zou Dominic Owen (Above)

22

23

From far left (Top row down) : Yuko Michishita Niki Pilkington Sarah Beetson Riikka Sormunen Kristjana S Williams (Right)

Tutorials

Photoshop

Depth of field Photoshop turorial Create a digital paper sculpture

Illustrator

Design retro graphics in illustrator Laying vecor graphics tutorial

Indesign

Create a striking exhibition poster How to publish Ipad magazines

26

27

01 Start by creating a new Photoshop document with a black background and design some lettering. I like to mix bold typefaces with light ones and serifs with no serifs. When you’re happy, convert it to a shape

by Ctrl/right-clicking on the layer and selecting Convert to Shape.

DEPTH OF FIELD IN PHOTOSHOP

Print finishes like UV coating and spot colours are an excellent way to add dimension to your images. Over the following pages, I’ll show you how to prepare an illustration to be printed with finishes like these by using spot channels.

We’ll focus on UV coating, which is a type of varnish that gives a glossy finish to printed surfaces, and also on spot colours. We’ll use spot colours from Pantone, but the process can be applied to any print finishing you like, from metallic inks to varnishes.

28

Software Photoshop CS3 or later Time needed 1-2 hours Skills - Use spot channels - Prepare an image to be printed with special finishes - Use the Pen tool to create vector illustrations

02 With the Ellipse tool, draw a circle in the centre of the document, making sure it covers most of the lettering. Drag the layer to the top and change the blending mode to Soft Light. I used #ed3093 for its colour.

29

03 Now we can start creating new elements that will make the illustration more interesting. With the Pen tool, I created a smoke shape, coloured it with #e35577 and placed the layer just behind the lettering layers. 04 Now create more shapes. Here I made two circles, one of them in the top of the lettering. Don’t worry about hiding the lettering with shapes – that’s the objective. 05 The image is looking nice but everything still appears too flat. Using the Path Selection tool (A), select the black circle and Ctrl/right-click on it. Click on Make Selection and then hit OK. Now select the smoke shape and Ctrl/ right-click. Choose Make Selection again, but this time select Subtract. 06 Create a new layer, select

the Gradient tool with #e62c7c as the foreground colour and #000000 as the background colour, and create a gradient inside the selection. Try to make it look like a sphere by clicking in the top-right area and dragging it outside the selection. 07 Keep adding more shapes and details. I’ve created a white cloud and repeated step 06 with smaller circles so that I have different spheres floating around the illustration.08 Now we can start working on the spot colours. For this illustration I’m going to create two extra spot channels – one for the spot colour, and another one to apply a spot UV coating to achieve a glossy effect. 09 Select the smoke shape with the Path Selection tool, Ctrl/ right-click on it and choose Make Selection. Do the same on the lettering shape but in the Make Selection box choose Subtract from Selection.

Select the big circle we made in step 02, choose Make Selection and select Intersect with Selection. Do the same with the black circle from step 04 and select Subtract from Selection. 10 We also want the pink circle on the top to be printed with the spot colour so select it, right-click and select Make Selection, followed by Add to Selection. Now select the cloud shape that’s on top of it and go to Make Selection>Subtract from Selection. Repeat this process for any shape that’s on the top of the spot colour. In this case I still have two spheres blocking it, so Ctrl/rightclick on those layers and select Subtract Transparency Mask (Cmd/Ctrl+Alt).

30

31

11 Printing inks are translucent, so we don’t want to lay any colours over each other. Select white as your foreground Colour and go to Layer>New Fill Layer>Solid Color. You should have an image that looks similar to the one above by now. Don’t worry about it being white: it will be printed with your spot colour. 12 To create a new spot colour with the same selection, go to Channels, click on the drop-down menu and select New Spot Channel. In the dialog box, click on Color and select the Pantone you want to be printed. I opted for Pantone 213 C. You can change the solidity to 100% to see the spot colour. 13 Now that we have the spot colour applied to our illustration, we can start preparing the spot UV coating. This applies a nice glossy coat to your illustration and works just like the spot colour. 14 Select the lettering and choose Make Selection. Don’t forget to subtract any shape that’s on top of it from the selection. Now go to Channels, click on the drop-down arrow and select New Spot Channel. Pick any colour – it’s not important since the colour won’t be used – and change the channel name to ‘Spot UV’.

32

33

01 To give yourself a bit of direction, start by sketching out some different geometric designs on paper. I tend to use my sketches loosely, letting my designs evolve as I go along. In this case, I decide to incorporate elements from all of my initial sketches, including the stream effect seen here.

Create a digital paper sculpture using Photoshop In this tutorial, we’ll take a close look at how to plan and gather imagery for use in an abstract manipulation. I find that this design process is playful by nature and generally encourages a large degree of experimentation as you go along.

It’s always interesting to see what can be created from limited resources. In this particular case, we’re talking about some blank sheets of coloured paper. This is when things start to become abstracted and geometric shapes are everything. I’ll show you how to transform your boring sheets of paper for the better, and how to effectively bring them into the digital realm.

The inspiration for this paper-infused design style comes from a range of work, including origami, physical paper sculptures and mixed-media installations.

Software Photoshop CS5 Time needed 6-8 hours Skills - Combining paper and digital tools - Effective use of layer styles - Managing a layer-intensive project

34

02 Once you’re ready to move on, source a selection of coloured card or paper. You can either carefully choose colours from your favourite art supplier, or find a cheap pack from your local stationers. The first option is preferable, but both are suitable.

You can always alter the colours in Photoshop if they aren’t quite coherent.

03 Once you’ve obtained some paper, the next step is to create a small selection of geometric forms. For this part, you don’t need to use any glue: all you need to do is fold. These forms don’t need to be seamless; they just need to look interesting. Find a suitable background and then photograph your creations from different angles.

04 For this next step, you may need to do a little research. Cut out several square pieces of a paper and fold them into Sonobe units. These fun little origami modules can be linked together to form much larger shapes and forms

35

09 Once you’ve cut everything out, you can start dragging things into your main project file. If you find that there isn’t enough colour diversity among your paper forms, you can easily solve this within Photoshop. With your layer selected, choose the Colour Overlay option found under the Styles menus in the Layers palette.

05 Once your units are ready, link them together in whichever way you prefer. I decide to go with a triangular configuration, making sure that I leave a gap for where the paper stream will gush outward. Before moving on to the next step, take a photograph of the form on a highcontrast background.

10 Import your creation and cut it out as before. Position it over the sphere and create two copies.

Select these two new layers and press Ctrl/Cmd+G to group them.

Use Free Transform to scale them down and then rotate the second copy about 45 degrees.

Set the blending mode to Linear Burn on both layers, then select the group folder and change the blending mode to Normal.

06 Gather several coloured sheets of paper and attack them with a hole puncher. Empty the discs onto your scanner and arrange them as you see fit. Place a high-contrast piece of card on top and scan at 300dpi or higher.

08 You need to spend some time cutting out each element, but since they’re fairly simple geometric shapes, you can save some time and use the Polygon Lasso tool (L). When you’ve made a selection around the object, hit Ctrl/Cmd+I to invert the selection, then press Backspace to delete the background.

36

07 Open Photoshop and create a 300dpi document in an RGB colour space. Select the layer and bring up the 3D panel. You now have a perfectly rendered and textured sphere, which will provide a nice contrast to the sharp, angular elements. Create a new document in the CMYK colour space, measuring 222mm by 300mm, then drag your sphere over.

11 Now it’s time to get creative with those polygonal shaped elements. Keep duplicating the layers, and slowly build up a nice varied flow stemming from the centre of the sphere. Mix up the colours and the sizes to keep the composition interesting. To give things more consistency and depth, apply drop shadows to every element.

12 Open up the scan featuring the punched discs. Select the Magic Wand tool (W) and make sure Contiguous is un-ticked.

Click anywhere in the dark area, then go to Refine Edge. From here you can make precise adjustments to the selection and experiment until you get the desired result. Once you’re happy with the selection, click OK and then press Backspace to delete the background.

37

13 Drag the image into your project and integrate it into the paper stream. The aim here is to pepper the composition slightly, trying not to overuse it. Again, remember to apply a drop shadow.

14 At this point I decide to desaturate the Sonobe element with a Hue/Saturation layer. Now that the main objects are in position, you need to finish building the paper stream up to the centre gap. Once completed, create a new layer and change the blending mode to Linear Burn. Paint a shadow at the back of the stream using a soft, low-opacity brush.

15 Add a layer mask to the Hue/ Saturation layer mentioned in the previous step. Select a black brush with a low opacity and lightly paint around the gap in the centre of the Sonobe element.

This will enable some of the original colour to show through, creating a slight illumination.

16 I always like to add a bunch of adjustment layers. These help achieve many different things, but most importantly they can bring the piece together. Add a black and white gradient map, set the blending mode to Overlay and lower Opacity/ Fill to around 50 per cent. You can then add a Colour Balance layer to tweak the tones slightly, or even a Selective Colour layer to alter things further.

38

39

In this tutorial, I’ll explain how to create a cool Tshirt graphic with a retro feel in just a few simple steps. Using Illustrator, we’ll form some simple vector shapes with the Pen tool and then add textures for a retro aesthetic.

We’ll also use the Pathfinder panel extensively, particularly the ‘Add to shape area’ and ‘Subtract from shape area’ commands. I’ll then walk through how to add interest with a limited colour panel.

Software Illustrator CS3 or later Time needed 3-6 hours Skills - Manipulate the Pen tool - Use strokes to produce unique results - Work with a limited palette

Retro Graphics in Illustrator

40

01 First of all, open T-shirt.ai from the support files: this will act as the background for your design. Build some geometric hand shapes in Illustrator using the Ellipse and Rounded Rectangle tools. The fingers are rounded rectangles that have been cut in half using the ‘Subtract from shape area’ command on the Pathfinder panel. The top shape will always subtract from the one below. When you’re happy, hit ‘Add to shape area’ on the Pathfinder panel to make the hand one big shape. Make sure that you select Make Compound Shape after you subtract or add, and then hit Expand. 02 Round off the areas where the digits join the hand by creating some curved shapes and hitting ‘Subtract from shape area’.

Next, duplicate the hand so that there’s another one below. Rotate it 180 degrees to make a rectangle area: this is where we’ll place the camera, as seen in the final image. 03 Using the Pen, Rectangle and Ellipse tools, create a range of geometric shapes. Then combine them to build up the image of a camera (or whatever you like). When you’re happy, fill in the shapes with colour. Notice how you can use the dark blue in the background as a third colour for some in-laid shapes.04 Select the Ellipse tool and create a circle just larger than the pupil. Click the dashed line option on the Stroke panel, and adjust the weight and dash values to form thin segments that go around the circle evenly.

In the Stroke panel, change ‘Align Stroke to Centre’ to ‘Align Stroke to Inside’. Next, select the shape and go to Object>Expand Appearance to change the selection from a dashed stroke to a shape. Use the ‘Add to shape area to join it together. 05 Open the vector_textures.ai file. Copy and paste the woodgrain texture over your T-shirt file, and scale and position it so that it fits over the camera appropriately. Now select both the wood grain and the shape you wish to subtract from.

41

06 Use the ‘Subtract from shape area’ command, select Make Compound Shape and hit Expand.

Head back to the vector_textures.ai file. Copy and paste the splatter shape over to your T-shirt file.

Scale and position it over the camera, and select both the splatter and some of the circles that make up the lens shape. Go to ‘Subtract from shape area’, select Make Compound Shape and hit Expand to knock out some splatter.

07 Let’s add some dimension to the camera without using a third colour, gradients or anything that will complicate the T-shirt printing process. Select the Pen tool and draw some shapes around the camera. Combine these using the ‘Add to shape area’ command (don’t forget to select Make Compound Shape and hit Expand).

08 Copy and paste the vector_textures.ai file over to your T-shirt and place it in the areas underneath the camera shape using Object>Arrange (paste it multiple times if needed). Combine your halftone shapes using the addition function. Now use the ‘Intersect shape areas’ command in the Pathfinder panel to cut what you want from the halftones.

Select both the camera dimension shape and the halftone shape, hit ‘Intersect shape areas’, choose Make Compound Shape, then Expand. Make it the colour of the shirt.

09 We need to add some texture to the hands. Combine both hands with the ‘Add to shape area’ command. Duplicate them and move the copies so that they offset the original hands. Paste and arrange the halftones so that they’re under the offset hands. Combine the halftone shapes and use the subtract tool to knock out the halftones with the duplicated hands. Now copy and paste the original hands in place. Arrange them so that they’re above the dots. Select the new hands and the remaining dots, and use the ‘Intersect shape areas’ command to reveal a shadow on the hands. Make the dots light blue.

10 Draw some rectangles for ‘arms’ and arrange them so they’re behind the camera. Now use the Pen tool to draw a shape that looks like a flash burst. Paste the halftone dots under the shape and use the ‘Intersect shape areas’ command to reveal a halftone flash burst. Lastly, delete some of the dots on the palm of the bottom hand and draw a rectangle to close the rounded parts of the hand. Use the ‘Add to shape area’ command to combine the hand and the rectangle. This hand now looks like the backside is facing forward. And you’re done.

42

43

01 First, create an outline for your portrait. Use the Pen tool to mark out the individual points, and the Convert Anchor Point tool to get your curves as smooth as you can. I’m working on an A3 document with the Stroke Weight at 0.5. Don’t feel as though your outline has to be perfect straight away – each object can be tweaked or manipulated at any time.

02 Once you’re happy with the general positioning of the outline, it’s important to make sure the strokes are expanded to avoid distortion if any size changes are made during the process. You can do this by selecting the stroke, then going to Object>Expand.

When this is done, get rid of the unattractive flat ends by removing points with the Delete Anchor Point tool.

Layering Vector Graphics Tom Mac reveals how to create a drip-effect portrait using Illustrator’s Pen tool and object layering techniques The portrait idea is as old as the hills, and in this competitive digital age it’s vital to add your own unique styles and twists to grab attention.

Software Illustrator CS3 or later Time needed 3-6 hours Skills - Manipulate the Pen tool - Use strokes to produce unique results - Work with a limited palette

44

In this tutorial I’ll walk you through how to create an unusual multi-layered, drip-effect portrait. We’ll cover the basics of the Pen tool, using a limited colour palette and effective layering techniques to create an original portrait. Once you’ve got the basics nailed, you can apply them to create complex, in-depth and individual-looking imagery.

03 What the image needs now is some darker areas.

Using the Pen tool, create solid fills of colour, adding details such as eyelashes. Try not to go too over the top with this by keeping an even balance of light and dark areas – you don’t want to swamp your image either way. Don’t forget that you can come back to these at any point to add, take away or manipulate as you please.

04 Now that the basic design is complete, it’s time to choose a colour palette. I’d suggest keeping this minimal. I’ve gone for one dark colour and four lighter variations of it. I’ve also chosen one bright colour to complement the duller ones. Once these are selected, lock the layer you’ve been working on.

Create a new layer and, using the Pen tool, create a colour fill underneath the image. It always helps to name your layers.

45

46

05 It’s now time to start adding more detailed shading, using the remaining tones of colour.

Lock off the layer you’re on and create a new one in-between the two. From here you’re free to really build up your shading without interrupting anything else on the canvas. Try to keep the shapes fluid with those that already exist.

You can position the blocks of colour above and below each other by Arrange>Send Backward/ Bring Forward (or Ctrl/Cmd+[/].

09 Once all the drips are in place, it’s a good idea to start connecting some of the shading together in the same direction as the drips, making it look more like a flowing liquid. This also clears up some of the large areas of space. Start to think about finalising the face, making sure the drips are evenly spread and there are no large areas of blank space to attract attention.

06 The drips are very simple to create. With the Pen tool, make a three-point triangle, then pull the middle point out with the Convert Anchor Point tool and push the remaining two points inwards to create the curves. Be as experimental as you want with this, adding more points to manipulate the shape. Alternatively, use a tablet – this will give a more freehand feel. I’ve used a combination of the two here.

10 Now start thinking about the hair. Make an outline using the same stroke weight you began with on the face. It’s a good idea to begin with a single outline and then work in some further areas of detail, creating sections within that space. Try to stay consistent with your use of filled and blank areas.

07 To keep a fluid feel, the drips must work with the shading perfectly, creating a smooth joining curve. Add more Bezier points to the base of each drip to achieve this, if you have to.

11 Once the hair structure is in place, it’s time to fill it with lots of detail. Using the Pen tool – this should be set to No Fill and a light stroke – begin to add two-point lines, flowing in the direction you feel the hair going. Try to mix it up a bit by switching direction every so often or intertwining lines. This is a timeconsuming process, but the result makes it worthwhile

08 Now it’s time to go crazy with the drips. Create a new top layer and begin to overlay them onto the different shades. For the best results, each drip should be created individually. However, you can duplicate each one if you wish, making sure you merge them correctly with the line they’ll be sitting on.

12 Now the hair needs to be coloured. With the same layering technique you used to colour the face, start to add blocks of the brighter hue into each large section of hair. Once this is complete, turn each block into a colour gradient using two variations of the shade. This isn’t vital, but the two tones coming through the mesh of hair add a nice feel to the overall image.

47

13 It’s a good idea to work your way around the outline of the hair, adding extra detail as you go.

Create individual strands of hair using the Pen tool and curve them around the structure. Use a mixture of solid fills and fine strokes.

14 The portrait is almost complete, so sit back and have a critical look. If there are any areas that don’t match the overall style, amend them. Try to look for areas with less detail or lots of blank space that might stick out, then begin to think about a solid fill backdrop that will complement your image.

15 Once you’re happy with your image, I would recommend unlocking all the layers and selecting the entire picture. From here, expand it as you did at the start and group it. When this is done you can take it into Photoshop as a smart object to finalise your composition.

Push The Boundar i es PUSH THE BOUNDARIES.

48

49

Create a Striking Exhibition Poster with InDesign

In this tutorial I’ll run through the creation of a poster for an imaginary exhibition called Sirens, covering the creation of a simple logotype and grid, use of typography, image editing and pattern creation, and how all of these elements can easily be managed and rolled out across a range of collateral.

Software InDesign, Illustrator and Photoshop CS3 or later Time needed 3-4 hours Skills - Create a simple logotype design - Work with type and grids - Work with asset management - Pattern creation in Illustrator

50

01 Begin by setting up a new document in InDesign. Select A3 as the page size and uncheck Facing Pages as we’re not creating a publication. We’re making everything from scratch, so I set the column number to one and everything else to zero because I’d like the design to inform the grid that we set up later.

02 First, let’s create a simple logotype. I chose Futura because it’s a contemporary sans serif that isn’t too overpowering, and I set the tracking to 500 in Optical mode.

To add some character, draw some simple 0.3 weight lines and paste them between each letter in the text frame. As they’re pasted within the text frame, it’s possible to manually kern the lines as well as the letters. Once satisfied, convert the text to outlines and group all the objects.

03 Now that we’ve created our first design element, we can begin setting up a library. In InDesign, go to File>New>Library, name it and save it in a suitable location.

Now simply drag our grouped logotype into the library and, if you wish, you can double-click it to give it a name and a description.

For now we can delete the logotype from our main document and simply drag it from the library later when we need it.

51

04 Now begin setting up the grid by navigating to Layout>Margins and Columns. Set the right-hand and top margins to 40mm – wider than the 15mm inside and bottom margins, as we want the poster to have a layered look. Drag a ruler guide to the righthand margin, hit Ctrl/Cmd+Alt/Opt+U to step and repeat the guide, and set the horizontal offset to -40mm. repeat this for the top margin, setting the vertical offset to +40mm.

05 I always like to work in grayscale initially, so set up some grey swatches and use the rectangle Frame tool to block out the composition. At this stage we can drag our logotype back in and position it flush against the right-hand margin. It’s also a good idea to organise your layers at this stage.

I’ve chosen to set up background, graphics, text and logotype layers for all of the separate elements.

06 I then imported a text file – in this case, a list of designers who will feature in the exhibition. To keep the overall look and feel simple and consistent, choose Futura again to mirror the logotype, but this time reduce the tracking to 300 to increase the text’s legibility at the much smaller 12pt text size.

Select the All Caps command and set the leading to 16pt

07 Now that we’ve decided on a style for the body copy of the poster, we can set up our baseline grid based on those values. go to Preference> grids. Set the grid to start at 40mm – the same as our top margin – and set it to increment every 16pt (the same as the leading of our text). Uncheck the ‘grids in Back’ option so that the grid is always visible, and in the Paragraph panel, select the ‘Align to Baseline grid’ option.

52

08 It’s always wise to create style sheets for any text, regardless of whether it’s a one-page document or not. Simply select some of the text and, in the Paragraph Styles panel, select New Paragraph Style from the drop-down menu in the top-right. The beauty of style sheets is that if at any point we want to adjust the type, we can go back into the style sheet, select redefine Style and it will update all of the type assigned to that style.

09 Now to get a little more creative and start fleshing out the poster. Source an interesting texture to be used as part of the background – in this case I’ve used some old parchment paper.

In Photoshop, convert it to grayscale, hit Ctrl/Cmd+I to invert it, increase the contrast and save it out as a grayscale JPeg.

53

10 In InDesign, select our central rectangle shape and, using Ctrl/ Cmd+D, place our grayscale image within the frame and position it to fill the frame. The beauty of using grayscale images is that we’re able to colour them directly within InDesign. Set up two new contrasting colour swatches and, using the Direct Selection tool, colour the background of the image. Select the contents of the frame using the Direct Selection tool and colour the foreground in a contrasting colour.

11 Now to create a vector pattern to contrast with the textured paper. Setup an A3 document in Illustrator and begin to draw some very simple shapes using the drawing tools. For the purposes of this poster we want to keep it fairly sparse. Now drag your shapes into the Swatches panel to make it a pattern swatch. Delete the original shapes, draw a large rectangle to fill the whole A3 document, choose the pattern swatch as the fill option and save it.

12 Back in our main document, select the background rectangle and fill it with one of the two colour swatches we created earlier. Now place the pattern file within the frame. As it’s a vector file we can resize it within InDesign to whatever size we want. Use the Direct Selection tool to select the pattern and enter 300% in the X and Y scale fields at the top.

13 It’s time to source our main image now – as our imaginary exhibition is called Sirens, I want an image that fits. In an ideal world we’d shoot our own model, but for this tutorial I’m using a stock photo. Scour image libraries and try out the low-res preview files in the document until you’re satisfied that you’ve found a good fit.

54

14 Following on with the two-tone theme, save the image as grayscale, place it in the foreground frame and colour it two different tints of purple. To carry the image into the background, duplicate the background pattern frame using step and repeat, copy the image from the foreground frame, hit Ctrl/Cmd+Alt/ Opt+V to paste the image into the background frame, and it will continue seamlessly.

Now colour this in two contrasting colours.

15 I decided that the black isn’t punchy enough, so I coloured all the text white and the main Sirens logotype a slightly off-yellow colour to contrast with the two-tone colour scheme. I also added some final details, such as the date and address of the exhibition. Once you’re happy with everything, add all of these elements to your InDesign library. Now we are done.

55

01 From there you can preview your content on the iPad using the free Adobe Digital Content Preview Tool. If you want to monetize your content then you could check Adobe’s hosted solutions. In order to do this tutorial you’ll need to download and install the Digital Publishing Suite components from http://labs. adobe.com. Since we’re targeting the iPad, we need to create a document that’s the right size. Go to the File>New>Document menu and choose Web for the Intent, 1024×768 for Page Size, and click the Portrait icon for Orientation.

02 Typically, we design longer documents in multiple InDesign files for ease of collaboration, and we’re going to follow that same procedure here even if we’re the only ones laying out this publication. Each section or article of your digital publication is called a stack, and each stack is a separate InDesign document. Our first stack will be the cover. You can design the cover anyway that you like using standard InDesign techniques for image placement and fonts.

Save it with whatever name you want but make sure the name ends in “_v.indd” (e.g., “cover_v.indd”).

How to Publish IPad Magazines 56

Adobe just took the wraps off the long-awaited Digital Publishing Suite that powers the Wired magazine and The New Yorker iPad apps. With InDesign CS5 at the core, you can now author your layouts, including interactive content, and export it out in the new .issue format.

03 If you want your readers to be able to view your publication horizontally, then you’ll need to actually build the horizontal version. After you create and save your vertical cover in Step 2, go to File>Save As and name the file the same except end the name with “_h.indd” (e.g., “cover_h.indd”).

Now go to Layout>Layout Adjustment, turn on Enable Layout Adjustment, and click OK. Then, go to File>Document Setup and change the Orientation to Landscape.You may need to tweak a few things to get it to look perfect.

57

04 At this point you would create new InDesign documents for the subsequent stacks in your publication. You’ll need both vertical and horizontal versions of each document. The stacks themselves can be multiple pages, such as longer articles.

07 In order to place a video in your digital publication for the iPad, your video will need to be an MP4 with H.264 encoding. Place your video in a folder called “OverlayResources” in the stack subfolder that you wish to use the video in. Switch to the Video tab of the Interactive Overlay Creator and click the Browse button next to the URL field. Enter the Width and Height of your video in pixels. If you want your video to play full screen, enable the Play Full Screen checkbox. Click Export after you make your setting choices, and save it to the same folder.

08 Now go back to the InDesign document in which you want to place the SWF version of your video that you exported in Step 7. Go to File>Place, navigate to the SWF file, click the Open button, and click on your document where you want your video.

05 In order for the Bundler to successfully import your stacks and bundle them together, you have to create a very specific folder structure for your InDesign files. Inside the main folder, include a subfolder for each article. Inside the article folder, include subfolders for both the vertical and horizontal versions of the file. Each of these subfolders will contain the InDesign file, link folder, document font folder, etc. for that stack.

06 If you want to go beyond standard text and graphics, you can have two types of interactive content.

You can use the standard navigation elements in InDesign, such as buttons, or you can use the Adobe Interactive Overlay Creator to create additional content such as panoramas, 360° views, audio, video, image pans, etc. Launch the Adobe Interactive Overlay Creator that you downloaded and installed from Adobe Labs.

58

09 At this point we want our readers to be able to see an image for the video. Although you can choose a frame from the video to use as the poster frame, it’s probably best to design an image that lets the reader know that it’s a video (we’re using an image that has a play icon on it). While your video is selected, bring up the Media panel (Window>Interactive>Media). In the Media panel, select Choose Image from the Poster drop-down menu, navigate to the image that you designed to be the poster frame, and click Open.

10 Each stack must have a TOC thumbnail. This thumbnail has to be a 70×70 pixel PNG file and saved in the root level of each stack folder. With your image open in Photoshop, go to File>Save for Web & Devices. Select PNG-24 in the Preset drop-down menu at the top-right, and set the width and height to 70×70 pixels in the Image Size section. Click Save, navigate to the appropriate stack folder, select Images Only from the Format drop-down menu, and click the Save button.

59

11 After you’ve created all your stacks and interactive content, it’s time to open your issue in the Adobe Digital Content Bundler that you downloaded from Adobe Labs. Click the New button and point to your main issue folder without actually going inside of it and click the Select button. Once your issue has been imported, you’ll need to add in the appropriate title information.

12 Once you have your issue details inserted, you can now click the Export Issue button to export out your .issue file to a folder of your choice. Be sure to change the Issue option to Single File in the Export Options dialog.

13 In order to view your .issue file on your iPad, you’ll need to install the free Adobe Digital Content Preview Tool for iPad on your device. You can get this from the Apple App Store. Once you have it installed, plug in your iPad via the USB cable and launch iTunes. Click on the Apps tab and click on Adobe Preview. Now you can click the Add button, locate your .issue file, and sync it directly to your iPad.

14 At this point you can now launch the Adobe Digital Content Preview Tool app on your iPad and your issue should be there to view. This will allow you to view and test all of your stacks and interactivity.

60

62

63

64