Skip to content

Commit

Permalink
Update index.md
Browse files Browse the repository at this point in the history
  • Loading branch information
elenalo91 authored Apr 19, 2024
1 parent 6267db1 commit a99f844
Showing 1 changed file with 16 additions and 16 deletions.
32 changes: 16 additions & 16 deletions docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ micro_nav: false
---
## Starting

When you open Mega Creator, at the top you will see the **My designs** section, which will hold any collages you create. Here you can start a new project right away or scroll down to view all of our templates which you can use as a base for your project. These templates range from stock photos and illustrations to Pinterest posts and TikTok thumbnails.
When you open Mega Creator, you will see the **My designs** section at the top, which will hold any collages you create. Here, you can start a new project right away or scroll down to view all of our templates, which you can use as a base for your project.

<p align="center">
<img width="900" src="/public/templates.png">
Expand All @@ -32,13 +32,13 @@ Let's create a simple event announcement poster for social media.

### Canvas settings

Click **Create new design** in the My Designs section or press _Ctrl+X_. You will see the main working area with a blank canvas. As a first step click on the canvas size dropdown menu in the top panel and select the resolution you need. You can choose a preset template or set a custom size. Here you can also set a name for your design and control the zoom scale. For now, we will go with a standard 4x3 canvas.
Click **Create new design** in the My Designs section or press _Ctrl+X_. You will see the main working area with a blank canvas. As a first step, click on the canvas size dropdown menu in the top panel and select the resolution you need. You can choose a preset template or set a custom size. Here, you can also set a name for your design and control the zoom scale. For now, we will go with a standard 4x3 canvas.

<p align="center">
<img width="900" src="/public/resolution.png">
</p>

Often you will need to apply a specific color to the canvas, so head to the **Backgrounds** section in the left-side panel. There you can choose a solid color or a gradient from a preset palette, set custom colors with a color picker or a HEX code. Below the color options, you will also see suggested graphic assets you can use as backgrounds.
Often, you will need to apply a specific color to the canvas, so head to the **Backgrounds** section in the left-side panel. There, you can choose a solid color or a gradient from a preset palette, set custom colors with a color picker or a HEX code. Below the color options, you will also see suggested graphic assets you can use as backgrounds.

<p align="center">
<img width="900" src="/public/bgcolor.png">
Expand All @@ -47,7 +47,7 @@ Often you will need to apply a specific color to the canvas, so head to the **Ba
### Libraries and Search

The main highlight of Mega Creator is the integrated libraries of Icons8 graphics, which let you seamlessly combine and modify any of our assets in your designs.
Currently, Mega Creator includes illustrations, 3D models, icons, and photos. Some categories such as Shapes and Backgrounds combine several types of assets.
Currently, Mega Creator includes illustrations, 3D models, icons, and photos. Some categories, such as Shapes and Backgrounds, combine several types of assets.

Click on the **Icons** section of the left-side panel. You can use the search bar at the top to find icons from all styles we have or use **filters** and **categories** to limit your search.

Expand All @@ -57,7 +57,7 @@ Click on the **Icons** section of the left-side panel. You can use the search ba

## Controls and features

Place an icon on the canvas by clicking on it or dragging and dropping it onto the working area. Click on the placed icon again to see the available controls:
Place an icon on the canvas by clicking or dragging and dropping it onto the working area. Click on the placed icon again to see the available controls:

<p align="center">
<img width="900" src="/public/objcont.png">
Expand All @@ -69,36 +69,36 @@ Place an icon on the canvas by clicking on it or dragging and dropping it onto t
* **Outline** is available for text objects and adds an outline of variable thickness that can be recolored.
* **Harmonization** is available for user-uploaded objects and is used to adjust the color balance of an image to make it fit the project.

After we resized an icon and adjusted its opacity to make it act as a background accent, we also placed several **illustrations** that fit the theme of our project. The illustration menu filters are more extensive than those in the icons section: you can sort by technique, mood, and colors amongst other parameters:
After we resized an icon and adjusted its opacity to make it act as a background accent, we also placed several **illustrations** that fit the theme of our project. The illustration menu filters are more extensive than those in the icons section: you can sort by technique, mood, and colors, amongst other parameters:

<p align="center">
<img width="900" src="/public/illsearch.png">
</p>

One of the illustrations we decided to use blends with the background, so we need to **recolor** it:
One of the illustrations blends with the background, so we need to **recolor** it:
<video autoplay="" muted="" loop="" playsinline="" width="auto" height="auto"><source src="/public/recolor.mp4" type="video/mp4"></video>

Now it's time to add **text**. In the corresponding section of the tool, you can use text blocks of a preset size and explore all the fonts we have. Mega Creator uses [Google Fonts](https://fonts.google.com/) for all your text-based needs.

After placing a text object you can change its color, weight, line spacing, formatting, and alignment:
After placing a text object, you can change its color, weight, line spacing, formatting, and alignment:

<p align="center">
<img width="900" src="/public/text.png">
</p>

Let's switch to the **Shapes** tab. This section includes basic geometric shapes and simple illustrations. In our example we are going to use rectangles to make the text stand out:
Let's switch to the **Shapes** tab. This section includes basic geometric shapes and simple illustrations. In our example, we are going to use rectangles to make the text stand out:

<video autoplay="" muted="" loop="" playsinline="" width="auto" height="auto"><source src="/public/shape.mp4" type="video/mp4"></video>

As a final touch, we are going to add a QR code generated in a third-party tool to the flyer. For that, we will need to use the **Upload** tab of the left-side panel. Mega Creator supports **.png**, **.jpg**, **.webp** and **.svg** uploads of up to **20 Mb** in size.
As a final touch, we will add a QR code generated by a third-party tool to the flyer. For that, we will need to use the **Upload** tab of the left-side panel. Mega Creator supports **.png**, **.jpg**, **.webp** and **.svg** uploads of up to **20 Mb** in size.

<p align="center">
<img width="900" src="/public/QR.png">
</p>

## Additional features
## AI Tools and 3D Models

Apart from the graphic assets described above, Mega Creator features our AI tools: **Background Remover** and **Face Swapper** and interactable 3D models.
In addition to the graphic libraries described above, Mega Creator features our AI tools and interactable 3D models.

You can remove backgrounds from any images uploaded manually:

Expand All @@ -108,18 +108,18 @@ If you pick an image from the **Photo** section, you will be able to swap the fa

<video autoplay="" muted="" loop="" playsinline="" width="auto" height="auto"><source src="/public/faceswap.mp4" type="video/mp4"></video>

Some of the illustrations from our 3D styles are included in Mega Creator as full-fledged **3D models** which can be found in the corresponding menu section:
Some of the illustrations from our 3D styles are included in Mega Creator as full-fledged **3D models**, which can be found in the corresponding menu section:

<video autoplay="" muted="" loop="" playsinline="" width="auto" height="auto"><source src="/public/space.mp4" type="video/mp4"></video>

## Export and Sharing

Any changes you make in a project get automatically saved and synced with the server. This way you can safely close and revisit your documents at any point.
Any changes you make in a project get automatically saved and synced with the server. This way, you can safely close and revisit your documents at any point.

You can export your projects in three formats: .svg, .png, and .psd, which are available in several sizes.
Please note that if your project contains raster images (for example photos or non-svg files you uploaded manually), you won't be able to export it in .svg.
Please note that if your project contains raster images (for example, photos or non-svg files you uploaded manually), you won't be able to export it in .svg.

Here's how our project looks after exporting it as a large resolution .png:
Here's how our project looks after exporting it as a large-resolution .png:

<p align="center">
<img width="900" src="/public/flyer.png">
Expand Down

0 comments on commit a99f844

Please sign in to comment.