Angel Larson Design

Tag: graphic-design

  • The Importance of Math in Design

    Design is a very creative field, but it also uses math, logic, and reason to aid in designing. For example, a flyer, advertisement, banner, poster, etc. will all be designed within the dimensions of a page. A common dimension for a flyer would be 8.5″ x 11″ (8.5 inches wide and 11 inches tall) This is the common size of a sheet of paper. Print advertisements and posters are more likely to be in custom sizes that require a more specialized printer.

    You can also have dimensions of design in terms of pixels. Pixel sizing is used when you are creating a design that will be displayed on smartwatch, phone, tablet, TV, and computer screens.

    Sizing and math is important in terms of the photos you use in your design, the font size, and the sizes of shapes. From small to large sizing there are different challenges you will face with your designs.

    Designing on small dimensions means that you will have to make sure your design can still be read and noticed. You may have to have less elements in your design, because there is not as much space to work with. Larger designs mean that the elements must be much larger. You also have to take into consideration how close the viewer will be when looking at your design. If they are going to be looking at it from close up (1-2 feet away) you can get away with making the text very small. If they are going to be looking at it from a far distance and for not very long (for example a billboard on the side of the road) you will need to make the elements very large and easy to take in at a glance.

    Sizing is also very important to consistency in your design. You must develop a method to the sizing of your type, shapes, and images. For example you may have a specific size to use for the main heading, sub headings, body copy, and captions within a single design that you will want to stick to.

    If you want an element of your design like an image to take up 1/3, 1/4, 1/2, 2/3, or 3/4 of your design space, you can figure this out easily by taking the total length or width of your design and applying the fraction to it. For example, if a graphic you are making is 400 pixels tall and you want the image to take up 3/4 of the space, take 400 divided by 4 (100) and than multiply that number by 3 (300). So to for the image to take up 3/4 of the space vertically it would need to be 300 pixels tall.

    This is how you can use a basic understanding of math to help aid you in your designs.

  • Choosing the Right Online File Format

    There are three main file types to focus on for saving images that are optimized for web viewing: JPEG, GIF, and PNG. Each file type has its own strengths and weaknesses and it’ very important to know and keep these in mind when saving an image.

    GIF (Graphic Interchange Format)

    • GIFs are best for images with large, flat areas of color and type.
    • That have a max of 256 colors (8-bit) and greyscale (8-bit).
    • GIFs support animation and background transparency.
    • Lossless LZW compression shrinks the image data without removing detail (reduce more or equal to 60%).

      GIFs were most popular many years ago, but are still an option for small image sizes where only a few colors are needed. Much like PNG-8, GIF files are restricted to only 256 colors. Because of this, GIFs should never be used for product photos. GIFs can be used for logos with a limited number of colors and line art. They are also beneficial in adding movement to an advertisement.

    JPEG (Joint Photographic Experts Group)

    • JPEGs are the best format for photographs and graphics that have a lot of color and gradient blends
    • They can have millions (16+) of colors (24-bit) and greyscale (8-bit).
    • JPEGs do not support animation or transparency.
    • They have lossy compression meaning that some image data is lost after the compression.

      JPGs (JPEGs) are the most popular file type for images on the web. JPEGs are perfect for photographs, or complex images containing lots of colors, shadows, gradients, or complex patterns. JPEGs handle these types of images well because they have a huge color palate to work with.

      JPEGs can also be saved in high quality, low quality, or anywhere in between. This allows you to adjust and save the image exactly how you want, balancing quality and file size.

      JPEGs are the most popular file format online and is commonly used for product images, photographs, and homepage hero banners/images.

    PNG (Portable Network Graphic)

    • PNGs are recommended for replacing GIFs by the W3C, they support images with large flat areas of color and type.
    • PNG-8 has a maximum of 256 colors (8-bit) and greyscale (8-bit).
      PNG-24 can have millions of colors (48-bit).
    • No animation is supported, but background transparency is supported.
    • They have lossless LZW compression which shrinks image data without removing the detail. They can reduce file size up to 60%.

      PNGs are another popular file format online. In Adobe Photoshop, you have the option to save PNGs as PNG-8 or PNG-24.

      PNG-8 has a very limited color palate of 256 colors. While the image size is smaller, this wont be a good option for complex images and photographs.

      PNG-24 provides a much higher quality image but comes at the cost of a larger file size.

      Most importantly, PNGs can handle transparency. This is one of the biggest differentiation points between PNGs and JPEGs.

      PNGs are many times used for logos because they nearly always require transparency, you will likely want a logo to be high quality, and logos are a small part of your website overall (requiring a smaller file size).


    Saving Images Properly in Photoshop

    1. Save the Right Dimensions
      You must open your image in Photoshop and view it at 100%. This allows you to view the image at the exact size it will be displayed on a computer monitor when you save the image for web.
    2. Save Images for Web
      It’s possible to reduce the file size without significantly reducing the quality of your images.
      • Use Photoshop’s “Save for Web” function.
      • Open your image in Photoshop and go to File>Export>Save for Web (Legacy)
      • A window will appear which will allow you to choose your export file format.

    You can see the importance of choosing the right format for online viewing, based color, size, animation, and transparency needs. I hope that this posts helps you to better understand the online file formats better and what applications they are best suited for.