exporting-from-photoshop.md

layout	title	desc	hide_show_for_marks	markbot_submit	extra_tutorials	steps
lesson	Exporting from Photoshop	A quick look at properly exporting raster graphics from Photoshop.	true	true	title url Preparing images slide deck /courses/web-dev-3/preparing-images/ title url Website file organization organization title url highlight Images for the web image-formats true	title before folders after notes Download & set up files To get started on this project we need to download a few raster graphics that we can manipulate & export. ### [Download these files.](https://assets.learntheweb.courses/web-dev-3/exporting-from-photoshop-download.zip) Now create the following folder structure on your computer: label type exporting-from-photoshop folder label type indent assets folder 1 label indent notes mars.jpg 2 The file you downloaded label indent notes rpg.png 2 The file you downloaded label type indent prod folder 1 label indent notes unicorn.psd 2 The file you downloaded label type indent www folder 1 label type indent images folder 2 The folders are used for the following purposes: - `assets` — for files that are sourced or downloaded from another location that aren’t ready to be exported. *These files usually need to be credited to the author because you didn’t create them.* - `prod` — (short for `production`) to keep perfect assets ready for exporting, in case they need to be changed - `www` — this is your GitHub repository, where all your HTML & CSS files are (we’re not using GitHub right now) - `www/images` — this is where the exported, smushed files go **Photoshop documents SHOULD NEVER be committed into your GitHub repository.** label text Naming conventions Don’t forget to follow the [naming conventions](/topics/naming-paths-cheat-sheet/#naming-conventions). label text Older is sometimes better Photoshop has some newer ways of exporting graphics—that may work really well for mobile apps but are inferior for The Open Web. - `Generator` is okay for lots of tiny assets, but isn’t ideal for good compression. It also messes with layer names. - `Export As…` is a newer version of generator but removes file size controls that are so essential so saving for the web. So we’re going to stick to the `Save for Web…` option because it is still the best tool—even though Adobe wants us to think otherwise by labeling it as “Legacy”. title before folders after notes Exporting a JPG JPG is a lossy format, meaning the exported file cannot be opened again because it has lost much of the information—**always save the PSD for JPGs you export!** ### Save the JPG as a PSD We want to maintain as much of the original document as possible and PSD can do that. JPGs are throw away graphics—they should never be edited after they’ve been compressed for the web. Make sure to put this PSD in your `prod` folder: label type exporting-from-photoshop folder label type indent assets folder 1 label indent notes mars.jpg 2 This file should never be touched again label indent fade rpg.png 2 true label type indent prod folder 1 label indent notes mars.psd 2 This file is the one we edit label indent fade unicorn.psd 2 true label type indent fade www folder 1 true label type indent fade images folder 2 true ### Resize to the right dimensions Change the width of the graphic to `2000` pixels for this example. The “Resolution” should be `72` because browsers literally don’t understand resolution.  *We’ll talk a little more about retina graphics next week.* ### Save for web Next up we’ll use the best exporting tool: `File > Export > Save for Web (Legacy)…`  #### Save for web settings The “Save for Web” dialog presents a bunch of great settings to help use reduce the file size as much as possible.  **Our goal is to make the file size as small as possible without compromising the quality of the graphic too much.**  Watch this file size here while adjusting the quality—anything above `250 KB` should make you feel sick to your stomach.  Because the image is extremely detailed and complex we can reduce the quality quite a lot without noticing too much degradation. *If this were a human or animal pay special attention to the face and eyes.* Also note these settings: - Check “Progressive” - Un-check “Embed Color Profile” - Check “Convert to sRGB” - Set “Preview” to “Internet Standard RGB (No Color Management)” - Set “Metadata” to “None” Press the “Save” button and put it into your `images` folder.  *Also make sure to save the PSD—all the Save for Web settings are stored in the PSD so that if you have to re-export the graphic everything is remembered.* label text Save the PSD Never edit the JPG in Photoshop after you’ve exported it—always go back to your original PSD file. title before notes Exporting a PNG We can use the PNG format for graphics that are too complex for SVGs—but try to use SVG first. **Always keep the PSD for graphics you’ve exported in case you want to edit them later—never edit from the PNG file.** Open up the `unicorn.psd` graphic—it’s already saved as a PSD for you; the dimensions are correct; and the resolution is set at `72`. So we’re ready to “Save for Web”. **Choose PNG-24.** The format supports millions of colours and 256 levels of transparency.  Notice these important settings: - Check “Interlaced” - Un-check “Embed Color Profile” - Check “Convert to sRGB” - Set “Preview” to “Internet Standard RGB (No Color Management)” - Set “Metadata” to “None” Press the “Save” button and put it into your `images` folder.  *Also make sure to save the PSD—all the Save for Web settings are stored in the PSD so that if you have to re-export the graphic everything is remembered.* label text Save the PSD Never edit the PNG in Photoshop after you’ve exported it—always go back to your original PSD file. title before folders after notes Exporting a PNG-8 If the graphic has only a few colours and rasterization of the graphic is important, we can use a PNG-8. The PNG-8 format only supports 256 different colours. Photoshop’s implementation is broken and only supports 1-bit transparency (like a GIF) but other applications, like [ImageAlpha](https://pngmini.com/), can give us 8-bit transparency. **Always keep the PSD for graphics you’ve exported in case you want to edit them later—never edit from the PNG file.** Open up the `rpg.png` and immediately save it as a PSD. label type exporting-from-photoshop folder label type indent assets folder 1 label indent fade mars.jpg 2 true label indent notes rpg.png 2 This file should never be touched again label type indent prod folder 1 label indent fade mars.psd 2 true label indent notes rpg.psd 2 This file is the one we edit label indent fade unicorn.psd 2 true label type indent fade www folder 1 true label type indent fade images folder 2 true The dimensions and resolution are good, so we’re ready to “Save for Web”.  When saving as a PNG-8 we want to reduce the number of colours as small as possible without compromising the quality of the graphic. In this illustration, `17` colours seems to be perfect. Notice these important settings: - You can play with “Perceptual” and “Diffusion” to control the dithering—but it won’t make any difference for this graphic - “Transparency” doesn’t need to be checked because we don’t need transparency for this graphic - Check “Interlaced” - Un-check “Embed Color Profile” - Check “Convert to sRGB” - Set “Preview” to “Internet Standard RGB (No Color Management)” - Set “Metadata” to “None” Press the “Save” button and put it into your `images` folder.  *Also make sure to save the PSD—all the Save for Web settings are stored in the PSD so that if you have to re-export the graphic everything is remembered.* label text Save the PSD Never edit the PNG in Photoshop after you’ve exported it—always go back to your original PSD file. title before Smush the files We want to make the images we use on the web as small as possible—Photoshop only does part of the job. Next up we need to drop the images into [**ImageOptim**](https://imageoptim.com/mac) to really reduce their file size—it won’t reduce the quality in any way.  You don’t have to save the files or anything, ImageOptim will just overwrite your graphics with ones that are smaller size. *If you’re on Windows you can use [FileOptimizer](http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer) to perform the same task as ImageOptim.* **Now we have super small, super optimized graphics for our website that will help it load quickly.**