This tutorial will teach you how to create a really interesting and unique typographic wallpaper in few easy steps. Even a beginner will be able to recreate this effect, and add their own style and thought in it;

This article should be one time stop for everyone that want’s to learn more about typography. Go trough table of contents and see what could interest you. But first the promised tutorial. Let’s get started!

[tip]Did you know after we created this tutorial DJ Khaled – Victory CD cover was created using this exact tutorial? There is no other explanation why it is so similar! Super cool![/tip]

Typography Wallpaper Tutorial CD cover


Table of Contents:

  1. The Coolest Typography Wallpaper Tutorial
  2. 45 Great Typography Examples
  3. 50 Awesome Examples of Minimal Typography

Are You Ready To Get Started With The Coolest Typography Wallpaper Tutorial Ever?

I am sure you will enjoy and learn a lot from this tutorial! You will learn how to create good looking background, add lightning effects and work with fonts, sizes, colours to make the necessary places stand out!


 

preview-create-great-typographic-wallpaper-photoshop

Good, because we are!

Let’s dig in!

Step 1 – Creating background

First, open a blank document with size 1920×1200 pixels. Fill the background with color #242424. Duplicate the background layer and name it Film grain. Then go to Filter – Artistic – Film Grain. Apply settings shown below.

filmgrain-how-to-create-typographic-wallpaper

Set layer opacity to 50%. So far your wallpaper should look like this.

filmgrain2-how-to-create-typographic-wallpaper

Step 2 – Lightning

Create a new layer and name it Lighting. Then select the Radial Gradient Tool with black and white color.

radialgradient-how-to-create-typographic-wallpaper

Draw the gradient as shown below.

radialgradient2-how-to-create-typographic-wallpaper

Set layer to Overlay and opacity to 55%. You should have something like this.

radialgradient3-how-to-create-typographic-wallpaper

Step 3 – Adding Brushes

Download Adys grunge brushes, create new layer and brush around a little bit. Set layer opacity to 15%. Download Concrete texture, place it in your document and set it to Overlay and opacity to 10%.

backgrounddone-how-to-create-typographic-wallpaper

Step 4 – Creating Main Text

Download BEBAS font, create a new layer and type your text. I chose 350 pt size with smooth mode. Color really doesn’t matter. Name layer PEACE.

text1-how-to-create-typographic-wallpaper

Step 5 – Add Background Text – Important Step

Lower your text opacity to around 15%. Create a new group (Layer – New – Group) and name it Words. Create new type layers in this group and start typing. Try to use different fonts and sizes. Try to avoid large spaces between words. The fonts I used:

  • Arial
  • Cambria
  • Candara
  • Impact
  • Tahoma
  • Times New Roman
  • Verdana
  • And little bit more default fonts
  • Some free fonts from dafont, Colaborate, Extravaganzza

text2-how-to-create-typographic-wallpaper

text3-how-to-create-typographic-wallpaper

text4-how-to-create-typographic-wallpaper

text5-how-to-create-typographic-wallpaper

text6-how-to-create-typographic-wallpaper

Step 6 – Creating effect

When you’re done duplicate your Words group (Layer – Duplicate Group) and merge it (Ctrl+E). Make invisible your unmerged Words group. Find your large text layer (in my case it’s PEACE), hold CTRL (Command on mac) and click on layers thumbnail. That should load it’s selection.

selection-how-to-create-typographic-wallpaper

Then click on your merged words layer and press Ctrl+J. If you make invisible your merged Words layer (and unmerged Words group is still invisible) you should get something like this.

peaceonly-how-to-create-typographic-wallpaper

Step 7 – Create Background Text Effect

Make merged Words layer visible again and apply following layer style.

coloroverlay-how-to-create-typographic-wallpaper

Set layers opacity to 30%.

textend-how-to-create-typographic-wallpaper

Then duplicate merged Words layer and place it under merged Words layer. Then go to Filter – Blur – Motion Blur and apply following settings.

motionblur-how-to-create-typographic-wallpaper

Set layer opacity to 15%.

motionblur2-how-to-create-typographic-wallpaper

