How to make *bits* of images clickable

I’ve always wondered how to do this! Finally!

It’s mundanely straightforward to hyperlink an image so that clicking anywhere on that image will open a link. This is often used with a thumbnail image of a document; clicking it downloads the full document, for example, or on sites like Amazon etc where you click on a book cover to find out more about the item on sale. Pretty much a one-image, one-link arrangement.

But having different areas of the same image point to different links has eluded me, until now. It’s the AREA attribute in HTML that will do it, example below.

A year or two ago there was a paid-for app that let you generate multiple clickable areas in a single image, I’ve also seen discussions about needing to use something fairly complex like Photoshop to create some sort of ‘net’ over an image, onto which links could later be applied. Other places do it with CSS which isn’t complicated but I think you can’t do it on free WordPress dot com blogs (or it conflicts with the presets). I’ve been too easily discouraged 😉

Area attributes in HTML let you create clickable areas within an image!

The only thing you can click on in the image below is the big red flag. Click on it to find out about the AREA COORDS attribute on W3Schools site 🙂

Workplace

Picture credit:
ship’s bunting image by Kasya from Pixabay.

flag

This way is free and technically quite easy. I think the hardest thing will be getting my head around the coords (coordinates) attribute. For starters 0,0 refers to the top left not the bottom left as in a maths graph (I’m grateful to my boss for teaching me how to make .svg images which helped me discover this concept, and almost make sense of it). So for a RECT (rectangle) you just input the top left (x,y) and bottom right corner (x,y) coordinates of a rectangle and it fills in the rest. It had never occurred to me that you need only two coordinates to describe a rectangle – I can see that it’s perfectly obvious why, I just never had cause to consider it before.

