Make a WordPress Website Banner from a Digital Photograph

beach sceneFollow this CyberKen post to make a WordPress website banner from a digital photograph.

Many websites have a decorative banner across the top. If you’re running a WordPress website your theme will likely give specific instructions about how to size a graphic file (drawing or photo) in pixels. You’ll find these instructions by logging into your Dashboard and clicking on “Appearance” and then “Header”.

Knowing the dimensions for your banner is only half the challenge, however. The harder part is finding a photo whose significant graphic content is narrow enough to meet the vertical dimension requirement. For example, let’s say your header instructions say that your banner file must be sized to exactly 1440 by 300 pixels. The width dimension is not a problem, really. In this particular case you just have to make sure, when saving a jpeg, that it is at least 1440 pixels wide. So, pay attention to the default size of your camera’s jpegs. A standard “large” size is 1024 x 678 pixels. This would not be large enough to make a banner image for a theme that requires 1440 pixels in width. You’re better off saving your photos in very large sizes, say, around 2500 pixels in width. This will give you plenty of pixels to size your photo for various purposes, including making banners.

As I mentioned above, the chief challenge in banner making is finding a photo whose significant graphic content lies within a narrow band–in my example, 300 pixels. What do I mean by significant graphic content? I mean the elements of an image that carry a symbolic message. A website banner should be symbolically appropriate for the whole website. So, for instance, this content might be people with their arms raised in celebration. In this case you wouldn’t want to crop off their arms, so you would need to compose the photo to get all of the necessary body parts within the 300 pixel vertical limit. The challenge of photographing for website banners is to compose your shots so that the symbolic content displays in a narrow horizontal band. Avoid verticals as much as possible.

Now, how to crop to the required dimensions? First, downsize your photo to the required width, in my case, 1440 pixels. Then, set your cropping tool’s vertical dimension to 300 pixels. Crop. Presto, now you have a jpeg of the required dimension: 1440 x 300 pixels.

You can use these instructions to make your own banner, but first you’ll have to consult Dashboard > Appearances > Header to find the header dimensions required by your own WordPress theme.

— TCDavis

About: TCDavis

Since 9-11 I've had a strong commitment to interfaith peacemaking. I recently founded the interfaith social network: interfaithtechassociates.ning.com. I run a small company that helps community groups with inexpensive, easy-to-maintain websites, and produces photos and videos, mostly for Web use. My home page is: http://web.mac.com/tcd123 I'm also an avid photographer. Please visit my nature photography gallery for prints and cards at: www.shutterfly.com/pro/TCDavis/tdphotos I write an interfaith peacemaking blog called RuminOcean, about spirit, faith,and politics. You'll find it at my home page: web.mac.com/tcd123 I'm the owner of cyberkenblog, LLC (http://www.cyberken.teledavis.com), which helps faith and community groups improve the Web literacy of their members and to design websites that are inexpensive and easy to maintain. I'm a retired pastor with experience in cross-cultural work, pastoral psychotherapy, and graduate teaching. Last but not least , I'm a proud grandpa!