Sofa's blog about design, code everything else.

First allow me to introduce myself. I'm Joy-Vincent Niemantsverdriet and I've been working at Sofa since October 2008 as a icon and UI designer. In the past I did a lot of graphic designing and created some websites. In my spare time I enjoy creating all types of digital art (icons, wallpapers, etc.), and sometimes I even release something online for people to download.

To kick-off my first blog post I want to officially release a Photoshop icon render I made of the Sofa logo. The idea behind this icon was to create a Sofa folder icon for our people at the office.

Until now, we never had an icon created out of the company logo, so I thought it was about time to create one. When I asked Koen where the name “Sofa” originated he told me: “The company started in a house borrowed from a friend and well-known painter in Amsterdam (www.vanhall.net). The place was filled with interesting furniture, but there was an old sofa that really stood out. As we sat and worked on it every day, the sofa quickly became the inspiration for the company name.”

The original sofa was a family heirloom, so we couldn't take it to our new office. The one we have now served as the inspiration for my icon design.

There are a lot of ways to create a icon from a shape, but I wanted to achieve a more realistic illustration of a sofa than simply a shape with a style over it. So I started with the shape of the original logo, and figured out where to place the elements. Normally I would have made a sketch first, but I couldn't help myself beginning directly in photoshop. I started to draw the shapes over our original sofa logo to get a idea what the body could look like (left image).

When the initial shape was finalized I started with the actual styling: putting the gradients in place and choosing the correct colors (right image).

The lighting on this icon is very important, without it the texture of the material doesn't come through. I chose to keep the bordeaux-red of the sofa because it has a royal feel to it. The color of the wood was changed to black, because it gives the icon greater contrast than the brown and the highlights really pop.

The body of the sitting area was pretty hard to put together, because all the shapes have different gradients, all of which needed to blend with each other. For example: the front of the sitting area needed to be smoothly attached to the middle section. They had two different gradients at different angles that needed to blend in to each other. At first I tried to style them individually, but that didn't look right, because the fabric needed to look like it was seamlessly wrapping around all the sides of the armrest (left image).

To make the front and middle part blend with each other I stretched the overlying shape, and softly masked out the edges of the top shape, this helped me to get the desired effect. The icon needed to consist of a soft fabric that I finally managed to get together by making a combination of blurred shapes and masked layers, which were visually merged together to make one final result (right image).

By using only vector shapes and smart layers, the icon can be scaled to any size without loss of detail. However, scaling down a 512 x 512 pixel version doesn't look good below (about) 128 x 128 because the system guesses were to put the pixels. To fix this we create smaller representations.

The smaller versions were a challenge to make. For each one I had to adjust the vector shapes to make the result as sharp as possible and make the most perfect use of each pixel, selectively removing more complexity as the sizes get smaller, while still implying the same concept.

We're releasing this work as part of a Sofa "goodie pack" which also includes a wallpaper by our very own Hugo van Heuven.