Category Archives: Creativity

When Size Matters

As designers, when you are asked to create graphics or edit photos for a project what questions do you ask?

There are many design considerations that jump to mind:

What message needs to be conveyed?

What’s the color scheme?

Is there a predefined style book to follow or corporate standards for fonts and colors?

There are so many creative questions to ask to meet and match the needs and branding of a project or client, but as they say the devil can be in the details. The details that should be near the top of the list is how is each asset going to be used, and what is the biggest the size each asset needs to be.

Raster Images

Raster images, which are pixel-based images, like photos, scale down well, but scaling them up can impact image quality. There are some artificial intelligence driven software products that can do some impressive work enlarging pixel images, but it’s still a process of interpolation and estimation to create the new extra pixels, it’s better to try to create the original image at the size needed or bigger.

Vector Image

Now, vector images can be resized without impacting image quality, but sometimes the final destination(s) of the asset will require creating raster version(s) of the asset, like saving a copy of a .SVG or Adobe Illustrator file (.AI) as a .JPG. In this case, you’ll want to know the size to make each version.

File Size

The other dimension of size, particularly important for images heading to the web, is file size in kilobytes, megabytes, or gigabytes, because that size will impact the speed in which an asset will download to a browser. I’m sure we’ve all visited sites where images and videos were incredibly slow to render in our browsers.

Example

Here’s an example, say you are posting something on your own blog and what to include a feature image, and that image is going to be a photo you took while on vacation. I have a photo I took of the Boston skyline, its RAW image from the camera was 6000 pixels by 4000 pixels and was a 23 MB file. I brought it into Photoshop to edit it and when I saved a JPG copy it was JPG 12.3 MB at 6000 x 4000, but why would I want to put an image 6000 pixel wide on a web page when even a hi-def monitor usually tops out at 1920 x 1080, and many people are still using monitors that are 1200 x 1080 or even less. I know it’s a lot of numbers, but let’s make it simple, I’d be happy with an image that is 600 pixels wide, so I’ll reduce the image to 600 x 400 and save it as a high quality JPG, that’s only 10% or 1/10 the size of the full size JPG, but my new file is only JPG 244 KB 600 x 400, not 1.2 MB, that’s 98% reduction in file size. Now, when saving a jpg you can choose the quality from 1 -12, 12 being the highest quality. If I save the image as a JPG with a quality of 10, I get a file size of JPG 141 KB 600 x 400, and at 8 and get JPG 101 KB 600 x 400, which is less than 1% the size of the full size jpg.

Here are all three 600 x 400 JPGs, can you see a difference?

Boston Cityscape 600 x 400 Quality 12
Boston Cityscape – 600 x 400 – Quality 12 example
Boston Cityscape - 600 x 400 - Quality 10
Boston Cityscape – 600 x 400 – Quality 10 example
Boston Cityscape - 600 x 400 - Quality 8
Boston Cityscape – 600 x 400 – Quality 8 example

Now, if I was sending this to print, then I’d only crop the image to the size I want and wouldn’t worry about how many megabytes the file was.

How About Video?

This same type of example works for video too. We shoot video, today’s cameras can shoot video as high definition (HD) at 1280 x 720, full high definition (FHD) at 1920 x 1080, 4k at 3840 x 2160, and even 8k at 7680 x 4320, but editing software can render your videos to custom sizes too. If you are creating an eLearning module in Storyline or Captivate and plan to embed it into the project, check the size or resolution of your project, I’d bet it’s smaller than HD. With video files it’s easy to jump from file sizes of megabytes to gigabytes very quickly, so properly sizing your video shouldn’t be overlooked, and just like JPGs, you can also render videos at different qualities to find the perfect balance between files size and video image quality, and also like JPGs, a little reduction in quality can be a big savings in file size.

What Size Do You Need?

Well, if it’s your own project and you’re not being given specs, then here’s one simple-ish method.

