Create an image

In this guide we walk-through how-to create an image by using the April editor. Below an example of a full made image with the editor.

Create welcome image preview

Table of content

There are 3 sections in the editor and they are:

Section 1 action button

The first section is about action buttons, those buttons perform some action such as:
  • The Back to select button will just get you back in the image's selection.
  • The Change background button will open a dialog and allow you to change the background of the image or revert to transparent.
  • The Add avatar button will add an avatar in the canvas and therefore you can drag and drop wherever you want by just clicking it also you can resize it.
  • The Add text button will open a dialog and you'll have to fill the form therefore a text will appear in the canvas and you can click on it to resize or drag and drop it.
  • The Resize button will open a dialog and you'll have to fill the width and height of the resize therefore It will apply the resize to the canvas.
  • The Save button will save any changes made to the canvas

Section 1

Section 2 canvas

This is where you should build your image, by clicking on a text or avatar It will activate the transformer of the element and allow you to resize or drag and drop it. You can also see the width and height of the canvas and whether you're creating a new image or editing an existing one.

Section 2

Section 3 canvas elements

This is where are regrouped all the elements and where you can manage what is on the canvas, you can edit any parameter of the element or remove it from the canvas. To see the parameters of the element you just have to click on the expand icon on the right, It will expand below the panel and you'll see all the parameters. If you have many text in the canvas and you don't know which element, you're targeting you can click on Select on canvas button that will select target element on the canvas and show you which one you're about to edit.

Section 2


How to create a new image

To get to the editor you'll have to login in the dashboard and select a server, therefore in the left sidebar, in the administration expand select the welcome option. After you got in the welcome click on OPEN EDITOR button and there you go, you are in the image selection.

Remember to save the images after you've made changes to it.

Get to editor

After you got in the image selection, you can either create a new image or edit an existing one, in alternative import it from the guild. To create a new one, you'll have to just click on CREATE NEW and it will take you to an empty editor where you can add elements.

Create new

How to resize the image

Resizing the image is pretty much easy, you'll have to click the RESIZE button on the action buttons section at the top. Therefore, a dialog will pop up and it will ask you the height and the width of the new image. Make sure you select a value between 1 and 1000. After you have entered the width and height you wanted, click on apply to save the changes

Resize

How to add text

Want to add some fancy text to entertain the new users? then click on the ADD TEXT button on the action buttons section at the top. Therefore, a dialog will pop up and there you can customize the options. The following options are available:

  • Select the fill: This indicate the colour of the text and you can choose from a long range of colour by just clicking the box and choosing the suitable colour for you.
  • Select text align: This indicate the align of the text that will be insert in the image. There are 3 options: Left, right or center. by default left.
  • Select vertical text align: This indicate the vertical align of the text that will be insert in the image. There are 3 options: Top, middle and bottom. By default top.
  • Select X position: This is the x position of where the text should be placed, you should not worry about this value, as you can move the text after, by just using drag and drop tools. The value should be between 0 and the width of your image. That's limited only on the insert phase though, after you've inserted the text you can set the X value over the width of the image.
  • Select Y position: This is the y position of where the text should be placed, you should not worry about this value, as you can move the text after, by just using drag and drop tools. The value should be between 0 and the height of your image. That's limited only on the insert phase though, after you've inserted the text you can set Y value of the height of the image.
  • Select text: This is the text that will be inserted inside the image. Currently it does support only UTF-8 characters and it does not support emoji. You can use text formatting for this options, so Welcome {user} will result in Welcome Waterball in your case the user who joins. There are a lot of tags available to use.
  • Select font size: This is the font size of the text that will be insert inside the image, the font size is basically how big the text is going to be, it can be changed later.
  • Adapt text based on box size: This is a feature that allows to automatically calculate the font size of the text by using length of the text plus the width and height of box. This option should be used carefully because it can break your image easily. On the other hand, is really useful for dynamic text that use text formatting so you don't need to worry about text going off, as the text will be automatically resized based on the box.
  • Select width: This is how large the box should be, you don't need to worry about this value as it can be resized on the canvas later.
  • Select height: This is how tall the box should be, you don't need to worry about this value as it can be resized on the canvas later.

All the parameters can be changed later on the canvas by using the elements list that is located below of the canvas and expand the panel.

Add text

Result:

Add text result

How to add avatar

Want to add the avatar of the user who just joined? then click on the ADD AVATAR button on the action buttons section at the top. Therefore a dialog will pop up and there you can customize the options. The following options are available:

  • Select avatar style: This is how the avatar should be displayed, currently you can choose only between rounded and square. It can be changed later on the canvas. Essentially the rounded style its the avatar rounded and the square style is the avatar without any adjustment.
  • Select X position: This is the x position of where the avatar should be placed, you should not worry about this value, as you can move the avatar after, by just using drag and drop tools. The value should be between 0 and the width of your image. That's limited only on the insert phase though, after you've inserted the avatar you can set the X value over the width of the image.
  • Select Y position: This is the y position of where the avatar should be placed, you should not worry about this value, as you can move the avatar after, by just using drag and drop tools. The value should be between 0 and the height of your image. That's limited only on the insert phase though, after you've inserted the avatar you can set the Y value over the height of the image.
  • Select width: This is how large the avatar should be, you don't need to worry about this value as it can be resized on the canvas later.
  • Select height: This is how tall the avatar should be, you don't need to worry about this value as it can be resized on the canvas later.

Add text

Result:

Add text result

How to change the background image

You do not enjoy a transparent background? Then you should be relief because April allows you to change the background image! To change the background image you only have to click on CHANGE BACKGROUND button on the action buttons, located at the top of the editor. Therefore a dialog will pop up and there you can upload your background image. Just keep in mind that it should not exceed 2MB. and not be in some strange extension. The accepted file extension are:

  • Jpeg
  • Jpg
  • Png
  • Gif (Animation is disabled, in future the animation feature will be added)

Click on drag & drop your files or Browse panel to choose your file and upload on April servers. After the upload has been completed successfully click on apply. Keep in mind that your background image will be resized without keeping the aspect ratio.

Change background

Result:

Change background result

Last updated on 30ยบ lug 2019