Fun with Illustrator’s Lesser Known, Yet Powerful Tools

Believe it or not, Illustrator is capable of some amazing effects similar to those in Photoshop, all waiting at the tip of your finger in the Tools palette. These are NOT filters, but some lesser known Basic Illustrator Tools that , if harnessed right, can transform a single path into a work of art. I’ll show you some simple examples, but I invite you to explore these really, really easy tools a little further using your imagination.

These effects may or may not be new to you, but I’ve been using Illustrator for over half a decade, and I felt like a kid at a candy store once I started playing around with them! Here is an example of what you can do in a matter of seconds (literally):

Experimenting with Illustrator Tools
Read the rest of this entry »

Free Vector Web Page Elements – Part 4

Here on BittBox, I like to share things with you, especially those things that can make your life a lot easier. Have you ever discovered something very simple, yet very useful in a program you use on a daily basis, and thought to yourself “Man, That’s sooo easy. If only I would have figured that out 3 years ago!” Those are the kinds of things I like to share. Well, I came across an awesome tutorial a few days ago on NDesign Studio that explains one of those very simple things in Illustrator: Easy Abstract Lines. I started experimenting with these lines, and incorporated them into some vector buttons and headers, and I invite you to do the same (experiment). I guess what I’m saying is that this set of freebies is meant more-or-less to inspire your creativity a bit, and play with a new tool (if you don’t already know about it, of course) Abstract lines via the Blend Tool.

Tutorial Link: Abstract Background Tutorial by NDesign Studio.

Free Vector Web Page Elements - Part 4
Read the rest of this entry »

Tutorial: Web 2.0 Logo Reflection in Vector format with Illustrator

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? . . .

Vector Web 2.0 Logo Reflection in Illustrator 19
Read the rest of this entry »

How to use Vector Files in Web Design

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 »

Free Vector Web Page Elements – Part 3

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.

Free Vector Web Page Elements Part 3
Read the rest of this entry »