Graphics
Posts relating to computer graphics. Adobe Photoshop, Illustrator, etc.
The Bit Armory Visual Studio Theme

I recently upgraded to Vista 64-bit, and got hooked on the eye candy.  So, I decided to pimp out my IDE with my company's color theme. :)  Still working on some of the colors, but looks pretty good huh? Any suggestions?  I'm thinking I should tone down the save/modify color tracks near the line numbers so it fits in more....

image

How to fill open shapes in Visio

So, I was quite annoyed at Visio because I was lacking my Adobe Illustrator features, like filling in an open 2D shape.  Unfortunately, Visio doesn't have enough UI to allow you to set the fill of an open shape, but Visio is certainly capable of filling open shapes (contrary to what KB articles say).  Here's how to do it, let's first start by first drawing a simple square with the Pencil Tool:

image image

I filled the square with a red fill, and gave it a heavy dotted outline.  Now, open the ShapeSheet window:

image      image

Then manipulate the Geometry1 render table values by multiplying them by *1 and *0 and you'll get interesting results as shown below, here's what it looks like with my Gemometry1 table modifed:

  image  image

By the way, in case you're wondering, the LineTo points are just like a Cartesian coordinate XY graph.  Values are all relative to the origin which begins at the lower left of the object.  For example, Geometry1.X3, Geometry1.Y3, in the example above, are both Height*0 and Width*0, which is 0,0 origin. smile.gif  Have fun.  Hope that helps!

PNG Transparency and Cross Browser Compatibility

image If you are dealing with web-development, PNGs, and transparencies, this neat little trick should help.  Cross browser compatibility and support for PNGs isn't that good between IE5, IE6, IE7 and other browsers.  But there are some tricks you can do to help minimize PNG transparency problems while maximizing cross browsers compatibility.  The best technique that I've found for working with PNG transparencies is to use Adobe Fireworks to create PNG-8 images with "Alpha Transparency" indexes.  This eliminates the need for JavaScript/Filter Hacks to make PNG transparencies work correctly.  Here's the SitePoint article on how to do just that.

 


NOTE: I copied the following from the SitePoint article.  For some reason, Sunday 2:00AM 3/22/09 their servers were down and couldn't access the article.  So I pulled a cached version and appended it to this blog post to avoid loosing this gem article forever.  If the site point link article works, please use it instead (I'm sure they want their Ad revenue.)


By Alex Walker

I ran through this little Fireworks PNG trick in the Design View this morning and thought it was worth dropping in a blog post too. This is a method that’s been around for years, but I’m constantly surprised by how many people don’t know about it. Even in this office, I’ve had web gurus furrowing their brows and insisting “No, no … that can’t be right … can it?

So, at the risk of having long-time Fireworks users yawn, roll their eyes and think duh!, here it is.

As you probably already know, PNG comes in two flavors — 8-bit and 32-bit. It’s the 32-bit version that gets most of the fanfare.

PNG32’s major characteristics are:

  • It uses a flexible “JPEG-like” RGB color model, rather than a limited palette as GIF does.
  • It employs a completely lossless compression method, allowing you to save and resave your image with no loss of quality.
  • Lossless compression does come at some cost — PNG images are always much fatter than their JPEG equivalents.
  • It can reproduce complex, graded transparency settings, similar to a PSD or TIF file.

Of course, Microsoft’s scant regard for the PNG spec (authored way back in 1996) meant that the announcement of the glorious PNG format fell on deaf ears. And rightly so — as Internet Explorer was steadily grinding it’s way to a 95% share of the browser market, naturally an image format that rendered transparency as a solid, dishwater grey for most users qualified as a total non-event for the majority of developers.

Not to be bowed, a lot of bloodyminded developers set about inventing all manner of hacks, tricks and workarounds designed to force IE to play nice. These included many JavaScript/IE Filter-based solutions and even a Flash powered PNG renderer.

While most of these methods worked, all of them were complex, completely tied to the presence of another technology (Flash, JavaScript, etc.), and still failed badly on older browsers.

These efforts were, however, good attempts at making the best of a bad situation.

PNG8’s major characteristics are:

  • It employs a palette-based color model (sometimes called an indexed palette), like the one that GIF uses.
  • It can’t animate like GIF.
  • It offers GIF-like 1-bit transparency. Pixels are either solid or completely transparent, but never partially see-through.

Although this last point is generally accepted as fact, it isn’t strictly true, and this is the topic we’ll be examining today.

Transparency information for all PNGs is contained in a section of the file called a chunk, and according to the spec, for indexed images, it stores alpha channel values for one or more palette entries.

In other words, the chunk is allowed to have more than one transparency color.

Now, as we know, official specs can lay out all sorts of wonderful ideals involving rainbows and unicorns and fluffy kittens — just look at the most of W3C specs — but it’s what happens in the big, wide, dirty world that truly matters.

