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

Here were are again with another installment of Echoes. It’s been a pretty good week here on the Echo Enduring Blog. I saw the most traffic ever in a single week, and am starting to see more traffic coming in from a variety of different sources. I’m pretty stoked about that.

I’ve also been pretty busy. I am working hard at bringing more great content for this blog, and a few guest posts for some other big design blogs. That should keep me pretty busy! Speaking of tutorials, I had another article published on SpyreStudios, entitled “How To Design Your Own Valentine’s Day Heraldry Illustration“.

Now, on to this week’s Echoes!

Logo – Vancouver 2010

Call me a proud Canadian – because I am a proud Canadian. Who hasn’t seen the logo for the Vancouver 2010 Olympic games? There is certainly nothing new here. However, in the spirit of the Olympics I am including this logo in this week’s Echoes!

Vancouver 2010 Logo

There are a few things that I really like about this logo. First, I like that it’s not the London 2012 logo, which is just totally hideous. The shape of the mark itself is also really great too! For those who don’t know, the mark itself is an inukshuk, a man-made stone structure used for navigation for hunters and travelers in arctic regions.

As such, it is a perfect symbol for the Olympic games being held in Canada. It has a snowy, wintry connotation to it, and there are inukshuks scattered all across the snowy regions of this great country!

It also allows for a really great segmentation of colour. Because the inukshuk is constructed of large, independent slabs of rock, the designer was able to give each stone one of the classic Olympic colours (as seen in the rings). The sole exception is the wide flat stone, which is set to a dark blue rather than black. I actually think that this substitution is a good idea, since the black might contrast too strongly against the other colours with blocks these large. The choice to go with the darker blue just softens the entire thing.

Obviously, as a Canadian, I’ve been seeing this logo for years now. Still, I do really like it. And please forgive me when I say go Canada!

Art – Eerie Fables

If you’ve been following my Echoes posts for any amount of time, chances are you will know that I am a big fan of dark, macabre kind of art. I don’t necessarily like things that are overly sensual or grotesque, but art with a sort of eeriness does appeal to me. So, this piece called Eerie Fables is right up my alley!

Eerie Fables

This is just an unsettling and creepy piece. The shape of the bunny (or hare) is stretched and stylized, giving it a really dreamlike sort of appearance. This, of course, is emphasized by the artist’s use of texture. I really like the way the the bunny actually blends into the texture at the bottom of the piece, and the way that the artist achieved a sort of blurry effect, which again helps to emphasize that ethereal, dreamlike quality.

Of course, the real creepiness of the piece probably stems from the gun resting in the bunny’s back “pocket”. Combine this with the glowing white eye and angry angled brow, and this looks like on pissed of rodent. Looking at it, you just really do get the sense that this animal is almost like a spirit, come back from the dead to lay some serious hurt on the poor hunter that killed him.

A really, really great piece!

Tutorial – How To Repair Scratches, Tears, and Spots on an Old Photograph

Most of the Photoshop tutorials that you will find out there on the internet today have to do with things like creating photomanipulations, designing websites or illustrating icons. One subject that does not seem to be to get a lot of attention is the concept of photo restoration. Well, this week’s tutorial is on precisely this subject!

How To Repair Scratches, Tears, and Spots on an Old Photograph

This tutorial will take you step by step through the process of how work through the restoration of an old, black and white photograph that is in pretty rough shape. The tutorial will show you how to remove all kinds of blemishes and cracks, and yields a pretty solid result!

To some degree, the photo itself actually looks like an old drawing. For some reason, as we move away from the face, the details just seem to disappear. Perhaps this is some sort of old, photographic technique that I am unfamiliar with, but I do have to say that I would like to have seen the process be applied to a more “complete” photograph. Of course, the author may have had a very limited selection to choose from.

The actual tutorial doesn’t have a ton of text in it either. I would also have liked to seen more explanation. There were a couple of places where I felt that a bit more detailed instruction would have been beneficial. Specifically, in the step in which the face is replaced with detail from another photograph just seems to be missing something.

Still, if you are looking to learn the basics of photo restoration, this tutorial can provide you with a really solid start!

Website – MyInkBlog (Redesigned)

For the second time in three weeks, the Echoes website actually features a complete redesign of one of the design blogs that I frequent on a regular basis. This time, it’s Andrew Houle’s awesome MyInkBlog.

MyInkBlog (Redesign)

This was one of the first design blogs that I started following in my RSS reader, so I had become very accustomed to the old design, which was based on a (highly) modified theme. I really liked the old design. I love the new design.

I’m glad that Andrew kept a pretty similar colour scheme, with a nice dark grey and soft, almost banana coloured yellow. However, while the old site featured that yellow a bit more prominently, it is really just a simple accent colour in the new site, which has a darker (as in less bright) overall feel to it. You can see it in the main logo, and then repeated in the hover state of the options in the main menu.

