Artistic Web Site Banner

Forest around the Mackenzie River falls taken with a digital camera.

I love looking at the outdoors. I have numerous photos of forests, fields, creeks, beaches, and paths. The style of online work I’ve developed over the years is very photographic but I want to push this style a bit, so I’m using scenic photos as a starting point and adding filters to enhance them. The style becomes more modern and cyber-centric. The photo above was my starting point for a blog I have on the ONID server (it’s been redesigned since the following banner was made).

Cropped and softened
Cropped and photo with some fading at the bottom.
I brought this digitized photo into Photoshop for Macintosh and cropped it to fit the standard 800-pixel wide format. This size is a good width for visitors using laptops and larger desktop monitors and is best viewed at 1024 x 768 pixels.

I also rotated it 180 degrees to put the dark section under where I’ll have the title of the blog. I used the eraser tool to fade out the bottom.

Chose background color
They eyedropper tool was used to choose a light hue which becomes the background.
I chose a background color by using the eye dropper tool and clicking on the lightest area of the photo. This color became a new layer in my Photoshop document so I could easily change it later. It’s almost white but not quite.

Inverted color
Filters are added to enhance the color and contrast.
I added an invert color filter to reduce the number of colors and add some punch and interest.

Changed color balance
Changed the color balance.
I messed with the color balance filter until I had my two favorite colors side by side. For the final adjustment, I employed the Artistic brush strokes filter to add a diagonal, linear texture to the banner.

Optimized the file for quick browsing

I used Photoshop’s Save for Web menu to optimize my banner, which means it is the smallest file size possible for the quality I want. It’s not pixelating or blurry and is only 40kb.

I prefer to use images under 10 or 15k, but this one looked better in a .gif format rather than a .jpg format, so I decided to allow the larger file size.

I added my final, optimized file to the images folder of the blog file set, then changed the code in the style sheet (.css file) to point to my new file rather than the default green background.

  1. Viewed the blog files in an FTP or SHELL application.
  2. Uploaded the new .gif or .jpg banner file into the wp-images folder.
  3. Openned the wp-layout.css file and changed the file path and name in the body background-image tag to the new file name:

body {
background: #edfcee;
background-image: url(http://oregonstate.edu/~vanlondp/blog/images/forest5.jpg);
background-repeat:repeat-x;
color: #000;
font-family: Verdana, Ariel, sans-serif;
margin: 0;
padding:0;
}

Saved and uploaded the file.

My love of WordPress has drastically changed the way I develop web sites for clients. We get so much functionality but with low cost (none) and quick design time. The ability to add backgrounds and banners to the WordPress installation means getting through the design process faster.

The simplicity of creating just one or two graphics files versus many means I can focus on the flat surface rather than spacing of numerous files. This ease will allow me to spend more time designing rather than programming. I intend to try some of these techniques for enhancing web art:

  • scan my paintings
  • use more of Photoshop’s filters with photos
  • build more collages

Here are some more banners/art for WordPress created recently myself or for clients:

I’ve provided a basic idea how you can create a piece of online art. If you’re not up for the learning curve but need a banner for another web site, there are free services online that help you, using their images and fonts. Banner Creator is an easy one.

To randomize banners in WordPress, you can follow David Davies method.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s