Merge pull request #6 from icons8/pre

Pre

docs/index.md

@@ -20,235 +20,100 @@ micro_nav: false
 ---
 ## Starting
 
-When you open Mega Creator, at the top you will see the area that will hold any images you create. Here you can start a new project or scroll down to view all of our templates which you can use as a base for your project. These templates range from our stock photos and illustrations to Pinterest posts and TikTok thumbnails.
+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.
 
 <p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 1.png">
+  <img width="900" src="/public/templates.png">
 </p>
 
+Before proceeding, click on <img align="center" height="45" src="/public/hamburgermenu.png"> in the top-right corner and log in to your Icons8 account to connect your subscription if you have one and save your designs.
+
 Let's create a simple event announcement poster for social media.
 
 ### Canvas settings and controls
 
 Click **Create new design** in the My Designs area 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 at the top 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.
 
-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 color or a gradient from a preset palette, set your own color via a colorpicker or by inputting a HEX-code. Below the color options you will also see suggested graphic assets you can use as backgrounds.
-
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 2.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 color or a gradient from a preset palette, set a custome color via a color picker, or by inputting a HEX-code. Below the color options, you will also see suggested graphic assets you can use as backgrounds.
 
 <p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 3.png">
+  <img width="900" src="/public/resolution.png">
 </p>
 
 ### Libraries and Search
 
 The main highlight of Mega Creator are 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.
 
-### Graphics
-
-#### Photos
-
-<span class="colour" style="color:rgb(0, 0, 0)">Search for a photo using keywords and/or filters:</span>
+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 the filters and categories menu to limit the search.
 
 <p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 4.png">
+  <img width="900" src="/public/icons.png">
 </p>
 
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 5.png">
-</p>
-
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 6.png">
-</p>
-
-#### Illustrations
+## Mega Creator controls and features
 
-<span class="colour" style="color:rgb(0, 0, 0)">Find an illustration using keywords or by searching through styles and categories:</span>
+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:
 
 <p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 7.png">
+  <img width="900" src="/public/iconcontrols.png">
 </p>
 
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 8.png">
-</p>
-
-#### Icons
+**Adjust Effects** menu includes the following settings:
+* **Opacity** is used to control how transparent the object is.
+* **Shadow** adds a tweakable shadow to the object.
+* **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.
 
-<span class="colour" style="color:rgb(0, 0, 0)">To find icons, use keywords or scroll down and pick the style:</span>
+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="auto" height="auto" src="/public/Untitled 9.png">
+  <img width="900" src="/public/illsearch.png">
 </p>
 
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 10.png">
-</p>
+One of the illustrations we decided to use 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>
 
-#### Backgrounds
+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.
 
-<span class="colour" style="color:rgb(0, 0, 0)">There are 2 types of backgrounds available in Mega Creator: photographic and illustrated. Pick the type you need and search for backgrounds using keywords:</span>
+After placing a text object you can change its color, weight, line spacing, formatting, and alignment:
 
 <p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 11.png">
+  <img width="900" src="/public/text.png">
 </p>
 
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 12.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:
 
-#### Text
+<video autoplay="" muted="" loop="" playsinline="" width="auto" height="auto"><source src="/public/shape.mp4" type="video/mp4"></video>
 
-<span class="colour" style="color:rgb(0, 0, 0)">You may pick the size, color and style:</span>
+As a final touch, we are going to add a QR code generated in a third-party tool to the flyer. For that, we are going 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="auto" height="auto" src="/public/Untitled 13.png">
+  <img width="900" src="/public/QR.png">
 </p>
 
-#### Uploads
+## Additional features
 
-<span class="colour" style="color:rgb(0, 0, 0)">You may also upload your images in JPG, SVG and PNG formats up to 20Mb</span>
+Apart from the graphic assets described above, Mega Creator features our AI tools: **Background Remover** and **Face Swapper**.
 
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 14.png">
-</p>
+You can remove backgrounds from any images uploaded manually:
 
-<span class="colour" style="color:rgb(0, 0, 0)">Note that it’s possible to **remove background** of the uploaded picture if needed (use the “person” button):</span>
+<video autoplay="" muted="" loop="" playsinline="" width="auto" height="auto"><source src="/public/reindeer.mp4" type="video/mp4"></video>
 
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 15.png">
-</p>
+If you pick an image from the **Photo** section, you will be able to swap the face of a person on the photo with an AI-generated twin, one of the preloaded images, or with a photo you uploaded yourself:
 
+<video autoplay="" muted="" loop="" playsinline="" width="auto" height="auto"><source src="/public/faceswap.mp4" type="video/mp4"></video>
 
 ## Export and Sharing
 
-<span class="colour" style="color:rgb(0, 0, 0)">When clipart is ready, it’s automatically saved in your dashboard:</span>
-
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 16.png">
-</p>
-
-<span class="colour" style="color:rgb(0, 0, 0)">You may check all designs by pressing the “See all” button or scrolling right:</span>
-
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 17.png">
-</p>
-
-<span class="colour" style="color:rgb(0, 0, 0)">To **share** a clipart, press the “Share” buttons and select an option:</span>
-
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 18.png">
-</p>
-
-
-<span class="colour" style="color:rgb(0, 0, 0)">To **export** a clipart, press the “Export” button, pick an option, and press the “Download” button:</span>
-
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 19.png">
-</p>
-
-
-### Main Features
-
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 20.png">
-</p>
-
-
-<span class="colour" style="color:rgb(0, 0, 0)">**1** \- Adjust Effects \(Shift \+ E\) \- Select Opacity\, add shadow\, bring forward/send backwards</span>
-
-<span class="colour" style="color:rgb(0, 0, 0)">**2**</span><span class="colour" style="color:rgb(0, 0, 0)"> - Crop (Shift +Ctrl + C)</span>
-
-<span class="colour" style="color:rgb(0, 0, 0)">**3**</span><span class="colour" style="color:rgb(0, 0, 0)"> - Flip Horizontal (Shift + H)</span>
-
-<span class="colour" style="color:rgb(0, 0, 0)">**4**</span><span class="colour" style="color:rgb(0, 0, 0)"> - Flip Vertical (Shift + V)</span>
-
-<span class="colour" style="color:rgb(0, 0, 0)">**5**</span><span class="colour" style="color:rgb(0, 0, 0)"> - Bring Forward (Ctrl + ])</span>
-
-<span class="colour" style="color:rgb(0, 0, 0)">**6**</span><span class="colour" style="color:rgb(0, 0, 0)"> - Send Backwards (Ctrl + [)</span>
-
-<span class="colour" style="color:rgb(0, 0, 0)">**7**</span><span class="colour" style="color:rgb(0, 0, 0)"> - Duplicate (Ctrl + D)</span>
-
-<span class="colour" style="color:rgb(0, 0, 0)">**8**</span><span class="colour" style="color:rgb(0, 0, 0)"> - Delete (D)</span>
-
-<span class="colour" style="color:rgb(0, 0, 0)">You may also </span><span class="colour" style="color:rgb(0, 0, 0)">***undo***</span><span class="colour" style="color:rgb(0, 0, 0)"> (Ctrl +Z) /</span><span class="colour" style="color:rgb(0, 0, 0)">***redo***</span><span class="colour" style="color:rgb(0, 0, 0)"> (Shift+Ctrl+Z), </span><span class="colour" style="color:rgb(0, 0, 0)">***create new***</span><span class="colour" style="color:rgb(0, 0, 0)"> (Ctrl+X) and </span><span class="colour" style="color:rgb(0, 0, 0)">***duplicate***</span><span class="colour" style="color:rgb(0, 0, 0)"> (Shift + Ctrl+ S) collages.</span>
-
-
-**Recolor icons and illustrations**
-
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 21.png">
-</p>
-
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 22.png">
-</p>
-
-**Swap Faces**
-
-<span class="colour" style="color:rgb(0, 0, 0)">**Swap faces using** *Shift+Control+F* or![](https://lh4.googleusercontent.com/22haFFwOipauxpPkBQH9B5D3atKonjGGSc5u1wQqgIeTxG-idnUoRxBKC3tjDRqXQsEcxvozhCGZcVvycW-Nigs3D6vgQkq1nrKarhrXGDFVv21T98_MzD3Z1fttstbPuL4awy3x3CJxUdtt7dW1Gtg) button:</span>
-
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 23.png">
-</p>
-
-<span class="colour" style="color:rgb(0, 0, 0)">Either choose our AI-generated photos, Photostock, Memes, Celebrities or upload your images:</span>
-
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 24.png">
-</p>
-
-**Shortcut Keys**
-
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 25.png">
-</p>
-
-
-## Common Questions
-
-**Case#1.What is meant by 100 assets?**
-
-<span class="colour" style="color:rgb(0, 0, 0)">Users can download up to 100 assets per month (means that if your collage has 5 photos and 2 illustrations you will use 7 credits). The unused limits will roll over to the next month. Text and all the uploaded assets aren’t counted. Plus, all the assets that have already been purchased won’t be counted again.</span>
-
-
-**Case#2.Can I edit my images in MegaCreator?**
-
-<span class="colour" style="color:rgb(0, 0, 0)">Yes. You can upload your images using the “Uploads” button.</span>
-
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 26.png">
-</p>
-
-
-**Case#3.Where to find my designs?**
-
-<span class="colour" style="color:rgb(0, 0, 0)">You can find your designs in your dashboard and “My images” section:</span>
-
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 27.png">
-</p>
-
-
-
-**Case#4.How to remove background using MegaCreator?**
-
-<span class="colour" style="color:rgb(0, 0, 0)">Upload an image using the “Uploads” button and use the “person” button to remove background or use </span><span class="colour" style="color:rgb(0, 0, 0)"> Shift + B: </span>
-
-<p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 28.png">
-</p>
-
+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.
 
-**Case#5.Can I share my designs with others?**
+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.
 
-<span class="colour" style="color:rgb(0, 0, 0)">Yes. You can share your designs in social media:</span>
+Let's save our project as a large resolution .png:
 
 <p align="center">
-  <img width="auto" height="auto" src="/public/Untitled 29.png">
+  <img width="900" src="/public/flyer.png">
 </p>