If you need other sizes, just post a comment – and it will be supplied

I have decided to split up my personal projects, and my professional interface and icon productions. In addition to that Emanuel Sá came on the team so we are able to make even more glorious icons. Check out the site here. 

icondesign has chosen to create free iPhone application- and icon design for a limited time period. Everyone who makes free iPhone applications, can now get some amazing graphics in their cool application, and it is free!

A lot of developers don’t always have the resources or time to create the best looking user-interface themselves, but now they can get professional help from the nice icon designers at icondesign.dk. We have worked on several projects, among others iBlackjack, Measures and ByLine.

If you are interested in getting some cool looking bling for your iPhone application, check out the details on the website.

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

I will be a bit offline over the next couple of weeks. I will be having a small vacation, but check back soon for some updates on the Mobile me theme and AirSpiration.

Lovely design, and nice to get plugged for a theme that isn’t even finished yet

Update: …Or did it really start on MacQuébec or on the other french apple blog, applenews.fr. Aaaaargh, the internet is spreading stuff so fast

Ok; I decided to make this post sunday babble. Just for fun, let’s dig through the places where you can find some of my stuff. It’s funny how it’s all over the place. Take a quick search on google for instance, googling my name in google images spawns 11 of 21 pictures which is mine. Even some I almost forgot about.

Then there is my beloved Mac Themes, which is one of the places with the most referring links. First they were friendly and  posted my NES controller on a weekly wrap-up, then they posted a link to the Snow Leopard wallpaper, and a few days ago I got my very own spot among the great MacThemers with Polaroid Revisited. Talking about referring sites, Applesfera is actually no. 1 referrer, probably because of this Snow Leopard plug. Which actually can be found a couple of places, ie. here, here and here(nice blog btw.). Over the last month, I received 5000 clicks from that site; ouch! I don’t know the people there, and I have no clue of the language – but thank you anyways

Another old wallpaper has been linked to again and again – but mostly from this flickr page.

GuiPulp is also a friendly place to find more of my stuff. A nice pig, a sweet wallpaper and that snow cat again.  MacGasm also seems to like chocolate…

This is fun; more to come later…

What is this new thing then you ask? Well – I decided I will make my first OS X theme, based on the screenshots provided by apple of Mobile Me.

Here’s a quick draft.

Heavyly inspired from the MacBook Air, comes AirSpiration:

And a slightly more rounded version:

Third update:

Henri Liriani, a great icon designer, gave me a couple of tips. Here’s a first draft:

Playing a bit more:

Still playing around:

Last for the night:

As promised this is the first tutorial in a series, describing my process creating my illustrations and icons. Comments and suggestions for improvement of the articles are very welcome. Please bear in mind that English is not my mother tongue, but I hope the point comes across anyways; if not – please let me know.

My rambling are not necessarily the only way to archive your goal, but I hope you will learn a thing or two by reading this tutorial. If you have a better idea on how to solve some of the things I talk about you are very welcome to leave a comment.

So, what is this article about? Well as mentioned in a earlier post, this is not a step by step-plot in numbers-kind of tutorial. Those kinds of tutorial are nice, but I hope this will help you understand some basics of illustration, instead of just handing out numbers.

These articles will illustrate how to reach a certain goal, IE. how to get lighting right or how to use photoshops filters for things you don’t usually use them for. In this specific tutorial I will try to show you how I add mass to an object, using the tools available in photoshop.

It’s all an illusion

Creating the illusion of a 3d object in a 2d space (which our canvas in photoshop is), can sometimes be daunting. What I usually do is to split a object into several easier-to-handle parts. Spheres, cylinders and boxes are a good starting point. Let’s take a look at this character:

Basically it’s just a couple of circles and a few cylinders. What is it that gives this character the illusion of depth and mass? Well, highlights and shadows for one. But also the subtle differences in color, and most importantly luminosity. The brighter a color is, it seems to be closer to us; and the darker a color is it seems to be further away from us.

 Let’s take a look at how you create objects with the illusion of depth, shall we?

Creating a sphere

Creating a sphere is pretty simple, as long as you know a trick or two. It’s all about knowing your light sources, and how the light will reflect on the surface of your object. I usually begin the illustration with outlining my object with vector paths filled with a soft gradient. Let’s take a look on what we are trying to achieve:

Let me use a moment to explain why the use of paths is a good idea. Basically it boils down to you being able to rescale your illustration if necessary. But another good reason to make your illustration in a path is that you are able to export it to a vector program if you need to. It’s also very easy to edit your paths afterward, and you will always get a nice sharp edge.

Instead of using a solid color; I always use a gradient. Objects that appear one color are seldom 100% that exact color all over. Light, shadows, materials and reflectiveness all affect the perceived color of an object. Observe the objects around you, and study how light reflects, colors overlap and how the shadows fall.
 

Our sphere will consist of a couple of layers. After creating the initial shape we need to add some layer styles. To give the circle a bit of depth start by adding a inner shadow, with a fairly large distance and size. That creates the illusion of roundness. Never us the initial 75% on the layerstyles – it’s way to hard, turn it down to half. A small tip, while you have Inner Shadow active, you can click and drag on the canvas to move the it onto the position you want it to be. 

Adding a bit of inner glow will create a soft highlight. Using the Overlay blending mode adds some nice contrast in the colors.  

And at last add a Gradient Overlay from black to white set on Soft Light. Now turn the angle dial to reflect the position of your light source. 

The next thing we need to do is to define the shape even more. Adding highlights and shadows is very important. Even though most objects don’t seem reflective, they mostly are. Very reflective objects(mirrors, plastic, apple products ) have hard highlights. Adding a combination of hard and soft highlights all adds to the illusion of a solid 3d object. 

As you can see we have something that resembles a ball by now. But we still need a few finishing touches.

Create a copy of your initial shape, and set the color fill to 0%. By adjusting the color fill, we can remove the fill color of a layer, but keep any layer styles we add to the layer. Now add another inner shadow to the layer we just created, to add even more depth to our shape. Make the size way smaller than our original inner shadow – and set the blending mode to multiply if it isn’t already.

If you want to define the shape a bit more here’s a tip. Adding a very small outer glow with the color set to a dark shade of your object, it will pop out even more. 

Adding a inner glow with the color of our object at a very low opacity, and at a reasonable large size gives us a soft highlight.

The last thing we need to do is to add a small shadow. Take a look at the shadow on this picture. Do you see how it fades out the further it goes away from the object? Well – most shadows (depending on the light source ofcourse) blur out and loose some opacity the further they travel from an object. 

Objects also tend to bleed some of the color of the object to the surface, and nearby objects. So adding a tad of the spheres color on the floor adds to creating a believe able object.

This is what my layers look like. Download the PSD if you want to study it further.

If your like this tutorial – these are my thoughts for future ones:

Creating Materials

• Metals
• Glass
• Plastic
• Rubber
• Texture
• Wood

More than just spheres

• Creating complicated objects
• The power of adjustmentlayers
• Color correction

I got a few requests doing tutorials also, and I would love to show you have I illustrate. The problem is that it’s a pretty elaborate process, so my guess is the tutorial will more likely cover some basics of the illustration process, rather than giving you a step by step guide. I also think that would give you a more detailed peek into the process, and you might learn something as well

Stay tuned this weekend, where I have planned to show you some new veggies.

Oh, and by the way. You see that purple link to Mactropolis on the right? Well, the Mayor at Mactropolis is giving away free iPhones. Or almost – you can win one of them new shiny mac gadgets by registering at the Mactropolis forums. So give it a shot