Ever since the new iPad launch people have been asking me to update my aging smart object based app icon template. They want the new Retina sizes they say. Well here’s the new version 2.0 with more than they asked for. It even got it’s own little website.

Made a tiny website so it’s easy to share with your peers.

For people unfamiliar with my original template, this is what it does in bullet point format:

★ Quickly render all sizes by editing a single Smart Object
★ Includes vector textures that you can build on
★ Exporting made easy with the bundled actions
★ Shows you a mockup of how the icon will look in the store and on your home screen

If you still have questions, I urge you to read my article accompanying the original app icon template, as it explains all of this in more detail – or just head over to appicontemplate.com where I’ve included a short ‘How-to’ and FAQ.

A new sleeker layout, easier to understand, easier to work with.

Like with my old template, a raised finger of caution for those who feel tempted to automate the entire process. This resource makes it easy to quickly render a concept across all the various sizes, and while i’ve spend hours on getting it as precise as possible, you probably want to customize the smaller sizes yourself to get that pixel perfection we’re always looking for. There’s a couple of things that go on ‘behind the scenes’ like a masked sharpening of the smaller sizes. This might not be a good idea for every design. It does make your average icon slightly more crisp, but can also breed some antialiasing issues – if you find yourself having issues, just switch off the smart filters for the affected icons.

A group for app icons

I thought it would be fun to create a group with shots of app icons made with the template – if enough people chip in, we could have a pool of inspiring images, heck we could even print a book one day. So if you’ve used this template please don’t be shy and add your pictures to this flickr group.

Add your icons to this flickr group!

Go forth and kick ass

So head over to appicontemplate.com and get the updated app icon template. Hopefully it’ll make your life drafting and rendering icons a little easier.

A few weeks back i made a poster for my office based on the classic WW2-propaganda-phrase-turned-meme “Keep Calm & Carry On”. I’ve really been enjoying it and i thought that maybe someone else would too – so i’ve opened up a small print shop.

The original idea for remixing this tired internet classic with the mac spinner actually started way back in 2010 after another 4am photoshop crash. It took 2 years and a wallpaper to get this thing to the printer, but when i did i was overwhelmed with response.

Marble of Doom, Beachball, Pizza Wheel, Rainbow Ball of Death, now you can hang it on your wall

Print is not my strong suit, but that’s what makes it exciting. There’s something about the tangibility of a real physical product that’s so far removed from the sort of stuff most of us ‘screen designers’ do everyday. That makes this a wonderfully unexplored territory, and one that comes with the spoils of actually getting a real life product that you can hang on your wall.

Shortly after putting the Beachball variant of the Keep Calm poster up for sale, i had a few iOS developers ask me if i could do an Xcode themed version. So i set out to recreate my own version of the Xcode icon and a week later i had two posters in the tiny store.

Developers demanded their own version of the poster

Society6 has made it super easy for people like me to open up a store and sell actual physical products, that’s really empowering for a single creative who might not have time to take care of the logistics of printing and shipping these items worldwide.

A close up shot of my interpretation of the Xcode icon

Lately i’ve been buying designer prints left and right, there’s simply so much great art out there by really talented people. I’m frankly humbled that someone might have something I created hanging on their wall.

Check out the store over at Society6 and hit me up on twitter and let me know what you’d like to see in there. I’m certainly hoping to do more Prints in the future.

After more than a year in the making, i’m excited to welcome everyone to the fourth version of Pixelresort, a cleaner and more vibrant experience.

Lots of stuff has happened since i pushed out the 3rd iteration of pixelresort more than 2 years ago. My career has matured and i’m now running two companies that have survived past their two year-old birthdays. So i felt it was time for Pixelresort to reflect that change and in many ways better accommodate how i use this site.

A cleaner look

One of the main goals of this redesign was to create a cleaner more airy feel, i wanted to have a less contained site with more emphasiz on images and text. I feel that i’ve taken the Pixelresort brand in a new and exciting direction without completely throwing away the heritage from the 3 previous versions of the site. In many ways the new logo and the rest of the visual identity is an evolution of how i’ve always felt about the site but with a much sharper edge. Pixelresort is a one-man design company, and while i don’t think there’s ever a fear that it’s going to get too corporate, i wanted to make it easier for clients to see my work and get a hold of me.

The new portfolio

One of the most important things for a freelancing designer is to have a current portfolio thats reflecting your skills and ambitions wrapped up in projects that you’re proud to showcase. Alot can happen in a few years and to say that my old portfolio was outdated would be a severe understatement. That’s why one of the driving factors of this redesign was to create a place where i would have plenty of room to highlight selected projects and give potential clients an idea of what sort of work i deliver these days. My new portfolio does exactly that, and i’m happy to finally have a place i can refer people to.

Onwards and upwards

I’ve always had a ton of plans for Pixelresort, but over the years i’ve had to realize that with the amount of projects i’m involved in this will never be a site with weekly updates. Getting to terms with that and designing it so that it’s a perfect anchor point for my company, sharing resources, showcasing my work and giving people a way to reach me was a major part of this design. I’m hoping that i’ve created something that will carry this tiny one-man design company into the next couple of years and help me grow as a designer.

I hope you like the new surroundings. Please drop me an email if you have any comments.

Michael

Here’s a Safari icon set that explores new compass concepts for your favorite browser! After months in the making and with a ton of help from people on dribbble and twitter I’m finally releasing this set for everyone to enjoy.

Something that started out as a doodle on my iPad grew into a cascade of late nights studying compass concepts and exchanging ideas with designers and good-folk alike. Sometimes you just stumble upon a fun notion and you gotta run with it, in this case it was as simple as the idea of why the Safari icon always had to depict that one type of Compass. A few months later, and I’m finally wrapping up 10 fun new compass icons for you guys to put in your docks.

Played around with some early rough sketches

I’ve decided to show some more high res artwork and give some justice to the many hours spend by reflecting a bit on each icon below, but if you just want to skip that and get the download, head straight over to the Goodies section and download the set. If you like to look at big icons and read some more words, read on.

It all started out with a remake of the original Safari icon

The Compasses

First off, I owe a huge thanks to the community for giving me feedback and feeding me ideas for this project. My awesome followers over at twitter has directly inspired several of the icons in this set and sharing the progress over at dribbble was a tremendous motivational boost.

A more dated look for your browser.

So after initially just setting out to create a fresh take on the existing Safari icon, I quickly struck a rich creative vein – the idea that the concept of virtual navigation and browsing the internet didn’t have to be restricted to the representation of just one type of compass. We’ve used, and still use, an abundance of different compasses depending on our situation, so it was time to start browsing the web for compasses.

The concepts quickly became less about realistic objects, and more about creating a theme in each icon – here’s a professional black look, something I imagine a soldier carrying around. I have no idea what he would use a leveler for though.

As with all personal projects, the fun is that there’s only the limits that you set for yourself – which basically meant that if a compass idea started forming, it wasn’t as much about “would this compass exist in real life?”, but more “would this be a fun icon to do?”

Started moving away from the original template and playing around with new shapes.

As the low hanging creative fruit started to run out, people started suggesting other types of compasses that pushed the concept further.

A GPS-styled (hello Garmin?) navigation.

As if the hundreds of compass pictures that was clogging up my desktop wasn’t enough, I started getting deeper into maps and cartography, using them for backgrounds and getting inspiration. If you haven’t noticed before, mapmaking is such an elegant art, displaying a high level of information in a digestible format. I think most interface designers agree that it’s something we try to achieve every day.

Concepts even got a bit silly, like this pirate themed one. I have no idea how the sundial got there, but someone suggested it on twitter and I thought it was fun.

As the compass ideas kept flooding in, I tried to mesh and combine concepts that I thought would be a challenge to do, technically. Common for several of these icons is the attempt at modeling particular textures or obtaining a specific effect.

The challenge in this one was to create a larger depth and a higher level of realism in the reflections.

In one icon the challenge would be to create a realistic reflection, in another it was mimicking a particular material, like water in the, truly back to basics, floating needle compass:

I looked at countless of glasses of water to get the refracting light right

So as I progressed through the set, the reward became setting up a particular challenge, wether it was a texture or just conveying a “mood” and then trying to solve that in something resembling a compass.

For the basic textures I used a slew of Photoshop filters and for some of the more realistic stuff I scoured the web for pictures and references, warping, combining and editing them until I got the result I was looking for.

Never stop doing what you love

Even though this project often ended up being pushed aside for a ton of “real” work, I kept coming back to it – sneaking a night here and a few hours there. And it’s personal projects like these that remind me that we can’t loose sight of the things we like doing. Creating something, just for the fun of it, to test your skills and to challenge yourself to collaborate, take inspiration and breathe life into a concept is such a vital part of being a designer. Especially when freelancing or working on large multi-month projects, we tend to forget the thrill of just creating something, letting your ideas run free, safe from a budget restraint or a looming deadline. Cause let’s face it, most of us got into this for that feeling and sense of achievement you get from nurturing an idea, receiving creative input and the stamina to see it through to the end, wherever it takes you.

Go Download them!

Enough talk, I Hope you enjoy these icons just half as much as I enjoyed creating them. Head over to the Downloads section and download the set.

After more than 10k downloads of my old app icon template and countless of requests for an update, i’ve put together an app icon template that should make your icon endeavors on the iOS platform easier.

Notice: My App Icon Template has been updated since i wrote this article. Most of what’s described here is still relevant for the new template, but you could also just go right ahead and read about that here.

