TUTORIAL: Text-to-Image Generation with DreamStudio and Stable Diffusion XL

Overview and Audience

In this tutorial, you will learn how to use DreamStudio and Stable Diffusion XL to generate stunning images from simple text prompts in moments.

This tutorial is tailored for designers and design teams in digital marketing and advertising, focusing on creating visually compelling ad banners for campaigns.

We will work directly within DreamStudio to accomplish this, requiring only a few basic tools.

Objective

By the end of this tutorial, you will:

  • Use DreamStudio and Stable Diffusion XL to generate images from simple text prompts.

  • Rapidly create diverse visual concepts with the ability to iterate efficiently.

  • Re-contextualize images for optimized ad campaigns.

About the AI Tools

DreamStudio and Stable Diffusion XL enable:

  • Fast image generation from text prompts or reference images.

  • Collaborative workflows for streamlined design creation.

  • Iterative design exploration to produce diverse, high-quality visual concepts.

Prerequisites

Before starting, ensure you:

  1. Sign up for a free DreamStudio account at dreamstudio.ai.

  2. Join Framer to integrate your images into prototypes.

Agenda

Part 1: Getting Started with DreamStudio & Stable Diffusion XL (30 minutes)

  • 7 steps

Part 2: Create and Integrate Images into a Framer Landing Page (20 minutes)

  • 4 steps

Quiz & Questions: 10 minutes

Conclusion & Next Steps

Part 1: Getting Started with DreamStudio & Stable Diffusion XL

Introduction

Stable Diffusion is a flexible, open-source AI image generator that can be customized for various use cases. While it’s possible to set it up locally, this tutorial focuses on DreamStudio, a user-friendly web application by Stability AI.

Step 1: Set Up DreamStudio

  1. Visit dreamstudio.ai.

  2. Close any pop-ups and accept the terms of service.

  3. Click Login (top-right corner) to create an account.

  4. Receive 25 free credits upon signing up, allowing you to generate approximately 13 images with default settings.

  5. Once your credits are used, additional credits are available (e.g., $10 for 1,000 credits).

Step 2: Generating Your First Image

  1. Open DreamStudio's left sidebar, where you'll find all controls.

  2. Select a style from the Style dropdown (e.g., Enhance, Photographic, Digital Art).

  3. Enter your description in the Prompt box (e.g., A photorealistic image of a sunset over a tropical beach).

  4. Click Dream to generate four variations.

  5. Choose your favorite image and use the right sidebar for options like downloading, generating variations, or upscaling the resolution.

Step 3: Refining Your Images

  • Use descriptive prompts to specify details such as subject, environment, lighting, and mood.

  • Experiment with Negative Prompts to exclude elements you don’t want (e.g., "no grass, no hills").

Step 4: Leveraging Image Inputs

  • Upload an image to DreamStudio to guide the AI in generating artwork.

  • Adjust the Image Strength slider to control how much influence the reference image has on the output.

Step 5: Exploring Advanced Options

DreamStudio offers additional customization options:

  • Aspect Ratio: Choose ratios like 1:1, 4:3, or 16:9 for different layouts.

  • Prompt Strength: Adjust how strongly the AI prioritizes your prompt (default: 15).

  • Generation Steps: Higher steps yield better quality but take longer.

  • Seed: Use the same seed to replicate results with consistent prompts and settings.

Part 2: Create and Integrate Images into a Framer Landing Page

Scenario

You are designing for Golden Age Sunglasses, targeting older men for the winter vacation season. Your goal is to create vibrant, engaging visuals and integrate them into a Framer landing page.

Step 1: Generate Images for the Campaign

  1. Use a descriptive prompt like:
    "A photorealistic image of a stylish middle-aged couple wearing sunglasses while sailing on a sunny day. Highlight joy, vivid colors, and a warm vacation vibe."

  2. Download your top image(s) and explore subtle variations.

Step 2: Refine and Iterate

  1. Use DreamStudio to refine images by:

    • Adjusting prompts for alternate perspectives or subject details.

    • Generating subtle variations of an image.

  2. Example prompt:
    "Create a cinematic photograph of a mature tennis player wearing sunglasses, emphasizing dynamic movement and dramatic lighting."

Step 3: Build a Framer Landing Page

  1. Open a new project in Framer and click "Start with AI".

  2. Enter the prompt:
    "A landing page for Golden Age Sunglasses, featuring golden and amber colors, easy navigation, and a subscription section."

  3. Customize the layout by adding your generated images.

Step 4: Final Adjustments

  1. Upload images into the appropriate sections of the landing page.

  2. Adjust colors and text to align with branding guidelines (e.g., golden tones, amber highlights).

  3. Publish the landing page and preview the final design.

Quiz

  1. What is the primary focus of this tutorial?

    • Answer: A. Generating stunning images from simple text prompts

  2. What tools are required for this workshop?

    • Answer: DreamStudio and Framer

  3. What does the Prompt Strength setting control?

    • Answer: How strongly the AI weights your text prompt

Conclusion & Next Steps

Recap

  • You can now generate professional-quality images using DreamStudio and Stable Diffusion XL.

  • Incorporate these images into prototypes and ad campaigns with tools like Framer.

  • Iterate rapidly to explore and refine creative concepts.

Next Steps

  • Explore advanced prompt styles (e.g., “art deco,” “realism”).

  • Try tools like remove.bg for editing image backgrounds.

  • Design a new campaign using the techniques learned today.

References and Resources