File Formats PDF

FILE FORMATS Raster VS Vector files Most important difference between raster and vector files is that raster files are made up by a set number of pixels, while vector files are made up by “formulas”. That means that when you display or print raster files larger than their original size, those pixel...

FILE FORMATS Raster VS Vector files Most important difference between raster and vector files is that raster files are made up by a set number of pixels, while vector files are made up by “formulas”. That means that when you display or print raster files larger than their original size, those pixels will become visible. Especially around curved edges. Vector files can be printed on business card or billboard size, both will remain sharp. Raster file formats There are several formats, we’ll review the most important ones in Photoshop ( PSD, JPEG, PNG, GIF, TIFF, EPS, RAW, PDF). Which one that is best to use depends on different factors. What is the purpose of your file? To print, for web use, as a workfile? Most important factors to decide which format suits you best are: - Filesize: is there a file size restriction? Is it for web use or to email to someone? - Quality: does it have to be in the best/original quality (lossless)? - Transparency: does it need transparency? - Compatibility: is it in a format that is compatible with the intended use (print/web/email/…) PSD (Photoshop Document): - Native Photoshop file format, that is basically used as a work file format or to interchange with other Adobe programs like Illustrator or Indesign. Use this as a master file. - Lossless format - Supports layers - Supports all Photoshop properties and effects - Large filesize JPEG (Joint Photographic Expert Group)  - Common format, for wide range of uses (mostly viewing and sharing), often used for web - Lossy format: quality depends on the amount of compression. Once saved, the original quality is lost for good. Low quality settings create artifacts. - Sub options in PS: Baseline, Baseline (optimized) and Progressive (normal vs progressive) PNG (Portable Network Graphics) - Typically used as a better replacement for JPEG or Gif - More colors than JPEG, 256 transparancy channels - Lossless - Relatively small size - Not supported by older browsers and printers (doesn’t support CMYK color mode) GIF (Graphics Interchange Format) - Typically used for web graphics (f.e. logo’s), less useful for photos. Also used for gif animations and stickers - Lossy, because of limited color pallet of 256 colors (f.e. jpeg supports millions of colors) - Supports animation and one level transparency - Small file size - Options in PS: Dithering, Interlacing, … TIFF (Tagged Image File Format) - Offers the same possibilities/properties as PSD: lossless, layers, high quality, large size… - Universal standard for commercial printing EPS (Encapsulated Postscript) - Another print industry standard, that requires a preview image embedded to use in layout program - Encapsulates the image file, but this format can also hold vector data PDF - Ideal for viewing, sharing and printing - Same features as a PSD and TIFF and can be lossless or lossy RAW - Format, typically used in photography - Contains all the raw image data from a digital camera or scanner  - Larger range of colors and light intensity https://www.photoshopessentials.com/essentials/file-formats/ Export options in Photoshop: Adobe Photoshop offers several options for exporting images, each with its own advantages depending on your specific needs. Here are some of the most used export options: 1. Save As (File > Save As): This option allows you to save your image in various formats such as PSD (Photoshop Document), JPEG, PNG, TIFF, GIF, and more. The advantage of using Save As is that (with formats that support it) it preserves all the layers and editing capabilities of the original PSD file. This is useful if you want to retain the ability to make further edits later. The disadvantage is the size that can be very large in multilayered files. 2. Export As (File > Export > Export As): Export As is ideal for saving images for the web. It provides options to optimize the image for web use, such as setting the format, quality, and dimensions. It's efficient for creating compressed web-friendly images with smaller file sizes. 3. Quick Export as PNG (File > Export > Quick Export as PNG) or Quick Export as JPEG: These options are useful for quickly saving your image as a PNG or JPEG with default settings. It's a fast way to save a copy of your image without diving into extensive export settings. 4. Export for Web (Legacy) (File > Export > Save for Web (Legacy)): This feature is useful for optimizing images for web use. It provides a wide range of settings for optimizing image quality and file size. You can preview the image at various quality levels and export it in formats like JPEG, PNG, GIF, or WBMP. 5. Export Layers (File > Export > Export Layers to Files): If you have multiple layers in your PSD file and want to export them as individual images, this option is very handy. You can export each layer as a separate image with a variety of file formats. 6. Artboards (File > Export > Artboards): If you're working with multiple artboards in a single document, you can export them individually using this option. This is useful for creating designs for different screen sizes or devices. 7. Generator (File > Generate): Generator is a feature that allows you to set up layer names with specific file extensions, and Photoshop will automatically export these layers (in a separate folder) when changes are made. It's useful for creating web assets that need to be constantly updated as you work on the design. The advantages of these export options vary depending on your workflow and requirements. For example: - Save As is best for preserving layers and editing capabilities. - Export As is great for quickly optimizing images for the web. - Export for Web (Legacy) offers advanced optimization settings for web images. - Export Layers is useful when you need to export multiple images from different layers. - Artboards are handy when working with multiple screen sizes or variations. - Generator streamlines the export of assets that need frequent updates. Choose the export method that best suits your project's needs and goals. Vector file formats For vector files, there are less options. There are some application or platform specific formats, but most used formats are AI, EPS, PDF and SVG. AI - Adobe Illustrator format, that is typically used as a “master” file - Works fine in other Adobe programs, “legacy” versions up to 8 also work with a lot of non-adobe programs EPS (Encapsulated Postscript) - Older format, that doesn’t have all the properties of an AI file - Encapsulates the vector, just as an image PDF (Portable Document Format) - Ideal for exchange across platforms and programs, supports al AI properties SVG (Scalable Vector Graphics) - XML base format (mark-up language that is readable both by computer and human) - Ideal for use on the web, supported by most modern browsers - Scalable, so ideal for responsive webdesign - Doesn’t support special layer properties or effects - Kind of the JPG of vector graphics https://www.adobe.com/cy_en/creativecloud/design/discover/vector-file.html Export options in AI : - Save as or Save a copy offer about the same formats - The Export option offers 3 options: o “Export as…”: allows you to export multiple Artboards in multiple screen formats and sizes o “Export for Screens…” : export as a raster image or other vector format o “Save for web (Legacy)…”: Similar as in photoshop, export for web use FONT FORMATS: Fonts come in a range of formats, depending on platform and use. We’ll have a look at the 2 most common used formats today (for print): TTF (TrueType) and OTF (OpenType) TTF (TrueType) was developed by Apple as an answer to another existing standard of the time, the PS (postscript) fonts (developed by Adobe). It offers vector outline fonts, that render as well onscreen as in print. A big improvement on “bitmap” fonts that were used on most computers of that time, and compatible with both Mac and Windows platforms. OTF or OpenType: Is a newer version of TTF, developed by Microsoft and Adobe, but also supported on the Mac platform. Always use the OTF version of a font when available, because OpenType fonts can contain more than 65,000 glyphs, which allows a single font file to contain many nonstandard glyphs, such as old-style figures, true small capitals, fractions, swashes, superiors, inferiors, titling letters, contextual and stylistic alternates and a full range of ligatures. A special version, the Open Type SVG font even allows for different colors and styles integrated in a font. See https://helpx.adobe.com/fonts/using/ot-svg-color-fonts.html A few other formats exist for a specific use and are less interesting to use as a “work” font because they are not supported in programs like Illustrator or InDesign. For instance, when you want to embed a non-standard font on a website, you will need the WOFF (Web Open Font Format) or WOFF2 version of your working font. It’s essentially a wrapper for TrueType and OpenType formats that compresses the fonts, providing faster load times and better compatibility across different web browsers. Most “type foundries” will offer the different formats of the same font as a package. Choosing the Right Font Format for the Job When it comes to selecting the right font format for your project, there are a few things to consider, the first of which is the final deliverables of your design project. Since different formats work better on different platforms, you’ll need to ensure the font you pick is compatible with — and optimized — for the platform your work ends up on. Print Design Projects If you’re a graphic designer working on projects that will end up in print, the formats available to you are narrower. Most desktop applications, including the Adobe suite and other popular design tools, only support TrueType and OpenType font formats. Best font formats: TTF and OTF Less optimal formats: SVG Incompatible formats: WOFF App and Interface Design Projects Nearly any product designer will tell you that selecting the right font for a digital product is integral to its success. Interface designs often have higher legibility requirements than a document or website. Since users potentially read the same text over and over, interfaces require crystal-clear typography. Given the widespread availability of apps across desktops, mobile devices, and the web, the right font format isn’t always clear. While TrueType and OpenType fonts remain the best and most accessible options if you’re designing apps for the web, the best option changes to WOFF. SVG fonts are less supported on the web (only 17% compatibility score). Best font formats: WOFF, TTF and OTF Formats to avoid: SVG Web-Based Design Projects While you don’t need to be a developer, you do need some knowledge if you’re designing for the web. For starters, knowing what kind of browsers your audiences use impacts what font format you’ll choose and use during the design process. For modern browsers, WOFF offers the best performance and availability. Older browsers that lack support, on the other hand, may require you to embed an OTF or TTF font. Some designs might require both approaches. The safest option is to use the “safe web fonts”. Those are fonts that are already present on most platforms. There is no definitive list, but most common fonts are Arial, Courier New, Times New Roman, Comic Sans, Impact, Georgia, Trebuchet, Webdings and Verdana. The SVG font format is better left to design-only applications. While some older browsers still support it, most modern implementations have dropped support in favor of WOFF. Best font formats: WOFF Less optimal formats: TTF and OTF Formats to avoid: SVG