More than a year ago i posted an article called ‘iPhone app icon design: best practices” in which i supplied a very basic app template with a handful of textures for 57×57 pixel icons. Seeing that resource being downloaded more than 10k times and receiving a lot of mail from people asking me to update the resource urged me to create a new, updated template.

Why another resource?

There’s already a couple of great app icon resources out there, so to justify a new resource i felt that it needed some additions. This has steered the development of my own template, which i’ve used and refined over the past month. I’m happy to finally release this template for public use, royalty free in any project you like, personal or commercial.

How to use this template

Let me give you a walkthrough of the template, and in the same breath show you how it differs from existing resources.

You can download the template here. When you open the template you’ll see an overview of the different sizes we’re aiming to create, it should look something like the picture at the beginning of this post.

Now in your layers window, in the 512px folder you’ll see a smart object with the educational title ‘EDIT THIS SMART OBJECT’. Go right ahead and do that.

Automation

See, one of the interesting ideas here is to use smart objects to automate the generation of all the icon sizes, theoretically making it possible only to create the largest icon size and see all other sizes scaled and adjusted. Now obviously this doesn’t give you the pixel perfection that we’re always looking for in the smaller sizes, but it does give you a way to quickly see how well a concept would work when scaled across the various sizes.

When we edit the above smart object we’ll get to the core of this template, the icon.pbs file. It should look something like this.

Everything is set up for you to create your icon in this single 512×512 file. Enabling the top most layer (titled ‘HIDE ME WHEN DONE’) will show you an overlay, estimating the rounded corners Apple will apply. But perhaps more interesting is the folders beneath, which brings us to the next feature of the template.

Textures

I think what made my previous app template popular, was the ready made textures bundled with the resource. So obviously an update to that template should include some textures that you can build off, get inspiration from or straight up just use.

As you can see above I’ve included a handful of textures that you can immediately apply to your icon. These are all 100% vector, feel free to use them in your project or alter them in any way.

All sizes in just a second

As soon as you hit save on your smart object and return to the template psd, you’ll see that all the sizes have been updated with your new icon, like this.

I can’t stress enough how much of an estimation this is and how important it can be to actually go in and custom create the smaller sizes. In this template i’ve tried to take as many precautions and apply subtle effects to give you, at least some sharpening and detailing applied automatically. This includes darker borders and a different treatment of all the icons that will be displayed in spotlight or settings (as they will be presented on lighter backgrounds on the device)

If your icon has several straight lines or sharp contrast you might experience half (blurry) pixels when it’s automatically scaled down. In these cases it’s impossible to automate and you’ll have to get out your pixel tools and manually correct it. After you’re done, this template has one last trick up it’s sleeve.

Exporting made easy

Bundled with the template comes 2 photoshop actions that’ll make exporting your icons a breeze.

Import these actions into photoshop and use them with the template, they’ll spit out all the files you need, both in Squared (no transparency, how apple wants them delivered) and in rounded versions (for other design uses). The files are automatically named after the Apple HIG so they’ll be good to deliver instantly. Finally a good use for Slices in PS!

Making better icons

I hope that this template will help strike another blow agains bad icons in the app store. Automation of icon sizes, bundled textures and a nifty export script puts it apart from other templates and arms the designer with a couple of tricks that will make drafting ideas faster.

NOTICE: This template has been updated!

Download the new version 2.0 from appicontemplate.com. Most of this article is still relevant, just know that the new template is based on the same idea but with more awesomeness.

Should you find some errors or have any ideas for improvement please shoot me an email.

Have fun creating icons.

The new iTunes 10 icon got you feeling blue? Well, I’ve created 10 different styles for your favorite music player. I’ve also included another one of my speed drawings showing the process.

As many others I wasn’t too pleased with the new iTunes 10 icon introduced by Apple last week. If you don’t like something, it’s in your own power to change it, which is why I sat down and made a set of icons i felt resonated more with my idea and use of iTunes.

Making the Icons

I enjoy doing these speed drawings, showing the process of creating and detailing something like this. So here’s another video for you guys, complete with tea making as tradition dictates.

Download

These things come in both Round and Square versions. You can grab the set over at the downloads section. Hope you enjoy these, i had a lot of fun making them. Take care and keep having fun.

Michael

In the opening monologue of the Tonight show the 23rd of March, Jay Leno talks about having “Spring on his iPhone” in an app where he can see how the weather looks like Outside.

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.

I’m really psyched to cut the red ribbon on my brand new travel blog called Fly Sleepy. This is a place for me to share messages from the trail, dashes of inspiration and pictures from my camera.

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

By popular demand, we’re launching a micro-store where we’ll be selling our limited edition Robocat vinyl stickers! Visit the site and order yours today!

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.

As we slide into a new decade what better time is there to take stock of your career and set some goals for the coming year? Here’s a few of my New Year’s Resolutions. I feel they might be quite universal for many graphic designers out there.

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.