Have you ever noticed the “Print Screen” button on your keyboard? Have you ever used it? I use it to figure out graphic sizes for the web all the time. The “Print Screen” button will copy your screen into memory and you can paste the image into any photo editing software, even MS Paint. Now, you can go to your website, pull up your blog, “print screen”, paste that image into your photo editing software, now you’ll be seeing your website in the software, then using the selection tool – make a selection that you determine to be the right size to place an image into, and crop the image of your website down to that selected area. At this point, either your software should be able to show you the dimensions of the cropped image, and that’s the size you want. If your software doesn’t show this, save the image, navigate to the folder with the image file in it, and your OS should have a way to show you the dimensions, on a PC it would be right-click on the file, click “Properties”, and then click the “Details” tab.

What issues have you found balancing quality and file size? What other file or format issues would you suggest new designers explore? 

Hacking Your Inner-Critic for Creative Inspiration

Al Conant

When we think about our inner-critic, you know that annoying internal voice that tells you everything that you’re doing or have done is wrong. That voice that makes you second guess yourself. That voice that sometimes just won’t stop. It’s hard to think about that voice as anything but a negative obstacle to overcome, but I assure you, you can put it to use.

First, what else does that voice do? It also likes to play the part of the Monday morning quarterback with perfect 20/20 hindsight and proceeds to list all the ways you could have done things better. Think of all the cognitive power that your inner-critic uses against you in coming up with these “better” alternatives to everything you’ve done. Imagine if you could harness that in some way.

Well, have you ever watched a movie at the theater and you get so taken in by the story that your heart pounds during a car chase, you tear up at the loss of an endearing character, or you hold your breath awaiting the hero to complete a near-impossible task? Think about those experiences for a minute. You know you’re in a theater, you made a plan to go, you bought a ticket, hit the concession stand, and found your seat, all the while knowing to are going to watch a movie that was shoot, produced, edited, written or adapted, and the only real action happening in the theater is in the internal workings of the projector, yet a good movie can make you feel all kinds of emotions and even trigger physical responses.

How does this happen?

There is a term for this, it’s called the suspension of disbelief, and during this mindset, you put aside your conscious-critical factor, your inner-critic, which allows you to enjoy your movie-going experience. Now, your inner-critic is still there, but it will be quiet as long as the film doesn’t make a mistake that wakes the critic up. If you can see the strings holding up the rocket ship, if the storyline dramatically changes in the wrong way, if character actions don’t match the character development, if the movie does something that doesn’t make sense to you or that you think is just bad, then that inner-critic will wake up. However, when it wakes up it’s not criticizing you, it’s criticizing the movie and it’s also generating ideas on what the filmmakers should have done. When that voice criticizes you it is often a more emotionally charged experience, it can be easy to forget that that voice is waiting to criticize everything and everyone.

This is where the hack lies.

When looking for inspiration you can look at the exemplary works of others and generate a list of things you like, but the list will mostly contain what the others did right in their work. Great artists, creators, and thinkers can be sources of inspiration, however, we also become aware of the creative and/or intellectual distance between us and them, which usually leaves us in awe of the other and not in a position to criticize or to postulate improving on the other’s work. You must know where I’m going by now, right?

I’m suggesting you find inspiration by exploring mediocre and outright bad examples of other people’s work. Feed your inner-critic, give it things to criticize and it will give you ideas on how you could do it better. This will help you identify mistakes you might not even be aware of,  generate a list of things not to do, and a list of alternative solutions. Also, even in the worst examples of other people’s work, it’s rarely 100% bad. What I mean is that a bad film could have a great story but the production value was terrible, conversely, a film could have amazing cinematography and special effects but have a weak story or no character development. You could find a great seed of an idea in bad work, and because you consider it bad, your inner-critic will get to work pointing out everything that is wrong and how you could do it better. Put your inner-critic to work for you, keep it busy (maybe it’ll go easier on you), and find the inspiration for your next project.

What’s your opinion? Do you have any inspiration strategies or hacks? Leave a comment below.

Post Categories: