Posts in File Formats
How to correctly size images for your website
Don’t let your website slow down because of incorrectly sized images!

Don’t let your website slow down because of incorrectly sized images!

Sizing images incorrectly for your website can have a number of negative ramifications. Size them too small and they might look pixelated, but size them too large and they might impact the SEO for your site. Images that are too large can lead to slow load times, a higher bounce rate, and a lower SEO ranking.  

Putting time into figuring out the correct image resolution is worth your time, because high-quality visuals and a high-ranking site can say a lot about your brand. 

The trickiest part is there’s no such thing as a set size. Your feature images won’t necessarily match the dimensions of your homepage banner, full-width visuals won’t mirror blog post images, carousels will differ from collages...and so on.

 So, here are a few helpful hacks to help you figure out just what size your images need to be:

Use an extension

Tip: Chrome’s favored by most web developers and designers – if it’s not already your default browser, we suggest giving it a try! It’s especially handy if you’re in the process of building a new website.

For this trick, you’ll have to download and utilize Chrome as your Internet browser. If you don’t already use Chrome, you can download it here!

Once Chrome is downloaded and installed, you’ll also need to download Chrome’s image size extension. Once installed, you’ll be able to find out the size needed for every single element of your site.


Use the inspector tool

Another way to determine image size using Chrome is the inspector tool. This tool is built in, no extension or download needed. 

Step 1: Hit F12 or right click your mouse and go to “Inspect Element.”  

Step 2: Click on the image you’re looking to determine dimensions for, and you’ll be shown the information you need. Note that the first number is always the width.

 If you’re using another browser, you can still use this method, the process might just vary slightly -- here are a couple of video tutorials for Safari and Firefox users.

 

Bigger isn’t always better

 New to resolution? Read up on it in this blog.

Not sure which file format to use? Get the lowdown here.

In the world of print, the higher the image resolution the better. It results in a high-quality end product and has zero negative implications. When it comes to web that philosophy is flipped on its head. 

In the online world, large file sizes can hurt you --  they can slow your page load speed down, interfere with your visitors’ user experience and even damage your organic SEO rankings. You’ll want to use an image size that still appears crisp and clear – but isn’t so large that it negatively impacts your site. Here’s a few tips for striking that balance: 

  • Find out the exact dimensions you need, and resize your images in Photoshop or Canva for a tailored photo size. 

  • Try not to let large images or full-screen backgrounds exceed 1MB -- if it does, it could be a sign your dimensions or resolution are unnecessarily high.

  • The recommended width for full-screen backgrounds is 2000px.

  • Smaller images around your site - like thumbnails, blog headers and in-content pictures, should be no more than 300MB.

  • If you’ve got the option in Adobe Suite, always ‘Save for web’ -- this will ensure your image’s saved at a web-friendly resolution by default. 


Hue & Tone Creative: Websites for Greensboro and beyond

Already feeling overwhelmed? Let us handle your web design for you. Whether you want support finding the right photography for your site, resizing what you’ve already got, or building your website from the ground up, we’ve got the solution. Reach out at (336) 365-8559 or hannah@hueandtonecreative.com to get the process started!

4 reasons why your non-profit should be using Canva
4 reasons why your non-profit should be using Canva  |  Hue & Tone Creative

Canva’s an online design tool, and it’s used by millions of people around the world to help create professional-looking presentations, posters, social media images, menus and more. (You can preview their templates here). 

While we whole heartedly believe that there’s no substitute for professional design, we know it’s not always in the budget for every company or every project. Canva is a good solution if you’re working on a tight budget or pinched for time. 

In fact, we often set our non-profit or small business clients up with Canva templates so that they can enjoy branded templates without having to keep us on retainer. It may sound like bad business sense on our part – but we believe in supporting businesses of all sizes, with all different types of budgets. 

If you’re not familiar with Canva, we’ve put together a few reasons it’s worth exploring:

 

 

1.  It gives you inspiration

If you’re not a designer by trade, you’re probably stumped on where to begin when it comes to designing a graphic. Luckily, Canva is brimming with layouts for you to choose from, eliminating the need for a grand creative vision. 

Not having to start with a blank page can save you invaluable time, spark ideas you might not have originally considered, and help you complete the project with a higher quality end result.

 

2.  Professional looking pieces (for a fraction of the cost)

Because the layouts on Canva are put together by skilled designers, the overall look and feel of your projects will inevitably be more professional -- and in most instances for free!

Canva offers three pricing options, all of which are likely to prove more cost-effective than outsourcing the task to an agency. But remember, by forgoing the input of a designer by trade, you’ll be losing out on all their extra expertise, ideas, and drive (even if you are saving a dollar or two!), so consider the pros and cons carefully.


PACKAGE TYPE

Canva


Canva for Work

Canva Enterprise 

FEATURES

Simple drag and drop editor

Collaborate, design and edit with your team

Teams with 30+ members 

PRICE

Free Forever


$12.95 per month


Contact for a quote


3.  You don’t need to be an expert

There’s a plethora of design tools out there, and some are easier to use than others. Fortunately, Canva falls within the ‘easy to use’ category.

With hundreds of self-explanatory templates to choose from, simple drag and drop functionalities, and the option to access photos within the app, it’s super intuitive, so that even a novice can pick it up in no time.

 

4.  Filled with features

