Tag: tutorial

Posted on by — Leave a comment

Understanding Exposure

When you shoot a photograph, what you’re really doing is taking the light you see and capturing it on film or in a digital file. In fact, the word ‘Photography’ is a combination of two Greek words which literally mean “light drawing”. To create a good “light drawing” it’s important to understand how cameras control the amount of light captured. This is called exposure, and it refers to the amount of light passing through the camera lens and reaching the camera sensor.

The Exposure Triangle

Exposure can be best understood using what is often referred to as the exposure triangle. The exposure triangle is the way a camera maintains the correct exposure for an image, and is composed of three elements: aperture, shutter speed, and ISO. In the exposure triangle, these three elements are related to each other, and if one of them changes at least one other must change to maintain the correct exposure.

The Exposure Triangle
The Exposure Triangle.
Image courtesy WClarke and Samsara, CC BY-SA 4.0, via Wikimedia Commons

Aperture

Aperture refers to the diameter of the hole in the lens that lets the light in. The larger the diameter of the hole, the more light can reach the film or the camera sensor.

Aperture diameter is measured in f-stops. An F-stop refers to the ratio of the focal length of the lens to the diameter of the aperture. The important thing to remember is that the smaller the f-stop number, the larger the diameter of the aperture.

Mechanically, the aperture is part of the lens, not the camera body. When you hear someone speak of a “fast lens” they are talking about a lens with a large maximum aperture, such as f/1.8.

Shutter Speed

Shutter speed refers to the length of time the camera’s shutter is held open, allowing light to hit the film or camera sensor. Shutter speed is measured in fractions of a second. You will often see shutter speeds written as 1/250 or 1/125. For a shutter speed of 1/250, the camera’s shutter is held open for one two-hundred-and-fiftieth of a second.

In low light settings, longer shutter speeds are often used to get a correct exposure. On most modern cameras, the longest automatic shutter speed available is typically 30 seconds.

ISO

For beginning photographers, ISO can be the most confusing part of the exposure triangle, or at least it was for me when I started out. In film photography, ISO is also referred to as film speed. This refers to how sensitive the film is to light.

In digital photography, ISO can be thought of as how sensitive the camera sensor is to light. This is not technically correct, as ISO is really an algorithm run by the camera software, but it helps to think of it this way.

With ISO, the larger the number, the more sensitive the film or camera sensor is to light. Higher ISO numbers allow the camera sensor to capture more light, but higher ISO numbers also introduce more noise into an image. For this reason, it’s usually recommended to shoot using the lowest ISO number you can get away with.

Choosing the Correct Exposure

Unless you are using Manual mode, your camera will adjust at least one of these settings for you. Cameras have a lot of different modes which are beyond the scope of this article, but a good setting for beginners is “aperture priority” mode. This is usually shown as an A or Av on your camera’s dial.

Aperture priority mode allows a user to set the aperture and ISO values, and the camera will choose the correct shutter speed to maintain a proper exposure. If you find the shutter speed is too slow, you will need to adjust either the aperture or ISO to compensate.

I’ve mentioned correct exposure several times in this article, but it’s also important to note that proper exposure is as much a choice of the photographer as it is a technical aspect of photography. Sometimes photographers, including myself, will intentionally over- or under-expose an image during capture. The original exposure can then be adjusted later in post-processing or maintained as an artistic choice. Whatever exposure choices you make, remember to always have fun and don’t be afraid to experiment.

Posted on by

Creating a Stereographic Projection in Photoshop

Several years ago, I was introduced to a way to create cool and unique pieces of art from a photograph in Photoshop. This type of digital art is known as a stereographic projection or “little planet” and, while you don’t see too many people doing it anymore, it seems like it was kind of popular a few years ago.

To make this kind of art is actually pretty simple and requires only a couple of things: a great photograph and a copy of Adobe Photoshop or a similar image-editing program. The best stereographic projections use a type of picture called a 360-degree panorama. This means that the edge of one side of the panorama could be placed next to the opposite edge of the panorama and the two sides would form a continuous scene. These types of pictures are often created by standing in one place and taking continuous photographs while panning the camera in a 360-degree circle, then stitching the photos together in Photoshop or a similar program. Many smartphone cameras now have a panorama feature that makes this easier.

So what do you do if you can’t get a 360-degree panoramic photograph? There are two options: either fake it by editing the image you have, or mirror the image. I have done both, and both options can provide great results.

Faking It

First, I want to show you how to fake it. I’ll use a copy of my photograph, Hovenweep, taken at Hovenweep National Monument.

After opening the photograph in Photoshop, I will go to the “Filter” menu, scroll down to “Other,” and choose “Offset…” from the pop-out menu. In the “Horizontal” text field in the dialog box that pops up, I will type “1000” and click the “OK” button.

Offset Dialog Box

My image will now look like this:

I can now use the Clone Stamp tool to replace areas of the image along the seam so that the offset sides flow into each other without a noticeable difference. Since we are creating a stereographic projection the seam doesn’t have to be perfect, but I will still make it look really good. Once I am finished with that, my image will look like this:

Hovenweep after cloning

You can still see a couple of places where I could have tried to make it look better, but it will be fine in the final result. Now that I have erased the seam, I will go to the “Image” menu, scroll down to “Image Rotation,” and choose “180°.” Back in the “Filter” menu, I will scroll down to “Distort,” and choose “Polar Coordinates…” In the dialog box, make sure the “Rectangular to Polar” radio button in selected and click “OK.” My image will now look like this:

Hovenweep after polar coordinates filter

The last step is to resize the image so that is a square. Some people do this step right after using the Clone Stamp tool, but I prefer to do it last. When I do it earlier in the process, I occasionally get weird artifacts in my final image. To complete this step, I will go to the “Image” menu again and choose “Image Size.” In the dialog box, I will make sure the “Resample” check box is selected and the link icon between Width and Height is not selected. I will choose “Pixels” from the drop down menu next to Width. Then I will change the value in the text box next to Width to match the value in the text box next to Height, and click “OK.”

Image Size Dialog Box

My final image looks like this:

"Hovenweep Stereographic Projection" (2017) by K. Bradley Washburn

Although not perfect, my seam is now not even visible.

Mirroring

For this example, I will use a different image. I’ll open up a copy of my photograph Cottonwood Creek in Photoshop. The first thing I will do is go to the Layers panel, click the lock icon on the Background layer, right-click on the layer, and choose “Duplicate Layer.” I now have two layers, each with the Cottonwood Creek image.

From the “Image” menu, I will now choose “Canvas Size.” In the dropdown box next to Width, I will choose “Percent.” Then in the text field next to Width, I will change “100” to “200” and click “OK.” This will double the width of the canvas while keeping the height the same.

Cottonwood Creek after resizing the canvas

Using the Selection Tool, I will drag one layer clear to the right of the canvas and drag the other layer clear to the left of the canvas. Then, with just one layer selected, I will go the “Edit” menu, scroll down to “Transform,” and choose “Flip Horizontal.” This creates a mirrored landscape and my image now looks like this:

Cottonwood Creek flipped

With the top layer selected, I will now press “CMD+E” (Mac) or “CTRL+E” (Windows) to merge the two layers, and follow the steps I took above to rotate the image, map to polar coordinates, and resize to a square. My final image will look like this:

"Cottonwood Creek Mirrored Stereographic Projection" (2017) by K. Bradley Washburn

That’s all there is to it! With a nice photograph and a decent image-editing program anyone can create a stereographic projection.

This article is an updated version of an article originally published on Artistic Imposter Design.

Posted on by

Changing Web Page Items Using JavaScript

This tutorial is designed for JavaScript newbies. It was originally written in 2009 and uses SWF objects, which are no longer supported in modern browsers. Regardless, the JavaScript can be adapted to work with any type of media.

I recently had a client who wanted a page with a SWF movie that could be changed to a different SWF by clicking on a button on the page. A while back, I did a project where the user could click a link and change the source of an image on the page using JavaScript, but changing an entire SWF seemed a little more difficult. The code to change the image to a different image looked like this:

<image id=”imagetochange” src=”pic1.jpg”>
<a href=”#” onclick=”imagetochange.src=’pic2.jpg'”>Change image</a>

This code was simple enough, so I tried modifying it to change the source of the SWF when I clicked the link. My code now looked like this:

<object id=”changemovie” type=”application/x-shockwave-flash” data=”flashmovie1.swf” width=”640″ height=”400″>
  <param id=”changethis” name=”movie” value=”flashmovie1.swf” />
</object>
<a href=”#” onclick=”changemovie.data=’flashmovie2.swf’; changethis.value=’flashmovie2.swf’;”>Change movie</a>

This worked in some browsers but it didn’t work in others, so I was forced to come up with a different solution. After some research, I was reminded of two JavaScript items that eventually made the whole thing possible: getElementById and innerHTML. After some tweaking, I ended up with a code that looked something like this:

<script type=”text/javascript”>
  function changeText() {
    document.getElementById(‘flashitem’).innerHTML = ‘<object type=”application/x-shockwave-flash” data=”flashmovie2.swf” width=”640″ height=”400″> <param name=”movie” value=”flashmovie2.swf” /> </object>’;
  }
</script>

<div id=”flashitem”>
  <object type=”application/x-shockwave-flash” data=”flashmovie1.swf” width=”640″ height=”400″>
    <param name=”movie” value=”flashmovie1.swf” />
  </object>
</div>
<a href=”#” onclick=”changeText();”>Change movie</a>

First, I created a JavaScript function called changeText(). Inside the function, I placed “document.getElementByID(‘flashitem’)”. This calls a function which searches the page for an element with the id of “flashitem”. Then I added “.innerHTML”, which tells the program that we are doing something with the innerHTML property of the specified element. I then set the value of the innerHTML property to the code for the SWF object I wanted to replace the original SWF, and closed the changeText() function. Now when the function is called, it will change the HTML inside a div with the id of “flashitem” to the code to place the new SWF on the Web page. Now I just needed to create the div and the link.

I created a new div with the code for the original SWF object inside and gave the div an id of “flashitem”. Outside the div, I then created a link to call the function changeText(), and it worked perfectly.

This article was originally published on Artistic Imposter Design.

Posted on by

Creating a Basic Web Page

This tutorial is designed for Web design newbies, to instruct in the creation of a simple Web page.

The first thing to know about Web site creation is that every Web page requires four things. These four things are an opening <html> tag, an opening <body> tag, a closing </body> tag, and a closing </html> tag. The markup for a basic Web page looks like this:

<html>
<body>

</body>
</html>

Earlier, I mentioned the word ‘tag’. A tag is an HTML formatting element used to tell the browser how to format and display the information contained in the Web page. Most tags come in pairs, hence the need for an opening <html> tag AND a closing </html> tag. Exceptions to this rule include the line break tag, <br />, and the image tag, <image src=”someImage.jpg” />. Information that you wish to be formatted with a certain tag is placed between the opening and closing tags.

Let’s begin by creating the basic Web page mentioned earlier. To create the file, you will need an HTML or text editor. Notepad (Windows) works well as a basic editor, but i prefer something with a few more features. I mostly use BBEdit on my Mac, but Notepad++ is a great Windows alternative. If you’re looking for a fully-featured program, Adobe Dreamweaver is the industry standard, but a great inexpensive alternative is HTML-Kit.

Many applications will automatically added things like the tags mentioned earlier, but in the interest of being thorough we’ll add everything manually. We’ll start with a blank document and save it as “index.html”. When a browser visits a Web address, the file it looks for is the file named index. If the browser unable to find this file, it will display a file tree of the files in the directory on the Web server related to that Web address. There are other methods to prevent the file tree from showing, but those are beyond the scope of this tutorial.

Now that your document is saved, we’re going to start adding things. The first thing we want to add to the blank page is the Document Type Definition (DTD) or doctype. Strictly speaking, the doctype is not required to create a Web page, but it IS required to create a well-formed Web page. The World Wide Web Consortium (W3C) defines several doctypes, but the one we will use for this example is the HTML5 doctype. The HTML5 doctype looks like this:

<!DOCTYPE html>

Next, we add the opening <html> tag and a new tag called the <head> tag. The document head is a place where information is stored that will not be displayed on the actual Web page. There are a lot of different things that can go in the head, but the only thing we want to put for now is the Web page’s title. So we add an opening <title> tag, then the page title. We’ll call this page “My First Web Page.” Then we add a closing </title> tag, a closing </head> tag, and an opening <body> tag. Our markup should now look like this:

<!DOCTYPE html>
<html>
<head>

<title>My First Web Page</title>

</head>
<body>

Once we have that, we just need to add some content to our page and close the <head> and <body> tags. Let’s add a paragraph that reads “I am learning to build Web sites and this is my first Web page.” To add a paragraph, we use another special tag, the <p> tag. So now we type: <p>I am learning to build Web sites and this is my first Web page.</p>, then type a closing </body> tag and a closing </html> tag. Your page should now look like this:

<!DOCTYPE html>
<html>
<head>

<title>My First Web Page</title>

</head>
<body>

<p>I am learning to build Web sites and this is my first Web page.</p>

</body>
</head>

Now, just save your document and open it in a Web browser. Congratulations! You now know how to build a basic Web page.

This article is an updated version of an article originally published on Artistic Imposter Design.