Design Studio Overview

User Guide

Registration

To register for the AVI Media Design Studio, click on Register on the top menu. Please fill in the form to complete your registration.

Once completed, you will receive an email with your password to access the Design Studio.

Login

To login, please selected Log In from the top menu. Enter your email address and password.

Forgot Password

If you forget your password, click Register/Log In from the top menu.

Below the Log In button is a link that says, ‘Lost your password?’, click on it and provide the email address you registered with and press ‘Reset Password’.

A new password will be emailed to you.

Password Email Not Received

If you’ve requested a new password, but haven’t received an email, chances are that it has been sent to your Junk/Spam folder.

Check your Junk/Spam folder and you should see an email from Aviko containing your password.

Change Password

Change your password to something more memorable by selecting ‘My Account’ from the top menu.

Select ‘Account Details’ and then add your current password, followed by your new password in the appropriate fields.

Press save and your password is updated.

View & Edit Previous Designs

The designs that you’ve created all appear in your ‘My Account’ section, select ‘My Account’ from the top menu.

Select ‘Orders’ to display your previous designs. Select the design in question by clicking ‘View’.

From the resulting window, click Edit design to make changes to your design. Once happy with your changes, select ‘Process’ and then download your modified design.

Selecting Artwork Type

You currently have three different artwork types to choose from:

  1. A3 Posters – For walls, window and any other display – you can also download the image to use on Digital Screens.
  2. A6 Flyers – Ideal to print for tables, countertops or to do a leaflet drop to the local neighbourhood – you can also download the image for a portrait orientated images for digital uses.
  3. Social Media Images – 1080px x 1080px images that are ideal to use across your social media profiles, on your website and digital screens

To start, choose, ‘Start Design’ on the required artwork.

Choose your artwork type

Choosing a Pre-Built Template

When your design loads, on the left-hand side of the screen are a number of pre-built templates that you can choose from. Use the scroll bar next to the templates to see them all. To select your template, simply click on it and wait for it to load in the main window. You’re then ready to start designing.

Choose your design template

Start With a Blank Page

Don’t want to use a pre-built template? Want to use your own creativity? No problem.

A template will load to begin with, on the right-hand side click this button:  to delete all layers on the template. Confirm that you wish to do this to clear the page.

Save a Design for Later

If you want to come back to a design that you’ve started at a later date you can save your progress.

Click on the ‘Edit’ button at the top of the screen, then select ‘Save for Later’

To go back to designing your saved design, select ‘My Account’ from the top menu (when out of the Design Suite).

From here, select ‘My Designs’.

Select to ‘Edit’ the design from the list.

Changing Templates & Losing Changing

If you’ve made changes to your design and then decide to use a different template you will lose all of your changes.

Before you start modifying designs, make sure you are certain that you want to use the template you have selected.

Adding Text

To add text to your design by selecting ‘Text’ from the main menu.

Choose to add:

  1. Heading
  2. Subheading
  3. Body text
  4. Curved text (this will be covered in a separate heading)
  5. Preset text options

Click on the relevant option and a block of text will appear on the design.

You can now add your own text, change fonts, colours, size and various other format options. Which will be explained separately.

Formatting & Text Effects

Click on the text you want to format, you will notice the following options appear:

From left to right on the menu, you can:

  1. Choose font – From the drop-down menu, choose the font you require
  2. Font size – Either type your desired size or select from the drop-down menu
  3. Font colour – Click on the coloured box and either choose from the colour palette or create your own by clicking on the + button.  Note, if you find a colour you like remember the code that looks similar to #cc324b to reuse your colour
  4. Align text – Align text to the left, right or centrally
  5. Text case – Toggle between uppercase and lowercase
  6. Bold text
  7. Italic text
  8. Letter spacing and line height – You can increase/reduce the spacing of your letters to make words wider and also increase/reduce the line height for your paragraph
  9. Stroke – Similar to font colour, choose a stroke colour to outline your text, then choose the width of the stroke
  10. Text background – Choose a coloured background for your text
  11. Opacity/Transparency – Choose how (if at all) transparent you want your text to be

Curved Text

Positioning & Resizing Text

Adding Images

AVI Media’s Design Studio comes loaded with professional photography.

To add images to your design, from the left-hand menu, select Cliparts

From the dropdown list, choose the category you’d like an image for (the images are large file sizes so may take some time to load)

Choose your image by clicking on it.

It will then appear in your design for you to edit.

Uploading Images

Use your own images within the Design Studio.

To do this, select Photos from the lefthand panel (below on mobile).

Select Image Upload.

Select your chosen image and upload.

The image will be added to your design to edit.

Note: You will also be able to see previous images that you uploaded so no need to upload the same images over and over again.

Using Images from the Web

You may have images hosted elsewhere on the web, or want to use a free image service like Unsplash or Pixabay.

Select Photos from the left hand menu.

Click on Image URL.

Copy the image URL into the field.  Note: Copy an image URL: Windows: right click on the image and copy image address | Mac: Ctrl Click and then Copy Image Location)

Click Insert to add the image into your design to edit.

Positioning, Resizing & Layering Images

Locking Images in Place

When constructing your design you may want to lock images into place, such as backgrounds so you don’t accidentally move images.

To lock images in place do the following:

Select Layers from the left-hand menu.

Click on the image that you want to lock.

In the Layers Panel click on the Padlock symbol to lock your image. Click it again to unlock it.

Adding Shapes

Aviko’s Design Studio comes loaded with lots of shapes you can use as part of your design.

To add a shape to your design, from the left-hand menu, select Elements

Choose Shapes from the panel that appears.

Choose your shape by clicking on it.

It will then appear in your design for you to change colour, resize and position.

Formatting Shapes

Uses for Shapes

There are many uses for Shapes, here are a few ideas for you:

Text frames 

Use shapes to create frames for your text. Here’s an example:

Call to Action

Use shapes to make your key messages and calls to action stand out. Here’s an example.

Combining Shapes to Create Less Straight Borders

Grouping Multiple Shapes

If you have multiple shapes combined to create a logo or element of your design, or perhaps you’re using shapes as your background, to ensure they stay together when you move and resize them, you can group shapes (and images & text) together so they behave as one shape. This video explains how you group items together to form one shape with multiple elements:

Locking the Position of Shapes

When constructing your design you may want to lock shapes into place, such as backgrounds so you don’t accidentally move images.

To lock shapes in place do the following:

Select Layers from the left-hand menu.

Click on the shape that you want to lock.

In the Layers Panel click on the Padlock symbol to lock your image. Click it again if you want to unlock it.

QR Code Explained

Definition: A machine-readable code consisting of an array of black and white squares, typically used for storing URLs or other information for reading by the camera on a smartphone.

Similar to a barcode, a QR Code is a code that someone can scan with their smartphone camera to take them to a website. It’s an easy way to get people to a specific site without them having to type the web address.

It’s good practice to display the destination web address with the QR Code so people scanning it know where it’s going to take them.

Adding QR Code

Adding a QR Code is easy.

Firstly, from the left hand menu, select Elements.

From the opened panel, select Bar/QR-Code.

Enter the desired URL (website address with http:// or https://) where you want people to visit. Note: To avoid typos and errors, it’s good practice to copy the URL and paste it in the box.

Click Create QRCode.

The QR Code is generated and added to your design. Here you can move, resize and change the colour of the QR Code.

Note: Ensure your QR Code is on a contrasting background. If you need to create your own background for the QR Code, add a Square from Shapes and put the layer behind the QR Code, the example below uses a white square behind the QR Code:

Formatting QR Code

Formatting QR Codes is exactly the same process as formatting shapes. You can move them, resize them and change their colour. For instruction about how to do this, watch the formatting shames video below:

Layers Explained

Everything that you add to a design template creates a layer, this includes images, shapes, text and QR Codes.

Layers are ordered from back to front, with each new element added to your design added as the top layer. When you have lots of text, images and shapes in your design, it is easy to get lost as to where each layer sits.

Imagine each element of your design as a piece of paper, if you keep adding new pieces of paper, you will no longer be able to see the bottom sheet of paper.

The layers panel located on the main menu enables you to see each layer and the order of these layers.

This functionality allows you to clearly see how your design is built and where to make necessary changes.

Aligning Layers from Back to Front

There are three ways to move layers backwards and forwards in your design.

Using the Layers Panel

In the Layers Panel simply choose the layer you want to move backwards or forwards and drag it into position.

The top of the list is the back and the bottom is the front.

Right Click (Ctrl Click Mac)

To change the layer order of any design element, simply right-click (or Ctrl-Click on a Mac) and then choose one of the following:

  • Bring to Front: Brings the element to the top
  • Bring Forward: Brings the element forward one step
  • Send Backward: Sends element backward one step
  • Send to Back: Sends element to the back.

Use the Top Menu

Select the element you want to change the layer order of. On the top menu, select the symbol that looks like two stacked squares. Then choose one of the following:

  • Bring to Front: Brings the element to the top
  • Bring Forward: Brings the element forward one step
  • Send Backward: Sends element backward one step
  • Send to Back: Sends element to the back.

Locking Layers in Place

When constructing your design you may want to lock elements into place, such as backgrounds so you don’t accidentally move them.

To lock elements in place do the following:

Select Layers from the left-hand menu.

Click on the element that you want to lock.

In the Layers Panel click on the Padlock symbol to lock your image. Click it again to unlock it.

Finalising & Downloading Design

When you’re happy with your design and want to download it simply click the Process button.

You will then be taken to your shopping basketNote: From here you can create more designs, your design will stay in the basket, or proceed to checkout.

Click Proceed to Checkout.

Fill in any necessary fields.

Click Place Order.

You will now be able to Download your design by clicking on the Download button.

You can select the type of file you want to download:

  • PNG – Image
  • PDG – This is print ready and already has a 3mm bleed

Aligning Elements

You can align elements (top, bottom, left, right and centrally) to your page or you can align two or more elements in relation to each other, for example, aligning different blocks of text to the left.

Align Elements to the Page

Click on the element you would like to align to the page.

From the top menu select the symbol with 9 small squares.

You can then align to the page:

  • Centrally
  • Top
  • Top right
  • Right
  • Bottom right
  • Bottom
  • Bottom left
  • Left
  • Top Left

You can also align centrally vertically and horizontally.

Aligning  Two or More Elements Together

Select two or more elements of your design by holding the Shift Key whilst clicking on your elements, don’t let go of shift until you’ve selected all of your elements.

Right-click on a selected element.

From the box that appears, select:

  • Align vertical centre to align vertically in the centre of the page
  • Align horizontal centre to align horizontally in the centre of the page
  • Align left
  • Align right
  • Align top
  • Align bottom
  • Distribute horizontal to distribute multiple elements evenly across the page
  • Distribute vertical to distribute multiple elements evenly down the page.

Grouping Elements

If you have multiple elements combined to create a logo or element of your design, maybe you’re using shapes as your background, to ensure they stay together when you move and resize them, you can group shapes, images & text together so they behave as one element. This video explains how you group items together to form one shape with multiple elements:

Keyboard Shortcuts

Ctrl +A Select all layers
Ctrl +D Deselect all layers
Ctrl +E Clear all layers
Ctrl +Z Undo changes
Ctrl +Y Redo changes
Ctrl +L Show/hide Bleed line
Ctrl +R Show/hide Ruler
Ctrl +H Align layer horizontal center
Ctrl +V Align layer vertical center
Ctrl ++ Zoom In stage
Ctrl +- Zoom Out stage
Ctrl +0 Fit stage with viewport
Ctrl +1 Resize stage to real size
Ctrl +] Bring layer forward
Ctrl +[ Bring layer backward
Ctrl +O Load your designs
Ctrl +O Load your designs
Ctrl +B Make your text bold
Ctrl +I Italicize your text
Ctrl +G Group layers
Ctrl +P Duplicate layers
Alt +U Make your text UPPERCASE
Alt +L Make your text lowercase
Alt + Move the selected layers to left 1px
Alt + Move the selected layers to right 1px
Alt + Move the selected layers to top 1px
Alt + Move the selected layers to bottom 1px
Alt + Free transform
Shift ++ Zoom out selected layers
Shift +- Zoom in selected layer
Shift +G Show/hide Grid
Shift +L Clear all guidelines
Shift + Centered scaling
Move the selected layers to left 10px
Move the selected layers to right 10px
Move the selected layers to top 10px
Move the selected layers to bottom 10px
Delete Delete selected layers
V Disable drawing mode
B Enable drawing mode
Esc Quit text editing
Ctrl +Shift +] Bring layer to front
Ctrl +Shift +[ Send layer to back
Ctrl +Shift +I Import Design
Ctrl +Shift +E Export Design
Ctrl +Shift +S Save Design for later
Ctrl +Shift +O Load Your Design in Cart
Ctrl +Shift +G Ungroup
Ctrl +Shift +L Clear all stages
Ctrl +Shift +< Decreate font size
Ctrl +Shift +> Increate font size

No products in the cart.