-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Peter Hilton
committed
Sep 12, 2012
1 parent
5d27cf5
commit 4c885d0
Showing
45 changed files
with
4,796 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
--- | ||
title: How to make photograph thumbnails | ||
description: A step by step guide to creating photo thumbnails for the web. | ||
keywords: photo,photograph,thumbnails | ||
layout: hh | ||
--- | ||
|
||
<p>This page describes how to make thumbnails of photographs for use on | ||
web pages, including various tips. Many of the ideas come from Philip Greenspun's <a href="http://photo.net/wtr/thebook/images.html">Adding Image to Your Site</a>.</p> | ||
|
||
|
||
<h2>1. Copy</h2> | ||
|
||
<p><a href='photos_cafes_outside.phtml'><img src='picture/photo/netherlands/de_drie_graefjes_os.jpeg' width='198' height='136' alt='o De Drie Graefjes cafe, Amsterdam, the Netherlands' title='o De Drie Graefjes cafe, Amsterdam, the Netherlands' style='float:right'></a> | ||
<strong>Make a copy of the full-size photo, after any touch-up or | ||
processing, but before it has been sharpened - the last step.</strong> | ||
<br/>This means creating a duplicate of the original file, in your graphics | ||
program's native format.</p> | ||
|
||
|
||
<h2>2. Blur</h2> | ||
|
||
<p><strong>Apply either a <em>Remove Dust And Scratches</em> filter, with a | ||
radius of two to four pixels, or a strong blur filter.</strong> | ||
<br/>This removes any graininess or imperfections, which might introduce | ||
artifacts in the shrunk version.</p> | ||
|
||
|
||
<h2>3. Crop</h2> | ||
|
||
<p><a href='photos_cafes_outside.phtml'><img src='picture/photo/france/la_palette_s.jpeg' width='198' height='125' alt='La Palette, my favourite cafe in France - rue de Seine, 6th arr., Paris, France' title='La Palette, my favourite cafe in France - rue de Seine, 6th arr., Paris, France' style='float:right'></a> | ||
<strong>If the photo is for information, rather than merely aesthetic | ||
purposes, consider cropping the photo to enhance relevance.</strong> | ||
<br/>See <em>Relevance-Enhanced Image Reduction</em> in the | ||
<a href="http://www.useit.com/alertbox/9611.html">Marginalia of Web Design</a> Alertbox column.</p> | ||
|
||
|
||
<h2>4. Shrink</h2> | ||
|
||
<p><strong>Shrink the photo to the desired thumbnail size. If all | ||
thumbnails are to be the same size, whatever the photo's original shape, then specify the small size in one dimension so that the other is too big, and can be cropped.</strong> | ||
<br/>Most of the thumbnails on <em>Hilton Harbour</em> are shrunk to 192 by | ||
119 pixels at this stage, a good size that happens to be a good approximation of the golden rectangle.</p> | ||
|
||
|
||
<h2>5. Increase saturation</h2> | ||
|
||
<p><a href='photos_luxembourg_city.phtml'><img src='picture/photo/luxembourg/rose_garden_s.jpeg' width='198' height='125' alt='The rose garden on Avénue de la Liberté, Luxembourg' title='The rose garden on Avénue de la Liberté, Luxembourg' style='float:right'></a> | ||
<strong>Increase the saturation by ten or even twenty per cent. If there | ||
are people in the photo use a smaller value so that skin tones do not become lurid.</strong> | ||
<br/>More saturated colours help make the subject more recognisable in a small | ||
thumbnail. Also, more colourful thumbnails look better, in a way that wouldn't be the case for a large photo.</p> | ||
|
||
|
||
<h2>6. Sharpen</h2> | ||
|
||
<p><strong>Sharpen the thumbnail using <em>Unsharp Mask</em> with a radius | ||
of 0.5 pixels and a strength of 100-120 per cent. Alternatively, the Adobe <em>Sharpen</em> filter is usually about right.</strong> | ||
<br/>If anything, it is better to slightly over-sharpen thumbnails, to | ||
accentuate detail in the photo, because the artifacts of sharpening show up less on a small image.</p> | ||
|
||
|
||
<h2>7. Add a border</h2> | ||
|
||
<p><a href='photos_vienna.phtml'><img src='picture/photo/austria/vienna_kiddie_houses_s.jpeg' width='198' height='125' style='float:right'></a> | ||
<strong>Set the background colour to black and use <em>Canvas Size</em> | ||
to enlarge the picture but six pixels in both dimensions. This adds a black three-pixel border.</strong> | ||
<br/>This makes the colours stand out better and increases contrast against | ||
light web page backgrounds. The border width is a matter of taste, but I prefer 1.5 per cent on each side - the effect of enlarging the canvas to 103 per cent of its original size in both dimensions. The border should be added after sharpening, the last processing step, so that the boundary between the border and the image isn't sharpened.</p> | ||
|
||
|
||
<h2>8. Save</h2> | ||
|
||
<p><strong>Save the image in JPEG format, with a quality setting of 60-80 | ||
per cent.</strong> | ||
<br/>This should produce a file whose size is between 5 Kbytes and 9 Kbytes, | ||
which is appropriate for most web pages. It is usually necessary to use a higher quality setting for the thumbnail than for the full-size photo, because the thumbnail has more detail and more saturated colours, both of which are affected by JPEG compression.</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
--- | ||
title: Algonquin Provincial Park, Canada | ||
description: Photos from our trip with Above & Beyond Adventures, July 2001 | ||
keywords: Algonquin,moose,Desjardins,canoe,lake,camp,campfire,fire,tree,pine | ||
layout: hh | ||
--- | ||
|
||
<div class="photos"> | ||
|
||
<div style="float:left"> | ||
<p> | ||
<a href='picture/photo/canada/algonquin-start.jpeg'><img src='picture/photo/canada/algonquin-start-l.jpeg' width='198' height='125' alt='The water taxi leaves Marion, Emily, Ray and Fleur, lots of bags and two canoes in Algonquin Provincial Park, Canada' title='The water taxi leaves Marion, Emily, Ray and Fleur, lots of bags and two canoes in Algonquin Provincial Park, Canada'></a> | ||
<br><a href='picture/photo/canada/algonquin-canoe.jpeg'><img src='picture/photo/canada/algonquin-canoe-l.jpeg' width='198' height='125' alt='Algonquin Provincial Park, Canada: "Yes Marion, all the way to the other side"' title='Algonquin Provincial Park, Canada: "Yes Marion, all the way to the other side"'></a> | ||
<br><span style="height:125px"></span> | ||
<br><a href='picture/photo/canada/algonquin-campsite.jpeg'><img src='picture/photo/canada/algonquin-campsite-l.jpeg' width='198' height='125' alt='Algonquin Provincial Park, Canada: our camp site for the Above & Beyond Adventures trip' title='Algonquin Provincial Park, Canada: our camp site for the Above & Beyond Adventures trip'></a> | ||
</p> | ||
</div> | ||
|
||
<p style="text-align:right"> | ||
<a href='picture/photo/canada/algonquin-tree.jpeg'><img src='picture/photo/canada/algonquin-tree-p.jpeg' width='125' height='198' alt='Algonquin Provincial Park, Canada: a really big tree - one of the old pines' title='Algonquin Provincial Park, Canada: a really big tree - one of the old pines'></a> | ||
<a href='picture/photo/canada/algonquin-fleur.jpeg'><img src='picture/photo/canada/algonquin-fleur-p.jpeg' width='125' height='198' alt='Algonquin Provincial Park, Canada: Fleur puts our wet stuff to dry in the sun after the rain' title='Algonquin Provincial Park, Canada: Fleur puts our wet stuff to dry in the sun after the rain'></a> | ||
<a href='picture/photo/canada/algonquin-campfire-day.jpeg'><img src='picture/photo/canada/algonquin-campfire-day-p.jpeg' width='125' height='198' alt='Algonquin Provincial Park, Canada: sitting by the camp fire in the afternoon' title='Algonquin Provincial Park, Canada: sitting by the camp fire in the afternoon'></a> | ||
<a href='picture/photo/canada/algonquin-campfire-night.jpeg'><img src='picture/photo/canada/algonquin-campfire-night-p.jpeg' width='125' height='198' alt='Algonquin Provincial Park, Canada: sitting by the camp fire in the evening' title='Algonquin Provincial Park, Canada: sitting by the camp fire in the evening'></a> | ||
</p> | ||
|
||
<p style="text-align:right; margin-top:52px"> | ||
<a href='picture/photo/canada/algonquin-ray.jpeg'><img src='picture/photo/canada/algonquin-ray-l.jpeg' width='198' height='125' alt='Algonquin Provincial Park, Canada: Ray Desjardins has a rare quiet moment' title='Algonquin Provincial Park, Canada: Ray Desjardins has a rare quiet moment'></a> | ||
<a href='picture/photo/canada/algonquin-camera.jpeg'><img src='picture/photo/canada/algonquin-camera-l.jpeg' width='198' height='125' alt='Algonquin Provincial Park, Canada: Marion getting better shots than this one' title='Algonquin Provincial Park, Canada: Marion getting better shots than this one'></a> | ||
<br><a href='picture/photo/canada/algonquin-moose.jpeg'><img src='picture/photo/canada/algonquin-moose-l.jpeg' width='198' height='125' alt='Algonquin Provincial Park, Canada: Ray, Emily and Fleur find a moose' title='Algonquin Provincial Park, Canada: Ray, Emily and Fleur find a moose'></a> | ||
<a href='picture/photo/canada/algonquin-treetops.jpeg'><img src='picture/photo/canada/algonquin-treetops-l.jpeg' width='198' height='125' alt='Algonquin Provincial Park, Canada: tree tops - the view from the ground at our camp site' title='Algonquin Provincial Park, Canada: tree tops - the view from the ground at our camp site'></a> | ||
<br clear="left"> | ||
</p> | ||
|
||
</div> | ||
|
||
|
||
|
||
<p class="caption"> | ||
<strong>Camping in <a href="http://www.algonquinpark.on.ca/">Algonquin Provincial Park</a>, Canada</strong>. Marion, Fleur and I went with <a href="http://www.adventure-beyond.com/">Above & Beyond Adventures</a> and had a great time. Highly recommended.</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
--- | ||
title: Antwerp | ||
description: A few photos that I took in Antwerp, Belgium, in 1998 | ||
keywords: Antwerp,photographs,photos,photo,Lange Wapper,Antwerp Hilton,Hilton hotel,statue,toll house,tollhouse | ||
layout: hh | ||
--- | ||
|
||
<div class="photos"> | ||
|
||
<p style="text-align: center"> | ||
<a href='picture/photo/belgium/antwerp_hilton_l.jpeg'><img src='picture/photo/belgium/antwerp_hilton_ls.jpeg' width='198' height='117' alt='Antwerp: the Antwerp Hilton - no connection to Hilton Harbour whatsoever' title='Antwerp: the Antwerp Hilton - no connection to Hilton Harbour whatsoever'></a> | ||
<a href='picture/photo/belgium/cafe_hoegaarden.jpeg'><img src='picture/photo/belgium/cafe_hoegaarden_s.jpeg' width='198' height='125' alt='Cafe Hoegaarden, Antwerp, Belgium' title='Cafe Hoegaarden, Antwerp, Belgium'></a> | ||
|
||
<br/> <a href='picture/photo/belgium/antwerp_hilton_p.jpeg'><img src='picture/photo/belgium/antwerp_hilton_ps.jpeg' width='125' height='198' alt='Antwerp: the Antwerp Hilton - no connection to Hilton Harbour whatsoever' title='Antwerp: the Antwerp Hilton - no connection to Hilton Harbour whatsoever'></a> | ||
<a href='picture/photo/belgium/antwerp_statue.jpeg'><img src='picture/photo/belgium/antwerp_statue_s.jpeg' width='125' height='198' alt='Antwerp: one of the more unusual statues at the toll house by the river' title='Antwerp: one of the more unusual statues at the toll house by the river'></a> | ||
<a href='picture/photo/belgium/antwerp_statue_people.jpeg'><img src='picture/photo/belgium/antwerp_statue_people_s.jpeg' width='125' height='198' alt='Antwerp: they thought it was a game so they joined in - Marion, Mukund and Chris' title='Antwerp: they thought it was a game so they joined in - Marion, Mukund and Chris'></a> | ||
</p> | ||
|
||
</div> | ||
|
||
|
||
<p class="caption"> | ||
<strong>Out and about in Antwerp</strong>. Last time I went exploring in Antwerp we started off at the Antwerp Hilton, not because I was staying there - I'm not rich enough for that - but because it's right in the middle of town. The Antwerp Hilton is big and impressive, despite having no connection with Hilton Harbour whatsoever, and has a great location dominating the main square. After being impressed by the square, but not by its cafes, we wandered down to the river, where we found a statue that seemed to be something to point at. It's got a stupid name - <em>Lange Wapper</em> - and you can find it next to the old toll-house in the background. It was a bit of a touristy day really, and it wasn't until my next visit that I got to have a drink in <em>Cafe Hoegaarden</em>.</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
--- | ||
keywords: Logica,Global Challenge,sailing,yacht,yachting,North Sea,Scheveningen | ||
layout: hh | ||
--- | ||
|
||
<div class="photos"> | ||
|
||
<div style="float:right; width:125"> | ||
<p> | ||
<a href='picture/photo/at-sea/logica-01-faff-about.jpeg'><img src='picture/photo/at-sea/logica-01-faff-about-p.jpeg' width='125' height='198' ></a> | ||
<a href='picture/photo/at-sea/logica-04-hoist.jpeg'><img src='picture/photo/at-sea/logica-04-hoist-p.jpeg' width='125' height='198' ></a> | ||
<a href='picture/photo/at-sea/logica-08-stormy.jpeg'><img src='picture/photo/at-sea/logica-08-stormy-p.jpeg' width='125' height='198' ></a> | ||
<a href='picture/photo/at-sea/logica-10-light.jpeg'><img src='picture/photo/at-sea/logica-10-light-p.jpeg' width='125' height='198' ></a> | ||
</p> | ||
|
||
</div> | ||
|
||
<p> | ||
<a href='picture/photo/at-sea/logica-02-wave.jpeg'><img src='picture/photo/at-sea/logica-02-wave-l.jpeg' width='198' height='125' ></a> | ||
<a href='picture/photo/at-sea/logica-03-leave.jpeg'><img src='picture/photo/at-sea/logica-03-leave-l.jpeg' width='198' height='125' ></a> | ||
<a href='picture/photo/at-sea/logica-05-sunset.jpeg'><img src='picture/photo/at-sea/logica-05-sunset-l.jpeg' width='198' height='125' ></a> | ||
<a href='picture/photo/at-sea/logica-06-evening.jpeg'><img src='picture/photo/at-sea/logica-06-evening-l.jpeg' width='198' height='125' ></a> | ||
<a href='picture/photo/at-sea/logica-07-gunwale.jpeg'><img src='picture/photo/at-sea/logica-07-gunwale-l.jpeg' width='198' height='125' ></a> | ||
<a href='picture/photo/at-sea/logica-09-dark.jpeg'><img src='picture/photo/at-sea/logica-09-dark-l.jpeg' width='198' height='125' ></a> | ||
<a href='picture/photo/at-sea/logica-11-cold.jpeg'><img src='picture/photo/at-sea/logica-11-cold-l.jpeg' width='198' height='125' ></a> | ||
<a href='picture/photo/at-sea/logica-13-dawn.jpeg'><img src='picture/photo/at-sea/logica-13-dawn-l.jpeg' width='198' height='125' ></a> | ||
<a href='picture/photo/at-sea/logica-15-land.jpeg'><img src='picture/photo/at-sea/logica-15-land-l.jpeg' width='198' height='125' ></a> | ||
<a href='picture/photo/at-sea/logica-16-ramsgate.jpeg'><img src='picture/photo/at-sea/logica-16-ramsgate-w.jpeg' width='364' height='125' ></a> | ||
</p> | ||
|
||
</div> | ||
|
||
<p class="caption"><?php echo $description ?></p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
--- | ||
title: Budapest | ||
description: Photographs of Budapest | ||
keywords: photographs,photos,photo,Budapest | ||
layout: hh | ||
--- | ||
|
||
|
||
<div class="photos"> | ||
|
||
<p class="caption"> | ||
<a href='picture/photo/hungary/budapest_square.jpeg'><img src='picture/photo/hungary/budapest_square_s.jpeg' width='125' height='198' alt='Budapest: many smart squares in the city centre' title='Budapest: many smart squares in the city centre'></a> | ||
<br/> <a href='picture/photo/hungary/budapest_contrast.jpeg'><img src='picture/photo/hungary/budapest_contrast_s.jpeg' width='125' height='198' alt='Budapest: full of stark contrasts between the grand and the grotty' title='Budapest: full of stark contrasts between the grand and the grotty'></a><?php Thumbnail ('budapest_cafe_i', 'top', 'big'); ?> | ||
<br/> <a href='picture/photo/hungary/budapest_station.jpeg'><img src='picture/photo/hungary/budapest_station_s.jpeg' width='198' height='125' alt='Budapest: the railway station was a very grand start to the day' title='Budapest: the railway station was a very grand start to the day'></a><?php Thumbnail ('budapest_old_building', 'bottom', 'big'); ?> | ||
<br/> <a href='picture/photo/hungary/budapest_stereo.jpeg'><img src='picture/photo/hungary/budapest_stereo_s.jpeg' width='198' height='125' alt='Budapest: a stereo photo of the parliament building' title='Budapest: a stereo photo of the parliament building'></a><?php Thumbnail ('budapest_arches', 'bottom', 'big'); ?> | ||
<a href="budapest.html">Budapest</a></p> | ||
</p> | ||
|
||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
--- | ||
title: Cafes On The Inside | ||
description: Photographs of the interiors of a few cafes | ||
keywords: photographs,photos,photo,cafes | ||
layout: hh | ||
--- | ||
|
||
<div class="photos"> | ||
|
||
<p style="text-align: left"> | ||
<a href='picture/photo/netherlands/de_drie_graefjes_i.jpeg'><img src='picture/photo/netherlands/de_drie_graefjes_is.jpeg' width='141' height='198' alt='upstairs, i De Drie Graefjes cafe, Amsterdam, the Netherlands' title='upstairs, i De Drie Graefjes cafe, Amsterdam, the Netherlands'></a> | ||
<a href='picture/photo/england/disco_biscuit_marion.jpeg'><img src='picture/photo/england/disco_biscuit_marion_s.jpeg' width='125' height='198' alt='Marion and a sofa in Disco Biscuit, Queens Road, Brighton, England' title='Marion and a sofa in Disco Biscuit, Queens Road, Brighton, England'></a> | ||
<a href='picture/photo/england/disco_biscuit_upstairs.jpeg'><img src='picture/photo/england/disco_biscuit_upstairs_s.jpeg' width='180' height='198' alt='sofas upstairs in Disco Biscuit, Queens Road, Brighton, England' title='sofas upstairs in Disco Biscuit, Queens Road, Brighton, England'></a> | ||
<a href='picture/photo/hungary/budapest_cafe_i.jpeg'><img src='picture/photo/hungary/budapest_cafe_is.jpeg' width='125' height='198' alt='The big posh cafe I went to in Budapest has leather sofas i.' title='The big posh cafe I went to in Budapest has leather sofas i.'></a> | ||
|
||
<br/> <a href='picture/photo/austria/vienna_sperl_i.jpeg'><img src='picture/photo/austria/vienna_sperl_is.jpeg' width='125' height='198' alt='the dark, welcoming interior of Cafe Sperl, Vienna' title='the dark, welcoming interior of Cafe Sperl, Vienna'></a> | ||
<a href='picture/photo/luxembourg/sul_palco_upstairs.jpeg'><img src='picture/photo/luxembourg/sul_palco_upstairs_s.jpeg' width='125' height='198' alt='Takeshi and Nasera modelling the armchairs upstairs in cafe Sul Palco, Luxembourg' title='Takeshi and Nasera modelling the armchairs upstairs in cafe Sul Palco, Luxembourg'></a> | ||
|
||
<br/> <a href='picture/photo/england/cb1.jpeg'><img src='picture/photo/england/cb1_s.jpeg' width='294' height='132' alt='my favourite cafe with books - CB1, Cambridge, England' title='my favourite cafe with books - CB1, Cambridge, England'></a> | ||
<a href='picture/photo/luxembourg/peche_mignon_i.jpeg'><img src='picture/photo/luxembourg/peche_mignon_is.jpeg' width='200' height='133' alt='i Péché Mignon cafe, rue de St Esprit, Luxembourg' title='i Péché Mignon cafe, rue de St Esprit, Luxembourg'></a> | ||
<a href='picture/photo/austria/vienna-aera.jpeg'><img src='picture/photo/austria/vienna-aera-l.jpeg' width='216' height='125' alt='Vienna: inside Cafe Aera, my favourite of the more modern cafes' title='Vienna: inside Cafe Aera, my favourite of the more modern cafes'></a> | ||
<a href='picture/photo/austria/vienna_globe.jpeg'><img src='picture/photo/austria/vienna_globe_s.jpeg' width='198' height='125' ></a> | ||
<a href='picture/photo/england/cambridge_cb2_daniel.jpeg'><img src='picture/photo/england/cambridge_cb2_daniel_s.jpeg' width='198' height='125' alt='Cambridge: Daniel Sturdy in CB2' title='Cambridge: Daniel Sturdy in CB2'></a> | ||
|
||
</p> | ||
|
||
</div> | ||
|
||
<p class="caption"> | ||
<strong>What cafes look like on the inside</strong> - they're real and they're not on <a href="http://www.whitedot.org/">television</a>. If you only ever sit at home and watch television, you won't know about cool places like these - you should get out more. Left-right, top-bottom: | ||
<em>De Drie Graefjes</em>, Amsterdam; | ||
<em>Disco Biscuit</em>, Brighton (two photos); | ||
a big posh place, Budapest; | ||
<em>Cafe Sperl</em>, Vienna; | ||
<em>Sul Palco</em>, Luxembourg; | ||
<em>CB1</em>, <a href="cambridge_cafes.html">Cambridge</a>; | ||
<em>Péché Mignon</em>, <a href="international_assignment.html">Luxembourg</a>; | ||
<em>Cafe Aera</em>, Vienna; | ||
<em>Vienna Globe</em>, Vienna; | ||
<em>CB2</em>, Cambridge.</p> |
Oops, something went wrong.