http://bloggingconcentrated.com/bcprime

Why do images matter?

We’re talking about images and design. Images have been the illustration of stories, political cries, branding, and culture since the beginning of time. And now in a world saturated with images you have the unique opportunity to make your images for your site shine, stand out, and be memorable.

Since we are such an image driven culture the images that we produce - for Instagram, Facebook, Twitter, Pinterest, and more - all make a difference in our overall brand. In fact, the images often represent our brand more than the words, content, and information produced. Sometimes the images are the gatekeeper and filter for our branding. Some companies invest 10-15% of their overall budget on content/image creation since images are such an integral part of marketing.

What does that mean? Don’t let your images be a second thought.

In your design/blogging time make sure to set aside time to create images that are professional. Just as in YouTube when it’s easy to separate the rookies from the pros it is also just as easy to do this with regards to images. Do your Pinterest images pop on the screen? Are they images that make readers stop? That’s the goal across social platforms - to use the image to make readers in a saturated and noisy social world to pause for that micro second to look at your content. Getting the pause is the initial goal, then once you have them paused and looking at your content you can use the rest of your image, and the related text, to turn your readers into cheerleaders.

When you have excellent, professional looking designed images this can make this process easier.

This ebook goes over basic graphic design tips. They’re not detailed tutorials for photoshop or Gimp, but are rather simple rules to keep in mind while you’re creating graphics. You can think of the rules as the foundation for graphic design. When you know the theories and best practices it makes the construction easier.

It’s divided into sections about fonts, image selection, simplification, and rules. Now, as with everything, there are variations to the rules. Don’t be afraid to try new things, to mix fonts, and to create. So much of design is the process of addition and subtraction - adding this, taking away that, and then discovering what works. Once you have a path - your branding solidified - then the image creation simplifies.

http://bloggingconcentrated.com/bcprime

Branding - Understand the Vision and Create a Cohesive Brand

Do you know your brand? If someone was to ask you what your site was about and only allowed you to use three words to describe it what would you say? When you know your brand it helps filter not only content but also what images you create. Knowing your brand also helps with messaging - when you know the message you also know what emotion and response you want your images to evoke.

Images need to be created for the genre that they’re intended. For instance, check out this image for Tough Mudder - the font, overlay, color selection, and image works together to promote their brand. It evokes strength and endurance. Do you understand your brand and message? What do you want to convey? Fonts, overlays, icons, colors, and graphics all work together to create a story.

Every graphic that is made by McDonalds, Starbucks, GAP, Udi’s Gluten Freee, and so on is designed with specific vision and adheres detailed branding strategies. Do you have design strategies? Do you know what fonts you choose from? Do you have an overlay with your logo? Do you know your color scheme? Part of the vision for you as a website owner (and often designer) is understanding your brand. When you know your brand then you will know how to proceed with your graphic design and image creation.

http://bloggingconcentrated.com/bcprime

This graphic was on the Udi’s Gluten Free homepage. The color palette matches the colors from the site, the message and words branded, you’re pressed to stop in the stream with the clever use of the phrase “what the hack?” and the addition of extra features make this the type of image that creates conversation and pinning and sharing.

Do your images have this power? Do they have a concrete message?

Just like the pixel space on your site is at a premium the space on an image are also at a premium. Don’t just fill space to fill space.

Often on Pinterest images on amazing boards lack the cohesive branding thread. In other words, each image was created independently and without regards to the images created for the posts before and after. You need your readers to not only fall in love with you, but also be able to recognize you quickly and instantly in their social streams. If I asked you to imagine the Pepsi logo you could quickly in your head. You probably could for Mercedes, Nike, McDonalds, and more. Do your readers have that kind of brand recognition with regards to your images?

It does not mean to create all your images identical. It does mean to have a common element, a design thread, between all the elements of your site. Decide what that may be and then utilize variations of that for all of your design options.

Every image that you create should have an underlining focus and intent. Do you want them to share the graphic? Pin on Pinterest? Stop in the stream? When you know the focus behind the graphic then the rest is easy.

Take this example. You have ten tips to make surviving summer easier with young kids. To me there are three things that would need to be highlighted - summer, ten tips, and the surviving aspect. Once you know those things then you can begin to create your image around those facts and then to match your brand.

And always make sure that there is a reason for every element, font, picture, shown on your graphics. Look at your graphics with the eye of someone who has never seen your site before. What do they say?

http://bloggingconcentrated.com/bcprime

Simplify - or as we like to say - less is often more.

The human brain can only focus on so many things at once. While people are scrolling through the social world they’re often listening to music, thinking about other stuff, hearing the notifications on Facebook, dealing with family, wondering what to make for dinner, and more. It’s like a clutter overload, really. Therefore your design needs to be simple, to the point, and with a strong message.

