So You Need a Website - Part IV - What's New in the World of Website Goodies

In 1996, I created my first website. I had just opened my private voice studio, and I needed a marketing tool to let people know I was in business.  I had no idea what I was doing, and I had very few tools with which to do it.  I don't think I even had any pictures on the site, just text with a very simple logo I was able to create in an early version of Photoshop.  I could do background colors, but if I wanted to use anything other than the simplest fonts, in headings, for example, I had to create the heading as a jpg file in Photoshop and treat the entire thing as a graphic.  I can remember creating graphics for the menus as well...very primitive. 

I wanted to add audio files (I was teaching voice, after all, and it would have been nice for people to be able to hear how I sang), but all I could do was attach a recording to a page so that it would play automatically when the page loaded.  And it made the page take forever to load.  I actually put a text notice on the page to let people know that they could continue to browse while the recording loaded.  And forget video.  If I had wanted to use video, I would have had to have the video professionally produced, and I'm not sure I would have been able to load it onto the site.

Oh, how things have changed since then.  We now have access to so many things either for free, or at a very reasonable price, and the tools are pretty simple to use.  We have Mac computers in our office, so I can't speak to the Windows side of things, but there's almost nothing you can't do with a Mac.  Simple music and video editing software are included as part of the operating system.  And if you have a good graphic editing tool such as Adobe's Photoshop in addition to the built-in Mac tools, you can rule the website world.

All of the visual effects on this website were produced in-house, using pictures we either had on hand or had taken during a photo shoot we did as part of our marketing revision last year.  There are a couple of pieces I'd like to point out and talk about the process of creating.

The first is the picture on the left, which is used here.  It started life as the picture on the right.  This is a typical Moravian Star, albeit a large one - the size found in churches.  I love this picture, but I wanted something more stylized and a little bit impressionistic.  I also thought that the background color wouldn't work well with the colors in our website.

I did all of the revisions to the picture in Photoshop.  First I cleaned up the background; there are a couple of nice tools found in Photoshop for this kind of work.  If you want a flat, one-color (with no variation) background, you can use the paintbrush tool.  Or if you want a very clean edge, you can use the pencil tool.  The difference between the two is that the paintbrush tool, acting very much like a real paintbrush, produces a less clear-cut edge.  The texture is a little bit diffuse.  The pencil creates a very hard edge.  So I used the pencil, narrowed down to a very fine line - at times only 2 or 3 pixels - to outline the points of the star.

