PDA

View Full Version : Photoshop Tutorial: Applying an image to text



Sulitan
03-09-2013, 10:38 AM
Okay a few people have requested forum signatures after I used the this signature;
http://img163.imageshack.us/img163/991/oszelaxion.png
So I am going to show you guys the method i used, this can be done in a small amount of time depending on how many images you want to use. For this example i am only going to use 1 image.

I am using Photoshop CS4, some thing may vary depending on your version and/or operating system


Key:
Red = Important Information
Purple = External Website Links
Light Blue = Titles and Sub Titles


So, lets get started :3

Lets get Started!

Lets make our canvas, you can use many different sizes, I usually use around 500x142 but in this case we want to save some room for anything else we want to add out signature room so I choose 500x100.

http://img20.imageshack.us/img20/4374/imagemask.png

Now that you have your canvas you can start to add your text, as I have a slight problem with my version I used two text layers you can always use one if you desire.

http://img5.imageshack.us/img5/796/imagemask1.png

Make sure you have a nice large font for your name, this is so you can fit more of the image into the text as well as letting people know that it is you (because some people don't look at the small text above your avatar). The font I used will be located at the bottom of the thread. If you wish for 1 text layer then you do not need to rasterize as it can be directly linked and edited on a text layer,thus you can skip ahead to the red text marked with stars.


Now, you want to make a copy of your text layers so you don't have to wright them out again, for those who are familiar with Photoshop can also use Small Images, but that can be in a tutorial for another time. We need to duplicate our layers, to do this select last text layer you were on then Shift + left click on the first text layer you created (if you have more that two text layers), or you can use Ctrl + left click to select a specific text layer you want to duplicate, for this though you can use whatever you feel comfortable with.
Now that they are selected right click your layers to open up the drop down menu and select "Duplicate Layers..." shown here;

http://img829.imageshack.us/img829/2915/imagemask2.png

You should see two layers exactly the same Layer Names with copy at the end, both of which are selected.
we need to Rasterize them now, like before right click the selected layers but select "Rasterize Type" this will allow the layer to be edited with a brush tool and our next step, Merging the layers (you can not edit the text with the text tool). both of which require the same principle shown in the 2 images below;

http://img11.imageshack.us/img11/6536/imagemask3.png

http://img59.imageshack.us/img59/2324/imagemask4.png

*Start here if you are only using 1 text layer*

Now its the moment you wanted to see, adding you image. you can pick whatever image(s) you want, you be aware that not all images will generally look as good as you expected.

Once you add you image to the canvas it should block everything, if it doesn't the drag the image layer so it on top of all the others, now you can add the image to the text, to do this hold Alt and hover over the line in between the image and the merged text layer until you see a small bucket like icon as your cursor, if you left click it will apply the image on the lower layer in this case the text, like it was a mask.

http://img404.imageshack.us/img404/411/imagemask5.png

When that is done you should see something like this;

http://img266.imageshack.us/img266/5/imagemask6.png

It may seem a little hard to see, so you can (if you wish) create a new layer at the and move it underneath you other layers and apply a dark grey, like it was the the same as the signature background on the forum.

dont forget to hide the original text layers and background when producing the final product. you don't want unexpected lines or colours in it, save the file as a PNG for the transparency around your text.

Final product:

http://img580.imageshack.us/img580/5094/imagetexttutorialsig.png

That's all there really is too it, and have fun creating you text.

Resources

Name font: Xirod (]http://www.dafont.com/search.php?q=xirod)
Otaku-Streamers font: Space Age (http://www.dafont.com/search.php?q=space+age)
http://hiddenskin.files.wordpress.com/2012/10/konachan-com-145891-sample.jpg

Oxygen
03-09-2013, 11:00 AM
I knew how to do this, in a different way though. However, your tutorial was pretty straight forward and okay to understand. Nothing confusing, keep it up :D

http://i.imgur.com/xGUMsrQ.png

Sulitan
03-09-2013, 11:18 AM
I knew how to do this, in a different way though. However, your tutorial was pretty straight forward and okay to understand. Nothing confusing, keep it up :D

http://i.imgur.com/xGUMsrQ.png

im sure there are many ways to do this :P so its good to know that you know some as well :3 also you didnt have to use my alias ahahaha, Good job and thank you :P.

leafstar12
03-09-2013, 03:05 PM
Omg, that's so col~ I shud get photoshop on my laptop... xD

Kivara
03-09-2013, 10:17 PM
Photoshop Tutorial

Awesome tutorial, Zela. It was very easy to understand, and I'm glad you didn't add in a lot of unnecessary wording. xD Even tho, I consider myself pretty good at Photoshop, a lot of PS tutorial makers use a ton of overcomplicated vocabulary when explaining and demonstrating. I actually had been wondering since I saw your sig how you made it, since I have done some clipping mask things on a few images I have edited.

This is the one I just made from your tutorial:
http://i1279.photobucket.com/albums/y521/KivaraOS/3-9-13/KirinoSig_zps0a0e65dc.png

Anyways hope you make more sometime soon! /no1

+Thanks too by the way. /no1

Kisae
03-09-2013, 11:26 PM
That's zelaxion for you /no1 good job on the tutorial.
Since you made this thread, this is +1 post for me, here's a loli for you /gg

http://img1.ak.crunchyroll.com/i/spire4/ddcf8025d1ff5416d6ed1e3a85b10c771266756451_full.jp g

Sora Kasugano
03-10-2013, 12:06 AM
Zelax! As promised, I'm not being lazy now and tried to open my PS lol

http://i.imgur.com/RoYjfOs.png

Image used:

http://i.imgur.com/MBlkf1U.jpg

Awesome Tutorial by the way /no1

Sulitan
03-10-2013, 07:51 AM
Awesome tutorial, Zela. It was very easy to understand, and I'm glad you didn't add in a lot of unnecessary wording. xD Even tho, I consider myself pretty good at Photoshop, a lot of PS tutorial makers use a ton of overcomplicated vocabulary when explaining and demonstrating. I actually had been wondering since I saw your sig how you made it, since I have done some clipping mask things on a few images I have edited.

This is the one I just made from your tutorial:
http://i1279.photobucket.com/albums/y521/KivaraOS/3-9-13/KirinoSig_zps0a0e65dc.png

Anyways hope you make more sometime soon! /no1

+Thanks too by the way. /no1

I'm glad you found it useful and easy to understand, I usually panic over the ease of use when I do a tutorial so this is very helpful :P


That's zelaxion for you /no1 good job on the tutorial.
Since you made this thread, this is +1 post for me, here's a loli for you /gg

http://img1.ak.crunchyroll.com/i/spire4/ddcf8025d1ff5416d6ed1e3a85b10c771266756451_full.jp g

thank you, and yes i will take your loli :3


Zelax! As promised, I'm not being lazy now and tried to open my PS lol

http://i.imgur.com/RoYjfOs.png

Image used:

http://i.imgur.com/MBlkf1U.jpg

Awesome Tutorial by the way /no1

lol, i honestly thought you would of been taken over by your next VN, im glad you liked it.

evil105
03-11-2013, 08:33 AM
Honestly this is easy stuff

I don't know why most of you guys don't know how to do it


btw
You can also do that with image of character instead of sentence/word

Revelix
03-11-2013, 09:17 AM
Sure Evil it's easy stuff, I knew this method before....
But it's cool how he showed us it can be cool as a signature on OS also~
Never seen anyone have it like this before :3

kibeth1
03-11-2013, 12:05 PM
Hmm could I get photoshop free somehow ?

Oxygen
03-11-2013, 12:27 PM
You could get it by downloading it from a torrent site, but it's not recommended.

kibeth1
03-11-2013, 01:10 PM
Hmm so i managed to do something like this on GIMP :D

http://img708.imageshack.us/img708/8765/gimpsigtext.png

Managed this on 2nd try

http://img191.imageshack.us/img191/6820/sigtext2.png

badpunraptor
03-12-2013, 12:11 AM
Honestly this is easy stuff

I don't know why most of you guys don't know how to do it


btw
You can also do that with image of character instead of sentence/word


If you're going to insult the this wonderful tutorial by just saying it's simple and obvious (which isn't really obvious for people unskilled in photoshop) then the least you could do is show exactly what you can do that's so much better. Otherwise, you just look like a really pompus douche and no one will bother to care for your opinion.

jeiru01
03-12-2013, 05:34 AM
Chill guys.
Let's just enjoy the tutorial.
Private messaging is always available.

That's for the both of you.
:4:

Sulitan
03-12-2013, 06:33 AM
Hmm so i managed to do something like this on GIMP :D

http://img708.imageshack.us/img708/8765/gimpsigtext.png

Managed this on 2nd try

http://img191.imageshack.us/img191/6820/sigtext2.png

its good to see you trying this in other software :P Good job

Kobowo
03-12-2013, 06:39 AM
Lemme give this a shot, it's been awhile since I've used Photoshop :)))))