For a circle you give the x and y coordinate of the centre of the cirlce, then its radius (this is all explained in the W3Schools page linked above and also here.

You need to pay attention to how big your image is – if its width is 600 and you want to create a shape starting halfway along but touching the top of the image then its x,y coordinates would be 300,0 (300 along from the top left, or halfway, then 0 down from the top).

For the red flag in the image above I fiddled about a bit with it and went with went with 150,0,250,80. It’s not perfect but I feel like I’m flying blind somewhat. With a bit more work I could probably make it match better, and with even more effort I could probably generate a much more accurate polygon shape to match it more closely, but you get the idea – and it works. It probably doesn’t help that I don’t have much of a sense of direction and feel that I’m doing this ‘backwards’ though!

While I could create additional shapes and links on the above-image I’m starting small and am delighted with this evening’s tinkerings and lucubrations. I just hope it works when I press ‘Publish…’. (It worked in Preview!).

Here’s a Word label template for printing an 8 page ‘zine’ from one A4 sheet

tl;dr These dimensions will create an 8 page A4 zine using Word labels via the Mailing tab which you can then lay out online and print.

A4 label zine dimensions.pngThis will produce something like the below (with narrower gaps between each ‘label’ but shown here for clarity).

Zine layout showing 8 leaves.png

1. Zine-making old school

Take an A4 sheet of paper and fold in half in both directions (‘hotdog’, lengthways [long edge to long edge] and ‘hamburger’ widthways [short edge to short edge]) and re-open, bending the folds backwards and creasing them. Then fold each short edge to the middle and eventually you have a piece of paper with 8 segments as ‘pages’.

Have a look at https://zineopolis.blogspot.com/p/h.html to see how the finished zine will be when cut and folded then write and draw whatever you want on the pages, bearing in mind the page number order and direction of text. Fold ‘hamburger’-ily again and cut the middle bit leaving a neat tear, then assemble as in the info in the link.

You can scale up by drawing or gluing things to a master and then photocopy it.

2. Zine-making new school – slightly techier version

Create a Word template using Labels so that you can create a printable zine with whatever elements you want to include. You can then photocopy multiples and distribute. I’m making a mini zine for an event at work so I wanted something with our logos on, and for it to be slightly more tidy-looking than something I’d hand draw.

  1. Open Word
  2. Mailings tab
  3. Start Mail Merge > Labels
  4. New Label…
  5. Below the picture, in ‘Label name’ give it a name
  6. At the bottom of the box, in ‘Page size’ change it to A4 Landscape (29.7 x 21cm)
  7. Enter the figures as shown below, then press OK
  8. If you want to restart at any point and adjust the layout repeat steps 1-3 then scroll upwards to find your custom label name, highlight it then click on Details… changing anything and pressing OK will wipe what you’re doing so you may want to save a copy first. Recommend writing down any number changes you make!

Label dimensions for creating an 8 page A4 zine.png

Top margin: 0.03″
Side margin: 0.03″
Vertical pitch: 4.11″
Horizontal pitch: 2.91″

Label height: 4.06″
Label width: 2.86″
Number across: 4
Number down: 2

Make sure you have the right page size & that it’s landscape!

 

 

 

Note that the vertical pitch “is defined as the measurement from the top of the first label to the top of the label below it. The horizontal pitch is defined as the measurement from the left edge of the first label to the left edge of the label next to it.” Source.

Once you’ve pressed OK you’ll see a largely blank page with <<next label>> written several times but to see where the labels begin and end more clearly click on the Table Design tab that now appears and then click any of the grid options to see the lines.

Highlighting the limits of the labels.png
At top left is the newly created sheet of labels, on the right is a version with gridlines and shading to show more clearly where the labels are, using the Table Design tool that now appears in the menu. Remove shading and borders before printing using Borders tool on the right.

I’d previously created an entire ‘zine’ in PowerPoint which is my software of choice for laying out any text and images (eg for flyers) but I couldn’t get it to print correctly.  I also tried with Scribus, which is open source desktop publishing and layout software, but while it (and PowerPoint) looked great on the screen I couldn’t get the thing to print without introducing further margins. Remembering I’d recently vanquished Mail Merge and label printing I wondered if I could use that to override the margins with a custom ‘label’ – yep, Word worked.

3. Laying out the zine in Word (using PowerPoint!)

It was quite handy that I already had a pret-a-zine, as a .pptx, as it made it much quicker to re-create the zine in Word by selecting multiple items on each ‘page’, copying, then pasting into the Word zine, then moving into the relevant segment and neatening up. In fact I might actually recommend doing this step beforehand [download Basic powerpoint zine layout] because PPoint is more obedient in terms of letting you move images wherever you want them, it’s a bit more of a fight in Word. To control the position of images in Word I used the Picture Format > Wrap Text: In Front of Text which got them to behave. There’s probably a better way but this worked fine.

I was absolutely delighted, on printing and folding the Word label version, that it worked perfectly.

Zine layout on PowerPoint.png
Zine layout in PowerPoint – worked for laying out, not for printing (for me anyway)

4. A note on the calculations for pedants and enthusiasts – worked example

An A4 sheet is 11.69 x 8.27 inches, 29.7cm x 21cm (297mm x 210mm) or 842 x 545 pts in Post Script.

The figures above worked perfectly for me and my printer. Technically I made a very slight error in my calculation as I’d intended that all margins and space ‘units’ between each ‘label’ would be 0.05, meaning that I’d have 5 units horizontally (left and right margins + 3 spaces between four labels / columns) and 3 units vertically (top and bottom margins + 1 space betwen the two rows).

To get the ballpark figures for the dimensions I divided the long edge (width) by 4 and the short edge (height) by 2 to make 8 labels – 11.69/4 = 2.92 inches and 8.27/2 = 4.135 inches.

To work out the available width minus the margins and spaces I subtracted 5 x 0.05 (0.25) from 11.69 getting 11.44 inches, and for the height: 3 x 0.05 (0.15) from 8.27 getting 8.12 inches.

I then divided the width into 4 (11.44/4 = 2.86), and height into 2 (8.12/2 = 4.06).

So 2.86 inches is the width of one label. The pitch (width plus one space) is 2.86+0.05 = 2.91 inches.

Similarly 4.06 is the height of one label and the pitch is 4.06+0.05 = 4.11.

The two margins had been 0.05 but it didn’t work until I shaved a bit off and made them 0.03! The yellow dots in the picture below denote 0.05 but in the end the outer ones (red and orange) became 0.03″ to make it fit 😉

Zine dimensions as applied to the Word label .png

Basic photo watermarking on an iPhone

If you happen to take images of ‘stuff happening’ that might be newsworthy and that you want to share but not have mis-used there are apps that let you add a watermarks. I presume these watermarks can also be removed later, presumably by you (but perhaps by newspapers) so I might suggest screenshotting the image first and sharing that instead. Screenshotting also means minimal EXIF data. But you can do it without apps too and just draw your initials on the picture and only remove them when you send (by DM) a copy of the image to media sites you want to [though this won’t stop someone from passing it on I suppose…].

For iPhone users you can draw on any picture in the Camera roll –

  1. Make a duplicate copy of the photo first (to keep the original safe)
  2. Draw your watermark on the copy
  3. Screenshot the watermarked copy and share that (watermark possibly harder to remove because it’s no longer layered on top of the image, and EXIF data is hidden)
  4. Resizing the image if necessary

1. Duplicate the original

Have the photo open, click the upload icon (the one on the left in the all-blue icons picture below), then choose Duplicate which is the middle grey icon in the second image below. Note that you may have to scroll right to find this option.

1A

Screenshot 2019-08-17 20.32.58
Pic 1. It’s the one with the arrow bursting out of an empty box, on the left

1B

Screenshot 2019-08-17 20.34.21
Pic 2. Duplicate icon is a grey rectangle with a white + & a single grey rectangle behind.

Once you’ve created your duplicate open that one (you can slide back and forth between the two copies).

2. Draw your watermark

Click on the Edit option (on the right in the pic below), then choose the three overflow dots in a circle (•••), then click Markup.

2A
Screenshot 2019-08-17 20.38.56

2B
Screenshot 2019-08-17 20.40.34

2C
Screenshot 2019-08-17 20.41.44

You’ll have the option of various pen thicknesses, and colours to choose from. To select the colours click on the (()) symbol…

2D                         and                  2E
Screenshot 2019-08-17 20.56.45   Screenshot 2019-08-17 20.58.11

…or you can add text by clicking on the (+) at the end (in pic above).

2F
Screenshot 2019-08-17 20.55.56

Once you’ve added whatever watermark format you’ve chosen and clicked DONE twice (once in blue at the top right of the photo, and once in yellow at the bottom right) you’ve completed the ‘add watermark’ to your duplicate image bit of the process.

2G

IMG_1595.jpg
“Watermarked” image.

3. Screenshot it

Click on the image to remove the white borders (the bits saying the current date / time, battery info or whatever’s currently on your phone) and to see the image just on its own – usually with a black border at top and bottom. The two images in 3A below are identical, the only difference is the white or black border – this is a toggle-click, where clicking once hides the phone info and clicking again brings it back, and so on.

3A

Press the ON/OFF button and HOME button simultaneously (iPhone) to make a screenshot which is saved to your cameraroll. (You can do the white-border one too of course but may need to do an extra step of pruning out the additional info)

This is the image that you should share.

4. Resizing / removing the white or black borders

If you want to prune out the borders outside the relevant image, or only want to share a particular portion of the image then use the cropping tool to do this.

Click the image again to bring up the white borders which shows the options. Click Edit (see 2A), then the white square tool from 2B which will go white as shown at the bottom of the three images in the panel below.

Screenshot 2019-08-17 23.07.41.png

Left: the square button brings up the resizing boundary – you can use the corners or sides to shrink the picture. Middle – I’ve taken most of the top black border off and the resulting image now takes up more space on the screen. Right – I’ve pruned out all of the unnecessary bits. The next thing I click on is Done (in yellow, bottom right of each pic).

 

How to tweak (digitise) drawings in Inkscape

I’ve been playing with Inkscape, a free open-source image processing tool. For a project I need to draw some cartoonish images and clean them up and I’m learning how to do that thanks to YouTube and Inkscape’s own tutorials.

Note: If you’re using Inkscape on a Mac you may also need to download XQuartz; note that you use the Ctrl key not the Command key in Inkscape. Similar software is Gimp (free) and Adobe Photoshop (not free). I’m also teaching myself to use Scribus, a layout tool, but I mostly use PowerPoint for that at the moment.

Here’s a drawing of a house (biro on white paper) photographed by my iPhone and emailed to myself. Scanning it in would give a much better starting image to work with and drawing it more neatly etc etc but I’m just playing for now.

Screenshot 2019-04-16 17.32.56

Imported into Inkscape by File > Import and OK-ing whatever suggestion it gives

Screenshot 2019-04-16 17.33.21

Once imported ensure it’s selected (click on it if not) and that the arrows are double-headed, then choose Path > Trace Bitmap

Screenshot 2019-04-16 17.35.34

Fiddling about with the settings … (use Update to see how it’s going before using OK to apply)…

Screenshot 2019-04-16 18.17.22

…produces a layer which can be moved away from the main image, resulting in a separate clean black and white image.

 

The resulting image…

Screenshot 2019-04-16 17.38.13

Further tweaking can be done by using the node tool (looks a bit like an archer’s bow between the pointer icon and wave (?) icon in the panel on the left below) and moving the lines about but I’ve not bothered with that for now.

Screenshot 2019-04-16 17.39.42

OK I had a bit of a play around with it. Stretched the E.  (Eeeeee !)

Screenshot 2019-04-16 18.22.58         Screenshot 2019-04-16 18.23.11       Screenshot 2019-04-16 18.23.18

Things I’ve learned after a few hours’ play

I have not been saving images as .svg files (which is, I think, what I am supposed to do) and am. just cheating, copying a screenshot and pasting into my .pptx presentation. I’ve noticed that enlarging the image once in the PowerPoint neans that it looks a bit grainy so I recommend enlarging it in Inkscape by zooming in, taking a screenshot of that and then it will look better.

I’ve also had some fun with the ‘bucket’ tool which fills an area with colour. Also the resizing tool (hold the Ctrl key [Mac users you too, not Command] to enlarge or shrink while keeping the same aspect ratio.

Screenshot 2019-04-19 13.18.52.png