No matter what kind of project you are working on, knowing what kind of file type will work best for your needs will save you from headaches later on. I compiled a list of the most common file types for designers as well as the significance and use of each.
Unearth your brand personality to stand out. Take the FREE Brand Archetype Quiz!
What is a File Extension?
A file extension simply means the ending of your file name, such as hello.xyz. The xyz aspect of your file is considered the file extension and will identify how exactly your file will be used.
Different file extensions can also only be opened by certain programs, so knowing ahead of time what file type you need is important. The last thing you want to have happened is to save your work as the wrong file type which may prevent customers or others from opening it effectively.
Common File Extensions and What They Mean
Below are common file extensions (file types), some of which you might come across when you work with a designer.
.png
PNG stands for Portable Network Graphics and are commonly used for graphics and icons. These low-resolution files are easy to edit and do not lose their quality. That said, you will not want to upload images, like a photograph, as a PNG on a website as they tend to be a heavy file size when compressed compared to compressed .jpg.
.jpg
JPEGs or JPGs stand for joint photographic experts group and are one of the most common file types. You can find JPGs all over the place from websites, documents, presentations, and more.
JPGs are great to use for most of your projects, but you always need to pay close attention to the resolution and size. These file types are known to lose quality as they decrease in size so being intentional about the size and resolution is important. It is also important to compress your JPGs before you upload them to your website.
.ai
AI file extensions are designs that are created in Adobe Illustrator and saved accordingly. AI extensions are typically used by designers first and foremost. That said, you may ask a design for the ‘working file’ and receive the .ai file as this is how you can quickly make changes to the design using the Illustrator software.
.psd
PSD file extensions correlate to a Photoshop document and can be opened by the Adobe Photoshop program.
If you have ever used Adobe Photoshop then you know you can create multiple layers for your different editing options. When you save your image or design as a PSD file you are also saving the layers that you created so you can easily go back and edit them. This is also a form of a ‘working file’ that a designer might supply if requested.
PDFs which stand for portable document format are the most universal file extension that can be used and opened by anyone. PDFs make transferring content without any distortion easy and quick. Keep in mind, PDFs are hard to edit, especially when it comes to designs. These should be reserved for final documents and for print purposes.
.eps
EPS file extensions stand for encapsulated postscript and is a universal file type that can be used by designers everywhere. EPS files are image file extensions that allow you to save your work while also being able to open it in practically any design software.
.ttf and .otf font files
TTF files are true to type fonts and OTF files are simply open type fonts. Both are font files and are used when you need to install a new font on your device.
TTF and OTF files can be used universally on multiple operating systems. By downloading these files and installing the fonts on your computer, you will ensure your designs stay the same.
Understanding Color Processing Basics
Just like file types and extensions, the colors you use in your image are incredibly important. There are typically two main color choices, RGB and CMYK, and both are used for specific types of images
RGB vs CMYK
There is a major difference between RGB and CMYK and knowing the difference will help you save and display your best quality graphics.
RGB stands for red, green, and blue and are colors that are recommended to be used on the web. This includes your social media posts. Saving your images with an RGB color profile will help you display your images digitally without any issues.
CMYK, which stands for cyan, magenta, yellow, and black are recommended anytime your images are being sent to print at a company.
The Essential Hex Codes
Hex codes are made up of a combination of six letters and numbers to represent specific colors.
The amazing thing about hex codes is that it allows you to use the exact same color throughout every design, by simply copying and reusing the hex code in your design program.
RESULTS THAT SPEAK FOR THEMSELVES
Download our case studies + client experiences to review the impact of our website design and brand strategy services have beyond the stunning deliverables you’ll find in our portfolio.
When to Use High Resolution vs. Low Resolution?
Low and high resolution image each have their place in the design world.
For example, one way you can easily use low resolutions, such as 72 dpi, is when you are creating graphics for your website. Although most of the time 72 dpi is considered a very low resolution, it will not affect the quality of your images on the web.
When it comes to images that are made for print, having a high resolution will provide you with a crisp and clean image. For an image that is being printed, a high resolution of 300 dpi is recommended to ensure you have a great quality product.
Easy Ways to Resize Graphics and Images
Anytime you work with images you want to have multiple ways to resize your designs without compromising the quality and resolution. Below are a few easy (and free) ways you can resize your images and graphics as needed.
Canva
Canva is a cloud based design program. It offers a free and paid version and is the simplest way to create designs as well as resize your images. You can either pick a template or create a custom size and upload your image to the platform.
Compressor.io
Compressor.io is another free tool that will make prepping your images for your website e a breeze. You can upload your image and decide whether you want to save it as a lossy or lossless image. Lossy images will allow you to save for the web and keep the file size manageably while not changing the resolution.
Bonus Tip: Don’t forget to lock the aspect ratio
Lastly, whenever you are resizing your images, it is important to always lock the aspect ratio. Lock Aspect Ratio simply means that if you change the height of an object then the width will automatically fill to maintain the proportion and prevent distortion. Or when you grab the corner of an image to resize, you can hold the shift key to prevent distortion.
