While he can’t say it directly, It’s quite obvious that he’s referring to Outside App, swiping gestures and all. We’ll obviously never know for sure but being mentioned, even by concept, on the Tonight Show is pretty amazing. It marks a milestone in achievements and tells us again that the idea and execution behind Outside was just right. No matter what this leads to, it’s a pad on the back from mainstream media.

Spread some Spring

We totally agree with Jay Leno that it’s ‘perfect’ and everyone should see spring on their iPhone so we’ve created a site to share that message. Head over to Getoutsideonyouriphone.com and check out Jay Leno talking about Outside. Please help spread the word on twitter, let’s get some Spring on those iPhones

Hopefully Spring will come quickly in Copenhagen. Happy Easter everyone.

Speed Illustration video

I let the screen recorder run in the background as i plowed my way through 6 hours and 1000+ layers in Photoshop. I’ve thrown together a neat little video speeding up the process. Check it out above. I find these speed illustration videos quite fun, it seems almost surreal when i finally stitch it together.

Why a Photoshoot?

As a play on the marketing analogy i illustrated the above mentioned article with a ‘Behind the Scenes Photoshoot’ look as a cover image. I found it a fitting metaphor for the very practical and hands-on advice on marketing i was dishing out. I liked the idea of looking into the camera and seeing the lighting equipment, a sort of reverse scenario of what you’d usually see.

If you haven’t already, go read and comment on my article “How to Market Your Mobile Application” over at Smashing Magazine. It’s a great read for any aspiring marketer, developer & designer or, more commonly these days, a healthy mix of the above.

Download it Now

As per usual you can download this wallpaper from the goodies section. Click the big-ass image below to go there and get your own Photoshoot on your desktop.

If you like this, go tweet about it

I’m a pretty busy guy. Over the past year i’ve quit my day job, gone freelance, started two companies and worked high and low on expanding my career and generally just involving myself in all the things i love doing. Well, except for one thing.

Privileged Traveler

Ever since i was a little kid i’ve had the privilege of traveling all over the world. With parents in the Airline industry (the data sector, mind you) i’ve slept in Airports and boarded last call flights with chance tickets. I’ve traveled on jump seats and seen more beaches than most people my age.

Why a travel blog?

I wanted a place to share messages from the trail and pictures from my camera and so Fly Sleepy came about. It’s supposed to be a more casual & personal vein of updates than Pixelresort, a way to stay in contact with Family & Friends and the rest of the community when i’m on the road.

So if you’re up for a little more casual stream of updates, i’d love to share my travel experiences with you. Head over to Fly Sleepy, sign up for the RSS feed and get a dash of sunshine.

If you have a travel blog or thoughts on this, please share them in the comments below. I’d love to start reading and sharing more experiences from the road, that way we always have a little excitement in our screen-ridden days. Here’s to more traveling and more sharing.

From a rustic bungalow in Krabi with shabby internet,

Michael Flarup

A few weeks back we placed an order with the amazing stickerobot. We had them create a limited set of high quality die cut vinyl stickers with the lovable Robocat on them. After bragging about these amazingly detailed stickers on the interwebs, we received an uproar of requests from people who wanted to get their hands on the stickers!

So we’ve launched a microstore where we’ll be selling these bad boys. We’re selling them in packs of two with a flat-rate worldwide shipping fee included for 14.99 USD. All orders will be personally handled by our very own Sticker Monkey and Aspiring Physicist. He’ll take orders and hand-mail these all around the world, so hop on over to the Robocat Sticker site and get yours today.

Less freelance, more personal projects

Don’t get me wrong, freelance work is an important aspect of any designers career. Other than putting food on the table it provides you with a slew of fresh challenges and a healthy alertness to the industry. It will help you polish your creative skills as you lunge into new projects that you wouldn’t have thought up yourself.

That being said, there comes a point where you need to start setting personal goals and pursue some of your own creative projects. Some designers will go their entire career working for other people and get a kick out of that. I’m not that guy. In the new year i urge anyone with entrepreneurship in them (which is very abundant in this industry) to cut down on the freelancing and focus a percentage of your time on your own projects, your own product.

While this may mean a temporary setback in income, it will go a long way for your career, your sense of self and ultimately the path your career takes in the future.

I’m generally advocating you guys to work less for ‘da man’ and more for yourself. I know a lot of you have aspirations other than pleasing the next client that comes barging into your inbox. Some of you dream of opening a T-shirt store, some of you want to sell stock icons and quite a lot of you want to make iPhone apps. Whatever it is, seek it out more ferociously than you have ever done!

Work for yourself!

Working on your own project is not only a possible way to secure future stable income, it’s also a way to spark your passion - what fueled you to go into this industry in the first place? Slamming the launch button at 5′o’clock in the morning on your 11th cup of espresso feels great! The exhilaration comes from knowing that you just put something into this world that is solely your own idea and execution.

Your own project radiating awesomeness. Might even impress your mother.

Your own project is an excellent showcase of your talent and dedication, it will easily work as an ‘ambassador’ for your skills and might woo future clients or collaborating peers.

People have different ambitions, and while you may not be able to completely throw away your day job, find the hours to work on your own projects however small or big they may be. It will repay itself tenfold.

Blog and Share more

Never has it been more easy to share your world with people. As a design community we have become closer and more aware of eachother through twitter and the expanding blogosphere. Take your time out to share some of your work, share your process or share some knowledge. From maintaining an informative twitter stream to authoring blog posts, make an effort to give more - it will benefit us all and it will grow your own network.

Interact more

Twitter and your blog is not only a one-way communication channel. Make efforts to spark conversations and reply to people. Crowd source as much as you can, it’s never been easier to seek out your peer’s opinions.

You have a network, use it…

Get out more

