Over the past few weeks, I’ve been doing a bit more logo work than I can really remember doing at any given time. That may also explain why I have been writing a of logo related posts, too! Over the past few weeks, I have written articles entitled “6 Quick Lessons from Logo Galleries” and “Would Your Logo Fit on the Moon?” both of which were a lot of fun to research and think about. Well, today’s article is another one of these logo-based pieces.

Last night, I was actually at a meeting with the board of an organization for which I am currently doing some work. The point of the meeting was to go through some logo revisions so that I could get feedback directly from the board. The meeting actually went better than I could really have hoped for, since we ended up settling on a finalized design. One of the main things we were looking at, however, was a discussion of colour.

As the meeting progressed, I found myself explaining my reasoning for having originally designed the logo in a simple greyscale. On my way home from the meeting, I got to thinking about this discussion, and I realized that this would make a really great topic for an article.

So, today, I want to talk about why I generally choose to do my first, digital rendering of a logo design in greyscale.

Focus on Shape & Space

Ultimately, the reasoning comes down to the power of shape and and space. When I start a new logo project, one of the things that I try to focus on the most is working to create a meaningful and interesting mark that will represent a business or organization in a unique, interesting and meaningful manner. Obviously, a big part of this effort is the careful use of both shape and space, and this is one of the key reasons why I like to work in greyscale.

Basically, doing using an all grey palette helps me simplify the early stages of the design process. By stripping away all the concerns about colour, knowing that I will bring that into the equation later in the process, I am able to concentrate more on those key elements of shape and space.

For instance, in one recent logo, I created a simple geometric shape that repeated in a circular pattern. During the process, I spent a lot of time carefully adjusting the size and proportion of the shape, as well as relative spacing between each repetitio. The whole thing involved a lot of working and reworking in order to achieve a mark that I felt had just the right weight and balance (some of my initial efforts felt very heavy and bloated).

Working in greyscale helped me concentrate specifically on these areas.

As an example, here is an old logo concept that I created for a client a little over a year ago.

An old logo concept done in greyscale (with the company name modified, of course)

Obviously, for the purposes of this article, I have removed the company name in replaced it with the generic “Lorem Sorem”. Still, even this simple geometric design done in greyscale really helps focus the attention more on the shape and spacing, without being distracted by issues of colour.

The Power of Colour

And make no mistake–colour can be very distracting. You may not think that it’s all that important, but colour can completely change the way that we see and understand something. Just take the following colour treatments of the same sample logo that we saw above. First, we have the logo in dark blue.

The same logo, but set in a dark, calming blue

This particular colour is certainly a very safe selection, and perhaps the sort of thing that we would see in a big corporate logo (or The Gap…). That being said, it is also a very calming, subdued colour. It speaks to a silent, unwavering strength that, though perhaps somewhat somber, is also dependable and enduring. Contrast that against this variation.

The same logo again, but set in a bright, energetic pink

Clearly, the colour here is much bolder than what we saw with the dark blue. It brings a significant vibrance and energy and passion to the whole design. In the proper context, the colour could also bears strong cultural connotations of femininity, unlike the blue, which is more strongly masculine.

There are likely a number of other comparisons that we could explore, but the point is simply to understand just how strongly a choice in colour can impact a design. If we start with colour right away, then the various concepts, connotations and ideas implied by a particular colour may start to work on us in exactly the same way that they work on anyone else, potentially influencing the decesions we make in terms of shape and space.

On course, on the other side of the coin, it could certainly be argued that this is not necessarily a bad thing. A predetermined palette could certainly help inspire and dictate the direction of a particular design, through the very type of connotation that we have already looked at. That’s why I classify the recommendations of this article as being a general sort of methodology. It is certainly not something that is an absolute requirement, but rather something that has worked well for the projects that I have been working on recently, and for my own particular design style–which does tend to emphasize shape and space.

Progressive Enhancement

I know, the term progressive enhancement is something that is almost exclusively used in the world of web design and development, but I want to borrow it here to underscore another important reason why I find starting in greyscale to be a valuable exercise. The clients that I have worked for thus far have been exclusively from that small-to-medium class of enterprise or organization, most of which tend to have smallish budgets.

As such, it’s not all that difficult to guess that there will be circumstances in which these clients may need to print something that’s not in colour. Maybe their invoices or other business forms are being printed on a simple black and white laser printer. Maybe they are running a small, black and white advertisement in the Yellow Pages or some other directory. Maybe they are just doing something where colour is simply not an option.

Whatever the reason, there is always a good chance that the client will need the logo in a simple black and white format, and part of my design process is to make room for this contingency, by supplying clients with a simple black and white version of their logo as part of the final package that I ultimately deliver to them.

So, in a way, I think of colour as a form of progressive enhancement for the logo. It is certainly important, and something that needs to be carefully considered, but it’s we also need to approach the design from the perspective that not all situations (like browsers) will actually support colour. A well designed logo will have a good, black and white fall back as a contingency plan for such situations.

Starting in greyscale helps with this, too, because it forces me to rely extensively on those concepts of shape and space that I’ve already talked about in order to bring detail and meaning to the design. It can be easy to start doing this by using complimentary or contrasting colours, but what happens when we pull all of the colour out in favour of something simply black and white, like this?

Three simple, white divisions easily prepares this particular logo for black and white

In this particular case, making the transition was simple, since I could use thin white gaps to suggest the same division that was created by the subtle gradients. As such, the design retains much of its inhrent personality. But, what would happen if the logo used a lot of colour to establish these details? They would either be lost in the transition to black and white, or the designer would have to make some significant adjustments in order to suggest the same details in a different way.

By starting in greyscale, and thus keeping my mind firmly focused on shape and space, I can avoid some of these problems.

Conclusion

As I’ve already mentioned, this is by no means an absolute, written-in-stone, ignore-at-your-peril kind of rule or methodology, and I’m sure there are all kinds of designers out there who are a heck of a lot more talented than me but don’t use this greyscale concept at all. Still, I have found it to be extremely beneficial in my own work and, after my client meeting, I thought it might be interesting to share it with you.

If anything, I hope that it gives you something to think about the next time you site down to tackle a logo design project!

How about you? Have you ever tried beginning a logo design in greyscale? How did it work for you? I would love to hear your thought, comments or own methodologies!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

The other day, I was sitting in the passenger seat of a vehicle, traveling down the highway later into the evening. As I am wont to do, I was gazing out the window and my eyes fell upon the moon. This was hardly a unique experience – I’ve seen that silvery globe many, many times – but for some reason or another, an interesting thought struck me.

I stated thinking about seeing logos projected on the moon.

Obviously, this is venturing deeply into the realm of science fiction, and I don’t think that there currently exists any feasible technology by which to actually project any sort of image onto the moon. There would also be all kinds of international, political ramifications to be overcome. After all, who owns the moon? Who has the right to turn it into a worldwide billboard? Quite frankly, those are some dicey questions that, even if such projection were possible, would be well beyond me.

But this isn’t an article about advertising ethics in international politics. It’s an article about logos and design. With that in mind, I tell this particular story about placing logos on the moon because it eventually led me to ask a very interesting question: would my logo fit on the moon?

Though it may sound ridiculous, I’m actually being very serious here. The more I thought about this question, the more it struck me as a surprisingly meaningful way of actually gauging the effectiveness of a logo design in one very particular manner. So let’s take a closer look.

The Litmus Test of Complexity

I have always maintained that one of the hallmarks of effective logo design is to create something that is, ultimately, scalable. Whether it is printed on a billboard or a golf ball, the logo should be clean, crisp and immediately recognizable to anyone who sees it.

Given this, I generally try to avoid high levels of complexity in my logo design, since such complexity has a tendency to compromise scalability (though this has not always been possible, based on client requests). Well, as it turns out, this question of whether or not your logo would fit on the moon is actually a remarkable litmus test for this kind of thing. While, in reality, the moon is one awfully big rock spinning along its orbit around the earth, when we’re looking up at it on a cool, crisp autumn evening, it really doesn’t look all that large. What would the spatial illusion of distance reduce it to? And inch? And inch and a half? Probably two at the most.

That’s a pretty small canvas, and the chances are that, if your logo will fit into that space and still be readable and immediately recognizable, it’s probably passes the complexity test! Let’s look at some examples:

Nike

When I think of simplicity in logo design, my mind almost always goes to the Nike logo. That simple check mark is universally recognizable, and scales down as well as any logo I’ve ever seen. This is exemplified in the following image.

Nike's recognizable check mark scales down perfectly on the moon

Apple

What would a design article about logos be without showcasing the Apple logo at least once? This icon of designer-geek technological obsession (that’s me) is not quite as simple as the Nike logo, but it’s pretty darned close, and it too is clear and immediately recognizable when (artificially) projected on the moon:

Apple's logo also fits perfectly on the moon

ABC

Personally, of all of the infamous Paul Rand’s identity work, the ABC logo is probably my favorite. It’s circular shape, which is also reflected in the typographical forms, has an elegant simplicity about it. It is this very same round simplicity that also allows it fit so well on the moon!

ABC's circular shape makes it a perfect fit here

A Little Less Simple

Not all logos work so well in this imagined scenario of lunar projection, however. Those containing more detail may have a tendency to become obscured and difficult to read. Even if they are actually somewhat recognizable, based on popularity, colour and shape, the overall effect has far less impact.

Starbucks

Like the ABC logo, the circular shape of this one might seem to suggest that it would fit well on the moon. However, its higher level of detail make it somewhat more obscure when scaled down to this size. The detail in the central illustration starts to get lost, and the typography is somewhat difficult to read.

The Starbucks logo is round like the moon, but loses some of its detail when scaled down

KFC

I remember that there was quite a bit of discussion surrounding the re-branding of the Kentucky Fried Chicken chain of restaurants a few years ago. Well, whatever you think of the new logo, it certainly doesn’t scale down as easily as the Nike, Apple and ABC logos. You would probably recognize it based on its shape, but the type would be hard to read, and a lot of the detail gets lost!

The new(ish) KFC logo also loses some of its detail

Wendy’s

Of the three more detailed examples that I’m showing here, the Wendy’s logo is by far the one that suffers the most in terms of scaling. I can just make out the word “Wendy’s” (barely), but everything else is completely unreadable. Moreover, pretty much all of the detail of the red haired, pig tailed girl is entirely lost.

Suffering the most, the Wendy's logo becomes entirely unreadable when scaled down this far

As already mentioned, chances are that, if these logos really were projected on the moon, those of us who are already familiar with these identifying marks would probably be able to recognize them. Still, I think the examples illustrate the issues that can arise with scalability. I also think that it demonstrates the significant difference in impact between the simpler and more complex logos when reduced to this size.

Once Size Doesn’t Fit All

Of course, I am by no means suggesting that artificially projecting your logo onto the moon is by any means the best and/or only means of measuring its effectiveness. In fact, there are many great logos that would probably not do so well under this test. I actually like the KFC logo, for instance. Moreover, there may be some logos that don’t need to be as concerned about scalability – perhaps because it is known that they will never need to be scaled down (for whatever reason).

If you check out the logo section of my portfolio, you will also find that some of my own work wouldn’t really pass this test either!

So, I am not writing this article to try to offer some sort of gospel-like authority on logo design. I’m merely sharing an interesting idea that struck me recently, and which could have an impact on the process of logo design. Hopefully, it at least gives you something interesting to think about!

What about you? Would your logo fit on the moon? Does this kind of thinking have any use for you? Would you ask yourself this question the next time you need to design a logo? Have your say!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

I love web design – I really do – and I know that I talk about it a lot here on the blog. That being said, however, one of the other areas of design that I absolutely love working on is logos. It’s probably one of the most enjoyable parts of what I do, and I always look forward to a new logo design project.

What I have definitely found, however, is that the thought process involved in logo design is somewhat different than the thought process of other forms of design, many of which tend to have a strong focus on page layout. With logo design, you’re working at creating an identifiable mark, and there is no “page” to speak of (at least not in the classical sense). Instead, all the questions of colour, shape, line, typography and so forth are concentrated with a much tighter focus.

When I start a new project, I frequently like to head on out to logo design galleries like Logospire and LogoPond and have a look around to see what kind of awesomeness they have to offer. During such perusals, I am not looking for something to “inspire” me with the perfect logo concept. Instead, I like to look at techniques and consider the thinking and reasoning behind it. Doing this can often help me find new ways of looking at a particular problem.

So, in this article, I would like to look at six different logos that I have recently come across, and consider the thoughts and techniques behind them. I’ll also offer a few tips and suggestions about how you might use a similar approach or train of thought in your own work.

Mixed Metaphor

In many ways, logo design is about figurative thinking. We frequently tap into the power of metaphor, using a particular image in order to capture a concept or idea that we want to convey. At a basic level, our minds usually like to stick with a single metaphor, and there’s nothing wrong with that, but the Maritime Law logo instructs us in the incredible visual power that can by achieved by carefully mixing our metaphors!

This logo makes great use of a pair of carefully mixed metaphors

The two different metaphors are both immediately evident. First, we have the basic shape of the balance, which has long been a symbol of the law and judicial system. However, the designer added sails to the poles of the weighing pans, thus creating the image of boats, a metaphor which reflects the term “maritime”.

Through this simple mixture of metaphor, the logo achieves a unique mark that does a wonderful job of visually reflecting the company name!

Thinking This Way

Here are some tips to help you think about mixing metaphors:

• Think of all the different types of metaphor that could represent some aspect of the business and start sketching those things out.
• Keep your shapes general and abstract
• Review your sketches and look for common and/or similar shapes that you could use to bind the elements together.
• This kind of thinking works well when you have two distinct concepts that you want to represent visually.

Form in Typography

It may sound incredibly obvious, but letters are shapes. Yes, they are unique and recognizable, with a very specific purpose, but when you get right down to it, they’re really just shapes. Moreover, they tend to be somewhat geometric, and share certain properties with innumerable other shapes. As a logo designer, this is something that you can really take advantage of, as shown by this Lighthouse logo:

lighthouse

Based on a simple logotype, it uses the power of shape to build an interesting visual treatment right into the typography itself. The designer found an interesting similarity in the shape of the letter “T” and a lighthouse with it’s beams of light emanating from either side, and capitalized on this relationship. By simply replacing the “T” with the stylized form of a lighthouse, the designer creates a unique and interesting logo that fully reflects the company name.

