Online Designer Help

Standard Tools

Top Pane

Image Options

Text Options

Object Options

Multiselect Options

Group Options

Node Options

Zoom

Standard Tools

Standard Tools are used to add elements to your design. You can add text, image, library shapes, line, ellipse, and rectangle or create freehand drawing or add paths to your design using these tools. Standard tools appear on the left side of Pixopa Design Express screen.

A closer look at Design Express Standard Tools

Following are the tools in this toolbar:

Add Text

[Add text]

Select this tool to add text to canvas. Once you click on this button, cursor will appear on centre of canvas. You can type the text and change formatting using text toolbar (that appears on the right side of canvas as soon as you select the text tool).

Add Image

[Add image]

Select this tool to add image to canvas. Once you click on this button, image library pan will slide down at the top of studio page.

This pan will allow you to add images from any of the libraries:

- from your ‘My Images’ folder where you’ve uploaded the images earlier OR

- from any online location like, your own Facebook, Picasa, Instagram, or Flickr albums;

You may login to any of your accounts and images under it will be displayed in image slider.

Once you open the required library (after login), you can just drag it and drop on canvas, and the image will appear on the canvas.

Shapes

[Shape Library]

Clicking on this tool opens the studio image library with a lot of shapes to choose from. These shapes are arranged under various heads, like, Basic, Objects, Arrows, Animals, Music, etc.

Draw Tool

[Draw freehand using pencil]

Use this tool to draw a freehand drawing. Press the Left-click of mouse from where you want to start (on canvas) and move the mouse, keeping the left-click pressed. This will create free hand drawing.

Line Tool

[Draw straight line]

Use this tool to draw a straight line. Press the Left-click of mouse from where you want to start (on canvas) and move the mouse, keeping the left-click pressed, till the point where you want to end. This will create a straight line.

Rectangle Tool

[Click to draw rectangle]

[Click to draw square]

[Click to draw freehand rectangle]

Use this tool to draw a rectangle or a square (a rectangle with width equal to height is a square). Clicking on this option once will open the three types of rectangles that you can draw. Click on the appropriate one to select it.

Press the Left-click of mouse from where you want to start (on canvas) and move the mouse, keeping the left-click pressed, till the point where you want to end. This will draw a rectangle.

Ellipse Tool

[Click to draw ellipse]

[Click to draw circle]

[Click to draw freehand ellipse]

Use this tool to draw an ellipse or a circle (an ellipse with width equal to height is a circle). Clicking on this option once will open the three types of ellipses that you can draw. Click on the appropriate one to select it.

Press the Left-click of mouse from where you want to start (on canvas) and move the mouse, keeping the left-click pressed, till the point where you want to end. This will draw an ellipse or a circle.

Path Tool

[Draw a path]

Use this tool to draw a path. Press the Left-click of mouse from where you want to start (on canvas) and move the mouse, till the point where you want to take a turn. Click again on this point to end this line segment and start a new line segment. You can end this path by either double-clicking or by clicking on the starting point. This will complete the path.

Top Pane

The Top Pane appears above the Standard Tools Box and Canvas.

A Closer Look at Design Express Top Pane

Following are the options available in Top Pane:

Undo

[Undo]

Use this option to undo (cancel) the last action performed.

Redo

[Redo]

Use this option to redo the action cancelled through last Undo.

Clear All

[Clear All]

Use this option to delete all the objects on the page, even the background image and color. The page will be cleared.

Cut

[Cut (Ctrl + X)]

Use this option to cut the selected objects and copy it to clipboard. Cut objects will be deleted from the page and can be pasted multiple times using Paste option.

Copy

[Copy (Ctrl + C)]

Use this option to copy the selected objects to clipboard. Copied objects will not be deleted from their original page and can be pasted multiple times using Paste option.

Paste

[Paste (Ctrl + V)]

Objects that is Cut or Copied last can be pasted any number of times using this option. Every time you click on Paste, a copy of last Cut or Copy object will be pasted on canvas.

Delete

[Delete (Del / Backspace)]

Using this option, selected object can be deleted permanently.

Background Image

[Convert the image into background image]

This option will help you convert the image into background image. Image selected by you will be resized to fit the canvas and its opacity will reduce to give an impression of perfect background.

