Menu
homeBreakdowns

Creative tools for creative people. Increased level of control and accuracy

From stunning artwork and stunning web graphics to stunning print assets, our tools help you express your unique creative vision and produce results you can be proud of.

What's new in the 2019 version?

Increased level of control and accuracy

More opportunities for creative exploration and experimentation

More improvements based on user requests

Fantasy shouldn't be limited to your workplace!

Catch good idea right at the moment of inspiration and turn it into a great design using CorelDRAW.app. A powerful new application that's part of CorelDRAW Graphics Suite 2019 delivers consistent remote access to all your projects. Now you can continue working anywhere! For example, so that using a “2 in 1” device or other mobile device To demonstrate your work to the client, you just need to log in to your CorelDRAW.app account.

Working remotely

The package provides access to your CorelDRAW files even when you don't have your computer at hand.

Saving to the cloud

The program includes the ability to store projects on the cloud, which provides access to your materials from any system and at any time.

Convenient import/export procedure

Supports import/export formats CDR, PDF, PNG, JPEG and SVG.

To log into coreldraw.app, visit www.coreldraw.app and enter the username and password you used when registering your copy of CorelDRAW Graphics Suite 2019.

Features that cannot be found in other products

CorelDRAW Graphics Suite offers productivity-enhancing tools not found in other graphics programs or require a separate plugin to install them. Explore features unique to CorelDRAW.

This mode not only allows you to create various symmetrical patterns - from simple objects to complex kaleidoscopic effects - in real time, but also provides the opportunity to increase productivity by automating this labor-intensive process.

The Pointillizer effect allows you to quickly generate high-quality vector mosaics based on any number of selected raster and vector images. Based on pointillist artistic techniques, this effect is perfect for designing car decals, as well as window and display decoration materials.

Draw anywhere and anytime! Revolutionary LiveSketch™, powered by technology artificial intelligence And machine learning, converts sketches into precise vector curves directly on touchscreen devices.

The ability to manipulate shadows using the Shadow tool cursor in real time allows you to avoid the monotonous movement of shadows in the dialog box. The box shadow introduced in CorelDRAW is ideal for those who work with plotters and cutters. This unique feature adds solid shadows to objects and text and significantly speeds up your workflow by reducing the number of lines and nodes present in a shadow object.

Creative tools for creative people

Vector graphics

With CorelDRAW's powerful vector illustration tools, you can transform primitive shapes and lines into complex, multi-faceted works of art. Versatile shape and drawing tools help you draw a variety of curves, while outline, shell, blend, and mesh fill tools let you add creative effects to vector images.

  • Page Layout

    Here you will find everything you need to create brochures, multi-page documents and other materials. Take advantage of the opportunity to reserve space for text or graphics. By modeling the page layout, the Template Text tool can help you get an idea of ​​what your document will look like.

  • Photo editing

    PHOTO-PAINT contains layers-based powerful tools Edit, retouch, and enhance your images so you can easily adjust color and tone, remove imperfections, correct perspective, and more. Use AfterShot Pro HDR to create stunning HDR photos from RAW images.

  • Typography

    Excellent results when working with text are guaranteed! A complete set of typography tools lets you add shadowbox and outline effects, position text along paths, apply text wrapping effects, and more. Create beautiful inscriptions using OpenType typographic tools - ligatures, ornaments, capitals and strokes.

  • Color, fill and transparency

    Color swatches let you easily apply color to fills and outlines, and color harmonies let you generate color schemes. Also provided are tools for adjusting the transparency of an object and filling the object with patterns, gradients, mesh fills, etc.

  • Styles and Style Sets

    The Object Styles docker makes it easy to apply styles and style sets to quickly and consistently format entire documents and multiple objects, and makes it easier to create multiple variations of the same design

Design for print and web

A collection of web graphics presets and tools to help you create engaging web content. The Upload to WordPress feature was designed to directly publish image formats to a WordPress site.

CorelDRAW makes preparing documents for printing as easy as possible. Powerful system color management provides consistency control color parameters on various media and guarantees exact color matching before printing begins.

Support over 100 graphic formats, image formats, as well as publishing formats, including AI, PSD, PDF, JPG, PNG, SVG, DWG, DXF, EPS, TIFF, etc., greatly facilitates working with any project assets.

High quality royalty-free content

Give your projects a unique look with our extensive content collection, including 7,000 royalty-free images and design templates Vehicle, 1000 photos in high resolution, 1000 TrueType and/or OpenType fonts, 150 professional templates, more than 600 fountain, vector and raster fills, etc. All these materials are included in our graphics package.

Efficient design development process

    Take control of every element of your document! A practical Objects docker lets you search, hide, show, and rename objects, as well as change their order in the stack. You can use the Object Properties docker to format and control object attributes such as fill.

People sometimes ask me: “How and in what program is website design created?” It’s difficult to answer this question unequivocally, because when creating a website design, I personally use many different techniques and programs. Currently, the vast majority of web designers work with layouts created in Photoshop program. Originally created and intended for photo processing, this program has now accumulated so much various functions(including work with vector graphics), which is used anywhere, including in web design. But when drawing a website layout, sometimes you need other functionality that even the all-powerful Photoshop cannot provide. We are talking about a vector.

Getting started: figuring out the nuances

Drawing a website begins with clarifying and agreeing on the nuances. The site can be “rubber”, or it can be of a fixed width. This may depend, for example, appearance site headers - header, or columns - sidebars. Depending on the purpose of the site, the structure of the web interface is thought out. For example, online stores look much better in a fixed design up to 1000 pixels wide with one sidebar on the left. The sidebar contains the product catalog menu. This option has firmly established itself on the Internet, and it is now quite difficult to find a store that differs from this layout of elements. The situation is different for information sites with tons text information. If there is more text on the site than graphics, then with a fixed site width of wide screen empty fields on the sides will be irrational. With a rubber design, the text will evenly fill the entire screen, which will avoid frequent vertical scroll(all kinds of Wikipedia and similar encyclopedias).

Let’s say we need to develop a design for a corporate website for a company selling electronics, with an “online store” section. We immediately denote:

  1. fixed design 1000 px;
  2. file formats – psd (for the programmer-layout designer) and jpg (for agreement with the client);
  3. design style (for example, “minimalism” - White background, a minimum of color intrusive graphic elements, or in accordance with the requirements of the corporate style);
  4. I need a logo in vector format.

If agreement with the customer on these issues is reached, then you can move on to sketches. If achieved in all but point 1 , then you can argue with something like:

“Fixed design allows you to create uniformity in the display of the site. At any resolution, all elements will remain in their places, where the developer laid them out, while with “fluid” designs at different resolutions, the elements move and move apart, which, with further independent filling of the site by the client, can lead to display options not provided for in the original development. A fixed design of 1000 px (from 920 to 1000px) is today considered the standard for corporate websites and online stores, dictated by statistics (since according to statistics, the number of users with screens over 1000 px in width is the majority).”

Creating a Layout

Now is the time to start sketching out the layout. Since this article is not a lesson, here I describe only the basic principles of creating website design. In CorelDraw I do work area with a width of 1920 px, the height is no less, it can be adjusted during the development process. Next comes creative imagination, limited only by common sense and understanding technical capabilities layouts. I draw a header, sidebar, content area and footer, all within the site width - 1000 px. For an online store, it’s a good idea to draw a couple of slides for an image slider. Typically, such slides inform visitors about new collections, product arrivals, or great discounts. But for now, at the sketching stage, I’m just drawing the slider area and its controls.

For the article, without any special frills, I sketched out a sketch of the layout:

Next, you need to fill out this layout with information. I immediately add a logo, menu and search input field. Menu items and text home page I fill it out arbitrarily, you can take it from the site that the client indicated as “I want better.” The main thing is to show the page as it might look in reality. I'm experimenting with color scheme, I denote links within the text in all three states - link, hovered link, visited link. The same thing with menu items: I draw all the states of menu elements - an item, a hovered item, an expanded menu, submenu items, etc. I don’t miss a single detail, because how detailed I draw the design depends final look layout of the site.

This is what a page looks like, filled with information and interface elements, which can now be sent to the client for approval:

When agreeing on a layout, there are many edits; the client may not like the color design or the arrangement of interface elements on the page. When developing in CorelDraw program all these corrections are done very quickly. In principle, our goal now is to obtain the client’s consent to the appearance of the page, and that’s all technical nuances preparation of files for layout can be left for later.

There are several main points that you should pay special attention to when developing website designs in CorelDraw:

Website typography

When creating a layout, you need to immediately select the font that will be used on the site. My example uses Arial, but there are many other fonts that can be used when creating a website. When submitting the layout to the layout designer, be sure to notify him of the selected and agreed set of fonts, as well as the sizes, colors, style options, etc. This is necessary because when creating a graphic layout it is easy to completely ignore such an important point in web design as typography. In addition, there are clients who have a corporate font in their company’s corporate style. It’s good if this font is standard (the same Arial, for example), if not, then you need to find out from the client (or study the brand book) whether there is a corporate font option for creating company websites. If not, then competently explain to the client that embedding non-standard fonts into the site is fraught with great difficulties. Therefore, the brand book should contain the name of the font, which will be as close as possible in appearance to the corporate one, but still be standard. Only in this case can we ensure maximum uniformity in the display of the site on user devices.

