You will probably find dozens, if not hundreds of tutorials on how to do this in Photoshop, but I’m going to show you how to do it in Illustrator (vector). The advantage? You can scale it up for a roadside billboard if you like. That’s the power of vector graphics. All you have to do is make it once and you can change the size as many times as you like, without losing quality. I’m tempted to say that this (logo reflection) effect might actually be easier to do in Illustrator in the first place. Man, the web is definitely a creature that likes to follow trends. Let’s break one shall we? . . .

Read the rest of this entry »

Let me start of by saying that there are many different ways to do this. I’ve recently gotten a lot of emails and feedback regarding how to take the free vectors I provide, and actually use them in a web page design. There is no possible way I can entirely cover that subject with a single tutorial, so I’m going to show you a simple example to expose some key steps that might make this process a little more clear to you. It’s important to note that this tutorial requires basic knowledge of a vector graphics editor (Illustrator in my case), Photoshop, HTML, and CSS.

There are a number of reasons why vector graphics may be pushed aside in favor of photoshop when it comes to web design. One of those reasons is exactly why I wrote this tutorial. It takes a few extra steps to get an image from vector format to a webpage design, but vector graphics hold much more value in the long run. For instance, you can customize a set vector buttons for a specific website design, take all of those customized vector graphics into Photoshop, and you have your raster buttons to save for the web. However, since you started off in vector format, you can dig those buttons up a year from now and change anything you want about them, without losing a single pixel-worth of quality.

Read the rest of this entry »

This set is Part 3 of my Free Vector Web Page elements series, and there are a couple of important differences to note. Believe it or not, there is no “reflection” in this set. In fact it’s quite opposite of the previous sets in 2 ways. Instead of a reflection, we have here a subtle shadow-like gradient overlay on the bottom half of the button and header shapes, that hints at a silky 3D feel.

There is no transparency involved in the main buttons and bars (white silky ones), so they should be relatively easy to customize. If you change the color of the button itself, you must also change the bottom color of the gradient overlay. Another difference is that this is my first set designed on a dark background. If you are wanting to apply customization to any of my previous sets to a dark background color, this set might help you learn how to do that on your own.

Read the rest of this entry »

I wanted to lighten things up for a post and show you my brainstorming method. It may seem a little archaic, but this is honestly how I decide what story to publish next. From emails I get from you all, and various comments, I can tell that some of you are probably curious as to who exactly I am, and how I come up with my ideas. So I’m dedicating this post to answering some of those questions.

Read the rest of this entry »

I was thinking to myself that this probably should have been one of my first posts, so I quickly made some glass orbs for you. What kind of Illustrator blog would this be without a free glass orb download? I guess it completely slipped my mind and I apologize, but I’m serious when I say that ANYONE can easily make these on their own in Illustrator. No clipping masks, just 4 shapes, 1 drop shadow, 1 feather, and 1 transparency mask. If you don’t know what a transparency mask is, read this post on how to create a vector glass button in Illustrator, with detailed instructions. AI (including legacy), EPS, SVG and PNG formats available in the download.

Read the rest of this entry »