I’m also a big fan of the way Andrew incorporates the rounded corner effect into this design. Obviously, rounded corners are nothing new in the world of web design, but I really do feel that this design uses them particularly well. I’m especially fan of the way the main content area is differentiated from the sidebar by means of a slight height differential. It gives the design a nice sense of depth.

As for the rest of the site, it is just a nice, well organized and contemporary design, which is attractive to look at but not so busy as to be distracting. Overall, this is a really nice design and is certainly an improvement over the previous version (though the previous version certainly wasn’t bad). Well done Andrew!

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

It has been an incredible week here at the Echo Enduring Blog. The traffic has really been through the roof, at least in terms of my traffic history. I’ve had two post that have proven highly popular on various social media and design voting sites! The first is an article called “5 Things to Consider Before Designing Your Next Website” and looks to be on pace for becoming the most popular post ever on this blog!

The other article is entitled “The One Design Tool You Absolutely Need to Use,” and talks about the need for designers to use their minds as their most important design tool. It hasn’t done quite as well yet, but it has climbed into the top 7 posts, which is still pretty darned good for just five days!

I also picked up an iPhone last week, which has been pretty sweet. Of course, I’ve been totally addicted to it ever since. What an amazing device, with so many cool apps! Unfortunately, that’s also probably part of the reason that I have been less productive than I would have liked. Over the long term, though, I think that the iPhone will actually help me become more productive overall!

Now on to this week’s Echoes!

Logo – Evernote

Obviously, I have been looking at all kinds of cool and different apps for my iPhone over the past few days, just to see what’s out there. One interesting app that I came across was this one called Evernote, which I am currently trying out. Regardless of what I decide about the app itself though, I absolutely love the logo, and am including it as this week’s feature logo.

Evernote

For those who may not have heard of Evernote before, it is a an online note saving service that uses the tagline “Remember Everything”. You can also use an iPhone app to add and access your notes (as well as other mobile apps for Blackberry and Android, and desktop apps for Windows and Mac). The logo does a great job of representing the product, calling on a common belief out of folklore.

Traditionally, elephants are believed to have remarkably memories. It has been said that an elephant never forgets anything. Now, I’m not sure as to why kind of empirical evidence there is to support (or disprove) this myth, but it has certainly provided a great deal of fuel for symbolism and representation. The Evernote logo calls very clearly upon this tradition, by using a stylized elephant as their primary mark, emphasizing the notion of helping users remember everything.

The other part of the logo that I absolutely love is the way that the elephant’s ear folds down, in a manner that is reminiscent of many “documents” in contemporary computer iconography. As such, the logo really does a great job of fusing the symbolic implications of the elephant with the fact that the primary purpose of the application itself is as a means of recording notes to help remember things!

All in all, I think this is a brilliant mark, which integrates really well into the standard iPhone style icon!

Art – CP9

Apparently, this week’s artwork is a piece of fan art relating to the manga The One Piece, or something to that effect. Like almost every other manga out there, I’ve never heard of this one, but from what I’ve read it seems to have a devoted cult following, and I suppose that this piece forms a part of all that. I just think it’s really cool.

CP9

For me, the principal strength of this one has to be the rendering what I understand to be the central character, at least of this illustration – the front-and-center behemoth who looks like a cross between the Thundercats’ Cheetara and the Incredible Hulk. The muscle definition is enough to make the character appear as a perfect specimen of the massive man-beast. I also really like the way the fur is rendered. It looks oddly soft, which is an interesting contrast against the general look of the character.

As for the other folks in the background – they certainly make an interesting group. Like the cheetah-hulk man, they are all exceptionally well rendered, but I have to say that I am not entirely sure what to think about the samurai giraffe mailman. He’s either completely ridiculous or absolutely terrifying. I can’t seem to decide which. Mister zipper-for-a-mouth is pretty darned creepy too.

I’m sure this all has a great deal more meaning if you are familiar with the context of the original manga. However, since I know nothing about that, I will simply have to appreciate this awesome painting on the basis of its exceptional composition, vivid imagination and high degree of energy!

Tutorial – How to Make a Professional Buddy Icon in Photoshop

This week’s tutorial comes from the relatively new design blog DesignInstruct. Seriously, the site only launched a few weeks ago. There are only a handful of articles up there so far, but the site is growing quickly. This particular tutorial will teach you how to make a glossy looking person icon (or “buddy” icon as the tutorial states) in Photoshop.

How to Make a Professional Buddy Icon in Photoshop

