(/)

Vintage Badge in
Illustrator and
Photoshop
by ABDUZEEDO (/PROFILE/ABDUZEEDO) Mon, 02/28/2011 - 01:12

t's been more than two weeks since I've finally

moved permanently to California, USA. Before
the big move I was playing with Illustrator and
Photoshop to create a vintage look badge. After a
few hours trying different typefaces I got a nice
result and published it on my Dribbble profile
(http://dribbble.com/shots/113794-California-2011).
I

I have received quite a few emails since I published that asking me how I did
the effect, so in this tutorial I will show you how to create a vintage look badge
using Illustrator and Photoshop

STEP 1
Open Illustrator and create a new document. Then with the Start Tool create a
star in red.

STEP 2
Go to Effect>Stylize>Round Corner. Use 1.885 mm for the Radius.

STEP 3
Duplicate the star with round corners and then rotate it like the image below.
Also change the color to Cyan.

STEP 4

Select the cyan start with round corners and then go to

Window>Transparency. Use Multiply for the Mode. The areas that the cyan
are on top of the red will turn to grey.

STEP 5

For the typography I used Carnivalee Freakshow

(http://www.dafont.com/carnevalee-freakshow.font)
(http://www.dafont.com/carnevalee-freakshow.font)for the words California,
2011 and here I come. For the word San Francisco I used Birch Std
(http://www.azfonts.net/load_font/birchstd.html). Also I created some
lines in grey with the Rectangle Tool (M).

STEP 6
Now with the Ellipse Tool (L) create an ellipse like the image below, then with
the Type on Path Tool add the words World Wild Web West.

HOME (/)

ABOUT (/ABOUT)

STEP 7

COLLECTIONS (/TAGS/INSPIRATION)

SIGN UP (/USER/REGISTER)

TUTORIALS (/TUTORIAL)

LOGIN (/USER/LOGIN)

SEARCH

Also you can edit the text on path by double clicking on the icon of the tool to
go to the Type on Path Options. I used Rainbow for the Effect, Baseline for
the Align to Path and 36pt for the Spacing.

STEP 8
Do the same thing but now for the text that goes on top, which is ABDUZEEDO.

STEP 9

Copy all the objects in Illustrator and then go to Photoshop and create a new
document. I'm using 2560x1440 pixels for the size, the paste the Illustrator
vectors.

STEP 10
For the texture of the design I used an image from Shutterstock, you can find it
at http://www.shutterstock.com/pic-62706346/stock-photo-papertexture.html (http://www.shutterstock.com/pic-62706346/stock-photopaper-texture.html). So imported it and place it beneath the vector. Also
change the Blend Mode of the vector layer to Multiply.

STEP 11
With the Magic Wand Tool (W) select an area of the texture like the image
below. You will get some areas selected. Then select the vector layer and go to
Layer>Mask>Hide Selection. That way you will create a really nice old
style/vintage look to your design.

CONCLUSION
To create some nice vintage effects using Photoshop is pretty easy, it's all
about playing with layer masks and textures. However the most important
thing on this design is the Illustrator part in which I played with typogrpahy
and other elements to create a nice composition. So the tip is, look for
inspiration and try to learn as much as you can about design principles, the
effects afterwards are the easiest part.

DOWNLOAD THE ILLUSTRATOR AND

PHOTOSHOP FILE

CLICK HERE TO DOWNLOAD THE FILES USED ON THIS TUTORIAL.

(HTTP://IMGS.ABDUZEEDO.COM/FILES/TUTORIALS/VINTAGE_BASGE_IN_ILLUSTRATOR/SAMPLE.ZIP)

ABOUT THE AUTHOR OF THIS POST

Abduzeedo is a blog about design. There are all sorts of articles for those who
want to look for inspiration. Also you will find very useful tutorials for the most
used applications out there, with a special selection of Photoshop Tutorials
and Illustrator Tutorials. Of course there are other softwares conteplated like
Pixelmator, Fireworks, and web design tutorials.

RELATED ARTICLES

Nice Vintage Badge in

Pixelmator | Abduzeedo
Design Inspiration

Vintage Badge no
Illustrator e Photoshop |
Abduzeedo Design
Inspiration
(http://ww35.abduzeedo.com/nice-

Nice Vintage Badge in

Pixelmator | Abduzeedo
Design Inspiration

abduzeedo.com

abduzeedo.com

(http://ww1.abduzeedo.com/nicevintage-badge-pixelmator?
(http://abduzeedo.com.br/node/52705?
vintage-badge-pixelmator?
q.id=vJMbkvYj2sT6upQD&q.sl=6)q.id=vJMbkvYj2sT6upQD&q.sl=2)q.id=vJMbkvYj2sT6upQD&q.sl=7)
abduzeedo.com

WHAT'STHIS?

ALSOONABDUZEEDO

IconDesignbyNickKumbari

UI/UXWorksbyEhsanRahimi

1comment

1comment

TheDarkKnight1comment

LogoDesign:TheWorkofNikita
Lebedev2comments

70Comments

Abduzeedo

Share

Recommend 11

Login

SortbyOldest

Jointhediscussion
santhoshkoneru 4yearsago

Veryniceandinformativetutorialtoallstartingfromthebeginners.
www.zillionarts.comANewDesignPortal
4

Reply Share

P_alexx>santhoshkoneru 4yearsago

lookscool!
www.creativepaths.net
2

Reply Share

StefanoGiacomuzzi 4yearsago

ThanksforthisgreattutorialFabio!
1

Reply Share

SebastianRoman 4yearsago

Nice
www.organictextures.net
1

Reply Share

Reply Share

BeatrizAtticiati 4yearsago

Greattutorial,speciallythetipwhereyousaySothetipis,lookfor
inspirationandtrytolearnasmuchasyoucanaboutdesignprinciples,
theeffectsafterwardsaretheeasiestpart.
Thereisabacklinktothispostinmyblogathttp://bee
trees.blogspot.com/....
Whatisgooddeservestobeshared.
Beatriz
1

Reply Share

Sean 4yearsago

Greattutorialasusual(allbeitsimplistic).Personally,I'dhaveprobably
justusedthePathfinder>Dividetogettheareaseparately.Retainsthe
"Normal"blendmode,soyoucouldputthebadgeontopofotherobjects
inillustrator(withoutthemaffectingthecolor).
1

Reply Share

Deepetch.com 4yearsago

Wonderfultutorialfromyou..stepbystepexplanationisalsogood..thanks
forsharing..Happyworking.
Deepetch
Clippingpath,masking,vectorandmore

Reply Share

Joker 4yearsago

Greattut.IsthereareasonyoumigratedintoPstoaddthetexture?
4

Reply Share

DiegoGarcia 4yearsago

Greattut!Youcouldalsoapplysometexture(usingmasks)onthetypeto
makeitmakeitintegratebetter

makeitmakeitintegratebetter

Reply Share

John 4yearsago

Nice!ItremindsmealotthisgreatposterbyDrewRoper:
http://inspirationish.com/post...

Reply Share

AdamHayek 4yearsago

Greattutorial...Ihaveincludedalinktothistutorialonmywebsite:
www.pikted.com

Reply Share

JayCray 4yearsago

Greatpostasalways!WelcometotheGoldenState!

Reply Share

AndrewWashuta 4yearsago

Looksawesome,wassoexcitedtoseethisondribble,gladit'sfinallyout.

Reply Share

EricVasquez 4yearsago

Nicetutorial,verystraightforwardandeasytounderstand.

Reply Share

sumomuso 4yearsago

HeyZEE...WelcometotheBAY!!!
You'lllovethecreativediversity.

Reply Share

E_c_studios 4yearsago

Awesomewaytodoadesign,itlooksgreat,thanksforsharingyourtalent
andskillswithus.HopeyoulikeCali,itsanamazingplacetolive,enjoy!!!.

Reply Share

john 4yearsago

greatlookingresult!!!Ihavealsofoundthistuthere
http://www.onetuts.com/x5464isthisalsoyoursite???

Reply Share

7elysium 4yearsago

awesometutorial!
reallylikedthetextureaddedintheend
elysium
vaibhavg.wordpress.com

Reply Share

DanEdwards 4yearsago

Nicetutorial,preciseandtothepoint!

Reply Share

AdamPominski 4yearsago

ihatehowgoodyouare.guessthatswhyyouworkforgoogle,butyour
masteryofdesignhasreallydiscouragedmesincei'llneverbeasgood
asyou
7

Reply Share

RachaelArnott 4yearsago

Greattutorialandthedesignlooksgreat.Ireallylikethefontchoicetoo.

Reply Share

TheFlyerPub 4yearsago

Amazingstuff.Reallylikehowthetutorialisactuallyatutorial...waytoo
manysiteshavegoneawayfromthatandskiphalfthestepsneeded.
1

Reply Share

TD 4yearsago

Ineedalogo

Ineedalogo
www.thomasdodson.com

Reply Share

hangaroundtheweb 4yearsago

GreatTutorialandTechniqueswellexplained!!
Thanksforsharing...
FeaturedinTutorialsoftheweekinwww.hangaroundtheweb.com

Reply Share

WebDesignKC 4yearsago

Fantasticotutorialwhatanawesomefinalimage.Gooduseoffonttoo...
cheers

Reply Share

Raymond 4yearsago

Niceandsimpleforagoodwallpaper

Reply Share

AlessandroBrunelli 4yearsago

Ithinkthetrickwhichstartedallwasthestarwithroundedcorner,then
alsothechoiceofcolor.ThetextitselfWorldWideWebWestisalso
humurousandcontributestothefinalresult.Niceworkandthankyou!
Alessandro
www.mistervector.com
1

Reply Share

antoniohadrovic 4yearsago

yourtutorial,remixed
http://awesomeandcmyk.net/post...

Reply Share

Guest 4yearsago

Nicework.

Justforinformation,youmissedthefontfileinthearchive,so,the.aifile
doesn'topencorrectlyinIllustrator.
PS:http://www.dafont.com/carneval...
)

Reply Share

KyleHyams 4yearsago

Greattutorial.Thatwasfuntomake,butIaddedmyowntexttoit:)

Reply Share

Theo 4yearsago

Verygoodtutorial!

Reply Share

Primecreationz 4yearsago

LOVEDIT
TRIEDIT
DIDIT!
http://primecreationz.devianta...

Reply Share

DownloadBrushes 4yearsago

Nicework,ifalittlebizarre!
freebrushes.co.cc

Reply Share

Rayama 4yearsago

goodtutorial!
:)

Reply Share

Alexandereast1984 4yearsago

howdoyougetthewiderstarratherthansucharigidpointyone?sorry

howdoyougetthewiderstarratherthansucharigidpointyone?sorry
i'manoob
9

Reply Share

Yyguy>Alexandereast1984 4yearsago

HoldOptiondownwhiledraggingoutthestar.Thisconstrainsthe
shapeinsidethesquareyoudragout.
9

Reply Share

SteveVerve 4yearsago

Thisvintagebadgelookslegit.Ilovethetutorialyoudid.I'velearnedsome
thingsinyourtutorial.Thankyousomuch.

Reply Share

Ibvisual 4yearsago

Excellentasalways.

Reply Share

Nicola 4yearsago

Reallycoolidea.Fantastictutorial.Niceresult.

Reply Share

ErikResendiz 4yearsago

Theresultitsprettycool,havegreattechniquesanditsveryusefullforthe
beginnerslikemeonIllustrator,butihaveanadvicespecifyalittlebetter
theparamettersofthecolorsyouuseandtheotherparametersforthe
startool.
thanksanyway,verynice!

Reply Share

Alejo1010 4yearsago

Buenaondaeltutorial!

Reply Share

AnnaDivertido 4yearsago

Nicetutorial!Here'smytry:

Reply Share

Danielfrancis89 3yearsago

ForsomereasonwhenIgotoeffect>stylise>roundcornerandtypein
1.885mmnothinghappensIreallydon'tgetit,doesanyonehaveanyidea
whatitcouldbe?
3

Reply Share

speedracr>Danielfrancis89 3yearsago

Dependsonyouroverallscale:withalargediameter,1.885mm
won'tbemuchofachange.Gointo"Appearance",selectthe
"Roundcorner"effectandincreasethevalue,e.g.to10pt.

Reply Share

Addictmotion 3yearsago

Greattuto.Weuseitforourfacebookpicture
https://www.facebook.com/pages...
THX!

Reply Share

DoronMalki 3yearsago

you'retheman!

Reply Share

Jinndall 3yearsago

Selectthecyanstartwithroundcornersandthengoto

Selectthecyanstartwithroundcornersandthengoto
Window>Transparency.UseMultiplyfortheMode.Theareasthatthe
cyanareontopoftheredwillturntogrey.
"Ican'tgetthisstep,theredneverturntogreyanditjustturnpink.Anyone
cantalkmewhy?Thx
2

Reply

Share

Share what inspires you or what you have done with us on

RAWZ (http://raw.abduzeedo.com). We will select the best
images for the Daily Inspiration on Abduzeedo.

SUBMIT WORK
(HTTP://RAWBDZ.TUMBLR.COM/SUBMIT)

COLLECTIONS
Inspiration (/Tags/Inspiration) (2716)
Daily Inspiration (/Tags/Daily-Inspiration) (2078)
Illustration (/Tags/Illustration) (1213)
Typography (/Tags/Typography) (750)
Photography (/Tags/Photography) (664)
Architecture (/Tags/Architecture) (594)
Design (/Tags/Design) (571)
Tutorial (/Tutorial) (454)
Wallpaper (/Tags/Wallpaper) (424)
Iphone (/Tags/Iphone) (378)
Best Of The Week (/Tags/Best-Week) (377)
Sites Of The Week (/Tags/Sites-Week) (369)
Wallpaper Of The Week (/Tags/Wallpaper-Week) (358)
Android (/Tags/Android) (345)
Freebie (/Tags/Freebie) (336)
Logo Design (/Tags/Logo-Design) (334)
Fonts (/Tags/Fonts) (317)
FFFF (/Tags/Ffff) (317)
Photoshop (/Tags/Photoshop) (312)
Gadgets (/Tags/Gadgets) (307)
Graphic Design (/Tags/Graphic-Design) (304)
Typography Mania (/Tags/Typography-Mania) (297)
Ipad (/Tags/Ipad) (288)
Websites (/Tags/Websites) (279)
Logo (/Tags/Logo) (277)

Houses (/Tags/Houses) (257)

Type (/Tags/Type) (249)
Free (/Tags/Free) (198)
Architect Day (/Tags/Architect-Day) (195)
Product Design (/Tags/Product-Design) (195)
3d (/Tags/3d) (185)
Textures (/Tags/Textures) (183)
Lettering (/Tags/Lettering) (175)
Offices (/Tags/Offices) (174)
Download (/Tags/Download) (174)
Video (/Tags/Video) (173)
Case Study (/Tags/Case-Study) (172)
TTT (/Tags/Ttt) (169)
Digital Art (/Tags/Digital-Art) (157)
Giveaway (/Tags/Giveaway) (153)
Weekly Apps (/Tags/Weekly-Apps) (151)
Interview (/Tags/Interview) (150)
Art (/Tags/Art) (147)
Web Design (/Tags/Web-Design) (143)
Perfect Office (/Tags/Perfect-Office) (142)
Free Fonts (/Tags/Free-Fonts) (138)
IPhone App (/Tags/Iphone-App) (135)
Branding (/Tags/Branding) (120)

(http://feeds.feedburner.com/abduzeedo)
(http://facebook.com/abduzeedos)

(https://plus.google.com/117826467610447927884)

(http://twitter.com/abduzeedo)

Designed by Brazilians | Proudly hosted by (mt) Media Temple Professional Hosting (http://mediatemple.net/)