SmartPhone Emulator Customisation

Home

Developers

2G/WAP

3G/J2ME

Custom Skin Building Service
Yospace offers a Custom Skin service and a Custom Font service to users of the SmartPhone Emulator.

All editions of the SmartPhone Emulator can run with customised skins -- you're not restricted to the standard devices' shapes or colours. A customised skin can match your own corporate branding and website design. Alternatively you might simply want to have a fabulous, eye-catching skin because it's the best showcase for your mobile services.

The Custom Skin service provides full customisation of the appearance of the emulator. We convert your artwork into a fully-functional skin. You provide us with images of the device in four key states, from which we can build the animations of buttons being pressed and illuminated. The resulting skin can run on any of your licensed emulators.

We charge Ł500 plus VAT for this service. Your customised skin can be used in both the Web Site Edition and the Developer Edition. You can place your skin on your own server, or we can host the custom skin on your behalf, and restrict access so that it can only appear on web pages that you specify.

Note that custom skins affect only the appearance of the emulator. The actual behaviour of the SmartPhone Emulator (such as the way its interface operates) depends on the personality of the device being emulated, and not the skin.

If you'd like a custom skin, please read the information on how to prepare the requisite skin graphics, and contact us at skins@yospace.com.

Custom Fonts
In addition to customising the SmartPhone Emulator skin, we also offer a Custom Font service. Specifying your own font can distinguish your demonstration, or it may allow you to use character sets that are not usually supported.

We can build any font you specify to run inside the emulation. Contact us directly to discuss your requirements.

Requisite Graphics Files
If you want us to convert your artwork into a custom skin for the SmartPhone Emulator, we suggest you follow the following steps. There is a more detailed set of guidelines for Photoshop users below.

Creating Artwork for Skins (General)

Source or create an original graphic of the highest possible quality.
The emulator's skin system is based upon rectangular masks so select a graphic which will not cause the button masks to overlap.
The original graphic should be scaled so its screen dimensions are twice those of the device being emulated. This can be checked by measuring the pixel display area of the screen. The artwork can later be scaled at either 200%, 100% or 50% to create skins of size 3, 2 or 1 respectively.
The screen should be square-on within the artwork because emulation cannot run at an angle.
Remember that the emulator cannot anti-alias LCD pixels, so you must ensure that the screen dimensions are an integer multiple of the LCD screen pixels of the device you are emulating. That is, if you want your emulation to have an LCD display 100 pixels wide and 80 pixels high, we recommend you work with an image which includes a screen just large enough to contain a rectangle of 200 x 160 actual pixels. If you don't use an integer multiple, the emulator will work but the LCD display will look at best ugly and at worst unreadable.
Crop the artwork as close to the device as possible.
Generate four files, which should be saved in GIF or JPEG format.
- normal.gif or normal.jpg
  Screen powered down, buttons in original position, roller (if any) in highest position.
- active.gif or active.jpg
  Screen powered up, buttons highlighted but in original position, roller (if any) in central position.
- actdep.gif or actdep.jpg
  Screen powered up, buttons highlighted and depressed, roller (if any) in lowest position.
- depress.gif or depress.jpg
  Screen powered down, buttons depressed, roller (if any) in highest position but depressed.
Each file should be the lowest resolution possible without compromising the artwork. The smaller the file size, the faster the download time. We generally recommend a maximum file size of 50k.

Creating Artwork for Skins (using Photoshop™)
The following guidelines are a more detailed version of those above and apply if you're working in Adobe Photoshop.

Source or create an original graphic of the highest possible quality.
The emulator's skin system is based upon rectangular masks so select a graphic which will not cause the button masks to overlap.
The original graphic should be scaled so its screen dimensions are twice those of the device being emulated. This can be checked by measuring the pixel display area of the screen. The artwork can later be scaled at either 200%, 100% or 50% to create skins of size 3, 2 or 1 respectively.
The screen should be square-on within the artwork because emulation cannot run at an angle.
Remember that the emulator cannot anti-alias LCD pixels, so you must ensure that the screen dimensions are an integer multiple of the LCD screen pixels of the device you are emulating. That is, if you want your emulation to have an LCD display 100 pixels wide and 80 pixels high, we recommend you work with an image which includes a screen just large enough to contain a rectangle of 200 x 160 actual pixels. If you don't use an integer multiple, the emulator will work but the LCD display will look at best ugly and at worst unreadable.
Work with the image in RGB values.
Work with the artwork in Photoshop™ (.psd) format to separate the images as layers as described below.
Create a new layer, using the white paint tool remove any unwanted background from the artwork.
Crop the artwork to as close to the device as possible.
Select the screen of the device and create a copy on a new layer.
Set the new layer as an overlay. This will create the powered-up screen.
Select the numbers on the keypad and create a copy on a new layer.
Edit the colour of the numbers on the new layer to match the powered screen colour. This will provide highlighted buttons.
Select the keypad buttons and create a copy on a new layer.
With the new keypad layer selected, reduce the scale of the buttons by 98%. This is an easy way to create the depressed buttons.
Create a copy of the highlighted buttons on a new layer above the depressed buttons.
With the highlighted buttons layer selected, reduce the scale of the numbers by 98%. This creates the highlighted depressed buttons.
Using the appropriate layers, export four files in GIF or JPEG format.
- normal.gif or normal.jpg
  Screen powered down, buttons in original position, roller (if any) in highest position.
- active.gif or active.jpg
  Screen powered up, buttons highlighted but in original position, roller (if any) in central position.
- actdep.gif or actdep.jpg
  Screen powered up, buttons highlighted and depressed, roller (if any) in lowest position.
- depress.gif or depress.jpg
  Screen powered down, buttons depressed, roller (if any) in highest position but depressed.

Each file should be the lowest resolution possible without compromising the artwork. The smaller the file size, the faster the download time. We generally recommend a maximum file size of 50k.