Multics > About
15 Jul 2024

Converting pictures for multicians.org

Tom Van Vleck

This page describes how I convert photos for display on multicians.org. General design principles are listed in Design Principles for the Multicians Website.

My goal is to provide photos that catch the eye, look as good as possible, and encourage visitors to read more. Most website visitors access the site from desktop machines; many modern ones have High DPI screens.

This note describes use of Affinity Photo 1.8.3. (Directions for Adobe Photoshop are similar, but I can't afford to rent Photoshop every year.)

  1. Find a picture to add to the site
    • Sources I use:
      • Multics PhotoCDs I scanned about 2002
      • CDs from Seattle Film Works Pictures on Disk, late 90s
      • Color prints and negatives, converted by ScanCafe.
      • Color slides.
      • Images scanned on various color scanners from positive and negative materials, some scanned by others.
      • Digital photos taken with Nikon, Canon, and Sony digital comeras.
      • Contributed photos from other Multicians.
    • Picture requirements:
      • Must have have enough pixels to make a 2x picture. (see high-dpi.html) That is, to display a picture that is 800x600 CSS pixels, want to have 1600x1200 image pixels.
        For example, for a 6x9 inch photo on-screen, I create
        2x picture: "smee-79-2x.jpg" width="1880" height="1296" (displayed in a 940x648 space)
        1x picture: "smee-79.jpg" width="940" height="648"
        thumbnail: "smee-79.jpg" width="150" height="150" (displayed in a 75x75 space)
      • If there are not enough source pixels, then do not create a -2x file.
  2. Desired output from photo conversion: a -2x file if possible, a 1x file, a thumbnail, an entry in multhumbs.sql that registers and captions the thumbnail, and a macro call that inserts the picture into a web page.
    • mulimg/picname.jpg
    • mulimg/picname-2x.jpg
    • thubnails150/picname.jpg
    • entry in multhumbs.sql:
      (163.001,'People','mac50.html','m50-fano.jpg','Prof. Robert Fano, Director [THVV]')
      the serial number should put the picture in approximate chronological order.
    • Desirable for the caption: description (people names left to right), location, date, photographer in brackets.
  3. To insert an image into a page, choose an HTMX macro that will use the -2x file if found

    Choose one of
    %[*callv,getfancybox_li,="gal1",="thumbnails150",="m50-fano.jpg",="Prof. Robert Fano, Director [THVV]"]%
    %[*callv,getimgtag,path,alttag,titletag]%
    %[*callv,getimgdiv,thumbpath,bigpath,alttag,titletag,class,caption]%
    %[*callv,getimgpopdiv,thumbpath,bigpath,alttag,titletag,class,thumbcaption,popupcaption]%

    Which macro you choose will depend on the page's HTML organization and desired user experience. The **div macros generate a DIV tag surrounding the picture reference, and can specify a CSS class to position the DIV; class rtpic causes the image to be floated to the right, and lfpic floats left. Use the getfancybox_li when creating a thumbnail gallery with the jQuery Fancybox facility.

  4. Conversion steps
    1. Open Affinity Photo
    2. File // Open and choose your picture.
    3. Choose Crop tool in left sidebar, straighten if necessary, crop.
    4. Try the Haze Removal filter. Undo if it doesn't help.
    5. In right sidebar, choose Adjustment layer Curves (or do cmd-M).
      1. If the photo was taken in fluorescent light, switch to the Green curve and push the bottom left endpoint to the right, then switch back to Master.
      2. Move the curve endpoints. Adjust individual channels if necessary. Make an S-shaped curve. Don't overtweak.
      3. click "merge".
    6. In right sidebar, choose Adjustment layer Vibrance.
      1. Try choosing Complicate
        2. .
      2. See if moving the Saturation control to the right a small amount.
      3. click "merge" if the resulting image is better.
    7. If these are old scans, try the Noise // Denoise filter. Undo it if it makes things worse.
    8. Choose Document // Resize document... and set the size of a 2x file.
      1. for a landscape picture, set HEIGHT to 1296
      2. for a portrait picture, set WIDTH to 1008
      3. set 'resample' to Bicubic. Seems like you don't need to change the DPI.
      4. click resize
      Should look pretty much the same on a high-DPI monitor.
    9. Execute the clarity/usm macro .. if it looks worse, undo it
    10. Select File // Export
      1. export as JPG
      2. set 'resample' to Bicubic
      3. set 'quality' to 100
      4. click export
      5. specify folder to save in and filename-2x.jpg
    11. Choose Document // Resize document... and set the size of a 1x file
      1. for a landscape picture, set WIDTH to 648
      2. for a portrait picture, set HEIGHT to 504
      3. set 'resample' to Bicubic
      4. check 'resample'
      5. click resize
    12. Should look a little blurrier.
    13. Execute the clarity/usm macro. Should look better. This version will be shown to low-DPI monitors.
    14. Select File // Export
      1. export should still be JPG: check it
      2. set 'resample' to Bicubic
      3. set 'quality' to 100
      4. click export
      5. specify folder to save in and filename.jpg
    15. in a command window, navigate to the directory where you saved the files
      1. execute gth2x filename-2x.jpg to create thumb2filename-2x.jpg
    16. mv thumb2filename-2x.jpg thumbnails150/filename.jpg
    17. mv filename.jpg filename-2x.jpg mulimg/
    18. edit source to insert a macro call that references the files, e.g. getfancybox_li
    19. Lather, Rinse, Repeat. Then recompile the HTMX source and check the generated page for errors.
  5. If new photos are introduced, also add rows for their thumbnails to multhumbs.sql so that multics-images.html will be updated. (Similar for adding photos to the home page sliding images: update homeslider.sql.) See Using CSS Sprites. Check that the 436 thumbnail per packed sprite limit is not exceeded.

Affinity does not work as well as Photoshop