Moshi moshi

The journal of a graphic person.

Keeping on drawing

Posted Wednesday, August 30, 2006 11:02:26 AM by Gordon Mackay

In my quest to learn how to draw with more skill in Fireworks I think I have found the perfect method. What I have been doing is selecting a simple object to draw on a daily basis.

Some of the things I have been attempting are:

  • Simple three dimensional shapes, like cubes and cylinders
  • Cartoon faces
  • Cartoon penguins :)
  • Trees
  • Ugly looking houses :(

These experiments have gone rather well, and through my attempts I have picked up some rather nifty imaging techniques that I will be able to apply to more advanced drawings at a later stage in my development.

I said that the experiments have gone rather well, but unfortunately a lot (maybe most) of them would be embarrassing to show here. So I will stick to presenting you with only the PNG files that I'm most proud of :)

Last night I attempted to draw a flower, one that doesn't actually exist in nature :P I managed to easily get the flower looking pretty darn good, and in turn I felt pretty darn good too. So much so that I got carried away and added some sky, then some clouds, then some more clouds, then some grass and ground to plant my flower in.

The amazing thing about starting off simple is that your highly unlikely to be completely disappointed with the fruits of your labor. In fact, in my case it made me more enthusiastic.

So much so that I don't find this picture embarrassing enough to make me want to hide my face for a year if I show you it:


(Download the PNG source file here)

If you're really serious about designing web sites you should consider learning to draw in Fireworks. It's a lot of fun and it's also a great way to create graphics that are unique to your own designs.

I hope that some of these posts I have been making are enough to whet your appetite.

Have fun :)

Category tags: Designing for the Web, Fireworks, Graphics, On the Personal Side, This and That

Boredom, ideas, productivity... and penguins.

Posted Wednesday, August 23, 2006 6:20:36 PM by Gordon Mackay

When I'm bored I sometimes watch TV, I sometimes read a book, but most of the time I switch on my computer and fire-up Fireworks, then iTunes and then start drawing things.

For me boredom generates productivity and ideas. The need to do something during those times normally leads to a PNG with a doodle planted slap-bang in the middle of it.

The images folder on my Mac contains around 500 Fireworks PNG files that consist mainly of random ideas that have poured out of my head and onto a blank canvas. Not all of them are good, and some of them are downright ugly, but that's not the point, the point is that I can go back to them at some time in the future and maybe use them for a project, or for something to tutorialize here at CMX.

Boredom led me to make this post, so I will share with you the product of that boredom.

Here it is:


(Right click to save the PNG to your desktop)

I don't know about you guys, but there is something about penguins (maybe it's a Linux thing, hehe) that makes me happy.

Anyway, please feel free to tear the PNG apart, edit it... use it... do whatever you want with it... just have fun :)

Category tags: Designing for the Web, Fireworks, Graphics, On the Personal Side, This and That

RSS icons in Fireworks

Posted Wednesday, August 16, 2006 7:39:40 PM by Gordon Mackay

One of the things I hate when it comes to design is being forced to use un editable, flattened images in designs, especially when they are icons or symbols.

One of the most commonly used icons on modern blogs is the RSS one that first appeared in the Mozilla Firefox status bar a good few versions ago. It looks like this:

RSS icon

Like most good icons it's very simple, so why use other people's versions of it when it's so easy to recreate in Fireworks. Here's how:

Let's get drawing the icon

Open up Fireworks and create a new 100 pixel by 100 pixel canvas. The reason it's 100 pixels is just to give you enough room to play.

Set the canvas color to black so that it's easier to see what you're doing.

Select the Ellipse Tool () and draw a 40 pixel by 40 pixel circle in the middle of your canvas.

Set the fill to "none", and set the stroke to a 3 pixel soft line. Your circle should look like this:

Now clone the circle you just drew (Edit > Clone) and set it's dimensions to 24 pixels by 24 pixels and position it centrally within the larger circle:

To make our little "RADAR" from these circles we use the Knife Tool () to make two cuts through our circle:

  1. From the 9 o'clock position right through to the 3 o'clock position
  2. From the 12 o'clock position through to the 6 o'clock position

To do this select both the circles and and drag the Knife Tool along the same paths as shown in this picture:

Now delete all the excess paths so that you're left with something that looks like this:

Now draw a 10 pixel by 10 pixel solid white circle and position it like this:

Now all that's left is to place a nice orange filled rectangle behind it, and change the canvas color back to white:

That's all there is to it. Feel free to get creative and use different background colors for your rectangle. Here is a PNG that I made (right click to save to your desktop):

Have fun :)

Category tags: Designing for the Web, Fireworks

Doodling in Fireworks

Posted Thursday, August 03, 2006 7:00:09 PM by Gordon Mackay

Hey folks,

I don't know how most other people draw up inspiration for their design work when using Fireworks, but for me it normally begins with a series of basic shapes. Rectangles, squares, polygons, whatever, are the core building blocks of all graphics. You can't do anything without them.

When you start punching holes in those basic shapes, joining their paths, changing their colors, or even just overlapping them, they start to gel together as a more creative formation... then all-of-a-sudden it hits you! BANG!! You have an idea!!

Maybe it's simply because your crazy array of pixels has begun to actually look like something that you could possibly use for a current project, or maybe it's something you could archive in some deep, dark directory on your HDD for future use.

Either way, it's possibly one of the coolest feelings you could have sitting in front of a computer (OK, I have left myself open to some fairly creative comments with that statement :D .)

(This is the method that I have used when creating the Design Elements and JumpStarts here at Community MX.)

Just the other day I was staring at a blank Fireworks canvas, feeling the effects of designer's block and I started pushing random shapes around in the way I just described. Would you like to see what happened on my canvas? Well, here it is, right here.

It's not the coolest of creations, granted, but it could be something I may develop into a bigger “something” in the future, who knows.

While I think that it's important to learn how to use Fireworks' (or whatever graphics package you use) massive library of functions, I still believe that it's more important to play around and get creative without being all technical about it. So think back to when you were a kid, and all you needed to make you happy and creative was a box of crayons and some rag paper, open Fireworks with that feeling fresh in your mind, and get doodling!

PS: This is my first blog post here at CMX, so please be gentle :)

Category tags: Designing for the Web, Fireworks, Graphics

See Community MX content by Gordon Mackay