Purpose: To familiarize you with...

• PhotoShop - useful for generating and augmenting maps and visualizations.
• Image File Structure - which will be similar to many map, image and data file formats.
• Text & Binary Editing - so that you can manipulate files and images with confidence.
• The aesthetics of visual presentation - try to make your page look good (more on this later).

Go to An Atlas of Cyberspaces
http://www.cybergeography.org/atlas/atlas.html

• Pick any colorful map
  • Right click on the image. Click on "save as" and save the image.
• Open Adobe PhotoShop - Copy that map, reduce it to a reasonable size
  • if it is a .gif convert it to |Image|mode|RGB| and save it as "map.jpg"
  • Crop it to a 6x6 pixel space that is colorful and distinctive. Save it as "6by6.jpg"
  • Enlarge this small image click |Image|Image Size| (pick 100x100 pixels and pick" nearest neighbor") and save it as "100.jpg"
• While still in Adobe PhotoShop
  • click |File|Open| and browse to the file "6by6.jpg" that you previously saved
  • click |File|Save As| filename = "6x6.bmp" save_as "6by6".bmp
• Open SynEdit (in the course folder)
  • click |File|Open in HEX editor| and browse to the file "6by6.bmp"
  • click |View|Column Width|One Byte per Column|
  • click |View|Offset Display|Decimal|
  • click |View|Line Size|16 bytes per line|
• Capture the screen to the clipboard by holding down |ALT| and pressing |Print Scrn|
• Go back to PhotoShop. Click on |File|New| and accept the defaults.
  • Select |Edit|Paste|. This should paste an image of the SynEdit page in PhotoShop.
  • Crop the image. Click on |Layer|Flatten Image|. Save this as "hexcode.jpg"
• Look up the file format for a color .bmp image.
• In PhotoShop, annotate the "hexcode.jpg" hexcode of the file structure showing how it relates to the image
  • Identify from 3 to 5 pixels in the file and their renderings in the image. Convert them from hex BGR to decimal RGB and show which colored pixels they specify. (|Start|Programs|Accessories|Calculator and |View|Scientific| will allow you to convert from HEX to DECIMAL. There is also a chart on the web.
  • Identify from 3 to 5 parts of the header and interpret them in relation to the image.
  • You may wish to place the image on a larger canvas for more annotations (click |Image|Canvas Size| and define an area 2 to 3 times as large). You can then annotate and cut and paste other images alongside the hexcode image.
• Put all the above images on one webpage (use the .jpg images on the web - the .bmp will not render in the browsers), with a brief explanatory text. Place the pictures and text aesthetically, as though you were to use it to explain that graphics file format.

The entire image, reduced to fit on the screen

The six-by-six pixel segment you chose, shown actual size

The six-by-six pixel segment blown up to 100 by 100 pixels

One way you could annotate the hexcode.jpg image:

Another way you could annotate the hexcode.jpg image:

Microsoft Windows Device Independent Bitmap - format details... (will be handed out in lab on friday)
http://www.sscnet.ucla.edu/geog/gessler/bmpformat.htm

Wotsit's Format - The programmer's resource.
http://www.wotsit.org/

ASCII Chart and other resources.
http://www.jimprice.com/jim-asc.htm