Photoshop Guide: How To Create Sleek Futuristic Text

Photoshop can be used to create some awesome effects. Photoshop’s Text and Layer Tools really prove to be handy for many designers. Typography in itself is a lot powerful that what many people think. Creating text effect for titles and posters of you designs could surely work as a charm for your clients. In this lesson, we will go through all the steps in creating sleek futuristic text. This will zap some instant awesomeness to your print-ready postcards and posters. So just carefully read the steps below and learn what you can do for your titles. You could view another fantastic article on Glossy Futuristic Text Effect at TexTuts.

In the meanwhile you may want to read some our other Photoshop and Tutorials related articles

Final Image Preview

Photoshop Futuristic Text Tutorial

Photoshop Text Tutorial: Step 1

First, create a new document in Photoshop. It would be good to setup a large sized dimension so that you can create a fairly large text graphic that you can scale down better later. Also, it is better to use a large resolution (around 300ppi) so that the quality of the graphic can be maintained in printing.

Photoshop Futuristic Text Tutorial

Photoshop Text Tutorial: Step 2

After setting up a new document, create a nice background setup for your graphic. A simple gradient color with your chosen color theme should suffice. For our example, we just used a gradient color with some lighter colored brush strokes as an accent. Just create the ideal background for you.

Photoshop Futuristic Text Tutorial

Photoshop Text Tutorial: Step 3

Now, type in your text using the TYPE TOOL. Make sure you use a fairly thick type font style. For this effect, it is also recommended that you use rounded type fonts as it gives that sleek curvier feel to the effect. Just look for the best and most appropriate font that you need for your theme. For our example, we have chosen a futuristic rounded type font style with a light blue font color.

Photoshop Futuristic Text Tutorial

Photoshop Text Tutorial: Step 4

Once the text is set, press CTRL+J to duplicate your text layer. Then, reduce the FILL opacity of this duplicate to 0%.

Photoshop Futuristic Text Tutorial

Photoshop Text Tutorial: Step 5

Now, go back to your original text layer. Double click on it to access the Layer styles and blending options. Then, click first on the drop shadow style and apply the following properties.

  • Blend Mode: Multiply, Color: #51626a
  • Angle: 30 degrees
  • Distance: 17px
  • Size: 8px
  • Rest Default

Photoshop Futuristic Text Tutorial

Photoshop Text Tutorial: Step 6

Then, tick the Bevel and Emboss checkbox. Apply the following settings to its properties.

  • Depth: 500%
  • Size: 43px
  • Gloss Contour: Steps, Anti-Aliased

Photoshop Futuristic Text Tutorial

Photoshop Text Tutorial: Step 7

Click also on the Contour option. In its settings, set the contour to “Half Round” and then tick the Anti-Aliased tick box.

Photoshop Futuristic Text Tutorial

Photoshop Text Tutorial: Step 8

Great! That should give you something pretty futuristic.

Photoshop Futuristic Text Tutorial

Photoshop Text Tutorial: Step 9

Next, we will add some more layer styles. This time on the copy of our text layer. (the one we reduced the fill to) Simply double click on it to access its layer options. Then tick the Bevel and Emboss option and choose these settings:

  • Depth: 215%
  • Size: 18px
  • Gloss Contour: Cove-Deep, Anti-Aliased
  • Rest is default

Photoshop Futuristic Text Tutorial

Photoshop Text Tutorial: Step 10

Then, click on the Contour checkbox. Choose the contour “Steep Slope – Rolling” and tick the anti-aliased box.

Photoshop Futuristic Text Tutorial

Photoshop Text Tutorial: Step 11

With that we should have a nice reflective outline to our text.

Photoshop Futuristic Text Tutorial

Photoshop Text Tutorial: Step 12

Lastly, we shall add some creative textures. Create a new layer by pressing CTRL+SHIFT+N. Then, position this right between your text layer and its duplicate. Name this “texture”. Afterward, hold down the ctrl key and click on the thumbnail of our of our text layers.

Photoshop Futuristic Text Tutorial

Photoshop Text Tutorial: Step 13

To create our texture, first setup your foreground and background colors. Now, technically it should be your choice of course depending on your color theme. Since we have a blue text theme here, we will apply a dark blue foreground (#164b7c) and a light blue background (#b2ebfc) to setup our texture.

Photoshop Futuristic Text Tutorial

Photoshop Text Tutorial: Step 14

Afterward, go to Filter -> Render -> Clouds to render our initial texture element.

Photoshop Futuristic Text Tutorial

Photoshop Text Tutorial: Step 15

Next, we will be applying a brush stroke filter. Just click on Filter -> Brush Strokes -> Cross hatch. Apply these values:

  • Stroke Length: 50
  • Sharpness: 20
  • Strength: 1

Photoshop Futuristic Text Tutorial

Photoshop Text Tutorial: Step 16

Finally, change the blending mode of this texture layer to overlay in the layers view.

Photoshop Futuristic Text Tutorial

Photoshop Text Tutorial: Step 17

The result is a very futuristic, sleek and still textured glossy design perfect for very modern themed text styles

Photoshop Futuristic Text Tutorial

Kate Manhaven is a graphic artist who works with PrintPlace.com, an online printing company that offers business cards, postcard printing and poster printing services. She spends her free time either wakeboarding or snowboarding whenever the season permits.

kate – who has written posts on Artatm - Creative Art Magazine.


4 Responses to “Photoshop Guide: How To Create Sleek Futuristic Text”
  1. Elliptical Machine

    Awesome design making in Photoshop. Presentation of this tutorial is understandable. Thanks editor for sharing this type of tutorial.

  2. Jimmy Fallon

    Thank you so much for your advise and sharing you experiences with us. I have learned alot from your post, this could be a problem for many people who are doing business.

  3. Web Design Company Mumbai

    Thanks for the Tutorial

  4. Geoff McMahen

    Great tutorial, thanks for sharing!

Leave a Reply