Create Your Own
🎨

Create Your Own

📄
Create Your Own saves the time and money spent tasking agencies to make simple alterations to images. It empowers users without access to or knowledge of image manipulation software to resize, crop and transform Brand Hub imagery.
image

Contents

Permissions

Create Your Own is available to Administrators, Uploader publishers, Uploader's & Privileged users. It’s not available for Guest or Standard users.

How to access Create Your Own?

image

Users with access to Create your own will see a new button on the asset details page/asset details modal for all eligible assets, called ‘Create your own’ which will take the user straight to the editing module, where they can make changes to the image.

The user can edit the image using options in the image editing panel on the left, or by using controls on the image itself to change size and positioning.

File options

File options are used to edit the file that is output from Create Your Own. Changes made here have no visual effects on the image (nor the image preview on the right) and are concerning image properties.

File name

The user can give the image a name, so it can be identified when downloaded. By default the file will be named ‘Untitled Image’.

File type

The user can choose to export the image as png or jpeg. The default selection is png.

DPI

When the file type ‘jpeg’ is chosen, the user can additionally change the DPI (dots-per-inch) of the image. Options are 72 (default), 150 or 300.

The image vs the canvas

Create your own uses 2 layers: the image and the canvas. In the example below, the canvas can be seen in white, and the image with the blue outline.

image

This allows the user full control over the image they output – the canvas. By separating these 2 layers, the user can drag the image around the canvas, exporting the exact portion/crop of the image they require.

The menu bar on the left is context-sensitive. When the image is selected (above) then image options are available to the user. When the canvas is selected (any time the image is not selected) the canvas options are available.

Image editing

Image options are used to manipulate the image within the canvas. This includes flipping the image, changing the colour and resizing/rotating/moving the image.

To activate the image options, the user must click on the image. Clicking the image selects it and activates image editing options. Clicking away from the image/on the canvas activates canvas editing options.

image

Flip

The user can flip the image vertically or horizontally using the up/down and left/right arrows respectively. All changes will be reflected instantly on the image preview on the right.

Colour

The user can keep the colour as the original image, or apply a greyscale filter to the image. All changes will be reflected instantly on the image preview on the right.

Resize image

The user can use the blue drag handles in the 4 corners of the selected image to increase/decrease the size of the image by dragging outwards/inwards. The image will always retain the original aspect ratio and will not be stretched. Where the image is resized larger than the canvas, the boundary of the image will be shown with the blue outline (as shown below). When resizing, the image will resize anchored to the opposite corner. This method can also be used to flip the image (by dragging past the opposite corner).

Rotate image

The user can use the extended blue drag handle in the top centre of the selected image to rotate the image. The image will snap to 90 degrees when it nears this orientation. Auto snap to 90 degrees can be disabled by holding the shift key whilst rotating.

Move image

The user can click on the image and drag it around the canvas, allowing them to ensure the desired part of the image is on the canvas. When ‘dropping’ the image close to the boundary of the canvas, the image will automatically ‘snap’ to the canvas edge. Auto snap to canvas edge can be disabled by holding the alt key whilst dragging/letting go of the image. This will ‘drop’ the image in the exact location the user releases the cursor.

Canvas editing

Canvas editing options are used to edit the canvas. This includes resizing/cropping the canvas, changing the background colour of the canvas and applying preset sizes.

The canvas is the visible section on the screen, and shows the user what will be produced when they click “Download’.

To activate the canvas options, the user must click outside the image (including clicking on the canvas background). Clicking the image selects it and activates image editing options. Clicking away from the image/on the canvas activates canvas editing options.

image

Resize canvas - crop

The user can enter crop mode by:

  1. Clicking the crop icon when in canvas editing mode
  2. Clicking on the canvas background

The user can use the orange drag handles in the 4 corners and middle of each side of the selected image to increase/decrease the size of the canvas boundary by dragging outwards/inwards. Aspect ratio is not retained, and the user can make the canvas any dimension they choose. The image will remain in it’s relative position on the canvas. The canvas can be resized smaller than the image, therefore cropping the image

Crop mode can be exited by clicking on the crop icon or clicking outside of the canvas.

Resize canvas to image

The user can resize the canvas to the current size of the image in the click of a button, using the resize icon. This will resize the canvas to the current dimensions of the image.

Resize canvas by dimension

If you know the exact size image you want, simply enter the required width and height (in pixels).

You can lock the dimensions if you wish using the lock icon, this will automatically resize the height based upon the aspect ratio, when the width is changed (and vice versa).

Once resized, you can drag the image around within the canvas, to ensure the output is exactly what you want.

Background colour

The user can change the background colour of the canvas. When an image is downloaded and the image is smaller than the canvas, the background colour will fill the gaps. By default this is white with an opacity of 100%. The user can change the colour from white to black, and can use the slider to change the opacity. The grid background will become visible when the opacity is reduced, to visualize this.

Preset sizes

The user can choose from a range of preset sizes to apply to the canvas. When chosen, the image will be scaled to fill the preset size. The user can then move/resize the image accordingly to ensure the desired output.

The available presets are:

  • Original (reverts to original size of image)
  • Facebook Image (1200px x 1200px)
  • Facebook Cover (1702px x 630px)
  • Facebook Story (1080px x 1920px)
  • Instagram Post (1080px x 1080px)
  • Instagram Story (1080px x 1920px)
  • Twitter Post (1024px x 512px)
  • Twitter Header (1500px x 500px)
  • Pinterest Post (736px x 1128px)
  • LinkedIn Post (1200px x 627px)

Reset

The user can undo all changes they have made to the image and reset it to its original state by clicking the reset button within the Create Your Own header.

The particulars

The preview

When updating the image, the user will see a visual representation of any changes in the panel on the right hand side.

Image specs

Below the preview of the image the specifications of the image being edited are shown. This includes:

  • Original file extension
  • Original image dimensions

Note: The image used for editing is a smaller version of the original file.

The navigation bar

The navigation bar can be used to zoom in/out (showing the current zoom %). The icons can also be used to zoom to 100% or fit the canvas to the screen.

Downloading an image

In order to download an edited image, the user will click the download button.

The file will be immediately downloaded to the user’s computer, named the specified name followed by the selected file extension e.g. “image.png”

Please note; All changes the user makes to an image file, does not affect the master asset available within the Brand Hub and are not saved.

Exiting Create Your Own

When the user has finished editing the image, they can return to the Brand Hub using the ‘Exit’ button in the top right of the screen.

If they accessed create your own from the asset details modal, they will be returned to the search on the grid view. If they accessed from an asset details page, they’ll return there.

Once they have left Create Your Own, any changes to the image will be lost.