Creating Pixel-perfect Web Graphics

Creating Pixel-perfect Web Graphics

Learn how to design crisp, clean web graphics with enhanced features in CorelDRAW that ensure pixel-perfect precision. This tutorial demonstrates the key tools to use when creating images for the web, including how to work in Pixels view, how to align objects and nodes to the pixel grid, and how to use pixel snapping.

STC logo artwork in this tutorial was created by Agus Riyanto.

Thanks for watching! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. You will find a written version of this tutorial below, and a printable PDF copy to download from the Download Resources tab above.

Learn how to design crisp, clean web graphics with enhanced features in CorelDRAW that ensure pixel-perfect precision. This tutorial demonstrates the key tools to use when creating images for the web, including how to work in Pixels view, how to align objects and nodes to the pixel grid, and how to use pixel snapping.

STC logo artwork in this tutorial was created by Agus Riyanto.

Thanks for watching! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. You will find a written version of this tutorial below, and a printable PDF copy to download on the Download Resources tab above.

See what's new in CorelDRAW Graphics Suite 2020!

Download your FREE 15-day trial for Windows or Mac and break down creative barriers with the new collaboration tools, variable fonts, AI-based effects and image enhancements, and much more.

Download these free resources:

Written tutorial for Windows (PDF, 350 KB)
Written tutorial for Mac (PDF, 740 KB)
Quick Start Guide (PDF, 2 MB)
Keyboard Shortcuts (PDF, 2 MB)
User Guide (PDF, 23 MB)

Tools You Need

CorelDRAW Graphics Suite 2020

Break down creative barriers with CorelDRAW Graphics Suite 2020, your go-to graphic design software for professional vector illustration, layout, photo editing, and more.

Halloween Clipart Collection

Create some spook-tacular Halloween creative projects with this collection of 150+ images, quotes, borders and backgrounds.

CorelDRAW Standard 2020

Dream it then design it with CorelDRAW Standard 2020, the go-to graphic design suite for hobbyists and home businesses.

Wacom One Tablet

The Wacom One creative pen tablet offers a natural pen experience on a 13” screen, perfect for creatives seeking great value for their money.


Creating Pixel-perfect Web Graphics

When creating digital output, such as web graphics or social media banners, we often work in pixels – the tiny squares that combine to form the overall image. In this tutorial, we’ll look at the pixel-perfect workflow in CorelDRAW, and go over some of the new pixel tools and features introduced in CorelDRAW Graphics Suite 2019.

Click on any of the images below to view full-size.

Creating a New Document

Go to File > New and select the Web preset. This will set your color mode, units of measure and resolution to the correct settings for web graphics. There are also a number of Page size presets for the most common sizes of web graphics and banners.

In the Snap To dropdown list, make sure that Pixels is checked. Generally, when working with the pixel grid it’s best to keep only pixel snapping on and turn off all other snaps.

Zoom in on the lower left corner of the page and the pixel grid starts to appear. One complete pixel aligns exactly with this corner. Because this page size is set in complete pixels, each corner has one pixel grid square.

Note: In earlier versions of CorelDRAW, pixels were centered on the page, which sometimes resulted in partial pixels along all edges.

The pixel grid appearance is set in the Layout > Document Options window, on the Grid tab. This is where you can adjust the grid opacity or change its color.

Align with Pixel Grid

As a basic example, activate the Rectangle tool (F6), which is the tool you’d start with to create a button in a web banner. Click a swatch in the Color palette to set a fill color, and right-click a swatch for the outline color. Set the outline width to 2 pixels.

Note: When you set these object properties, you may see a popup asking you to confirm a change to the default properties – just click OK.

Zoom in so that the pixel grid is visible. Drag to create the rectangle, and its corners will snap to grid corners.

Zoom out so that the pixel grid is no longer visible and create a second rectangle. Now if you zoom back in to see the pixel grid, you will see that the second rectangle has also snapped to the pixel grid.

Because these rectangle outlines have an even number of pixels, when you use the Pick tool to move a rectangle, the rectangle nodes will still align with grid corners, with these corners centered within the outline.

This applies to resizing as well – alignment is always relative to grid corners.

If you change the outline width to another even number like 4 pixels, the alignment will remain consistent with grid corners.

If you change the outline width to an odd number like 3 pixels, the outline now has 2 correctly filled pixels and 2 partially filled pixels.

You can align this rectangle to the pixel grid easily by right-clicking on the rectangle and choosing Align with Pixel Grid. Now the outline is pixel-perfect, this time aligned with grid center points, so that the outline will remain within its 3-pixel border.

As you move or resize this rectangle, each corner always aligns to a grid center. And this will be the case for any odd number of outline pixels.

An outline of none, or 0 pixels, is treated as an even-number pixel outline. When aligned to the pixel grid, the rectangle goes back to aligning to grid corners. If you switch to hairline outline, this is treated like a 1-pixel outline and aligning to the pixel grid switches to grid centers.

This pixel alignment applies to curves as well. Activate the Pen tool, which should still have the 2-pixel outline. As you draw with the Pen tool, each click aligns to a grid corner, even when zoomed out too far to see it. (Though if you had started with an odd number of pixels, each click would have aligned to a grid center.)

The Shape tool displays the curve nodes, each of which is on a grid corner. Editing this curve with the Shape tool also keeps nodes on grid corners.

Select the curve and change the outline width to an odd number. Then open the Align and Distribute docker (Window > Dockers > Align and Distribute), which is another place where you can find the Align with Pixel Grid option. After clicking this button, each node aligns to a grid square center, actually changing the curve geometry just a bit.

If you move the curve, and the nodes become out of alignment, you can simply click the Align with Pixel Grid button to align again.

Now let’s compare drawing from scratch with the pixel snap on and off.

Uncheck Pixels in the Snap To dropdown list. Activate the Common Shapes tool and choose one of the arrows, keeping the 2-pixel outline. Drag to create the arrow, keeping the Ctrl key pressed to maintain the aspect ratio.  The overall arrow size contains pixel fractions (73.5 px in this example). This is because Snap To > Pixels is turned off.

Press Ctrl + Q to convert the arrow shape to curves. When you activate the Shape tool, you can see that the nodes don’t align to the pixel grid.

Click Align to Pixel Grid, and now you will see that the nodes sit on grid corners, and the dimensions in pixels are nice, clean numbers.

Now go back to the Snap To dropdown and enable Pixels again. Create the same arrow shape. Notice that the dimensions in pixels contain no decimals, and the nodes are aligned to grid corners.

Now that you are familiar with the pixel tools in CorelDRAW, you can create precise, pixel-perfect web graphics any time.

See what's new in CorelDRAW Graphics Suite 2020!

Download your FREE 15-day trial for Windows or Mac and break down creative barriers with the new collaboration tools, variable fonts, AI-based effects and image enhancements, and much more.

Related Tutorials

Share this post

Comments (4)

  • Anas Alhajie Reply

    Hello, If I have a set of circle elements, for example, how do I sort items by size? If all the elements are similar in color and shape, but the size is different?
    Thank you ♥

    October 17, 2019 at 11:22 am
  • kiwikev Reply

    Hey,
    Thank You very much.
    I thought that was Awesome. Most viewers would never see those tiny imperfections, but we go crazy over them, so well done.
    It’s the difference between creamy and crispy, sharp and blurry..lol just popped out.

    Thanks Great Job

    Cheers Kev

    September 30, 2019 at 11:07 am
  • khalid mansoor Reply

    DEAR SIR,
    HOW CAN I CHANGE THE INTERFACE COLOR COREL MAC

    THANK YOU.

    April 4, 2019 at 3:14 am
    • Adam Reply

      Hello Khalid,

      Did you mean Dark Mode? It happens on its own! CorelDRAW detects the mode in macOS and automatically adjusts its interface colour accordingly.

      Discovery Center Team

      May 12, 2019 at 9:19 pm

Leave a Reply

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


Get a FREE creative pack!

Get a FREE creative pack!

Sign up for our newsletter and get a free creative pack plus the latest tips, tutorials, and special offers in your inbox each week.

You have successfully subscribed! Check your inbox for your email confirmation and free creative content pack.