The Great Gatsby Art Deco Style in Illustrator and Photoshop

The Great Gatsby Deco Style in Illustrator and Photoshop

Movie posters are always a great source of inspiration, movies area always about periods of times, sometimes it’s in the future, others in the past. Some are really good at representing some art styles. That’s the case of the new movie called The Great Gatsby. It’s heavly inspired by the Art Deco movement and it’s simply beautiful. It’s so cool that we had to try to do that in Photoshop and share in a tutorial.

So for this tutorial we will create a Art Deco image based on the poster of The Great Gatsby movie. We will use Adobe Illustrator and Photoshop to create the whole thing. The process is not difficult but it’s very time consuming. Another thing to notices, is that there’s no specific rules but to keep the square angles.

Step 1

In Illustrator, create a new document. Then with the Line Segment Tool (/) or the Pen Tool (P) start creating some basic lines using squared angles. To do that hold the Shit tool in Illustrator when adding the lines.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 2

Keep adding more lines. The goal here is to create one half of the image, the one one will be just a copy of it flipped horizontally.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 3

Play with different stroke weights and also use the Pathfinder tool to cut things. It’s important to keep the lines straight and with different stroke weights.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 4

Keep adding more lines, there’s no rules, just make sure you connect the lines so they have a nice flow.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 5

Duplicate the circles created in the Step 3, here is important to have the full canvas for reference, in our case the circles are in the center of the design.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 6

Add 3 thicker lines like the image below.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 7

Now let’s add the area for the text. Start with the Rectangle Tool (M), then cut it in the middle so you have just half of it. Also make sure that the circle in the center is in front of the rectangle.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 8

Add a square and rotate it 45º, position it on the left of the center rectangle.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 9

With the Pathfinder Tool, use Unite to merge both to create one object only.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 10

Kee adding more lines, always making sure they connect to one another in some way.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 11

Duplicate the top lefft and flip it vertically, then connect the lines like the image below.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 12

Start creating the bottom part, first with the thicker lines for reference.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 13

Then add the thinner ones.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 14

Once you finish half of the design select all layers and duplicate it, then flip it vertically. Connect the lines ans make sure that it’s center aligned.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 15

The last part in Illustrator is the text part, use the poster of The Great Gatsby for reference and create the text you want. The Art Deco style for the text is quite simple, it’s basic a think line next ot a thinner one.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 16

Now in Photoshop, let’s import the objects created in Illustrator. The first thing to do is copy all lines and paste them in Illustrator. Note that I didn’t copy the text. Also copy just the thicker lines and paste them in a separate layer, it’s important for the next steps.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 17