Draw the site “in pixels”

The layout must be drawn directly in pixels, no millimeters, inches or yards. Everything we do in web design is counted in pixels, or if we're talking about about the “rubber” design - as a percentage, relative to the width or height of the user’s screen. The layout that we send to the client must have the original size. Unfolding it to Full Screen, the client will be able to correctly assess the appearance of the future site.

Create multiple site layouts

Few modern websites have internal pages that look identical to the main page. And therefore it is wrong to design only one page. Moreover, on internal pages elements appear that are not on the main page. For example " bread crumbs”, additional menus, a product catalog, and many elements related to the catalog (buttons “buy”, “compare”, etc.). Therefore, if you take your work seriously, you need to give the client at least 3-5 pages of the site.

Find out in advance what CMS the site will be built on

Very important point! The work of the designer depends on what CMS the site will be built on. A good designer is one who knows at least approximately popular systems control, and the main features of these systems. Therefore, it will be easier and faster to draw a design for a specific CMS than to later receive questions from the layout designer like “did you draw for Bitrix or WordPress?” In general, professional development of web interfaces, where the action of each element is thought through, requires excellent knowledge of a specific content management system. Therefore, learning CMS is necessary and important.

Preparing files for layout

When the layout is approved by the customer, an important moment comes to prepare files for layout. How quickly the template is created by the layout designer depends on how well the files are prepared.

Layout designers work with files .psd, which means we’ll transfer the entire design to Photoshop. Each element of the layout, be it a logo or a dividing line in a menu, should be placed on a separate layer. Layers need to be combined into groups.

But not just the file .psd needed by the layout designer. For example, sprites can be made in advance, and the design elements themselves, if they are in the files and are already suitable for placement in the template, this only makes it easier for the layout designer. Therefore, I first save all elements to files .png and put them into thematic folders. I usually end up with 5 main folders named:

“HEADER”, “SLIDER”, “SIDEBAR”, “CONTENT” and “FOOTER”.

Inside these folders are other folders named according to their purpose. For example, in the “HEADER” folder there are folders such as “Search” (search) with elements related only to the search block, “Top-menu” ( Top Menu) with menu elements, “Logo” – with a logo. The elements inside these folders are named so that the layout designer immediately understands what a particular element is intended for. For example, for the menu strip there will be several files with the names:

top-menu-bg.png (menu background), top-menu-shadow.png (menu shadow), top-menu-separator.png (menu separator line), top-menu-hover-active (menu element , changing when hovered or in the active state).

Having received such a set of ready-made files, layout designers can only work with it. But just in case, you can do the usual .psd shku. To do this, you just need to create groups and layers with the same names and arrange everything in accordance with the layout.

On this page I will talk about techniques for working in the vector graphics editor Corel Draw. They were developed after asking questions from several designer friends who had no experience in developing web sites and undertook to create only a graphical page layout.

The questions were formulated as follows: “What are the dimensions of my drawing field?” and “Can I draw everything?” All the steps described below will take about a minute of time and will allow you to remove the issue of size once and for all. The work was carried out in Corel Draw X4, so the names of some menus may differ from other versions of the program. So let's begin. First of all, let's open Internet Explorer and expand it to full screen. Without loading any site - the browser window should be clean - click Print key Screen. Sometimes you may need to press Print Screen 2 times in a row. We get a screenshot (screenshot) of the browser, which is located on the computer's clipboard. Open Corel, create new file . Then you need to right-click 2 times on the ruler, and in the Ruler menu that appears, select Points as the units of measurement. Paste our picture (Shift+Insert) from the clipboard. The dimensions of the inserted image, if everything turned out correctly, should match the resolution of your monitor. We make our page the same size. Select the image again and align it to the center of the page (Arrange > Align and distribute > Center of page or just press the "P" key). Without removing the selection, press

right button mouse and lock the object (select Lock Object in the drop-down menu). Instead of locking an object, you can place it on along the edges, then a user with a 17-inch monitor will not see everything - part of the site will be cut off, and scroll bars will appear. If they are vertical, no problem. But the appearance of horizontal ones would not be desirable. You need to look for a compromise size. Considering that there are fewer and fewer 17-inch monitors, I would take the size of the drawing field as a basis standard definition 19-inch monitor - 1280x1024 pixels minus the dimensions of the desktop taskbar and all browser panels. It is impossible to select the exact dimensions - one user has the taskbar on the side, while another has it on the top. And the number of rows of icons varies. Dimensions of various panels and buttons different browsers also different... In my work I focus on the following dimensions of the drawing field: width - 1280 minus 30 pixels taken away by the scroll bar; height - 1024 minus 132 pixels of the taskbar and various browser panels, and minus 32 pixels taken away by the status bar at the bottom. The total is 1250x860. What do these numbers tell us? That everything won’t fit on a 17-inch monitor - horizontal scroll bars will appear, and on a 21-inch or more monitor there will be free spaces at the edges. Thus, if you have a 19-inch monitor and you are targeting your site specifically at such monitors, feel free to work in the entire white field of the browser. If your monitor is larger, draw a rectangle with dimensions of 1250x860 pixels and position it in the center of the white field of the browser snapshot. These same ones will immediately appear on the sides

empty spaces , which may well be painted over with color or background, but which should not contain texts, banners, tables or other page elements. Then you need to align the upper border of the rectangle with the upper border of the white field and, by extending 3 guide lines, align them with the sides of the rectangle (the two sides and the bottom), and the rectangle itself can be erased. These guides limit the drawing field. I repeat that the size of the drawing field is relative, and may be smaller if the user, for example, has 4 rows of icons on the taskbar, and not one, like mine. Let's assume that we have a working field, we can work. It is advisable to save such a file as a template - when you start making a new website, open it and immediately work without calculating any dimensions. Corel Draw. Before this, you need to make sure that there are no objects protruding or located outside the working area of ​​the page and open additional docker panels. Press F4 (or select To Fit in the Zoom Level drop-down window).

Then F9 (full screen view). We received a slightly enlarged image of our browser. Next step- in Zoom Level, enter a new scale value - slightly larger than the previous one, and after changing it, press F9 again. This needs to be done several times, and by changing the scale, ensure that the screenshot after pressing the F9 key occupies the entire screen, that is, visually the screenshot looks the same as our open browser. When this happens, you need to remember the scale value. What is this all for? Sooner or later there will be a need to show someone a drawn layout without explanation, like: “Here it will be like this, but the whole site will look like this,” etc. Instead of these explanations, press F4, set the previously memorized scale value in Zoom Level, press F9 and see in front of us our layout, indistinguishable from the real one open browser, and final result will look exactly the way you see it now. Great, isn't it! Be aware of protruding objects and dockers, otherwise the image in full screen view will be offset to the side. Thus, we were able to show at any time real page site, bypassing the subsequent labor-intensive stages - graphics processing, cutting with optimization and html coding.

When working on a layout in Corel Draw, you must be sure that you are working in color model RGB, that is, all colors should be in it, and not in SMYK or LAB. Otherwise, during further conversion to RGB, colors that were not in this model will change. From a design point of view, the work is not limited by anything - you can draw whatever you want and apply all the effects available in this program. The combination of raster and vector graphics looks very impressive. Considering that Corel can import Photoshop files and supports layers, this is not difficult to do. To do this, in Photoshop we do all the necessary actions, for example, we make a complex curly cutout through which the Vector graphics, drawn in Corel, and save the file with the extension .psd. Then in Corel we import it (File > Import), where our clipping will be presented as a separate graphic object, and if there were several layers in Photoshop, then in the form of a group of objects. If you intend to register your site in banner networks, it would be a good idea to think about placing banners in advance and leaving space for them. The best option- go online and save a couple to your disk, then placing them on your layout in the right place. If placement is intended contextual advertising, then it is also necessary to provide a place for it.

The main criterion for work is a sense of proportion - every graphic element slows down page loading in proportion to its size. It's hard to figure out the approximate size of an entire page offhand, so in my opinion it's better to draw a little less than a little more. In my work, I always try to ensure that the size of the main page graphics does not exceed 40-50 kilobytes, except in cases where the customer puts forward his requirements.

Despite the fact that Corel has its own means of optimizing images, we will perform further processing in Photoshop. By further processing we mean minor tweaks and corrections, if any. In addition, sometimes some things are simply more convenient and easier to complete in Photoshop. To do this, we export our layout to Tiff format Bitmap. The procedure is as follows: (File > Export), in Files of type select “Tiff Bitmap”, in “File name” enter the file name and click “Export”. In the “Convert to Bitmap” window that opens, select:

The image dimensions (Image Size) must correspond in pixels to the dimensions of the screenshot or, in other words, to the resolution of your monitor (in the figure, the dimensions of a 19-inch monitor). Accordingly, in percentage - everything is 100%. Click OK. The entire layout, including the screenshot, is exported to Tiff Bitmap. If you need to convert to Tiff without a screenshot and with transparent background, then you need to unlock it and delete it (if the screenshot is on a separate layer, just make the layer invisible), and check the “Transparent background” checkbox in the conversion options. In the size fields, the pixel values ​​will change, but the percentage values ​​for the width and height should still be 100%. All. The output is a Tiff Bitmap with a resolution of 72 ppi in RGB, ready for optimization and cutting.