kipling
Version:
HTML Presentation
591 lines (503 loc) • 18.1 kB
HTML
<html class="presentation">
<head>
<meta charset=utf-8 />
<title>Aspects of Image Critique</title>
<style type="text/css">
.hidden {
display: none;
}
</style>
<script src="./jquery.min.js"></script>
<script type="text/javascript">
$('html').addClass('hidden');
</script>
<script src="./baguetteBox.js"></script>
<link href="./normalize.css" rel="stylesheet">
<link href="./page.css" rel="stylesheet">
<link href="./kipling.css" rel="stylesheet">
<link href="./document.css" rel="stylesheet">
<link rel="stylesheet" href="./baguetteBox.css" />
<link href="./fontawesome/css/fontawesome-all.css" rel="stylesheet">
<link rel="stylesheet" href="./offside.css">
<script src="./offside.js"></script>
</head>
<body class="vbox viewport">
<header></header>
<div class="main hbox space-between">
<nav></nav>
<article class="quote" id="waiting">
<div class="spinner"></div>
<h3>Page up
<i class="fas fa-arrow-circle-up"></i> - Page down
<i class="fas fa-arrow-circle-down"></i>
</h3>
<div id="selection" class="center">
<button id="document" class="primary">View as a document</button>
</div>
</article>
</article>
<!-- ========================================================================== -->
<article class="title">
<h1>Aspects of Image Critique</h1>
<h2>A personal perspective</h2>
<div class="row">
<div class="column">
<img class="center" src="./imgs/bookshelf.jpg" />
</div>
</div>
</article>
<article class="quote">
<div class="quote">
<div class="text">
<p>I KEEP six honest serving-men (They taught me all I knew);</p>
<p>Their names are
<span class="what">What</span> and
<span class="why">Why</span> and When And
<span class="how">How</span> and Where and Who.
</p>
</div>
<div class="source">
<p>Rudyard Kippling</p>
</div>
</div>
<div class="notes">
A very valuable phrasing to remember the important questions; in this discussion the most important ones are the
<b>What</b>,
<b>Why</b> and the
<b>How</b>.
<p>
A good reference on the background to to Kipling's poem is
<a href="http://standrewslean.com/blog/six-honest-serving-men/">here</a>
</p>
</div>
</article>
<!-- ========================================================================== -->
<article class="reveal">
<h2>
<span class="what">What</span> are we covering?</h2>
<ul>
<li class="reveal">Composition</li>
<li class="reveal">Critiqing tips</li>
<li class="reveal">On judges and judging</li>
<li class="reveal">Why?</li>
</ul>
<div class="notes">
<p>
Firtly we'll review a definition of composition, and look at the elements involved within that; then moving on to what I've
found to be central 'themes' to doing good critique. This will not include an depth discussion of all the theory
of composition, or aesthics, or colour theory... there are many references for that.
</p>
<p>
As this is centred around a camera club, the subject of competitions and judging will come up.
</p>
<p>
One of the most important aspects that I feel is ignored - is they
<b>Why?</b>.
</p>
</div>
</article>
<!-- Composition section-->
<article class="title">
<h1>Composition, Rules and Approach</h1>
<div class="row">
<div class="column">
<img class="center" src="./imgs/composition-header.jpg" />
</div>
</div>
</article>
<article class="reveal">
<h2>Composition is the act of .. </h2>
<ul>
<li class="reveal">.. how to choose what to include in viewfinder.</li>
<li class="reveal">.. how to pick settings on the camera</li>
<li class="reveal">.. how to adjust the images on your computer or in the darkroom</li>
<li class="reveal">.. how to control the world before the camera</li>
</ul>
<p class="notes">
Composition, the act of chosing how to include elements to make an image. What to leave in and what to leave out. There are
lots of definitions of the rules, and considerable body of opinion as to break the rules. A good introduction is
https://photographylife.com/what-is-composition-in-photography
</p>
</article>
<article>
<h2>Rules to make the choices!</h2>
<img src="imgs/20130709-0044.jpg" class="right"></img>
<p class="notes">
When a rule works it works - yippee; but it can be then be 'forumalic'. Breaking a rule it won't make the image; but it can
be an 'edge'. But maybe you want forumalic, because you are making a statement?
</p>
</article>
<article class="quote">
<div class="quote">
<div class="text">
<p>"Consulting the rules of composition before taking a photograph is like consulting the laws of gravity before taking
a walk."</p>
</div>
<div class="source">
<p>Edward Weston</p>
</div>
</div>
<div class="notes">
So after coming back from the walk and having managed to go somewhere, and tripped over a loose paving slab, gravity can
explain what happened and why. But it is worth knowing the basics - i.e. you can't fly. So you can use the 'rules
of composition' to help review the images, and use them as a framework by which to discuss the image. So rather than
guidelines to use when putting the image together they can also be at their most powerful when determining "why an
image works" and "why an image doesn't work"
https://en.wikipedia.org/wiki/Edward_Weston
</div>
</article>
<!-- ========================================================================== -->
<article class="title">
<h1>On judging and judges </h1>
<div class="row">
<div class="column">
<img class="center" src="./imgs/think-header.jpg" />
</div>
</div>
</article>
<article class="reveal solo">
<h2>Aspects that should be covered</h2>
<ul>
<li class="reveal">
<p>
<b>Technical Aspects</b>
</p>
<p>
Has the craft been mastered and used with effect?
</p>
</li>
<li class="reveal">
<p>
<b>Compositional rules</b>
</p>
<p>How are they working in this image?</p>
</li>
<li class="reveal">
<p>
<b>Alternate approaches</b>
</p>
<p>What could have been tried instead</p>
</li>
<li class="reveal">
<p>
<b>Emotional connection</b>
</p>
<p>is this making a connection to me</p>
</li>
</ul>
</article>
<article class="quote">
<div class="quote">
<div class="text">
<p>"Criticism, like rain, should be gentle enough to nourish a man's growth without destroying his roots."</p>
</div>
<div class="source">
<p>Frank A. Clark</p>
</div>
</div>
<div class="notes">
https://en.wikipedia.org/wiki/Frank_Clark_(politician)
</div>
</article>
<!-- ========================================================================== -->
<article class="reveal">
<h2>Big Hero Six</h2>
<div class="row">
<div class="column">
<ul>
<li class="reveal">
<p>Eye</p>
</li>
<li class="reveal">
<p>Edges</p>
</li>
<li class="reveal">
<p>Everything counts</p>
</li>
</ul>
</div>
<div class="column">
<ul>
<li class="reveal">
<p>Ego
</p>
</li>
<li class="reveal">
<p>Emotion
</p>
</li>
<li class="reveal">
<p>Explore and Practice and Practise
</p>
</li>
</ul>
</div>
</article>
<article class="quote">
<div class="quote">
<div class="text">
<p>"It may be a good thing to copy reality; but to invent reality is much better."</p>
</div>
<div class="source">
<p>Giuseppe Verdi</p>
</div>
</div>
<p class="notes">
Camera never lies; it merely presents it's own view of reality.
https://en.wikipedia.org/wiki/Giuseppe_Verdi
</p>
</article>
<!-- ========================================================================== -->
<!-- Art and the why -->
<article class="reveal">
<h2>Why are you taking images?</h2>
<ul>
<li class="reveal">Do you want to make a point?</li>
<li class="reveal">Do you want to record history?</li>
<li class="reveal">Do you want to communicate something?</li>
<li class="reveal">Do you want to have fun?</li>
</ul>
</article>
<article class="quote">
<div class="quote">
<div class="text">
<p>"A work of art that did not begin in emotion is not art"</p>
</div>
<div class="source">
<p>Paul Cezanne</p>
</div>
</div>
<div class="notes">
https://en.wikipedia.org/wiki/Paul_C%C3%A9zanne
</div>
</article>
<!-- interval -->
<article class="gallery">
<div class="row center">
<div class="column center">
<a href="./imgs/harbour.jpg">
<img class="center" src="./imgs/harbour.jpg"></img>
</a>
</div>
<div class="column center">
<a href="./imgs/pier.jpg">
<img class="center" src="./imgs/pier.jpg"></img>
</a>
</div>
<div class="column center">
<a href="./imgs/Thoughtfull.jpg">
<img class="center" src="./imgs/Thoughtfull.jpg"></img>
</a>
</div>
</div>
<div class="row center">
<div class="column center">
<a href="./imgs/me-thasnotmoon.jpg">
<img class="center" src="./imgs/me-thasnotmoon.jpg"></img>
</a>
</div>
<div class="column center">
<a href="./imgs/20170806-0115.jpg">
<img class="center" src="./imgs/20170806-0115.jpg"></img>
</a>
</div>
<div class="column center">
<a href="./imgs/IMG_20170421_150649108-01.jpeg">
<img class="center" src="./imgs/IMG_20170421_150649108-01.jpeg"></img>
</a>
</div>
</div>
<div class="row center">
<div class="column center">
<a href="./imgs/20130709-0044.jpg">
<img class="center" src="./imgs/20130709-0044.jpg"></img>
</a>
</div>
<div class="column center">
<a href="./imgs/IMG_20170628_093704238-01.jpg">
<img class="center" src="./imgs/IMG_20170628_093704238-01.jpg"></img>
</a>
</div>
<div class="column center">
<a href="./imgs/IMG_20170811_121935132-01.jpg">
<img class="center" src="./imgs/IMG_20170811_121935132-01.jpg"></img>
</a>
</div>
</div>
<div class="row center">
<div class="column center">
<a href="./imgs/20090918_1144p.jpg">
<img class="center" src="./imgs/20090918_1144p.jpg"></img>
</a>
</div>
<div class="column center">
<a href="./imgs/NoSun.jpg">
<img class="center" src="./imgs/NoSun.jpg"></img>
</a>
</div>
<div class="column center">
<a href="./imgs/IMG_20170923_162519423-01.jpg">
<img class="center" src="./imgs/IMG_20170923_162519423-01.jpg"></img>
</a>
</div>
</div>
</article>
<!-- ========================================================================== -->
<aside></aside>
</div>
<footer></footer>
<!-- ========================================================================== -->
<script>
// list of the articles, current article, and are we paging through articles or not
var articles;
var current = 0;
var articleEnabled = true;
// list of the parts of an article to reveal? And are we stepping over those or not
var revealEnabled = false;
var revealList;
var nextToReveal = 0;
var enabled = true;
var manner = 'presentation';
let enableKeyPresses = function () {
enabled = true;
}
// function to setup the reveal of an Article
var goReveal = function () {
// hide all the child elements of the current Article with the reveal class
revealList = $(articles[current]).find(".reveal").toArray()
for (var i = 0; i < revealList.length; i++) {
$(revealList[i]).hide();
}
// now fade in the article, but with the marked bits hidden
$(articles[current]).fadeIn("slow", enableKeyPresses);
}
// function to reveal the next part of the article
var advanceReveal = function () {
let nextaction = function () {
$(revealList[nextToReveal - 1]).addClass("seen");
$(revealList[nextToReveal]).fadeIn("slow", function () {
nextToReveal++;
if (nextToReveal == revealList.length) {
// that's it nothing more to reveal, let's move on to the next article when the event happens again
nextToReveal = 0;
revealEnabled = false;
articleEnabled = true;
}
enableKeyPresses();
});
};
if ($(articles[current]).hasClass("solo")) {
if (nextToReveal > 0) {
$(revealList[nextToReveal - 1]).addClass("seen");
$(revealList[nextToReveal - 1]).fadeOut("slow", nextaction);
} else {
nextaction();
}
} else {
nextaction();
}
}
var retreatReveal = function () {
if (nextToReveal === 0) {
// we're at the start but not been asked to go forward but back
// therefore need to swap back into 'article' progress
nextToReveal = 0;
revealEnabled = false;
articleEnabled = true;
retreatArticle();
} else {
nextToReveal--;
$(revealList[nextToReveal]).fadeOut("slow", enableKeyPresses);
}
}
// function to advance the article to the next one
var advanceArticle = function () {
$(articles[current]).fadeOut("slow", function () {
current++;
if (current !== articles.length) {
// if the article is marked as one that has revealing elements
// swap the handling of events to the reveal function
if ($(articles[current]).hasClass("reveal")) {
articleEnabled = false;
revealEnabled = true;
goReveal();
} else {
$(articles[current]).fadeIn("slow", enableKeyPresses);
}
}
});
}
// function to move back to the previous article
var retreatArticle = function () {
$(articles[current]).fadeOut("slow", function () {
if (current > 0) {
current--;
// if the article is marked as one that has revealing elements
// swap the handling of events to the reveal function
if ($(articles[current]).hasClass("reveal")) {
articleEnabled = false;
revealEnabled = true;
goReveal();
} else {
$(articles[current]).fadeIn("slow", enableKeyPresses);
}
}
});
}
var showAsDocument = function () {
$("#waiting").fadeOut("slow", function () {
$("html").removeClass('presentation').addClass("document");
$(".notes").show();
articles = $("article").toArray();
for (var i = 1; i < articles.length; i++) {
$(articles[i]).show();
}
$("#waiting").hide();
$(".gallery").hide();
});
}
// read to roll...
$(document).ready(function () {
$('html').removeClass('hidden');
// get all the articles within this document and hide them
// note the start from 1 to miss the main title
articles = $("article").toArray();
for (var i = 0; i < articles.length; i++) {
$(articles[i]).hide();
}
if (manner === 'presentation') {
$(".notes").hide();
}
$("#waiting").show();
baguetteBox.run('.gallery', {
overlayBackgroundColor: "rgba(47, 39, 74, 1.0)",
animate: 'fadeIn',
buttons: false
});
$("#document").click(showAsDocument);
// For any keypresses, if it's advance or retreat do that..
$("html").keydown(function (e) {
event.preventDefault();
if (!enabled) { return; }
var key = e.which;
if (key === 39 || key === 40 || key === 34) {
enabled = false;
if (articleEnabled) {
advanceArticle(enableKeyPresses)
} else {
advanceReveal(enableKeyPresses);
}
} else if (key === 37 || key === 38 || key === 33) {
enabled = false;
if (articleEnabled) {
retreatArticle(enableKeyPresses);
} else {
retreatReveal(enableKeyPresses);
}
}
});
});
</script>
</body>
</html>