Add text under your title if you want.

final1-how-to-create-typographic-wallpaper

Step 8 – Final touches

Locate your PEACE text layer and lower its opacity to 4%.

final2-how-to-create-typographic-wallpaper

Create new layer, go to Image – Apply Image, then go to Filter – Render – Lightning Effects and apply following settings.

lightningeffects-how-to-create-typographic-wallpaper

Set layers opacity to 30%, and we’re done. I also added a gradient map to one of the letter layers. Here’s final result. Click to enlarge.

final570-how-to-create-typographic-wallpaper

Download wallpaper (various sizes):

You can download *.psd version as well here! Enjoy!

Now let’s look at some great typography examples to get more creative ideas!


45 Great Typography Examples To Inspire You!

This time we’re gonna show you some truly great typography examples. This can be used many places; in magazines, advertisements, websites, logos and more. These great pieces of typography design will show you that there are no boundaries and that you can make almost anything with text if you have a good portion of creativity and talent.


Typography Examples To Get You Started On Your Next Design!

Typography can in today’s terms be so much more than what you find in a book or magazine. It’s turned into a very inspiring form of art, and there are many great pieces out there. Many times they can be mixed with either other graphical elements or some sort of poem or saying. Here we’ve picked out 50 pieces that can inspire you and maybe give you some new ideas.

Enjoy!

1. Burdened by ~dylanroscover

2. En Masse by ~clockblock

3. your type by ~O-nay

4. I Speak Alone by ~Gordorca

5. Beauty by *mrgraphicsguy

6. I am not myself by ~OrigamiSuicida

7. What Lies Within by ~um0p3pisdn

8. Got a Light by ~DesertViper

9. Typography by ~e-emoo

10. John Lennon in Type by ~Dencii

11. Come Back To Me_1600x1050 by ~Dmaghar

12. Lying by =RenzGFX

13. Steven Paul Jobs by ~dylanroscover

14. Instant by *Shinybinary

15. The Raven by ~swordfishll

16. DUB.TILL.DAWN by ~ICDP

17. Lion by ~rickystuffedpie

18. The Garamond Fox by ~StolenStars

19. Think Differently London 2 by *crymz

20. Martin Luther King Jr. in Type by ~Dencii

21. Lemons by ~Beautelle

22. I love typography by =mindCollision

23. Triumph over Chaos by ~MasterC88

24. Big Yellow taxi by ~TonyFbaby

25. Love is an accidental gift by ~mujiri

26. Milking by ~buioaloha

