Depicting A Struggle With Addiction

May 19, 2007 at 11:31 pm (computer art, Depicting Addiction, Digital Art) (, , , , , , , , , , , , )

I made a poster for a class project, entitled “Overcoming Addiction“, a topic that I’ve become all too familiar with over the past year. The person depicted is my dear friend, Jordan. A year ago, while still working as hotel manager at the YMCA Hotel, I came across Jordan on a downtown street. He was busking with his green violin. In the evening when I left work, he was still sitting in the same place, playing with the same intensity. His music was astonishingly beautiful and hypnotic. I sat mesmerized and became lost in the sorrowful strains.

A few days later, I struck up a conversation and learned that he was living on the streets for the past 10 years and had a serious heroin addiction. I asked him if he wanted to quit. He said yes. This began a labyrinthine journey for both of us, Jordan towards a better life, and me towards a deeper understanding of the affliction of heroin addiction.

I took him in to our Hotel, along with his pitbull, Zero. I charged only the nominal amount that social services allocates, although the room cost was much higher. Despite his addiction, Jordan often surprised me with his depth and insight. One day while helping him pack, I came across an unfinished verse. It sent shivers up my spine and completely moved me. Here’s Jordan’s verse:

I lost desire so long ago
The boy I once was, turned half a man I don’t know
What dreams I had fell silently like snow
Who am I? Where did I go?

All feelings are dismissed
Warmth of a lover’s tender kiss
Friends and family I may never miss
How did I become this?

There must be some way out but oh I’ve tried
I’ve fought, I’ve stole, I’ve cheated and lied
The needle holds a place to hide
I wish to bring myself back to the day …
the day when Jordan died

After the YMCA closed in December, 2006 (to rebuild a new facility), I found him a room in a Gastown hotel where the manager was willing to take a gamble on a young person who had not yet overcome his addiction. In addition, the hotel allowed his pitbull, so we were happy to overlook the minor inconvenience of hordes of mice and cockroaches.

Days passed with bitter struggles, Jordan crying in pain and in need of a ‘hit’. I witnessed the wretchedness and hopelessness of addiction, the vomitting, intense fevers, wasted time spent in alleys waiting for dealers to show up. I saw his frustration when the needle would no longer penetrate hardened veins, I saw the open sores. My eyes were opened. Such a vicious and desolate cycle. My heart ached to see such futility, especially in someone who had become as dear to me as a brother.

Finally some light began to appear at the end of a long, blackened tunnel, at first a mere shard, then gradually expanding into a glowing beacon. Jordan started a methadone program, stopped using heroin, then finally over a period of two months, weaned himself off the methadone. Today he is completely free of heroin. Looking back at the long road travelled, it feels as though we’ve been comrades through an exhausting battle, a horrific bloody war …

I’ve kept a photo journal throughout his year’s struggle. Many of the images are heart wrenching and extremely graphic. (they are not among the links below). For now, they remain tucked away. One day Jordan may want to tell his story. If he does, I’ve told him the photos are there. (I offered to do the layout and provide the photos and digital art). ūüôā

This poster is far more raw than my other fantasy art, yet it holds an equal place. I oscillate freely between both worlds, never averting my eyes from reality, but afterwards retreating to a more gentle realm to recharge my energy.

More images of Jordan:

New Direction

The Green Violin

Amazing Street Musician

While You Lay Sleeping

Deadly Flirtation

You may notice I have placed a goulish face in the window. I tried out some variations:

Visit my website: The Graphic Groove
Or my gallery on Flickr

Return To Gale’s Home Page


Permalink 12 Comments

Conquering the CSS Upgrade

May 13, 2007 at 12:52 am (CSS - Getting Started) (, , , , , , , , , , )

Graphics-maniac that I am, I couldn’t resist the allure of the CSS upgrade feature. I slapped down the ol’ Visa and bought myself a year’s worth of limitless experimentation, an open frontier of CSS possibilities. After the initial euphoria, when I dived in to try this new feature, I hit a solid brick wall. I spent hours reading through threads in the CSS Help Forum and became convinced that I must be a high calibre nitwit. The explanations made no sense at all.¬† But determination is my middle name.¬† For the next few days I clicked on the Forum, searched Google, visited the Forum again, delved into CSS manuals, then back to the Forum. I saw posts from others who were feeling the same frustration as me. I could relate to comments like: “Help!! I’m about to pull out all my hair !” and other frantic requests for help.

Well people, I’ve finally figured out how the bugger works and I’m here to¬†provide a little Step by Step so that others can bypass the wasted hours of dire frustration that I went through.

    Step 1
  • Purchase the CSS Upgrade by going to the Upgrade tab.
  • Step 2
  • Go to your Presentation. You will see a Tab called “Edit CSS”.
  • Once there, you have 2 options. You can either add changes to the existing Template OR you can start from scratch and enter a brand new CSS stylesheet.
  • This is Where I initially got Lost ūüôā What I saw before me was a list of instructions plus the two Options with a button on, button off. I clicked on View Stylesheet and the code for the Template came up on my screen in a separate window. Voila, I thought naiively. I began making changes to the Template and when I pressed save, nothing happened.
  • Step 3
  • The secret is that you delete all the instructional text from the center of the WordPress page, not¬†try to insert code into the actual¬†CSS template page !! It seems obvious now, but believe me, for the past 3 days I was looking everywhere, and I mean everywhere for the place to insert my CSS, and because I hadn’t noticed the instructional box had a scroll bar on the right side (which was almost invisible in the Browser I was using), I wasn’t able to scroll down to the very bottom to see that it mentioned to input your CSS here. Aggggghhhh !!! Now admit it, the same thing happened to you, that’s why you’re here reading this entry, no?

The important thing to note is if you choose the Option “Add to Existing CSS”, whatever you input into the text box will override your CSS template. Your instructions are given precedence over the same instructions from the Template, so you can actually change any template (this was something that also seemed confusing at first, and judging by help requests in the CSS Forum, I’m not the only one who was confused about this). For example, so far, I’ve just done a small experiment with the Dusk Theme and have changed the header image to an image that I uploaded to WordPress, using the same image dimensions as the original header image from the Template. I copied the CSS code from the template:

#header {
width: 760px;
height: 170px;
background: url(images/header.gif) no-repeat;

I replaced it by typing this code into the CSS Editor Window:

#header {
background:url(‘’) no-repeat;

You’ll notice I added an ant (a crawly insect) to the header and a bit of foliage, something subtle just to get the feel of how things work. I¬†did the graphics of¬†the ant and foliage in Photoshop, plus added a more playful header text because I prefer elements to have a free-flowing feel to them. I then saved my new image as a jpg at the same dimensions as the original header image, as not to mess up the way it would display on the Blog page.

In order to make the template’s header text box disappear, so that my playful header text would not be covered up by the original header container box, I copied the template’s header box CSS code into my CSS edit window and¬†changed all of the¬†settings to zero “0” … clever, no? … which in essence makes the original header box invisible … I realized that I couldn’t actually delete the¬†original template text box instructions. Where there’s a will, there’s always a way, although¬†you sometimes have to resort to obscure back door routes.

Now that I’ve figured out how to get started, I can take my time to experiment and examine the CSS code, section by section until I fully understand how each element works. While I was researching on the internet for instruction in CSS coding, I found this tutorial at which¬†provides all the fundamentals of CSS coding.

I wish you the very best of luck in getting started with your adventures in CSS. If you’re anything like me, you’ll be playing and tweaking your CSS¬†all night long until the birds begin chirping the next morning, then have to dash out the door¬†with socks that don’t match and¬†one earring in and the other one¬†left at home on the bathroom cabinet. ūüėČ

Visit my website: The Graphic Groove
Or my gallery on Flickr

Return To Gale’s Home Page

Permalink 7 Comments

Break On Through To The Other Side

May 5, 2007 at 5:21 pm (How to make a gif animation) (, , , , , , , , , , , )