Thinking This Way

Here are some tips to help you consider form in typography:

• Look at the shapes of the different letters in the company name. Can you find any interesting similarities between those shapes and others symbols?
• Try setting the company name in number of different typefaces and weights. Different typefaces shape their letters differently, so the variety might help you see something in one type that you didn’t in another.

Changing Directions

As a Western, English speaking individual, I have developed a natural tendency to want anything to do with type to flow from left to right, but this doesn’t necessarily have to be the case! Sometimes, changing direction can be a useful design tactic for creating awesome logos. This GoMusic logo is a great example.

The logotype reads from bottom to top, rather than from left to right.

The main mark itself is an interesting bit of typographic playfulness, using the basic shapes of the “G” and the “0″ to create a mark that takes the recognizable shape of a guitar. However, the design is not restricted to a traditional left to right orientation. Instead, it moves from the bottom to the top. Interestingly, it is likely this orientation that makes the guitar metaphor work. If the mark were rotated 90 degrees clockwise, the word “Go” would be much easier to read. This would put far more emphasis on the word, and take away from the shape of the guitar.

Thinking This Way

Here are some tips to help you start thinking about different orientations:

• Print out or draw your letters out on a piece of paper. Then, just start rotating the paper to varying degrees, taking note of the different shapes that start to emerge.
• Also, consider inverting the text completely. The more unreadable you can make it, the more you will be able to see other shapes emerge. You can always set it right again later.
• To make this kind of thing really effective, though, the final mark still has to be readable, so try to focus more on rotation rather than permanently changing the reading direction.

Form & Negative Space

The relationship between shape and negative space is an interesting one, and is certainly something that designers can take advantage of when working on logos. Much of the theory is based on the Gestalt principles, such as Reification and Multistability, which attempt to offer some degree of explanation as to how we perceive objects. The Wine Forest logo provides a superb example of how this works.

wine-forest

At first glance, what most people will probably see in this logo are abstracted shapes of four trees, positioned in a straight line. By simply refocusing our perception, however, we can also see the shapes of three wine bottles, whose main outlines are actually formed by the shape of  the trees. In many ways, this is also another example of mixed metaphor (tree/forest + bottle/wine), but the technique here is a bit different. Whereas the Maritime Law logo combined two metaphors into a single image, this Wine Forest logo derives its secondary metaphor through the clever representation of negative space.

Thinking This Way

Here are some tips to help you think about negative space:

• Use many of the same techniques that you would use for developing a logo based on mixed metaphors.
• Instead of looking for shared shapes, look for opposing edges. For instance, in Wine Forest logo, the inward curve of the bottle’s neck opposes the outward curve of the tree branches.
• Do you work in the negative space. Instead of tracing the shape of an object and filling it in, try building it up by filling in the negative space around the object. This could open your mind to all sorts of interesting ideas.

Logomatopoeia (or, Doing What it Sounds Like)

If you’ve studied English Literature at all, chances are that you’ve heard people talk about that wonderfully named literary device called onomatopoeia. To refresh your memory, onomatopoeia occurs when a word actually sounds like what it is describing. Words like “buzz”, “crash” and “zip” are some of the more common examples. Well, sometimes we can do something similar in logo design, and it’s a technique that I have playfully called Logomatopoeia.

Corny, I know, but this Shift logo is a great example of what I’m talking about.

shift

Again, what we have here is primarily a logotype, in which the letters themselves become more than just letters. They actually visually represent what the word signifies. In this case, the “f” and the “t” are rendered to look like arrows, each seeming to move towards the other. Through this simple effect, the two letters ultimately appear to be shifting places, thereby visually referencing the meaning behind the word itself.

Thinking This Way

Here are some tips to help you start playing with some logomatopoeia:

• This particular technique probably works best when reflecting some sort of action, so look at the company name. Does it contain a key verb (action word)?
• If so, try sketching out a number of different means of reflecting that action in a visual manner.
• Compare these sketches against the letters in your company name, and see if you can do something there. Or, consider building on one of your sketches as the main mark.

Repetition of Form (or Type)

Repetition is certainly a well known design technique, and it can be used in logo design just as well as in pretty much any other type of design. In this particular case, I’m talking about pulling out a typographical element from the company name itself and repeating it in the mark, just like was see in the Cloud9 logo:

cloud9

For some reason, the cloud seems to be a hugely popular motif recently, and I can think of a number of different logos that have incorporated it. Nevertheless, this Cloud9 logo does so in an interesting fashion, by repeating the basic shape of the 9 in order to create the semblance of a cloud (with a few modifications, of course). The stems of the 9′s even works to create rain drops! One of the biggest benefits of this particular technique is that it brings a very high level of unity to the entire logo, through the repetition of lines, angles and curves in both the typography and the mark itself.

Thinking This Way

Here are some tips to help you start repeating shapes from your typography:

• Sketch out some general, somewhat abstract ideas for your mark before you start thinking about typography. This will help you get a general sense of how you want the logo to look and feel.
• Think about line thickness, curves, angles and so forth.
• With this in mind, start looking for a typeface to match those needs.
• Even better, try inventing a typeface. Creating custom letters and numbers is a great way to get just the style you need!

Conclusion

Well, I hope you enjoyed this little foray into the world of logo design. There are all kinds of other techniques that stretch far beyond the scope of this particular article. I encourage you to seek them out and experiment through the course of your own work (or even just practice).

More than anything, though, I hope this article demonstrates the true value that all those logo design galleries can have, even to designers of integrity, who are looking for more than just a cookie cutter solution to copy. By looking beyond the logo itself, to the various thought techniques that lay behind it, we can develop and expand our own thinking. That, in turn, should provide us with a stronger basis for our designs!

I wouldn’t quite call it inspiration, but it’s probably the next best think: education.

What do you think? If you browse logo design galleries, do you take the time to really look at some of your favorite examples and consider the thought process behind the design? Do you try to make it more of a learning experience than just a casual perusal of recent work? I’d love to hear your thoughts on this!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Man, it feels like it’s been a long week, and I don’t feel that I have a ton to show for it. Last week, I mentioned that I had another tutorial in the works, and that one’s finally been published over on MyInkBlog. And when I say finally, I am totally pointing the finger at me. For a variety of reasons, that particular post took me forever to finish. But it’s up now, and if you should go have a read if you haven’t already.

I also finished another vector character pack for the guys over at MediaLoot. This one was another guy, but this time I tried to make him a bit more like an artist, and built in several extra accessories, such as a paintbrush, a portfolio, a chalkboard and a clipboard. I’m pretty happy with the overall finished product.

Other than that, I’ve just been enjoying this fine weather and celebrating with some really good friends who just welcomed the first child. That was pretty awesome!

Anyhow, let’s get on to this week’s Echoes!

Logo – Zeughaus

It’s amazing how many logos I feature here on Echoes where I have absolutely no idea what the name means. We have another one this week.

Zeughaus PPP AG

Still, this is a really nice design. The designer’s comments on this one say that the “client asked for something dynamic and futuristic,” and I think that it really does a pretty good job in this regard. I really like the way the mark itself offers an interesting treatment of what is, essentially, just a basic half-tone pattern. The bright reds, oranges and whites give the mark a real sense of energy, as does the seemingly random arrangement of the colours.

