Tutorials: Create a Colorful Vibrant Typographic Wallpaper

Click to Enlarge

1. Create a new document in Photoshop, size: 1280×1024, resolution: 300dpi.
2. Using rectangle tool (U) draw two rectangles and fill them with black. (I filled mine with a grey just to see how to arrange them)



3. Rasterize both layers. (Right-click on layer -> Rasterize Layer)
4. Hold Ctrl key and click on the thumbnail of the first layer to select it.
5. Grab the Gradient Tool (G), select the Radial Gradient option and use these colors #000000 and #1e1e1e. Apply the gradient like shown in the next image.



6. Repeat step 4 and 5 for the second layer.



7. Press Ctrl + D to deselect everything.
8. Open Xara 3D.
9. Write your text. NOTE! Every letter should be written seperately because in Photoshop we want every letter in different layer. Font I used is 100pt (size) Franks Regular (Download)



10. With Selector Tool (V) select all letters and change their color to 10% Black.



11. Keep selecting all letters and using Extrude Tool (E) apply the follwing effect:



12. Now this step is a little bit annoying. We have to change the lightning colors for each letter. You see the 3 points of light for each of the letters. (3 arrows) We have to change the green and blue ones. Double click to change the color. (if anyone knows a better way to do this step please let me know)


Everything should look like this:



13. Another annoying step! For each letter you have to create a new Xara document and drag and drop the letter inside it. After you are done, each document containing a letter has to be exported in PSD format. File -> Export -> Save as: .PSD.

Export settings:
Resolution: 300 DPI and make sure you check: Export just visible objects.

14. Returning to Photoshop! Load all the PSD’s in Photoshop and drag and drop each letter in your document.
    Arrange the letters.



15. We have to make the text smaller. Select all the letters and Free Transform them until you get the desired result.



16. Now lets color things a little bit. Right click a letter layer. Go to Blending Options -> Gradient Overlay and use the following settings:
    The colors that I used for the gradients
    • #feae31 and #efe457
    • #d0f359 and #abdc28
    • #f2835c and #e55b2b
    • #eb3dee and #fc85fb
    • #2cafe3 and #81dbff



17. Duplicate the O, M, A layers, bottom letters. (Select a layer and hit Ctrl + D to duplicate)
18. For every duplicated layer hit Ctrl + T (Free Transform) and do the following:



19. Repeat step 18 for the rest of the bottom letters.



20. Select the duplicated layers, Right Click them and press Merge layers.
21. Add a mask layer on the layer resulted from step 20.



22. Select Gradient Tool and use a Foreground to Background Gradient



23. Apply the gradient as I did:





24. Right click on a letter layer. Choose Blending Options -> Pattern Overlay and apply the following values:



25. After you are done with the pattern. Right-Click on Pattern Overlay and choose Create Layers.



26. Choose Eraser Tool (E) with the size of 20 – 30px and hardness 0% and delete the area pointed in the next image (make sure you have selected the new layer that says Pattern Fill):



27. Repeat the previous step for all the letters.
28. For the smaller text I used Century Gothic (favorite font) with the sizes of: 9, 5 and 4.5pt.

You will need 7Zip to unpack this file!
Download the PSD file here.

Thanks for taking your time on making this tutorial.
Have some questions just leave a comment and I will answer them shortly!

Tags: colorful, Tutorials, typographic, vibrant, wallpaper