Images: Adding or Editing

How to add or replace a photo

1. Determine which type of photo it is you want to add or replace. The list of image types are available on the wiki here
2. Download the photo template of that photo type from the photo-templates folder.
3. Resize your photo using the template
4. Export as a .jpg using Photoshop’s export-for-web feature. 75 is a good baseline optimization level. Name the file accordingly:
   • Home Page Hero
     • Always name these "banner--home-lg.jpg" and "banner--home-sm.jpg" for two respective breakpoints
     • You can archive old banners in a separate folder.
   • Project Cards
     • project-[agency acronym]-[project name]-card.jpg
     • e.g. project-dod-advisor-network-card.jpg
   • Project In-Page Photos
     • project-[agency acronym]-[project name]-page.jpg
     • e.g. project-dod-advisor-network-page.jpg
   • Projects In-Page UI
     • project-[agency acronym]-[project name]-ui.jpg
     • e.g. project-dod-advisor-network-ui.jpg
   • People
     • [first name]-[last name].jpg
     • e.g. hank-knaack.jpg
   • Blog Cards
     • blog-[title].jpg
     • e.g. blog-20-year-kernel.jpg
   • Press Cards
     • press-[publication name]-[month]-[day]-[year].jpg
     • e.g. press-mercury-news-06-01-18.jpg
5. Upload the exported .jpg to the images folder
6. Link the image on the corresponding content page. Follow the instructions for adding content. If you're a designer mainly handling images, you can let the content producer handle this step.

How to add or edit a vector image

1. Download one of two vector templates from the vector-templates folder. All of the existing vector graphics from the website are in these files.
2. (For editing) Copy the artboard that you want to edit and do your thing! (For adding) Copy the artboard of the size image you want to add and do your thing using the color swatches included in the template.
3. Export as a .svg using Illustrator’s export for screens feature. Name the file accordingly:
   • Page Banners
     • banner--[page name]-lg.svg and banner--[page name]-sm.svg for two respective breakpoints
     • e.g. banner--home-lg.jpg, banner--home-sm.jpg
   • In-Page Vector Graphics
     • graphic-[page name]-[image name].svg
     • graphic-how-we-work-decisions.svg
4. Upload the exported .svg to the assets folder. This is a different folder than photos, because vector graphics are more evergreen and they are housed with UI vectors.
5. Link the image on the corresponding content page. Follow the instructions for adding content. If you're a designer mainly handling images, you can let the content producer handle this step.