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):
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.
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? . . .
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.
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.
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.
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.
Sponsors
Twitter: bittbox
- New Blog Post: Free Texture Tuesday: 5 Unique Cloud Textures: Today I’m giving some cloud photographs that are a... http://t.co/fJxEqEpr
- New Post: http://t.co/yq8XkgjK
- New Blog Post: How To Create A Set Of PS Brushes From A Single Texture Photo: Creating Photoshop brushes is rath... http://t.co/ljZ39pJf
- New Blog Post: Free Texture Tuesday: 5 Split Wood Textures: http://t.co/GcEkrC6z
