DOCUMENTATION ON CREATION OF IMODE AND WAP IMAGES

May 17, 2004

Basic Knowledge
  • IMODE browsers only support images in the GIF Format. Version 3 of IMODE HTML supports the following features:
    • - Non-interlaced GIF
    • - Interlaced GIF
    • - Transparent GIF
    • - Animation GIF
    • - JPEG files (for 2G/2.5G and 3G)
  • The file size of iMODE images is restricted by the cache size of the handset that will view the page. Currently, we have the 10 KB default size for the entire iMODE page, which only 4 KB is devoted to the image.
  • Screen size determines the size of images that you can use.
  • WAP specifications allow for the use of a graphics format called WBMP. It is 1 bit (either black or white) version of the BMP format. All graphics must, in order to be compliant to specifications, be converted to WBMP.
  • When using WBMP, an image should not be larger than 150x150 pixels. Consider that the WAP device screen is very limited. All graphics are limited to a size of 1461 KB because of WAP phone memory limitations.
Tasks

* April 28, 2004

- The Testez-vouz logo, Einstein, and a few other pictures from the Testez-vous site was converted to WBMP for tryout. Images were of 150x150 size. I discovered that Photoshop 7 has a WBMP converter. I observed that no matter how big the size of the original image is, the converter would automatically distribute the black and white areas and maintain the file size to less than 1461KB. Unfortunately, the quality of the image is sacrificed.

April 29, 2004

- The Objective for this week was to create images for 20 applications. These images would come from the homepages. These applications were the following:

Table 1

LNP TNP
1. Arreter de Fumer 1. Amite
2. Faire la mour 2. Argent
3. Forme 3. Creativite
4. Magrir 4. Disco
5. Mathematique 5. Leader
6. Memoire 6. Mariage
7. Mieuxcomprende 7. Menteur
8. Seduisant 8. Serietv
9. Trouverunemploi 9. Sexualite
10. Voyager 10. Stress
 
- The following were resized according to three categories :
1. 42 x 42 GIF
2. 100 x 100 GIF
3. 90 x 90 WBMP
- Altogether, there was a creation of 60 iimages for both WAP and I-MODE.
- Difficulty in editing an image up to 4 KKB (foe iMODE) was experienced, especially for the image size of 100x100. The quality of the image was often sacrificed to reach the required size. Original images� contrast, brightness and colors were adjusted a lot to reach the required size but at the same time maintain a good quality. There wasn�t any difficulty for the 42x42 GIF images.
- Difficulty in editing an image (whether from PSD, GIF or JPEG files) for WBMP was also experienced. Though Photoshop 7 provided a WBMP converter and a WMBP dither enhancer, images were hard to make look appealing. There were also a lot of color, contrast and brightness adjustments done to the original image before converting it to WBMP to reach a good �black-and-white� quality. I observed that when some parts of an original image were made darker, more black areas appear on the WBMP format. The opposite happens when some parts of an original image were made brighter. Therefore, adjustments on how many black and white areas would appear on WBMP would depend on how many darker or whiter areas there are in the original image.


May 11, 2004
- Objective was to edit images from appliccations (see Table 1) for the iMODE site. There are three screenshots for each application, which would include the homepage, the runways, the bonus page (for TNP) and the game page (for LNP). All were in GIF format with 4KB as the maximum file size.
- At first images, using the 128x 128 PSD files were resized to a 100x118 size. It resulted to images being stretched, making them look elongated, especially for the homepage. It was then decided to use the same PSD files and resize them proportionally. The result was a 100x100 image size. The result was much better, thus, the latter size was used.
- The images for the Game Page (from LNP) were adjusted so it wouldn�t look cramped.
- Completed 60 images.
- I observed that to achieve a better resuult upon resizing of images was to resize the original image proportionally.


May 12, 2004
- Objective was to resize images from Frennch IQ test from the Testez-vouz site. I was made to convert images from PNG to GIF files not exceeding 4 KB. Images came from the 'Project IQ Test Java Game Question IQ Page' and ' Project IQ Tests Java Game Question PNG Images for Series 40'. I gave the images to Lloyd.


May 13, 2004
- Objective was to create WAP / WBMP imagees for WAP. Images consist of the runway, bonus page (from TNP), game page (LNP) results page (PT), question page (from PT).
1. Arreter de fumer
2. Amite
3. Argent
4. IQ Test
5. Faire la mour
- The runway, game or results page images aren�t pleasing nor easily understandable once converted to WBMP. The following page consists only of texts. Though adjustments made on the original image were of good quality, texts gets quite deformed and achieves this skeleton look once converted to WBMP. It was then decided to not create WBMP images for runways.
- Another objective was to edit resize picctures from the �COUP DE FreeContent� to sizes 100x100 and 42x42. Maximum file size was 4KB. Accomplished 148 images.


May 14, 2004
- Upon research on the net. I stumbled upoon this site I-Questo They have this feature article titled � Creating killer graphics with Adobe Photoshop : photographic images � .
- Due to the difficulty of maintaining a qquality image with only a maximum 4 KB of file size, the feature explains necessary techniques to create crisp, colorful and well-optimized graphics to make your site look good. The techniques require Photoshop 7, and NEC H21i palette file (which can be downloaded from the net) for Photoshop. The techniques to create good iMODE graphics will be discussed further in the document.
TECHNIQUES FOR CREATION OF GOOD IMAGES

* Techniques for iMODE images
There are techniques available to create quality iMODE images. The following were based on trial and errors and articles found on the net.

Prerequisites

- Adobe Photoshop 7
- The Nec N21i palette file for Photoshop.. (You have to place this file in the folder Presets/Optimized Colors which can be found inside your Adobe Photoshop program folder.)

Step one is to go to choose File->Save for web from the in Photoshop after resizing and editing the original photo. In the right part of this dialog there is a pane called "Settings". Set the select box at the upper left of this pane to GIF.

Next thing to do is load the i-mode color palette. In the lower right part of the save for web window is the current color palette. Right from the two tabs called "Color Table" and "Image Size" is a small button with a triangular arrow in it. Click this little button and a menu will pop up. At the bottom of it is an option called Load Color Table. Select this option. A file browser will pop up. Browse to the Presets/Optimized Colors folder inside Adobe Photoshop's program folder where the i-mode color palette .act file was saved. Select the i-mode .act file and click "open". The colors in the palette will change. The image may even look different.



Techniques by changing the output settings

In the upper part of the �Save for web� window � are some interesting settings. The first box is used to choose a file format. The second is to choose a color palette. The third one has four options to choose from : (1) No dither, (2) Diffusion, (3) Pattern, (4) and Noise.

Noise Dithering
Noise dithering results in an image dithering which looks like the name already suggests: noisy.
No Dithering at all
The result will vary heavily on the color composition of the source image but sometimes this can result in a very nice looking picture. When using no dithering, Photoshop will render the image with discrete area's of one color, all within the i-mode palette. When your image contains subtle gradients this will introduce banding.
Diffusion Dithering
Diffusion dithering is the option most probably used because it tends to yield the best results on photographic images for i-mode.

Fine Tuning the Result
There are two available ways to find tune an image before saving the image. (1) Optimize the file size, and (2), Manually playing with the amount of colors.
Optimizing the File Size
There is another triangular button in the settings window of �Save for Window�. When clicking it an �Optimize for file size� window comes up. You can enter any kilobytes and click OK. Photoshop will try to reach the desired file size by reducing colors until the amount is reached. If you choose your desired size too low this might result in a very ugly or even unrecognizable image. If you choose it wisely you can end up with images that are both small in size and yet very good-looking. This would depend on the number of colors in the original image.
Manually adjusting the colors
In the setting plane is a drop-down box called �colors�. When changing it you will see the image change as well as the file size this setting would yield. An interesting option is "Auto". This will take out all unused colors in the color palette for the image. It will give you an indication of the minimum amount of colors to look as good as possible.
The amount of Dithering
When using noise dithering or diffusion dithering you can sometimes eliminate excessive speckling by slightly lowering the amount of dithering.


* Techniques for WAP images
Due to the �two-color� scheme of the WBMP format there is not much adjustments to do. There are a lot of WBMP drawing converter tools free for downloading from the net. Simple images (smilies, shapes of the likes) could be drawn and be saved as WBMP. But to convert a �photographic image� to WBMP could be complicated. Immediately converting an image (JPEG, GIF or BMP) to WBMP may result to a very �noisy� and ugly looking image. It is still better to manually edit an original image (adjust brightness, contrast and colors, dither etc.) then convert to WBMP to avail the desired result. This could be done using Photoshop 7.
- The more bright areas found in the origiinal image, the more white areas will appear in the WBMP format.
- The more darker areas found in the origiinal image, the more black areas will appear in the WBMP format.

IMAGES AVAILABLE FOR THE WAP AND IMODE PROJECT



GIF 100x100 GIF 42x42 GIF 100x100 (Homepage) GIF 100x100 (Runway) GIF 100x100 (Bonus / Game Page) WBMP 90x90
LNP            
1. Arreter de Fumer
2. Faire la mour
3. Forme
4. Maigrir
5. Mathematique
6. Memoire
7. Mieuxcomprende
8. Seduisant
9. Trouverunemploi
10. Voyager
TNP            
1. Amite
2. Argent
3. Creativite
4. Disco
5. Leader
6. Mariage
7. Menteur
8. Serietv
9. Sexualite
10. Stress
PT            
1. IQ Test (Question page)
 (Result page)
DEFINITION OF TERMS
1. Dithering
- Dithering is used in computer graphics tto create additional colors and shades from an existing palette by interspersing pixels of different colors. On a monochrome display, areas of grey are created by varying the proportion of black and white pixels. In color displays and printers, colors and textures are created by varying the proportions of existing colors. The different colors can either be distributed randomly or regularly. The higher the resolution of the display, the smoother the dithered colour will appear to the eye
SOURCES
* http://www.teraflops.com/wbmp/
* http://www.i-questo.com/portal/mod.php?mod=userpage&page_id=12
* http://www.wap-shareware.com/directory/wbmptools/wbmpcreator.shtml

ANXA HEADQUARTERS : Suite 1201 South Center Tower Madrigal Business Park
Venture Street, Alabang, Muntinlupa, Philippines
Tel/Fax : (632) 8091402 E-mail : info.anxa.com

Hosted by www.Geocities.ws

1