We won’t bother to list them all for you (you can head over to the Canva site for that), but here’s a few of our favorite features: 

  • Pre-defined social media image sizes, so you can be sure your streams look super slick

  • An option to set color palettes tailored to your business’ branding

  • The ability to organize photo and project folders within the app so that you can access them from any device

  • Advanced export options, including the capability to export your artwork as animated GIF

 

A word of warning

Canva is great – and we encourage you to test it out. But, we always push people to create consistency where possible. Whether this means using consistent colors or getting a designer to create custom elements to import is up to you. Just because Canva has endless options doesn’t mean you should use them all! Creating a cohesive look with your overall brand is important no matter what tools you use to get there. 

Now, go get creating!


Hue & Tone Creative: Your non-profit marketing partner

While Canva’s a great design tool for a DIY projects, sometimes there's no substitute for a real design expert. That's where we come in. Whether it’s a letterhead, leaflet, social media banner, or flyer, we’ve got what it takes to take your visuals to the next level. Contact us today to learn more about our special non-profit rates!

Mood Board: CMYK Inspired
Source 1  |  Source 2  |  Source 3  |  Source 4  |  Source 5  |  Source 6  |  Source 7

Source 1  |  Source 2  |  Source 3  |  Source 4  |  Source 5  |  Source 6  |  Source 7

If you work in the design or printing industry, you're probably familiar with the CMYK color mode. But for those who have never heard of it, the CMYK color model is a subtractive color model used in color printing. CMYK refers to the four inks used in some color printing: cyan, magenta, yellow, and key (black).

This color blending mode is responsible for most of the printed materials you see and interact with every day... that's why we thought it deserved a little attention! Even though we're surrounded by beautiful colors every day, we rarely stop and think about what goes in to them. 

This funky, pop-art inspired mood board is our visual ode to the CMYK printing process. We know it's nerdy... but, hey, what can we say -- we love design and color! 


Hue & Tone Creative: Color + design lovers

Does the idea of picking colors for your website stop you in your tracks? Or maybe you just can't tell the difference between two shades of blue? That's what we're here for. At Hue & Tone Creative, we can help with everything from logo design to web development to print collateral. Want to see what we've done for our other clients? Take a look at our portfolio.

EPS, AI and PDF files and Other Life Mysteries Solved

As another year comes to a close, it’s common to reflect upon our existence and the world at large. What’s the meaning of life, are we alone in the universe and what’s the difference between EPS, AI and PDF files? The first two questions are worth pondering, but in this marketing dimension, the latter inquiry is of much greater importance. Let’s take a closer look at these formats and hopefully solve at least one mystery of the world.
 

EPS, AI and PDF files and Other Life Mysteries Solved  |  Hue & Tone Creative

Encapsulated PostScript or EPS predates AI and PDF files. It and the other file formats can contain any combination of graphics, text and images. The different components comprising an EPS file are communicated in a programming language called PostScript that describes the objects in and the layout of a page. An EPS file internally contains this programming language which accounts for its main benefit: compatibility.

 

EPS has cross-platform compatibility which means it can be shared between Mac and PCs. While a EPS can be accessed on a Mac automatically, if in Windows, it requires graphic software like Adobe Illustrator, Inkscape and Corel Draw to open and edit this type of file. Also, if the file is print ready, meaning no changes need to be made, an EPS file can be sent directly to a PostScript printer without compatibility issues and to most imagesetters. It’s the original file format for complex designs and is still used by graphic designers and publishing professionals currently. However, it’s been gradually supplanted by AI and to a greater extent, PDF files. Here’s why:

 

AI or Adobe Illustrator Artwork files are vector based graphics contained in a single page. While AI files have many of the same attributes as EPS, AI is an application-native format. This means that it is designed to be understood by the software that created it. In this case, Adobe Illustrator. AI files can still be imported by other programs like Freehand or CorelDraw, but when doing so, it omits any Adobe Illustrator-specific content it doesn’t understand. Simply put, AI file formats function most optimally in Adobe Illustrator, because they were literally made for each other. Contrarily, EPS wasn’t created for any particular application. This file type is an exchange format where the intent is for it to be openable by multiple applications. Think tailored suit vs one-size-fits-all pant. While EPS is compatible with more applications than AI, the entirety of the information contained, doesn’t always translate into the chosen application. This problem led to the creation of the PDF.

 

PDF or Portable Document Format is described as the successor of EPS. The PDF was the first file format that enabled a document to be shared electronically while retaining its original formatting. No matter what application is used, you’re able to transfer electronic versions of these documents anywhere, and view and print them on any machine. It allows the exact presentation and exchange of documents, independent of software, hardware, or operating system. Unlike EPS, it translates exactly no matter what. And contrary to AI, it’s not limited by its application of origin.

 

The file type you use should depend on the project at hand, the tools in your box and you and your team’s preferences. EPS, AI and PDF files all have their unique advantages given the context and you may find yourself using each of these throughout your work.  While there are still larger life questions we all want answered, at least this one can be crossed off the list.


CREATIVE EXPERTS IN THE TRIAD

Can't figure out your mess of files? Not sure what the printer is asking you for? No worries, we'll get your businesses branding back on the right track -- we specialize in branding and collateral design. Whether you need to refresh your existing brand or start from scratch, we've got your back. Contact us if you're ready to stop stressing about your visual identity.