Now, I know that PicMonkey and all those sites have a zillion fonts, a million colors, tons of overlays, many stickers, blending tools and much more for you to choose from while you’re making your images. While it can be fun to use them all you must constantly be looking at your designs with the filter of less is more. The simplest, most impactful designs are the ones with a clear focus, with space for the eye to rest, and where the message is immediately visible. And the message often can create an emotional response that then makes the reader decide to learn more, decide that you are professional, and decide to share.

Think about this. You walk into your home and you want to find the information about the neighborhood pool party that is happening this week. You go to your bulletin board (and if you’re crafty I’m sure it’s cute and probably not even called a bulletin board) where you put everything up. Now, instead of it being there front in center, you see a board full of papers, pictures, notes, and everything - a hodgepodge of sorts.

You don’t know the message. The bulletin board isn’t making things necessarily easier - it’s giving information, but the information isn’t immediately obvious.

If, on the other hand, you had a spot on the board where you labeled it with the words “this week’s activities” your eyes would immediately know where to go. You thus simplified the clutter, drove your eyes to the message/information you needed, and created a solution.

http://bloggingconcentrated.com/bcprime

Simple, clear, and message driven graphics are the solution. They are what alerts people to our content on Facebook and Pinterest. Make your solution easy to find and to understand. Don’t cram tons of content into one image.

Instead ask yourself these three questions:

1. What is the message of this image?2. What will make people stop and share?3. Who is this image intended for?

NIKE knows their message. They know their fonts. Colors. And logo. This graphic uses one font, two colors, and the variation to create two messages - one with a powerful phrase “set the bar high - raise it higher” and the other with the addition of the words “we and then we” to indicate that NIKE does this.

When you can clearly answer those questions just like NIKE then you will start to understand how to construct an image that will highlight your vision and brand.

http://bloggingconcentrated.com/bcprime

Images - Be a Professional. Don’t stretch, squish, squash, or manipulate your image in ways it wasn’t meant to go.

If you are using a photograph the most important element of your design will be the quality of the photograph. In fact, the photograph/image will be an indication of your professional status.

Take time to invest in your images. Make sure that your images reflect you, your brand, and are of course, images that you can use. Now, I’m not saying that you need to go out and buy the top of the line camera immediately, but rather I’m saying that since this is your business that you need to make sure that all facets of your business are reflective of the quality that you want produced and portrayed. Blurry images, pixelated images, and images that are too small don’t scream quality.

If you don’t have images that you want to use consider purchasing them from various sources such as istock, Graphic Stock, hiring a photographer for the day to create a collection of images for you to use, or trading services with a friend. And don’t forget your iphone/smart phone - the image quality on those pictures is often excellent and can be used in content.

A 200x200 pixel image cannot be expanded larger than that without it becoming distorted. Don’t manipulate it in that way, but rather create larger images from the start, save them as .pngs or .psds (in photoshop) and then you have the ability to compress and reduce them without losing the integrity of the image. When you take an image that is too small for the space provided and expand it to fit the space you are left with very blurry, squished, or distorted images. Take the time to create right sized images.

Now, a word to the wise - if you use PicMonkey to create images you will not have the ability to open up a saved image and manipulate it (beyond shrinking the size). PicMonkey is awesome for quick graphic design jobs, but for longer projects where you

http://bloggingconcentrated.com/bcprime

need to be able to change the font, placement, and more you really need to be able to use a graphic design program that allows for image changes.

Make sure to leave empty space within your graphic. This allows for opportunity for the eye to rest and also allows you to direct them to the main focus of the image.

Create Images and Save Images for the individual social platforms

Every image on every platform has a specific size that is the required size for different sections within their site. Do you know the sizes for the platforms that you promote your material on? Do you create images for each site?

Every social platform also has different image parsing rules - and these rules change often. Be aware of the changes - you can subscribe to the Facebook developers blog, watch the Pinterest or Twitter blog, or as part of BC Prime and Free Weekly Mastermind we’ll do our best to keep you on top of image changes.

I know it seems easier to create one graphic that can be used across all platforms, but in the long run, you need to create images that fit each platform.

Study successful sites and see how they relate with their readers? Is it simply infographics? Or is it a mix of pictures with texts and simply pictures?

Along with understanding each site’s rules make sure to save the files in a way that is best for each platform. For Facebook it is recommended to make the images double the size that they will be shared at so that when they are compressed on Facebook they remain crisp and without as much background noise. (In case you were wondering, background noise is that blurring/distorting that can happen on images oftentimes around text.)

Here are some great sites listing the different social media dimensions across platforms.

http://havecamerawilltravel.com/photographer/images-photos-facebook-sizes-dimensions-types

http://petapixel.com/2014/07/11/handy-infographic-useful-social-media-image-size-cheat-sheet/

http://www.rakacreative.com/blog/post/social-media-image-sizes-always-up-to-date

http://bloggingconcentrated.com/bcprime

Font Facts - Quantity, Color, Type