Background Color

[Change background color]

You can change the color of background (i.e., the canvas) using this option. Click on the tool and select color from color palette. You can even select a linear gradient or a radial gradient to fill the canvas.

Remove Background Color/Image

[Remove Background Color/Image]

Use this option to remove the background image and color. The background of the page will be cleared.

Change Measurement Unit

[Change Measurement Unit]

You can change measurement units to Pixels, Inches, or Centimeters using this option. Just click on radio button corresponding to the unit, and all measurements will change to this unit.

Wireframe Mode (On/Off)

[Show all objects in wireframe mode]

[Show all objects in original mode]

Clicking once on this button will show all the objects in wireframe mode. Clicking on it again will show the objects in their original mode.

In wireframe mode all the object colors, shadows, stroke color and width will be hidden and only plain black outline of all objects will be shown.

Gridlines (On/Off)

[Show Gridlines]

[Hide Gridlines]

Clicking once on this button will show gridlines on canvas. Clicking on it again will hide those gridlines.

Ruler (On/Off)

[Show Ruler]

[Hide Ruler]

Clicking once on this button will show ruler on canvas. Clicking on it again will hide the ruler.

Preview

[Show PDF Preview]

Use this option to show PDF preview of your design. You need to allow pop-ups to view the preview. If pop-ups are blocked then Design Express will not be able to open the PDF preview.

Save

[Save Design]

You can save your unfinished designs and access them later using this option. If you are a registered customer and are logged in, clicking on Save button will save the design in your ‘My Designs’ folder.

If you are not logged in, system will ask you to login using your email id and password registered with Web-to-Print store. In case you are not registered, you can create a new account by clicking on the link provided below email id and password fields.

Help

[Help]

You can open help page using this option. In the help section, you can search for any options that you want to know more about.

Product Info

[View Product Information]

Clicking on this button will show information of product for which you are creating the design. It will show name of product with all the attributes like, size, papertype, shape, printing options, etc.

Add to Cart

[Add to Cart]

Once you have finished your design, you may use this option to add this product to your cart. Clicking on Add to Cart button will lead you to Shopping Cart, with details of all the products in your cart.

Image Options

As soon as you add new image on canvas or click on an existing image, Image Options toolbar will open.

Following are the options available:

I. Height & Width

Height

Hold the slider handle and drag left or right to decrease or increase the image height respectively. Alternatively, you can click on the plus (+) or minus (-) button to increase or decrease the height of image in steps.

Width

Hold the slider handle and drag left or right to decrease or increase the image width respectively. Alternatively, you can click on the plus (+) or minus (-) button to increase or decrease the width of image in steps.

Preserve Image Aspect Ratio

Images have original aspect ratio, ie, the ratio of image width to image height. By default, Pixopa Design Studio preserves the image aspect ratio. Hence, if you change the width of an image, its height will also change in the same ratio, and vice versa.

You may not like to preserve aspect ratio in some cases, and want to resize the image freely as per your wish. To do this, you can uncheck ‘Aspect Ratio’. Now, the image width or height can be resized freely without changing other dimension.

If you like to preserve aspect ratio, then click to check ‘Aspect Ratio’ again. Now, any change in image width or height will result in change in other dimension in the same ratio.

Resize to Best Resolution

[Resize image to best resolution]

Clicking on this button will resize image so that it is of best resolution. Generally it is the original image size. The image will be aligned to top-left of canvas.

Rotate

You can change the rotation angle of selected image using this option. Clicking on left button will rotate image anticlockwise by five degrees and clicking on right button will rotate image clockwise by five degrees.

II. Opacity

Change Opacity

Use this option to change opacity of image. 100 means image is completely opaque, 0 means it is transparent.

III. Alignment

Left, Centre, Right Alignment

[Align image to left]

[Align image centre]

[Align image right]

Clicking on this option aligns the image to left, centre, or right of page (horizontally).

Top, Middle, Bottom Alignment

[Align image to top]

[Align image middle vertically]

[Align image to bottom]

Clicking on this option aligns the image to top, middle, bottom of page (vertically).

Bring to Front

Use this option to bring the selected image in front of every other object on canvas.

Send to Back

Use this option to send the selected image behind every other object on canvas.

IV. Effects

