18 Nov 2020

Converting pictures for

History | People | Library | Sites | About Search

Tom Van Vleck

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

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.
      • 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"
        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, 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]"]%

  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. Try the Noise // Denoise filter. Undo it if it makes things worse.
    7. 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
      4. check 'resample'
      5. click resize
      Should look pretty much the same, maybe a little blurrier.
    8. Execute the clarity/usm macro .. if it looks ugly, undo it
    9. Select File // Export
      1. set 'resample' to Bicubic
      2. set 'quality' to 100
      3. click export
      4. specify folder to save in and filename-2x.jpg
    10. 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
    11. Should look a little blurrier.
    12. Execute the clarity/usm macro
    13. Select File // Export
      1. set 'resample' to Bicubic
      2. set 'quality' to 100
      3. click export
      4. specify folder to save in and filename.jpg
    14. in a command window, navigate to the directory where you saved the files
      1. execute gth2x filename-2x.jpg to create thumb2filename-2x.jpg
    15. mv thumb2filename-2x.jpg thumbnails150/filename.jpg
    16. mv filename.jpg filename-2x.jpg mulimg/
    17. edit source to insert a macro call that references the files, e.g. getfancybox_li
    18. Lather, Rinse, Repeat. Then recompile the HTMX source and check the generated page for errors.
  5. If new photos are introduced, also add their thumbnails to multhumbs.sql so that multics-images.html will be updated.

Affinity does not work as well as Photoshop.