Let’s look at an example.

image

We’ll begin in Fireworks with a simple illustration that I’ve given a yellow translucent glow. As you can see in the screenshot below, the background is visible through the glow.

If we set our file format to PNG8 - indexed transparency, we get a result very much like any transparent GIF you might see. One color chip in our palette is set aside for the alpha channel, and all semi-transparent colors are flattened into the background color and rendered opaque.

image

However, if we switch from index to alpha transparency, things get interesting.

image

While our default alpha chip is still there in the top left corner, our PNG8 palette preview now shows a new type of color chip with a transparent chiplet cut out of the top-left corner. These are our semi-transparent colors.

Let’s export the graphic and see what our web browsers make of it. If you want to try your own quick tests, the page is here.

image

As you can see in the diagram above, all four modern browsers render the yellow glow effect beautifully, with subtly varying levels of transparency. No issues there.

But what about those cranky older IEs? Are they going to suck the life out of the party again?

The answer is: not necessarily.

image

Granted, older browsers won’t render the gentle glow effect, they’ll happily ignore it while continuing to render the 100% transparent parts in glorious, GIF-like, 1-bit alpha. Not perfect, but not tragic either — particularly when compared to the ugly grey boxes that accompany unhacked PNG32s on older versions of IE. Keep in mind that all the IE filter based PNG hacks still leave a grey box in IE5.

Amazingly, Fireworks seems to be the only graphics app that supports this semi-transparent PNG8 export feature — and it has done so since at least version 3.

I can certainly confirm that none of PhotoShop, Gimp, Paintshop Pro, or Xara has this functionality built-in. Since I first published this in the DV, forum member Danieljames has reported that two small apps — pngquant and pngnq — can mimic this trick. However it appears that Fireworks does a better job, so obviously if you have even an older version of Fireworks hanging around, it’s probably worth holding onto just for this feature!

Summary

It seems there are very few reasons for not using more 8-bit Fireworks PNGs in our work. In many typical situations, between 60% and 80% of users will be using a browser that fully supports these files.

image

The remaining IE5-6 users will see a slightly jaggier but often very acceptable version of the same image. The example to the right is used on the sitepoint.com home page, and I doubt IE6 users are aware that they’re missing anything.

The generated files are small — the light globe image used in the examples above was less than 6k. I generated a PNG32 version of the same image and it was 3 times the size.

And as they have no reliance on browser hacks, JavaScript, Flash, DirectX, or any other third-party technology, it’s difficult for them to fail.

While there still may be times when full transparency control in all browsers will demand the PNG32 hacks, personally I think PNG8 should become the default choice for web transparency effects.

How to create tile-perfect diagonal lines in Illustrator

Creating diagonal lines in Adobe Illustrator is somewhat of a pain.  I'm creating the graphics for our new Web 2.0 site, and had a hard time creating diagonal lines.  But here I'll show you how to create angled 45deg Web 2.0 lines in Illustrator with relative ease.

 

First, turn snap to grid on.

 image

Select the line tool, set the stroke width to 5pt (or your desired width).

image

Make sure your stroke color is the color you want it.  In this example, my stroke color is black.  Next, on the canvas, draw a diagonal line that is slightly larger than the major grid box.

image

image

Next, Move-Copy the line 12px away from the first line.

image

image

Hit the copy button.  Once your copy appears on the canvas, press CTRL-D to repeat.  You need to repeat until you have a major grid completely covered.  Like so:

image

Next, select all the diagonals then go to Object>Path>Outline Stroke as shown below:

image

image

image

Next, draw a square (with no fill and no stroke) as the same size of a major grid box (72px by 72px) and place it over the covered major grid like this:

image

Your square should be 72px width and height.  Next, select all, and click Divide on your Path Finder as shown below:

image

image

image

Ungroup and cut the excess diagonals from the major square:

image

image

image

Now you should have a nice cut pattern like the one above.  Select your pattern and drag it to your swatches.  Once you see your pattern in your swatches palette you can then use the swatch and apply a fill to your irregular pattern and archive the following results:

image

Pretty cool! :)  Hope that helps! happy0122.gif

Helpful Tip:

If you want to apply a radial gradient or a fill color to your stripes, you'll notice that this method wont work.  But to make it work, you just need to continue a little more.  Select the original pattern you created:

image

Next, Merge:

image

(This effectively merges the original invisible (no stroke no fill) square with your diagonals.)

If you choose to stop here, you'll notice the pattern diagonals still act like individual objects when a fill is applied, and you get something like a diamond shape when applying a radial gradient:

image

To unify the stripes as a single object do the following (and ultimately, have the gradient applied to the diagonals as a whole, instead of individually), Ungroup:

image

Then Add Shape Area in your path finder tools:

image

Then click Expand:

image

Now you have the gradient applied to the whole shape instead of each individual diagonal line:

image

There we go!  Hope that helps!