How to Use AI to Create Stunning Designs - Midjourney Tutorial — Transcript

Full transcript

1. 0:00foreign
2. 0:04[Music]
3. 0:10folks welcome back to our Channel
4. 0:12today's agenda is pretty exciting we are
5. 0:15venturing into the world of meditation
6. 0:17mobile apps and we have mid-journey by
7. 0:19our side for this creative Journey now
8. 0:22what is mid-journey you might ask it's a
9. 0:25fantastic tool that uses artificial
10. 0:27intelligence to help create unique
11. 0:29custom graphics it offers a refreshing
12. 0:31way to break free from the constraints
13. 0:33of stock images allowing us to infuse a
14. 0:36personal touch and aesthetic Beauty into
15. 0:38our design it's essentially an artist in
16. 0:41your pocket ready to generate beautiful
17. 0:42and unique visuals at your command
18. 0:45if you're excited about integrating more
19. 0:47AI tools into your design process we
20. 0:50recommend checking out our chat GPT for
21. 0:52ux UI design ebook that delves deeper
22. 0:55into how AI can be leveraged to enhance
23. 0:57and streamline Your Design workflow you
24. 1:00can find the link in the video
25. 1:01description let's get to work our
26. 1:04starting point today is figma where
27. 1:06we'll create three iPhone 14 frames each
28. 1:10of these frames represents a screen in
29. 1:12our meditation app the splash screen
30. 1:14home screen and meditation screen to
31. 1:16keep things organized we'll rename each
32. 1:19frame appropriately
33. 1:21next up let's gather some inspiration
34. 1:24have a look around Pinterest or Google
35. 1:26to find images or illustrations that
36. 1:28speak to you something along the lines
37. 1:30of peaceful sunsets and soft orange or
38. 1:32purple Hues once you've found something
39. 1:34you love download it we'll use these
40. 1:37images as a reference in the journey
41. 1:40alright now it's time to get started
42. 1:42with mid-journey if you're new to this
43. 1:44platform you'll need to sign up first
44. 1:45it's important to note that majority
45. 1:47currently uses Discord for account
46. 1:49management so you will need to have a
47. 1:51Discord account in case you're not
48. 1:53familiar with the process you can find a
49. 1:55detailed step-by-step article in the
50. 1:57description below which will guide you
51. 1:59on how to sign up for my journey once
52. 2:02you've successfully set up your majority
53. 2:04account it's time to start generating
54. 2:05upload the image you previously chose to
55. 2:08Mid journey by providing the image we're
56. 2:10essentially giving majority an idea of
57. 2:12the style we're after once your image is
58. 2:15uploaded open it right click and choose
59. 2:17the copy image address option paste it
60. 2:20into the chat and now it's time to write
61. 2:22our prompt you can copy the exact prompt
62. 2:24that I use or feel free to adjust it to
63. 2:26suit the results you want by default
64. 2:28mid-journey generates images with an
65. 2:31aspect ratio of one to one so if we want
66. 2:33to change that we need to add an aspect
67. 2:36ratio parameter at the end of The Prompt
68. 2:38to change the aspect ratio of a general
69. 2:40generation to three to two once you're
70. 2:42ready hit enter and watch mid Journey
71. 2:44work its magic it can take a few seconds
72. 2:46or sometimes minutes for Mid journey to
73. 2:48generate four different images based on
74. 2:50the profit if the images aren't quite
75. 2:52what you were hoping for that's all
76. 2:54right you can adjust your prompt for
77. 2:56more specificity and try generating new
78. 2:58images if you like one of the images you
79. 3:01can choose to upscale it upscaling
80. 3:03increases the image size simultaneously
81. 3:06improving the details for a smoother
82. 3:07look after a short wait while majority
83. 3:10generates the upscaled image it's ready
84. 3:12to download let's take our design a step
85. 3:14further for that we use a fantastic tool
86. 3:17from replicate.com called nightmare AI
87. 3:20this tool is a game changer it can
88. 3:22significantly enhance the quality of
89. 3:24your images to use it you might need to
90. 3:27sign in with your GitHub account now
91. 3:29upload the image we've just created
92. 3:31you'll see an option to adjust the scale
93. 3:33rewrite it to two and then hit submit
94. 3:36just hold on for a few seconds while
95. 3:38nightmare AI works on your image as soon
96. 3:41as the processing is done you'll see the
97. 3:43difference right away the image is now
98. 3:45sharper and higher in quality now that
99. 3:48we have our enhanced image it's time to
100. 3:50bring it into our design download the
101. 3:52image and insert it into the home frame
102. 3:54in figma
103. 3:58next let's repeat the process for the
104. 4:00meditation music screen find another
105. 4:03image or illustration that you like and
106. 4:04upload it to my journey remember to copy
107. 4:07the image address so the journey
108. 4:08understands the style we're aiming for
109. 4:10write a clear prompt that captures what
110. 4:12you want and then let mid-journey
111. 4:14generate the images you can continue to
112. 4:17iterate and upscale the images until
113. 4:19you're satisfied with the results once
114. 4:21you've got your desired image download
115. 4:23it and bring it over to nightmare AI for
116. 4:25enhancement
117. 4:28after nightmare AI has worked its magic
118. 4:31in the images downloaded it's time to
119. 4:33head back to figma here we'll tweak the
120. 4:36color of the frames using the Color
121. 4:38Picker tool we'll choose a color
122. 4:39directly from the image this ensures a
123. 4:42seamless transition between the image
124. 4:44and the background
125. 4:46with that done bring the new upscaled
126. 4:48image into the meditation frame in figma
127. 4:50and adjust its size to fit the frame
128. 4:53let's get our final image for the splash
129. 4:56screen for mid-journey as always upload
130. 4:58an image that resonates with your design
131. 5:00Vision to Mid journey and provide a
132. 5:02suitable prompt this time since we're
133. 5:04working on a splash screen that requires
134. 5:06a vertically oriented image use a two to
135. 5:09three aspect ratio parameter in your
136. 5:11prompt continue refining and upscaling
137. 5:14until you achieve a result you're
138. 5:16pleased with once you have the perfect
139. 5:18image don't forget to take it through
140. 5:20the nightmare AI
141. 5:23[Applause]
142. 5:24[Music]
143. 5:31then insert the final image into the
144. 5:34splash screen frame in the figma file
145. 5:36and resize it
146. 5:39now that we have our beautiful custom
147. 5:41graphics in place we can start adding
148. 5:43content to the screen we'll start with a
149. 5:45splash screen for those who might be new
150. 5:48to app design a splash screen is the
151. 5:50first screen you see when you open an
152. 5:52app it's typically used to showcase the
153. 5:54app's logo and branding while the app
154. 5:56loads we'll Begin by creating a name for
155. 5:58our meditation app
156. 6:01once we've got our name let's add a
157. 6:03short tagline beneath it a tad line is a
158. 6:06catchy phrase that represents the brand
159. 6:07message or the key feature of the app
160. 6:14now let's add a logo to our splash
161. 6:16screen you can either create a new one
162. 6:18or download the one we've used in the
163. 6:20provided figma file that you can find in
164. 6:22the video description
165. 6:25our splash screen is all set now let's
166. 6:28move on to designing the home screen
167. 6:29we'll start by copying the text from the
168. 6:32splash screen rewrite this text to serve
169. 6:34as an introduction for the home screen
170. 6:39foreign
171. 6:49next up is the creation of a search bar
172. 6:51that users can utilize to search for
173. 6:53Content within the app we'll need a
174. 6:56magnifying glass icon as it's a
175. 6:58universal symbol for search function we
176. 7:00can easily get a free icon from Google
177. 7:02Icons or hero icons
178. 7:05once we have it let's create an auto
179. 7:07layout frame and apply fill and stroke
180. 7:09to it this will be the basic structure
181. 7:12of our search bar
182. 7:13[Applause]
183. 7:15[Music]
184. 7:20thank you
185. 7:30[Music]
186. 7:33we can make the elements inside the
187. 7:35search bar more subtle so it's clear
188. 7:37that this field is not currently active
189. 7:39and a text is only a placeholder finally
190. 7:42we can add a stroke to the search bar
191. 7:48[Music]
192. 7:50once we're happy with it copy the title
193. 7:52and change it to categories
194. 7:57we're going to use five different icons
195. 7:58to represent the categories you can find
196. 8:01these icons for free on Google Icons or
197. 8:03get them from the figma file below the
198. 8:05video now add an auto layout to the
199. 8:08first icon and set the padding to 10
200. 8:10pixels on all sides we'll also add
201. 8:12background color you can use the Color
202. 8:14Picker to grab a color from the search
203. 8:16bar to give our icon a softer look apply
204. 8:20an 8 pixel Corner radius now duplicate
205. 8:23the entire frame four times
206. 8:26all you have to do now is copy each
207. 8:28different icon right-click the existing
208. 8:30icon inside the frame and choose paste
209. 8:33to replace
210. 8:34[Music]
211. 8:38with all our icons in place select all
212. 8:41of them and slightly adjust their color
213. 8:43we want them to blend nicely with our
214. 8:45design and not be too vibrant
215. 8:49to ensure the icons are evenly spaced
216. 8:51add an auto layout we're going to remove
217. 8:54the auto layout afterwards as we still
218. 8:55need to add names for our categories now
219. 8:58let's add category names grab your text
220. 9:01tool and type the name for the first
221. 9:02category
222. 9:05[Music]
223. 9:07select the text in the icon and create
224. 9:09an auto layout ensuring there's four
225. 9:11pixel spacing between the two elements
226. 9:13we'll also adjust the pass-through of
227. 9:15the category name to 80 to keep the text
228. 9:18from being overly bright
229. 9:20foreign
230. 9:22for each icon creating an auto layout
231. 9:25between the icons and category names
232. 9:27with four pixel spacing after renaming
233. 9:30the categories you should have five
234. 9:32nicely arranged category icons each with
235. 9:34its own name
236. 9:37[Music]
237. 9:39now select all the frames and apply Auto
238. 9:42layout then select the entire Auto
239. 9:45layout and title and create another Auto
240. 9:47layout this time with 12 pixel spacing
241. 9:50now we just have one more section of the
242. 9:53home screen left to tackle
243. 9:54copy the title from before and adjust it
244. 9:57for this section we'll need to tap into
245. 9:59mid Journey's magic again to generate
246. 10:01three images for this part go through
247. 10:03the familiar process find an inspiring
248. 10:06image feed it to my journey create a
249. 10:08prompt and download the resulting image
250. 10:10[Music]
251. 10:19[Music]
252. 10:26don't forget to upskill the image using
253. 10:28nightmare AI for that high quality
254. 10:30finish
255. 10:35[Music]
256. 10:39with your image ready bring it into your
257. 10:41figma file
258. 10:44[Music]
259. 10:53[Applause]
260. 10:54now add a couple of text layers below
261. 10:57the image to provide more information
262. 10:58about a specific mindfulness session
263. 11:10[Music]
264. 11:19following this duplicate the entire
265. 11:22frame and rewrite the texts for each one
266. 11:24go back to my journey to generate two
267. 11:27more images for these frames
268. 11:38thank you
269. 11:41perfect now that this is done we have
270. 11:43one important element left to add a
271. 11:45bottom navigation let's shift all the
272. 11:48screen elements a little upwards to make
273. 11:49room for our bottom navigation
274. 11:53for this we'll need four icons each
275. 11:55representing a different screen of our
276. 11:57app you can Source these icons from
277. 11:59sites such as Google Icons or hero icons
278. 12:02or find them directly in the figma file
279. 12:04below the video once you have your icons
280. 12:07select the second third and fourth icons
281. 12:10and adjust the pass-through property to
282. 12:1260. this signifies that the icon with
283. 12:15the most vibrant color is representing
284. 12:17the current screen that's in use now
285. 12:19it's just a simple matter of duplicating
286. 12:21the bottom navigation and moving it over
287. 12:23to the last screen be sure to adjust the
288. 12:26colors so that the second icon becomes
289. 12:28the active one now let's duplicate this
290. 12:31Frame one more time and carry it over to
291. 12:33the last screen adjust the text to match
292. 12:36a mindfulness session or meditation
293. 12:37music
294. 12:39we're about to add a little extra
295. 12:40interactive Flair to our design an audio
296. 12:43waveform visualization this visual
297. 12:45component will provide users with a
298. 12:47graphical representation of the music's
299. 12:49intensity as well as the progress of the
300. 12:51audio playback to create this let's draw
301. 12:54four lines of varying lengths
302. 13:00[Music]
303. 13:03once you're done group these lines
304. 13:05together in an auto layout this small
305. 13:07cluster of lines will serve as our basic
306. 13:09waveform unit which we can then
307. 13:11duplicate multiple times until we reach
308. 13:13a length that resembles a full audio
309. 13:15track
310. 13:18foreign
311. 13:23[Music]
312. 13:27now let's add some color to our waveform
313. 13:29changing the color of certain lines will
314. 13:32illustrate that the audio track is still
315. 13:34in progress
316. 13:35[Music]
317. 13:38lastly we're going to place the current
318. 13:40playback time at the start of our
319. 13:41waveform and the total length of the
320. 13:43audio track at the end this way users
321. 13:46can easily understand where they are in
322. 13:48their session or music track
323. 13:52[Music]
324. 13:55thank you
325. 13:58great work now let's add some player
326. 14:01controls you can Source these icons from
327. 14:03Google Icons or directly from the figma
328. 14:05file provided in the video description
329. 14:07feel free to adjust the color of the
330. 14:09controls if you wish this part is
331. 14:11completely up to you and your Creative
332. 14:13Vision
333. 14:16lastly we're going to add one final
334. 14:18touch a status bar at the top of our
335. 14:20screens
336. 14:22and our mobile app is done
337. 14:24if you found this tutorial helpful
338. 14:26subscribe to our Channel we'll be
339. 14:28creating more content to help you
340. 14:30leverage technology in your design
341. 14:32process
342. 14:33[Applause]