Flip Horizontal

[Flip object horizontally (mirror image)]

When you click this option, selected object will be flipped horizontally and its mirror image will be shown.

Flip Vertical

[Flip object vertically (pond image)]

When you click this option, selected object will be flipped vertically (like reflection in a pond).

Blur

You can change the Gaussian blur value of selected image using this option. Click on the text box of blur value, type the new value and press enter – blur value of object will be changed. Alternatively, you can click on up-down arrows to increase / decrease blur-value in steps.

V. Advanced

X, Y Coordinates (Image Position)

[Set X coordinates for top left corner of image]

[Set Y coordinates for top left corner of image]

X and Y coordinates determine the position of image on canvas. X and Y specify x and y coordinate of top left corner of image box. Click on the text box of any of X or Y, type the new value and press enter – top left corner of image selection box will be shifted to (x,y) position. Alternatively, you can click on up-down arrows to increase / decrease X, Y values in steps.

Width

[Set width]

Click on the text box of width, type the new value and press enter – width of image will change as per new value. Alternatively, you can click on up-down arrows to increase / decrease width values in steps.

Height

[Set height]

Click on the text box of height, type the new value and press enter – height of image will change as per new value. Alternatively, you can click on up-down arrows to increase / decrease height values in steps.

Crop

[Crop selected image]

Use this option to crop the images. Select the image you want to crop and click on the crop button. Image will open in new popup, in which you can draw a rectangle and select the image area you want to show. Once you select the area, click on crop button on this popup (below scrollbar). The cropped image will be shown on the canvas.

Rotation Angle

[Rotate image]

You can change the rotation angle of selected image using this option. Click on the text box of rotation angle, type the new value and press enter – image will be rotated with the specified angle. Alternatively, you can click on up-down arrows to increase / decrease rotation angle in steps.

VI. Lock or Delete

Lock Object

Use this option if you want to lock any image for editing. The locked image cannot be changed. All the editing options will be disabled, image cannot be moved or resized, and no editing will be possible.

Unlock Object

Once you click on ‘Lock Object’ button, image is locked and this button changes to ‘Unlock Object’. Clicking on this button will unlock the image again for editing. The image can now be changed. All the editing options will be enabled, image can be moved or resized, and editing will be possible.

Delete

Clicking on this button will delete the image permanently.

Text Options

As soon as you add new text on canvas or click on an existing text, Text Options toolbar will open.

Following are the options available:

I. General

Font Face / Type

[Font: Change the font face]

You can change the font face / type by this option. Click on the drop-down and select the font from the list.

Bold

[Bold: Make selected text bold]

Clicking on this option will make the selected text bold.

Italic

[Italic: Italicize the selected text]

This option makes the selected text italic.

Font Size

[Font Size: Change the font size]

You can change the font size by this option. Click on the text box, type the new size and press enter – size will be changed. Alternatively, you can click on up-down arrows to increase / decrease font size in steps.

Font Size Slider

[Drag to Change Font Size]

You can change the font size by dragging the slider handle of Font Size Slider. Press the left click, and drag the handle by keeping it pressed, and leave it when you reach the required size.

II. Color and Stroke

Fill Color

[Fill color inside text]

Use this option to fill the color inside the text

Stroke Color

[Change stroke/outline color]

Use this option to change stroke / outline color of text.

Change Opacity

[Change opacity of text]

Use this option to change opacity of text. 100 means text is completely opaque, 0 means it is transparent.

Stroke Width

[Change stroke/outline width]

You can change the stroke width by this option. Click on the text box, type the new width and press enter – stroke width of text will be changed. Alternatively, you can click on up-down arrows to increase / decrease stroke width in steps.

III. Alignment

Left, Centre, Right Alignment

[Align text to left]

[Align text centre]

[Align text to right]

Clicking on this option aligns the text to left, centre, or right of page (horizontally).

Top, Middle, Bottom Alignment

[Align text to top]

[Align text middle vertically]

[Align text to bottom]

Clicking on this option aligns the text to top, middle, bottom of page (vertically).

Bring to Front

[Bring the selected text in front of all other objects]

Use this option to bring the selected text in front of every other object on canvas.

Send to Back

[Send the selected text behind all other objects]

