AI03 Build a Website with Midjourney Figma and ChatGPT
AI03 Build a Website with Midjourney Figma and ChatGPT
Transcript
00:00 Let's build out another Mid Journey design in HTML and CSS.
00:04 So we're going to build out this carousel system first off in figmas that transitions
00:08 between all the values and then we'll build it out in HTML.
00:12 So here's the image we generated in Mid Journey.
00:15 We just did UI/UX interface design.
00:18 We put in side by side so we got two of them.
00:21 And then we put Behance Dribbble, beautiful color creative app marketplace.
00:27 Quality was set to 2 and stylize 1000 and we were using version 4 of the model.
00:33 First we're going to open up Figma and bring our image into it for Mid Journey.
00:37 Then we're going to create our frame and because this is a mobile UI we're just going to pick
00:41 one of the iPhone presets.
00:43 Then we're going to trace out some of the UI.
00:45 So if you press O for the ellipse tool and then hold option and shift you can draw out
00:50 these perfect circles from center.
00:53 Then we're just going to duplicate that for each of the circles making sure that they're
00:57 evenly spaced.
00:59 Then we're just going to move them away so that we can pull the gradients using the color
01:03 picker tool from each of the circles.
01:07 Then we're just going to select them all and apply a drop shadow.
01:12 Now that that's good we're going to go and put text in where we have text within our
01:17 interface.
01:18 So we just match up all the colors and positioning and font sizes of the text within the UI.
01:23 We're also going to go through and trace some of these pill-shaped borders and lines.
01:38 Now we can bring that into our frame and it's lining up pretty good.
01:42 Next hit R to draw a rectangle for the header and we're just going to use it to get the
01:46 gradient for that top portion.
01:50 Now that that's in we're going to draw another rect to create the gradient on the left side.
01:54 So you'll see there's a little shadow on top of everything.
01:57 We'll use a linear gradient for that.
02:01 Next we're going to fix up these hero images.
02:03 So we're going to open the whole image up in Photoshop.
02:06 Then we're going to select one of the hero images, copy it, and then create a new document
02:12 and paste it inside.
02:14 Then do the same thing for the other image.
02:18 Now we're going to enlarge it by going to the menu item image, choosing image size,
02:25 and we're going to set it to pixels and increase the size to 1024.
02:31 So we're going to enlarge the image.
02:34 So now we're going to use the Stability Photoshop plugin and we're going to write a prompt describing
02:40 our image.
02:46 Then we set the image width and height to 1024.
02:50 Make sure that include images selected, adjust your number of images, and then click dream.
02:55 Once it's done, click layer to insert it into the document and then you've got your new
02:58 higher res image.
03:01 We can just go ahead and repeat these steps for the other hero image.
03:09 Next we're going to create a mask so it fits in seamlessly with our content.
03:13 So we're going to choose the pen tool and draw a path around where we want clean, hard
03:19 edges.
03:24 We're going to then right click that path and choose create vector mask.
03:31 Next we're going to click the mask button in the layers panel.
03:34 Use the magic wand tool to select content on the perimeter of our image.
03:41 Then we just select the mask and use our brush tool to paint it in black.
03:52 Next we make sure everything is deselected and we select our mask layer using a bigger
03:56 brush and we're just going to paint a gradient around the image.
04:01 This will make it fade seamlessly into the rest of our content.
04:05 Then we can just save it out as a PNG.
04:08 Now we can place our image inside of Figma and position it.
04:13 Now we're going to start working on our carousel.
04:15 So we're going to place the other image in there as well and offset it to the right.
04:23 Then we simply duplicate our frame and select those two items and move them back to the
04:29 left so that our new header image is in view.
04:33 Next we're going to select the first header image.
04:36 We're going to go to prototype mode and add an interaction and we're going to say on drag
04:43 navigate to the other frame.
04:47 Make sure it says smart animate.
04:50 Then we're going to do the same thing to the other header frame in reverse.
04:55 So if we preview this as a prototype we should be able to swipe between the two header images.
05:02 So now we just need to go to the second frame and match all the colors of the other view.
05:11 Now that that's done we can preview it and because we used auto animate it will automatically
05:18 transition the colors between the two views.
05:23 So our Figma prototype is pretty much done.
05:24 One other thing we can do is use the pen tool to trace this vector shape within the background.
05:30 So we can export it as SVG and bring it into HTML.
05:36 Doing this is really easy from Figma.
05:37 You just right click on any element and choose copy paste as and you can choose CSS or SVG
05:43 and it'll give you the code to paste directly where you need it.
05:46 So now we're ready to build up the HTML and CSS.
05:49 I'm actually going to use some AI tools to help with the process just to show how easy
05:54 it is.
05:55 I'm going to use chat GPT just to show you how you can use it to generate code quickly
06:00 and easily.
06:02 So first thing we just need some HTML boilerplate.
06:05 So I'm just going to ask chat GPT to create boilerplate for us.
06:11 Then we just copy and paste into our HTML file.
06:14 The neat thing about chat GPT is you can really just ask it for whatever you want like a script
06:18 tag or CSS embed and it'll just give it to you.
06:22 And then we can just go ahead and hook everything up and test it out within the browser.
06:30 So now that we've got our boilerplate, let's ask chat GPT to create a carousel using the
06:34 green socket animation platform.
06:41 Then we just copy in the HTML into our HTML document, CSS into our CSS, and then the JavaScript.
06:49 Then I'm just going to add some quick CSS to style the individual carousel items so
06:53 that we can see the difference.
06:56 I realized I forgot to import the green socket animation platform.
06:59 So let's just ask chat GPT for the script tag to import it.
07:04 So here we have a carousel at the top navigating automatically, but we want it to be interactive.
07:11 So let's ask chat GPT how we would allow the user to swipe between the different carousel
07:16 items.
07:18 Here it didn't actually get what I wanted.
07:19 It was using the swipe direction to determine whether to play the animation forward or backwards.
07:26 But I wanted to clarify that I want to swipe one carousel item at a time.
07:33 These results were much more aligned with what I was hoping for.
07:36 The only difference was that they use touch events and I wanted to use pointer events
07:40 so that worked on both desktop and mobile.
07:46 So then we can just take this code and copy and paste it into our JavaScript file.
07:53 Now you'll see when I swipe left or right, it'll navigate between the two items.
08:00 Next we go into the HTML and replace the carousel items with the hero images.
08:05 I also tweaked some CSS so you can't select the image and adjusted the layout a little
08:11 bit too.
08:15 Next what I want to do is add a class to our body tag based on the page that we're on,
08:22 based on the carousel item that's currently in view.
08:26 This will allow us to update all the styles within the page based on that specific class.
08:31 Then we just paste that inside our JavaScript.
08:33 I did make a couple changes here so that it works with the current page variable that
08:39 we already had in our code.
08:42 Then we just need to make sure we call it every time the page changes and also initially.
08:49 So here you can see it working, the class is changing every time we switch views.
08:56 So the next thing we're going to do is go into Figma and copy the CSS gradient for the
09:02 backgrounds and paste that into the classes for each of the separate pages.
09:08 This way it'll change when we transition between the carousel.
09:13 Then we just repeat this for the other view.
09:20 So next we'll just go through and add these circle items by copying and pasting the CSS
09:25 for those, using Flexbox to space them evenly.
09:31 Then we just copy and paste each gradient from Figma.
09:52 The rest of it's really just going through, creating all the markup and adjusting the
09:56 CSS layout and then copying and pasting variables from Figma and bringing them back into the
10:02 CSS.
10:13 And then after that you should have something that looks like this.
10:32 I know I glossed over a lot, but I just wanted to give you an idea of the process here and
10:36 the sources all up on GitHub, so you can find the link in the description.