Lost in Space Typography in PhotoshopListThumbs

Lost in Space Typography in Photoshop

February 08, 2010

Last week I was checking out some of the Typography Mania posts, and got really inspired to try something new. So I decided to create an abstract composition with light effects and apply that as a texture of a text, everything done only using Photoshop.

So in this tutorial I will show you how to create an easy and super quick text effect in Photoshop. We will play with Brushes, Blend Modes, basic filters like Blur and Liquify, and also text.

Step 1

Open Photoshop and create a new document. I used 2560x1440 pixels. Then with the Gradient Tool (G) fill the background with a radial gradient with 2 shades of purple (3d2626) Lighter and (060404) darker.

Lost in Space Typography in Photoshop

Step 2

With the Elliptical Marquee Tool (M) create an ellipse selection. Add a new layer and select the Gradient Tool (G). Use black and a very light grey for the colors. Fill the ellipse selection with the radial gradient. Use the image below for reference.

Lost in Space Typography in Photoshop

Step 3

Go to Edit>Define Brush to create a new brush.

Lost in Space Typography in Photoshop

Step 4

Go to Window>Brushes. Use the image below for the values of the Brush Tip Shape, Shape Dynamics, Scattering, Color Dynamics and Other Dynamics.

Lost in Space Typography in Photoshop

Step 5

Add a new layer and with the Brush Tool (B) and the brush you have just created, paint some spheres on the design. This is a random effect so you won't get the same result as I did.

Lost in Space Typography in Photoshop

Step 6

Add another layer and group this layer. This new layer will be inside a folder in the Layer Palettes. Change the folder's Blend Mode to Color Dodge. Then, with the Brush Tool (B), select white for the color and a big soft brush to paint some areas to highlight them (1-4). Tip: Use the numbers 1-0 to change the opacity of the brush, with 1 being 10% and 0 being 100%.

Lost in Space Typography in Photoshop

Step 7

Add a new layer and with the Rectangular Marquee Tool (M), create a rectangular selection. Fill this selection with a white to black linear gradient using the Gradient Tool (G). After that change the Blend Mode to Color Dodge to create a nice light effect.

Lost in Space Typography in Photoshop

Step 8

Duplicate the light effect layer. Rotate and resize them to create different light effects. Tip: Use the Eraser Tool (E) to blend some of the light effects one they are over one another.

Lost in Space Typography in Photoshop

Step 9

Add a new layer and group this layer so it will be inside a folder. Change the Blend Mode of the folder to Color Dodge. With the Brush Tool (G), using white for the color, select the layer inside the folder and paint some flares (1-3)

Lost in Space Typography in Photoshop

Step 10

Add another layer on top of the others, then with the Gradient Tool (G) fill the layer with a gradient using red, yellow, green and blue for the colors. Change the Blend Mode of this layer to Overlay.

Lost in Space Typography in Photoshop

Step 11

Create a new layer and fill it with a checkerboard pattern. You can download it here. Then go to Filter>Blur>Gaussian Blur, use 10 pixels for the Radius. After that change its Blend Mode to Color Dodge.

Lost in Space Typography in Photoshop

Step 12

Select the pattern layer and go to Filter>Liquify. Use the Twirl Clockwise Tool (C) and the Bloat Tool (B) to deform the pattern layer.

Lost in Space Typography in Photoshop

Step 13

Select all layers and click Command(mac)/Control PC + Alt + Shift + E to create a layer with all the layers merged in it. Go to Filter>Blur>Gaussian Blur. Use 20 pixels for the Radius. Then change the Blend Mode to Screen and the Opacity to 50%. Once again click on Command(mac)/Control PC + Alt + Shift + E to create a layer with the final design.

Lost in Space Typography in Photoshop

Step 14

To create the text effect we will add a new layer for a new background. You can duplicate the same layer from the Step 1 and just change the colors, instead of a purple hue I used a brown. The light one is 3b2500 and the dark 130f08.

Lost in Space Typography in Photoshop

Step 15

