Creating Cool Logo Inspired by Rainbow
Illustrator, Typography | May 19th, 2010Almighty Allah Azza wa Jalla who has created a beautiful rainbow in the sky. A rainbow with colors that decorate it has inspired artists to create a masterpiece. In this tutorial, we will use Adobe Illustrator to create a cool and simple logo armed with creative ideas, playing with colors and a bit of typography techniques. I made this logo for Painthink, my personal blog in Bahasa Indonesia.
Final Logo Preview
Before we get started, take a look at the image we’ll be created. Larger versions can be viewed here.
Step 1
We start by creating a new Illustrator document size of 1920 x 1200 pixels and set the Color Mode to CMYK. Now it is time to type. Use the Type Tool, here I use Vectora LT Std Font and set the font size to 400pt. Type one by one of each letter ‘painthink’ on the canvas.
Step 2
Next we change the color of each letter. Here’s color composition that I use to create this logo,
- p (C=0 M=100 Y=100 K=40),
- a (C=40 M=35 Y=65 K=25),
- i (C=60 M=30 Y=10 K=15),
- n (C=19 M=37 Y=59 K=0),
- t (C=46 M=27 Y=100 K=35),
- h (C=43 M=68 Y=51 K=0),
- i (C=0 M=80 Y=90 K=0),
- n (C=40 M=35 Y=65 K=25),
- k (C=33 M=93 Y=0 K=0).
Step 3
Now we set the spacing between the letters. Set each letter to cover a small portion of the letter in its left, look like the following picture.
Step 4
The final step, select all the letters and go to the Transparency window, change the Normal mode to Multiply.
Final Result
This is the end result of a cool logo we have made. Don’t forget subscribe to Grafisia RSS Feed.
Incoming search terms:
Related Posts
9 Comments
Leave a Reply
[...] Rainbow Text Effect Illustrator Tutorial In this Illustrator tutorial you will use colors and a bit of typography techniques to create a cool and simple Rainbow Text Effect. [...]
Hi – I thought this effect is cool and realised it could all be done in HTML – here’s my code if anyone’s interested:
Logo
#logo{
font: 700 7em “Century Gothic”,”Avant Garde”,”Arial Black”,Arial;
}
#logo span {
opacity: 0.7;
display: inline-block;
margin:0 -0.17em 0 0;
}
var color=[
"A1080B",
"817B57",
"6486A2",
"D3A277",
"6B7425",
"9D686E",
"F1582F",
"817B57",
"AD3694"
];
function rainbow(element) {
var element=document.getElementById(element);
var txt=element.innerHTML;
element.innerHTML=”";
for(i=0;i<txt.length;i++)
element.innerHTML+='’+
(txt.substring(i,i+1)==’ ‘ ? ‘ ’ : txt.substring(i,i+1))+
”;
}
id-london
rainbow(“logo”);
Oops – never know whether WordPress strips tags (depends on plugins) so here goes again…
<!DOCTYPE HTML>
<html>
<head>
<title>Logo</title>
<style>
#logo{
font: 700 7em “Century Gothic”,”Avant Garde”,”Arial Black”,Arial;
}
#logo span {
opacity: 0.7;
display: inline-block;
margin:0 -0.17em 0 0;
}
</style>
<script>
var color=[
"A1080B",
"817B57",
"6486A2",
"D3A277",
"6B7425",
"9D686E",
"F1582F",
"817B57",
"AD3694"
];
function rainbow(element) {
var element=document.getElementById(element);
var txt=element.innerHTML;
element.innerHTML=”";
for(i=0;i<txt.length;i++)
element.innerHTML+=’<span style=”color:#’+color[i%color.length]+’”>’+
(txt.substring(i,i+1)==’ ‘ ? ‘ ’ : txt.substring(i,i+1))+
‘</span>’;
}
</script>
</head>
<body>
<h1 id=”logo”>id-london</h1>
<script>
rainbow(“logo”);
</script>
</body>
</html>
Hi! I really like the logo created. I was looking for inspiration to create a logo for myself and came across your site. Was wondering if its okay for me to use the exact same colors as you’ve given in the tutorial as i really like it.
You can use it as you wish
We are LogoProDesign as a Custom Logo Designer, We checked your artwork collections. Those are amazed us. Thanks for that type of good work collections. We regularly checked your website for good artwork example.
Thanks
David Thomas
I am gimp user…i have try your tutorial in gimp and i have post too in my blog as tutorial.
thank’s for your share.
Good job bro..!
i am a pro designer and youre website is no where near as good as mine sir.i suggest you sort it out at once!! i am not impresed!! i will send you the link to my website!! yours sincerly george underwood