AI03: Build a Website with Midjourney, Figma & ChatGPT

let's build out another mid-journey design in HTML and CSS so we're going to build out this Carousel system first off in figma so the transitions between all the values and then we'll build it out in HTML so here's the image we generated in mid-journey we just did UI ux interface design we put in side by side so we got two of them and then we put B hands dribble beautiful color creative app Marketplace quality was set to 2 and stylized 1000 and we were using version 4 of the model first we're going to open up figma and bring our image into it from mid-journey then we're going to create our frame and because this is a mobile UI we're just going to pick one of the iPhone presets then we're going to trace out some of the UI so if you press o for the ellipse tool and then hold option and shift you can draw out these perfect circles from Center then we're just going to duplicate that for each of the circles making sure that they're evenly spaced then we're just going to move them away so that we can pull the gradients using the Color Picker tool from each of the circles then we're just going to select them all and apply a drop shadow now that that's good we're going to go and put text in where we have text within our interface so we just match up all the colors and positioning and font sizes of the text within the UI we're also going to go through and Trace some of these pill shapes borders and lines now we can bring that into our frame and it's lining up pretty good next hit R to draw a rectangle for the header and we're just going to use it to get the gradient for that top portion now that that's in we're going to draw another rect to create the gradient on the left side so you'll see there's a little Shadow on top of everything we'll use a linear gradient for that next we're going to fix up these hero images so we're going to open the whole image up in Photoshop then we're going to select one of the hero images copy it and then create a new document and paste it inside then do the same thing for the other image now we're going to enlarge it by going to the menu item image choosing image size and we're going to set it to pixels and increase the size to 1024 so we're going to enlarge the image so now we're going to use the stability Photoshop plugin and we're going to write a prompt describing our image [Music] then we set the image width and height to 1024. make sure that include images selected adjust your number of images and then click dream once it's done click layer to insert it into the document and then you've got your new higher res image we can just go ahead and repeat these steps for the other hero image next we're going to create a mask so it fits in seamlessly with our content so we're going to choose the pen tool and draw a path around where we want clean hard edges foreign we're going to then right click that path and choose create Vector mask next we're going to click the mask button in the layers panel use the magic wand tool to select content on the perimeter of our image then we just select the mask and use our brush tool to paint it in Black next we make sure everything is deselected and we select our mask layer using a bigger brush and we're just going to paint a gradient around the image this will make it fade seamlessly into the rest of our content then we can just save it out as a PNG now we can place our image inside of figma and position it now we're going to start working on our Carousel so we're going to place the other image in there as well and offset it to the right then we simply duplicate our frame and select those two items and move them back to the left so that our new header image is in view next we're going to select the first header image we're going to go to prototype mode and add an interaction and we're going to say on drag navigate to the other frame make sure it's a smart animate then we're going to do the same thing to the other header frame in reverse so if we preview this as a prototype we should be able to swipe between the two header images so now we just need to go to the second frame and match all the colors of the other View now that that's done we can preview it and because we used auto animate it will automatically transition the colors between the two views so our figma prototype is pretty much done one other thing we can do is use the pen tool to trace this Vector shape within the background so we can export it as SVG and bring it into HTML doing this is really easy from figma you just right click on any element and choose copy paste as and you can choose CSS or SVG and it'll give you the code to paste directly where you need it so now we're ready to build up the HTML and CSS I'm actually going to use some AI tools to help with the process just to show how easy it is so I'm going to use chat GPT just to show you how you can use it to generate code quickly and easily so first thing we just need some HTML boilerplate so I'm just going to ask chatgpt to create boilerplate for us then we just copy and paste into our HTML file the neat thing about chat GPT is you can really just ask it for whatever you want like a script tag for CSS embed and it'll just give it to you and then we can just go ahead and hook everything up and test it out within the browser so now that we've got our boilerplate let's ask chat GPT to create a carousel using the green sock animation platform then we just copy in the HTML into our HTML document CSS and do our CSS and then the JavaScript then I'm just going to add some quick CSS to style the individual Carousel items so that we can see the difference I realized I forgot to import the green socket animation platform so let's just ask chat GPT for the script tag to import it so here we have a carousel at the top navigating automatically but we want it to be interactive so let's check GPT how we would allow the user to swipe between the different Carousel items here it didn't actually get what I wanted it was using the swipe direction to determine whether to play the animation forward or backwards but I wanted to clarify that I want to swipe one Carousel item at a time these results were much more aligned with what I was hoping for the only difference was that they used touch events and I wanted to use pointer events that worked on both desktop and mobile so then we can just take this code and copy and paste it into our JavaScript file now you'll see when I swipe left or right it'll navigate between the two items next we go into the HTML and replace the carousel items with the hero images I also tweaked some CSS so you can't select the image and adjusted the layout a little bit too next what I want to do is add a class to our body tag based on the page that we're on based on the carousel item that's currently in view this will allow us to update all the Styles within the page based on that specific class let me just paste that inside our JavaScript I did make a couple changes here so that it works with the current page variable that we already had in our code then we just need to make sure we call it every time the page changes and also initially so here you can see it working the class is changing every time we switch fuse so the next thing we're going to do is go into figma and copy the CSS gradient for the backgrounds and paste that into the classes for each of the separate pages this way it'll change when we transition between the carousel then we just repeat this for the other View [Music] so next we'll just go through and add these Circle items by copying pasting the CSS for those using flexbox to space them evenly then we just copy and paste each gradient from figma [Music] foreign the rest of it's really just going through creating all the markup and adjusting the CSS layout and then copying pasting variables from figma and bringing them back into the CSS foreign then after that you should have something that looks like this I know I glossed over a lot but I just wanted to give you an idea of the process here and the source is all up on GitHub so you can find the link in the description

Channel: CJ Gammon

Views: 358,448

Keywords:

Id: _A_Jpr9HkGA

Length: 10min 41sec (641 seconds)

Published: Mon Feb 20 2023