I always like to talk about how a logo will translate into black and white too, and I think this one works. At first glance, I wasn’t so sure, because a lot of the effect seems to come from the colour. However, upon further inspection, it becomes clear that some of that energy also comes from the halftone pattern itself. As such, I do think that the logo will translate well into black and white.

Art – Assassins Creed

One of my favorite video games from the past few years has to be Assassin’s Creed. I really enjoy the dynamic of the first game and have the sequel sitting on my shelf just waiting to be played. This week’s art features a really nice fan image of that game.

Assassin's Creed

It doesn’t look like our Assassin is doing all that well in this particular piece, being underwater with an arrow sticking out of his shoulder, but the image is still really nice. I’m especially fond of the way that the water is rendered in this one. The blues are really vibrant and the bubbles look great.

What I really like, though, is the same thing that first drew me to the game itself – the costume. I love the design of the assassin’s outfit cloak and cowl. The bright red against the white, combined with the concealing hood, really combines to create a character who is unique and memorable, yet blends seamlessly into the game environment. This painting does a great job of capturing that costume!

Tutorial – Create Custom Option Panels with WordPress 2.9

For the second straight week, I am bringing you a WordPress tutorial. Last week, I was working on a WordPress site where I needed to set a custom option for the entire site, so when I came across this one it was really awesome.

Create Custom Option Panels with WordPress 2.9

Basically, this tutorial will show you how to go about creating your own custom options panel for the WordPress administration from within your theme (with no need for a plugin). This was incredibly useful for me, and I’m sure that it could prove equally useful to you too if you do any significant development in WordPress.

For me, I was creating a WordPress blog as an extension of a site that was running off of Concrete5. I wanted to keep the same basic design and didn’t want to upload all the same design based images again (it’s just inefficient). So, I set up a universal property which contained the URL to the Concrete5 theme, including all images and stylesheets, allowing me to very easily adapt the site’s basic theme into the blog. I’m sure you could do all kinds of similar things by creating your own options panel.

Website – Brizk Design

Some of you may have already seen this site, which has been tweeted a few times today by some fairly major players in the design community, but I thought I would feature it anyhow, for those of you who may not have seen it yet.

Brizk Design

The design itself has a nice, watercolour based minimalism, prominently featuring the hand painted hummingbird as the cornerstone of the site’s visuals. Other hand painted items – leaves, flowers and a butterfly – also appear across this single-paged site, bringing a strong sense of continuity to the overall site design.

The site also has some really nice animation effects, which I would like to draw to your attention. First, it is one of those single page sites were clicking on any of the navigation items will actually cause the page to automatically scroll down to the appropriate section. Try scrolling on your own, though, and watch as the active menu item changes as you hit each new section. Very slick. Also, try hovering over the tiny little bird icon at the bottom of the page. A footer bar pops up with the latest tweet and a link to follow the designer. These are the little touches that can really turn a site into something special!

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Hey all. Here were are with another edition of Echoes, and things are going to be changing just a little. I’ve found that I’ve been getting a bit verbose in some of these articles, and spending a ton of time writing them. People have left some really nice comments in the past, but these posts certainly aren’t the most popular articles that I publish here. So, in an effort to free up a bit more time, I’m going to try to keep the exposition to a minimum – usually just a paragraph or two.

In general news, I had another article published over at SpyreStudios over the weekend. This one is called “A Coder’s Journey,” and chronicles my (often slow) development in the world of coding and programming. The article has received quite a bit of attention and some really nice comments, so be sure to check it out. I also submitted a tutorial to another site, which should hopefully be published sometime this week. Keep an eye on my Twitter account for an update on that.

Now, let’s get to this week’s Echoes!

Logo – ShadowCatcher

We’ll start this week off with a sweet and somewhat abstract logo design for a company called ShowCatcher, which apparently “gathers information for their clients from trade exhibitions through a wide range of media.”

ShowCatcher

I love the colours and the general feel of this piece. It has a wonderfully organic aesthetic, while still feeling fresh and modern. The simple non-serif typography really offsets the energy, giving the entire design a solid anchorage. It’s all about striking the right balance.

Other than a vague S-shape, I don’t see much of a connection between the mark and what the company does, though, and the use of gradients may effect its ability to be reproduced in certain media if there is no pure black and white alternate. Still a really nice design though.

Art – Gidleigh Goat

I have been reading through Karen Miller’s The Awakened Mage over the past little while and really love the cover art, so I went looking for more from the artist, David Wyatt, and came across this little gem.

Gidleigh Goat

The first thing that strikes me about this particular piece is the incredible depth of the green, which is just so wonderfully rich, especially for something that was rendered in watercolour. After that initial reaction, the eye instinctively seeks out the subject, which we find to be this gentle, and somewhat old looking goat character.

Yes, this is another fantasy piece. I’m sure most readers have just come to expect that from me by now! Unlike much of the other fantasy art that I have posted in these Echoes, though, this one has much more of a fairy tale feel to it. The creature seems very wise and friendly, and full of character. It almost makes me want to pull up a log and listen to whatever stories he has to tell.

Tutorial – Building A Custom Subscriber Panel With Stats In WordPress

With so many designers and developers working in WordPress these days, a good quick tutorial about how to whip up a certain bit of code is always useful, and that’s exactly what we have this week.

Building A Custom Subscriber Panel With Stats In WordPress

In this tutorial, developer Amber Weinberg (who has guest posted on this blog) outlines her process for creating a sidebar panel for displaying your RSS counts, email subscribers and twitter followers. It looks and functions much like a widget, but is actually hardcoded right into the theme – though I suppose that and industrious developer could take the information provided her and convert it into an actual plugin widget.

What I like the most about this brief tutorial is that it offers a (partial) alternative to FeedBurner. Personally, I’ve only ever had a few issues with FeedBurner, but it does seem to have developed a quasai monopoly on generating and tracking feed statistics. So, in addition to showing you how to create an awesome little information panel, this tutorial also brings to light what appears to be a very viable alternate method of tracking your stats, directly from WordPress itself!

Website – The Green House

Occasionally I come across a site with some interesting visual effects, and I have to right click on the page to see if it is actually using Flash, or if the effects are achieved with jQuery. This week’s website was an excellent example.

The Green House

The site’s home page has three large photographs, which are individually faded in and out in the background. It’s both a subtle (in terms of effective animation) and not-so-subtle (as in completely changing background) effect, which until a few years ago would have been almost exclusively achieved in Flash. Now, it’s great to see this sort of thing being done independently of any browser plugins.

Beyond that effect, though, this site also has a very interesting blend of strong graphics and photography. I really like the way that they’ve integrated the photographic images in with more vector-like elements. It has a unique and original feel to it. I also love the way the site builds really nice icons into its overall navigation system, especially since I am currently right at the beginning of a series on icons and web design. That kind of makes it the perfect time to include the site here.

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Well, life is pretty much back to normal. My wife got back from Haiti last week safe and sound, so we’re back to two parent mode, which makes my life a whole lot easier – at least in one regard. Of course, life always seems to trade one type of busyness for another, as I have two different websites launching this week.