Select the Horizontal Type Tool (T) and type "Lost in Space" like a did in the image below. Make the words "Lost" and "Space" much bigger than the "In". Then change the font to VAL. You can download it here (http://fontfabric.com/?p=585). Use white for the color.

Lost in Space Typography in Photoshop

Step 16

Go to Layer>Layer Styles>Drop Shadow. Use Multiply for the Blend Mode, black for the color, -90º for the angle, 0 for Distance and Spread and 30 for Size.

Lost in Space Typography in Photoshop

Step 17

Select now Inner Shadow. use Color Dodge for the Color with White, 100% for the Opacity, 2 pixels for the DIstance, 1 for Choke and 5 pixels for Size.

Lost in Space Typography in Photoshop

Step 18

Move the layer with the design merged to be on top of the other layers, more specifically on top of the text layer. Then go to Layer>Create Clipping Mask.

Lost in Space Typography in Photoshop

Step 19

Go to Google Images and search for some eclipse photos, I found this amazing one at http://www.cardiff-astronomical-society.co.uk/ECLIPSE2006\DSCF0841.JPG. Copy it and paste it in your design. Go to Image>Adjustments>Levels. Increase the black input. Change the Blend Mode to Screen. Also go to Filter>Blur>Gaussian Blur. Use 5 pixels for the Radius.

Lost in Space Typography in Photoshop

Step 20

Duplicate the eclipse layer and position it on top of the other ones that were in the design, the difference is that now it will look like the lights are coming out of the text.

Lost in Space Typography in Photoshop

Conclusion

Merge all the layers again and you can add a little noise (Filger>Noise>Add Noise). The effect is very simple and won't take you more than 20-30 minutes to achieve it. But it's a nice exercise for those willing to play with light effects, also clipping mask and text effects in Photoshop.

Lost in Space Typography in Photoshop
Click on the image for full preview

Download the Photoshop file

Click here to download the Photoshop file used for this tutorial

About the author

My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.

Sponsored Links:

More content from:

Help us to share this!

73 Comments

kentron02/08/2010

wow, very impressive effect!

Ensio02/08/2010

nice! =)

Faith02/08/2010

Awesome effect and font! Great job. I'm so gonna try it! :)

icetrix02/08/2010

That looks really stunning. I like how you used the brushes too archieve this effect. Amazing tutorial^^.

Jonern02/08/2010

Great tutorial! Learned some useful techniques :)

Patrick Kivits02/08/2010

This looks great. I will definitely try this out soon!

fksd02/08/2010

nice. thanks for sharing this.

www.cromoart.de

Hybrid5902/08/2010

fucking cool !
--------------------
http://hybrid-creation.deviantart.com/

Overflow02/08/2010

it's beautiful.. thanks for sharing :)

Martin Dörsch02/08/2010

just beautiful and clever!
THX!

Sivakumar02/08/2010

New try... I like it

Rahim Rajab02/08/2010

it's very cool :-)

Kris Sauquillo02/08/2010

Another great tutorial. :)

thetruth02/08/2010

great post
.
.
.
www.contestdesigns.com
design contests for cash pizes!!!

Design Informer02/08/2010

Beautiful effect Fabio. Your tutorials are always amazing.

Stevenoxf02/08/2010

Great tutorial thanks,
Keep them coming

thepeachdesign02/08/2010

Awesome tut.

____________________________
http://www.thepeachdesign.com

Richie02/08/2010

Looks good. Thanks for the tutorial.

Stevenoxf02/08/2010

Great tutorial thanks,
Keep them coming

bachtiar02/08/2010

nice. thx 4 sharing bro.
can't patient to wait next your tuts..

'Terima kasih'
-----------------------------------------
www.bachtiardesign.com

Victoria Blount02/08/2010

Thanks for this tutorial, im definitely going to utalise this technique.

suuuii02/08/2010

beautiful !

Ja_ck02/08/2010

thx for tut!

______________

www.jacekpiekarczyk.pl

deep_paint02/08/2010

realy cool tut!

__________________
http://lateant.deviantart.com/

michael from rosenheim02/08/2010

Really nice tutorial!
Thanks for the good work!

Mira02/08/2010

Sometimes the effects are so easily achieved. You just need to know how to create them. Thanks again for another great tutorial!

My result: http://www.flickr.com/photos/miranl/4340899756/

Mira02/09/2010

Created a Valentine version as well ;)

creativelara02/08/2010

Awesome! Love it! Now make the type 3D!!! :-)

JayDz02/08/2010

Was waiting for this tut.. So beautiful! well done, Fabio :))

maryjane224702/08/2010

There are some nifty little tricks in this tutorial. Thanks for sharing.

Quality Web Design

Thekender02/08/2010

Wallpaper of the week...! However, today just monday...

devilem02/08/2010

