Use Pixel View to Create Enhanced Web Graphics

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 tool2014-12-03_1058in 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.

 

2014-12-03_1124

Clicking the Four Previews button2014-12-03_1238lets 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.

2014-12-03_1247

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 tool2014-12-03_1314_001, and then clicking the Add the sampled color to palette button2014-12-03_1315in the Settings area.

you can also 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.

2014-12-03_1314

Save

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.

Want to try out CorelDRAW Graphics Suite for FREE?

Download your FREE 15-day trial to see what’s new in CorelDRAW Graphics Suite and explore a world of new creative possibilities in graphic design, photo editing and website design.


Related Tutorials


Tools You Need




CorelDRAW Graphics Suite X8

Combine your creativity with the power of CorelDRAW® Graphics Suite X8 to design graphics and layouts, edit photos, and create websites.



Spring Clipart

Celebrate Spring with this clipart collection of 150+ images and text for your photo and graphic design projects.



CorelDRAW Home & Student Suite X8

A complete design suite for home and students. Edit photos and create reports, drawings, flyers, ads, business cards, logos and more.



Modern Black Collage Mega Pack

This collection of 65 collage templates is perfect for any photo project. Just add photos, print and hang!

Related Images

Share this post

Leave a Reply

Your email address will not be published. Required fields are marked *