Let’s apply some layer styles. In Illustrator we used just black and white, so the first thing to do here is use a nice yellow/orange for the color overlay (#ffba00). That will be our gold texture. Then select Inner Shadow and use the values below.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 18

Select Inner Glow and use the values below.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 19

Select Drop Shadow and use the values below. Drop Shadow will start giving the depth we want. Remember, you will apply the same layer styles to both layers, one with all lines and the other one on top of it, just with the thick lines. The one with the thick lines will have the shadows visible on top of the other.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 20

Here will be the design you will have in Photoshop. Note that the background is black and not white.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 21

Add a layer on top of the others. Group this layer into a folder and change the Blend Mode to Color Dodge. Select the layer inside the folder and then with the Brush Tool (B) and a very soft brush, start painting with the white at 10% on the areas you want to create a highlight.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 22

Add another layer and group it into layer. Change the Blend Mode of the folder to Linear Burn. Select the layer inside the folder and then with the Brush Tool (B) and a very soft brush, start painting with black at 20% on the areas you want to make them darker and sort of on the second plane. Also use the Lasso Tool (L) to mask some areas to create shadow effects like (1, 2, 3, 4 and 5).

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 23

Add a new layer and fill it with white. Then go to Filter>Noise>Add Noise. Use 80% for the Amount. Make sure you have black and white for the background and foreground color. Then go to Filter>Blur>Motion Blur. Use 0º for the Angle and 120 pixels for the Distance.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 24

Change the Blend Mode to Multiply.

The Great Gatsby Deco Style in Illustrator and Photoshop

Step 25

Add the text, copy from Illustrator and paste it in Photoshop. Use the same layer style but use a gradient from white to medium grey in the center. The idea is to make the line as gold and the text as silver.

The Great Gatsby Deco Style in Illustrator and Photoshop

Conclusion

Select all layers and duplicate them. With the new copies selected merge them into a new layer, then go to Filter>Blur>Gaussian Blur. Use 10 pixels for the Radius. After that change the Blend Mode to Overlay at 70% Opacity. Duplicate this layer and change the Blend Mode to Screen at 70% Opacity, then duplicate it again and go to Layer>Layer Mask>Reveal All. Select the thumb of the mask and go to FIlter>Render>Clouds. That way we will use the clouds to mask the layer and make it less uniform.

Our design is pretty much done, now it’s up to you to improve upon it, there are a lot more to be done so I hope you have fun. A Merry Christmas and Happy New Year.

The Great Gatsby Deco Style in Illustrator and Photoshop

Download Photoshop file

Click here to download the Photoshop file used for this tutorial

Posted in Blog | Comments Off on The Great Gatsby Art Deco Style in Illustrator and Photoshop

Daily Inspiration #1326

Daily Inspiration #1326

This post is part of our daily series of posts showing the most inspiring images selected by some of the Abduzeedo’s writers and users. If you want to participate and share your graphic design inspiration, You can submit your images and inspiration to RAWZ via http://raw.abduzeedo.com and don’t forget to send your Abduzeedo username; or via Twitter sending to http://twitter.com/abduzeedo.

Do you want to see all images from all Daily Inspirations? Check out http://daily.abduzeedo.com

Alexander Hofstetter

Digital art selected for the Daily Inspiration #1326

Anthony Gibson

Digital art selected for the Daily Inspiration #1326

Arimbi Alessandra

Digital art selected for the Daily Inspiration #1326

Arman Nobari

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

Ben Stottlemyer

Digital art selected for the Daily Inspiration #1326

blankhiss

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

brunoabatti

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

bsicheneder

Digital art selected for the Daily Inspiration #1326

Cactus Urbain

Digital art selected for the Daily Inspiration #1326

camiloguell

Digital art selected for the Daily Inspiration #1326

Chris Amat

Digital art selected for the Daily Inspiration #1326

chrisdelo9032

Digital art selected for the Daily Inspiration #1326

coobytron

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

David Huckert

Digital art selected for the Daily Inspiration #1326

dillamac

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

Douglas Etges

Digital art selected for the Daily Inspiration #1326

endoxo

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

Fábio Araujo

Digital art selected for the Daily Inspiration #1326

foryouyouyou

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

Florian NICOLLE (neo)

Digital art selected for the Daily Inspiration #1326

fyckyoushirts

Digital art selected for the Daily Inspiration #1326

gabriel-gom

Digital art selected for the Daily Inspiration #1326

gencept

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

Halucinated

Digital art selected for the Daily Inspiration #1326

heyfrankdesign

Digital art selected for the Daily Inspiration #1326

ivkiona

Digital art selected for the Daily Inspiration #1326

Jack Nobre

Digital art selected for the Daily Inspiration #1326

Jacob Bordieri

Digital art selected for the Daily Inspiration #1326

jankloke

Digital art selected for the Daily Inspiration #1326

jesska1919

Digital art selected for the Daily Inspiration #1326

Joël Fréchette

Digital art selected for the Daily Inspiration #1326

Jururekamphoto

Digital art selected for the Daily Inspiration #1326

Katarína Štefániková

Digital art selected for the Daily Inspiration #1326

kcereal

Digital art selected for the Daily Inspiration #1326

Leo Kirincic

Digital art selected for the Daily Inspiration #1326

maheshartist

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

Maja Vuckovic

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

Martin Kruusimägi

Digital art selected for the Daily Inspiration #1326

m-decision

Digital art selected for the Daily Inspiration #1326

Digital art selected for the Daily Inspiration #1326

NIcholas França

Digital art selected for the Daily Inspiration #1326

sam janssen

Digital art selected for the Daily Inspiration #1326

Tariq Qubti

Digital art selected for the Daily Inspiration #1326

techillust

Digital art selected for the Daily Inspiration #1326

Teodor

Digital art selected for the Daily Inspiration #1326

TheMAG.it

Digital art selected for the Daily Inspiration #1326

unsungtalent

Digital art selected for the Daily Inspiration #1326

wmill

Digital art selected for the Daily Inspiration #1326

Wojciech Zasina

Digital art selected for the Daily Inspiration #1326

Posted in Blog | Comments Off on Daily Inspiration #1326