Hey there, my name is Antonio and in this course, we are going to build a graphic design software as a service tool from the ground up. You will learn how to create a fully functional editor that includes essential tools like shapes, text and drawing, but is also equipped with a template system, an exporting feature, autosave capabilities, as well as integrated AI functionalities. Let's explore each key feature together step by step. In this segment we focus on the text tool. First I open the text sidebar and I choose the heading option.
I change the default text to something new and then I use the align tool to center it. After that I apply styles such as bold, italic, strikethrough and underline. I then unselect all styles to clear them. Next, I switch the font to Times New Roman and Arial Black to explore different typography options. For a creative touch, I use copy and paste functionality along with a color change to create a 3D text effect.
Finally, I select both text elements to control them together. Let's dive into the shapes tool. First, I open the shapes tool sidebar and I select the circle option. I modify its look by setting the stroke to dashed and I increase its width. Then I change the fill color and adjust the stroke color to enhance its visibility.
After adjusting the colors I resize and reposition the circle to suit our layout. Next, I add a rectangle shape above the circle and show how to layer shapes correctly using the send backwards and bring forward functions. I then tweak the opacity of our shapes, demonstrating how this feature can subtly influence design elements. To illustrate a practical application, I use the shape as an opacity overlay over an image, making the text more readable against complex backgrounds. Let's activate the draw tool and increase the brush width for better visibility.
I will then draw a random line to show you how smoothly the tool handles. After that let's switch the color to blue to highlight our new line. Let me point out that anything drawn outside the canvas will not be visible, ensuring our design stays clean. Finally, I demonstrate how easy it is to adjust the lines position, width and color even after it's been drawn. Let's continue by exploring different ways we can add images to our designs.
First, I open the image sidebar and I select one of the pre-loaded images from Unsplash. Next, I'll show you how to enhance these images using the filters options in the toolbar, where we can apply various visual effects by clicking between them. Moving on, I demonstrate creating images with AI. By opening the AI sidebar and entering a text description, it will generate the image right before our eyes. Lastly, I will show you how to upload your own images and for this I'm going to use a special feature in our toolbar Remove background, which employs AI to seamlessly remove the background from the uploaded image, which is perfect for clean integrations into our designs.
Next, let's take a look at how to use templates in our design tool. I open the design sidebar, which displays a variety of templates. I select a flash sale template and a prompt confirms that this will replace the current project. I then modify a text within the template to demonstrate that it uses the same tools and elements we've covered previously. We can also access these templates directly from the homepage, allowing users to open them right in the editor.
Notice how with each change the saving indicator in the navbar confirms that our autosave feature is continuously at work. I can also use the undo feature to revert the text change. To verify that autosave captures every modification, I head to the home page and reopen the most recent project. Finally, I demonstrate exporting by saving our design as a JSON file. I then upload this file to a blank editor, illustrating how our designs can be easily shared and restored, which is essential for collaborative work.
Let's learn how to adjust the settings for our project. Starting on the home page I select a template and take note of its initial size listed below. In the editor I head to the settings sidebar and change the project size to 500 by 500. To confirm this update I check the recent projects area where the new size is now displayed. Back in the project I also change the canvas background color through the same side bar to tailor our design.
To conclude I export the project to demonstrate how these settings impact the final PNG image, showcasing the adjustments we've made. Up until now, we've been using a premium account to demonstrate all the features. But remember, this course is also about creating a software as a service, which includes setting up premium features. For instance, when accessing specific templates or using AI image generation, non-premium users will see an upgrade model. Now let's simulate what happens when a user decides to upgrade.
Upon upgrading a success dialog appears confirming the activation and we can test out that all previously restricted features such as some templates and AI image generation are now available. Additionally, once upgraded, users can visit their billing page to manage their subscription details. And now, without further ado, let's get started. It. 1