27. Broken Stars by `shebid

28. The Fall of Sin – Extended by =Anton101

29. Bang. by ~Q8Toba

30. ARTRIBUTE header by ~H3AD3AD

31. science typo by =Mirousensei

32. Imagine by =blissart

33. Conceptual Art by ~AagaardDS

34. CMYK by ~TheSpinxSage

35. TYPOGRAPHY with Helvetica by ~sarakhanoom

36. Highway of Endless Dreams by ~Axytrix

37. Addiction by ~tokarnia

38. Typography by ~AilesdeMort

39. The Dark Knight by *Prain

40. love’ by ~drinadesign

41. creativity is my thing by *razangraphics

42. love and knowledge by =CHIN2OFF

43. Doing it daily by ~northcoaster

44. Nothing Less Than Forever by ~jawalyfe

45. social networking by ~IigouthamiI

46. Typo by ~KalvinK

We hope you’ve gotten some inspiration from these great examples that show the diversity that can be found within typography. Remember that beauty is in the eye of the beholder, maybe you’ve liked some and disliked others. We would also love to hear your opinions. Which is your favorite? If this is not enough, we have prepared some great examples of minimal typography design. Check it out!


50 Awesome Examples of Minimal Typography

Typography is an art, not just simple art but combination of different typefaces merged into graphics to provide a bewitching output, which is without any doubt an Art. When minimalistic designing approach is integrated with composition of type, output can be jaw-dropping. Today we are featuring 50 examples of minimalistic typography designs for inspiration, most probably they will make your jaw-drop.


 

1. Feelin’ It

-Minimal-Typography-Inspiration

2. Focus

-Minimal-Typography-Inspiration

3. Give Life A Chance

-Minimal-Typography-Inspiration

4. Happy Birthday

-Minimal-Typography-Inspiration

5. Make Good Typo

Minimal-Typography-Inspiration

6. Make Clever Simple and Simple Clever

Minimal-Typography-Inspiration

7. Love to suck

Minimal-Typography-Inspiration

8. Johnny Kon

Minimal-Typography-Inspiration

9. HelveticaLove

Minimal-Typography-Inspiration

10. Hello you asshole

Minimal-Typography-Inspiration

11. Hell Yeah!

Minimal-Typography-Inspiration

12. Happy Birthday America

Minimal-Typography-Inspiration

13. Remember

Minimal-Typography-Inspiration

14. Minimo

Minimal-Typography-Inspiration

15. More fish

Minimal-Typography-Inspiration

16. Morrison Solid

Minimal-Typography-Inspiration

17. Mother Nature

Minimal-Typography-Inspiration

18. My valentines

Minimal-Typography-Inspiration

19. Portfolio Cover

Minimal-Typography-Inspiration

20. Pretty Sure

Minimal-Typography-Inspiration

21. Progressive

Minimal-Typography-Inspiration

22. Red

Minimal-Typography-Inspiration

23. Ron Paul is Truth

Minimal-Typography-Inspiration

24. Schleife

Minimal-Typography-Inspiration

25. Sliyanie

Minimal-Typography-Inspiration

26. Spam

Minimal-Typography-Inspiration

27. Sweet nothings

Minimal-Typography-Inspiration

28. The Dots

Minimal-Typography-Inspiration

29. The plan

Minimal-Typography-Inspiration

30. Type Veteran

Minimal-Typography-Inspiration

31. TypoConcept

Minimal-Typography-Inspiration

32. Untitled

Minimal-Typography-Inspiration

33. USA

Minimal-Typography-Inspiration

34. Words of love

Minimal-Typography-Inspiration

35. 24 × 42 grid

Minimal-Typography-Inspiration

36. A little Birdie told me.

Minimal-Typography-Inspiration

37. Act Like Big City Kids

Minimal-Typography-Inspiration

38. This is Art

Minimal-Typography-Inspiration

39. Art is form and content

Minimal-Typography-Inspiration

40. ArteMISIA

Minimal-Typography-Inspiration

41. Cheap

Minimal-Typography-Inspiration

42. Cleavantage

Minimal-Typography-Inspiration

43. Computer Arts

Minimal-Typography-Inspiration

44. Contains

Minimal-Typography-Inspiration

45. Ding

Minimal-Typography-Inspiration

46. Do

Minimal-Typography-Inspiration

47. Dracula book cover

Minimal-Typography-Inspiration

48. Driven

Minimal-Typography-Inspiration

49. Dual

Minimal-Typography-Inspiration

50. Everything

Minimal-Typography-Inspiration

Editorial Team

Written by Editorial Team

67 Comments

  1. This is great. Thank you so much! I made one using the word “DREAM” and it is so cool!

    Reply

    1. Dainis Graveris January 7, 2016 at 08:23

      Awesome Gel! :) Yeah, Dream is pretty cool :) That effect was used even on one rapper’s cd album.

      Reply

  2. one word – AWESOME!! thanks a lot! its so simple… used it to make a t-shirt design.. came out really well.. thanks a lot!

    Reply

    1. Dainis Graveris May 7, 2012 at 04:52

      Where is it? :) Show it of? :)

      Reply

  3. Supeer wonderful tutorials !!
    At first, it’s very hard for me to understand the step 6, but after a million times, I already realize that the problem is my common sense ! hahaha THANK YOU !! :D

    Reply

  4. i cant get step 6… anyone can answer this?

    Reply

  5. Thank you for this! I did not do it on Photoshop but I wrote out in sharp bubble letters with eraseable pen, wrote in the inside of the lines then erased the lines! WaaLaa!! I have typography on paper via pen :D

    Reply

  6. I just want to thank you for the tutorial. It has helped me a lot.

    Thanks! You are the best!

    Reply

  7. suddently i became expert in design..

    thanks for the tutorial..

    Reply

  8. hey nice tutorial but how do you do step 6
    thanks

    Reply

  9. Thanks A Lot for the tutorial !!! Great, Awesome, Brilliant !!!

    Reply

  10. Excellent! THANKS!!

    Reply

  11. thank for tutorial

    Reply

  12. As a complete beginner, I tried all the logical places to change the background color but all failed to do so. I have been unable to find instruction on the web that allow me to change the background color in CS5 without creating layers or running scripts, etc. Why is it so difficult to do?

    Reply

  13. Nice Tutorials & easy

    thanks a lot.

    Reply

  14. Hey this is going to sound stupid. But when i try the third step my gradient is too big for the piece. When i try the linear it looks alot similar to the example but still way to big.

    Help!

    Reply

  15. Your technique was used on the cover of a rap album! Look up DJ Khaled-Victory. Great tutorial.
    http://planetill.com/wp-content/uploads/2010/03/dj-khaled-victory.jpg

    Reply

    1. Dainis Graveris July 20, 2012 at 14:37

      Wowhow, Daniels is famous now! nice!

      Reply

  16. Very good manual…. and very easy. I like it. Thanks

    Reply

  17. Thank you so much for this! I used this to create a Coming Soon page for a site.

    Reply

  18. I don’t understand this bit:

    “When you’re done duplicate your words group (Layer – Duplicate Group) and merge it (Ctrl+E). Make invisible your unmerged words group. Find your large text layer (in my case it’s PEACE), hold CTRL (Command on mac) and click on layers thumbnail. That should load it’s selection.”

    When I click Ctrl and then the large text layer I don’t get the selection around it.

    Reply

    1. me too :(

      I can’t do the other steps :((

      Please help me !

      Reply

    2. Rean John Uehara August 20, 2011 at 14:11

      Ah, I’m no expert, but if you’ll notice the very little thumbnail beside the layer, that’s what you’d have to click. CTRL+ click on the little thumbnail of the layer, it should select the whole selection of the image of that layer.

      Reply

    3. I don’t get it too. It is weird.

      Reply

    4. I did not understand it at first either, so what I did was create a new Group and move all my words by dragging them into the group folder (I’m sure there’s an easier way). Then I double clicked and duplicated the group and moved them around with my cursor. Hope that helped.

      Reply

    5. When you figure it out let me know. I dont understand the Duplicate..and layer thumbnail step….help help

      Reply

  19. Awesome! Finally, I know now how it is done. It’s pretty simple for a fantastic design, really. Thanks for sharing this!

    Reply

  20. When I press Control J it just duplicates the layer. It doesnt look like the picture. Please help

    Reply

    1. have you made your words layer invisible? (u can do that by pressing that eye button located left of the layer)

      Reply

  21. I produced one using the word “History” and focused on U.S. history. I did it using GIMP and you can find it here:

    http://ebturner.deviantart.com/art/History-Typography-Wallpaper-213201981

    Reply

  22. Heres mine. I found a few steps were hard but I worked through it.

    Reply

  23. I’m an instructor at a local college and one of my students used the technique above to create a very beautiful piece… The piece was so spectacular that it was entered into a contest and won “best of show.” My question is, if my student used this technique to create his own design, and it looks similar to the one used in this tutorial, would that be considered a “copyright breach?”

    Reply

    1. Rean John Uehara May 13, 2011 at 11:25

      Hi, I am not an expert when it comes to copyright, but I believe it would not an issue. Although it would be good if your student add a little tweak on it, since there are lots of tutorials that teaches people design techniques, it won’t hurt to merge two or more. Again, I don’t see any problem with it when it comes to copyright..nobody owns it anyway.

      Reply

  24. Tip: To make it go fast, type alot of words first, then use the marquee tool to cut out one word at a time, then, once a word is marked press and hold CTRL/CMD and move the marked word to where you want it and continue like this with all words! :)

    Reply

  25. I am having a problem with this step. Once I press Ctrl + J and then make B and C invisible only the large text layer with no small text is showing in my letters. I am using a MAC and Photoshop CS3.

    Reply

  26. this is great, thank you for sharing!

    Reply

  27. I Loved the tutorial. I tried to do but yours it’s better so far. Well, I’m a beginner, but someday I’ll do something like this. Congratulations, it’s awesome. Kisses from Brasil ;*

    Reply

  28. Heya I tried this and it went really well so thanks a lottt!
    However at the end when you added text underneath what font did you use?

    Reply

  29. GOOD ONE..!!! and thanks for providing the psd of this as well..

    Reply

  30. Fantastic tutorial. You rock. Thanks a million!

    Reply

  31. Like Tea, I’m stuck at the step: Then click on your merged words layer and press Ctrl+J. If you make invisible your merged words layer (and unmerged words group is still invisible) you should get something like this.
    If I click Ctrl+J I get a new layer… but the next step doesn’t look like the picture.

    PS: I have a MAc so instead of Ctrl I use CMD.

    Reply

    1. So you have your big text layer -A
      You have group with all small text layers in it – B
      You have merged duplicate of this group – C
      CMD+ Click on A
      Click on C
      Press CTRL+J
      Make invisible B and C
      You should have something like in picture.

      Reply

      1. This doesn’t work for me. In which order should the layers be? Or does that not matter?

        Reply

  32. I want to write thank you in Russian :

    SPASIBO

    Reply

  33. This is just great! I love the effects applied on the text. I want it for my logo. Wow!

    Reply

  34. Well done, Love the tutorial and the wallpaper. One of the Best!!!!

    Reply

  35. I tried it, worked just fine. But I tried to change font-size to 300 and use more letters, that didn’t work well, as the letters are too small to be really filled be small words, only bits and pieces flying around. Font-sizes are key to the design of this background concept.

    Reply

  36. Very nice tutorial! Easy&Cool

    Reply

  37. amazing techniques you sharing for create an amazing typography effect using Photoshop.

    Reply

  38. Amazing result! The tutorial was written very well and also very helpful ! thanks

    Reply

  39. Awesome guide for the wallpaper creation Daniels..Looking forward for more such tips from you!
    Thanks

    Reply

  40. Amazing Tutorial! I bookmarked this site after about a second of seeing it. Bloody brilliant!

    You, mate, are awesome! Thankyou!

    Reply

  41. DUDE. Amazing tutorial!!! i love it, probably the best one i have EVER done! and this is the first comment i have ever posted on a tutorial! so i’d feel pretty special if i were you haha! TY

    Reply

  42. Laurent JOUVIN December 8, 2009 at 04:39

    Wow! I love that. This is a very cool effect. Thank you very much for sharing.

    Reply

  43. Hi,
    Really interesting. I was wondering for awhile how to do this. Thanks. :)

    Reply

  44. Nice tut. Thanks!

    Reply

  45. Great tutorial! I love the results.

    Reply

  46. Great tutorial, I think is a really awesome the way you use to create the main word.
    Thanks

    Reply

  47. Great Tutorial! If you need some more Typo-Stuff, don’t miss Best of Typo-Blogs!

    Reply

  48. I’m really surprised with the effect that step 3 did. I always use filter noise for the effect likes this one. Great tutorial!

    Reply

  49. Really nice tutorial, I would recommend adding some depth to the plain though. The text just seems blunt off the bat.

    Adding some lighting and depth could produce a warm and comfy outcome.

    Keep up the good work none the less.

    Regards,
    Jacques

    Reply

  50. Great tutorial Daniels, thanks.

    Reply

  51. I’ve always wanted to create a type-based design such as this, but never had the time or chance. Great inspiration! I will be creating something like this the moment I get a chance. Thanks! :)

    Reply

  52. Great tutorial for beginners looking for some helpful tips.

    Reply

  53. It realy great, Danels! You’re good! Love your post and waiting other! Thanks a lot!!! Good luck! :)

    Reply

  54. It’s realy great, Daniels! Thanks!!! Good luck and waiting for new posts :)

    Reply

Leave a Reply