Tag Archives: image

Funny Clix and Star Wars Minis Juxtapositions

These are all pictures I took while gaming at various local shops over the years…I generally come up with funny ways to position Clix and SWMinis figures during longer games. xD Scroll down and enjoy!


Superman and Black Hand taking time out from the battle for a quick fist-bump.

The making of Iron Man V: Tony Stark Meets a Mirror

We know what Speedball’s really interested in, and it’s not dealing damage.

Nightwing’s kick is pretty powerful if it can age the Flash 50 years in one hit!

Funny, I never knew Galactus was a falconer…

Judging where Iron Fist’s Dragon Punch energy is coming from, this is either a huge ego boost for Power Man, or incredibly painful.

Nick Fury got tired of trying to explain Facebook to Captain America after the first 10 times…

The World-Eater himself is caught in the act of adding another gruesome line to his reputation.

When the paycheck from the newspaper wasn’t enough, Peter Parker had to get creative for his second job.

A sparkly-caped Justice, in the act of punching Mojo where it really hurts, apparently.

BONUS: This was an actual shower gel product sold in my local drugstore a few years ago, marketed to men. I LOL’ed, and then snapped this quick picture.

BONUS: The title of a Clix event we held at our local gaming shop a few years back–it was an all-female tourney event, as you might have guessed.

I took the liberty of decorating the dry-erase board with thematic illustrations for the event…

…Yeah, I couldn’t resist illustrating bloody beauty products for this tourney.

Star Wars Minis

Queen Amidala: “For the last time, Chewie, I have no idea what “raaaaaaaahhhaaaaaaaawwwrrrr” means!!”

This poor little soldier is about to find out why it’s dangerous to be crammed in a small space with a bunch of Jedi…OW.

The Face of Jesus

Image source; painted by Akiane Kramarik.

According to Colton Burpo, whose amazing experiences formed the basis of the book Heaven is for Real, the above picture is the most accurate earthly representation of Jesus Christ.

The warmth and compassion depicted in this picture brings tears to my eyes every time I view it. This is Who Sunday morning worship is all about, folks. Indeed, He is what every moment of prayer and worship is about. Sometimes we just lose the sense of just Who loved us enough to suffer and die for each one of us to be saved. This picture brings that sharply back into focus.


Fantastic Places (That Don’t Really Exist)

Oh, if only these places and vistas really existed…I would definitely have to visit each one! Sometimes the sheer beauty of a place is inspiration enough, and these would be worth the travel time.

Image source: DesktopNexus.com

Image source: mi9.com

Image source: OnlyHDWallpapers.com

Image source: SolarFlareStudios.com

(For each of these images, click to get access to a much larger version, or you can go to the sourced website to retrieve it in a big enough size for your computer.)

The Lowly Transparent Shim

You probably read this post title and thought, “Shim? What’s that? And why is it transparent?” Well, in the days before CSS padding and margins, transparent shims were a godsend to webdesigners…but they can still help out our modern pages! Read on to find out how!

A Little Shim History

Transparent shims borrow their name from their wooden companions in the carpentry and construction businesses. These thin wooden pieces, often made from scrap wood or plywood, can be used to fill awkward gaps or spaces, help separate a couple of pieces of material, or make something fit more snugly and more level.

In webdesign circa the mid-2000s, a “transparent shim” image was about the only way to precisely position elements on your page. For instance, need an extra 30 pixels of horizontal space between your HTML form’s label and its text entry box? Then you’d just put in a little image tag linking to your shim image between the form label and text entry box, like so:

<img src=”shim.gif” width=”30″ height=”1″>

Or, if you needed more vertical space between your header image and your content, you’d put a little image tag like this between header and content:

<img src=”shim.gif” width=”1″ height=”50″>

Because this image was transparent, it could be stretched to any dimensions using the width and height measurements without the layout looking strangely colored. And, because it started out as a 1px-by-1px GIF file, it loaded quickly and didn’t clutter up slower connections.

These Days: Less Shim, More Padding

With the advent of easier-to-code CSS padding and margins, however, transparent shims have been less and less needed. No more need to call for that shim 50 or 60 times in a page when a couple of well-coded properties in a stylesheet can handle it all, right?

…Well, MOSTLY. There are a couple of instances where transparent shims can still help out:

Shim Situation #1: CSS Padding Rendering Differently Between Browsers

Sometimes Internet Explorer, Firefox, and Chrome will disagree on how to interpret CSS style rules such as “margin: 3px;” or “padding: 1px 10px 1px 10px;”. (CSS box model problems with IE, specifically, have been widely documented for several years.)

Shim Situation #2: Disobedient Layout Elements

Sometimes, an element on the page just will NOT position itself where you want it, and no amount of finagling, debugging, pleading, or shaking your fist at the screen will fix it. Whether text isn’t wrapping like it should, or whether some floated element is somehow “un-floating” itself, display bugs can ruin your webdesign day.

Enter the transparent shim; they act as little peacemakers, going across platforms, being equally accessible and understandable. All you have to do is put in that little image tag wherever you need it, and work with the pixel measurements to your heart’s content.

How to Make a Transparent Shim

  1. First, open an image program that can make images as well as edit them, and that can make images transparent. Adobe Photoshop Elements is the program I use; Microsoft Paint won’t do it, and neither will most really basic photo editors. Free applications that can make transparent images include GIMP and Pixlr.
  2. Choose to create a new image rather than edit an existing one, and make sure its width and height are both 1 pixel. Also, choose the “Transparent Background” option (could be in a dropdown list or a checkbox).
  3. Once you’ve created the image, save it as a transparent GIF or PNG-24 file. (JPEG format doesn’t recognize transparency.) Make sure you click the option to save it as a transparent file, otherwise it will just render as white. (For instance, Photoshop Elements has the “Save for Web…” option, in which you click a little checkbox reading “Transparency” underneath the file format option box. Your image program may be different–check every option before you click “Save!”)
  4. You should be done! To test transparency, load your new image, sized at 50 pixels by 50 pixels, on a basic black-background web page. If no 50×50 white block shows up at the top left corner, your image is indeed transparent!


Transparent shims are relatively easy to make and work with. If you have an awkward form width, an odd spacing, or even a fairly okay layout that needs just a little adjustment, try placing a shim, and see how heroic 1px by 1px images can be!