Archives May, 2010
A few months ago, I wrote an article here on SpyreStudios, entitled “Content Mosaic: The 6 Most Common Posts on Design Blogs”. The title makes it clear that I outlined what I perceived to be the six most common types of posts that we see published on design blogs all across the internet. One of these types is the tutorial, which continues to maintain its immense popularity.

That being said, however, not all tutorials are created equal. Some are very good. Some are great. Still others seem to fall flat on their face and hardly seem worth the server space they’re saved on.
So, in this article, I would like to draw on my own experience as both an author and a reader of tutorials and offer some of my personal insight into what I think makes a strong and effective tutorial.
Have you ever downloaded an application on your Mac from the web and a nifty-looking window pops-up asking you to double click or drag the icon to the applications folder in order to complete the setup?
This is a DMG file – also known as ‘Apple Disk Image’ – ultimately it allows the application to store compressed files and information on a virtual disk so that it may act similar to a data storage device. Not only are DMG files easy to work with, but some are pure works of art that genuinely inspire.

Why Design Attention-Grabbing DMGs?
If you ask why anyone would add illustration and other eye-catching attributes to a DMG file knowing the user has already decided to download the app, then I would ask you to look at it from the software company’s perspective, and you’ll realize that they’ve found a way to captivate the user to the point that clicking (or dragging) to complete the setup is interesting and possibly exciting.
Some software companies use the DMG to add catchy lines, messages, and further advertise their products as well. All in all the following apps have turned DMGs into a creative and colourful piece of your Mac.
These 40 Inspiring and Creative Mac DMGs are sure to keep you wanting for more. Let us know which ones we missed and the ones you like best!
We’ve partnered up with Flashloaded, a leading provider of Flash components and templates, to giveaway some cool prizes to 3 lucky readers of SpyreStudios.

Read on to learn how you can enter the contest and to see the prizes. Good luck to everyone! :)
A lot of developers like to use a framework when they code. While frameworks can save you valuable coding time, I believe using pre-made frameworks to sometimes be limiting and unproductive.
Of course, I’m talking about pre-made HTML and CSS frameworks like Yahoo’s YUI or the 960gs framework, not WordPress, Drupal or some full-featured CMS.

While this may seem harsh, it’s true. If you’re business is based on handwritten, clean and accessible code, I personally feel like it’s cheating to use someone else’s code. It’s also never as clean because it’s someone else’s coding style mixed into yours. To use one of these frameworks requires that you either change the code each time to fit your style, or that you change your style of coding to fit theirs. You’ll also end up deleting a lot of what’s included in the framework because you probably won’t need it.
Of course, frameworks are great for saving coding time. So why not give yourself a leg up by creating your own barebones version? Creating a custom framework allows you to get the best of both worlds: you’ll save time when starting a new site and the code will be optimized and clean and exactly the way you code anyways.
Information Graphics or as we’ve come to know them Infographics allow us to visualize relative data in the form of graphics for a much easier understanding of complex information. These amazingly illustrative and informative data visualizations can be explained using a variety of colors, objects such as maps, signs, and typographic elements.

Many of them break down the process of something that’s already in existence (i.e. BuySellAds Infographic) while others are close to the developmental stages and/or seen as concepts.
In this tutorial we’re going to be creating a printer icon, suitable for both the web and print. We’re going to be basing the icon on a Canon printer/scanner I use on a daily basis, the MP610.

We’re going to be creating this icon in Photoshop – although it won’t be fully scaleable, we’ll be creating the icon at a reasonable size, therefore it should be big enough for most (if not all) purposes.
Illustrator may be the obvious choice for a lot of people when it comes to creating icons, but Photoshop offers that little bit more flexibility when it comes to creating realistic mock-ups due to its powerful tools.