Now, like we established earlier, there are thousands of font choices for you to use on your graphics. Always go back to the core of your site and look at each image created through the same branding filter that you would content. Does it match? Is the weight of the font similar? Are you using a serif or a sans serif?

Here are three font rules/tips to keep in mind when choosing fonts.

1. Use three fonts maximum. This is why as it simply creates chaos and lack of message

2. Use no more than two fonts if you change features of one of the fonts - ie... making it bold, italic, all caps, larger size.

3. Color can be a way to distinguish and highlight your font - but just like font selections, don’t go crazy with the colors.

Let’s go over each of these in more depth. Why three fonts? It’s like the cluttered poster board at your home - when there are too many things to look at the mind doesn’t rest and doesn’t know where to focus. You need your reader to immediately know the point of your graphic. When there is a plethora of font choices jumping out everywhere then the point can get buried in the busyness. But beyond that, too many fonts doesn’t scream professional and at all times we want to distinguish ourselves as professional.

A great solution for those of you who love the different variations is to use one to two fonts and to vary the font features - that means either making some italic, some bold, some caps, some larger sizes. This technique often creates more of an impact than simply changing fonts as it is a focused effort to highlight the word or phrase that matters most.

http://bloggingconcentrated.com/bcprime

You can use color as another way to set apart the word or phrase that you want highlighted. Sometimes a stellar design technique is to choice one font, two colors, and maybe bold for a portion of it. This creates impact. Think of GAP’s logo and text. It’s not crazy busy, but is rather intent on expressing quality.

Make sure to choose a great font for all aspects of your design and then use them throughout the post. Same font for title, one for subtitles, and one for notes. And make sure that the fonts chosen within your graphics also match the feel of your site.

What’s kerning? Kerning is the adjustment of the white space between the letters. On platforms such as Photoshop and Gimp you can adjust the kerning. Take time to work with the kerning and adjust the space so that the eyes can quickly discern the words and phrases. Tracking is the adjustment of the letter space in the entire text. More than often on images you will only be concerned with kerning.

http://bloggingconcentrated.com/bcprime

That image for flickering lights is perhaps one of the best examples I’ve seen of kerning, or shall I say, lack of kerning.

By the way, if you use blue as a text it might be mistaken as a link - even on a graphic - so use it carefully. Oh yes, and let Comic Sans go....there are many many many many many more options. That’s just my own personal opinion, but you know, sometimes that’s important. The second one that is overused? Papyrus. You can let that go as well.

If you are using more than one font then limit the color or variations. In fact, try to only use three variations total in your design - this is the Rule of Three. When in doubt about fonts - just remember these four facts.

http://bloggingconcentrated.com/bcprime

These are some simple things to get you started in your image thought process. Over the weeks to come watch for some short tutorials on color, font selection, spacing, and basic design. Watch for them in the BC Prime inbox and on Free Weekly Mastermind

The bottom line? Have fun. Images are an expression of you, your brand, and your site.

http://bloggingconcentrated.com/bcprime

Tools

If you go back and change images on old posts and want to post them on facebook oftentimes the image doesn’t adjust to reflect the new image. Anytime you update a post or change the featured image take a minute and run the post in the Facebook Developers Debugger Tool.

https://developers.facebook.com/tools/debug/

Editing Software

http://picmonkey.comhttp://quozio.comhttp://evernote.com/skitch/http://gimp.comhttp://pixlr.comhttps://www.canva.comhttp://www.photoshop.com

ResourcesGraphic Stock: http://graphicstock.refr.cc/3J7SG9Phttp://www.shareasale.com/r.cfm?b=509754&u=571254&m=46133&urllink=&afftrack=

Image Sources

Tough Mudder: http://www.rtscommunications.com/wp-content/uploads/2013/08/tough-mudder-orange-border1.jpgNike: http://nikeinc.com/pages/careersKerning: http://blogs.wayne.edu/knktypography/Udi’s: http://udisglutenfree.com

http://bloggingconcentrated.com/bcprime

Some Extra Thoughts on this image by Udi’s Gluten Free.

Fonts: Two Colors, Two FontsMessage: Create a Clever Food Hack - the orange overlay directs the eye to that immediately after reading the phrase, “what the hack?”Space: The left and right margins have enough space for the eye to rest.

The only thing I would love to see added would be an Udi’s logo somewhere. If this wasn’t on the homepage you wouldn’t know it was Udi’s at any point since there is no logo and no url to direct to. Don’t forget to include a way for them to find you. Maybe you put your twitter handle, website address, or logo. Those benchmarks help to distinguish you. Also, when adding your info, consider placing it in the middle of the graphic in a place where it remains discreet, but also where it cannot be cut out. Oftentimes I will included the Blogging Concentrated logo in the middle in a spot that makes it impossible to move.

Why this extra thoughts section? Take time to find images that you like and go over these steps to figure out what works, what you like, and what you think should be different. Spending this time will help you understand which images work and will also help you hone in on your own brand and design aesthetic.

http://bloggingconcentrated.com/bcprime