Quantcast
Channel: Envato Tuts+ Design & Illustration
Viewing all articles
Browse latest Browse all 8958

How to Design a Bollywood-Inspired Poster to Celebrate Hindu New Year

$
0
0
Final product image
What You'll Be Creating

Hindus welcome in the new year at the beginning of spring. Although different regions in India celebrate the event on slightly different dates, in 2016 this will fall around 8 April.

To celebrate this exciting event in the Hindu calendar, learn how to design this colorful poster. Inspired by the vibrant style of vintage Bollywood posters, and featuring an Indian classical dancer, it will be perfect for displaying or sharing with friends, family or neighbours on the big day.

You’ll need access to Adobe InDesign, Adobe Photoshop, and Adobe Illustrator for this tutorial.

If you’re looking for the perfect poster for Hindu New Year or another event, make sure to check out the huge range of stylish flyers and posters over on Envato Market.

Ready to get designing? Great! Let’s go...

1. What You’ll Need 

We’ll be creating the poster layout in Adobe InDesign, but we’ll also be doing some image editing in Adobe Photoshop and importing vectorised type from Adobe Illustrator.

You’ll also need to download the following images and font files:

Once you have your images downloaded and your fonts installed, we can get started putting the poster layout together.

2. Set Up the Poster in InDesign

Step 1

Open up Adobe InDesign and go to File > New > Document.

Set the Intent to Print, Pages to 1 and deselect Facing Pages. From the Page Size menu, choose A3.

Set the Margins to 10 mm and add a Bleed of 5 mm on all sides. Click OK.

new document window
new document

Step 2

Expand the Layers panel (Window > Layers) and double-click on the default Layer 1 name to open the Layer Options window. Rename the layer Paper Background and click OK.

new layer

Click on the Create New Layer button at the bottom of the panel. Rename this layer Color.

Create a further three new layers in the following order: Typography Behind, Dancer and Typography in Front.

new layer

Lock all the layers except the bottom layer, Paper Background.

layers panel

3. Build Up Vintage Texture and Color

Step 1

Take the Rectangle Frame Tool (F) and drag onto the page, creating a frame that extends to the edge of the bleed on all sides. 

Go to File > Place and choose your paper texture photo. Click Open. Arrange the image in the frame using the Fill Frame Proportionally button on the top Controls panel. 

paper image

Step 2

Expand the Swatches panel (Window > Color > Swatches) and create a new CMYK Process swatch. Rename it Vintage Cream, and set the levels to C=5 M=7 Y=15 K=0.

vintage cream swatch

Select the Rectangle Tool (M) and drag onto the page to create a shape that’s the same size and in the same position as the one below.

Set the Fill to Cream. Then head up to Object > Effects > Transparency and reduce the Opacity to 90%. 

transparency

Click on Gradient Feather in the left-hand menu, and add a Radial Gradient, dragging the dark stop to the right to make it tighter. Click OK.

gradient feather
gradient effect

Step 3

Return to the Layers panel and lock the Paper Background layer. Unlock the next layer up, Color.

layers panel

Create a new CMYK Process swatch, C=0 M=85 Y=88 K=0, and name it Red

red swatch

Create a second new CMYK Process swatch, C=94 M=97 Y=0 K=0, and name it Blue.

swatch blue

Step 4

Take the Pen Tool (P) and use it to create a rough rectangular shape across the top two-thirds of the page, using the margins as a rough guide for sizing it. Don’t worry about making the line perfectly straight—a bit of an odd angle will add to the vintage effect.

pen tool

Click around until you complete the shape and then set the Fill of your new shape to Red.

red shape

Repeat the process again, creating a smaller rectangle at the bottom of the page, and setting the Fill to your new Blue swatch. Don’t worry about the two shapes overlapping a little. 

blue shape

Then go to Object > Effects > Transparency and set the Mode to Multiply. Click OK.

transparency effect
final shape

4. Create a Vintage Dancer

There are three parts to giving this original photo a distinctively vintage style. First we need to edit the photo in Photoshop to give the photo a newspaper-print texture and cut away the background of the image. Then we’ll add a colored border to the dancer in Illustrator. Finally, we’ll repeat the image in InDesign to give the effect of movement.

Step 1

Save your InDesign document and minimize the window for now. Open up the photo of the classical dancer in Adobe Photoshop.

Duplicate the Background layer, and then place the photo of the paper texture we downloaded earlier between the two background layers.

duplicate layer

Go to Image > Adjustments > Desaturate to remove the color from the image.

destaurate

Step 2

Adjust the Blending Mode of the top layer (the copy of the dancer photo) to Multiply.

blending mode multiply

Go to Image > Adjustments > Brightness/Contrast. Reduce the Brightness to -5 and increase the Contrast to around 55. Click OK.

brightness and contrast

Step 3

