Design a Sin City Style Poster
Jul 7th in Designing by Fabio
Sin City was a really cool movie, at least visually. I really liked the stylish scenes and colors. A few months ago I saw a poster of another Frank Miller movie called "The Spirit." The poster is titled "My City Screams." It really caught my attention because of the way the design played with typography to recreate buildings. Also, the perspective was really well done.
In this tutorial, I'll show you how to create that effect in Photoshop, but this time we'll use Illustrator to create the perspectives and text. I'll walk through the process of creating the effect; However, it's always good if you play around and test different settings to see how it works. That for me is the best way to learn.
I am a Brazilian designer living in Porto Alegre (south of Brazil).
In 2003, I founded a web design studio called ZEE, with Fabiano Meneghetti, an architect and friend of mine. It's a small studio now, with 4 people working basically with web.
Final Image Preview
First, let's take a look at the image we'll be creating. As always, the layered Photoshop file is available via our PSDTUTS Plus membership.
Step 1
Create a new document in Photoshop, use 1000 pixels by 1300 pixels. Fill the background layer with black, and we're ready to get our hands dirty.
Step 2
We'll use Illustrator to create the text in the correct perspective. It's better because we'll need a huge area to place the vanishing points. Once in Illustrator, place the building's image in the document. You can find it at this link. Then select the Line Segment Tool (\) and create a line following the perspective of the building. We'll need two lines because when they cross is where our vanishing point will be located.
Step 3
Now that we have the vanishing point, it's easy to create more lines. You can do that one by one or use the Blend Tool. I used the Blend Tool. Just rotate the top line keeping the pivot point on the vanish point. Make it much higher than the building because there will be text on the top. After that, just repeat the same procedure to find another vanish point, the vertical one. You will need these two only. However, if you want you could find the third one, the one on the right.
Step 4
With our grid done, it's easy to apply the correct perspective to anything you want. Let's type the text "PSD," and place it on top of the building. Then go to Object > Envelop Distort > Make with Mesh. Then change the Envelop Mesh settings to 1 Row and Column. After that, just move the vertices 1-4 using the grid for reference. The mesh will create curves, to avoid that just move the controls to follow the grid as well.
Step 5
Select the "PSD" text and go to Object > Expand and just click OK. Duplicate the "PSD" text, and move it to the bottom right, as in the image below. Then select the Blend Tool (W) and apply it to the two "PSD" texts. For the Blend Options use Specified Distance for the spacing with 4pt.
Step 6
Now type "TUTS,". Then go to Effect > 3D> Extrude & Bevel Options. This text has to go in the opposite direction from the "PSD" text. Instead of using the vanish lines we'll use the 3D filter. Use the settings from the image below. Note that the values are: X = 6º, Y = -35º, Z = -3º, Perspective 51º, and the Extrude Depth is 288pt.
Step 7
Place the same image in our Photoshop document. After that, with the Magic Wand Tool (W) select and delete the blue sky. Then with the Polygonal Lasso Tool (L) let's cut a part of the building so it will be the same width as the "PSD" text.
Step 8
Copy the "PSD" Blend from Illustrator. Then paste it on top and behind of the building. Then create a new layer, and select the Clone Stamp Tool(S). For the Stamp options change the Sample to All layers so you will be able to clone from all layers to the new one. However, we just want to clone the bricks part. You'll need to fill the the "PSD" text with bricks.
Step 9
With the Magic Wand Tool(W) select the the dark part of the "PSD" blend and delete it. Leave just the front of the blend.
Step 10
Here let's adjust the colors of the bricks. Select the "bricks" layer. Then go to Layer > New Fill Layer > Solid Color. Use #715b1f for the color and change the Blend Mode to Color. Then go to Layer > Creating Clipping Mask. After that, go to Layer > New Adjustment Layer > Hue&Saturation. Create a Clipping Mask again. Then change the values of the Hue&Saturations to Hue 0, Saturation -85, and Lightness -1.
Step 11
Now repeat the same procedure for the building layer, however use a different value for the Hue&Saturation, use Hue 0, Saturation -65, Lightness -43.
Step 12
Select the Pen Tool (P) and create a shape to cover the side of the building. Use the Shape Layers for the Pen Tool option, so you'll be able to create a layer with a fill color. Use black for the fill and change the Blend Mode to Color Burn. Then go to Layer > Layer Mask > Reveal All. Then select the Brush Tool(B) with a regular brush with hardness 0. Then paint the mask with black so you'll make the windows visible.
Step 13
Paste the "TUTS" text from Illustrator. Then get a bricks texture, you can download the one image I used. Basically, duplicate the texture, flip it horizontally, and move it to right. Repeat that to create a big rectangle. After that, go to Edit > Transform > Distort. Move the vertices to add a perspective. use the "TUTS" text as a reference.
Step 14
With the Magic Want Tool (W), select the front of the layer and the "TUTS" word only. Then with the bricks layer selected, go to Layer > Mask > Reveal Selection. After that, go Image > Adjustments > Hue & Saturation. For the settings, use Hue 0, Saturation -89, and Lightness -19.
Now go to Layer > New Fill Layer > Solid Color, use #16150b for the color. Then change the Blend Mode to Overlay with a 22% Opacity. The last thing here, select the >TUTS> word, not the brick layer, and go to Image > Adjustment > Levels. For the settings, use 86, 1, and 255.
Step 15
Create a new layer behind the >TUTS> layer. Then select the Brush Tool (B). Choose black for the color and a Brush with 0% Hardness. Then paint a shadow, as in the image below. Also, change the Layer Opacity to 90%.
Step 16
Let's use another image, download this image and place it in the document behind all layers. It will be the background. Then grab the Polygonal Lasso Tool (L) and select that area with windows at the top of the image and delete it. Then go to Image > Adjustments > Hue/Saturation. For the settings, use Hue 0, Saturation -63, and Lightness -83. After that, go to Image > Desaturate.
Step 17
Now let's add the Sky. You can download an image I took. Place it beneath all layers. Then change the Blend Mode to Hard Light at 55%. After that, go to Image > Adjustments > Levels. For the settings, use 16, 1.00, and 255. Then go to Layer > New Fill Color > Solid Color. Use #0f0d08 for the color and change the Blend Mode to Color.
Step 18
Download a lamp image. Delete the background using the Lasso Tool. Then go to Image > Adjustment > Desaturate. Then with the Brush Tool (B), create a new layer and paint a shadow as in the image below. Change the Opacity to 60% and use Color Burn for the Blend Mode.
Step 19
Place the Lamp image we have just edited. Then select the Pen Tool (P) and create a triangle (img. 1). Then go to Filter > Blur > Gaussian Blur. Use 3.5 for the amount. Then duplicate the layer. Just rotate it a little bit and move it the right (img. 2). After that duplicate the layer again. Place it between the two layers. Go to Filter > Blur > Gaussian Blur and use 4 for the amount this time.
Group the three layers and rename the group to "Rays." Then go to Layer > Layer Mask > Reveal All. Select the Gradient Tool (G) and use black and white for the colors. Use the Gradient Tool to fade out the light (img. 3)
Step 20
Group the "Lamp" layer with the "Rays" group. Then rename the new group to "Lamp." Then duplicate the group twice with resize and place them so we will have one on the "D," other on the "S," and the last one on the "P."
Step 21
On top of the other layers go to Layer > New Fill Layer > Solid Color. Use #292615 and change the Blend Mode to Saturation.
Step 22
Add a new layer, again on top of the others. Make sure you have black and white for the colors and go to Filter > Render > Clouds. Change the Blend Mode to Overlay and the Opacity to 90%. After that go to Image > Adjustments > Hue/Saturation. Select the Colorize option, and for the values use: Hue 53, Saturation 29, and Lightness -12.
Step 23
Add a new layer one more time and fill it with black. Then go to Filter > Noise > Add Noise. Use 10% for the amount and Gaussian for Distribution. After that, change the Blend Mode to Soft Light and the Opacity to 35%.
Step 24
Now you can add more details to the image, like some graffiti or signs, it's up to you. Just remember to play with the Blend Modes and the order of the layers.
Conclusion
In this tutorial, we looked at different techniques to create 3D text and mix them with photos. Also, we created some textures using the Stamp Tool. The most important thing in this tutorial are the image adjustments. It's really important when you create a design to manipulate different images of various colors. I hope you enjoy this tutorial as much as I did creating it.
User Comments
( ADD YOURS )George Burrell July 7th
Really nice Fabio. Keep up the good work!
( )Yeaaah July 7th
FIRST! YEAH! GREAT MAN!
( )Flaunt July 7th
Wow! Been waiting for this since seeing “The Spirit” poster – http://www.impawards.com/2009/spirit_ver5.html
( )Jeff July 7th
Cool, love the outcome, could learn a lot from this one. Frank Miller is very inspirational.
( )Tom Ross July 8th
Love the outcome – you managed to blend the different photos/textures extremely well!
( )HadDy July 8th
Nice work!
( )Clemson D July 8th
I like the idea.
( )Nysuatro July 8th
Cool tip with illustrator. A nice wat to get the right perspective
( )Wouter July 8th
Is it normal i’m not having that 3D tool ?
Nice tutorial.
( )Ali July 8th
nice tutorial, especially considering the image it started out with.
( )Vlad July 8th
It’s realy nice man! ohhh yeahhh
( )bleak July 8th
@wouter: I’m not sure but it could be that you have not the extended version of photoshop.
nice tut.
( )Rax July 8th
Awsome ! I saw a picture like this and thougth “hey, someone should make a tutorial for this” and now you have
Great work !
( )Muffenz July 8th
i dont really like this one, doesn’t feel like you took the time to make something, but its not completely bad
( )crazyhunk July 8th
wow….gr8 tut
thanx…
( )LOSWL July 8th
Very nice design and cool new skill set with vanishing point usage
)….
Wouter….I think you will need Illustrator CS or later Edition to find the 3D feature
(
( )PieterC July 8th
Nice tutorial, but the 3D text doesn’t use the same vanishing point as the building, and that’s a pity.
( )Tim July 8th
I think it looks awesome.
But I’ll have to disagree with your opening statement, “Sin City was a really cool movie, at least visually.”
I believe the movie is incredible, story and all… not just the visuals.
( )My Ink Blog July 8th
Really awesome effect. I love it!
( )Fabio Sasso July 8th
@PieterC yeah it doesnt but if you look at the original poster you will see that the texts have different perspectives as well.
Thanks for the comments,
( )Grafiko July 8th
Great tutorial…
( )Matt Radel July 8th
Friggin’ sweet. Nice use of the perspective tools & whatnot.
( )D. Carreira July 8th
Great tutorial, nice techniques here.
Thanks,
David Carreira
( )RUGRLN July 8th
Nice btu very disappointing, you haven’t explained half the stuff well like how to do the mesh perspective, very badly explained in some places; insufficient.
( )Christian Mejia July 8th
Wow! Muffenz must have a really high standard if he didn’t appreciate this tut. I think this tutorial is fantastic! Thanks for this!
( )MONSTER July 8th
Great usable tutorial. Cheers.
( )VertigoSFX July 8th
That’s brilliant! I’m going to try this one tonight.
( )Bogus July 8th
very good tutorial
( )Dan July 8th
This one seems just a little off, almost rushed to the table. It still covers some great concepts but they have been covered here before.
( )Braden Keith July 8th
Wow this is fantastic! Man you did a great job. I really like the lights on PSD, interesting effect.
( )Braden Keith July 8th
@Dan
( )I feel like that sometimes with these tutorials, but after closer reading they’ve got their own zest.
Jimizm July 8th
Great one! Appreciate it.
( )Cooper July 8th
nice but the lights look fake.
( )Pravin Potdar July 8th
GREAT!!!!
( )gartsman July 8th
Pretty cheeseball. I dont see any real application for an image like this one. Looks amateur.
( )Danny July 8th
It looks okay, but like gartsman said, not that applicable
( )Shane July 8th
some interesting steps along the way, but I’m not keen on the final result.
thanks for posting though.
( )kamel July 8th
so damn nice thanks
( )fabiano July 8th
I like a lot man!
For those who didn’t like that much, take a look on the original poster that Flaunt already give us the link: http://www.impawards.com/2009/spirit_ver5.html
Thanks
( )America Campbell March 5th
WOW!! extremely stunning…I joined psd tuts just for this tutorial and will do anything to do it right. Im not too familiar with Illustrator, can you please please please give me a more begginer style tut for the illlustrator part? I’m begging!!!! Thanks.
AWSOME!!
( )giackop July 8th
thanx!! fabio this is awesome!! cool one!!
( )Lamin Barrow July 8th
Another excellent tut from Fabio. Well done.
( )Joefrey Mahusay July 8th
Really nice tutorial Fabio. Thanks for sharing
( )krashsquad July 8th
love it
( )Sandeep Sharma July 8th
Nice work!….
( )Skellie July 8th
Really slick, but I think the extra additions (graffiti and neon) spoil the palette a bit. I’d like it better without them, but I guess I’ll have to make my own
. Thanks for the tut!
( )Mr Kuzio July 8th
Ok, this tutorial is great.
But i don’t like this Sin City Style! XD
( )Rob July 8th
SICK!!
( )Matthew 'Web Design' Adams July 8th
Really cool post mate! love this site
( )Mark July 8th
another useless tutorial form fabio
( )Brooke July 8th
Great tutorial!
For those of you complaining about useless tutorials, send us the link to your tutorials and we’ll critique them.
( )naems July 8th
there’s a waayy easier way to create perspective text than that
( )Andrei Constantin July 9th
not bad at all – thanks
( )Ron July 9th
Its missing a sexy women
( )Titoff_77 July 9th
very nice tutorial
thanks
http://www.flickr.com/photos/titoff_77/2651033382/in/pool-psdtuts
( )yangxucheng July 9th
It’s amazing
( )Mark Abucayon July 9th
wow thanks for this one, I love it, thanks fabio for the tuts.
( )Rax July 10th
Hm, I cant seem to get the “PSD” text where I want it. For me it doesnt look like it’s the same perspective as the building like yours. Could you eleborate on how you did that ?
Or if anyone else have another way of doing it I would be most greatful. Thank you.
( )BOXREADY July 10th
I love any TUT that is Film inspired
( )One Sheets, Film sites, DVD covers
I would love to see more TUTS that
are based or inspired on Film Promo
Styles.
Nice
EB
NIRVANA July 10th
I keep getting stuck on step 5. When i blend the two PSD words together it looks nothing like that. I get a Black PSD and shads of gray in between until the last PSD which is completely gray. And the path on my blend is not smoothe as shown? very confused help !
( )Zach March 9th
Did you ever find out an answer to step 5 bro? I’m stuck too.
( )The Floating Frog July 10th
One to try at some point. Very ‘Sin City EST’.
( )Evolved Templates July 11th
Thankyou for this awersome idea, i will definately give this a try!
( )BogDinamita July 11th
this would do great for a magazine cover or so
( )Kovilen1207 July 11th
Nice tuts, really liked it
( )Breinlyn Francisco July 12th
hey, can i do it, with photoshop cs 8.1
( )m.baech July 13th
Hmm, nice outcome
but it’s far too comlicated for me though… i have no experience in Illustrator what so ever.. so i couldnt even create the vanishing point :S
( )Taylor July 16th
A little retouching on the lighting and color and I’d find this to be pretty much perfect. I don’t care for the red text thrown in at the end.
( )ArcLight July 16th
“Frank Miller is very inspirational.”
Will Eisner is even more inspirational.
( )Valkiria July 17th
wooooow, exellent!!
I’m very impressed!
Txt could be more natural, but i like it
( )Loom July 18th
Where is the Object > Envelop Distort > Make with Mesh thing in my photoshop cs3? Cant find it.
( )Hookie July 19th
I can’t do the step 5 proper.
I do everything, as you told, but my latters are gradient black to white. I don’t get how to make the letters and shadows in black, and only the front in gray.
Please help me if you can
( )Jonathan July 21st
Amazing tutorials!
( )Mansoor July 24th
Thanks for Posting.
( )Great Tut.
Tech July 24th
Could you give a little more info on step 4? Thanks in advance.
( )Elizabeth Saunders July 24th
This is incredibly cool!
( )And not just because it s one of my favorite movies.
Jacob July 27th
This is a great one for proportions, perspective, and lighting all at once! Nice job!
( )Mazzei July 27th
congratulations Fabio, very good job!
( )continue assim rapaz, está de parabens!
MS July 29th
Good ! Thank You.
( )ex_genyo July 29th
Excellente!
( )that_one_kid July 30th
I think this is a really cool tut but you need to explain the meshing better I try to do it and it just resizes the text it dosent do the meshing it’s all really confusing Step 4 needs to be explained better.
Great tut tho
( )Scott July 30th
I dont know how to go to publisher ( one of the first steps )
( )JD August 10th
nice tut…
( )but i don’t have illustrater =[
Nuxly Stardust August 24th
I love that, very good work man !
( )Oscar October 31st
I am having problems with step #4.
“After that, just move the vertices 1-4 using the grid for reference. ”
I have done everything, but the vertices wont move one by one…
( )petit November 10th
very very very nniiiiiiiiiiiiiiiiice coooooooool
( )George Milas December 11th
I think that some people are very jealous
( )Keep the good work dude coming. 5*
elearning January 6th
Thanks alot for this great tutorial. You inspired me so much.
( )one million euro blog January 6th
Nice tutorial. Thank you so much.
( )parikh February 16th
A real good tutorial! Loved it!
Thanks a lot.
Pls do keep them coming.
Parikh
( )India-Mumbai
Julius April 5th
u.u are an engineer?
cool
I learned those vanishing point our our subject
keep up.
( )ilz master April 7th
STEP 4 FIX
Yessss! Figured it out after 35 minutes of frustration.
After “Object > Envelop Distort > Make with Mesh” and selecting 1 Row and 1 column, using the “Direct Selection Tool” (white arrow pointer) single click on an anchor, or corner of the text, and shazam! Next time you try and move that corner, instead of the whole text just shifting, the text warps!
~ilz
( )ilz master April 7th
STEP 5 FIX
hehe, now i got stuck on step 5 for some time.
This is what i did to immitate what is shown in step 5’s finished product. Select the text with the “Selection Tool” (black pointer arrow), Object > Expand and click Okay, edit>Copy, then i move that text down and to the right a little bit. Now edit>Paste, and i move this pasted text to the other text’s original position (on top of the building). Both text selections are gray.
Now, with the “Selection Tool” i have both texts selected. I go to Object>Blend>Blend Options. I select Specified Distance, at 0.1 pt, and orientation as the left button selected. Click okay. Press the “W” key on your keyboard, this will select the Blend Tool.
TO AVOID GRADIENT effect do this: There is a menu at the top of your screen with two color drop down menus, the left one should be gray. Change the second one to be black. (You will then see in that drop down menu a gray rectangle drawn in a black rectangle)
Now go Object>Blend>Make.
It will take a little while for illustrator to process
~ilz
p.s. Im using Illustrator CS4
( )ZachTan June 7th
dear liz…i still couldnt make it without gradient….could you be a bit more specific?? thanks very much..i dont understand what you meant by those 2 color box…
( )B August 17th
Thank you so much! I really like the effect in this tutorial but I’ve been pulling my hair out for 30 minutes trying to avoid the gradient. Thanks for the work-around ilz!
( )CgBaran Tuts April 22nd
Nice work
( )photo retouching May 10th
really nice result. Please keep posting these inspirational pieces.
( )Evan Skuthorpe June 1st
nice tutorial.
( )proficient June 3rd
Wow….Its simple and great
( )TIMO June 8th
blending option won’t work in illustrator :S
( )anyone with the same problem?? (illustrator cs3)
perroyonko June 10th
me too
( )AK August 11th
This just a walkover tutorial but the final out come is great
( )SKDESIGN August 28th
THIS IS THE *beeb* BEST TUTORIAL I’VE EVER SEEN
( )Foro Costa Rica Sin Censura October 7th
Hello
( )I like the post
is great
shawn November 9th
how the hell do you do the vanishing point thing i did everything but there was no 20 lines and im about to cry if i dont find a way to do the thing
( )