The weeks of school are passing at lightning speed. My days are spent wedging technical data into the crevices of my brain. Technical data and theory, data and technical theory, ad infinitum, ad nauseum. The constant repetition has caused me to somehow get stuck in a ‘left brain’ rut. I can’t seem to shift gears back to ‘right brain’ mode in order to regain access to my creative thinking. It’s as though a valve has been choked off and I find myself trapped in a compartment filled with data, calculations, tags, hyperlinks, greyscale values, channels and other odd assortments, all rattling around inside my skull. I can’t locate the switch that will enable me to cross back over to my creative side. This strange phenomenon comes at the worst possible time. I have an impending deadline for a series of digital illustrations I am working on for a children’s book. I must figure out a way to shift mental gears, to cross from left and back again to right with ease. At the moment it feels as though I have a bad case of writer’s block, or more aptly, illustrator’s block. Agggghhhhh! Must find doorway! Must locate gear box! Must claw my way back to right cerebellum. Must break on through to the other side!

Last night I studied for several hours, and again this morning. My brain was filled to the brim with code, tags, hypertext, links, and HTML. I decided to take a much needed break. I opened Photoshop and began playing with distortions of butterfly wings, which I saved on a background set to the same color as this blog template’s background. I then assembled 4 images as a gif animation, which can be done in Image Ready, but I used an old standby gif animation software from Ulead (Ulead Gif Animator). I’m not certain if WordPress allows animated gifs to be viewed in the body of a blog. I’m about to find out …

Holy cryptonite! It worked! I’ve finally succeeded in clawing my way back to the other side! My creative brain regained! This warrants a celebration, or at least a better explanation of how I made this gif animation:

  • Open an image of a butterfly in Photoshop.
  • Extract one wing, using either a Mask or your preferred selection tool. More on Masking
  • Fill the background layer with the same color as the background from your Blog. Do this by taking a look at the CSS code for the WordPress template document to find out the exact numerical value of the color. (All that technical jargon from class is beginning to sink into my ‘left brain’). ūüôā
  • Duplicate the extracted Wing Layer 3 times.
  • Using Edit/Transform/Distort, begin distorting the wing to make it appear as though it is beginning to close. Make sure to move the ‘anchor point’ of the distortion box to the inner-center of the wing. This will become the central pivot point from which the wings open and close.
  • Do the same with the other duplicated wing layers, but with each layer distort the wing angle a little further on each subsequent layer, in order to make it appear as though each wing layer is closing more tightly. Be sure to set the ‘anchor point’ on each subsequent layer to exact point you chose for the first distorted layer.
  • Link all the wing layers and drag to a ‘New Layer Set’ folder, which can be found at the bottom of the Layers Palette
  • Duplicate this entire layer set folder.
  • With the entire copied layer set chosen (highlighted) in the Layers Palette, choose Edit/Transform/Flip Horizontal. Then continue using the Transform feature, rotating the second set of wings into place so that they exactly meet at the center of first set of wings, in order for it to appear as though the butterfly is now ‘whole’.
  • Add a new layer just above the background layer. With a small brush, paint antennae. Add a subtle drop shadow.
  • Now add drop shadows to all the Wing layers in the original layer set. Then click and drag these drop shadows, which will copy them onto the corresponding Wings in the duplicated layer set. You will notice that the drop shadows in the copied set need to be dragged to a new location in order for them to appear convincing. Do this by double clicking on the drop shadow in the Layers Palette, when the Drop Shadow Option Box appears, Turn OFF “Use Global Light” and drag the shadow with your mouse to the desired locations.
  • In both layer sets, on the Layers Palette, turn on the eyeball (make visible) the background layer, plus the matching wings in both sets of the layers palette. Turn on only one set of matching pairs at a time. Begin to save these images into the .jpg format, naming them some sequence like Wing1, Wing2, etc. Do this for each set of wings against the background layer.
  • Now you can compile all 4 images into your preferred gif animation software, set the timing for the opening and closing of the wings, and save to a .gif format. Voila!

Visit my main website: The Graphic Groove
I also have many new digital illustrations on Flickr

Return To Gale’s Home Page

Permalink 7 Comments