Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed AI Tools for Designers!
You have completed AI Tools for Designers!
Preview
Learn how to create design assets with the text-to-image tool Midjourney. Generate everything from stock photography and backgrounds patterns to icons and web design inspiration.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Our first tool in this
showcase is Midjourney.
0:00
Midjourney stands out as
a revolutionary text-to-image AI tool.
0:02
It allows users to craft images just
from natural language descriptions.
0:06
The magic behind this is
a large language model.
0:10
Trained extensively on a vast data set of
images and their textual counterparts.
0:13
However, there are two things
to know about Midjourney.
0:18
The first is that Midjourney can
only be accessed within Discord
0:20
by interacting with
the Midjourney discord bot.
0:23
Yes, that means the service does not have
a dedicated web app or graphical user
0:26
interface at this time, although
one is currently under development.
0:30
The second point to know is that
Midjourney no longer offers free trials at
0:34
the time of this recording, and a paid
plan is required to generate images.
0:38
There are several tiers to choose
from depending on your usage needs.
0:42
Each paid plan grants the user
general commercial rights,
0:46
allowing you to use your generative
works in your commercial projects.
0:49
So, who can benefit from Midjourney?
0:53
Honestly, anyone with a vision, regardless
of whether you're an accomplished artist
0:55
or someone without a drop of artistic
flare, Midjourney, has you covered.
1:00
Its intuitive nature makes
it a favorite among artists,
1:04
designers, and
all sorts of creative professionals.
1:07
Whether you're looking to prototype
ideas swiftly or conjure up new content,
1:10
Midjourney is your go-to source for
inspiration.
1:15
However, a word of caution,
Midjourney is still a tool in the works.
1:18
This means that the images it weaves
might not always hit the mark in terms
1:22
of accuracy or realism.
1:25
I mean, I think we've all seen
AI struggle with hands, right?
1:27
But seriously, Midjourney is even making
improvements in that area as well.
1:31
Now some key takeaways about Midjourney.
1:35
Its capabilities are vast,
1:37
producing everything from lifelike
representations to abstract masterpieces.
1:39
It's a tool in continuous evolution, so
join its Discord community to always be in
1:44
the loop about its strengths and
limitations.
1:47
While it's a fantastic aid, Midjourney
doesn't overshadow human creativity.
1:50
It's a springboard for ideas,
not the sole creator of your masterpieces.
1:55
All right,
let's begin by hopping into discord.
2:00
Here's a small Pro tip before we begin.
2:02
Users normally create a private DM with
the Midjourney bot to keep track of their
2:04
generations, as creating them in
the Midjourney server can be a hassle for
2:09
asset management due to the sheer
number of users creating artwork.
2:13
I would instead suggest
making your own server.
2:17
It's free and only takes a second.
2:20
There you can label your channels and
categories for
2:22
the different types of
artwork you'll be generating.
2:24
This is a much easier way to
keep your generations organized.
2:32
But let's get started.
2:39
For our first prompt,
I'm gonna try to create an image.
2:41
I'm gonna use the prompt,
2:43
photograph of a baker pulling
fresh cupcakes out of the oven.
2:45
The two dashes after the main prompt are
a suffix added to adjust the settings for
2:48
your prompt.
2:52
In this example I use
the Command A R which stands for
2:54
aspect ratio this allows us to change
the default aspect ratio of 1 1 to
2:57
something we're more used to in our
media like 69 for landscape or 916 for
3:02
portrait And just like that,
3:07
we have four different images of a baker
pulling fresh cupcakes out of the oven.
3:14
Pretty impressive, but
let's roll the dice again and
3:19
regenerate another set of four images
3:22
While that's generating, let's generate
another version in a 9 by 16 ratio.
3:37
Oops, looks like I forgot to use the
forward slash imagined command to insert
3:42
my prompt, let's try that again.
3:46
And it looks like the new set
of four I rerolled is finished,
3:50
I liked that the shots have
a bit more variety this time
3:53
Here are the four images of bakers
in a 9 by 16 portrait aspect ratio.
4:10
These are looking pretty awesome as well.
4:15
Midjourney has come a long
way since version 1,
4:17
as it's now on version 5.2 at
the time of this recording.
4:20
The quality is nothing short
of amazing in my opinion,
4:23
this is a great alternative to
stock imagery for your design work.
4:26
Next we'll try to generate some
potential background images,
4:30
something we could use in
a piece of graphic design or
4:33
even as a background of a section
on a website we're building.
4:36
Let us use the prompt, create
a textured gradient background pattern,
4:40
subtle shades and hues of magenta.
4:44
And again we will set our images
to have a 16 by 9 aspect ratio,
4:47
Those look great, but
what if we tried another style?
4:55
This time we'll ask for
a smooth, diffused,
4:58
gradient instead of a textured one.
5:01
Let's see what Midjourney produces.
5:03
Yeah, now that looks smooth.
5:23
These would work perfect in any design
project, and all you need is the idea.
5:25
But back to our bakers.
5:30
Let's say we're making a site for
a bakery.
5:31
Surely we'll need some icons.
5:34
Let's try creating a cupcake icon.
5:36
For the prompt I'll use, Cupcake icon,
flat, simple, minimalistic,
5:38
black icon white background, and use
the default one-by-one aspect ratio for
5:42
this set of images.
5:47
Wow, those came out
better than I expected.
5:54
I really liked the first and third.
5:56
I'll upscale those to get bigger versions.
5:58
Now, of course,
these aren't vector images, but
6:01
they can serve as inspiration for your
vector designs, or you can try tracing and
6:04
converting them into a VG file in
a software like Adobe Illustrator.
6:09
Moving on, let's see if Midjourney can
help us create some web design layouts for
6:17
our friends at the bakery.
6:21
These layouts can serve
as design inspiration or
6:24
even design direction by taking them
into a program like figma or Adobe XD,
6:26
where we can begin to recreate
the designs from scratch.
6:31
This is a surefire way to ensure you're
not getting stalled out by a blank page.
6:35
For this set of images,
I use the basic prompt, website layout for
6:39
a bakery website.
6:43
And I made the aspect ratio 9 by 16 or
portrait mode so
6:44
the images would be longer
like traditional websites.
6:48
And Midjourney is up to the task.
7:03
It has produced four beautiful layouts.
7:06
Now, of course,
there are some imperfections,
7:08
most notably the illegible text.
7:11
However, if we keep in mind we're
using this as design inspiration and
7:13
not a finished product,
then this is simply out of this world and
7:17
sure to save us tons of time
brainstorming and iterating.
7:20
There is plenty we can take from these
designs whether it be page layout,
7:25
hierarchy, contrast between sections,
7:29
different button styles,
photography choices, and more.
7:31
For instance, the design on the left in
the second set of designs has a really
7:35
interesting hero section.
7:39
It has an elegant heading and CTA button
sandwiched between light design ornaments
7:41
on top and pastries on the bottom through
the use of clever photography placement,
7:45
you can't tell me this
doesn't beat a blank page.
7:49
What would have previously taken us hours
to accomplish has taken us minutes.
7:52
Even when talking strictly design
inspiration Midjourney makes an excellent
7:56
alternative to interest or Dribble.
8:00
Let's regenerate four more layouts to
see what else Midjourney can conjure up.
8:02
Interesting.
8:16
This time Midjourney went for a lighter
look overall, using more whites and
8:17
cream colors for the backgrounds.
8:21
Again Midjourney has dreamed up some
incredible photography and compositions.
8:23
With all of these options,
I have a lot of material to pull from and
8:27
to consider when crafting the best
layout for our bakery design.
8:31
I really like the navigation section
on our second design on the left.
8:36
That's something I wouldn't have
initially thought of myself.
8:40
And both hero sections of
these designs are fantastic,
8:49
making great use of white space.
8:52
However, on the design to our right, I
would make that badge-like design with our
8:55
heading and subheading info a bit larger.
8:59
While the image is eye-catching,
9:02
we certainly want to provide our users
with the critical information they need,
9:04
as easily as possible for
an optimized experience.
9:08
Next, I'll upscale my favorite
designs from each set of generations,
9:12
starting with design one from
the set of darker sites,
9:16
followed by design three from
the set of lighter sites.
9:19
This will allow us to take
a closer look at each version.
9:23
Let's take a look at our first design.
9:38
Wow, this is nice.
9:40
There's something to be said for the
minimalistic simplicity of the design and
9:42
the confident use of white space.
9:46
Plus it doesn't hurt having such a quality
photo that leaves your mouth watering.
9:48
The next section is a pretty
standard design pattern that
9:52
you can find on most sites,
especially e commerce sites.
9:55
A simple three column layout with
an image, subheading, paragraph, text and
9:58
button for each product.
10:03
The strength in this layout
overall is the photography.
10:05
This design definitely shows
you what you're ordering,
10:08
which would be one of the main
goals of a site like this.
10:13
Our next layout certainly
feels more warm and whimsical.
10:37
There's almost a childlike sense
of imagination and playfulness,
10:41
which makes a valuable point that each
design direction while totally different,
10:44
can still work for
the purpose of a bakery.
10:48
The ultimate factor would be our
stakeholders, their business and
10:51
target audience.
10:54
Which design would make the most sense for
them?
10:55
The next section is a bit
basic in my opinion, and
10:58
isn't something I would draw
from when crafting my design.
11:00
Midjourney kind of missed the mark here.
11:04
I mean, I guess we could have four
images as an image gallery, but
11:06
more contexts would really
help the user out here.
11:09
And the final section has some contrast
issues between the pink used for
11:12
the headings and
the lighter blue used for the background.
11:16
This is why Midjourney can't
replace the knowledge and
11:19
experience of a trained designer.
11:22
It's great for inspiration, but
we must act as the final producer or
11:24
creative director of our works.
11:27
For our last test, we'll create
a few designs for a mobile app UI.
11:30
Here, we'll use another basic prompt
of mobile app UI for a bakery,
11:34
and I'll make the aspect ratio 9 by 16
again to keep the portrait orientation.
11:38
All right, looks like Midjourney is done.
11:48
These look interesting, but
let me open them in the browser so
11:50
we can take a better look.
11:53
Yep, that's better.
11:54
It looks like Midjourney has done another
incredible job of understanding the prompt
11:56
and delivering an optimum output.
11:59
I love the hero section on the design on
our left, but I'm also a fan of the small
12:02
touches in our design to the right, such
as the alerts on specific products and
12:07
the app menu at the bottom of the layout
12:12
It still amazes me how Midjourney
continues to be so accurate.
12:19
I'm really digging the rustic
feel of these bottom designs.
12:23
This is, again, an entirely new tone and
feeling we haven't explored yet,
12:26
but could work perfect for a bakery.
12:30
But let's head back and
try re-rolling some new generations.
12:33
Looks like our new generations are ready.
12:52
Let's take a look in a new browser.
12:54
Wow, both of these designs have
some great things going on.
12:57
With our design to the left, I'm a fan of
the search bar slash menu bar placement,
12:59
the discount icon in the corner and
categories menu under our hero image.
13:04
For our design on the right,
13:09
I'm really into these small design
elements that are subtle and light Yet
13:10
still emphasize some potentially
pertinent information to the user.
13:14
In our second set of images, I can't help
but gravitate towards the unique mass or
13:19
image frames used in
the design on the left.
13:24
This helps break up the mundane feeling
from seeing the same patterns over and
13:27
over, while our design to the right
seems to be going in a more traditional
13:31
direction.
13:35
Which works just as well.
13:36
It kind of gives me Burger King app
vibes for the breakfast menu anyway.
13:37
But this will conclude
our demo in Midjourney.
13:42
Let's move on to our next tool.
13:44
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up