Simple Gradient Text Tutorial

[rangeor]

So while I was browsing some other forums a trend I noticed was that a few users had gradients applied to irrelevant text in their signatures, kind of like this:

 

OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO

OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO

OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO

OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO

 

However the difference was they were all stoners and all made mediocre rainbows instead of a nice gradient like this. I decided to try it on my own and came up with the above result. It really is as easy as it looks; the bbcode for one line is this:

 

[color="#2a1628"]O[/color][color="#2c1d2d"]O[/color][color="#2d2230"]O[/color][color="#2f2834"]O[/color][color="#2f2d39"]O[/color][color="#30323d"]O[/color][color="#313943"]O[/color][color="#314048"]O[/color][color="#30464e"]O[/color][color="#314c52"]O[/color][color="#325358"]O[/color][color="#325b5e"]O[/color][color="#346163"]O[/color][color="#346969"]O[/color][color="#32706e"]O[/color][color="#32706e"]O[/color][color="#317673"]O[/color][color="#317b78"]O[/color][color="#2f817c"]O[/color][color="#31857f"]O[/color][color="#398a83"]O[/color][color="#469287"]O[/color][color="#4c9589"]O[/color][color="#5a9c8e"]O[/color][color="#66a291"]O[/color][color="#70a893"]O[/color][color="#7bae97"]O[/color][color="#89b59a"]O[/color][color="#93ba9d"]O[/color][color="#9ec1a0"]O[/color][color="#aac6a2"]O[/color][color="#b5cda5"]O[/color][color="#c0d3a7"]O[/color][color="#c8d8a9"]O[/color][color="#d2deac"]O[/color]

 

Which I just copied and pasted four times. So as you can see I just made a bunch of O's (34 to be exact) and specified the color, but changed that color. A lot. So it's rather obvious that it's actually really easy to make it look good, as long as you know how to make a decent gradient. The only problem is it's really boring and takes a bit of time :P But I thought these qualities would make it a good beginner tutorial since it's actually difficult to make something ugly with it.

 

There are a few ways of doing this, but I found this worked best for me. I used photoshop, but these are very basic tools that I'm using that you can use in most other decent graphics editing programs as well.

 

First, I started with a canvas of 8.5 x 11, since that's what I had previously worked on. Then I filled it up with a cool gradient:

 

 

At first I tried manually selecting the colors and just eyeballing it, hoping I'd get an even spread of colors. That didn't work out too well >.< Then I had the idea of using the grid, one of my favorite features. In photoshop, the grid is under View > Show > Grid, or Ctrl+' in windows computers. This is what the canvas looks like when you have the grid showing:

 

 

The grid is very useful to people that are perfectionists or at least like to work with high precision. Web designers also use it quite a bit. Now this is where it might get a little bit tricky. The method I used is that I would take the color from every square, and apply it to one character. In my case, that character was an O. The tricky part is that the goal is to have those tiny squares within the larger squares be small enough to give a good amount of the range of colors in your gradient, but not too small to the point where you end up using over 70 tiny squares just to complete one line! ;_; I got really lucky, and ended up with a really good size right away with a width of 8.5 inches. Now since I'm really only concerned with the horizontal aspect of the gradient, I decided to crop it down to a size of one square:

 

 

That will be much easier to work with! Now this is what the code of one character is going to look like:

 

[color="#hexadecimal"]O[/color]

 

What you will be doing to find the color of your character is really simple actually. Use the eye dropper tool on your first box, it will select the color of that box as your default color. Then just copy the hexadecimal code and there you go!

 

 

In this case, the code for this first character in your line: O will be:

 

[color="#2c1f2e"]O[/color]

 

Now just do that for all of the boxes and you're done! :D One thing I decided to do though, to help me keep track of which box I was one, was that I just colored in whichever box I had just finished with white, like this:

 

 

Erasing probably would be a quicker method, though.

 

THE END!

 

Now, who wants to try a radial gradient? :lol:

[Danny_TeamDan]

Pretty cool might try it out another day.

[Solartide]

Too much effort involved for the end result.

 

If say, this made pancakes, I'd be all over it.

[Jeffwilson99]

But...why? I dun get it.

[rangeor]

Well why would you make a signature like yours? To show it off, to challenge yourself (I guess this would be challenging for newbies), or just to do something. This is just a different type of signature.

[Jeffwilson99]

Lol OOOOOOOOOOOOOOOOOOOOOOK :razz:

[dsavi]

Even better:

███████████████████████████████████

███████████████████████████████████

███████████████████████████████████

███████████████████████████████████

 

Or how about:

 

▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒

▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒

▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒

▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒

 

(That doesn't work that well due to the number of rows/columns of dots)

 

⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿

⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿

⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿

⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿

 

 

:razz: I'm having fun.

[Sam]

Awesome :razz:

[Pat_61]

Even better:

███████████████████████████████████

███████████████████████████████████

███████████████████████████████████

███████████████████████████████████

 

Or how about:

 

▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒

▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒

▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒

▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒

 

(That doesn't work that well due to the number of rows/columns of dots)

 

⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿

⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿

⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿

⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿

 

 

:razz: I'm having fun.

 

 

Lol...

 

Off topic: Dsavi, did the making a forum skin die?

[dsavi]

Not really, it will probably start after two things happen:

 

1. TIF upgrades to IPB 3.1.1 (Possibly 3.1.2 or later)

2. School starts. I won't actually be doing much there, and I don't really get on the internets during the summer.

[obfuscator]

Not really, it will probably start after two things happen:

 

1. TIF upgrades to IPB 3.1.1 (Possibly 3.1.2 or later)

2. School starts. I won't actually be doing much there, and I don't really get on the internets during the summer.

How do you plan on testing it? I assume you haven't purchased IPB :P

[Pat_61]

Not really, it will probably start after two things happen:

 

1. TIF upgrades to IPB 3.1.1 (Possibly 3.1.2 or later)

2. School starts. I won't actually be doing much there, and I don't really get on the internets during the summer.

How do you plan on testing it? I assume you haven't purchased IPB :P

 

We were planing on getting TIF's approval, since we are making it for TIF.

[dsavi]

Not really, it will probably start after two things happen:

 

1. TIF upgrades to IPB 3.1.1 (Possibly 3.1.2 or later)

2. School starts. I won't actually be doing much there, and I don't really get on the internets during the summer.

How do you plan on testing it? I assume you haven't purchased IPB :P

No, and I'm not planning to either. If it works out we could use TIF's test installation that comes with each purchase of IPB. Yay proprietary software.

[Sam]

Even better:

███████████████████████████████████

███████████████████████████████████

███████████████████████████████████

███████████████████████████████████

 

Or how about:

 

▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒

▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒

▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒

▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒

 

(That doesn't work that well due to the number of rows/columns of dots)

 

⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿

⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿

⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿

⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿⦿

 

 

:razz: I'm having fun.

 

I challenge you, sir, to make a pantone color wheel.

[dsavi]

Like this, without the circles surrounding it?

[Sam]

yes sir.

[Pirate_Felix]

Pff. Actually try challenging me

 

[hide]On topic because else i get banned: I really like what you did but why wouldnt you just use an image :o?[/hide]

[ElkNight]

I really like that signature.

[rangeor]

On topic because else i get banned: I really like what you did but why wouldnt you just use an image :o?

Mostly because I wanted to replicate what I saw. Plus, I think it's pretty neat. An image would probably look better, but this is more fun :D

 

Then again, just an image of a gradient would be really boring actually >->