Designing high quality graphics is easier than ever these days with high quality and easy to use tools like Figma. But in a completely different league are tools like Midjourney and Leonardo that use stable diffusion to generate entirely new images based on images found on the internet. This process, known as Generative AI, is what I’ll be using to create cover images for my website and other projects. I’ll detail the steps of what I do and which tools I use, sharing images from the process and specific use cases.
Use Cases of Generative AI
First, I generate 1:1 images using Midjourney or Leonardo. These can be based off of an image or be completely new.
Then, I import these generated images into Leonardo Canvas to generate or extend a background.
Let's look at some examples.
Portfolio.v3 Home Cover Image
We will look into the process of how I made the cover image for the home page of this site.
I used three tools in this order:
- Lensa
- Midjourney
- Leonardo
1. Lensa
Lensa is a paid AI avatar tool that I first used in December 2022. To use it, you upload 5-10 selfies, pay $8, and hit generate. This app generates 200 images with 20 variations in 10 categories.
Here are some of the images I put into the app:
![image block](/notion/5eb38ba6-e8ef-4a48-a8b0-7b23c1562f7d/B91B3631-2A63-421A-820A-9757CF0D9B5E.jpeg)
![image block](/notion/7715058b-5746-4dd7-8e7f-2cdb56399a73/06A423BA-7071-4988-898F-6953E38DBE27.jpeg)
![image block](/notion/7e504ea3-13b1-4e4b-ad4e-e89ed7cc7fd6/CCA3AAB0-A34B-45A9-8850-5E1E8D0B6B3D.jpeg)
After waiting 30 minutes, Lensa returned the generated images. Here are some of my favorites:
![image block](/notion/037d2c6c-a0ec-49ea-864d-81b3bb27a618/862FCA6F-251C-4B6F-B764-79F5C84A1F42.jpeg)
![image block](/notion/f2f1a352-25ce-44a9-b89e-28466cf6c516/04DD1E93-95CD-480C-B71D-1DAADB29C578.jpeg)
![image block](/notion/acd1813c-5d96-4341-a105-0ef943491bb6/CE86107D-37BD-4B02-B18E-D6C522E0AF1E.jpeg)
2. Midjourney
![image block](/notion/16e3ae34-abd5-4dc8-add6-ad7c5531698a/20230315_130354.jpg)
Using the 2nd image from Lensa in an image-to-image prompt, I generated this image with the following prompt:
![image block](/notion/1e204ae7-5974-4806-aec9-ac25086c5413/Screenshot_20230327_230540_Chrome.jpg)
3. Leonardo
I imported the image from Midjourney into Leonardo’s Canvas tool to generate a background, using the prompt “Cyberpunk background” and the following settings:
![image block](/notion/b44361ea-9277-4de0-a064-7b8ef2d60caa/Untitled.png)
With 6 iterations, 3 on each side and 4 images per iteration, I was able to make an abstract cyberpunk esque background to display on my portfolio with only 24 images.
Overall, this process started in December 2022 and I finished it in March 2023. Although, the ideas and different tools came over time. If I were to do the process over from scratch, I could probably knock something out like this in under 2 hours.
baldorf Teams Headers
When making announcements in Microsoft Teams, I like to design custom header images. It makes the post more fun and gives an overall higher quality feel to the project.
The tools I usually use are
- Midjourney or Leonardo Images: To generate new characters based on old images.
- Mokker: To put a generated character into a new environment.
- Leonardo Canvas: To extend the background of a Mokker environment.
Some of my early work used Midjourney, however using Midjourney can get quite pricey. Leonardo has a generous free tier, although, it has been getting tighter lately with the huge influx of new users.
Let’s run through an example:
1. Midjourney
The first image is the original image I used in Midjourney’s image to image system. The second image is the output:
![image block](/notion/c81b5003-065c-43fb-9417-8248a7ba6bc7/greendorf.png)
![image block](/notion/51fc1f39-c967-4beb-8878-d4df63cabf08/kalen_cute_in_the_style_of_club_penguin_derpy_cartoon_3d_unreal_a886af5c-0153-40cf-be59-cef6e30b703a.png)
I then used this output to generate this lineup:
![image block](/notion/e3cad6fc-553a-40ba-b18d-1fc77376a909/five_dorfs_lined_up.jpg)
2. Mokker
Uploading this lineup into Mokker, resulted in the green and red characters being placed into different environments.
![image block](/notion/9d40fad9-324a-4741-9a99-6907a9532416/Untitled.png)
![image block](/notion/47e21f69-c9dd-4331-ae60-85a0a77b772b/Untitled.png)
3. Leonardo Canvas
I imported some of these images into Leonardo Canvas to generate full backgrounds for them:
![image block](/notion/52b66ec9-9eff-464d-b3e2-797549f3d78a/week5.jpg)
![image block](/notion/2dd50061-485b-47d2-b4b3-69568ab3845f/desert_3.png)
These images are what I use in Microsoft Teams Announcements. Like this one:
![image block](/notion/b0d66519-0d52-4617-9f7f-64e3379f0e7e/Untitled.png)
Which is much more pleasing to look at than this:
![image block](/notion/44b417d9-14f8-4842-9bd2-72ae31e096f2/Untitled.png)
Portfolio.v1 Article Cover Image
We will look into the process of how I made the cover image for the Portfolio.v1 post on this site.
I used Canvas based on two images: A Lensa avatar and an image of pink smoke from Unsplash.
![image block](/notion/1b4add65-c44c-42c2-9410-83d919ece790/ColorfulSuit.jpg)
![image block](/notion/b5f85352-a97f-4500-a284-eff2bafb36bd/pink_smoke.png)
First, I resized the the pink smoke image to be twice as big as my avatar, then placed it behind my avatar. Using Leonardo’s mask tool, I replaced the blue-green-orange gradient with pink clouds.
![image block](/notion/3801ece8-24b7-4c53-ae3d-866a81dc5f8d/v1-3.png)
From here, I extended the background with the prompt: “pink clouds/smoke on light grey background”:
![image block](/notion/0f3f97e5-b7f0-47ad-b032-cbbc20983918/v1-4.png)
I did this a bit further until I had a wide enough image:
![image block](/notion/7dda3145-1dbf-434a-b63e-9ac99e74d01c/v1-5.png)
Then I cropped the image down to fit perfectly on my portfolio, using trial-and-error:
![image block](/notion/8abfc6b0-b9df-44cd-bcca-dbe505ce761b/v1-5-4.png)
Here’s the finished background with my avatar. Pretty epic right?
![image block](/notion/6afaec46-1c7f-4699-ba4a-6286d79338e8/v1-5-background.png)