Create an Interactive Parallax Scroll Website with AI Midjourney and Dora Tutorial!

Create an Interactive Parallax Scroll Website with AI Midjourney and Dora Tutorial!

Table of Contents:

1. Introduction
2. Creating the Project Idea
3. Using AI Tools for Design
4. Generating Assets with Chat GPT
5. Photoshop Editing Process
6. Creating the Website with Dora
7. Dora Features and Interface
8. Animating the Project with Dora
9. Adding Content and Effects
10. Finalizing the Project

Introduction

In this tutorial, we will explore how to Create a project using AI tools such as Chat GPT and Dora, as well as design techniques in Photoshop and Figma. The project revolves around the concept of an underwater cyberpunk city and includes the creation of assets, website development with scrolling effects, and animation using Dora. Follow along to learn how to bring your ideas to life!

Creating the Project Idea

To begin, we brainstormed the concept of an underwater cyberpunk city. By using AI tools like Chat GPT and Mid Journey, we developed a vision for the project and generated descriptions, titles, and a storyline. The main character, Andromeda, was brought to life through custom quotes and phrases. This process allowed us to form a clear idea and direction for the project.

Using AI Tools for Design

In order to generate images for the project, we utilized Mid Journey. By uploading a reference image and inputting specific criteria, we were able to generate similar images that fit our desired aesthetic. This tool provided us with a range of options to choose from, allowing us to select the most suitable visuals for our project.

Photoshop Editing Process

Using Photoshop, we began the editing process by creating a top section for the skyscrapers and an underwater city using duplicated images. We also added a sunset background to enhance the overall atmosphere. Color correction and lighting adjustments were made to ensure a Cohesive look between the sky and water. Additionally, elements such as jellyfish and divers were included to add interest and depth to the project.

Creating the Website with Dora

To showcase the project, we utilized Dora, a powerful no code web builder that offers scroll-activated animations. With Dora, we could add 3D objects, videos, and image sequences to our website, all of which would work seamlessly while scrolling. The user-friendly interface allowed us to easily create pages and components, set animation settings, and Interact with the canvas.

Dora Features and Interface

Dora offers a wide range of features, including a layer panel, components tab, and keyframe panel. The layer panel allows for easy organization of pages and components, while the components tab helps create interactive elements. The keyframe panel enables precise control over animations, and the interface provides options for zooming, previewing, and sharing projects.

Animating the Project with Dora

Using Dora, we animated the project by setting keyframes for elements such as the background, title, city, jellyfish, divers, and video. We utilized the scroll-triggered animation feature to create dynamic effects as the user scrolled through the website. With Dora's timeline and keyframe functionality, we were able to easily control and adjust the timing and movement of each element.

Adding Content and Effects

Throughout the project, we added various sections with titles, text, and visuals. We used sci-fi fonts and text effects to create an immersive experience. Parallax scrolling and layer movement were employed to add depth and interactivity. Effects like inner shadow, drop shadow, and blur were applied to enhance the visual appeal and create a cohesive design.

Finalizing the Project

After fine-tuning the project in Dora, we exported the images and replaced the previous layers in Figma. We made final adjustments to ensure the layout, positioning, and opacity of the elements were accurate. This step was crucial in preparing the project for publication, sharing, and further refinement.

Conclusion

In conclusion, this tutorial showcased the process of creating a project using AI tools, design software, and web building platforms. The combination of Chat GPT, Mid Journey, Photoshop, Figma, and Dora allowed us to bring our idea of an underwater cyberpunk city to life. By following these steps and exploring the possibilities these tools offer, You too can create stunning and engaging projects. Let your imagination run wild and start creating today!