If you’re an independent designer like me, try and get out more. Shake off the morning robe and meet people out in the wild. Go to one of those trendy coffee shops or cafés - bring your macbook and take a day working from another perspective. Sometimes a new environment will spark new ideas.

Get out of the house, see other people, drink expensive coffee.

Structure your resources

If you’re anything like me you collect everything that sparks interest: Design inspiration, a great font, an odd colorscheme or just a composition that moved you. These libraries of resources and inspiration have a tendency to get cluttered eventually rendering them quite useless. Do some spring cleaning and see if you can structure your resources so that they will actually work for you in 2010. There’s a lot of good programs out there but a good old folder structure might work just as well.

I like the good ol’ folder setup

Do more Collaborative work

It’s 2010 and it’s never been easier to find talented people around you. Reach out and create partnerships. Find someone who’s good at all the things you’re not and bring something new and exciting into the world.

I think we could all get better at some of these things, including myself. Do you have any other Career related resolutions? Let us know in the comments!

What’s a Pictogram?

A pictogram, or a pictograph is an ideogram that conveys it’s meaning through it’s pictorial resemblance to a physical object. Today we use the term casually for a broad sweep of icons. I personally use it as a reference to the flat-styled, often uni-colored, simplistic portrayal of ideas and objects.

The classic standardized ISO 7001 DOT Pictograms

A history in pictures

While lately popularized by handheld interfaces like the iPhones tab control, Pictograms have never been out of style. Infact, some of the earliest written languages where based on the idea of conveying meaning through simple pictures.

This blog post is not an attempt at a history lesson, but there are some very interesting lines stretching all the way back from the earliest mesopotamian language of Cuneiform and Egyptian Hieroglyphs, through the coats of arms in the middle ages and all the way up to the invention of the printing press. All contributing to the idea of icons and pictograms.

Today we use pictograms in all sorts of situations. Looking for the toilet in the Airport? Or are you following laundry instructions? We interpret any number of pictograms every day.

Pictograms are everywhere around us.

The International Standard

A set of pictograms was defined in the international standard ISO 7001, championed by Roger Cook and Don Shanosky in the seventies with their ‘Department of Transportation’ sanctioned (DOT) pictogram set of fifty universally acknowledged icons. Other known and recognized sets of pictograms include laundry instructions and chemical hazard labels. Many of the well established pictograms are hailed for being universally understandable, crossing language and culture boundaries.

But other than the fact that even people from rural China understands the international symbol for ‘toilet’, what other qualities (and pitfalls) does pictograms hold?

So what are they good for?

Pictograms are in many ways the core of icons. They strive to communicate as clearly as possible by removing details and focusing on the simplicity of the likeness between a physical object and how they are most easily recognized.

This makes pictograms incredibly potent at delivering clear messages as long as the receiver understands the simplified representation. For the average designer, this means that if you’re looking for the most direct route to communicate a known convention - pictograms could be the right tool for the job.

Pictogram-styled icons are all about peeling away layers of details until the simplest recognizable shape remains.

Understanding Context

Pictograms have flourished in the physical world where the context of the message is obvious. Holding your sweater in your hand, the laundry instructions on the inside seems that bit more tangible. That little box with a circle inside crossed out, is fairly easily deciphered as being a warning that you can’t dry tumble this specific clothing item. The box with the circle obviously being a domestic appliance that dries your clothes through centrifugation. See, it’s all about context - the situation you are in helps you interpret the pictograms and their intended meaning. This becomes slightly more fuzzy when taken out of the physical world, which brings us to some of the pitfalls of pictograms.

With Context we can more easily decode the pictograms.

The spawn of a million pictograms

What we need to consider when opting for these simplistic solutions is how well the message will be carried in this style. While the established conventions for pictograms are easily identified in the physical world, the new age of digital conventions are constantly evolving and becoming more numerous. Designers and developers are finding new situations and functionalities where this style of communication is being applied. This basically means that we’ve gone from a few universally understood and recognized pictograms to hundreds of thousands of icons employing the same simple visual vocabulary.

We’re absolutely swimming in these today

In mobile and desktop interfaces as well as corporate branding we see these stylish flat icons reaching for new and fresh ways to illustrate a much wider range of concepts. This isn’t merely confined to the physical representation of objects interacting like many of the older pictograms. This new wave of simplistic icons embraces abstract concepts and multi layered conventions, covering everything from e-commerce to cloud computing. The fact remains that the sheer amount of icons in this style has severely diversified something that used to be very clear and easy to read.

We’ve moved away from the universally understood to much more complex conventions and abstractions.

When to be careful

With all these new and budding pictograms, the landscape has changed. The viewer will need to get familiar with a much wider range of pictograms and flat-styled conventions. This means that unless you’re communicating something within the very obvious digital conventions, you could end up confusing some of your users - especially if you’re trying to communicate something that’s out of the ordinary.

What makes pictograms so powerful is also what makes them so fragile. If you don’t recognize the image being depicted, the convention being communicated or the context it’s being presented in, the icon leaves you very little in terms of contextual hints. All it’s fidelity and details have been shaved away to make it streamlined to deliver a certain message. If the message fails, you’re pretty much screwed.

Why so popular?

Pictograms have seen a surge of popularity in modern interfaces, perhaps partly because our interfaces have grown more advanced and intricate. The simple shapes and subdued colors feel right at home in an interface that might otherwise be filled with content boxes, panes, rows of data and other control elements.

Notice the use of pictograms in modern interfaces. I bet there’s some in your browser right now.

In many ways, pictograms are incredibly easy to work with. You can add them to your existing design without causing too much of a disturbance. Often they are to the point and doesn’t attract attention away from the rest of your design. They certainly cater to the ‘helvetica generation’ of designers that enjoy clean lines and a balanced approach to visual hierarchy.

