Let’s Talk Graphics

Let’s Talk Graphics

As Website Coordinator at Calgary Arts Development, I deal with a lot of graphics and images. Some of these we produce internally, but a large amount we use are sent to us from people and groups. From announcements and classifieds to event listings and directory submissions, everything comes with graphics. Unfortunately, there are often issues with these graphics which we need to resolve and in some cases images are unusable.

In this fieldnote, I will attempt to explain some of the pitfalls which can happen with digital images and even provide some resources which may help folks while they are submitting content, and are useful to have in general.

Resolution

Resolution is quite simple. Most website graphics are presented at 72DPI (dots per inch). You can save pictures higher than that amount (printed images need to be 300DPI) but websites will portray them as 72DPI. What does this mean for you? Well if you send in a larger image at 300DPI, it simply means an image can be zoomed-in and made bigger on screen. We don’t really use that ability on Calgary Arts Development’s site but if we did it would still look sharp as we zoomed in.

Conversely, if you zoom in a picture displayed at 100% ratio, provided at 72DPI, it will look blurry and fuzzy as you zoom in. For graphics folk that term is known as lossy.

So this means an image created at 72DPI will only look good at the size it is sent to us. So if we receive a small thumbnail size image, and needs to be enlarged on a screen, it will begin to lose quality.

Below, see how the same image which is blown up slightly on-screen, begins to lose its quality and the edges start to get fuzzy and lossy.

Calgary Arts Development logo at 350x321 at 72DPI

Dimensions

Generally, the Calgary Arts Development website uses feature images, the dimensions of which tend to be 800 x 600 pixels. This means if we receive an image much smaller than this, and we have to push it up to those dimensions, we can do a couple of things. One is to publish the image and force our dimensions, which will display a low-quality image. Or sometimes we can keep the image the same size and create a large border. This works but isn’t always the greatest look with logos and photographs, and requires extra steps on our part.

The larger size also helps us with modern websites, as the content is scalable for different devices and screens. So a small image on a phone may work well, but scaled up to a large monitor can lose quality. This is why resolution and dimensions work together.

Tools

All this is great, but what if you don’t have a graphics or marketing department who has designers? What if the image you need to send is all you have? What if you don’t have the budget for Creative Cloud from Adobe? If you are an emerging artist or a small non-profit organization perhaps you have little need for a full graphics suite to pay for it.

Well, there are alternatives and drum roll… many of them are free.

A lot of the time images and graphics come as they are because that’s all you have, and no manor of graphic programs will help. But for those who have images available and need to send something in with your classified or event listing, you can use one of these free programs to do everything from scaling to cropping and anything else which is sometimes needed. They are handy and powerful graphic manipulation applications for use in their own right.

GIMP

GNU Image Manipulation Program (GIMP) is free, open-source software which has many of the features of a full graphics program like Photoshop. Certainly, it has more than enough to get anyone started with cropping, scaling, resizing and making other graphic edits.

There’s a learning curve to any program, but they even have different tutorials for beginners and other levels. To find out more, or download the program visit gimp.org and check out their tutorials on cropping images.

Krita

Krita is also a free and open-source program, created by digital artists to allow people who want access to a full painting application to be able to have one. Like GIMP this will have way more features than you generally need, from layers and PSD integration, but for scaling, cropping and light editing this will do the job just as well.

It also has good learning support. To find out more, visit krita.org.

Using programs like these will allow you to make use of your graphics, and even create them from scratch. To crop images becomes easy with tools like these and shrinking them down from original files for assets like logos and branding.

A sample of cropping

Both of these programs work on Windows and MAC operating systems. There are other applications which will also work well, all with pros and cons, such as only being compatible on PCs or being exclusively web-based. So check these resources out and see if they work for you.

With them, you can improve your own graphics and your submission practices.

A photo of Nick Heazell

Nick Heazell is the Website Coordinator at Calgary Arts Development. Chances are if you have digital content—from classifieds, to news, to stories, and more—he will post and publish it.

Nick studied information design and illustration which he uses to create and sell geek-culture t-shirts, and chances are good they are themed around Star Wars, for which he is obsessed. 

The rest of the time he spends with the rollercoaster which is his little family.

Share this page
Share