Web Design File Formats

Web Design File Formats Minneapolis

Web Design File Formats

As a Minneapolis freelance website designer, I work with a lot of different file formats. So, these web and design file formats are second nature for me. However, these files are usually new to my website clients. My day design workflow I have use and save files like: .indd, .ai, .psd, .pdf, .jpg for the different types of projects I work on.

Therefore, I put this quick design file formats guide together.

Files for Website Design and Images

Graphics Interchange Format (GIF) is a popular image format for the web. The GIF format is limited to 256 colors and supports transparency, which makes it suitable for simple graphics such as logos or buttons, but not for complex graphics such as photos.

A JPEG is a commonly used method of lossy compression for digital images, particularly for those images produced by digital photograph. I use JPEG or .JPG files for my websites saved as optimized for web from Photoshop at 72 dpi (dots per inch).

Portable Network Graphics (PNG)is an image format suitable for use on the web. It supports transparency and compression. I use this a lot for logo on websites. You can drop the logo on colored website backgrounds or web images.

A PSD file is for Adobe Photoshop. It’s a raster-based file, so it uses pixels to create an image. Saving the files a PSD allows me to keep the artwork in different layers in Photoshop.

For my website clients who want to edit, crop and save images for their website I recommend buying this software from Adobe. More information on Photoshop.

For Printing and Graphic Design

Vector graphics (AI or EPS files created in Adobe Illustrator)
They rely on computer algorithms to define paths and shapes. Vector graphics are rarely used in web design, but are very common (required) in graphic design.

I use .EPS files for logo in printing like brochures, business cards, banners and signage. You can make the logo as big as you want and it will print perfect because it’s vector based.

PDF stands for Portable Document Format, and it’s one of the older file formats on this list. It was developed by Adobe as a tool for fixed-layout flat documents.

If you get a PDF document, it should look just like the printed version of the same doc, including all of the graphics, colors, fonts, and text. I send hi-res X1-a PDF files for all my print projects.

I hope this short list of design file format definitions help you understand web and design better.

See my other article on “WordPress Design & Development Terms