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

, , ,

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>