Use this option to send the selected text behind every other object on canvas.

IV. Effects

Flip Horizontal

[Flip text horizontally (mirror image)]

When you click this option, selected text will be flipped horizontally and its mirror image will be shown.

Flip Vertical

[Flip text vertically (pond image)]

When you click this option, selected text will be flipped vertically (like reflection in a pond).

Blur

[Change Gaussian blur value]

You can change the Gaussian blur value of selected text using this option. Click on the text box of blur value, type the new value and press enter – blur value of text will be changed. Alternatively, you can click on up-down arrows to increase / decrease blur value in steps.

V. Advanced

X, Y Coordinates (Text Position)

[Set X coordinates for top left corner of text]

[Set Y coordinates for top left corner of text]

X and Y coordinates determine the position of text on canvas. X and Y specify x and y coordinate of top left corner of text box. Click on the text box of any of X or Y, type the new value and press enter – top left corner of text selection box will be shifted to (x,y) position. Alternatively, you can click on up-down arrows to increase / decrease X, Y values in steps.

Rotation Angle

[Rotate text]

You can change the rotation angle of selected text using this option. Click on the text box of rotation angle, type the new value and press enter – text will be rotated with the specified angle. Alternatively, you can click on up-down arrows to increase / decrease rotation angle in steps.

VI. Lock or Delete

Lock Text

[Lock text for editing]

Use this option if you want to lock any text for editing. The locked text cannot be changed; no characters can be added or deleted. All the editing options will be disabled, text cannot be moved or resized, and no editing will be possible.

Unlock Text

[Unlock text for editing]

Once you click on ‘Lock Text’ button, text is locked and this button changes to ‘Unlock Text’. Clicking on this button will unlock the text again for editing. The text can now be changed; characters can be added or deleted. All the editing options will be enabled, text can be moved or resized, and editing will be possible.

Delete

[Delete selected text]

Clicking on this button will delete the text permanently.

Object (Line / Ellipse / Rectangle / Path) Options

As soon as you add new object on canvas or click on an existing object, Object (Line / Ellipse / Rectangle / Path) Options toolbar will open.

Following are the options available:

I. Color and Stroke

Fill Color

[Fill color inside object]

Use this option to fill the color inside the object

Stroke Color

[Change stroke/outline color]

Use this option to change stroke / outline color of object.

Change Opacity

[Change opacity of object]

Use this option to change opacity of object. 100 means object is completely opaque, 0 means it is transparent.

Stroke Width

[Change stroke/outline width]

You can change the stroke width by this option. Click on the text box, type the new width and press enter – stroke width of object will be changed. Alternatively, you can click on up-down arrows to increase / decrease stroke width in steps.

II. Alignment

Left, Centre, Right Alignment

[Align object to left]

[Align object centre]

[Align object right]

Clicking on this option aligns the object to left, centre, or right of page (horizontally).

Top, Middle, Bottom Alignment

[Align object to top]

[Align object middle vertically]

[Align object to bottom]

Clicking on this option aligns the object to top, middle, bottom of page (vertically).

Bring to Front

[Bring the selected objects in front of all other objects]

Use this option to bring the selected object in front of every other object on canvas.

Send to Back

[Send the selected object behind all other objects]

Use this option to send the selected object behind every other object on canvas.

III. Effects

Flip Horizontal

[Flip object horizontally (mirror image)]

When you click this option, selected object will be flipped horizontally and its mirror image will be shown.

Flip Vertical

[Flip object vertically (pond image)]

When you click this option, selected object will be flipped vertically (like reflection in a pond).

Blur

[Change Gaussian blur value]

You can change the Gaussian blur value of selected object using this option. Click on the text box of blur value, type the new value and press enter – blur value of object will be changed. Alternatively, you can click on up-down arrows to increase / decrease blur value in steps.

IV. Advanced

X, Y Coordinates (Object Position)

CX, X

[Set X coordinates for top left corner of object]

CY, Y

[Set Y coordinates for top left corner of object]

X and Y coordinates determine the position of object on canvas. X and Y specify x and y coordinate of top left corner of object box. Click on the text box of any of X or Y, type the new value and press enter – top left corner of object selection box will be shifted to (x,y) position. Alternatively, you can click on up-down arrows to increase / decrease X, Y values in steps.