http://i.imgur.com/11mm15N.gif

http://i.imgur.com/GnsvHJ9.gif

http://i.imgur.com/K6dBhMu.gif

This one: I used the names of most active members or currently active? this was done a long time ago tho xD
http://i.imgur.com/hyI9FTC.jpg

http://i.imgur.com/FlUZgGD.gif

http://i.imgur.com/NZ5bj6p.gif

evil105
03-12-2013, 07:01 AM
If you're going to insult the this wonderful tutorial by just saying it's simple and obvious (which isn't really obvious for people unskilled in photoshop) then the least you could do is show exactly what you can do that's so much better. Otherwise, you just look like a really pompus douche and no one will bother to care for your opinion.

Don't take it personal, Never intended to insult the thread or anyone :)

saying it's simple doesn't mean everyone know it neither does it mean it's obvious (And I never said it was obvious) so I have no idea where you got that from ^^ now here's some of the exact thing Zelaxion wrote (And also read Revelix's reply .. it IS simple just like cooking is simple but not many people know it)
Lets not fight .. but if you really want to learn photoshop I think one of the most important things you need to learn is layers and this is a simple layer trick :)


since we're in this topic .. as I said earlier You can also do that with image of character instead of sentence/word
This is what I meant (I used the same picture Zelaxion posted in his thread post + OS's Logo

http://oi50.tinypic.com/2lx8cc4.jpg

and this is an image of ocean that I took randomly from google
http://oi48.tinypic.com/29p2p1i.jpg

Original OS logo that I used is in the spoiler below
http://oi46.tinypic.com/25utxeu.jpg
http://oi46.tinypic.com/25utxeu.jpg

kibeth1
03-12-2013, 07:02 AM
its good to see you trying this in other software :P Good job

thanks :3 its my 1st time even using something like GIMP and PS xD

Sulitan
03-12-2013, 07:03 AM
Lemme give this a shot, it's been awhile since I've used Photoshop :)))))

http://i.imgur.com/11mm15N.gif

http://i.imgur.com/GnsvHJ9.gif

http://i.imgur.com/K6dBhMu.gif

This one: I used the names of most active members or currently active? this was done a long time ago tho xD
http://i.imgur.com/hyI9FTC.jpg

http://i.imgur.com/FlUZgGD.gif

http://i.imgur.com/NZ5bj6p.gif

ahaha you may not of used photoshop in a long time but it seems you had fun doing so, also it seems it was more of a refresher for you (which is also a good thing). and its good that you showed us a different way you could use it with an image


Don't take it personal, Never intended to insult the thread or anyone :)

saying it's simple doesn't mean everyone know it neither does it mean it's obvious (And I never said it was obvious) so I have no idea where you got that from ^^ now here's some of the exact thing Zelaxion wrote (And also read Revelix's reply .. it IS simple just like cooking is simple but not many people know it)
Lets not fight .. but if you really want to learn photoshop I think one of the most important things you need to learn is layers and this is a simple layer trick :)


since we're in this topic .. as I said earlier You can also do that with image of character instead of sentence/word
This is what I meant (I used the same picture Zelaxion posted in his thread post + OS's Logo

http://oi50.tinypic.com/2lx8cc4.jpg

and this is an image of ocean that I took randomly from google
http://oi48.tinypic.com/29p2p1i.jpg

Original OS logo that I used is in the spoiler below
http://oi46.tinypic.com/25utxeu.jpg
http://oi46.tinypic.com/25utxeu.jpg

thank you for explaining what you were referring to, i should of really mentioned it :P im sure people would of liked it used in something other than text.

Kobowo
03-12-2013, 07:17 AM
ahaha you may not of used photoshop in a long time but it seems you had fun doing so, also it seems it was more of a refresher for you (which is also a good thing). and its good that you showed us a different way you could use it with an image


Kinda XD it was fun lolz, actually I made another one, its more animated...but imgur cant upload it so yeah sadly i cant post it here LOLOLOL XD

Yep it was fun, I used images of pics I had lying around lolz

badpunraptor
03-12-2013, 11:57 AM
Don't take it personal, Never intended to insult the thread or anyone :)

saying it's simple doesn't mean everyone know it neither does it mean it's obvious (And I never said it was obvious) so I have no idea where you got that from ^^ now here's some of the exact thing Zelaxion wrote (And also read Revelix's reply .. it IS simple just like cooking is simple but not many people know it)
Lets not fight .. but if you really want to learn photoshop I think one of the most important things you need to learn is layers and this is a simple layer trick :)


since we're in this topic .. as I said earlier You can also do that with image of character instead of sentence/word
This is what I meant (I used the same picture Zelaxion posted in his thread post + OS's Logo

http://oi50.tinypic.com/2lx8cc4.jpg

and this is an image of ocean that I took randomly from google
http://oi48.tinypic.com/29p2p1i.jpg

Original OS logo that I used is in the spoiler below
http://oi46.tinypic.com/25utxeu.jpg
http://oi46.tinypic.com/25utxeu.jpg

I didn't really take it personally, just thought when you make a comment like "I don't know why most of you don't know it" and leave it at that it kind of sounds like you're looking down on it. But thank you for elaborating, this second answer seems much more spirited. I also really like the sigs you posted so thank you for showing what you meant with that statement.


Chill guys.
Let's just enjoy the tutorial.
Private messaging is always available.

That's for the both of you.
:4:

I'm chill :3 not trying to pick a fight, rather, wanting to avoid it.

jeiru01
03-12-2013, 11:22 PM
I'm chill :3 not trying to pick a fight, rather, wanting to avoid it.

Good to hear.

~ : : ~

Thanks for the tutorial Uncle Zela. :4:
Here, I tried to do something. It's very basic and yes, I don't know how to clean it.
http://i.imgur.com/io2oSeT.png

Kimono
03-12-2013, 11:44 PM
Good to hear.

~ : : ~

Thanks for the tutorial Uncle Zela. :4:
Here, I tried to do something. It's very basic and yes, I don't know how to clean it.
http://i.imgur.com/io2oSeT.png
What's with the jagged lines? Is the text not anti-aliased?

jeiru01
03-13-2013, 06:56 AM
Hmm. Here, I made another one.

http://i.imgur.com/nf4PJfh.gif

Sulitan
03-13-2013, 11:06 AM
Hmm. Here, I made another one.

http://i.imgur.com/nf4PJfh.gif

i know your not using Photoshop which is good to see people trying to see this in other programs, but there seems to be a lack of anti-aliasing which is makeing the rigid pixels, but thank you for seeing what you could do :3

BlueDragon
03-13-2013, 01:09 PM
Interesting idea.
I gave it a shot as well, just for the heck of it:
http://puu.sh/2h8TJ

cactusmelon
03-16-2013, 09:26 PM
http://i1212.photobucket.com/albums/cc459/tetet_gur/Untitled-3-2.png
I tried it :3 /ok /ok