Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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