X, Y Coordinates - Line Position (Only for line, not for other objects)

X1, X2

[Set X coordinates of line]

Y1, Y2

[Set Y coordinates of line]

x1 and y1 specify x and y coordinate of starting point of line. X2 and y2 specify x and y coordinate of end point of line. Click on the text box of any of X or Y, type the new value and press enter – starting-point or end-point of line will be shifted to new (x,y) position. Alternatively, you can click on up-down arrows to increase / decrease x, y values in steps.

rx, ry Horizontal and Vertical Radii (Only of ellipse, not for other objects)

[Set horizontal radius - ellipse]

[Set vertical radius - ellipse]

[Set radius - circle]

rx and ry (only r for circle) determine the horizontal and vertical radius for the ellipse. Click on the text box of any of rx or ry, type the new value and press enter – radii will change as per new value. Alternatively, you can click on up-down arrows to increase / decrease rx, ry values in steps. For circle, only one value ‘r’ is required as in circle - rx=ry (=r).

Width (Only for rectangle and image, not for other objects)

[Set width]

Click on the text box of width, type the new value and press enter – width of rectangle will change as per new value. Alternatively, you can click on up-down arrows to increase / decrease width values in steps.

Height (Only for rectangle and image, not for other objects)

[Set height]

Click on the text box of height, type the new value and press enter – height of rectangle will change as per new value. Alternatively, you can click on up-down arrows to increase / decrease height values in steps.

Rectangle Corner Radius (Only for rectangle, not for other objects)

[Set rectangle corner radius]

Click on the text box of rectangle corner radius, type the new value and press enter – corner of rectangle will change to rounded corners and their radii will be equal to new value entered. Alternatively, you can click on up-down arrows to increase / decrease corner radius values in steps.

Rotation Angle

[Rotate object]

You can change the rotation angle of selected object using this option. Click on the text box of rotation angle, type the new value and press enter – object will be rotated with the specified angle. Alternatively, you can click on up-down arrows to increase / decrease rotation angle in steps.

Convert to Path

[Convert object to path]

Click on this button and then double click on object to convert it to path. You can now change the shape of object by clicking on nodes of path and dragging the mouse. This will convert the current Options Pane to Path Options.

V. Lock or Delete

Lock Object

[Lock object for editing]

Use this option if you want to lock any object for editing. The locked object cannot be changed; no characters can be added or deleted. All the editing options will be disabled, object cannot be moved or resized, and no editing will be possible.

Unlock Object

[Unlock object for editing]

Once you click on ‘Lock Object’ button, object is locked and this button changes to ‘Unlock Object’. Clicking on this button will unlock the object again for editing. The object can now be changed; characters can be added or deleted. All the editing options will be enabled, object can be moved or resized, and editing will be possible.

Delete

[Delete selected object]

Clicking on this button will delete the object permanently.

Multiselect Options

You can select multiple objects (Text / Line / Ellipse / Rectangle / Path / Image)

- either by pressing ‘Shift’ key and clicking on multiple objects

- or by keeping the mouse button clicked and scrolling over multiple objects.

This will open Multiselect options.

I. General

Group

[Group selected objects]

Clicking on this button will group the selected objects and they will be converted to one object.

II. Alignment

Align to Dropdown

[Align selected objects with respect to]

Largest Object

Selecting this option will align all selected objects with respect to the largest object among all selected.

Smallest Object

Selecting this option will align all selected objects with respect to the largest object among all selected.

Page

Selecting this option will align all selected objects with respect to the page / canvas.

Left, Centre, Right Alignment

[Align selected objects to left]

[Align selected objects to centre]

[Align selected objects to right]

Clicking on this option aligns the selected objects to left, centre, or right with respect to the selection in ‘align to’ dropdown.

Top, Middle, Bottom Alignment

[Align selected objects to top]

[Align selected objects to middle]

[Align selected objects to bottom]

Clicking on this option aligns the selected objects to top, middle, bottom with respect to the selection in ‘align to’ dropdown.

III. Effects

Flip Horizontal

[Flip object horizontally (mirror image)]

When you click this option, selected object will be flipped horizontally and its mirror image will be shown.

Flip Vertical

[Flip object vertically (pond image)]

