Syntax Sunday: Canva's Magic Grab
Dev's and Graphics
As a Developer you often need to create and edit photos for work or personal projects. Visuals often play second fiddle to functionality for most developers, whether it's for a website, app, or software interface. Designing and creating visuals takes a significant amount of time and brain power, which could be allocated to other tasks.
Luckily for us Canva and a variety of other AI photo generation apps exist! I have found that combining DALL-E for image generation and Canva for editing, you can create some amazing visuals, that previously would have taken a lot more time and effort.
Photo Editing with Magic Grab
Canva has recently introduced a suite of AI photo editing tools called Magic Studio. One of these tools is Magic Grab and it allows you to easily separate the subject of your photo from its background with just a single click. This lets you independently use either the background or subject, which is very handy if you want to change either
In the past, you would need to use software like Photoshop and manually outline the area, which is fine, but time-consuming and it doesn't preserve the background. I will show you a few examples, but it works very well and is usually pretty clean when separating the photos.
Using Magic Grab
Unfortunately, you will need Canva Pro (paid version), but they do have a free trial period. You can learn more about Canva's pricing here. Honestly, it is a good deal for all the features, templates, and stock graphics you get access to.
Here is a short example using the BloodLineAlpha Development logo. I created this logo using DALL-E 3, within ChatGPT.
To use the Magic Grab tool:
Upload a photo or create a new design.
Select the photo -> Edit Photo in the upper left.
Click Magic Grab.
Once the Magic Grab is finished processing, you can freely reposition the background and subject separately.
Feel free to utilize Canva's other photo editing features or export it as a PNG for use in other projects.
I will now change the background color and make the logo pop a bit more with some shadow!
As you can see this lets me quickly manipulate the photo. This allows me to change the logo color, orientation, size, etc...
Also, I am now able to save a copy of the logo with a transparent background which is great for websites and apps!
Bonus Example - Blue Moon and Magic Eraser
Here is another simple example that illustrates how useful it can be to separate photos.
If we use Magic Grab on this image of a wolf howling at the moon...
The tree, wolf, and moon have been isolated as objects and separated from the bluish night sky in the background.
You will notice the "blue moon" is present. As the new background photo already includes a moon I do not want it! In comes the Magic Eraser.
The Magic Eraser lets you easily remove specific parts of your photo, automatically matching and filling in the background.
For the image above, I removed the moon by brushing over the photo, as denoted by the purple area.
I then replaced the background image with another night sky stock photo from Canva.
Now that it is gone the image looks great with its new background!
Creating a Logo using DALL-E and Canva
I will also walk you through one of the ways I create and edit logos, headers, and other images using DALL-E 3 and Canva. Again you will need ChatGPT Plus for DALL-E and Canva Pro or the Trial if you want to try yourself.
The nice thing about DALL-E is that it will try and put text into images. While this is great it, does not always spell words correctly, but I will show you how I deal with this.
1.) Create a new GPT-4 chat instance. This is my chat log:
You can go back and forth asking it to change your image until you are happy with it.
If things go too far off the tracks, it's best to start a new chat or edit a previous prompt.
2.) Upload the logo to Canva. Upload the photo -> Edit Design -> Use in Design. This is the best way I found to ensure that the canvas size matches the photo dimensions.
You can view this Canva example using this Shared Link.
My logo is correctly spelt, but the spacing is off, and I'd like to use a different font.
3.) Create a copy and use Magic Grab. I always create a copy so I can quickly reference the original image in case I make a mistake. Magic Grab separates the logo from the white background for easy editing.
As the text is below the image, I could just simply crop the image to remove the text. But I will show you using Magic Eraser in case the text is within the image.
4.) Use the Magic Eraser to remove the logo text. This will give us the freedom to select a new font style and size.
Additionally, we'll have a version of the logo without text, which is useful for website headers, etc...
5.) Add new text using Canva. Find a new font style you like and add it to the image. I chose to use the font "Mokoto" as my new text font.
6.) Group and Save. In Canva, you have the option to group elements together to ensure they move and resize together.
Additionally, you can easily create copies and remove the text, leaving only the logo.
Once your variations are ready, simply save them using the Share button for easy access and sharing.
Blog Header
While creating my logo, I also asked ChatGPT to generate a header image, for a blog post about my new logo. The image it produced looks really impressive!
You can view this Canva example using this Shared Link.
Following the same steps as above, you can isolate sections of the image, replace the background, and remove text.
I updated the above image with a darker background. This is useful when you need an image to better resonate with your website, blog, brand, etc...
Thoughts
Creating and editing images can be a challenging task, but tools such as Canva's Magic Studio can help reduce manual work significantly.
Canva is not the only company doing this, but they do provide one of the easiest applications to use, especially if you do not have the time for more complicated photo editing applications.
While some of these tools work great, I have had variable results with other tools in the Magic Studio Suite. If you are looking for a quick way to generate and edit photo's, you can't go wrong with DALL-E and Canva.
As a developer, writing code empowers you to precisely control the functionality of applications. Canva gives you this same ability when it comes to editing photos!
So even if you lack some artistic ability, it can help fill in that void, allowing you to get back to what really matters... Writing Code!
Even though Canva brings out the artist in you, the real artists are the developers who created Canva!
Next Steps...
Links to the Canva projects and all future examples will be on: https://bloodlinealpha.com/
If you have any questions about using Canva or DALL-E send me a LinkedIn message or email me at: bloodlinealpha@gmail.com.
Syntax Sunday
KH
Last updated