This is a fairly straightforward tutorial, so people of most skill levels will be able to follow along. The only exception might be a brand new beginner. The tutorial does make extensive use of the pen tool and layer styles, so if you don’t understand those things, it might be a bit difficult to follow along. Fortunately, the tutorial does come with unique screenshots showing the settings for each layer style, which will be hugely beneficial to someone just starting out.

For this reason, I think that this tutorial can be hugely valuable. It certainly is not a comprehensive analysis or collection of everything that can be done with layer styles, but working through the steps in this one will help a novice, or even an intermediate Photoshopper, to really get to know layer styles better, especially as they relate to creating clean, glossy effects.

This tutorial also helps add a bit of weight to something else that I have been thinking about lately. Traditionally, I’ve always considered Illustrator to be the application best suited to icon design. Recently, however, I’ve seen more and more icon work being done in Photoshop. The argument for this is actually quite compelling. While Illustrator’s graphics are generally more scalable, if you design your initial icon large enough in Photoshop (512 x 512 for example), you should never need to scale it down.

Considering that you can actually achieve more effects in Photoshop, I’m beginning to understand why more and more people are choosing it as their application of choice for icon design – and this tutorial is an excellent example of the high-quality product that can result from this decision.

Website – Academy

This week’s website is that of a design firm simply known as Academy. The site is an interesting and unique instance of how to creatively structure content in a manner that appears very open, and almost random, but which sticks very rigidly to a grid!

Academy

The screenshot is actually from their Projects page, which is a much better example of what we are talking about. I would, however, also like to address their home page, which does something interesting to the logo. On this first page, the logo is fragmented into a series of squares, and then scattered across the grid in an abstract and almost random manner. The pieces are large enough, however, to be recognizable as parts of the logo. This creates an interesting effect and take on site branding.

One thing that I though would have made this even cooler would have been a simple bit of JavaScript of jQuery that would have allowed the user to rearrange the pieces into the proper order (minigame!). I actually tried to do this, with no luck!

Now, if we flip over to the projects page, there is actually quite a bit more content, showcasing some of the work that Academy have done. All of the images are cropped and structured into square or square-based blocks, which are scattered down and across the page. Content snippets describing each project are also found in simple square blocks, interspersed between the various images.

As you scroll it becomes very obvious that all the elements are very strictly placed onto the grid. The proportions of the images and the content areas are all uniform, though occasionally by multiples. For instance, some images will be two squares long, or two squares deep. This provides interest and contrast in terms of size, while maintaining an incredible uniformity in terms of alignment.

The same thing can also be said of positioning. Rather than placing every single element in the same horizontal and relative vertical position on the page, the designers chose to play with space, placing images and content in different areas and using a number of empty blocks to build in white space and help prevent the site from becoming to dense. They also made some considerations for varying browser widths, with some content elements shifting as the window shrinks down.

Of course, all of this happens without every breaking the perfect alignment of the grid, which in my view makes this a superbly executed site design.

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 we are with another installment of Echoes, but of course I always start these off by telling you a little bit of what I have been up to the past week. I guess you could say that I’ve been doing a bit of this and a bit of that. I rocked off another Photoshop tutorial for SpyreStudios last week, which was quite a bit different than the others that I have done. It basically outlines the process for creating a bold ring of fire out a photograph of a campfire, and then how to integrate that ring into a cool (if somewhat dark) poster design.

I’ve also been doing a bunch of work on some websites, tidying up a few things for one client while coding up a WordPress theme for another. Oh, and if you haven’t checked out this preview about what’s coming from MediaLoot, be sure to have a look! Yep, those are my watercolour textures. I was pretty stoked to see them included in the post.

Other than that I just spent some more time with my wife and little girl, which is always nice.

Now, on to this week’s Echoes!

Logo – Kanga

It may be a common mantra repeated by designers all across the world, but I am a big fan of typography. For this week’s logo we have a beautiful typographic logo, which makes interesting use of shape and movement in order to create a really unique and wonderful mark.

Kanga

The beauty of this one is all in the details. The most obvious of these details is the custom ascender on the K (though a K doesn’t normally have an ascender), which turns into a lovely looking swoosh. This gives the logo a sense of movement and energy, which is also emphasized by the swoosh/cutout effect on the second letter a.

This cutout effect is then picked up very subtly by the two similar cutouts along the top of both the n and the g, which also mirror each other nicely – creating an excellent visual balance at the center of the logo.

Lastly, I love the colour scheme here. It is rich and warm and the two colours play off of each other very well. I’m reminded of coffee or perhaps chocolate and caramel.

All in all, though, I think that this logo is an exceptional example of just how a few carefully crafted details can really bring a typographic logo to life, giving the type its own unique flavour.

Art – Transition to 2D

This week’s artwork is a vector piece that I came across in a recent edition of the weekly vector inspiration posts over at Vectips. It’s an interesting piece, which fuses the aesthetics of the abstract and the surreal, wrapping it all up in a nice vector style.