When you click this option, selected object will be flipped vertically (like reflection in a pond).

Blur

[Change Gaussian blur value]

IV. Advanced

X, Y Coordinates (Object Position)

[Set X coordinates for top left corner of object]

[Set Y coordinates for top left corner of object]

Group Options

When you select multiple objects and click on Group button, the objects are grouped to become one object.

This will open Group options on right side of Design Express screen.

I. General

Ungroup

[Ungroup selected grouped objects]

Clicking on this button will ungroup the grouped objects as separate objects.

II. Color and Stroke

Fill Color

[Fill color inside object]

Use this option to fill the color inside the object

Stroke Color

[Change stroke/outline color]

Use this option to change stroke / outline color of object.

Change Opacity

[Change opacity of object]

Use this option to change opacity of object. 100 means object is completely opaque, 0 means it is transparent.

Stroke Width

[Change stroke/outline width]

III. Alignment

Left, Centre, Right Alignment

[Align object to left]

[Align object centre]

[Align object right]

Clicking on this option aligns the object to left, centre, or right of page (horizontally).

Top, Middle, Bottom Alignment

[Align object to top]

[Align object middle vertically]

[Align object to bottom]

Clicking on this option aligns the object to top, middle, bottom of page (vertically).

Bring to Front

[Bring the selected objects in front of all other objects]

Use this option to bring the selected object in front of every other object on canvas.

Send to Back

[Send the selected object behind all other objects]

Use this option to send the selected object behind every other object on canvas.

IV. Effects

Flip Horizontal

[Flip object horizontally (mirror image)]

When you click this option, selected object will be flipped horizontally and its mirror image will be shown.

Flip Vertical

[Flip object vertically (pond image)]

When you click this option, selected object will be flipped vertically (like reflection in a pond).

Blur

[Change Gaussian blur value]

V. Advanced

X, Y Coordinates (Object Position)

[Set X coordinates for top left corner of object]

[Set Y coordinates for top left corner of object]

Rotation Angle

[Rotate object]

VI. Lock or Delete

Lock Object

[Lock object for editing]

Unlock Object

[Unlock object for editing]

Delete

[Delete selected object]

Clicking on this button will delete the object permanently

Node Options

Clicking on ‘Convert to Path’ button will convert the object to path. This will also open Path options on right side of canvas.

Double click on object to see the nodes of this object. You can now change the shape of object by clicking on nodes of path and dragging the mouse. This will also open Node options on right side of canvas.

I. General

X, Y Coordinates (Node Position)

[Set X coordinate for selected node]

[Set Y coordinate for selected node]

X and Y coordinates determine the position of node on canvas. Click on the text box of any of X or Y, type the new value and press enter – node will be shifted to (x,y) position, and shape will change. Alternatively, you can click on up-down arrows to increase / decrease X, Y values in steps.

Add Node

[Add node to shape]

Use this option to add a new node between the selected pair of nodes.

Delete Node

[Delete selected node]

Use this option to delete selected node from shape. Shape will be joined by the two nodes on either side of deleted node.

Delete Path

[Open selected path]

Use this option to open path joining the selected nodes from shape.

Join Nodes

[Join path for open nodes]

Clicking on this option adds the open nodes, and creates a path joining them.

Subpath

[Add sub-path to selected path]

Use this option to add a sub-path to selected path. You can draw the new path at any place on canvas, it will be attached to the main path, all the operations, like, move, delete, resize, change color, etc, will be applied on both together.

Zoom

You can magnify or reduce the design view to a specified zoom level by shifting the slider to right and left side respectively. The value at the top left of zoom bar shows the current zoom level.

Alternatively, you can also click on Zoom-In or Zoom-Out buttons outside the zoom bar:

Zoom In

[Zoom in by 50%]

Clicking on this button will increase the canvas size by 50%. Scrollbars will appear if size of canvas will be more than the screen size.

Zoom Out

[Zoom out by 50%]

Clicking on this button will decrease the canvas size by 50%.

Fit to Canvas

[Fit to Canvas]

Clicking on this button will fit the canvas into available canvas area.

Fit to Canvas

[Scale to 100%]

Clicking on this button will resize the canvas to its 100% size.

For more design inspiration have you checked out Canva.com?