Pixel View & Enhanced Web GraphicsThis tutorial has been written for CorelDRAW® Graphics Suite X5. While similar features might be available in previous releases, the tutorial will be fully applicable to CorelDRAW Graphics Suite X5 only.
The Pixel view in CorelDRAW lets you create drawings in actual pixel units, providing a much more accurate representation of how a design will appear on the Web.
What you will learn
In this tutorial you will learn how to:
- Work with Pixels
- Snap to Pixels
- Change the Color and Opacity of a Pixel Grid
- Export for Web
- Determine the best file format
- Use Presets
- Customize Options for Exporting a JPG
- Customize Options for Exporting Palette-based Bitmaps (PNG & GIF)
Pixel View displays a pixel-based rendition of the drawing, which allows you to zoom in on an area of an object, then position and size the object more precisely. This view also lets you see what the drawing will look like when it is exported to a bitmap file format, even if the objects are vector.
- In CorelDRAW, click File > New
- In the New Document dialog box, choose Web from the Preset destination list box and click OK
- On the toolbar, choose 800% from the Zoom levels list box
- Click View and ensure that Snap to Pixels is not enabled. (A check mark beside the Snap to Pixels command indicates that it is enabled)
- Draw an object
- Click View > Snap to Pixels
- Draw another object
As you move around the grid, notice how you are presented with snap points, such as pixel edge, pixel corner, and pixel center. This allows for more precise control.
To change the color and opacity of the pixel grid, Click View > Setup > Grid and Ruler Setup
- In the Pixel grid area, open the Color picker, and select a color
- Move the Opacity slider to the right to increase the opacity of the grid
By using the pixel preview mode when designing for the Web, you can ensure that what you see is exactly what you will get. There’s no longer any need to guess.
The Export for Web dialog box provides a single access point for common export controls, eliminating the need to open additional dialog boxes when preparing a file for export. It also lets you compare the results of various filter settings before you commit to an output format, making it easier to achieve optimal results. Let’s take a look. The image below is the Export for Web dialog box. This feature is available in CorelDRAW® and Corel® PHOTO-PAINT™.
The Export for Web dialog box
- In CorelDRAW, with your design on the page, Click File > Export For Web
- In the Export For Web dialog box, click the Four Previews button
- Click in the upper right preview pane
- Choose Medium quality JPEG from the Presets list box
- Note the difference in file sizes between the other windows
CorelDRAW and Corel PHOTO-PAINT allow you to export the following Web-compatible file formats: GIF, PNG and JPEG.
GIF images are best used for line drawings, text, images with few colors, or images with sharp edges, such as scanned black-and-white images or logos. GIF offers several advanced graphic options, including transparent backgrounds, interlaced images and animation. It also lets you create custom palettes for the image.
PNG files are best for various image types, including photos and line drawings. The PNG file format (unlike the GIF and JPEG formats) supports the alpha channel. This allows you to save transparent images with superior results.
Photos and scanned images are best exported as JPEG files. JPEG files use file compression to store an approximation of an image, which results in some loss of image data, but does not compromise the quality of most photographs. You can choose the image quality when you save an image — the higher the image quality, the larger the file size.
You can export Web-compatible files using preset settings. This allows you to optimize the file, without the need to modify individual settings. However, you can also customize the settings to produce a specific result. For example, you can adjust its color, display quality, and file size. Being able to use presets is useful if you are exporting a number of images and want to ensure consistency throughout your project.
Customizing Options for Exporting a JPG
From the Export to Web dialog box, choose JPEG from the Format list box. You have the option to perform one or more of the following tasks:
Control Color Mode, Quality, Sub-format and the ability to Blur the transition between adjacent pixels of different colors. Also in the Settings area are the options to overprint blacks when exporting to CMYK and apply a matte color to the object’s background to help blend the edges of anti-aliased objects.
To load the JPEG file gradually in certain Web browsers so that it displays only portions of the image before it finishes loading, enable the Progressive check box. Use the optimal encoding method to produce the smallest JPEG file size and apply the document-color settings. You also have the color-proof settings.
From the Export to Web dialog box, choose GIF or PNG from the Format list box. You have the option to perform one or more of the following tasks:
Now, I should point out that if you are sending out the file as a 24-bit RGB PNG, not all of these options will be available. For more information on this topic, look to the help files within CorelDRAW or Corel PHOTO-PAINT.