The first is a complete redesign for Highland Marketing, where I am the Creative Director and have been working diligently at building and releasing a new design for the site. It launched today! The point was to create something simpler and more streamlined than the old site, which was a bit rigid and boxy. Please feel free to check the site out and let me know your thoughts. And if you’re doing any direct mail and we can be of service, don’t hesitate to hit me up!

The other site should be launching later this week, and is a freelance client project built on a custom, hand coded WordPress theme. It’s a pretty cool site, and I’ll be glad when it’s up.

Anyhow, on to this week’s Echoes!

Logo – Pink Flamingo Farm

I came across this week’s logo over on Logo of the Day, and it’s just another awesome example of interesting and clever execution – this time by means of the interaction between two distinct animal shapes.

Pink Flamingo Farm

I’m not certain that I would give the name “Pink Flamingo” to a farm that focuses on breeding horses – it just seems to beg for confusion – and from the name itself, it might seem like a great challenge to come up with a design that is both interesting and meaningful. The designers deserve credit on this one, though, for devising something really interesting. Just like last week’s equestrian themed logo, this one also involves a horse’s head, except this time, the horse is actually comprised out of negative space, and the outer line of its head forms the inner line of a flamingo!

The interplay here is both clever and intriguing, as I always find these kinds of logos really interesting. I would love to see the rough work for this one, and trace the development of the concept. Was this a concept that came to the design relatively quickly, or did they produce dozens and dozens of sketches before finally devising this concept? That’s always an interesting question to ask.

Art – Final Sleep

This week’s artwork is a beautiful watercolour painting of a beautiful and dream-like scene. What I find truly remarkable, though is the amazing level of detail in the painting itself.

Final Sleep

In this context, there is probably not a lot that I can or would say about the narrative of the piece itself. There is a woman and a dragon and some other magical looking creatures, all of which could probably be imbued with some sort of story and meaning. That’s beyond the scope of any Echoes post, though, so I will won’t get into it.

I would, however, like to underscore the magnificence of the style. Watercolour seems to have been a reasonably popular trend in some recent design, and watercolour Photoshop brushes remain a much sought after resource. There is nothing, however, that can really compare to an actual watercolour painting. Despite the fact that the colours are often somewhat washed out, there frequently seems to be a strong sense of energy in this genre of painting, which I think stems from the very organic appearance of wet paint hitting paper. It’s probably my favorite form of traditional painting!

I am also astounded that level of detail in this painting. It’s difficult to see here, but there are links to detailed closeups from the deviantArt page, in which you can really see the the extensive detail that exists in this one. It’s really amazing – especially since it is done with watercolour, which can be a very finicky and somewhat unforgiving medium. Because the paint always shows through, it can sometimes be difficult to fix mistakes. So, at least for me, the seemingly flawless execution of this one is truly to be admired!

Tutorial – How To Create a Stylish Navigation Bar In Adobe Fireworks

I do nearly all of my graphics in either Photoshop or Illustrator. For most web elements other than icons, I tend to focus on the Photoshop side of things. Today’s tutorial, though, is all about creating a cool web element in Fireworks.

How To Create a Stylish Navigation Bar In Adobe Fireworks

There are a couple of interesting things about this tutorial. On one hand, it really shows how easy it is to make these kinds of graphics in Fireworks, which has been specifically engineered with the web in mind. Whereas Photoshop is a vastly powerful image editing package, with capabilities that far exceed what is typically needed for creating basic web graphics. Fireworks, on the other hand, is specifically created for this process. From what I’ve seen, this basically means that you have a more focused set of tools that can potentially help you do your job more efficiently (I’ve also read that Fireworks actually offers better compression than Photoshop).

That being said, though, don’t make the assumption that Fireworks is actually a stripped down version of Photoshop (that’s called Elements). There are some familiar tools and palettes, but it’s a completely different program, with its own way of doing things. I played around with it a bit, and will admit to feeling a bit lost. It’s kind of like the first time you get into a completely new car – you have a basic idea of how to make it work, but it still feels a bit strange and foreign, and you know it will take some time for you to really get to know where everything is.

Still, I this is still a great tutorial, and I would recommend it to anyone who is looking to give Fireworks a shot.

Website – Digital Puffin

This week, I received a request on Twitter to have a look at the redesign page for Digital Puffin, a two-man design firm based out California. I always enjoy seeing the web work of creative professionals, so I had a look and decided to feature the site here.

Digital Puffin

There are a few things that I really like about the site. I’ll start with the mascot design – of a puffin, of course – which is both simple and memorable and relates very well to the brand. I also really like the minimalism of the site, which features a different coloured background for each sub-page, along with very subtle radial gradients, watermarked with the a diagonal “dp”. The site also features some nicely styled typography, which helps complete the overall design.

It also has a really cool navigational animation effect, wherein every time you click the menu to move to a different page, the content quickly fades out. Then, in similar fashion content for the next page fades in after it loads. It’s a subtle effect, but it adds a nice flair to the site. It does present a navigational problem, though, in the use of the back button. Every time I click the back button, the previous page loads in its last state – namely with the content faded out. All that I see is a blank, coloured screen. Just seems like a minor navigational bug to me – I’m sure it will be ironed out soon.

One other area that I think could be improved is the menu system. It exists as a series of coloured bars down the side of the page, with each bar sliding out on a hover event, to reveal the menu choice. It’s a really cool little effect, but may not be the most intuitive. Users might not know where the menu is, assuming that the coloured bars are just part of the background. Also, unless you’ve been to the site before, having to hover over every option until you find what you’re looking for could be a bit frustrating for the user. I think that using small but meaningful icons could go a long way in helping to smooth out these potential usability issues.

Overall, though, it’s a really great site.

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Well it’s been a crazy week, let me tell you. With my wife in Haiti for the entire week (getting home tomorrow), I’ve been holding down the fort along with my little girl. It’s been a lot of fun just hanging out with my precious little munchkin – and completely and totally exhausting all at the same time! It’s also meant that I haven’t had quite as much time to work on projects as I would have liked.

I did, however, complete another set of vector characters for MediaLoot. This time, it was a female character, with the set containing 5 different poses. The style and proportion of everything are designed to match the other character set I did, which featured a guy who – despite my dear sister-in-law’s observations – is not at supposed to be me!

Oh, and by the way, if you’re not a member of MediaLoot yet, you should really consider signing up! It’s a great new community and resource base that will continue to grow in depth and general awesomeness. Be sure to take advantage of the special, introductory pricing that they have going on right now!

Okay, with that plug out of the way, let’s get on to some Echoes!

Logo – Equestrian Clothing

This week, we have another clever logo that does a great job at combining the two different concepts in the company name into a single attractive mark!

Equestrian Clothing

I think that part of the reason that this logo works so well is that the two graphical concepts are both immediately recognizable. The first thing that I see when I look at this logo is definitely the two horse heads. However, after a quick glance at the text, I also very quickly saw how the two heads formed the shape of a jacket too. On it’s own, this is pretty cool.

It’s even cooler, though, because the actual shape of the jacket is reminiscent of that older style cut which is so often associated with the Equestrian sport. Thus, the logo pays homage to its roots in multiple ways.

