How to use AI Art and ChatGPT to Create a Insane Web Designs

have you seen these beautiful looking websites which were designed by AI because in this video I'm going to show you exactly how you can generate these yourself websites are going to be built with AI art as well as tools like chat GPT in the future in this video I'm going to explain the whole process we're going to start by creating a website design in mid-journey we're going to use that R tool to customize that image and then we're going to plug this into a no coding tool then we're going to jump into chat GPT and we're going to have it write the entire Website Layout for us all the content the hero sections and feature sections and much more this means that we can build an entire website from the ground up without writing a single line of code and this will be pretty damn cool we'll start with mid-journey this is the AI tool that allows you to create the AI art that we're now seeing all over the web to go to this you just go to midjourney.com and join the beta it's easy to get started because all you really have to do is join the Discord when you do this it'll open up the escort Community which you can accept the terms and conditions and start creating your own AI art let's do this now here I've got the mid-journey server I'm going to head over to one of the newcomer rooms here and here is where everyone is creating different types of AI art the first thing we need to do is do a forward slash and type in imagine this will give us a prompt work we can request the AI to generate any type of art we're after here I'm going to type in a beautiful website for shoes then I'm going to pass in dash dash V4 which is version 4 of the mid Journey AI art tool finally I'm going to pass in stylize and stylize is basically how random we want it to be it's between zero to a thousand and I'm just going to set it to about 500 which is average here this will start working in the background it's going to generate a low Fidelity version of the website and the design for this art and this low Fidelity version will be iteratively updated to be higher in resolution and rendered with four four examples these four examples then can be picked from and then we can upscale them as well so let's have a look at what kind of results we get now one thing to notice here is that we do get a bit of a loading percentage bar and this is how long it takes for the actual AI to generate the image usually it takes between one to two minutes but it will essentially refresh and ping you once it's complete so here it is complete and here are the four versions that we got which are not too bad not that great either they're a bit uh I suppose funny looking in a way so this is where we can start being more creative with our prompts so what I mean by that is by giving more context as to what we want to do so here is the prompt that we created what I'm going to do is pass in imagine once more and when I paste this prompt in this time I'm going to give it some more context I'm going to pass in the word UI ux UI ux and I'm also going to type in website this basically means that it's more or less focused on having good UI and good at ux and being more like a website rather than just a creative shoe design it's important to give these context clues to the AI if you want better outputs different types of context clues you can provide it are the kind of art style that you want or for example how you want the design to look and feel whether you wanted to represent a certain brand and much much more these are just simple examples but let's take a look at the kind of results we'll get just from making these small little changes to the design here you can already see that the design of the website looks like it's a little bit more interesting we have a bit of a slider and what looks more like a Nike shoes now we also have what looks like a menu at the top and I really like this design that we have here on the bottom left where'd that go here it is because it does look very much like a website we've got a bit of a hero set action and whatnot so from here we can select version one two three and four to upscale I'm gonna upscale version three here which is u3 and this will give us a higher resolution version of this one particular design that we can start to take to Market or even use to build this again takes a little bit of time it's going to process this and do an upscale in beta and let's run this in the background so that you guys can see what this looks like here's the final result and this is looking pretty damn interesting we've got a nice design here for a shoe we've got a bit of a hero section we also have what looks like a two call to action buttons we've got some options here at the very bottom and as well as a menu at the top and we've got these colors that will essentially are looking like these shoe colors being used as part of the website design so not too shabby but I think we can do a little bit more in terms of customizing the design for this website and I'm going to show you how you can do this I'm going to copy over this prompt once more and for this prompt this time what I'm going to pass in is a couple of extra things so let me just maximize this screen here we're going to type in Imagine then we're going to paste in this prompt but this time I'm gonna pass in the context clues of Nike because Nike make obviously website shoes we also want it to be red blue green and or maybe teal and yellow and I suppose we want I suppose what else running person would be interesting to see how that gets designed uh and I think that should be enough and let's actually improve the styling here to 750 to make it a little bit more well creative and here are the results I don't have a running person but I do have a website that has definitely started using the colors that I recommended mid Journey's AI art system to use these website designs look way more creative than we had previously we still have this slider design here at the bottom sections where you can pick out different shoes but even these shoes look damn cool I can see the Nike logo on these and these are actually ones that I would probably buy if I saw in the Nike store but generally these also are websites because we've got the menus here at the top right we have call to action buttons and hero text so generally speaking of these are pretty interesting designs now I have another option here called version one two three and four what this does is actually allow you to pick more Generations based on a actual image from these designs now from these designs I actually like the thrall three and four I think it is most I think four actually kind of looks good with those teals and reds so I'm going to select a version 4 here and it's going to create four more versions based on that specific version for for us let's take a look at what those are here we've got our results we have more examples of that all of these look very similar I think the only difference here is this a red line which seems to shift and change as well as the hero section and where you would normally have this menu at the top right and sometimes these shoes here are a little bit inverted but generally speaking this is the kind of variations you can expect now let's take a look at another way we can do generations for website art now what you can do is jump into any website and select an image that you like I've actually gone here to dribble and I'm pulling in this image of this food delivery website but I do like the design Aesthetics we have going on here and then we can jump back into Discord and we can do a very similar prompt to what we've been doing in the past but this time what I'm going to do is type in Imagine then I'm going to pass in the URL we have here finally I'm going to type in beautiful website shoes Nike like we did before UI ux website red I suppose teal yellow green and finally we'll do dash dash V4 so what's going to happen here is it's going to have a look at this image that we've defined in terms of the URL it's going to use this as a reference point then it's going to take a look at the prompt we've put in which is the shoe prompt using the colors and it's going to try to design a website that has a similar aesthetic to that image which is really cool let's see the results we get back looks like that's ready let's take a look at this so here you can see that the design aesthetic that we originally had on this page for this website design with the more bubbly and colorful images are now represented very much so in these design Aesthetics we have these four elements here at the bottom and if you have a look at the design originally we had four elements here so you can see how it's pulling in these design Aesthetics to create a design based on that and this is where you can really start using the air tool to your own benefit trying to combine different styles customizing them and creating new and independent and unique ones from there I have to say that I'm really lacking this very first design here at the very top so what I'm thinking of doing is an upscale on it so we're going to upscale V1 here and we're going to wait for that to come back then I'm thinking let's plug this into an actual website and build it out without writing any code whatsoever what I'm going to do as part of this next step is use chat GPT to write out most of the content for me and then I could take this to a client to immediately start selling here's the upscale that happened if we take a closer look we'll see that it has all the main elements for a website including a logo area a menu area a nice hero image as well as a title tagline Button as well as a feature section so what I'm going to do is save this image to my computer I'm going to save it and then customize it a little bit inside of Photoshop but before we do that we're gonna head over to chat GPT here we're going to prepare the outline for the website using some AI tools so what I want to do here is ask chatgpt give me the broad out line for a website for shoes including I suppose hero title tagline call to action button and maybe a section for features and details about the shoe so let's see what Chachi PD comes back with it's pretty quick it's got a hero Title Here a bold eye-catching title now here it's not really telling me what these are this is where we might need to be a bit more specific as to what we wanted to do it's given me like the broad outline of the website and what it needs so please provide content for each one of these that I can copy paste straight into a website so that's a pretty descriptive one uh hero titles step up your style with our comfortable and stylish shoes tagline find the perfect pair for any occasion so it's already got some pretty good ones here call to action should be shot now which makes sense uh features are shoes blah blah blah yep so I think I've got enough here to go by to Simply copy paste this straight into a website so let's start beginning to design this next I've opened this design up in Photoshop I'm going to actually just crop it into the main element over here and I really want to capture this hero image which I want to use as part of Designing it so I'm going to crop out most of the rest and we can design each aspect or each part of this design bit by bit but once we have this we also have a bit of a hero section here and what we can use is the uh I believe it is there's a brush here it's like a healing patch and it basically rubs out anything that you might not want in the design so I'm just going to rub out these words this text over here and this button over here so now we've got more or less of this section here ready to go I can even rub out some of the extra things that I might not like here like some of these looks like bits of text just flying around a little bit of a yellow there and generally we have a nice shoe aesthetic here with a nice background the other thing I can do is I can actually expand this out a little bit more so that we have more room to play with and use the content aware option from Photoshop to fill out the rest of the space and well that doesn't look particularly awesome it is another way to do that I don't think I'll do that in this case maybe I'll just expand it out a little bit and hopefully the AI from Photoshop can do a little bit better so that's good enough and we can now save this to use for generating our website there is another way we could do this we could load up this image here inside of a URL grab this URL that we have and throw this inside of the Discord channel here for mid-journey we can issue another prompt here very similar to what we had before and for this prompt we could pass in the URL with a more specific example of what we wanted to do so in this case I'm going to pass in Imagine I'm going to pass in the URL and I'm going to ask for a wallpaper render 8K and then I'm going to put in version 4 and then stylize 500 and here's what we've come up with these are actually pretty cool and they're in high resolution too as you can tell they're on a white background and they would be much easier to crop and place into a hero section to utilize for our website we would still need to edit out some of these random pieces of text that is happening but it gives you another way of how you can now start editing images without even using Photoshop just using Ai and art in general with that done it's time to build our website I'm gonna head over to editor X it's a no coding platform and I'm going to build this website in five minutes or less I'm going to log in and then I'm gonna head to create a new site here I'll be taken to a dashboard and I'm going to start copy pasting all these elements from chat GPT as well as mid Journey straight in the first thing I want to do is jump back into chat GPD here and copy over our hero text which is just over here and I'm going to select add title and I'm going to just paste that in here and then I'm also going to grab the tagline over here which says find the perfect occasion for shoes or something like that so let's grab a paragraph section in here and paste that in and finally let's grab our call to action which says shop now and create a button for that too so here we've got all the workings of what we would need at least for the content now all we need is the image itself so instead of just having a browse through stock images or anything like that we actually had our image earlier done inside of Photoshop as well as mid Journey so I'm going to just drag and drop a random image in here I'm going to select to change the image and I'm going to upload that image that I had it should be here somewhere on the desktop here it is I'm going to open that up and I should be able to use that as part of this design now once it's uploaded I'm going to say update here it is I'm going to select the expand stretching tool which will expand it out and then what I'm going to do is just move my content into position just here on the right hand side and in just a matter of moments we have a pretty good looking website we can select this section over here and we can expand it out to give it a little bit more room so that we basically have this text happening with a little bit more Breathing Room in general once we create these elements we can start resizing the page and it's automatically responsive we can even shrink down to smaller viewports and it just work now let's take a look at the second part of this design which has this box on the left hand side we have an image on the right hand side and three other boxes here on the bottom I want to see if I can rebuild that same sort of aesthetic inside of editor X so what I'm going to do is I'm going to select to add a new section and I'm going to just do a blank section in here I think I'm gonna do a bit of a container and this container here what I'm thinking let's actually uh drag it in over here and if we take a closer look at the design here we've got a bit of a gray colored box I also want to save this image and use the colors inside of the design here so I'm actually just going to do that right now let me actually change image upload this one that I've just downloaded right in here and then I can probably even just select those hexadecimal values to use for the design aesthetic and this can be useful whenever you're creating any type of design so pull the actual colors out of the images because sometimes there are the nicest kind of colors so here I'm going to select this box I'm going to the inspector I'm going to the design and I'm going to select the background and I'm going to pick a custom color I'm going to select to add a color and what I want to do is I want to add this color well this gray color so I'm just going to open up the console here and I'm going to type in color red just for the time being I'm going to do the Picker here select this gray color I'll close this off for the time being then jump back in here add the hexadecimal color paste this in apply and now we've got that box that we have here in the design then I'm going to snap it into the bottom left of this section here and snap it to the bottom of this section it'll just snap straight into place and we've got that aesthetic already happening here the only other part is to make the background here very similar to the background that we have over here in the image for the hero section so again I'm just going to select that color it's this F2 color I'm going to select my container over here I'm going to the design to the color and I'm also going to add that in so let me just paste this hexadecimal value in and now you can see these two sections almost a look like they're overlapping so what I'm going to do is jump in here and grab one of these images I think I'll grab this one here which I quite like I'm also going to see if I can pull out some of these little circles because I think they make it more interesting in general let's see if I can just select them I can which is cool and then I'm going to cut that out I think that's our image just there and I'm going to save this as a PNG with no background whatsoever I'm gonna go to add a image and then this time I'm going to upload that shoe image that we just got earlier there it is let's select to use it and here it is I can move this about pretty much anywhere but if we take a look at the design we earlier had which I believe was somewhere here we can see it was on the left and we had some text on the right hand side so I'm going to replicate that I'm gonna put this here on the right hand side and I'm also thinking to maybe do a bit of a column design here I'm going to move this container here into this main column I'm going to move this image here and Center it in the middle of this column and then I'll finally put the text on the right hand side column there is docking that you can do so that it is mobile responsive essentially where you can dock it from all the Angles and then for the text I could probably even just drag and drop something in here on the right hand side since we have chat GPT providing us with good text we can just copy paste these features and details section straight in here let me just double click on this text I think I'm double clicking on it I'm not sure what I'm doing here we'll we'll just click on this text over here paste it in and then I'm just going to expand it out and make it maybe a little bit bigger maybe at 24 pixels so it utilizes the space just in this section so that I think is looking pretty good uh I think it's overlapping a little bit so I'm gonna shrink it down a little bit more let's just move it over here shrink it down and then just make sure that it's nice and centered in terms of its docking position so I'm just going to center it by selecting all the items here or you can do the text box and just Center it here in the middle like that so now if I was to resize it you can you see it's utilizing the full size you'll notice though the image here for the shoe seems to be losing its styling when it gets I suppose a little bit bigger and we can actually fix that to make sure that it keeps its aspect ratio by making sure it's bound to the box over here so now even if I resize it it still stays Bound in that box inside of that container and this folks is more or less how you would start building a website without having to write any code using tools like mid-journey to be able to design really cool websites and then you using tools like chat GPT to get the content for the website and then using editor X to put it all together in just mere moments so I hope you guys enjoyed this video If you learned a lot or if there are other things you still want to learn let me know in the comments below otherwise don't forget to hit like subscribe and I'll see you in the next one thank you

Channel: Codex Community

Views: 696,473

Keywords: ai web design, web design, ai, openai, midjourney, dalle, ai website, ai website design, ai ui, ai user interface, ai uxui, midjourney website, website ai, website design ai, web design ai, web design midjourney, chat gpt, chatgpt, ai art, art ai, midjourney art, artificial intelligence, art, ui, ux, ai website tutorial, tutorial, ai web design tutorial, mid journey, How to use AI Art and ChatGPT to Create a Insane Web Designs

Id: 8I3NTE4cn5s

Length: 22min 20sec (1340 seconds)

Published: Tue Dec 27 2022

Reddit Comments

[u/minameitsi2]

I wonder what's so INSANE about those designs