impressive ! love the details, so good tutorial.

KingShigakuri02/08/2010

What font is this that is used?

Cam02/08/2010

This is brilliant, can't wait to use these techniques in my own projects!!

writersbloc02/08/2010

Not the easiest tutorial to flow without the source file, but once I DLed and could see what you glossed over I really learned something.

Thanks for the great tutorial.

JDR02/08/2010

Amazing... Beautiful..

Thanks a lot for this tut... love it..

Yvonne02/09/2010

looks great very nice work

Peter Yan02/09/2010

WOW this looks amazing!! good job!

---------------
www.PeterYan.net

pernofski02/09/2010

thankyou so much!

glauber02/09/2010

Beautiful! Thanks

Mads02/09/2010

Ah, wonderful. :) The share pleasure of playing around. Reminds me of what got me started with all of this.

Vitor William02/09/2010

Show de bola esse tutorial, estou aprendendo muitas técnicas com o abduzeedo e estou sempre utilizando em meus trabalhos.

nike air max02/09/2010

really really good stuff!!! thanks !!!

http://www.airmax-shox.com

twapt02/09/2010

thanks for sharing, i like photoshop is very simple, can you do that with adobe photoshop elements 7

ajir02/09/2010

wonderfull..
really abduzeedo..

Dumitru02/09/2010

Awesome use of brushes! :O

Danilo Pereira02/09/2010

Perfect!!!!

Diseño web02/09/2010

wow, excelente tutorial.

3d yuriki02/09/2010

Cool tutorial!
So simple but so brilliant!

Retouch.cz02/09/2010

Good idea with the Liquify tool used on checkboard pattern.
__________________
http://www.retouch.cz

Piteel02/09/2010

Very, Very AWESOME!
I go try it now, :D

Matt Gnarly02/09/2010

Looks great, would love to see a Pixelmator version, but that's true of all your tuts. Cheers!

Miriam02/11/2010

I love this but i have a problem (also had it with the bokeh tut) I have CS4 but when i select the shape and go to edit, i can't click on define brush or even define pattern. Something in the presets or what is it? Does somebody know this?

Fenx02/11/2010

I've been ABDUCTED (:

lg02/14/2010

great tut .

my outcome .

[IMG]http://i241.photobucket.com/albums/ff160/cassiner/Untitled-1tagcopy.png[/IMG]

edit.

how come my link wont show up ?

Lap1n0u02/14/2010

Très beau, félicitations et merci pour ce tuto ;)

Altaf02/15/2010

awesome tutorial as usual.

looking for some other word other than awesome. use it plenty of times.

alright wonderful tutorial. oops! gotto check other words.

rui9502/16/2010

i tried it. but a bit too hard for me. xP

Akshay02/17/2010

wow..one more awesome effect....magnificient.......

Ash02/18/2010

A great tutorial. Learnt something new

Sousa Gaspar02/18/2010

este tutorial é nota 10 é o máximo.

fv02/19/2010

Great tutorial thanks,
My glossy result: http://img62.imageshack.us/img62/5044/space2g.jpg

Andrei C.02/19/2010

Super nice tutorial. I made it, but couldn't make the exact thing. So this is my outcome of the text o a wallpaper http://customize.org/wallpapers/69581 . Just waiting for another tutorial now :D

=?=02/19/2010

Really very useful
Thanks a lot
I love it

roland02/21/2010

Very good tutorial..but step 8 isn't working !!

Offset Printing Company02/23/2010

I just went through this tutorial and I know I'll be able to implement this technique right away. I initially messed up step 13 (unlucky 13) but when I went back and reread it, problem was fixed!

The Loft Photography02/25/2010

Totally awesome tut. I'm definitely going to be teaching this to my students!! Another great design and technique.

Mandeep02/26/2010

Thank you so much for this tutorial.Amazing and Stunning effects and results.

bosati03/02/2010

nice work

abney31703/02/2010

probably my favorite tut on this site

----------------------
GFX Design Resources and Discussion at my site
http://infinitystyle.com

viditkothari03/04/2010

Sir, It is a really superb tut.

BUT I wanted to notify an error.
STEP 9 needs a correction ( I think ) Brush Tool's shortcut has been shown 'G' which I suppose is 'B'

Am Just informing.

alex9203/04/2010

Great work and very nice tutorial //thanks

Post new comment

The content of this field is kept private and will not be shown publicly.