This is still big-time work in progress, but I hope for an release at some point

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

Long time no post, but I am still here, checking up on the blog every day. I have a lot of work at the moment, both freelance and at e-mergency. I have a small treat for the bunch of you in a couple of days, where I can show you a small case I worked on a while ago. So remember to check the blog in a week or so

If you by any chance are a multimedia genius who know a lot about php, and you got the social skills to match – please feel free to contact e-mergency, as we are hiring  

I made this little gem for all of you out there, who are so kind and keep visiting my tiny blog. Just a small piece, water and apples

Hope you like it, and remember to leave a comment.

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  

There are several ways to achieve a nice wood effect, but the one I am going to show you is pretty easy. The hardest thing is to get some good reference material, and to make you texture tile right. But if you have any suggestions for improvement, please tell me

In the zip file you will find a file called wood-texture with 3 layers. The first layer is the original reference picture, cropped to a interesting area. After cropping it you need to desaturate it (Shift + Alt + U). When this step is done, we need to make the wood tile-able. To do this go into Filter > Other > Offset – and offset the picture both on the x- and y-axis. Now you should clearly see the seam. The easiest way of  getting rid of the tiling, is to sample some pixels from the nearby areas with your stamp tool – until you have something like the last layer in the file. When you are done, simply select all, and go into Edit > Define Pattern, and type in the name of your pattern.

If you take a look at the file woodflat.psd – you can see the pattern applied, among other layer styles. 

And here’s another small example of what you can quickly put together using the same techniques.

If you have any questions, feel free to post them as a comment.

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

What do you think?

Usb version:

Here’s a small update:

And another update: