Use Pixel View to Create Enhanced Web Graphics

This tutorial has been written for CorelDRAW® Graphics Suite X7. While similar features might be available in previous releases, the tutorial will be fully applicable to CorelDRAW Graphics Suite X7 only.

The Pixels 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.

Working with pixels

Pixels view (View menu > Pixels) 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. This view is ideal when you’re designing for the web because you see is exactly what you will get.

Snapping to pixels

You can have objects snap to the pixel grid, so that when you move the objects, they align with the grid lines.

1. In CorelDRAW, click File > New.
2. In the Create a New Document dialog box, choose Web from the Preset destination list box and click OK.
3. Click the Zoom toolin the toolbox, and choose 800% from the Zoom levels list box on the property bar.
4. Click View > Snap to and ensure that Pixels is not enabled. A check mark beside the Pixels command indicates that it is enabled.
5. Draw an object.
6. Click View > Snap to > Pixels
7. Draw another object.

As you move around the pixel grid, notice the different snap points that appear, such as at a pixel’s edge, corner and center, allowing for more precise control.

Changing the color and opacity of a pixel grid

You can customize the look of the pixel grid by changing its color and opacity.

1. Click Tools > Options.
2. In the Document list of categories, click Grid.
3. In the Pixel grid area, open the Color picker, and click a color.
4. Move the Opacity slider to the right to increase the opacity of the grid.
   You can disable the Show pixel grid at 800% or higher zoom check box if you do not want the pixel view to automatically display zoomed in at 800% or higher.

Exporting graphics for the web

CorelDRAW and  Corel PHOTO-PAINT let you export your work to the following web-compatible file formats: GIF, PNG, and JPEG.

While specifying exporting options, you can preview an image with up to four different configurations of settings, making it easier to achieve optimal results. You can compare file formats, preset settings, download speeds, compression, file size, image quality, and color range. You can also examine previews by zooming and panning within the preview windows.

This feature is available in CorelDRAW and Corel PHOTO-PAINT. In either application, click File > Export > Web to open the Export for Web dialog box.

Clicking the Four Previews buttonlets you compare how the image will look when exported to different formats for the web. Note the difference in file sizes between formats.

Choosing the right file format for the web

Choosing a file format to use for the web should be based on the type of image being exported.

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.

Using presets

You can export web-compatible files using preset settings. This allows you to optimize the file without having to modify individual settings. However, you can also customize the settings to produce a specific result. For example, you can adjust color settings, 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 to the web

Depending on the web-compatible format you export to, there are some options you can  customize to best optimize the image.

If you export to JPEG, you can choose a color mode, quality level, and encoding setting. You can also blur the transition between adjacent pixels of different colors, 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.

There are also advanced settings that allow to embed the color profile, use the optimal encoding method to produce the smallest JPEG file size, and more. You can also apply document-color settings and apply color-proof settings to the document.

If you export to GIF or PNG, you can choose a color palette and specify a dithering setting. You can also sample a color and add it to a color palette by clicking the Eyedropper tool, and then clicking the Add the sampled color to palette buttonin the Settings area.

This is helpful if you have reduced the number of colors in an image to reduce file size, and then realize that a specific color you want is missing. When you export to PNG, you can also choose the color mode.

We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And don’t forget to visit our social media pages and show us what you’ve learned by sharing your photos, videos and creative projects with us.

Related Tutorials

Using the Document Color Palette

Using the Gaussian Blur Lens

Tools You Need

Related Images