How To Create a Vintage Postcard Design (Illustrator & Photoshop Tutorial)

Поділитися
Вставка
  • Опубліковано 23 сер 2024
  • In today's Illustrator and Photoshop tutorial I'm going to take you through the design process for creating a vintage postcard design, based on the postcard design style known as "large letter", which was popular throughout the mid-20th century. Often accompanied by the words “Greetings from…”, these postcards presented the name of a place with faux 3D type effects and featured a variety of pictures of that locale clipped within the text face of each letter. We'll use the tools available in Adobe Illustrator and Adobe Photoshop to replicate the visual traits of those original souvenirs.
    📺 WATCH THIS NEXT: How to Create a Vintage Movie Title Text Effect in Photoshop - • How to Create a Vintag...
    Join my mailing list and get a FREE design resources bundle! 📦 spoon.graphics...
    🙏 I don’t have a Patreon, but if you want to support my work, consider becoming an Access All Areas member on Spoon Graphics - spoon.graphics...
    ⭐️ Get Millions of Creative Asset Downloads from Envato Elements - spoon.graphics...
    ► Download my FREE Vintage Postcard Textures - spoon.graphics/...
    Stock photos used:
    unsplash.com/p...
    unsplash.com/p...
    unsplash.com/p...
    unsplash.com/p...
    unsplash.com/p...
    unsplash.com/p...
    unsplash.com/p...
    Fonts used:
    ► Futura Condensed Extra Bold - spoon.graphics...
    ► Signpainter Housescript - No longer on Adobe Fonts. Try Corner Store instead! - spoon.graphics...)
    Deals & Discounts:
    ⭐ Get 20% off ANYTHING in my Spoon Graphics Shop - spoon.graphics...
    ⭐️ Get 10 FREE Images from Adobe Stock - spoon.graphics...
    ⭐ Save 70% off the Heritage Type Vintage Fonts Bundle - spoon.graphics...
    ⭐️ Download this Month's FREE Files from Envato - spoon.graphics...
    Tools & Resources I Use:
    ⭐️ Get Photoshop and other Adobe CC programs here: spoon.graphics...
    🛠️ Where I download the creative assets I need - spoon.graphics...
    ✍️ The graphics tablet I use: amzn.to/2GYNYEc
    🎙️ The microphone I use: amzn.to/3AdkJsp
    📢 The email newsletter service I use: spoon.graphics...
    📈 The tool I use to help grow my channel: spoon.graphics...
    Watch more of my content:
    📺 See all my Photoshop tutorials - spoon.graphics...
    📺 See all my Illustrator tutorials - spoon.graphics...
    📺 Watch my most popular videos - spoon.graphics...
    #Photoshop #PhotoshopTutorial #AdobePhotoshop #Illustrator #AdobeIllustrator #IllustratorTutorial
    Adobe Photoshop & Adobe Illustrator design tutorials from Chris Spooner of Spoon Graphics. Subscribe to learn how to create stunning artwork as I share my tips and tricks in video format.
    Join my mailing list: blog.spoongraph...
    Visit my design blog: blog.spoongraph...
    Follow me on Twitter: / chrisspooner
    Join me on Facebook: / spoongraphics