Transition to 2D

I’m not sure that I even want to try dissecting this piece when it comes to the “meaning” behind it, so let’s just keep it simple and stick to the things that I really love about this one. First, while I’m not a huge fan of the colour pink, I think that the primarily monochromatic feel of this one works quite nicely. It would probably work in full colour too, but it would change the mood. The pink is fresh, and reminds me of bubble gum, which kind of goes well with the image of the little girl.

The similarities between the speech bubble and the “smoke” coming out the rhino’s nostrils is also kind of cool. It makes it almost look as though the rhino’s aggressive nostril blowing is actually a response to whatever the girl is saying. Speaking of the rhino – it’s pretty darned cool itself, especially with the symbol (Chinese? Japanese? Please excuse my ignorance) on its forehead. That makes it look like more than just an animal, and almost as though it is some sort of supernatural being!

A couple more things – the completely two dimensional partial circle/floating island things are petty cool too, especially with all of the details, such as the large tree (and the smaller ones), the house, the car, the stairs and even the tiny little people. They all work together to create a kind of story – though, as mentioned, I won’t try to dissect that story here.

My absolute favorite part of this image, though, has to be the various swirls that emanate out of the umbrella. I love the way that these swirls are integrated directly into the thick stroke that surrounds the umbrella. It’s kind of a subtle effect that I didn’t notice right away, but was also one of those that, when I did see it, made me think to myself – that is so cool! Any time a piece of art does that for me, I know it’s a good one!

Tutorial – How to Design the Apple iPad in Photoshop

Well we knew that it would only be a matter of time. Last Wednesday, everybody and there mother knew that Apple would be officially announcing the release of their new tablet product. The only mystery rested in exactly what the tablet would be like. All reactions aside, it was only a matter of time before somebody came out with a tutorial outlining a method to actually create your own iPad graphic.

As it turns out, that matter of time was a matter of less than a single day. In this week’s tutorial, we will be looking at the very first iPad tutorial that I saw stream into my RSS reader – from the CircleBox Blog.

How to Design the Apple iPad in Photoshop

There are a few things that I really like about this tutorial. First, I love the aesthetic, of course. Whatever you feel about the iPad as practical device, I think most people will agree that it is another beautifully crafted device, and Callum does a really great job at capturing that look in this tutorial.

I also really like the simplicity of it. You don’t have to be a Photoshop expert, or even have an intermediate level of experience. The techniques make use primary of basic shapes and gradients, so you can have virtually no Photoshop experience and still follow along. It’s great for beginners.

This tutorial is pretty similar to a lot of other Apple product tutorials, and has the same outstanding result. It’s interesting to note the way in which so many of Apple’s products can be recreated in Photoshop or Illustrator with relative ease. In many ways it’s as though Apple is designing their products be real life representation of this style of illustration! As Callum himself mentions, most of the same techniques can be used to create virtually anything else from Apple’s current line of products!

This is not the only iPad tutorial that I’ve seen, either. Chris Spooner also published a similar tutorial on his blog, and released a set of related freebies over on Line25. You can also find some iPad icon sets over at Little Box of Ideas

Website – Visual Swirl

In terms of websites, it doesn’t get much fresher than this. Chris over at Visual Swirl just launched the redesign of his website today, so this one is hot off the press ladies and gentlemen. And I must say that I really do like that I see.

Visual Swirl

Like many people, Chris launched Visual Swirl using a WordPress template. I think it worked well enough for him over the first two months, but as the blog started to gain more popularity and a higher rate of readership, it only stood to reason that it would be time for a unique, custom design. And that’s just what we have now.

Overall, I feel that the design is just more unified. If you head out to this post, you can see a screen shot of the previous layout, and even though the site actually appears to be about the same (fixed) width, the new design just seems to keep everything together better. The previous theme occasionally felt a little too open at times. This new design just works better in that regard.

Time to stop comparing, though, and consider the new design on its own. I do really like the logo and the way it is integrated into the design. It’s always refreshing to see the mark in a logo positioned to the right, without it feeling unnatural or forced. But this (new) Visual Swirl logo does it very well. The three bladed “fan” just seems to belong, which is always the mark of a great logo.

I like the use of the extended descriptors under the main navigation, too. That seems to be a bit of an emerging design trend right now, and I think it adds a nice bit of value and usability to the navigation, as long as it is not overdone. I think that this design does it right.

Lastly, I’m a big fan of the colour scheme. The mid-to-dark grey contrasts really nicely against the lighter blue to create a unique looking colour scheme that I don’t remember seeing all that often. In a world wide web where a lot of blogs tend to all look the same these days, I think that the colouring here will really help Visual Swirl to stand apart from the crowd!

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