The typeface also works well. It has that kind of elegant feel to it, and the same sort of sophistication that is also typically associated with the sport itself. The only thing that seems a little off to me is the fact that, at a smaller resolution like this, some of the finer detail on the lettering seems to get lost, and starts to look almost like rogue pixels. Take a closer look at the “q” and the “a” to see what I mean. Still, I do really like the general feel of the type and think that it works pretty well.

Art – Tire Sculpture

I don’t normally feature sculpture here on Echoes, but it’s definitely something that’s worth doing from time to time, and today is one of those times. There is an entire genre of sculpture out there that makes use of various recycled materials. Perhaps you’ve seen the work of Mirko Siakkou Flodin, who creates incredible works of art entirely out of (presumably recycled) tires.

Awesome Tire Sculpture

There are a number of awesome examples of his work that I could have decided to feature here, but this is one of my favorites, possibly due to my love of cats and other large predatory animals – though of course that love is purely abstract and conceptual. I do like to keep my lethal predators at a safe distance.

I also like this one because of its energy. Some of the other works (though certainly not all of them) can seem a little rigid and static, but this piece seems almost alive. The positioning and the photograph almost make it look like the image was captured as this incredible tire beast was prowling past. What’s more – I can almost imagine this creature stalking some industrial graveyard by night, looking incredibly menacing.

A lot of these sculptures have that feel to them, too, along with an oddly alien apperance. A good part of it, of course, has to do with the blackness of the tires and the ridges of the tread, both of which serve to create the appearance of some bizarre and manufactured exo-skeleton.

Tutorial – How to Create a Highly Detailed Hi-Tech Power Button

If you hadn’t noticed, the entire TUTS+ network has gone through another realignment. The branding and colouring is all still the same, but the layout of the sites have been redesigned again. They have really been simplified, and it’s taking me a while to get used to. One thing that has been introduced, though is the idea of Basix, which is of course just a fancy way of saying basics, and is a section that focuses on teaching the basics of the site’s area of focus. Today’s tutorial is one such article from the PSDTUTS+ site.

How to Create a Highly Detailed Hi-Tech Power Button

Despite appearing on PSDTUTS+, which typically focuses on tutorials for Photoshop, the first chunk of this tutorial actually describes how to work in Illustrator to create the basic shapes that will be needed. Quite frankly, I like this. I personally move back and forth between those two applications all the time, and it’s nice to see a tutorial that emphasizes the ability to move between them.

Other than that, what this tutorial really focuses on is some of the basics of using selections and shapes and layer styles to create a really cool looking illustration, which doesn’t really look all that basic at all. So I guess, in a sense, one of the coolest parts of this tutorial is how it demonstrates that creating awesome work in Photoshop doesn’t have to be complex, especially when working on a clean and sleek design like this one.

So, if you haven’t already, consider taking the time to really work through this one. Unless you’re a real master, chances are you’ll pick up a trick or two to add to your Photoshop arsenal of tricks!

Website – The Ship and the Sea

I think this is probably the first time that I have featured a band site in Echoes, and quite frankly, I have to say that it’s about time! There are a ton of really cool designs for band websites out there. Actually, this site is for the The Ship and the Sea, an album from the band The Autumn Film.

The Ship and the Sea

Like some of the other sites that I have discussed in past editions of Echoes, the site features some really lovely illustration, including a heavily blue palette (going with the title of the album), and a sort of grungy, almost watercolour-like feel to it, which I really dig. The specific illustrations also help to divide the content into different horizontal segments, including a large header, prominently featuring the album cover art.

The site also appears to consist of just the single page, and in addition to featuring the album art, you will also find a music player, which allows you to sample the music, links to purchase the album (obviously), some video, and a bunch of testimonial-like tweets praising the new disc. Oh, and there’s a link to the band’s main website too, of course. All in all, a cool little site.

And if you’re wondering about the music, I would compare it to something like Death Cab for Cutie, soft and melodic, and a kind of folky, distant cousin to indie punk. But that’s just my opinion.

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Hey all. It’s been a pretty quiet weekend here on the Echo Enduring Blog. I haven’t been feeling just the best over the past week, so I’ve spent quite a bit of time resting. I was also away with a bunch of the youth from my church over the weekend, and as you can imagine that meant that I got nothing done (which is okay – I was totally expecting that going in).

I’m hoping to be a bit more efficient this week. I’m planning on publishing the follow up to my Language and Metaphor: An Alternate View on Coding for the Web article, and have some other great content planned for the coming weeks too. Also, if you haven’t entered to win the first installment of the new First Friday Giveaway, be sure to check it out. I have one free license of Fanurio available to one lucky reader!

I’m also really excited for tomorrow, which is the official launch date for MediaLoot, a new and awesome design resource that I have been involved with, and have mentioned in several posts and and tweets over the past few months. I’ve had the opportunity to design some of the resources that will be available there. I’ve also seen some of the resources from other designers, and I have to say that it looks totally awesome. If you’re a designer looking for the best resource base on the net, I think that MediaLoot could well be it, especially as it continues to grow with awesome new resources! Be sure to check it out.

Now, let’s get to this week’s Echoes.

Logo – Hands Across the Americas

As I’ve stated before, I am a big fan of logos that make clever use of a particular mark, or which incorporate two distinctly different icons. This week’s logo does exactly that, by combining hand prints with the outline of the American continents.

Hands Across the Americas

This logo is apparently for a volunteer based missions to South America. Since the organization is based out Texas, the name makes perfect sense, as the mission connects the two American continents. It also lends itself perfectly to the clever mark used in the logo. At first, I would guess that almost everybody will see the hand prints. It’s only after looking at the logo for a bit longer (perhaps a half second, a few seconds or even a few minutes), that we actually see the shape of North and South America cleverly worked into the palms of the two hands!

This is a really the kind of interesting and subtle effect that I always enjoy seeing in logo designs. To me, it suggests that the designer actually spent a lot of time brainstorming and sketching out ideas until they came up with something really interesting. Either that, or they happened to stumble on a brilliant concept – but somehow I doubt it.

The one remark that I saw several times, and which I agree with, is that the type does seem a little crowded up against the mark itself. However, the designer’s comments also indicate that this was a change requested by the client, and as all good designers know, half the job is that balancing act of trying to create the best possible design while still pleasing the client. So, I still say that this is good work!

Art – Enforcer

This week’s artwork is a really awesome digital painting for the cover of a novel from the Warhammer 40000 universe. I’ve never played the game, and I don’t think I ever will. I played quite a bit of Magic when I was a teenager and a bit of D&D, but I’ve kind of grew out of those years ago. I still love a lot of the artwork done for those games though, and this is no exception.

Enforcer

I understand that the term fantasy has a pretty broad range of meanings, and that sometimes those fantasies can be of a more mature nature. I even recognize that, my and large, the mainstream fantasy genre tends to be dominated by men (and hormone filled teenage boys). That being said, however, one does tend to get tired of the thousands and thousand of “warrior” women who seem ready to go into battle wearing little (or less) than most real women would wear to the beach.

Okay, ladies (and your artists), you might have some pretty tight abs, but unless part of the fantasy is also having flesh as dense as iron, the first swing of a sword is probably going to spill your guts, and you won’t be looking so pretty then…

Yes, I am ranting a bit, but mostly as a build up to say that, with all the scantily clad heroines out there, it’s always refreshing to come across an image of a woman who would last more than twenty seconds in a real battle, and in this case, who appears as though she could actually do some serious damage! The character in this image is wearing fully body armour, which looks like it’s seen as much damage as she has. This character is far from the beautiful, soft skinned warriors that we see so often. Her face is bruised and scarred, and she’s probably more than capable of laying a serious whooping on anyone who gets in her way.

The image itself is also beautifully rendered. I love all of the fine detail in the character herself, especially around the eyes. She is obiously a tough, battle hardened warrior, but there also seems to be something hauntingly lonely in those eyes, as though this life of war and violence is not one that she chose for herself, but is now something from which she can never escape. It’s a truly wonderful piece!

Tutorial – How to design a print ready business card design in photoshop

I’ve already mentioned the impending launch of MediaLoot, but there is also another site that has gone live recently, called TutToaster.com. This is a site where you can expect some more tutorials from me in the future, but today, I would like to launch of this site by featuring one of their first tutorials, by none other than Mike Smith (who was also featured in out 7 Questions, 7 Designers series).

How to design a print ready business card design in photoshop

As the title of this particular tutorial clearly suggests, it is about how to create a print ready business card in Photoshop. I think this is incredibly valuable, especially for newer web designers or developers who may not be all that familiar with preparing designs for print, which is a whole different world than the web. This tutorial will help teach newer designers to create their own printed business collateral.

For instance, one of the first things that the tutorial instructs is to set up proper guidelines to designate the bleed areas for the card. I’m always amazed at how often I see artwork that is supposed to be “print-ready”, but has no bleeds or crop marks, despite the fact that the artwork extents to the edge of the page. I really do think that this is symptomatic of many web designers attempting to make the transition to print and just not being aware of some of the greater caveats.

Personally, when I design business cards, I’m more likely to work in InDesign, which has natural export options for bleeds and crop marks, and some very powerful tools and options for working with type. That being said, however, there are certainly many legitimate reasons for designing a business card in Photoshop. Perhaps you want to do some really rich graphical treatments that are just too difficult (or impossible) to achieve in InDesign. Or, maybe you’re a master at Photoshop but either have no access or no knowledge of InDesign. If any of these describe your situation, and you’re looking to design yourself a business card, this tutorial could be a great place to start.

Website – Jonas Lekevicius

This week’s website is actually the landing (or home) page for the personal site of designer Jonas Lekevicius. It is incredibly simple, and has a few interesting things going on.

Jonas Lekevicius

One of the things that you cannot tell by looking at the screenshot above is that the green you see is actually a constantly shifting colour, which moves rather rapidly through a full spectrum of different hues. The same shifting is also achieved in the logo through some clever use of images. The static grey sidebar is actually a PNG image, with the logo “punched” out as a transparent part of the image, which ultimately allows the shifting background to show through. So, as the background shifts, so does the colour of the logo. That’s pretty cool.

Similarly, the text in the sidebar is also effected. As you hover over any of the items, they will bounce slightly to the right, in a flash-like animation, but with no actual flash used, which is very nice (jQuery instead). The colour of the hover state also shifts, which I would guess is a matter of dynamically shifting the colour associated with the hover state. Pretty simple, but a nice touch.

From this single page, you are able to go to various sub pages within the site. When I first saw that, I was a bit concerned, since the shifting background would make readability difficult on content pages. Fortunately, the sub pages use a different, and more static design.

I’m actually thinking about doing something similar for my site, having a main landing page, and then forking off to this blog, my portfolio and then an about section, probably each with a slightly different design! This will probably happen sometime over the next few months, so keep an eye out!

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Well it’s finished. I watched, with pensive hope as the Canadian Men’s hockey team pushed into the last minute with a single goal lead, trying to hold of an increasingly aggressive 6-man attack my team U.S.A. Then my stomach hit the floor as the Americans scored with just 24 seconds left in the game to send it to overtime… I could hardly watch as that sudden death period started. It was fast. It was furious. It literally had me on the edge of my seat until Sidney Crosby got a hold on the puck and somehow, some way, drove it past Ryan Miller to end the game, and put the crowning achievement on an incredible winter Olympics.

I don’t think I’ve ever been so proud to be Canadian. I’m sure many of Canadian readers feel the same way.

And to all of my American readers – wow. Way to shock the world by playing some incredible hockey throughout the course of the tournament. For a team that the “experts” weren’t even expecting to contend for the podium, team USA was just amazing – especially Miller. Shooting at him was like shooting at a brick wall! Keep playing like that and I totally predict a rematch in 2014!

Anyhow, that had absolutely nothing to do with design, so please forgive me for a moment of shinning patriotism. Now, let’s get on to this week’s Echoes!

Logo – Maska

This week’s logo is an excellent example of how to incorporate “tribal” style artwork into a cool looking logo design, along with some really great colour and stellar typography.

Maska

I really like the way the designer combined the various bits of tribal design to create the mask-like face in this one. Since the logo is for a restaurant/cafe, I immediately get the sense that it will have a strong ethnic flavour to it, either through the food or the atmosphere – and probably both. The bright, bold colours also seem to suggest an equally bold culinary experience.

I’m also really keen on the typography in this one. I recognize that the trick of eliminating the crossbar on an upper case A is nothing new or all that original, but somehow I still love it. The technique really does a great job at conveying a sense of tradition and antiquity. This logo design does a great job of calling on that.

Art – Fire Within Me

For the past couple of weeks, I have featured art that was somewhat dark and creepy. This week, I would like to break way from that a little bit, with something that is a bit more magical and beautiful.

Fire Within Me

This is a really beautiful and imaginative piece. The painting is based on an original stock photograph, and stays very true to the woman’s basic features. The lighting, however, is completely changed, what with the violin bow being on fire and such. Obviously, this required a great deal of excess brush work, which softened the image and gave it a much more (digital) painterly feel.

What I really love about this one is the fire. It’s superbly well rendered (using brushes or stock?), and certainly becomes the focal point for the entire piece. I can’t help wondering, though – does fire come from her incredible gifting as a musician, or does the gifting come from the fire within her? I’m wondering if it might perhaps be the later, given the title of the piece, but it certainly raises some interesting questions about the relationship between our own passions and talents.

All in all, though, this is a truly magnificent piece of art.

Tutorial – How To Get Digg, Delicious and Tweet Counts Using jQuery

Most of the tutorials that I have featured here in Echoes over the first 25 weeks have been about techniques for designing in programs like Photoshop or Illustrator. There have been a few coding relating tutorials, but they have certainly not been the majority. This week, I would like to bring you a quick little jQuery tutorial that you may find useful, especially if you are a purely front-end developer.

How To Get Digg, Delicious and Tweet Counts Using jQuery

Personally, I’ve never even really considered the possibility of grabbing stuff like Twitter, Delicious and Digg counts from the front end. These always just struck me as tasks that were reserved for back-end, server-side scripting. So, when I found this tutorial, I was quite intrigued by the possibilities.

Basically, the concept is to grab data from each of the different social media sites via separate <script> tags, pass that information to a jQuery plugin to extract the counts and finally update the count areas on the page through unique HTML id’s. The tutorial also makes use of techniques that will allow for graceful degradation for instances where JavaScript may be disabled. In such cases, a simple text link is displayed, without the count.

