Monday, December 12, 2011

I Suck At Photoshop

I was looking at the presentation from Eric Burke about the work square did with Android which resulted in a really nice UI. He tells about quite a few struggles they had with the Android API which seem to be pretty easy to get around in LWUIT.Anyway, one of the nicest things they did was the screenshot on the right which features a leather texture with stitches as the UI for the application which is a really nice touch for a wallet application (assuming you aren't a vegan).Anyway, that took me back a bit... How do you make a UI like that regardless of the platform that will look nice for all resolutions. I came up with the answer but because I suck at Photoshop I wasn't able to achieve anything remotely close to the image on the right... This just goes to show you how valuable professional design can be to a team.The way to produce an image like that is start with a clean tileable leather texture such as this one which I got from here and scaled down:

I set this as the style of the Form UIID and made it TILE on both axis's. Then I created a simple transparent gradient image, its so transparent you might not even see it but its very important to create the texturized depth to the image above:

I created a container and placed it above the form and gave it a style of Gradient, then I set this image as the scaled background (since this is an alpha mask scaling won't hurt the image quality much).Last I created a stitch image by using a stitch brush tool I found on the internet and this is the stitch image I was able to make (I set the background to red since the image is barely visible otherwise):

I set the stitches as a 9-piece border which allowed them to grow nicely. However, due to the bad source material the end result doesn't look nearly as polished as the work the guys from square were able to achieve. I'm guessing they have a depression overlay with the stitch layer to create an additional effect and their images are obviously more refined. This is what I ended up with in the resource editor: