BP MEMBER LOGIN
You may login with either your assigned username or your e-mail address.
The password field is case sensitive.
Forgot Password?

Saturday, November 1 2014 12:04am

HOW TO CREATE A MAIN FEATURE IMAGE

The main feature image is that big-assed image you see on the homepage - the first thing that will draw the viewer's attention. This post is for any designer who plans to submit such an image for publishing on the website.

And since it's highly probable that anyone who reads this is a designer, I'm assuming you know how to use Photoshop - and as such, I've attached a PSD template which you could use to create your image(s). You're welcome.

In case you don't have/use Photoshop (or are not a designer, or plan to have someone else do it) and need some guidance, then read on.

One Rule to Rule Them All

There's only one "non-negotiable" rule in submitting an image which is that they should have a maximum width of 960 pixels. Anything more will be scaled down [with impunity]

So if you're gonna be the guy who doesn't listen and submits an image anyways, be sure that it'll still legible when scaled down to fit a 960px width. If the text on your image is unreadable when scaled down, then tough nuggets - I'll still post the [scaled] picture anyways and wash my hands from your "sin."

If you're a good designer on the other hand. Or better yet, an awesome, savvy, scholarly, and considerate one - then read on. (see what I did there, that's called positive reinforcement hehehe)

Going the Distance

There's no fixed rule as to how high your image could go. But given that we're talking about the internet here, it would be prudent to take browser display window dimensions into account.

The general rule of good "landing pages" is that when you first land on the page, you should be able to see everything that needs to be seen without having to scroll down. This can get tricky because different browsers have different "stuff" above and below the actual display window (e.g. addressbar, bookmarks bar, bottom status indicator, etc.) so not all browsers have the same dimensions - and unfortunately there's no real fool-proof way of doing it.

What you'll have to do is decide how to flow the visual content so that it shows above the fold (the "fold" being the boundary where you have to start scrolling down to see the rest of the content) and this fold varies from browser to browser, and monitor resolutions. Not to mention you have your site-specific headers, etc. to deal with that already take workable space away.

The PSD template already has a bunch of layers and guides giving the designer a good idea of the different scenarios/devices that might be viewing the site. But again, for those who don't use Photoshop here are the 5 choices you've got:

  1. 960x295 - Optimized for all modern browsers.
  2. 960x317 - Optimized for modern browsers on a 1024x768 desktop screen size (catering the least common denominator for height)
  3. 960x410 - Optimized for iPad and most modern browsers with large desktop screen sizes.
  4. 960x567 - Assumes user will scroll until the image fills the entire browser viewpane/window.
  5. 960xWHATEVER - Free-size (a.k.a. poster style).

Obviously, these are ordered according to best to worst case - and all are assuming a landscape orientation. The smaller, the better, but should you need more space, feel free to go down the list to fit your content.

You should consider #4 as the worst-case scenario - as it assumes a user will scroll down to view the image, but still allows at some point, to see the image in its entirety without having to scroll any further.

If you end up going #5 for whatever reason, it's worth mentioning that your [poster-like] image on a website will look really tacky. It makes the viewers scroll too much just to see the content you're trying to get across. Try to avoid #5 as much as you can.

#1 is for the really picky people who want to cater even to iPhones, but I'll be honest in saying that I didn't do my research to find out how it fares with other mobile phone browsers. So I'm guessing #2 would be the most common choice for any designer as the usual standard is for desktop/laptops.

So there you have it, as long as you follow these "rules" you'll be guaranteed to have an homepage feature image you'll be proud of.


BP's ONLINE NEIGHBORHOOD

facebook twitter flickr youtube

www.nargalzius.com