Basic Principles of Feature Image Design

Nat

Nat

Joined
Nov 18, 2014
Messages
555
Likes
345
Degree
2
I have a deep appreciation for art, I even took a few art classes when I was young, but I'm NOT artistic in the design sense. I seriously, seriously struggle in this area. Yeah, I could outsource images, but that's actually super inconvenient for featured images that aren't incredibly complex or when I need something fast.

Folks who are damn good at the photoshop thing (apparently just about everyone)... Please point/link me towards some basic, fundamentals for making images look good with text.
  • What about "real" pictures that weren't taken with the intention of adding text (most of the image is busy)
  • Is there a list of fonts that are good/safe go-tos?
    • Any especially for Pinterest style/size?
  • How do you pick the text color?
  • When do you use shadow behind text / block shadow / full width shadow?
  • To keep site/brand unity, which elements do you always include?
I have Stencil and Gimp at my disposal. (Gimp is free for anyone not familiar.)
 
It's art, bruh. There's no rules!

I use "real" pictures all of the time. You can do whatever you need to make it a canvas for text. You can crop it, saturate it, change the color profile, go black & white, blur it, whatever is needed to help the text pop and make the whole thing visually attractive.

As far as fonts go, I'd follow the guidance of text on the internet in general, which would be sans-serif for anything small for sure. This should get you started with Font Pairing if you choose to do that: https://www.typewolf.com/google-fonts I tend to stick with one font and vary the size.

You can pick the color based on the dominant color on the picture or in the area your text will appear. Use the color wheel to get complimentary colors, tertiary colors, etc... ones that pop but also don't clash. Another thing is you can almost never go wrong with white text and a stroke or shadow to make it pop some.

I rarely use a stroke, and if I do it's 1px so it's barely noticeable. Shadows and outer glows can help your text be more readable if you need more contrast between it and the picture. And that's also where working on the background helps with color management, blurring, softening, etc. If you go too heavy on text effects you'll look cartoony, which might be the goal. Otherwise you can use a combination of text effects and manipulating the background.

In terms of unity, you'll develop a philosophy like... I always use the same font, similar text effects, slap my logo in the corner, use the same style of photo, always the same width, varying but similar heights. It terms of text color, I will use white, one of my two main brand colors, or if the picture calls for it, I always use a pastel set of Easter-looking colors. That's my style and even with those three color variations, it's still obviously "me" due to the other elements.
 
Another option could be to use Canva. Free version is really enough. It has many templates (including for Fb, twitter, pinterest, etc.) and is very easy to use.

It's not the end of the game by any means, but it will help you to get started and see what looks nice and what not.
 
Try to get as big a picture as you can.
Yu can resize / crop / slice to get the free space you need.

Try not to get too literal..
If your article is on school buses... maybe this instead of a bus.

8kPVDMM.png


Think of the rule of thirds:
The point of interest should be at 1/3 from a side (either top or bottom or sides)
Here, the Stop sign is roughly there.

Don't overthink it.
 
Pick a font. If small photo, must be Serif.

1) If given a photo

Look for large blank/empty/non-essential spaces where text can go.
If blank spaces, put the text there.
Find the dominant color on the picture or in the area your text will appear.
Use a color wheel to get complimentary colors, tertiary colors, etc.
Test each out and find one that pops.
If none look good, saturate it, change the color profile, try black & white, or blur it.
If none are visible & look good, try out white text with a stroke or shadow

2) If choose your own
Get as big a picture as you can.
Resize / crop / slice to get free space.
Ideally use the rule of 1/3s.
Follow steps of 1)

----

There's just so many judgement calls and tweaks that can't be laid out. Like in @darkzerothree's photo -- intuitively I would have probably started off by enlarging and centering "School Transports," and maybe keeping the subtitle where its at. But the darkness required for the white to pop just makes it really dark imo which seems depressing, even if you're going for a scare tactic.

@darkzerothree okay, so, I can totally make something like that. But tbh, I don't really like it. I know that's an example of the 1/3 rule, but all the other aspects of it I don't really like. I know I'm overthinking a bit, but how do you make a photo like that more visually appealing?

@Handel something about their UI I just didn't like the firs ttime I tried, but I'll give it another go.
 
Really depends where it's for / ideally make different versions for your important posts that will be pulled depending where it's shared. With FB in mind, I never ever use text. Never ever use photos that look stock at all. Use images that have a weirdness factor to them / pique curiosity. For Pinterest, I imagine it's a lot different, they seem to always use text and go for a more polished look, but I don't have any experience there. If anyone's getting strong clicks on FB using text and or stock photos, I'm really curious to hear more.

I'd have a hard time outsourcing featured images, it's sooo important and can make or break your article's traction that I always want to have my hands on it.. Same goes for headlines.
 
Last edited:
  • Like
Reactions: Nat
@Potatoe if you don't mind sharing, where do you get your hands on good photos?
 
Nat said:
if you don't mind sharing, where do you get your hands on good photos?
Click to expand...
Check this out: https://zoommyapp.com/ It's free because they are royalty free stock images.

You could try to search for all the stock image libraries, but I'm sure you will discover that a majority of those images can be found using that app. I've also noticed a lot of stock image libraries (paid) carry the same stuff.

I've had the Adobe CC +Stock for the past two years giving me access to 10 free images a month from Adobe Stock and they carry over if they don't get used.
 
It also depends on your use case.

IF this is a big photo that is gonna live on your frontpage FOREVER - then yeah.. GREAT photos, typography, etc...

If it is a featured image that is gonna rotate away after 2 days.... ROI

Reduce amount of time spent on that!
 
Hi @Nat,

A lot of people are going to quote photography guidelines, which are more than correct. But breaking guidelines get photographers awards. Something to ponder on.

That said, it's more important to note that experience counts more than any book on photography. The one thing people never mention due to the obscurity of the work is how editors actually know when to make a cut.

It's all about feeling. Do you feel like you need a thin or a fat font here? Do you feel like it is confusing and inconsistent that the STOP and ALL WAY sign is in all caps and the digital text is not? Do the font's match? @darkzerothree btw, in rule of thirds you have to consider not just the photograph but the entirety of the image too, that means the digital text as well.

Here's the interesting BTS of film editors.
 
@Nat Honestly, I look for featured images anywhere that stock images are not found. It's a wide net lol. I don't want stuff people have seen before, and I don't want stuff that's been used on the network a lot before either, so that generally means avoiding most stock.
 
Potatoe said:
@Nat Honestly, I look for featured images anywhere that stock images are not found. It's a wide net lol. I don't want stuff people have seen before, and I don't want stuff that's been used on the network a lot before either, so that generally means avoiding most stock.
Click to expand...

I agree with you... I hate stock... but does that mean you contact people directly and request/pay to use their photo? Do you just cite a source and comply with takedown requests?
 
Nat said:
I hate stock... but does that mean you contact people directly and request/pay to use their photo?
Click to expand...
I hate stock as well but it does the job if you don't have a photographer or access to someone else's photos.

I've messaged friends that take great photos (one is a professional photographer) and asked if I could use some of their images and haven't had any trouble. I even asked a small Facebook group before and they didn't care. One person asked what I was doing with them and I let them know in a private message that they were going to be for a website I was building and they didn't care either. But I feel like that could be hit or miss.

I think the only legal way around using photos without permission is to cite them and comply with their takedown requests if you ever get them. I don't feel that most people would care, especially if they were cited properly or used on for a purpose that they didn't support. But then again, I hate citing images so I'd rather find a stock photo, ask someone or take them myself.
 
I feel your pain @Nat. Same boat here. I mean, I know good design when I see it. When I have to create it from scratch myself, it's often hard to see the forest through the trees, and hard to know where to start. Considering the depth of any one fundamental of design, I think it's important to take a step back and look at the high level view.

Here's a set of articles I think does this very well. While not perfect or all-encompassing, I think they do a fairly good job of giving a well-rounded overview to help even an absolute beginner in learning how to be "combat effective" at creating reasonably decent designs:

https://gomedia.com/zine/tutorials/rule-one-limit-your-fonts/
https://gomedia.com/zine/tutorials/becoming-a-master-designer-rule-two-limit-your-colors/
https://gomedia.com/zine/tutorials/rule-three-contrast-contrast-contrast/
https://gomedia.com/zine/tutorials/rule-four-spacing-is-your-friend/
https://gomedia.com/zine/tutorials/rule-add-depth-designs/
https://gomedia.com/zine/tutorials/rule-motion/
https://gomedia.com/zine/tutorials/rule-composition-putting/

It's REALLY easy to fall in to the trap of going extremely in depth on any one aspect of design. The important thing to remember is the Pareto Principle of 20% of the effort doing 80% of the work. Simply incorporating a few best practices of the major fundamentals is going to get you most of the way there, and probably more so than most competitors (that in itself may even correlate to Pareto. lol). Doesn't have to be perfect. Just has to get the job done. Sometimes good is good enough.
 
@turbin3 thank you so much, that's exactly the type of thing I needed to find. Anyone who's struggling with design, READ THESE! I knew the first two and had tentative grasps of the others, but really taking these rules to heart going to help me immensely.
 
Hope it helps. That's the thing, it really doesn't have to be that difficult to get most of the way there. A bit of opacity here, choosing a simple color palette there, deciding on 1-2 fonts, some simple sizing/spacing tweaks, few other minor things, done deal. People can nitpick until they're blue in the face about precise color choices, font choices, etc., and that's fine and that precise detail certainly has a place. Though, for the average person's needs it's just excessive and a waste of time.
 
Crello is another good graphic design tool similar to Canva so more templates to choose from for those featured images for FB, IG or Pinterest.
 
You must log in or register to reply here.
Back