Export PNG

PNG - Export

PNG is a widely used, cross platform, bitmap graphic format. It supports transparency (unlike JPG) and has native loss-less compression. This is a good bitmap graphic format for web graphics and App graphics. The EazyDraw export panel, shown above, provides a wide range of options and paramter settings for generation of the PNG image. Including color space, pixel format, and content preparation.

Portable Network Graphic Format (PNG), pronounced "ping" is a bitmap file format. It was specifically designed for network image data transmission and storage. It has inherent lossless data compression. The specification provides support for RGB colors with transparency, PNG is a was originally designed to circumvent patents held by CompuServe’s GIF file format. These patents have now expired and PNG and GIF are both widely used with each having different advantages.

The Content popup menu provides a selection to specify the elements of the drawing that are included in the export. The choices are self explanatory.

The Background popup menu further defines what is included in the export. It is often desirable to define the backdrop of the drawing differently for an export, compared to the screen display. For example a reference grid might be used for the screen display but would not be included with the export. This setting determines if the exported graphic will be transparent or have a solid (white or colored) background.

The Dots Per Inch (DPI) parameter is used to define the resolution or quality of the exported representation. Normal display screen viewing requires about 72 DPI for acceptable visual quality. Retina quality display require 144 DPI, these are generally defined as @2x graphics. For the past 5 years the best web sites and Apps, especially for Mac audience, provide dual mastered PNG images. For example each PNG graphic in the EazyDraw user interface will have 2 PNG images one at 72 DPI and the @2x version at 144 DPI. In reality there will be 4 images: 2 each for light and dark mode. All the User Interface elements you see in EazyDraw were designed and produced with EazyDraw and used this PNG export feature.

Antialias applies complex algorithms for pixel coloring of sharp edges in the image. The classic example is a 45 degree black line on white backgroun. The black pixels will have a jagged stairstep appearance, quite noticable to the eye. Antialising will shade gray some of the stairsteps white and black pixels. The result is greater realism for the digitial image. Antialiasing will normally be checked.

Color Space is a complex topic, covered well on the Web. It is an important paramter for bright colors and improved images. Display P3 is a computer display oriented wide gamut color space. It offers about 25% greater range of colors compared to the circa 2010 standard sRGB color space. If your audience is viewing with a Mac computer, iPhone or iPad, or other computers and displays manufactured after 2016 your images will be brigher and sharper (especially red to yellow colors) with P3 colors.

Transparency is represented with 4th numeric value (Red, Green, and Blue being the 3 primary values). This 4 numeric value associated with each pixel is called the Alpha channel. There are seveal formats specifying the order of the 3 color values and the alpha chanel. The Alpha popup menu provides control of the formatting of the vaules for each pixel. Normally the choice will be Premultiply Last. Or a a setting of None for Alpha will decrease the image data size. The receiver of your image will be the defining factor in selection of this paramter. Or if no information is available Premultiply Last will almost always work. The format you select for your export is written in the image metadata, in theory your client is responsible for reading the meta data and interpreting the image.

The export has a setting for Bits per color. For most of the early 2000’s 8 bits per color has been a defacto standard. This provides 8 bits for each of R, G, B, and Alpha. The other choice for PNG is 16 bits (and 5 bits, but that is not generally sufficient). Of course, this doubles the size of each image. Improved display capability of the post 2015 era, and decreased performaince penality for doubling of image size, in some cases will lead to 16 design needs.

Export Content provides a choice for "iconset". (See paragraph below if using the App Store version of EazyDraw.) This choice exports a set of PNG images. The images are defined by one layer of the drawing. This layer will have a set of group graphics, each group will have one Text Box and one Rectangle. The Rectangle defines the bounds of the image and the text box defines the name of the image file. The image will contain graphics drawn on other visible layers interior to the bounds Rectangle. This techniques is used to efficiently create a iconset of images for use in App development. If the name of a icon set contains "@2x" the PNG is exported at "twice" the size and 144 DPI to provide a high resolution image for use on high resolution (Retina) displays.

The iconset submenu has a secondary submenu. This menu shows each image of the icon set. Select one of the images to export only that image. Select the actual iconset name on the primary submenu to export all images.

Use the "Color Space" popup to select a particular pixel format for the destination bitmap. RGBA, which is Red-Green-Blue colors with Alpha channel (alpha channel provides support for transparency) is the most common choice for the PNG format. The other formats will use correspondingly fewer bytes for each pixel and may result in smaller file size. The mask formats are sometimes used by other applications when constructing icons, but not so much in recent years.

The Interpolate setting specifies a pixel-smoothing algorithm. Without Interpolation, the image may appear jagged or pixelated when drawn on an output device with higher resolution than the image data. Set to None when exporting 2x Retina quality graphics, otherwise Automatic or High is a good default setting.

Apple defines a set of specifically named and sized png images, all present in a folder named with the ".iconset" extension. This set of images provides a full high resolution icon. EazyDraw allows the complete set of images to be designed in one drawing and saved with a single export. On Page Setup, choose "App Developer" as the electronic printer, then choose "Iconset" as the Paper. This will set the page size with room to hold all necessary images and install an iconset layer with the properly defined bounding boxes and file names. All you need to do is design and draw each image in the corresponding bounding Rectangle, then export.

You may preview an iconset from the Finder, select the iconset folder then hit the space bar on the keyboard. The Finder then presents a convenient preview panel with size slider. Consult Apple’s developer documentation for full documentation concerning proper icon design and explanations of the iconset folder and naming conventions. The high resolution settings defined by Apple are triggered from the "@2x" character sequence present in the image name.

When using an App Store version of EazyDraw the operating system employs sandbox restrictions. This prevents EazyDraw from creating the folder and the set of png files, an error message from the OS will display and the iconset is not saved. Sandbox restrictions allow only the original filename with the png extension to write to the hard drive. There is a work around for this limitation: use the Documents folder in the Container assigned for EazyDraw. The About EazyDraw panel (access from EazyDraw main menu) shows the exact full path to this folder. Save the iconset in the Container’s Documents folder, here EazyDraw has permission to create the required folder and contents. The sandbox Container is (as of this writing) located in the hidden Library folder, use Cmd-Shift-G from the Export panel then input "~/Library" as text, navigate to the Container and finally the contained Documents folder. More information is found at the bottom of the Open help page.

The TIFF documentation page provides the foundation documentation for exporting bitmap data files. Review that information for further details concerning file size, image quality and choice of Dots Per Inch (DPI).

When designing graphics with a transparent background it can be confusing if included graphic elements have a solid white (non-transparent) background. In these situations designers will often set a distinct background (like the "green screen" in television production) color for the drawing. This is set on the Page Layout panel. Then when exporting to produce the product graphic, choose "No Background" for the Background setting on this panel.

We cannot regenerate an EazyDraw vector representation from a PNG export file. If your final work needs to be PNG (or any other bitmap format) be sure to Save and archive the EazyDraw original for future editing. You can always generate a revised PNG export from the original-but the reverse is not possible.