Tuaw made a small review of the new version of Byline, and it looks like they liked the new icons. The appleblog also made a really positive review.

I have been working on a few icons and illustrations for an iPhone application called Byline, made by Phantom Fish. Byline is a Google RSS reader, for your iPhone or iPod touch. Byline also has some nice offline reading abilities, check it out, you can find it here in the iTunes Store.

As usual the collaboration went very good, and we exchanged some ideas before starting the project.

Four interface icons were created, as well as a wooden backdrop:

New item (like the standard blue blob in mail)
Starred items (a simple star)
Notes (a pencil)
Folders (a folder)

The process is the same as always, the client ask for a bunch of icons, and I stars sketching them out. A lot of time is used on getting to know the expectations of the client, and I don’t stop working on the icons until the client is 100% happy. In this case, Phantom Fish was great. They knew what kind of icons they wanted, and they had some ideas of how they should look like.

Even though the icons are only 40 x 40 pixels in the final resolution, I always create a higher resolution template, to work in all details. Everything is created using vectors, so it both scales well and it is easy to edit when It comes to making the smaller sizes.

As a small service I decided to create the toolbar icons as well, but they are not used in the final release – as they have been redesigned by another designer earlier.

I had quite clear ideas about the designs I wanted for this project, but it’s always difficult to communicate exactly what’s in your head to another person. Kevin was a pleasure to work with — his rapid and incisive response to feedback meant that we very quickly began to hone in on the look I was after, which made the hard graft of the process seem effortless and gave us plenty of time to focus on the details.

Milo Bird,
Phantom Fish

Here you see the final layout of one of the screens in Byline. If you have any questions, or would like to know more about the process, just post a comment below

If you need a icon or interface designer for freelance work you can contact me by email: graphics[at]kevindersson.dk

Basicly it boils down to pixel to pixel ratio when you scale your art down. Say a 8px line your 512×512 icon down to a 64 x 64 px icon. What happens is, that your 8px line becomes 1px wide in the 32px version. That’s pretty straightforward. Scaling it further down, say to 16 x 16px you will get a pretty muddy result, as your 8px line, now has to be divided by 2 again.  

The thing is, if you made your initial document right, it’s pretty easy to get past this problem. What you do is, that you increase your layer-styles sizes with the the multiplier you scale down. So, if you have 1px outline, and you want that outline to stand out when you scale down, you just multiply it with the amount of times you scale you illustration down. 1px in 512x512px becomes, 1px in 32x32px if you make it 8px wide in the high resolution.

This doesn’t always work though – but a lot of times it will.

Another good idea is to keep a grid in the background of your artwork, for pixel position reference. Attached in the PSD you will find a 8x8px grid file – which you can make into a pattern, and apply to your backgrounds; this works perfectly with your 512x512px document  

In this case Illustrator is a real dealbreaker if you want to get the perspective right. Illustrator has this nice 3D Extrude & Bevel effect, which is perfect for this specific task of creating depth to a complex object. Look at the example below. Times new roman, 3D Extrude & Bevel effect – and you got your starting point for your vectors for photoshop

Check out the rest in the PSD file – and give me a poke with a stick if you want any further details on the creation process

So, now I decided to make revisited release of the Polaroid illustration. Basically it’s made from scratch again, and I added some minor tweaks to it as well. The PSD includes two versions, a slanted one and a straight one. I also added some adjustmentlayers, which ofcourse can be turned on / off.

I hope you enjoy the re-release of Polaroid. (Download PSD file)

Hello again dear visitors. I got some requests packaging the 360 as icons, so I pulled myself together and did a small package for the bunch of you.

The package includes: Highres 512px png files, Pixadex container and ICNS (512 px. version)

Enjoy, and remember to post a comment

Here’s a little treat for all the ones who have been visiting to get a wallpaper or icon over the last weeks

NES controller icon, retro style.

Fourteen colorful fruits. This iconset includes: Strawberry, banana, blackberry, peach, apple, watermelon, grapes, kiwi, coconut, orange, lemon, lime, cherries and a special orange.

Write a comment if you like it

Preview

Download