So what should you take away from this?

It’s not a new trend or a very surprising one. I’m sure one could argue that these icons aren’t even within the confines of ‘pictograms’ any longer, as most of them have moved beyond the universally understood. My point is not to stir debate on the naming conventions. I only ask you to consider the pro’s and con’s when choosing the best vessel for your communication. In some cases higher fidelity icons will do a better job of portraying a more abstract or out-of-the-ordinary convention due to the amount of contextual information build into the detail. Sometimes a clean and neutral pictogram will be the optimal route to deliver a well known message.

During my research i kept bumping into the official ISO 7001 DOT pictogram set. Below i’ve collected the authorized 67 pictograms from the standardized DOT pictogram set. I’ve gathered them in a single illustrator (and svg) file - they are under an open license so anyone can benefit from these. Click the picture below or here to download and use the conventions we all know and love.

If you made it all this way through this long article, leave a comment and tweet about it.

Check out outsideapp.com or get it now (♫ itunes link)

Since early last year i’ve been working with legendary developer @williwu on creating our very own iPhone development studio under the rocking brand of Robocat. Outside is our first ambitious app, and it’s available now!

As some of you might now, these past 8 months we’ve been hard at work on Outside, a new spin on the weather forecasting app that hopefully will blow your mind. I think you can tell that we’ve had high ambitions from the get-go. There’s some long nights and a lot of caffeine intake involved in the development of what we believe to be the best and most fun to use weather application out there. As of early this morning, Outside finally hit app stores worldwide - and we can’t wait for you to try it out.

Push Notifications

Not only is Outside a pretty weather forecasting app, it has a powerful custom push notification build right into it. You can setup and receive alerts when the temperature drops below or above a certain point - there’s rain notifications for when you need to remember that umbrella, and UV notifications for Sunscreen.

The notifications engine really adds a whole new custom level to the idea of weather forecasting, and we’ve gone to great extends to make the whole experience as smooth and enjoyable as possible.

Outside has an awesome custom notification engine build right in!

Unique Interface

I’ve drawn up a huge collection of weather situations, that all comes to life through the window in Outside. This really makes looking at the forecast or current weather a fun discovery, as you swipe through the misty fogs, snowy days and bright sparkling sunshine.

Alot of care went into making outside visually pleasing and exciting.

Check out the promo video we did, to get an idea of the app in action:

At a later date i’m going to go more in-depth with the whole design process and give you some fun behind-the-scenes looks, but for now just know that Outside is available in the App store. You can read a lot more about it over at outsideapp.com and also swing by robocatapps.com to see our brand new company website.

Thank you!

Your support, comments and anticipation of this app has really motivated us from the early days. Thanks a lot! If you buy Outside, tell a friend or tweet it to your followers. Also remember to rate and review the app as it means a lot to us.

What’s this? What’s this?

This years Christmas wallpaper is modeled after our Cabin in the Swedish woods. People who’ve been there should recognize this charming swedish-styled yellow house, sitting on a hill overlooking the river. I’m celebrating Christmas with the family up there, so i found it fitting to make it the motif for this years wallpaper.

This Years Xmas wallpaper sports some pretty nifty details

Alot of attention to detail in this years wallpaper. It’s always a balance between how much you put in there and how messy it will make your desktop look. I’ve tried to hit that balance with all the details centered in the middle giving you the zen-like space you’ll need for your actual desktop in the outer regions.

Enjoying the view

A shed with a pile of firewood

The Making Of

So this year, i wanted to add something extra. I’ve created a timelapse’ish video of the process of making the wallpaper. Alot of tracing work went into getting the cabin just right. Spend the better part of the day putting the wallpaper together, this video fastforwards you through the process. Probably around 7 photoshop hours and 5 pots of Oolong in there.

Making the Xmas Wallpaper ‘09 from Michael Flarup on Vimeo.

Hope you enjoyed the video. Between waiting for Outside to be approved by Apple, Sleeping on a floor in China and Launching my brand new Stock Icon Site December just seems to have vanished into thin air. With this wallpaper i’m slowly getting in the holiday spirit. Download the wallpaper in the usual widescreen, fullscreen and iPhone versions from my Goodies Section or by clicking the big ass picture below (which takes you to the goodies section).

Spread the seasons greetings on twitter and show me those christmas desktops in the comments. Thank you for all the support through the year. Merry christmas everyone.

The best education

I’ve been happily employed as a graphic designer at Retouch for the past year. In the wooden loft of this Copenhagen based Web Agency i’ve been working on a myriad of projects with a broad sweep of clients. I’ve seen the company grow, the lifecycle of projects evolve and the people behind them in their finest hours. I’ve been brought up in various project management theories and tools, co-worked with professionals around the world and had plenty of one-to-one client time. In short; i’ve earned my wings as a designer and learned alot about the industry. It’s been a tremendous learning experience and probably the best kind of education one could get. While sustaining this wonderful position, i’ve moonlighted and kept the fire lit under a humble freelance career. These two workplaces have been my main source of inspiration for the past year, and have helped me grow as an artist and a professional. The few posts i’ve managed to author here at Pixelresort has been in the coffee-breathed limbo of these two responsibilities.

Working with Retouch has been a great education.

Being your own maker

Two weeks ago i quit my day job to shift my time and energy towards my personal projects and my freelance career. The decision had been brewing in my subconciousness for some time, and i passed a mental ’point of no return’ three weeks ago - growing ever more sure that i would be able to sustain and manage my own career.

Quite alot of contemplation goes into an elaborate transformation like this. And while i won’t bore you with the lifestyle intricacies, for me the decision rested on a need for bigger personal and creative freedom. Once it became apparent to me that we are completely free to invent our own careers and that I had the very real and pleasant opportunity to be my own maker, it didn’t take long to connect the dots.