КОМЕНТАРІ • 154

  • @spoongraphics
    @spoongraphics  5 років тому +6

    Join my mailing list and get a FREE design resources bundle! 📦 spoon.graphics/freebundle

    • @ethiopianboyy9978
      @ethiopianboyy9978 4 роки тому

      Do you do Custom designs? I just want the design not a card.

  • @AddieDub
    @AddieDub 2 роки тому +100

    📣📣 FOR EVERYONE HAVING TROUBLE W EXTRUDE AND BEVEL
    Instead of going to 3D and Materials > Extrude & Bevel go to 3D Materials > 3D (Classic) > Extrude & Bevel (Classic) and it will show the old layout he uses in this video!

    • @IzzyWootonn
      @IzzyWootonn Рік тому +8

      THANK YOU i was so lost for a second lol. this comment needs pinned to the top !!!

    • @angironi
      @angironi Рік тому +5

      You are a lifesaver! Bump this comment!

    • @shotsbyzaya
      @shotsbyzaya Рік тому +3

      You’re so clutch!!!

    • @jakegatewood4791
      @jakegatewood4791 Рік тому +3

      You're the best. thank you!!

    • @mariosbalomenos1353
      @mariosbalomenos1353 Рік тому +3

      Just a small reminder after 1 year of how helpful ur comment was

  • @aliciathibodeaux3821
    @aliciathibodeaux3821 Рік тому +5

    This took me literally an HOUR per MINUTE of this clip haha so like 8 hours total. Never used illustrator in my life. But I did it! THANK YOU

  • @bertkrawl
    @bertkrawl 5 років тому +37

    Are you freaking kidding me?! I've been doing the shadows manually this whole time! Thanks so much for this tutorial! Gonna speed up my workflow tremendously!

    • @Tystarr
      @Tystarr 5 років тому +2

      LOL RIGHT??

  • @spoongraphics
    @spoongraphics  Рік тому

    📺 WATCH THIS NEXT: How to Create a Vintage Movie Title Text Effect in Photoshop - ua-cam.com/video/tWC__udnakk/v-deo.html

  • @christianverberg2488
    @christianverberg2488 4 роки тому +6

    This just helped me out. During quarantine I have been trying to master Photoshop and Illustrator but I did not know what to create and this was very inspirational for me! THANK YOU

  • @Navigator777777
    @Navigator777777 5 років тому +1

    Absolutely loved every minute. Who would not want this as a finished product?

  • @teelabrown4291
    @teelabrown4291 9 місяців тому

    Brilliant how-to. To the point, rich with straightforward, useful techniques. Thanks!

  • @Hey__its__becky
    @Hey__its__becky 5 років тому +3

    THANK YOU for all of your wonderful resources!! I love all of your tutorials and grateful that you've kept them free! Your the BEST

  • @CS-zq1nh
    @CS-zq1nh Рік тому +1

    This tutorial was fantastic. Quick and very to follow. Thanks!

  • @isaacnx
    @isaacnx Рік тому +5

    For the people using Ai 2023, to make the 3d text you have to go to Effect>3d and materials>3D Classic and then to extrude and bevel classic.

  • @isaiah53design
    @isaiah53design 5 років тому

    WOW. You pack so much in under nine minutes. I started this thinking, I'm not slowing my computer opening Illustrator and Photoshop at the same time. You have changed my mind! This is SO worth postponing opening Photoshop a couple minutes! THANKS AND GOD BLESS!

  • @dcreedy23
    @dcreedy23 5 років тому +6

    Thank you! This was the exact tutorial I needed for my latest project!

  • @stereogrIm
    @stereogrIm 4 роки тому +2

    Thank you. Took me a bit longer than 8 minutes but i got there :)

  • @elenaerber
    @elenaerber 2 роки тому

    Thanks. THis is about the best tutorial I've ever used and perfect for my specific project. Sending much gratitude.

  • @graceng7986
    @graceng7986 4 роки тому +5

    Wow Chris, this was VERY difficult for me but I stuck through the tutorial for 5 hours, switching in between your blog post and this video and some other people's videos as I have never done a mask on a layer before (6:00) and I could not Match Color (learned that you have to set the image to RGB Mode) but boy I am SO pleased with my results! Thank you!

  • @isaacquiroz5886
    @isaacquiroz5886 5 років тому +4

    needed this for homework and the outcome is amazing thank u so so much, you just won a new subscriber!

  • @whateverKiara
    @whateverKiara Рік тому +1

    Awesome tutorial. Easy to follow and ended up beautiful! Thank you so so much

  • @karenhodas5899
    @karenhodas5899 Рік тому +12

    Thank you for the tutorial: as of 2022 this tutorial is a bit different with the new 3D and materials. I figured it out up until Object > Expand appearance @ timecode 3:07. It now appears to be a rasterized image instead of a vector. Any tips/tricks/ suggestions

    • @LindsayLipovich
      @LindsayLipovich Рік тому +2

      did you figure it out?

    • @user-rs9gc5tg1t
      @user-rs9gc5tg1t 8 місяців тому

      You need to choose Effect > 3D and Materials > 3D Classic > Extrude and Bevel Classic for this tutorial@@LindsayLipovich

    • @user-rs9gc5tg1t
      @user-rs9gc5tg1t 8 місяців тому

      You need to choose Effect > 3D and Materials > 3D Classic > Extrude and Bevel Classic for this tutorial

  • @agiverreviga4592
    @agiverreviga4592 5 років тому +91

    Basically, the logo of Gravity Falls.

    • @spoongraphics
      @spoongraphics  5 років тому +13

      *Googles Gravity Falls... Ah, yes 😄

    • @SharpDesign
      @SharpDesign 5 років тому +14

      basically, that's why Gravity Falls did it. vintage postcard, small town, creepy beneath the surface..

    • @erenjaeger9902
      @erenjaeger9902 3 роки тому

      Haha 😁

  • @jackgipson9110
    @jackgipson9110 3 роки тому

    Always educational, short & helpful. Thanks!

  • @gabtaraboulsy
    @gabtaraboulsy 3 роки тому

    You are a freaking GENIUS. This is amazing.

  • @HellooDIY
    @HellooDIY 4 роки тому +1

    awesome tutorial! I am always amazed at what I am able to make with your tutorials

  • @NACHOMAN_SAVAGE
    @NACHOMAN_SAVAGE 3 місяці тому

    LOVE IT!

  • @the_ericklima
    @the_ericklima 4 роки тому +2

    I learned so much in this 8 minutes. Thank you so much

  • @leoniemeyer2959
    @leoniemeyer2959 3 роки тому

    I learnt so many techniques in this tutorial - thanks heaps big thumbs up.

  • @cellacreates
    @cellacreates 5 місяців тому

    AWESOME!! Thanks so much!!

  • @cminor4423
    @cminor4423 4 роки тому +1

    You’re a life saver!

  • @SinistarPro_Mike
    @SinistarPro_Mike 5 років тому +1

    Excellent tutorial, and many thanks. Cheers!

  • @asmafarooq8367
    @asmafarooq8367 3 роки тому

    thanks for sharing chris! Fantastic tutorial. Love it. and thank you so much for sharing the vintage textures with us

  • @raymondjones4390
    @raymondjones4390 3 роки тому

    Fantastic! Thank you so much! Excellent tutorial.

  • @SAITAMA-ou9lb
    @SAITAMA-ou9lb 4 роки тому

    cool 8 minute video i finished my sentence 3 hours later congratulations on the work god bless

  • @lcwatts2971
    @lcwatts2971 5 років тому

    Dude! You're a MASTER!

  • @conaib
    @conaib 5 років тому +1

    excelente trabajo, muy bien detallado... gracias por compartir :)

  • @Toscoou
    @Toscoou 4 роки тому

    Amazing video tutorial, very useful!

  • @silva168
    @silva168 4 роки тому

    Thank you! This was so helpful. Really concise and clear.

  • @fruzsinabago34
    @fruzsinabago34 4 роки тому

    thank you for this video! it was very helpful for my flyer design I am currently making

  • @jasminewilliams6026
    @jasminewilliams6026 3 роки тому

    Great tutorial! 🙌🏽

  • @jukehiggins8499
    @jukehiggins8499 2 роки тому +1

    Direct selection tool at 3:20 is not highlighting or selecting anything for me. I've followed all steps perfectly up to this point. What is going wrong??

  • @DylanDhindsa
    @DylanDhindsa 5 місяців тому

    this is so cool!

  • @jeffbenedict3533
    @jeffbenedict3533 4 роки тому

    Great tutorial!! Thank you!!

  • @CattasaurusRex.Tpots_
    @CattasaurusRex.Tpots_ 4 роки тому +2

    thank you for existing, i want to die after attempting it without a tutorial

    • @Woozee_
      @Woozee_ 3 роки тому +1

      glad you're still here with us, pal!

  • @theoddgayout
    @theoddgayout 4 роки тому

    LOVE YOU THANK YOU!!!

  • @princesscupcake4697
    @princesscupcake4697 4 роки тому

    This is really helpful! Thank you!

  • @mel_cam
    @mel_cam 5 років тому

    Excellent tutorial! Thank you!

  • @Hyperdriveuk
    @Hyperdriveuk 11 місяців тому

    The scale matters- if someone is using say inches rather than pixels- also what happens if you're using O's or other curved letters for the stage after the 3D boarder? You can't create the color change using this method.

  • @axelj.bechardo5791
    @axelj.bechardo5791 5 років тому +3

    Gravity Falls Logo now have sense to me :D

  • @tina__colada
    @tina__colada 4 роки тому +3

    Hi, great content! Is there a way to only use Photoshop for this? How would I do the same effect to the text if I had no illustrator?

  • @ambermodena
    @ambermodena Рік тому +2

    I can't seem to expand the appearance even though I've followed every step. This has happened to me before. Any ideas??

  • @Ingramsmartphotography
    @Ingramsmartphotography 2 роки тому +1

    I'm trying to offset my text but when I choose 2 px it appears round, not sharp like yours is. Why would it be doing that?

  • @AffinityInspiration
    @AffinityInspiration Рік тому

    What would be really cool would be doing this on the iPad now.

  • @strodestudios
    @strodestudios Рік тому

    Thank you!

  • @Luciano_mp
    @Luciano_mp 5 років тому

    Amaziing, thank you.

  • @denyson4620
    @denyson4620 5 років тому +2

    Hello, Spoon,i'm your great fan from Russia.You make really good tutorials)
    Can you make pls a video how to personalize your workspace in ai and ps in the most comfortable way)ty

  • @saarbrook
    @saarbrook 2 роки тому

    You’re awesome.

  • @Thunder-kx3tj
    @Thunder-kx3tj 5 років тому +9

    How do you fill the area with black after you inverse it?

    • @batnamz
      @batnamz 4 роки тому +4

      Make sure you have the mask layer selected, then choose the Paint Bucket tool, then black color and click in the border area.

    • @Dr_McDickerson
      @Dr_McDickerson 4 роки тому +3

      I just figured it out, when he says to "fill it with black to erase it from the mask" he means to just hit backspace. Hope this works for you.

    • @flppsmrnv
      @flppsmrnv 4 роки тому

      @@Dr_McDickerson thank you!!!!!!

  • @itsemmy954
    @itsemmy954 2 роки тому +1

    hey, i dont know if its the right place to ask, but I'm having a lot of issues with the 3D and bevel effect. after applying the same options, each and every single individual letter just turns on its side for some reason? is there anything im doing wrong or missing?

  • @alexjakson2369
    @alexjakson2369 Рік тому +8

    workflow broken with new update

  • @hosekii
    @hosekii 3 роки тому

    Hello, if your extrude and bevel wont work because of "not enough RAM", try closing some tabs or other apps. Idk if it works for everyone but it worked for me

  • @MA-xn6jk
    @MA-xn6jk 2 роки тому +2

    Is this normal that i lose quality of the font when i tranfer it to the 3d effect??

  • @richardgarciagastelum8975
    @richardgarciagastelum8975 3 роки тому

    Thanku

  • @richardgarciagastelum8975
    @richardgarciagastelum8975 3 роки тому

    compliment

  • @dalemarushy3870
    @dalemarushy3870 2 роки тому +3

    Was attempting to do this today but CC has changed the 3D tool drastically. Do you see a way it's still possible???

    • @jasongrant305
      @jasongrant305 2 роки тому +1

      same issue here! cant ungroup after expanding appearance.. cant find any answer anywhere

    • @dalemarushy3870
      @dalemarushy3870 2 роки тому +2

      @@jasongrant305 I figured it out, there is a 3D (CLASSIC) option that works. It's at the bottom in the "3D and Materials" menu.

    • @Ingramsmartphotography
      @Ingramsmartphotography 2 роки тому +1

      @@jasongrant305 I had the same problem but I'm struggling with the offset path, mine is supper bubbly while in the tutorial it's very sharp. Any advice?

  • @josh9972
    @josh9972 5 років тому +5

    How did you add the white background to the secondary text?

    • @BETTER.ART.
      @BETTER.ART. 5 років тому +1

      Might be a white colored drop shadow, or just a copy of the text placed in behind a few pixels below.

  • @titanjedi
    @titanjedi 5 років тому

    awesome! thanks! one of the cards was from where i'm at...

  • @wynterleah1
    @wynterleah1 2 роки тому +3

    Does the step at time stop 3:20, where you change the color with the direct selection tool, still work in the latest version of AI?

    • @AndyTurba
      @AndyTurba 2 роки тому +1

      Yes it does, I have the '22 version - it took me a while to get through this step too :) The magic is in not selecting '3D and Materials -> Extrude and Bevel', but you should apply the effect through '3D and Materials' then '3D (Classic)' then 'Extrude & Bevel (Classic)'. Hope that helps!

    • @quinnffxiv
      @quinnffxiv Рік тому +1

      @@AndyTurba THANK YOU i was having so much trouble with this

    • @AndyTurba
      @AndyTurba Рік тому

      @@quinnffxiv you’re welcome, glad I could help 😊

  • @saramostaccioli5313
    @saramostaccioli5313 4 роки тому +1

    Hi, I can’t match the color, the command is not available (and I’m following all the instructions). Do you have any advice?

  • @joshfatal
    @joshfatal 2 роки тому +1

    how do you apply the grey color to the outlines? I try that and it does nothing.

  • @zetsuyah42
    @zetsuyah42 5 років тому

    thankyou so much

  • @CitlalliJSM
    @CitlalliJSM Рік тому +1

    The program won't let me select the bottom extruded portions, so I can't add the orange colour :(

  • @christinapeery7669
    @christinapeery7669 2 роки тому +1

    I made this last year and I need to do it again this year but now with the new updated it is 3d and materials and it doesn't give me the option to change the surface option. Do you know how I could fix this? :(

    • @emilygrigg1496
      @emilygrigg1496 Рік тому

      With the new updated version, go to Effect -> 3D and Materials -> 3D (Classic) -> Extrude & Bevel (Classic)... Hope this helps!

  • @chaeandreen
    @chaeandreen 3 роки тому +1

    so @ 3:23 he direct selects the bottom part of the letters- letter O does not have a bottom part and is one with the sides. what am I doing wrong??

  • @paperjourni8964
    @paperjourni8964 3 роки тому +2

    Awesome video! Thank you! May I ask how and with what did you scan the postcardbackgrounds ? Trying to archive mine but getting bad results...

    • @laurasilvestri4457
      @laurasilvestri4457 Рік тому

      I achieved this by selecting the white around the postcard edge with the magic wand with a tolerance of 10

  • @aidansmith1041
    @aidansmith1041 3 роки тому

    thanks!

  • @timothyj67
    @timothyj67 2 місяці тому

    Im using Illustrator 28.?? and when I remove shading in the bevel and extrude it just makes a square around the text ..doesnt define the edges at all. Which version of Illustrator are you using?

  • @mazafakabitch1113
    @mazafakabitch1113 5 років тому +2

    Looks like a Tropico 6 load screen, except of the drawn backgrounds

  • @graceng7986
    @graceng7986 3 роки тому

    Thank you for this tutorial Chris, do you teach this using Affinity Designer?

  • @kegi45
    @kegi45 5 років тому +2

    do you think you can make a video of How To Create an Animated Neon Sign Effect??? Please

  • @etiennelabbouz4374
    @etiennelabbouz4374 4 роки тому

    Thanks for this great tutorial! Can you use videos/moving images for the background and to fill in the individual letter layers instead of stills and export it to Premiere?

  • @LogoBallers
    @LogoBallers 4 роки тому +1

    Can I do this tutorial without illustrator? I only have Photoshop

  • @davidnelson3757
    @davidnelson3757 4 роки тому

    What would you charge for graphics work to produce a cover for a calendar , i'm looking for a seaside postcard look .

  • @abc1953
    @abc1953 4 роки тому

    Hi
    Why don't you make clipping masks of landscape photos in Illustrator? 🤔🤔

  • @akramben4978
    @akramben4978 3 роки тому +1

    In 6:00 how did u fill the area with black? Help me please 🙏

    • @MrLiver8
      @MrLiver8 3 роки тому +4

      Alt+Backspace on Windows, Option+Delete on Mac

    • @akramben4978
      @akramben4978 3 роки тому

      @@MrLiver8 thanks 🤩

  • @SamSprague
    @SamSprague 3 роки тому

    I have no Object menu in my Photoshop, and most of the tools you used are missing. Did Adobe eliminate these functionalities?

  • @hassantanveer96
    @hassantanveer96 Рік тому

    Is it possible to do all of this in Illustrator?

  • @InappropriateShorts
    @InappropriateShorts 5 років тому +2

    Skip to @1:33

  • @shotsbyzaya
    @shotsbyzaya Рік тому +2

    How do you do no shading in AI2023?

    • @user-wx3wu7tx8h
      @user-wx3wu7tx8h Рік тому

      I just figured it out today. You dont go to 3D Extrude and Bevel but there is a setting 3D (Classic). Its the last option

  • @ephotosaver
    @ephotosaver 5 років тому +2

    I don't have Illustrator can it be done in photoshop only

  • @bmas44
    @bmas44 2 роки тому

    everytime i try to bevel, it gives me an error that says "Error occurred while processing the appearance of an object". does anyone know why? 😭😭

  • @westernpigeon
    @westernpigeon 4 роки тому +1

    i dont get it how do your lines come out more thick like at 2:42. My lines are so close to the letters

    • @Guazi
      @Guazi 4 роки тому +2

      Same

  • @katebartlett9763
    @katebartlett9763 5 років тому +1

    Great tutorial. Don’t have illustrator. Could you show how to create text in photoshop, would be huge. Thanks

    • @git80
      @git80 5 років тому

      This would be a huge help

    • @olil773
      @olil773 4 роки тому

      There's a free trial for illustrator
      i used that

  • @ayomidesowole
    @ayomidesowole 4 роки тому +1

    Is anyone else having trouble with the match color? It is not allowing me to select it

    • @louisehardison9263
      @louisehardison9263 4 роки тому

      I did it the first time and now that I’m working on another graphic it’s not letting me even though I’m doing the exact same things.

  • @gracegunn1
    @gracegunn1 2 роки тому +1

    Anyone know how to turn on ‘no shading’ because I think I’m using the new version and I can’t find the button

    • @troymorgan5223
      @troymorgan5223 2 роки тому

      Did you ever find the answer to this question? I am having the same issue. I go to Lighting in the newest version but I do not see any option to turn off shading, or do "no shading." I can only guess that the settings need to be turned down, or something like that.

    • @troymorgan5223
      @troymorgan5223 2 роки тому +5

      I just found it! Effect > 3D and Material > down at the bottom is: 3D (Classic) > Extrude & Bevel (Classic) > then you can pick all the settings as the video describes

    • @juliethblanco
      @juliethblanco 2 роки тому

      @@troymorgan5223 tysm! i was having the same problem! u literally was more helpful than my graphic design teacher XD

  • @kaldmigbaregrevaxel
    @kaldmigbaregrevaxel 5 років тому

    Hey Chris is this a recording from 08/05 - 2017 :) when you made the Tutorial for your blog ? or have you remade it and the recorded it ? It is so Funny i have made 3 artworks of that kind a month ago. I always love to see other designers workflow. because I can always learn something new or get inspiration how to approach a design/artwork process in another way that i normaly would do
    Keep up the good work.
    By the way you would be a wonderfull skillshare teacher if you had nothing else to do lol

    • @spoongraphics
      @spoongraphics  5 років тому +2

      Aksel Larsen It’s a fresh remake of that old tutorial from my website but in video format. Whenever I’m stuck for topic ideas I like to scroll back through my archives and pick out an old written tutorial I can recycle!
      It’s great that you remember back that far! I’ll have to go back a little further next time ☺️

    • @kaldmigbaregrevaxel
      @kaldmigbaregrevaxel 5 років тому

      @@spoongraphics I think it is a good idea to make the in video format as well :) when you are stuck of topics. :)

  • @danteantognetti3213
    @danteantognetti3213 4 роки тому

    match colour isn't working for me

  • @harsha_sen_7998
    @harsha_sen_7998 4 роки тому

    My send to back doesn't workk PLEASE HELLPPPP

  • @jenniferkiefer5882
    @jenniferkiefer5882 7 місяців тому

    I need this tutorial with Inkscape and Gimp 😭 (help me i'm poor)

  • @jeromechester53
    @jeromechester53 2 роки тому

    Where’s the one specifically for photoshop?

  • @LnnTDesigns
    @LnnTDesigns 5 років тому

    Re-upload?

  • @TheHowlto
    @TheHowlto 2 роки тому +1

    absolutely cannot get extrude to work grrrrr this is why i hate illustrator!!! I carefully select the outline layers and send to back, i follow your instructions STEP BY STEP and it still doesnt work, all i get is the main test the same colour as the background have tried soooooooo many times now and it makes ZERO sense