SamplePromo2 Tea box, with shadow, no background

Custom Graphics and Images

Overview - Custom Graphics and Images

This post describes different ways that photos, images, and graphics can, and should, be used.  This is for direct use on a website, such as for products in an ecommerce application, or using the images for advertising or promotion, either on other sites, such as Facebook, or in email, or even in print.  It also describes services that Websites by KTS is offering as either part of a website built for you or for independent use on an existing website or as part of a campaign. 

In the various images and graphics below, unless indicated otherwise, the photos were taken by me.  A few stock photos, to which I have use rights, have been used.  Many more stock photos are available to me.  

Clicking on the images will show larger versions.  Most of the larger images in the first three sets (that is, all but the Promotional Graphics – Sample 3) are actually reduced to a horizontal size of 640 pixels from the much larger originals.  The larger ones would, of course, be available for use.

Using Product Photos

Product photos should give the visitor a chance to clearly see what the website is selling.  The photos should provide enough detail that the visitor feels comfortable that they are making the right choice.  The photos should also showcase the product in such a way as to both make obvious how it’s used and to generate a desire to have it. 

The details to provide will vary with the type of product. 

For example, food that has a nutrition label, should clearly show it, either in an image, as being demonstrated here, or in the text of the product page, or both.  

For clothing, details of decoration, construction, sizing, etc. should be shown. 

Here's a set of product photos

This is a single set, representing one product and would be on a single product page.  As you can see, it’s tea. 

These images are grouped in a gallery (convenient for this page) and show an enlarged version of the image on clicking.  Other methods use a hover-to-zoom, which works fine, but can sometimes be distracting to the user. 

They are shown with captions displayed.  That’s not always necessary, but it can be helpful to the visitor in selecting which images to look at more closely.  

The images include all of the interesting parts of the product labeling on the box (but not on the packet – from a different type of tea), and examples of the result – that is, a cup of tea.  They don’t include pretty pictures of people relaxing with their cup of tea.  They could, but that would probably be too much, especially for this sample product.  

Photos of the product in use, to make it more real and more desirable, would be useful for some types of products.  Other types of images, such as a teacup being brewed, or even the tea being harvested and produced, might be useful, especially if this were a custom or specialty product.  

These particular photos are as they were shot.  Below you will see some of the same photos with the background removed.  That style could also be used on a product page, or could be further edited to have custom backgrounds. 

Promotional Graphics

Here are several sets of promotional graphics that incorporate the same photos as used for the Product Photos samples above.  These graphics could be used directly on the website, incorporated in email campaigns, or used for advertising and posting on other sites, such as Facebook, Instagram, etc.  and would be fully suitable for print media. 

The different sets have been generated using assorted programs that Websites by KTS has under subscription.  Similar graphics could be used for your product pages or promotional materials, whether digital or hard copy. 

Promotional Graphics - Sample 1

As you can see, two different layouts are used in these samples.  The two layouts selected are the same size, but many other sizes and shapes are available.  Other types of layouts are available and they can all be modified and have custom colors applied to match your brand identity.  

The first pair shows the central photo with and without the photographic background.  Either works, although I prefer the second one, without the background. 

The next four use the same general layout, but with two different choices for the main photo and other variations. 

Samples 3 and 4 differ only in the photograph’s background for the bottom middle image. I again prefer the one without the background. 

Samples 5 and 6 use a different main image, both use the bottom photo without the background.  They differ in the addition of a shadow for the main image, giving it a little more pop.  I prefer the one with the shadow. 

Before developing graphics for your use, we would discuss your needs and preferences.  The graphics would then be developed for your approval. While my preferences would influence what would be included in the proposed graphics, you would have both a range to choose from and final say in what gets used. 

Promotional Graphics - Sample 2

These three graphics were generated with another program to which I have a subscription.  As with the Promotional Graphics – Sample 1, many templates and stock images are available.  The background image in the first graphic and the image in the third are stock images.  

The original of the first graphic, which is sized as a Facebook ad, is actually much larger than is suggested by either the thumbnail or the zoomed graphic.  The original is 1200 x 628 pixels. The second and third graphics are originally 940 x 788 pixels. 

Promotional Graphics - Sample 3

This set of graphics uses a third subscription service.  That service enables common components to be used in a variety of layouts.  It suggests various size graphics for different applications  

Some of these samples are labeled with the suggested target application: Pinterest, blog post, Google Post, Reddit.  Others are just selected based on shape and size.  

The application limits editing based on its design principles to avoid bad design.  

It readily provides a common design visual or brand identity across multiple platforms. 

Unlike the previous sample graphics, the zoomed versions of these are the actual size produced by the application.  

The only stock image incorporated here is the background image of loose black tea in the last graphic.  Many other stock images are available.  

Ask Yourself These Questions

Did You Answer Yes to Any of Them?

If so, then let’s address the issue! 

Let’s talk about my building that website, augmenting a website, providing photos, or providing graphics. Hit that big button!