CREATING & DESIGNING IMAGES FOR THE WEB

DESIGN SOFTWARE

Sketch, Figma, Infinity Designer, PhotoShop, Adobe XD, Illustrator, UXPin

WHERE TO GET IMAGE ASSETS

• Need to use Royalty Free photography, otherwise, you need to cite the photographer
• Check the class resources for a full list
• Free royalty free photography - unsplash, pexels, pixabay
• Premium royalty free photography:  istockphoto, getty, creativemarket
• Royalty free icons: noun project and various other sources ( smashing magazine)
• Final photos used on a website should NEVER have a watermark.

SETTING UP THE DOCUMENT

• Work in pixels when setting up a document or graphics for the web
• Typical width is 1200px for desktop. Most design programs have canvas templates for desktop, tablet, and mobile screens
• Think about the background. Will the site be full width? Will it have a max width?
• Height does not have to be a set size and will vary from page to page
  Use RGB mode for color

THE FOLD

• The "fold" is the point in which the user has to scroll down to view more content
• The height of the fold varies depending on the screen resolution and size. It is not something within the designers/developers control
• Some clients want everything above the fold, but in reality, it's unachievable
• Research shows that users know to scroll (mobile pattern)
• Try to keep important content/navigation/login above the fold

FOLDER ORGANIZATION

• It's important to organize layers in your doc so you can easily turn off/on layers
• Create folders for each "section" and place layers that folder that appear in that section:
• Example: Background folder would have all layers that make up the background Navigation folder would have all the layers that make up the navigation graphic

OPTIMIZE IMAGES FOR THE WEB

• In Photoshop, you need to compress images for the web when saving.
• Compressing images will output a smaller image size and increase the load time of the site
• File > Export>Export As  

IMAGE FORMATS

• GIF - use for vector imagery with few colors. Only have 256 color options. Have transparency & animation options
• JPG -  use for photography or imagery that has a lot of color.  Do not have transparency options
• PNG - use for photography that has to have a transparent background. Allows multiple levels of transparency.
• SVG -  used for vectors (icons, shapes, etc..)  

GIF COMPRESSION

• Lossless: no image information is sacrificed in compression
• Converts colors within the 256 color options
• Interlacing: displays a gif  in a series of passes
• Can make animated gifs (although they have issues on some browsers and phone platforms)
   

JPEGS

• Most used image file format for the web
• Don't use color palettes (like gifs).  Display millions of colors
• Lossy: some of the image information is discarded during compression
• If an image is compressed too much, you will start to see artifacts

PNGS

• Display millions of colors
• Have the option for transparency
• File will be a bit larger than jpegs and gifs         
• Lossless compression
• Gamma (brightness) adjustment
• Interlacing: display over a series of passes         

TRANSPARENCY

• binary: pixels are either transparent or not. Gifs and pngs both support binary transparency
• alpha: Can have a percentage of transparency. Pngs only support alpha transparency.
• anti-aliasing: applies a slight blur to rounded edges of bitmapped images so make color transition smoother        

SVG (SCALABLE VECTOR GRAPHIC)

• Vector image format
• Good choice for icons, logos and other line drawings
• DON'T use for photographic imagery
• Sketch, Affinity Designer, Figman and Adobe Illustrator can create SVG files so you don't have to work in XML    

SAVING & OPTIMIZING FILES

• GIF: Reduce colors, reduce dithering(color approximation), apply lossy filter, use flat colors
• JPG: Compress, use weighted optimization, checkmark optimization, soften the image
• PNG/SVG: no tricks  

HIGH DENSITY

• Images may also need to be optimized for high-density screens (like retina screens)
• Most design programs allow you to export images 1x, 2x, or 3x the size
• When designing, keep the screen at 1x and export images separately at 2x or 3x