Go to Filter > Filter Gallery. Choose Film Grain under the options for Artistic filters, and set the Grain to 8, Highlight to 1 and Intensity to 4. Click OK.

filter gallery

To make your photo look as if it’s been printed on old newspaper, go to Filter > Pixelate > Color Halftone, and set the Radius to 8, and set the Channels roughly to the following values: 108, 162, 90 and 45. Click OK.

color halftone
image so far

Now reduce the Opacity of the top layer to 30%.

opacity reduced

Step 4

Duplicate the bottom background layer and place this pasted colored photo above the paper layer, and below the top layer.

duplicate layer

Desaturate this layer of color (Image > Adjustments > Desaturate).

destaurated image

Then set the Blending Mode of this layer to Multiply.

multiply mode

Save this image as a PSD file, naming it ‘Dancer_with Background’, and create a duplicate of the file so you can work on this further while keeping a copy of the original. Rename this duplicate file ‘Dancer_without Background’

Step 5

Open the ‘Dancer_without Background’ file in a new Photoshop window. Now we’re ready to cut out the background from our photo.

You might find it easier to work with the color Background layer visible, as it’s a bit easier to see the details of the edge of the dancer. Switch off the visibility of the layers above for now.

Take the Lasso Tool (L) and trace roughly around the top half of the dancer’s silhouette until you’ve cordoned off the top half of the photo. 

lasso tool

Click on the Refine Edge button at the top of the workspace. Adjust the settings to make the line tighter to the silhouette. Use the Smart Radius function, and increase the Shift Edge slider if needed. Increase Smooth a little too. When you’re happy, click OK.

refine edge

Delete the selected area from every layer of the Photoshop file.

selected edge

Step 6

Repeat the process, using the Lasso Tool (L) and Refine Edge function, until the whole of the dancer’s silhouette has been cut out, and the excess background deleted on every layer.

refine edge
cut out silhouette

Don’t forget to cut out the area inside her arched leg and arm too!

gap in arm
gap in arm

As a final touch to your photo, add a Levels Adjustment, and increase the level of black in the photo, to make the image appear a little bolder.

levels adjustment

Go to File and Save your PSD image.

Step 7

Leave Photoshop, and open up Adobe Illustrator

Create a new document, then File > Place your ‘Dancer_without Background’ PSD file on the artboard.

Create a new layer and sit this below the photo layer. Fill this layer with a Black rectangle.

Create a second new layer, rename it Border, and sit it above the photo layer. Lock the layers containing the photo and black rectangle below.

Take the Pen Tool (P) and set the Stroke Color to White. Draw roughly around the perimeter of the dancer. You can do this with a mouse, but it might be a little easier to do with a drawing tablet if you have one.

pen tool
pen tool
tracing border
traced border

Step 8

Work your way around the whole silhouette, and remember to trace the inside of the arm and leg separately too.

silhouette traced

Select both this and the outside edge, and Right-Click (Windows) or Control-Click (Mac) > Make Compound Path. Set the shape with a WhiteFill.

compound path
finished border

From the top Controls panel, set the Weight of the Stroke to 3 pt, and then from the Brush Definition section, go to Brush Libraries > Artistic > Calligraphic. Choose Tapered Stroke from the selection.

brush stroke

Switch off the visibility of the bottom, black layer.

Then go to File > Save As and save the image with the white border and photo on top as an Illustrator EPS file, with a transparent background. Name the file ‘Dancer with White Border.eps’.

Step 9

Duplicate the Border layer and switch off the visibility of the original white layer. 

Select the border on the duplicated layer and then add a new CMYK swatch to the selection of colors in the Swatches panel (Window > Swatches). Call it Mustard and set the values to C=2 M=9 Y=83 K=0. Set the Stroke and Fill of the shape to Mustard.

mustard border

Now File > Save As and save the image with the yellow border and photo on top as an Illustrator EPS file, with a transparent background. Name the file ‘Dancer with Yellow Border.eps’.

Step 10

Leave Illustrator and head back to your InDesign document. Lock the Color layer and unlock the Dancer layer above.

Take the Rectangle Frame Tool (F) and drag onto the page to create an image frame. Go to File > Place and choose ‘Dancer with White Border.eps’. Click Open

Scale and position in the frame until the dancer’s arm just touches the left-hand margin, her foot rests on the bottom of the page, and her back foot is just invisible off the right side of the page.

positioned image on poster

Step 11

Edit > Copy, Edit > Paste the image frame, and position slightly to the left of the first image. Relink the image (File > Place) with the ‘Dancer with Yellow Border.eps’ image.

Go to Object > Effects > Transparency and reduce the Opacity to 80%.

transparency effect

Then Right-Click (Windows) or Control-Click (Mac) > Arrange > Send to Back.

send to back

Select both images and Right-Click (Windows) or Control-Click (Mac) > Group.

Step 12

Copy and Paste the grouped pair, and position these again further to the left of the originals. Reduce the transparency Opacity of the pasted group to 60%.

transparency effect

Paste again twice and reposition further to the left to create an overall ‘blurred’ effect. Reduce the Opacity of the final group to 15%, to create a gradual fading effect.

transparency effect
final image effect

5. Time for Type!

Step 1

It’s time to get creative with typography on your poster. If you haven’t already, download and install the following fonts:

Step 2

In your InDesign document, lock the Dancer layer and unlock the Typography Behind layer below.

Go to the Swatches panel and create a new CMYK Process swatch. Name it Mustard and set the values to C=2 M=9 Y=83 K=0

mustard swatch

Step 3

Take the Type Tool (T) and drag onto the top-left of the page to create a new text frame. Type ‘happy’ and set the Font to Ananda Namaste, Size 150 pt, and set the Font Color to Mustard.

mustard text

Select the text frame and go to Object > Effects > Drop Shadow. Next to the Mode option, click on the shadow’s color. Adjust the Color to Swatches and choose Red from the selection. Click OK

red color

Adjust the Distance of the drop shadow to 5 mm, Size to 1 mm and Spread to 100%. Click OK.

This will give the text a letterpress-style, vintage effect.

drop shadow

Step 4

Create a trio of text frames, typing one word into each—’hindu’, ‘new’, and ‘year’

Set the Font to Ananda Namaste, Size 90 pt. Pull out ‘hindu’ in Blue and the remaining words in Vintage Cream.

ananda font

Step 5

Lock the Typography Behind layer and unlock the top layer, Typography in Front.

Create a new text frame, type in ‘2016’ and set the Font to Chivo Bold, Size 140 pt and Tracking 100. Set the Font Color to Vintage Cream. Add a Red drop shadow to the text as we did in Step 3, above.

chivo font

Step 6

To add a final touch to our poster, let’s add in the Hindi equivalent of ‘Happy New Year’. The phrase in Hindi is:

नए साल की शुभकामनाए

If you’re using an English-language version of InDesign, it’s much more straightforward to import the Hindi text as a vector graphic, which you can edit and scale as you would any other vector image.

To do this, open up Microsoft Word (Windows) or Pages (Mac) and Copy and Paste the Hindi text above into a new document. 

Set the Font to MS Windows, or another Hindi-compatible font, and then split the text into three sections, with a paragraph break between each. Enlarge the size of the text so it’s nice and big. 

pages document

Export the document as a PDF file

pdf document

Step 7

Open up the PDF in Adobe Illustrator. Illustrator will read the PDF file as outlines text, creating a vectorised version of the Hindi phrase. 

vector text

Select each line of text separately (this will make them easier to edit in InDesign), and go to Edit > Copy.

selected vector text

Step 8

Return to your InDesign document, and Edit > Paste each line of text onto the poster. Position them on the left side of the poster, against the left edge of the red background shape. 

pasted vector

Set the first two lines of text with a Vintage Cream Fill.

For the larger, bottom line, set the Fill to Mustard, and then go to Object > Effects > Drop Shadow and add a Red drop shadow. Position this lower line along the edge where the blue and red rectangles meet.

drop shadow
final typography

6. Export Your Finished Poster

Great work—your typography is looking awesome, and your Bollywood-inspired poster is finished!

final poster

All that’s left to do now is export your artwork ready for printing or sharing online. 

Go to File > Export, and choose Adobe PDF (Print), in Press Quality, for professional printing. 

press quality

Make sure to include your Bleed when you export too by going to the Marks and Bleeds menu and selecting Use Document Bleed Settings.

marks and bleeds

For a digital-compatible format, go to File > Export and choose Adobe PDF (Interactive) under Format instead.

Happy New Year! 

In this tutorial we’ve looked at a huge range of skills for creating striking vintage-style poster designs. You can recreate that vintage Bollywood look in future projects by using some of these tricks and techniques:

  • Use papery background textures to give the poster an aged, vintage look.
  • Stick with bright, primary colors to recreate a 1960s color palette.
  • Desaturate and age your selected photos in Photoshop.
  • Cut away the background of images and create a white or colored border around the photo to give it a collage-like feel.
  • Repeat photos and use transparency effects to give the graphics a creative, unusual look that wouldn’t have looked out of place in 1960s poster design.
  • Use colored drop shadows to add vintage charm to typography.

Fantastic work! I hope you have fun with giving your posters a cool, vintage look and injecting color and energy into your designs to pay tribute to Bollywood styles.

If you’re still looking for the perfect poster for an upcoming event, make sure to check out the flyer and poster templates available on Envato Market.

exported pdf

Viewing all articles
Browse latest Browse all 8958

Trending Articles