Overview
Today we will explore generative AI technologies, including text generators and image generators, and pair them with web platforms (Adobe Express, Google docs/slides, other) to create deliverable, multimedia assets. This page presents two challenge options: Option 1 focuses on fun and building creative confidence (for beginners); Option 2 starts us toward more formative productions.
After the Challenge Section, this page also offers visual guide on how to create an Adobe Express webpage.
Example Creations & Other Resources
LEARNING BY DOING - Option 1 Building Creative Confidence
The TASK
Working in groups (for collaboration/support), each person should:
- use a generative AI platform (e.g., CoPilot) to come up with 3 to 5 ideas for a digital narrative related to a concept from a subject area in which one of you teach;
- use the same generative AI platform to create a micro-story (300 words or so) related to one of the generated ideas;
- use another generative AI platform (e.g., Adobe Firefly) to create 3-4 images for that micro-story; and then
- combine the text and images into a published web platform (Google Doc) or more dynamic scrolling, multimedia webpage using Adobe Express.
NOTE: You can work collaboratively on these projects, but the "groups" are meant as more of a learning community (peer-to-peer support network). Talk to your peers, ask each other questions, share your engagements/joy/frustrations. :)
The RULES
- Story must be between 200-350 words, created by (or at least in collaboration with) generative AI
- Final creations must include a title image and 2-3 "in-text" visuals created by (or at least in collaboration with) an image GenAI platform (Firefly)
- Final output must be completed as a published/accessible online entity: Google Doc/Slides, published Adobe Express webpage, etc. (i.e., live, online, with shareable URL). [Scroll to bottom for a step-by-step guide for creating an Express Webpage.]
The DELIVERABLE
When your project is completed, copy/paste the link and share it, with your thoughts, on our shared Google Slides.
The goal here is to play with the tools, to continue to familiarize yourself with how descriptive language (through prompt interactivity) can impact output. For example, asking Firefly for "a painting of four wizards eating pizza in a college town in an impressionist style" will produce a more targeted set of images than a prompt asking for "a painting of wizards"). Also, with claude.ai and lex.page (among others), results can be iterative: i.e., you can ask it to revise its previous output to enhance details, add dialogue, emphasize certain elements of what was previously produced, etc. Take advantage of its iterative (and playable) nature.
ROCKiT Example Prompt
- [Role] You are a professional writing consultant specializing in helping Youth Fiction writers create story ideas and draft stories.
- [Objective] I need help writing a story for 6th graders that will help them understand key rhetorical concepts and how they operate in the world.
- [Context] I’ll be presenting this story to a group of students in a local Catholic School, using the story as a way to help illustrate key concepts.
- [Knowledge/info] The rhetorical concepts being focused on are ethos, pathos, and logos as introduced by Aristotle.
- [Task] You will provide a list of three possible story ideas for demonstrating the rhetorical concept of pathos. Once you generate the list, you will wait for my response selecting the desired story idea and then complete the task of creating a 250 word micro story about that story idea.
LEARNING BY DOING - Option 2 Assignments and Assessments
The TASK
Working individually (or in groups)
- choose one of the learning outcomes from an existing course you teach and use a generative AI platform (e.g., claude.ai) to come up with ideas for a multimedia assignment related to that outcome,
- select one of those ideas and have the platform help you generate the text of that assignment,
- use the same generative AI platform to create a rubric for assessing that project,
- use a generative AI platform (e.g., Adobe Firefly) to create at least one visual (if not several visuals) to be part of your Express Webpage assignment handout,
- combine the text and images into a digital, published, multimedia guide/handout (i.e., as Adobe Express webpage).
The RULES
- Assignments must include at least one learning objective and should identify the final format expectations for students: e.g., medium, delivery format/platform, duration, genre, number of images, citations, etc.
- Assignment guide must include at least 1 visual created by (or at least in collaboration with) generative AI (Firefly).
- Assignment guide must include sections (e.g., overview, description, expectations, etc.) that are visually identifiable as sections (i.e., visual breaks in the Express webpage).
- Final output must be a published online as an Adobe Express webpage: i.e., with an active/working URL.
The DELIVERABLE
One you have finished the production of your Adobe Express webpage, be sure to click the "Share" button and then select "Publish to Web" so that your Express page is live online. Copy and paste the link, along with your thoughts, to our Teams channel.
Tips and Workflows
When it comes to prompting Generative AI platforms like CoPilot, ChatGPT, claude.ai, and other large language model (LLM) platforms, it helps to designate the information in the prompts in digestible ways for the tool. I tend to use the ROCKiT approach:
- Role: assign it a role so it operates with a particular perspective or approach
- Objective: describe your goal / what you are trying to achieve
- Context: offer relevant context to the goal and would-be task
- Knowledge/info: provide additional information and/or content when relevant - the more information it has to work in relation to, the likelier it is to achieve something of value to you.
- Task: tell it what to generate and offer specific steps/guides as appropriate
My Example Workflow
Role, Objective, Context, Knowledge/info, & Task
- [Role] You are an instructional designer / curriculum consultant who helps teachers create meaningful and effective assignments that intersect with course learning outcomes.
- [Objective] Help me create a multimedia assignment that uses generative AI in iterative ways and allows students to demonstrate knowledge and understanding of course content. The assignment should enable students to meet the specific learning outcome.
- [Context] Students are currently working to understand the rhetorical nature of monuments, exploring them through analysis and socio-cultural frameworks.
- [Knowledge/info] The learning outcomes I want them to engage in this assignment are using developing analysis skills, improving their digital storytelling abilities (by creating a. multimedia Adobe Express Webpage, bringing together image and text), learning to work collaboratively with Generative AI platforms (like Copilot), and to develop critical thinking skills by applying one of the following 3 concepts from our course reading: The Traditional, Figurative Monument which are monuments that typically represent key figures (leaders, heroes) from a group, nation, culture, etc. designed to offer inspiration or stand for particular cherished values; the Avant-Garde Counter-Monument, which works counter to the traditional frame and offers provocation as a monument rather than consolation or inspiration; and the Site as Monument, which situates actual sites (geographies/locations) of events as monuments (or memorials).
- [Task] Offer three possible assignment ideas for this particular assignment. Once you generate the list, wait for my response to select one of the three prompts before producing the full text of the assignment guide. Be sure to include assessment criteria for the assignment in the full text creation.
Generated Ideas & Waiting on Selection
Prompt Selected and CoPilot generating requested content for the Task assigned
Co-Pilot | A Starting Guide
Step 1 | Sign in
- If you have a Microsoft 365 account, go to copilot.microsoft.com and click "Sign in" button (red arrow)
OR...you if you don't have access through your institution, you can try a free version of copilot by going to https://www.microsoft.com/en-us/microsoft-copilot and selecting the "Try free version of Copilot" button.
Step 2 | Generate Some Ideas
Use the prompt bar (green arrow) to get CoPilot to generate 3-5 ideas for a story related to a disciplinary concept: e.g., rhetorical concept of pathos.
Step 3 | From Idea to MicroStory
Select one of the story ideas and ask CoPilot to write a microstory about that story ideas.
- Be specific and be sure to limit the word count.
You might also try using/modifying the Roles, Goals, Context, Other, Task structure from Tips & Workflows sections above.
Bonus Step | Copy & Paste
Step 4 in the Create an Adobe Express webpage sequence will invite you to Copy/Paste your CoPilot created story into your Express webpage. At that point, return to CoPilot and use the copy button (green arrow) to copy the generated text.
GEN AI |~| CHALLENGES |~| GUIDES: CoPilot | Firefly | Adobe Express
Firefly | An Intro
Step 1 | Login
- Go to firefly.adobe.com
- Click "Sign in" (purple arrow)
- Click "Sign in" (green arrow) to sign in with email
- Enter email (blue arrow) and click "Continue" (red arrow)
- Complete your institutional secure login
OR you can create an account by using one of the preset login options (Google, Facebook, Apple) or creating your own account with your personal email.
Step 2 | Generate Some Images
Generate an image by typing a description into the prompt bar (green arrow) and click "Generate" (purple arrow).
Firefly will generate four options. You can use one of these images or manipulate the content description (red box) or the image aesthetics (blue box) and try again:
- Once you made changes (description or aesthetic), click "Generate" button to get a new set of creations.
Step 3 | Select and Download
- Hover the cursor over the image you want to keep
- Click the Options submenu (red arrow)
- Select "Download" (blue arrow)
The "Promoting transparency in AI" notification will pop up on the screen, providing an overview of Adobe's commitment to content credentialing.
- Click the "Continue" button to complete the image download process
Repeat the steps above as needed to generate the varying images for your Challenge.
Build an Express Webpage
Step 1 | Login
For the first step, create a new Adobe CC Express Web page:
- Go to Adobe Express: http://express.adobe.com
- Sign-in using your institutional email login
Full Process Overview
- Go to the Adobe Express website: https://express.adobe.com {*If you are still signed in from Firefly, you may be able to skip right to Step 2 below}
- If you are not signed-in, you will need to login to the Express site.
Step 2 | Create a Webpage
- On the Adobe Express landing page, click the "Webpage" button (green arrow) and then click "Create from scratch" (blue arrow) in next menu.
Step 3 | Build the Opening
Add title, subtitle, and opening image:
- Once the new Web page project launches, click "Add a title" (green arrow) and add a title for your challenge: e.g., Challenge 1 - "The Story of Pathos"
- Click "Add a subtitle" (blue arrow) and add your byline.
- Click Photo icon (purple arrow), select "Upload from device" in photo submenu and add title image you created using Adobe Firefly.
Example
For Accessibility purposes: be sure to click the gear icon in the lower right corner of image (green arrow) an add Alt-text (blue arrow) or designate the image as decorative (red arrow). Click Save button when done.
Step 4 | Add Story Text
Add story text you created in collaboration with Co-Pilot:
- Scroll down on the page, click the "+" in the center of the page (green arrow), and select "Text" button (blue arrow).
- Copy/Paste text from Co-Pilot into Express
Once the text is on the page, you can select it and adjust it's appearance using the text submenu: i.e., designating header levels (purple arrow), call-out quotes, bulleted/numbered lists, bold, italics, links, and alignment.
Step 5 | Add Images
Locate strategic places to add/insert the other Firefly generative images into your story. Try to use at least 2 different photo or layout options.
- Find place in text to add image
- Click the "+" button and select "Photo" from submenu.
- Click "Upload from Device" to add image
- Once on the Express page, choose image display style: inline (default), Fill screen, Window, or Full width.
For each image added, be sure to address Accessibility: i.e., add Alt-text or designate the image as decorative.
Step 6 | Bonus Step
You can complete Step 5 by just adding your additional images and repeating the process. But you migth try playing with other 2 other layout options and features:
- Photo grid if you have several photos you want to feature together
- Split Layout for side-by-side (text and image) options
NOTE: You can also add images by selecting from the available stock image options rather than Firefly created images. To do this, search photos by keywords/phrases and select your choice to insert a photo.
- Click the "+" button (green arrow), select Photo (blue arrow) and type description / keywords for image in "Search Photos" search bar (purple arrow).
Like in the previous steps, be sure to add Alt-Text to any images you add.
Step 7 | Share/Publish
Once completed, you need to publish your Express webpage
- Click "Share" in the upper right corner (purple arrow) and select "Publish to web" (green arrow)
- Click "Create link" (blue arrow)
- Once done processing, click "Copy" (red arrow) to copy the URL for your published Adobe Express webpage and paste/share that link with us via the shared Google Slides
