Previous Tip  |  Next Tip  |  Design Tips   | [Bill's Home]

From Photograph to a Pocket PC page

I got an email from a Design student the other day and I remembered that the main objective of these pages was to produce design pages which did not actually talk too much about the actual technological implementation. Recent, though, I've been talking about implementations in Macromedia Flash and Director (yuk!), so I've decided to go back to fundamentals for this design page. An important tool in design is a camera, as you can get your images exactly as you want them, and they are copyright free.

As I've said in the last few pages, I'm hooked on designing for mobile devices. Thus let's look at creating a movie which sits within a PDA. First in Figure 1 we take a picture of the PDA. I've taken the photograph on a white background, as this makes it easier to get rid of the background. Next, in Figure 2, I've taken away the background with the magic wand, and I've also cut out the central display. Next I've cut out the four main elements for the graphic:

 

 

Figure 1: Photograph of my Pocket PC

Figure 2: Surounding parts of the graphic, and within the graphic, are cut away.

 

Next the elements of the graphic are spliced using the slice tool, such as:

... and we export these to HTML. The elements can then be added to an HTML table to give (I've kept the borders on the table so that you can see the structure of the table):

This is an example page. This is an example page.

Thus we now have a PDA from a simple photograph. For example we could lay it out as follows:

CNDS page
This Pocket PC site for the CNDS module. The main site is also available [CNDS site].

[Design Tips]

 

 


 


and:

[Link]

and:

[Link]

and:

[Link]

and:

 

 

If I've got some time. I'll try and show how you can create a frame which allows the text element to scroll, as a Pocket PC would.