How to Use AI to Create a Website Mockup
HTML-код
- Опубликовано: 31 май 2024
- ► In this video I teach you how to create an AI website mockup using various tools including: Midjourney, ChatGPT and Photoshop/Figma.
► Here is a link to get access to the AI image files and other assets I used for the video: tutorials.emersonvisuals.com/...
00:00 - Introduction
00:22 - Midjourney (Ski image)
03:40 - Photoshop
05:40 - Figma 1/2
09:40 - ChatGPT (Titles)
12:28 - Figma 2/2
16:38 - Animations
18:03 - Conclusion
► Music Credit: LAKEY INSPIRED
Track Name: "Chill Day - LAKEY INSPIRE "
Music By: LAKEY INSPIRED @ / lakeyinspired
Official "LAKEY INSPIRED" RUclips Channel HERE - ruclips.net/channel/UCOmy...
License for commercial use: Creative Commons Attribution 3.0 Unported "Share Alike" (CC BY-SA 3.0) License.
Full License HERE - creativecommons.org/licenses/...
Music promoted by NCM goo.gl/fh3rEJ
► Music by: LAKEY INSPIRED
• SUBSCRIBE to the LAKEY INSPIRED RUclips channel HERE - ruclips.net/channel/UCOmy...
• Follow LAKEY INSPIRED on SoundCloud HERE - / lakeyinspired
• Follow LAKEY INSPIRED on Instagram HERE - / lakeyinspired
• Follow LAKEY INSPIRED on Spotify HERE - open.spotify.com/artist/3zDGj...
• Support LAKEY INSPIRED on Patreon HERE - (Optional) / lakeyinspired
► Download links to music
/ . .
Hey all! A brand new AI related design tutorial just got released - check it out here! ruclips.net/video/jXaPGlBZ5VU/видео.html
Great process, thanks for sharing.
I'm wanting to start a web dev business and trying to streamline all my processes before starting, this is perfect.
Glad to help!!
Wow share more amazing vids!
Thank you for your comment! I'm glad to hear that you're enjoying my videos on design and coding. I'm always working hard to create more high-quality content, so stay tuned for future uploads. In the meantime, feel free to check out my previous videos and let me know if there are any specific topics you'd like me to cover in the future. Thanks for watching!
So many questions, so that's a webpage? as it looks more like just a hero image to so me, what about the rest of the site? And this is just a design so what would you then use to create the actual website. And then how would you recreate the animation in your website builder?
Hi there! I can understand why you have questions about the video on using AI to create a web mock-up. To answer your first question, the video is demonstrating the use of AI to create a design for a single webpage (if you want a complete a full website you just need to repeat this same step until you have enough pages you’re happy with). The mock-up shown in the video is just a sample of what the final webpage could look like.
As for the rest of the site, the AI-powered design tool can be used to create other pages and components of the website as well. However, it's important to note that the AI-generated designs are not the final product. They serve as a starting point that can be refined and customized further by designers and developers.
To actually build the website, you would need to either code it using react or traditional HTML/CSS/Javascript or a website builder that allows you to translate the design into a functional webpage. There are many website builders available, such as WordPress, Squarespace, Wix, and many more. The choice of website builder would depend on the specific needs of the project and the skill level of the developer.
Regarding the animation shown in the video, there are several ways to recreate it in a website builder or even hand-coded. Some website builders offer built-in animation tools, while others may require custom coding or the use of third-party plugins. Again, the choice of method would depend on the specific website builder being used and the desired outcome.
I hope this helps answer your questions! Let me know if you have any more.