Because this technique requires separate calls to each social networking service, plus several lines of code, it can add some bulk to the size of your HTML file. That’s something you may want to consider before implementing this technique, but if you’re a front-end developer looking for a solution that doesn’t rely on PHP, this tutorial might be right up your alley.

Website – Sick Designer

This week’s featured website is an awesome looking blog called Sick Designer, and has some really “sick”, grungy design elements that I think you will really dig.

Sick Designer

I think the first thing that really strikes you when you visit this site is the bold use of colour and grunge, especially down the left-side of the page – and I do mean down. That gungy splash of red, yellow, orange and green actually does extend all the way down the page by means of a repeating background. Fortunately, the background image is high enough that you hardly see the repetition at all.

There are a few other elements that I really like about this site. The Twitter section is really nicely done, and integrated so well into the overall design. There is also some cool colour coding of posts based on categories. Most of all, though, I love way that the first post is highlighted on the main page, via some basic stylistic changes. It’s given a colourful background – whereas all of the others are grey – and the text on the date is turned to white, to really help it stand out.

I would also like to note that this site – apparently recently redesigned – makes extensive use of both HTML5 and CSS3. As such, it is somewhat of a showcase for what can be done with these emerging new technologies. I’ve only browsed this site in my current browser (Firefox 3.5.8), but I would be interested to go and check it out in an older, less compliant browser to see if it degrades gracefully.

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Hey guys. I hope that you are all doing well. Not a ton of stuff to report on the Echo Enduring front this week. I finished of some more design work for MediaLoot, which you should be able to see soon – once the site actually launches. I’m pretty excited about that. I think it’s going to be a totally great resource for designers!

I also climbed over 500 subscribers this past week, thanks in part to being featured in an article titled “50 Fresh Design Blogs You Should Be Reading” over at Six Revisions. Actually, I’ve been over 600, but 500 was a somewhat more significant number, since I it was actually one of my goals to reach. So that’s nice. It’s always great to reach your goals!

Anyhow, let’s get on to Echoes, shall we?

Logo – Spartan Golf Club

Regular readers probably know by now that I am an absolutely huge fan of logos that have multiple meanings, or at least a primary and a secondary meaning built into them. I think that this week’s logo does this better than anything I have seen in a while.

Spartan Golf Club

There are really only two concepts that need to be built into this logo. Most importantly, the designer needed to get across the concept of golf itself, which was achieved quite nicely through the shape of the golfer himself. Wait… that’s not a golfer. It’s the face of a Spartan warrior, complete with that classical and easily recognizable helmet, which fits perfectly with the name of the golf course.

Obviously, it’s both – and I think that’s what makes this mark so awesome. It’s amazing the way that the designer manages to make the shape of the Spartan’s face also look like a golfer. Or, if you prefer, to make the golfer look like a Spartan’s face. I guess it all depends on how you approach it. Personally, I saw the Spartan first.

The only thing I’m not a huge fan of is the typography. The tracking on the word Spartan is a little wide, but that wouldn’t be so bad if it wasn’t for the words beneath it, which have a much tighter tracking and just seem put it conflict with the main typography. They also seem to crowd it a bit. Unfortunately, this unsettles the entire design, breaking apart what could have been a truly top-notch logo!

Art – Encounter

This week we have yet another animal image with a somewhat dark and/or sinister feel to it. Last week we has a gun toting rabbit. This week we have a fox, seemingly in the midst of either a nightmare or an otherworldly visitation.

Encounter

I really like this drawing, partially because I am oddly partial to foxes – for no real reason other than their being exceptionally cute and somewhat mischievous. Those big bushy tails of theirs help too. So that just helps me love this piece right off the bat. Additionally, though, it has this sort of animal spiritualism which – while I don’t believe in it – has a certain sort of interest narrative interest for me.

So, here we have this (young?) fox, coming face to face with some sort of spirit. Perhaps it’s the great spirit of all foxes, or the spirit of his grandfather. Maybe it’s something else entirely. I get the sense that, while the otherworldly fox is somewhat dark and frightening, it is not entirely sinister. Perhaps it’s almost like a guardian or guiding spirit. It’s like the stuff of fables, and so I really do enjoy this piece on that narrative level.

I also really like the style. Apparently, this was all done with pencil, which is pretty incredible to me. I really think that the mixture of the graphite with the texture of the paper really helps to give this one a unique appearance, which goes really well with the overall feel of the piece! Great work.

Tutorial – How to Code up a Web Design from PSD to HTML

As I’m sure you already know, there are a ton of tutorials out there about how to create this or that type of website layout in Photoshop. I’ve even featured a few of my favorites here in various Echoes posts. There is, however, a much smaller number of tutorials outlining the development process – namely taking the PSD and actually coding it into working HTML and CSS. Today, we are going to look at just such a tutorial, from the Line25 blog.

How to Code up a Web Design from PSD to HTML

This is actually something of a follow up article to a tutorial that Chris had published a few weeks earlier, in which he outlined the process for creating a “gnarly snowboarding themed website design concept in Photoshop” (his words, not mine). This PSD becomes the foundational working document for conversion into code, so you might want to check it out before reading this tutorial.

The article is basically broken down into the four key steps of coding. The first step basically involves opening up the PSD and cutting it up into various JPEGs and PNGs. Next comes the HTML. Based on the structure of the PSD design, create some simple and semantically correct HTML to structure the content. Third, apply styles through CSS. This can be the trickiest part, as you work to bend various styles to match the design elements in your PSD. Finally, once everything is in place, add a little jQuery for some extra animation and interactivity.

And that’s pretty much it in a nutshell. Obviously, there is more detail to it than that, but that’s pretty much the basic process of coding a PSD into a valid HTML file. You can even remember it with a ridiculous and possibly totally useless mnemonic device – SMuSA – Slice, Mark Up, Style, Animate (with jQuery in this instance). Or not…

Also, be sure to check out the working demo from this tutorial!

Website – Coda

A few months ago, I first heard of an application called Coda, which could be used as a replacement for Dreamweaver. I had been using simply because it came with my CS4 design standard package, but was looking for a change. Several months ago, I decided to give it a try, and my coding has never been the same since! So, in honour of this great app, I decided to include their equally great website in this week’s Echoes!

Coda Website

Like so many of the great Mac app sites, the defining feature of the Coda website (and it’s sister sites, for the other Panic applications) is a wonderful simplicity. A large title, along with the icon, meets you the moment you log on, with three key navigational options – download, purchase and help.

Beneath this, there is another in-document window, with different icons some of the various features that are part of the Coda application. Clicking on any of these (or the navigation arrows to either side of this window) will initiate an easing scroll, bringing the appropriate content into the window. This is achieved through basic HTML, CSS and jQuery, and helps minimize the complexity of the site – keeping all of the features right on the front page – while still maintaining a clean and uncluttered design.

What I really love about this site is the fact that it is as clean and easy to use as the application it is showcasing. The last thing you would want to do would be to have a really killer, easy to use app, and an obtuse and inaccessible website, which could sour potential users before they ever even get the chance to test drive the software. So, if you’re designing a website for an application, go to school on the Coda site. It has some great design principals! You might also want to check out the website for Things, my favorite task management software!

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd