diff --git a/apps/www/_blog/2023-04-07-designing-with-ai-midjourney.mdx b/apps/www/_blog/2023-04-07-designing-with-ai-midjourney.mdx index f818dac65d2..d5074528b11 100644 --- a/apps/www/_blog/2023-04-07-designing-with-ai-midjourney.mdx +++ b/apps/www/_blog/2023-04-07-designing-with-ai-midjourney.mdx @@ -2,8 +2,8 @@ title: 'Designing with AI: Generating unique artwork for every user' description: Using MidJourney to generative artwork and serving ticket images with Edge Functions author: marijana,thor_schaeff -image: launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/header.png -thumb: launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/header.png +image: launch-week-7/designing-with-ai-midjourney/header.png +thumb: launch-week-7/designing-with-ai-midjourney/header.png tags: - launch-week date: '2023-04-07' @@ -26,19 +26,19 @@ You've probably heard of this "AI" tech, and most likely tired of the low-effort In our exploration of different commands and prompts, we found that the `/blend` command was particularly enjoyable and helpful for creating the desired visuals. This command allowed us to quickly upload multiple images and experiment with different combinations and aesthetics to create a cohesive new image. For designers, the `/blend` command is like `/imagine` but visual, making it easy to visually experiment with different elements. Experiments included blurred edges, planetoid shapes, light leaks, shadows, swirls, motion blurs, waves, cubes, reflections, bokeh, and lots and lots of _“make it look really really blurred”_. -![midjoruney experiments](/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/experiments.jpg) +![midjoruney experiments](/images/blog/launch-week-7/designing-with-ai-midjourney/experiments.jpg) After exploring a variety of text prompts, blends, and styles, we decided that most of the visuals we generated were too chaotic and busy for our Launch Week tickets. Images felt cluttered and overwhelming, making it difficult to read overlaid text. We shifted our focus to creating a cleaner, simpler aesthetic. This required a selective approach to the visual components we wanted to include. After what-seemed-like hours (okay, just a few), we were able to generate some interesting artwork that could be useful. We chose purple hues and simpler swirls - minimalist visuals that could serve as backgrounds for our tickets and landing page. -![midjourney variations](/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/midjourney-variations.png) +![midjourney variations](/images/blog/launch-week-7/designing-with-ai-midjourney/midjourney-variations.png) ### Chasing Gold Behind the Scenes When we were happy with the main visual for Launch Week 7, we also needed to create gold visuals for the extra special tickets, and those needed to look the same… but gold. Initially, we thought we could simply use the prompt `/imagine *seed number* make it gold` to generate the desired effect. To our surprise, MidJourney did not cooperate with this idea: -![midjourney failed attempts.jpg](/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/failed-attempts.jpg) +![midjourney failed attempts.jpg](/images/blog/launch-week-7/designing-with-ai-midjourney/failed-attempts.jpg) We tried excluding certain elements, such as faces or circles to refine the output, and at one point every prompt ended with a `-- no faces, -- no circles, -- no gold bars ...`, but the occasional gold bars still appeared. @@ -48,13 +48,13 @@ Eventually, we just added a golden overlay gradient to previously generated imag And voila, we had a baseline for generating variations: -![midjourney blending variations](/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/midjourney-blending-variations.png) +![midjourney blending variations](/images/blog/launch-week-7/designing-with-ai-midjourney/midjourney-blending-variations.png) The final visual that you see everywhere won us over because of its vibrant swirls. While each swirl looks slightly different, a consistent style is still maintained throughout. Fortunately, we didn't require full-width images for each ticket. Upscaled MidJourney images sufficed. Nevertheless, we had to recreate the main visual on the landing page in vectors to use it effectively. You can view it in full glory at [https://supabase.com/launch-week](https://supabase.com/launch-week). -![Screenshot 2023-04-06 at 09.47.47.png](/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/launch-week-7-ticket-home.png) +![Screenshot 2023-04-06 at 09.47.47.png](/images/blog/launch-week-7/designing-with-ai-midjourney/launch-week-7-ticket-home.png) ## Open Graph images @@ -174,27 +174,26 @@ The ticket image itself is just a layering of some background images, your GitHu
- ![Main background image](/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/ticket-backdrop.png) + ![Main background image](/images/blog/launch-week-7/designing-with-ai-midjourney/ticket-backdrop.png)
Main background image
- ![Ticket - outline](/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/ticket-outline.png) + ![Ticket outline](/images/blog/launch-week-7/designing-with-ai-midjourney/ticket-outline.png)
Ticket outline
![Random AI generated background for the ticket - outline](/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/ticket-ai-background.png) + outline](/images/blog/launch-week-7/designing-with-ai-midjourney/ticket-ai-background.png)
Random AI generated background for the ticket outline
![Layer it all together and put some nice text on top and you got yourself a beautiful - ticket!](/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/ticket-details.png) + ticket!](/images/blog/launch-week-7/designing-with-ai-midjourney/ticket-details.png)
Layer it all together and put some nice text on top and you got yourself a beautiful ticket!
@@ -269,7 +268,7 @@ We have some images, so how can we now display them somewhere? @Francesco Sansal We built a [ticket wall](https://supabase.com/launch-week/tickets) that you can scroll endlessly. We approached it with an infinite scroll technique, lazy-loading a few tickets at a time. -![Screenshot 2023-04-07 at 5.33.51 PM.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c83cbf92-79fd-486c-8ee9-3a49be351c00/Screenshot_2023-04-07_at_5.33.51_PM.png) +![launch week 7 ticket wall](/images/blog/launch-week-7/designing-with-ai-midjourney/launch-week-7-ticket-wall.png) If you’re interested in a more detailed step-by-step guide to reproduce this effect, take a look at the [Infinite scroll with NextJs, Supabase and Framer Motion](https://www.supabase.com/blog/infinite-scroll-with-supabase) blog post. diff --git a/apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/Screenshot 2023-04-07 at 5.33.51 PM.png b/apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/Screenshot 2023-04-07 at 5.33.51 PM.png similarity index 100% rename from apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/Screenshot 2023-04-07 at 5.33.51 PM.png rename to apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/Screenshot 2023-04-07 at 5.33.51 PM.png diff --git a/apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/experiments.jpg b/apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/experiments.jpg similarity index 100% rename from apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/experiments.jpg rename to apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/experiments.jpg diff --git a/apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/failed-attempts.jpg b/apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/failed-attempts.jpg similarity index 100% rename from apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/failed-attempts.jpg rename to apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/failed-attempts.jpg diff --git a/apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/header.png b/apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/header.png similarity index 100% rename from apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/header.png rename to apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/header.png diff --git a/apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/launch-week-7-ticket-home.png b/apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/launch-week-7-ticket-home.png similarity index 100% rename from apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/launch-week-7-ticket-home.png rename to apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/launch-week-7-ticket-home.png diff --git a/apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/launch-week-7-ticket-wall.png b/apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/launch-week-7-ticket-wall.png new file mode 100644 index 00000000000..fc708a09c59 Binary files /dev/null and b/apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/launch-week-7-ticket-wall.png differ diff --git a/apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/midjourney-blending-variations.png b/apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/midjourney-blending-variations.png similarity index 100% rename from apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/midjourney-blending-variations.png rename to apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/midjourney-blending-variations.png diff --git a/apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/midjourney-variations.png b/apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/midjourney-variations.png similarity index 100% rename from apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/midjourney-variations.png rename to apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/midjourney-variations.png diff --git a/apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/ticket-ai-background.png b/apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/ticket-ai-background.png similarity index 100% rename from apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/ticket-ai-background.png rename to apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/ticket-ai-background.png diff --git a/apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/ticket-backdrop.png b/apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/ticket-backdrop.png similarity index 100% rename from apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/ticket-backdrop.png rename to apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/ticket-backdrop.png diff --git a/apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/ticket-details.png b/apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/ticket-details.png similarity index 100% rename from apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/ticket-details.png rename to apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/ticket-details.png diff --git a/apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/ticket-outline.png b/apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/ticket-outline.png similarity index 100% rename from apps/www/public/images/blog/launch-week-7/designing-with-ai-designing-unique-artwork-for-every-user/ticket-outline.png rename to apps/www/public/images/blog/launch-week-7/designing-with-ai-midjourney/ticket-outline.png