Why i’m getting out

I have my quips with the service industry as a whole. To tell you the truth, I think it consists of a very large group of people who have no idea what they want, how they want it or how much it costs anyway. It’s these people that then set out to hire a much smaller group of people, the professionals. These people may have the answers to all of the above, but it usually all drowns in budgets, paperwork, meetings and good old stubbornness. While there certainly are great high-fiving days at a service agency, it can also sometimes feel that you arrived another day at the kindergarden constantly having to educate clients and argue semantics. In these time consuming projects that seem to drag on, you have to be a very neat person to enjoy the sheer bureaucratic grind of it all.

Some biased but honest illustrated factors that weighed in my decision.

Above I’ve tried to illustrate the factors that meant something in my decision. This is ofcourse horribly biased, but it gives you an idea of what was going on in my mind when choosing my path. In the end, I think the most important question I got from a friend was “do you see yourself doing your current job a year from now?”

What are you going to do?

I still enjoy doing freelance work for clients, and with this move my services are going to be more available than ever. Despite my ranting of the overall service industry above, I find great pleasure in doing complete custom work in unique projects, where I actually feel that I can make a difference and cover ground faster. I find pleasure in expanding my skills in interface and icon design and discussing them with likeminded clients that appreciate the input.

Hopefully my distribution of time in the future will look something like this.

A huge part of me quitting the nine-to-five, is so that I can better arrange time for my own projects. A few of them I’ve yet to reveal, but I’m very proud to announce my upcoming iPhone Dev. Company (much more on this later) Robocat and our first ambitious App called Outside.

Our upcoming iPhone App. Clicking the picture will take you to the teaser site.

Outside is visual weather forecast combined with custom push notifications, all set in a completely unique interface. Read more about it at outsideapp.com

The Future

Hopefully this move will give me more time to grow my personal projects and see some of my dreams spring to life. Ideally this should also bring you more content here at Pixelresort, where I’ll try to put in more time authoring articlesand giving you free icons. I will also have to eat at some point, so I’m still looking forward to harnessing my skills on your interface projects; icons, websites or iphone apps – just send me an email with your project and I’ll give you a quote.

I feel that I’ve started another chapter in my career, and I hope you’ll stick around to see how it plays out. What about you? Have you ever stood before a similar choice? How did it go? Give me a piece of your mind in the comments.

The gap between the designers vocabulary and the clients knowhow can cause some problematic confusions. To alleviate this lets look at what an icon is, what a logo is and how these two things could come to be confused.

What’s an Icon?

Apart from any religious denotations an icon is a graphical representation of a concept or operation. We use icons to bridge the understanding of abstract analogies and practical use. Icons can be used to illustrate an entire application or individual operations within that application. In short, icons help us understand and recognize concepts that might otherwise be pretty hard to grasp.

I could write a very long article about the whimsical nature of icon
conventions and the semiotics that guide these, but in this case it’s more relevant to look at the technical differences that is so fundamental for icon design and how these differ from logo design.

Icons are not Scalable

More than often, icons are not scalable. The very idea of icons are to best convey a given message within a predetermined confined visual space. In today’s iconcentric interfaces we allow for multiple variations of the same icon. The icons that are sitting in your dock most likely have atleast 5 different states embedded, making them appear crisp in all aspects of your interaction with them. List view in OSX gives you the 16×16 pixel version while the dock uses the 256×256 pixel adaptation. These are not scalable vector versions, they are handcrafted raster masterpieces. The creator must carefully select how to best take advantage of the canvas in any given size and more than often completely recreate the icon in those sizes.

My manilla mail icon in it’s various states. Note the different layout of the elements in the smaller sizes.

Icons are Quadratic

Icons operate within a complete square canvas. How you choose to employ that canvas is up to you, but it’s restricted to that straight edged space.

Icons are created on a neatly defined and restricted canvas

So that’s it. Icons are not scalable, they’re handcrafted raster imagery born from the desire to objectify an operation or a concept within a confined visual space. How does this differ from a logo?

What’s a logo?

A logo is a graphical element like an ideogram and/or a carefully arranged typeface that together forms a trademark or a brand. There’s an infinite amount of ways to think about logos and logo design. Again, the important thing here is to look at the technical differences from icon design.

Logos are Scalable

A logo should be completely scalable. A logo is the spearhead of a company’s commercial brand or any economic or non profit entity for that matter. Therefore a logo should be replicatable across many forms of media. This has great impact on the sort of mindset you need to bring when designing logos. We’re talking strictly vectorbased output and more than often, graceful degeneration of colours all the way down to uni colours.

Logos are supposed to be scalable.

Logos have no boundaries

Well in theory a logo could be anything. Other than the obvious benefits of working in a format that is easily scalable and replicatable there really is very little rules compared to icon design. Icon design is very influenced by technical dimensions and the restrictions of the systems that display them. Logo design is a completely different venue. A logo could be any shape, colour or dimension – it can be waved from a 100 feet banner or tattooed on a butt cheek. It’s only constraint is that of the physical media that will display it.

Why are we confused?

Icons have taken a very prominent role in modern interfaces. This has obviously spilled over to the realm of branding where many icons serve both as application icon and branding for that entity.

Panic creates excellent software and uses their application icons as product branding

This wave of iconism™ (yes, I just invented that for this purpose) has influenced many graphic designers and a lot of the appealing aspects of the cartoony and crafty iconized style has made it’s way to modern logo design trends. Infact this style has become the posterchild for the web 2.0 movement, and such many internetbased firms have logos that uses the same visual vocabulary as icons.

Logos inspired by an Iconistic style

And while logos can certainly employ an icon-like style, and even mimic the quadratic nature of icons. Let there be no doubt, Icons and Logos are two completely separate design disciplines. It’s important to know the difference between these two things, as they inheretly seek out to fulfil two very different goals, both technically and mentally.

Below I’ve included a PSD template that supplies you with the canvas in the correct dimensions for making your own icons. If you wanna talk icon or logo design throw me an email or just have a look at my services page.

If you liked this article, why not comment and/or tweet about it. You can also hit me up on that thing called twitter

Other than being a self proclaimed iPhone geek, how do i get the nerve to post about ’best practises’ on this fairly new platform? Well first off, app icon design on the iPhone and iPod touch doesn’t differ that much from the general principles of universal icon design, which i’ve been involved with for a few years now. Secondly, over the past year i’ve been working on iPhone interface projects left and right. I’ve consulted a handful of companies and crafted several commercial and free app icons.

I maintain a minimalistic app review site called appweek.ly that lovingly forces me to spend my good share of money in the app store and generally keeps me on my toes. Now that we’ve got that aside, let’s start with one of my pet peeves.

Don’t include words

An icon is a graphical representation of a word, concept, object or operation. Words are in themselves an abstraction of a concept, object or operation – don’t mix these two representational tools as it will ultimately make your message more cluttered and harder to decode.

Infact, as a rule, I would refrain from using any form of typographical property in an icon. If you have to retreat to another tool of abstraction (the written word) I’d say you’re not using the full force of your pictorial arsenal. Rethink your analogy; is there really no better way to visualize the application than with dry words?Perhaps the only exception to this is single letter representations. They can in themselves become iconic enough to loose their wordly capabilities and transcend into the purely symbolic sphere. Also note that your app icon will always be presented with the name of the application. So people, please get those words out of your icons.

There’s quite a few icons in the app store that has words in them. *gosh*

Don’t standard gloss

Apple gives you the option to add their standard gloss to your icon when submitting it to the app store. This is said to give a uniformity to the App store and give your icon that glossy apple look. Im baffled that so many developers choose to apply this standardization to their precious custom icon. If you must add gloss, why not be able to control every aspect of it yourself? Besides, note that not every single native Apple icon comes with gloss, let’s tone it down a bit guys.

In my oppinion each of these respective icons would have looked better had they not included the standard app store gloss

Simple is good. Simple is clear.

One of the most important rules in icon design is to keep your motif simple and to the point. Icon design is all about expressing yourself clearly in a confined amount of visual space – your 57×57 pixel app icon is certainly no exception! So figure out your analogy, boil down (or trace back) your app to a purely conceptual plane. What is your app really all about? If you could only show people one thing that would represent your entire app, what would it be?

Selecting a single object can work for some apps. If you must have several objects interacting with eachother make sure each and everyone of them is clearly defined and that the interaction is unmistakingly clear.
To be precise you have 3249 pixels at your disposal (57×57), don’t clutter them up with unnecessary noise. As with all design, the more you take away from it while still keeping your message, the more clear that message will be.

It’s all about finding that one good illustration for your icon and making sure that its presented in a clear and simple manner

Details

Don’t confuse simple with plain looking. When you’ve found your conceptual masterpiece don’t hesitate to put it over the top. Slave over that 57×57 icon, add details that perhaps only yourself will notice. Use an array of gradients, highligts and reflections, anything to emphasize the pure awesomeness of exactly your app. This is the first and most important encounter with your product, don’t hold your horses – make it something to remember.

Here’s a selection of enticely detailed icons. It’s important that the details don’t take anything away from the icon - it shouldn’t clutter up your image but strengthen your analogy.

Icon/App consistency

There’s an argument to be made about the experience of pressing your icon and then using your app. You’ll create a much higher level of trust and fidelity if those two events aren’t too dissimilar. The anticipation you create by having a great icon should be reinforced when your application itself is well designed and vice versa.

These highly stylized icons are reinforced by the experience of using their apps interfaces.

Stand out from the crowd

Scrolling through the grey rows of the App store, your first point of contact with the customer is more than often your application icon. All the thought and labor you’ve put into your app should shine through your icon and convince the user that he or she simply cannot live without this excellent piece of software. Take steps to stand out from the hordes of other icons out there, make design decisions that will take you away from ’standard’ and swing you over to ’unique’.

Here’s a handful of unique icons that all bring something new to the table and stands out from the crowd.

So what now?

There’s more than 70.000 apps in the app store. Make sure that your wonderful app doesn’t drown in the mundane. If you think this sounds like a daunting task, or you’d just like to spend your time actually developing your app, hire a professional. We’re not that expensive and it’s usually money really well spend. Send me an email if you want to talk icon design.

On the other hand, if you feel like mastering your own app icon I’ve put together a simple-to-use PSD file template that will help you get started on your 57×57 pixel gem. Download it below.

If you liked this article why not comment, or tweet about it.

After having this concept dusting in my projects folder for the better part of a year i thought it was time for me to realize that i would never make a complete set. So i’ve decided to release this handful of icons along with two photoshop templates so you guys can craft your own variations.

Colourful Peeling icons. Peelies!

So head over to the Goodies Section and download the set. Oh, and if you create some new ones with the templates, link them up in the comments - i’d love to see what you can make of it.

Casual Collective serves up a range of fun and engaging flashbased games set in a solid community with multiplayer, forums and rankings. I was hired by the dynamic duo last year, to provide a wealth of various icons for community actions aswell as individual games.

From Foods, drinks and community gifts to specific game achivements.

The icons varied in style, perspective and tone. Reaching all the way from 48×48px cute animal icons to 16×16px community notifications, this project continued to utilize several different techniques to get the most out of each subset of icons.

Check out all the icons in my Portfolio and be sure to leave a comment.

48×48 of pure pixel cuteness

Bringing back illustrations to the CS4 icons

If you’re like me, atleast two or more of the adobe CS4 applications is always running in your dock. These wonderful birthplaces of creative things deserve some much needed attention. This set includes some of my most used apps from the CS4 suite.

You can download these icons from my Goodies section.

After months of late night skecthing and shooting caffeine directly into the bloodstream we’re proud to unveil the spanking new PixelResort.

Together with my codemonkey brother Mads Hartmann we’ve been stealing moments over the past 6 months to invent and build a completely new PixelResort from scratch.

Pixelresort v2, signing off.

Out with the old, in with the New

PixelResort v2, that old horse, has run it’s course. With more than 200.000 visitors over the last year it’s with pride that i retire it to the stables. It’s been such a fun ride to see that design reach it’s full potential and then some. I want to thank every visitor and blogger for making it such a great experience.

Good Clean Fun

So what’s so great about all this? Well one of the major points of the redesign was to make your experience at PixelResort alot more userfriendly and fun. Alot of effort has been put into making the site as clean as possible while still balancing the ellusive art of having a vibe on a site that will hold many different forms of content. Hopefully you’ll enjoy the new surroundings - i’ll let you explore all of the little nifty details that made this site so long time in the making. We’re talking Ajax, Jquery and straight up magic.

Please let me know what you think of v3, and shoot us an email if you find any bugs crawling around. We’re still ironing out the folds.

Im glad to announce the launch of a new project i’ve been toying with lately. The site is called appweek.ly The premise is quite simple:

There’s alot of apps in the appstore. appweek.ly is dedicated to bringing you the spotlight on a single quality iPhone & iPod touch app each week.

There are several large iPhone/Touch review sites out there, but i wanted to really boil down the amount of focus to a single guaranteed-to-blow-your-pants-off™ app each week. I sometimes feel alot of responsibility subscribing to RSS feeds, due to the inane guilt of just knowing that i wont be able to keep up with the constant stream of updates. appweek.ly is all about bringing you an amount of content that the casual iPhone/Touch user can cope with and appreciate. The reviews will be brief and casual, it’s more the actual featuring of the app that will be the gesture.

We’ll be scouring the appstore for those ‘best-of-the-week’ apps so I hope you will take a sec to check it out and subscribe to the appweek.ly RSS feed and/or follow us on twitter.

I’d love to hear your thoughts in the comments.

Here’s a holiday present for you guys. A colourful Christmas wallpaper with a snowy winter globe to brighten up this dark month. Widescreen, fullscreen & iphone versions up for grabs in the Goodies Section.

Merry Christmas everyone.

Really excited about this guys. Today im launching a new website together with good friend and Pencil artist, Kasper Købke. DigitalsbyKobke.com will be selling exclusive, limited edition art prints of his amazingly detailed works.

Drawings by Købke is known for its immensity and great attention to detail through the vivid hand drawn style of Kasper Heron Købke. Now Digitals by Købke gives you the opportunity to acquire your very own hand drawn centerpiece with that classic sophistication of the pencil stroke.

Kasper is all about capturing both the immensity and details of a scene.

We have carefully selected 5 of his works, and spend months finetuning the process of delivering a great product worldwide! Each print is printed on acid free, heavy weight paper and mounted on a 5mm foam plate. After printing, the piece is satin laminated for protection and smoother colours. We then have our Custom Framer put a specificly selected black, minimalistic wooden frame around it for that extra touch of class.

Each print is limited to a series of 100 and comes with a numbered and signed certificate for added rarity. Go check out the newly launched digitalsbykobke.com, designed by yours truly I’ve also added it to the Portfolio Section for good measure.
]]> http://pixelresort.com/blog/launching-exclusive-pencil-art-print-shop/feed/ http://pixelresort.com/blog/showcase-svs-product-icons/ http://pixelresort.com/blog/showcase-svs-product-icons/#comments Thu, 06 Nov 2008 16:13:48 +0000 Michael Flarup http://pixelresort.com/?p=18 product icons for the various trading platforms. [...]]]>

Last week my company launched the website for a British Capital Markets company called SVS. It’s been a long project and many people have been involved. I had the oppertunity to work on the product icons for the various trading platforms.

The icons will be used for actual desktop applications and online branding of the offered platforms. Head over to the Portfolio section too see a more detailed view of the various sizes.

Just a quick showcase for you guys. This has been sitting on my desk for a few months.

MetroPlex was supposed to be a community for realestate agens worldwide. I worked with the company in the beginning of summer - and over the course of a couple of iterations we worked out the main concept for the logo. Unfortunatly the client decided to end the partnership before completion.

Towering buildings in the Metroplex

It just proves to show that freelancing certainly has it’s complexeties. A subject for a future article perhaps? Anyways, i liked where this piece was going, and i figured that since it’s not going to be put to use in the real world - it might aswell do some good in my portfolio.

I saw Pixars Wall-E the other night. Brilliant movie. As i was strolling home in the warm Copenhagen summernight i felt inspired to attempt to iconize these adorable creations.

At first i was just trying to challenge myself and see if i could get the textures right. But as the hours went, Wall-E started to take shape. By the end of the night i had around 500 layers in photoshop and one grimy little robot.

You are looking at 500 layers of pixels

What i find particularly interesting with the character design of EVE & Wall-E, is the huge contrasting dualism in the shapes and textures. These guys could hardly be any more different - and as an aspiring iconist that was just too good a challenge to pass up. I hope you like these guys and put them to good use. Ofcourse all credit go to Pixar and Disney for their wonderful work on these amazing characters. You inspire us.

Download these icons from the goodies section.

The guys over at Casual Collective recently launched their new blog designed by yours truly. It’s a light an colourful wordpress theme that suits the creative duo’s venue; Game developing! They’re up to some really interesting stuff with their gaming site.

Im working on something really big with these guys, but it will be some time before i can lift the curtain on this one. All i can say is that im really looking forward to sharing it with everyone.

Well, this is something different.

For my girlfriend Maria’s 24th Birthday i drew this caricatured, ‘Jason-Brooks-meets-manga’ portrait of her. I worked on it in secrecy late nights while she was sleeping next to me.

I had it printed on A2 heavywheight paper and custom framed. Check out the full portrait at DeviantART

As a burgeoning designer and graphics artist you sometimes feel that you are working 3 fulltime jobs at once. Advancing your career at several fronts is time consuming. Don’t get me wrong, it’s thrilling and exciting, but after 12+ hours of photoshopping each day, updating the blog often doesn’t fall into the category of things that ‘needs to be done’.

This also means that a few of my personal projects have been put on hold for now. But fear not, i can’t wait to showcase you guys some of the stuff i have on my desk. Im working with some really cool people from around the world, i’ve got an awesome new job at home and im still taking freelance jobs.

In the meantime, thanks to the wonderful world of web 2.0 - im very stalkable. So please feel free to follow me on twitter, check out my DeviantART profile or my personal flickr account. And if you haven’t already, ofcourse you should grab my RSS feed for updates, even though they are alittle far and wide between.

Today i’ve got the pleasure of introducing a new blog category which i have cunningly named ‘Showcase’. Here i will report on updates to my Portfolio and show you guys fresh-off-the-desk client work.

I have the privilige to work with some really awesome people around the world on a selection of exciting projects. It will be my honor to showcase some of these projects and give you a peek into my freelancing. Who knows, maybe it will even spark some inspiration on the way.

Requests for Iconstyled Logos

Lately i’ve gotten alot of requests from small companies and individuals; start-ups in the planning phases looking for someone to put their ideas into uniquely designed logos. Now, when you ask an iconist to do a logo, he will inevitably use a tool and mindset hailing from that creative outback. But the request goes one step further, many times the client wants the logo to be able to double as an application icon.

The borders between logo and icon slowly melts away and sometimes it’s hard to tell if you are making an icon that can double as a logo or the other way around. All technicalities aside, what the client really wants is symbolism in its purest form. An icon serves many of the same purposes as an ideogram or a logo. It’s all about visualizing an idea and communicating a recognizable brand.

The popularity of OSX and it’s iconcentric interface have propelled the icon-inspired-logo. In the years to come i think we’ll see alot of icons crawling out of their docks and playing a larger role in corporate branding.

Three new ones in the Portfolio

I’ve just added three such Logos to my Portfolio. Take a peek and leave a comment if you like. The three logos have got very happy owners. If you are looking for someone to put your ideas into form, take a look at my Services or Contact me.

It’s been awhile since i last posted. I’ve been busy with a load of exciting freelance work, finishing up my bachelor degree and lastly, rushing off to Thailand. Right now im typing this from my bungalow on Phuket, and i thought i would share some of the summer vibes. Here’s a real summer wallpaper for you guys. A bright, roaring wave and a lone surfboard ready to brave the salty sea. Download now and start the Surfing.

After publishing my last article on the Process of Making an Icon, I got a few requests for more indepth knowledge on Layer Styles, and a more explicit walkthrough of their direct usage.

Now, Blending Options and Layer Styles are one of the first things Photoshop Novices stumble upon. The infancy of adding layer styles often leads to a short period of horrible drop shadows and cringeworthy bevels. Ironicly, this easily available styling is one of the harder things to master. Layer Styles is all about manipulating individual layers to obtain a certain effect. It’s a key aspect of creating icons, and will help you create textures, shading and highlighting.

Both of these icons consists of the same 3 layers *gasp*

To give you a better idea of how Layer Styles can be used, i’ve chosen to take you through a recent project I did for Jeffrey Lynch Development, Ltd. Inspired by the ancient Yin & Yang symbol, Jeffrey Lynch requested a simplistic icon to be used as a company logo. The reason, this examble is so well suited to illustrate the power of blending options, is because of it’s simplicity and most importantly the fact that it’s only made up of 3 handdrawn vector layers!

The above picture shows the same 3 layers, that makes up the icon with and without layer styling. If anything, this shows how much can be obtained with simple blending options. Let’s go through the steps, that gave this seemingly flat icon a life of its own.

Gradients

Let’s start with something I´m sure most people are familiar with; Gradients. A Gradient is, as you might know, a colourfill that blends through a selection of colours. Gradients are the salt and pepper of the average photoshop user. A Gradient can add life to even the most boring element, and with the right combination of colours it can help you control object lighting.

You gotta love Gradients!

Gradients are fun and easy to apply, and I´m sure most people have fooled around with them, so i won’t spend more time dwelling on this particular Style.

Textures

Not everything should be shiny reflections and smooth surfaces, textures can add realism to an icon. Blending Options can help create a simple gritty texture, that will contrast the abundance of shiny surfaces in the web 2.0 world.

Inner glow used for that noisy texture

In this instance I’ve used Inner Glow with a high noise level and a centered source. Remember to set the blending mode correctly - if the noisy color is lighter than the background, it’s gritting up, make sure that drop down is set to ’screen’ - if it’s the other way around, use ‘multiply’. There’s hundreds of ways to add different textures to your surfaces, This is an extremely simple texture - what appeals to me with this solution is that you avoid using filters, which will often render your layers rasterized, in which case you lose scalabillity.

Using Inner glow to create a gritty texture might seem odd. Trust me, this will be a reoccuring theme, when you work with Layer Styles. Don’t be fooled by the labels Adobe has given the individual options, find out what´s possible with said functionality, press it to the limit and learn, how the options can work together. Before you know it, you’ll be doing highlights with ‘Drop Shadow’ and shadows with ‘Satin’.

Shadows

As with many other things, there are alot of ways to do shadows. Shading your objects correctly helps add depth and perspective while mimicking a source of light.

Adding an angled shadow using ‘Inner Shadow’

In this case. I’ve used ‘Inner Shadow’ with the ‘Color Burn’ blending mode at a middle opacity. Color Burn looks at the color information in each channel and darkens the base color to reflect the blend color by increasing the contrast. Play around with the Angle, Distance, Choke and Size until you got something interesting. The image above has also got a subtle ‘Drop Shadow’. A common mistake is to overdo the Drop Shadow- turn it down guys, nothing casts that dark generic drop shadow.

Lighting

At this point our icon is looking alittle dark. Now we could just go in and brighten up the gradients, but another neat trick is to add some ‘Satin’ with curvey Contours and a lovely low opacity Color Dodge blending mode.

Satin with white Color Dodging creates interesting lighting

It’s a personal preference of mine to use Color Dodge for highlights - it adds some really interesting lighting if used the right way. Color Dodge looks at the color information in each channel and brightens the base color to reflect the blend color by decreasing the contrast.

Highlighting

Let’s try and take that Color Dodging highlighting to a more detailed level.

Highlighting with a Color Dodging Bevel

Believe it or not, but Bevel & Emboss is actually useful beyond doing funky looking bubbly text. Here I’ve used Color Dodging angled with an Altitude of around 70 to create a sleek highlight slightly displaced from the edge of the layer to add a sense of thickness to the object. The thinner the higlighted line, the sharper the curve will seem.

Last words…

As you might have realized by now, Layer Styling is a pretty powerful tool. There are so many ways of obtaining various effects, that every good designer has their own little tricks. My advice is; forget the names and learn the limitations of the individual options. Play with the subtle symphony of the respective styles, flip the dials, turn the nobs and eventually you will end up with something useful.

Headphones for iTunes or any other music application. Throw out the old node/cd combo and personalize your music listening with 11 different styles to choose from! Mac, PC & PNG files included, heck i even threw in a candybar iContainer this time.

Happy listening.

A funky neon wallpaper pack with 5 discolicious variations: Diagonal Disco, Horisontal Hotness, Foursome Force, Vertical Vengance & Slim Showdown. I’ve got a thing for neon these days. Check them out.

I’ve had a few requests for insights into the process of making icons. Instead of answering individually, I’ve decided to make this the first subject of a range of articles to be authored here at PixelResort.

This won’t be a tutorial or a step-by-step walkthrough, more like a general guideline based on my own experience. It’s how my workflow crops up. Enough disclaimer, let’s see if we can make an icon. To illustrate the creation of an icon, I’ve decided to redraw my old TextEdit icon from the bottom up.

Sketching

Sketching is an important tool in defining the concepts of your icons infancy. Sketching shouldn’t be accurate, it’s all about getting your ideas down on paper.

Get your ideas down on physical paper, it will save you time in the end

Unconsciously you make alot of decisions when you first put that pen to the paper. Perspective and major elements materialize and you get a first and early look of what might work. The power of moleskins should never be underestimated. Reference pictures and rough tracing might come in handy if you’re drawing something completely alien to you.

Where to Start?

When that unceremoniously blank photoshop document is staring back at you, it might be hard to know where to begin. My advice is, start with large and defining elements of the Icon. In this case the wooden pad sets the perspective and works as the foundation of the icon.

Start drawing large and defining elements

The Pen Tool

The Pen tool is the iconists best friend. It takes time to master, but it’s the heart and blood of icon creation. Even though your finished work will be raster based, vector scalabillity in the work area is essential. It allows you to move around and resize elements like there’s no tomorrow.

Get familiar with the pen tool

Blending Options

If the Pen tool is the iconists best friend, blending options is the beer they enjoy together. Blending options are way more powerful than many recognize. The subtle symphony of individual styles can create almost any texture and surface.

Alot can be accomplished with the blending options

I could write an entire book about the power of blending options. The best way to learn is to play around with it yourselves. Don’t be fooled by the labels adobe has given the individual options - an inner shadow doesn’t necessarily need to cast a shadow, etc. Explore the possibilities of the individual options.

Organize!

As you slowly add more details to your icon, make sure to stay in control of your growing number of layers. Organize in folders, and nestle in smart objects.

Organize layers in folders and smart objects

Icons can easily have 100+ layers, so staying on top of the individual parts make tweaking alot easier.

Smaller Sizes

As you may know, a regular icon package contains several sizes. When you first start out, make sure to work on the maximum size your package will contain. This is often 512×512 pixels (leopard standard). From there on, you should work your way down the various sizes (256, 128, 32, 16).

Give your small versions the attention and care they deserve

Tweak and completely redraw your icon to fit each individual size. Much of the liberty you have in the 512px version won’t be afforded you in the smaller sizes. Each size is equally important. An icon is only as good as it’s least attractive size. Make those pixels count!

Packaging

When you’ve spend a few hours perusing the details and tweaking everything to your satisfaction it’s time to pack up the icon. Personally i use Iconfactory’s marvelous IconBuilder. It outputs Mac & PC formats without a blink.

Packing the various sizes in icon files

Ultimately the creation of each icon is inheretly different. To say that I haven’t gone into detail is a mild understatement. There are quite alot of aspects which i haven’t covered, but I hope that i’ve shed some light on the process of making an Icon.

Download

Download the finished icon from the Icons Section.

I’ll be happy to answer any questions in the comments.

While working on the new site i had a chance to revisit a few of my older works. The Apple Retro and Apple Modern Wallpapers have both been completely redrawn. Jump to the wallpaper section and get them now.