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:



7 comments:

  1. I want to use a PeerComponent in my Lwuit application for using a native component Android,please give me

    ReplyDelete
  2. What is specifically failing for you? What have you tried and where are you stuck.

    ReplyDelete
  3. This issue isn't resolved at 1.5 and we haven't resolved it for Codename One yet.

    ReplyDelete
  4. Thanks for sharing, I will bookmark and be back again



    Blackberry Development

    ReplyDelete
  5. Shai sir,

    where i will get LWUIT API documentation

    ReplyDelete
  6. shai sir,

    we can use msacces (.mdb)(database file) in lwuit......?

    ReplyDelete
  7. Videocon and stay in touch with your Contacts, Friends, and Loved ones.Seamless Roaming

    across India. National Roaming is Pre-Activated on Videocon Prepaid Connection with Zero Monthly Rentals.

    Tariff while Roaming anywhere in India.

    ReplyDelete