My favorite tool for this kind of work, however, is something called the clone stamp.  An electronic picture is a collection of very small squares called pixels (shorthand for "picture elements").  If you've ever done any kind of work that was based on a graph, such as cross-stitch or needlepoint, then you've worked with pictures that are composed of small squares, very much like computer pictures.  When you enlarge an electronic picture enough, you can actually see the individual pixels, which is a great lesson in how colors work together.  What the clone stamp does is pick up not just one color, but the whole pattern of a collection of pixels, copies it, and pastes it into a new area.  If you think of how any area in a traditional, representational painting is shaded in different colors, the clone stamp picks up that shading and reproduces it so that you end up with an area that has a more natural look to it.  It's a great tool for covering up parts of a picture you don't want to include (goodbye bags under eyes and crow's feet!), or for doing what I did here, which is to change the nature of a picture completely, while retaining some depth of color.

If you look at the left edge of the after picture, you can see that I kept the darker area along the edge from the original, but I lightened the color.  The area around the star I replaced completely with a much brighter color.  That area was a flatter color in the original - there was less variation in the shading - so I used the paintbrush for a good bit of that area.  So the background of this after picture is a mixture of a number of techniques.

I also brightened up the color in the points of the star and refined and darkened the binding around the base of the points.  I decided to go ahead and take out the brass fasteners in the binding because I thought the detail wouldn't show in the final product.

Once I had the colors reworked the way I wanted, what I had was essentially a much brighter, whiter version of the before picture.  But it was still very representational and wasn't impressionistic at all.  Photoshop has a number of tools you can use to manipulate images, and what I turned to next was its collection of filters.

I love working with Photoshop's filters.  They're just cool.  What they do is manipulate the pixels so that the picture ends up looking as if it had either been created in a certain way - the colored pencil, dry brush, rough pastels, or film grain filters, for example - or as if you are seeing the picture through some kind of material, such as plastic wrap, stained glass, or those thick glass blocks.  It's really a lot of fun to experiment with the filters and see what they'll do with a picture, and you can apply one on top of another if you like, although once you start down that road, it's very easy to completely lose your original picture.

For this picture, I used the glass filter, which makes the picture look as if you were seeing it through thick, irregular, handmade glass.  It made the lines in the picture just distorted enough to create the impressionistic look I was after, and I'm very pleased with the way it turned out.  I have to say, as someone who has always wished I could draw and paint, but who has absolutely no talent in that direction whatsoever, being able to do these things in Photoshop really helps to appease that desire.

The other piece I want to talk about is the video I created to showcase our Anthem.  As we were going through the process of revising our marketing materials, we spent lots and lots (and LOTS) of time talking with the people we worked with about who we are, what we do, how we see our mission - why we're here.  They took all of that and wrote this wonderful piece for us that caught what we had to say so well that when they read it to us, you could have heard a pin drop when they finished.  It was so lovely.  And we wanted a way to showcase it on our website that gave it the setting it deserves.

I sat down with the text of the anthem and our collection of pictures.  As I read through each section of the anthem, I thought about what it meant and tried to find a picture that expressed that meaning.  I created a storyboard matching the text of the anthem with the pictures as I wanted them to match up.  Then, using a program called QuickTime (one of those apps that comes with the Mac operating system), I recorded myself reading through the anthem.  Then I timed the recording, noting how much time each section took so that I'd know how long to leave each picture up before transitioning to the next one.

Once I had the timing down, I used another Mac app (iMovie) to create the visual part of the video.  That sounds more impressive than it really was - all I did was import the pictures into iMovie, then set each one for the length of time it needed to be.  Then came the fun part.  If you've ever seen one of Ken Burns' documentaries, starting with The Civil War, and going through Baseball and all the rest, you've seen his technique of using still pictures, but panning across them to make them look like video.  iMovie will do that for you, letting you choose the starting and stopping points, which determines the direction of the movement, and setting the time you want the whole effect to take.  And the best part is that the command to do that is to apply the "Ken Burns effect".  That's actually how it shows up on the menu, because that's what that panning effect is now pretty much universally known as.

Once I had the pictures in place, with the panning and timing set up, I imported the audio file of the narration and fine-tuned the movement of the pictures to the narration.  That was finicky and a bit time-consuming, but it wasn't difficult.  It was just a lot of making one picture 2 seconds longer and another 3 seconds shorter until everything lined up the way I wanted it to.

I could have stopped at this point, with pictures and narration, but it needed music.  I knew I wanted to use something Moravian in the background.  We had some recordings in the office, but nothing was quite right.  I didn't want vocal music - either choral or solo - because the words would conflict with the narration.  All the organ music we had seemed to be specifically seasonal - Christmas, Lent, or Easter, and I didn't want that.  So I went to iTunes, to the iTunes Store, and searched for "Moravian," just to see what I might find.  And did I ever hit the jackpot.  I found a wonderful recording by the Moravian Trombone Choir of Downey in California.  They play beautifully, and this is a gorgeous recording.  There was a piece on there that fit very well, so I emailed the conductor to ask permission to use the piece, which he very kindly granted.  All I had to do was import the file, start it at the beginning, and set it to fade out at the end.  And make sure that the volume worked with the narration and didn't obscure it, which was probably the trickiest part of the process, because where the narration naturally got a bit softer, the trombone piece got louder. But it worked out nicely anyway.

Once the video was complete, the last piece to put into place was uploading it onto YouTube, then creating a link to our Anthem page.  Having the video reside on YouTube and linking to it keeps us from using up our web hosting bandwidth, which can get expensive if you do enough videos, and also puts our video on a platform that can get much wider distribution.  And to upload videos to YouTube, all you need is a free Google account; it couldn't be easier.  If you'd like to see the results, the video can be found here.

So between Photoshop, QuickTime, iMovie, iTunes, and YouTube, we've managed to produce some things in-house that I would never have dreamed of being able to do with that first website almost 20 years ago.  These things are within your reach with a little investigation and trial and error.  I would never have thought I'd be able to do something like this - I'm certainly not trained in any of it - but it's been an interesting and very rewarding challenge.

 

Tags: