Glossy Vector Web 2.0 Logo Text in 5 Easy Steps
I’ve found a ton of Photoshop tutorials on how to do this, but you would be surprised at how simple and easy it is to get a “glossy” text effect in vector using Illustrator. Don’t get out of your seat, because this won’t take long at all.
1. Outline your text
The first step is to outline your text to make it a into an actual shape. This is assuming that you already have your logo text and font picked out. To outline, make sure you have the text selected, and go to Type>Create Outlines.
Here is the text outlined.
2. Offset your path
Offset Path in Illustrator takes the current path, duplicates it, and makes it however many pixels you choose bigger or smaller in every direction. It isn’t quite the same as simply scaling up/down. It makes a path inside or outside of the current path using a specified distance between the paths. The reason we will be using offset path is because, well . . . it’s just plain easy to do. Yes, you could just make another shape below and add a stroke, but that is altering the font a bit, and most of the time, you probably don’t want to do it that way. Instead, with your outlined text shapes selected, go to Edit>Path>Offset Path.
Now you are given some options for the Offset Path. Here you have precise control over the path being created inside of your outlined text. Enter a negative value in order to make the offset “inside” the original.
Click OK and there Illustrator does all the work for you. Zoomed in view of the -2px offset path:
3. Fill your new path with white
Your new offset path should still be selected after you clicked OK, so now is the perfect time to make your fill. I used white, generally the universal “glossy” color.
4. Make your cut
With the rectangle tool, make a white rectangle that covers the part of the reflection you would like to remain visible.
Now, this is why I used a “white” rectangle. with the square still selected, go to Select>Same>Fill Color, and you will have selected everything you need for the cut. Otherwise, you will need to select all of the shapes with the white arrow.
Before making your cut, make sure you have all of the correct paths selected:
Hit the “Crop” button in the Pathfinder window to get rid of all the paths that are outside of the rectangle. (Window>Pathfinder)
Our new reflection shape has now been made
5. Adjust the opacity
You probably want to adjust the opacity a bit to get the look you are after.
Related Tutorials:
If you would like to learn how to make the reflection itself “fade” out with a transparency gradient, read this post on making an Opacity Mask in Illustrator.
Here is a post on how to make a Fading Logo Reflection in Illustrator.
Internet is becoming a powerful source of information as well as trading. As one can not only get detailed information about free software. A number of video and audio software are available on internet. For information web hosting articles determine different types of hosting services including windows, Linux and UNIX hosting as well as their benefits. While one can use internet for the buying or selling of expired domains or run an affiliate program online.
Related Posts:
- Tutorial: Web 2.0 Logo Reflection in Vector format with Illustrator
- Opacity Mask Basics: Illustrator
- Illustrator: Rid Yourself of Pesky “Expand Appearance” Woes
- Take Vector Paths from Photoshop into Illustrator
- Pathfinder: Explained
- Illustrator Tutorial: How To Make 3D Vector Vintage Stars
Great tutorial yet again!!
I had a draft ready to post with an Illustrator Style that would do the same thing.
I think your post is great timing! I’ve just posted it.
-Gautch
[…] Lets say you know your client will never change there mind (Pssh, like that ever happends) then you could go with Bittbox’s great tutorial “Glossy Vector Web 2.0 Logo Text in 5 Easy Steps“. […]
Using gradients on both the background colors and the opaque white fill would give you a even better looking effects!
[…] Buarada, vekt?rel logo yap?m? illustrator da anlat?lm??.? Illustrator da b?yle i?lemler daha h?zl? yap?labiliyor. […]
Hi Bittbox,, thats very handy to know…If theres anything that can me done in illustrator that can be done in photoshop then i deffinately like knowing about it. While were on the subject of comparisons kind of…is the blend tool in illustrator as good as photoshop do you think?? cos right now i tend to struggle at getting a good looking blend in with colours illustrator. Maybe some hints or tips from others also?? The blend just doesnt look that blended to me in illustrator when i use that tool.
Frank
Again you’ve made me so glad that I hit that button to put you on the google home page.
I just was asked how we can “beef” up our logo.
Now I have a ton of ideas! Thanks again!
@lizzard ?
What button? I want Bitty on my Google page too!
@jeff
Click the “Subscribe” button in the tools section of the sidebar. Then you can add to Google.
~Bitt
I’m gonna have to agree with Simone, it’s just not “Web 2.0″ without a crapload of gradients, and probably a gradient stroke too. Plus, it’s trivial to make the “shine” wavy. Then there’s always the dreaded “reflection” underneath it. Come on!
hi Bittbox
i don’t get it: the ”Select>Same>Fill Color” doesn’t work for me, so i can’t crop
@wilm
You can use the white arrow to select all of the letters individually, and then select the square.
~Bitt
You can obviously use gradients and other small enhancements, but I just wanted everyone to know about the Offset Path feature.
~Bitt
great - thank you! beside, could you tell me which font did you use - I’m looking for a free font like yours, especially with this rounded little “e” :-) greets, nicole
@nicole,
I believe I used Myriad Pro Bold Italic.
~Bitt
It’s already boring style to make such a logos (in my opinion).
[…] ?? […]
Great tutorial! But, is it possible to do this in Inkscape? A good tutorial in Inkscape would be great! Thanks
great tutorial.thanks a lot.
hey man just came to ur site and saw this tutorial. man this is just dam easy stuf. thanks man
I don’t know where I got lost. Oh well I can’t get mine to work right. Thanks for publishing this though!
[…] Bittbox hat ein kleines aber feines Tutorial geschrieben wie man Text im Web 2.0 Look in Illustrator erstellt. Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte finden und mit anderen teilen k?nnen. […]
great tutorial less step best result thanks
Not exactly the best post on glossy text I have ever seen. I’ll post one on my blog to show you.
It’s a complicated tutorial for a 2 steps effect, done from blending options.
oh thanks this is what I was looking for!
Another option. if in rgb mode (it is a web logo after all) copy the text layer, use the divide filter with a rectangle to cut the gloss layer in half and fill with the black to white gradient. set the gradient layer to “screen” and add a black stroke to get the offset, the gradient looks a little nicer than just a solid white fill.
dirty bird out!
Great tutorial! Thank you! :)
Hey BittBox!
I love your Website!! Thank you so much. Many many great tutorials. Does this “glossy text” method also work out with graphics? I tried but I didn’t manage. Could you please tell me how to do something similar for example with one of your circular designs? Thanks a million. :)
Hey man, just wanted to say this article is awesome - so easy!! Loving BitBox, i come here when I have a mental design block hahaha.
good work!!
the instruction offset path do not accept the number -2, send a massage “invalid numeric value”
hey really nice……
I’m using Illustrator’s “Rising” Warp Effect on my text. Following this method doesn’t work with “warped” text. I had no problem if I removed the effect. Any suggestions?
[…] b/c everyone has an RSS icon and some are bigger than others and more glossy. Here is how to add a gloss to this as […]
I don’t really know what I’d do without your tutorials. (probs just really suck at illy!)
Anyway, even though I’m copying your techniques, I’m learning new tricks and tools on the program! Woo!
simple yet nice tutorial. love it.
Great tutorial! But, is it possible to do this in Inkscape? A good tutorial in Inkscape would be great!
i can’t get it to select my offset path. When I hit “ok” after offsetting my path, the new offset path is not selected, and I can’t seem to get it selected using any of the arrows.
[…] Vectoring ‘Funky’ Colours. 22. How to do pop art portraits. 23. Glossy Vector Web 2.0 Logo Text in 5 Easy Steps. 24. Create a Vector Pirate Cartoon Character from a Hand Drawn Sketch. 25. Vector effects. Read […]