Angel Larson Design

Tag: Photoshop

  • Designing an App with Adobe XD-Part 7

    Now that you have created a style guide for your app or website, you can start to create the actual content that will be used in your app. This step combines the sketches and assets you have gained to start to bring your vision to life.

    An easy way to do this effectively is with photoshop. The layers in photoshop will show you each individual asset being used in your composition.

    1. Create a photoshop document in the size that the phone/tablet screen of your app or screen size for your website will be.
      • This will make sure that your elements are the exact size, color mode, and resolution they need to be to bring into Adobe XD for your prototype.
      • Make sure your document is in RGB mode and your elements are 72 pixels per inch.
    2. Recreate your sketches, using the elements from your style guide.
      • Recreate each page in your sketches, using text boxes, shapes, images, icons, textures, and colors to bring your ideas to life.
      • Make sure that you use guides to make sure that elements that are in the same place in more than one page are in the right spot. You can use the paste in place option to make sure that elements you copy from one page are in the same exact place in another page.
      • You will not be able to add your videos or sounds at this time but you can save those in a specific folder so that you know where they are. Make sure that all your images, videos, and sounds are made by you, royalty free from online, or properly credited to the person who made them. For things like a keyboard for mobile apps, you can just go online and find an image of the keyboard that will be used to simulate what it will look like when it pops up. There are certain icons that you will be able to get from Adobe XD UI kits, or you can make them yourself.
      • You may want to create separate documents for each page of your app or website, or create them on multiple art boards within the same document.
    3. Add all your elements to a new shared library, specifically made for your app or website.
      • This will help you access your assets easily.
      • Shared libraries in Adobe can be used across different apps.
      • Name all the elements in your library as you go so that you can easily find them later. Do not skip this step! it will help you stay more organized and save you time down the line.

    Once you have your content designed in Photoshop, you can easily import the files into Adobe XD.

  • 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.