Creating a glass effect vector button in Illustrator CS4

It’s not unreasonable that people assume that all images are created in Photoshop, most people would never have used vector forms and Bezier curves let alone used Illustrator. All I am trying to show here is that not everything is a bitmap.

As designers we regularly ask for a logo file and frequently get given a JPEG or worse still a GIF hastily dragged from the customer’s website. In the last couple of weeks I have re-drawn a few logos to create high quality ‘vector’ originals: ideally I would have been supplied them to save time and ensure consistency.

Some time ago we had a look at ways to edit and improve images online. There were a couple of posts that looked at improving bitmap images, principally JPEGS, but now it’s time to have a quick overview of vector images.

This is post intended primarily to give an overview of vector graphic forms. Using Illustrator CS4 you will get an insight into working in layers and the merits of vector artwork.

You can download the file used in this tutorial here

In the video mention is made of attaching text to paths, there is a bit more info from Adobe here though.

Halftone Effects: More Than Just Pop Art


The halftone effect can be a very useful tool, probably mostly when working with bitmap images. At it’s simplest a halftone is a way of reducing a continuous tone image to two tones (eg black and white) and a series of shapes, often dots of varying radius. At a distance the eye/brain makes sense of the image and simplifies it to a recognisable form.

I needs understanding that there are no rights and wrongs other than not getting the look that you are after. This is very much an effect that will need a degree of experimentation.


Bez (Diffusion Halftone)

Just to clarify there are two very different ways to create and edit artwork: either vector based or bitmap based as previously discussed. I will look at playing with halftones and bitmaps. There are plugins available that enable vector software, in particular Illustrator to achieve similar effects.

This short video will walk you through some basics. I will create a similar video showing the vector approach.

Can I just tag on a Happy Birthday (5th) to the Arts Award. I had the pleasure of working on this project for their original brand design and printed materials, some of which are mentioned in this video. Well done!

Need To Resize or Edit a Photo But Don’t Have The Software?


Google won’t thank you for it, any more than your customers will. Worse still WordPress may well throw overly large image files straight out of the pram.

If you don’t have PhotoShop why not try PicNik.com? I’m not on a commission, I just think it’s neat, a great online resource as recommended through Twitter.

Large image files slow websites down. Google increasingly penalises poor page speed and your viewers will tire of slow pages. The bottom line it is good practice to optimise your images before you upload them. PicNik will let you resize and edit your image and save a copy back to your computer ready to upload to your website or blog.

WordPress Guides

This video is part of a series aimed at those new to WordPress

  1. Creating a simple post
  2. Images for the website (part 1)
  3. Images for the website (part 2)

Footnote, Unfortunately the bottom of the screen has been trimmed, there is a dialogue box that gives the image dimensions (bottom right). Also when I am referring to the screen size (1440 x 900) it is for the mac that I am working on, yours may differ.