CREATING & DESIGNING IMAGES FOR THE WEB

DESIGN SOFTWARE

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

WHERE TO GET IMAGE ASSETS

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
Made with Slides.com