AI TOOLS IN ACTION : Midjourney for Website Design & Logo S1E2
Welcome to AI Tools in Action Series 1 Episode 2. Today, we will use Midjourney to help us design our website and create a logo for it. Let’s get started.
AI Tools & Shopify App Links :
Video Tutorial for this video :
Midjourney Prompt for this tutorial video :
Main Banner : very beautiful and ultra realistic ai character, she is a fashion model, wearing cool and futuristic tshirt, white transparent background –no shadow no shading –v 4 –q 5 –upbeta –ar 9:16
Banner 1 : ultra realistic futuristic beautiful woman, modern background design, cool fashion website banner design –v 4 –q 5 –upbeta –ar 1:1
Banner 2 : side view photo of very handsome and ultra realistic ai character, he is a fashion model, wearing cool and futuristic tshirt and hoodie, white transparent background –no shadow no shading –v 4 –q 5 –upbeta –ar 1:1
Banner 3 : very beautiful and ultra realistic ai character, she is a fashion model, wearing cool and futuristic hoodie, white transparent background –no shadow no shading –v 4 –q 5 –upbeta –ar 1:1
Banner 4 (Long Banner) : full body photo view of a beautiful woman, blue eyes, she is wearing a hat, she is wearing tshirt, futuristic background, modern AI fashion –v 4 –q 5 –upbeta –ar 2:1
Part 1: Pagefly
Step 1: Open the Shopify app store and search for the PageFly app. Alternatively, you can use the link in this video’s description to open the app directly. Click on “Add App” to install it on your Shopify website. Follow the instructions to complete the installation.
Step 2: After the installation is complete, the PageFly dashboard will be shown. Click on the “Page” menu and choose “Home Page.” Click on “Create from Template” and choose the desired template. Click on “Select Template” to use the template.
Step 3: Choose the banner image and open the “Styling” tab. On the background image, you will see the image ratio. Let’s generate cool images to change all template images using Midjourney.
Part 2: Midjourney
Step 1: Open Midjourney Discord. If you don’t have a Midjourney account or you don’t know how to use it, watch my tutorial video about it. You can find the link in the description. Create an image to change the main banner image. You can use my prompt and edit it to meet your needs.
Step 2: After you have the best image, save it and crop it using an image editor.
Step 3: Convert your image to a transparent PNG using AI background remover. You can use Remove.bg, Canva, or any tool you want. You can find the background remover link in this video’s description.
Step 4: Go back to the PageFly design page, select the image, open the “Styling” tab, and press the “Select” button under the “Background Image” section. Click “Upload from Computer” and select your transparent image. Click “Select” to apply it to your design. You can change its position and size from the “More Settings” menu.
Step 5: Repeat steps 1 to 4 for all images. I put all my image prompts in this video’s description. Just copy and edit them to match your needs.
Part 3: Edit Template
Step 1: Change the design and text as you want. You can always find the object size, color, etc. from the “Styling” tab.
Step 2: After you have finished, click “Save” and “Publish” to apply your design to your live page.
Part 4: Add Animation
To make your website more interactive, you can add animation to each part of the design.
Step 1: Choose the website part you want to add the animation to. Select the “Styling” tab and go to the “Animation” section.
Step 2: Choose the animation for when the object is shown from the “When Display” option. Choose “On Mouse Over” animation from the “When Mouse Over” option.
Step 3: Repeat steps 1 and 2 for all objects you want to give animation to. Click “Save” and “Publish.”
Part 5: Cleaning Up Shopify Basic Theme
To manually delete unused Shopify Basic objects, follow these steps:
Step 1: Go to the Shopify admin dashboard, click on Online Store, then on Themes and finally on Customize.
Step 2: Delete unused banner, product holder, and footer sections. We will change the footer section on PageFly after this. Click Save and Close.
Step 3: Go back to the PageFly design page, click on the plus button at the bottom to add a new section. Select the free shipping option and choose your desired templates. Change all text to replace the deleted footer menu. You can also hide icons if needed. Change the background and text color to match your design.
Step 4: After finishing editing, link all menus to your pages. Open the General tab, go to Click Action and choose “Go to URL” from the menu. Click the Select URL button and choose your page. Save and publish the changes.
Part 6: Website Logo Design
To design a website logo, follow these steps:
Step 1: Use Midjourney to generate a logo for your website. You can customize the script to match your needs.
Step 2: Go to the Shopify dashboard, select the Themes menu, click on Customize, click on the Theme icon, select Logo, and upload your logo. Click Save and Exit.
Part 7: Globo Menu
To set up the Globo Menu, follow these steps:
Step 1: From the Shopify dashboard, search for Globo Menu, or use the link in this video description.
Step 2: Install this app and select the free plan.
Step 3: Click on the main menu and easily change its name and target link. You can also add or remove submenu items.
Step 4: After finishing setting up your menu, you can change the color, font, and other appearance options from the side menu.
Thank you for watching! In our next episode, we will be demonstrating how to create products using AI-generated images and add them to our store. We hope you’ll tune in for that!
#chatgpt #midjourney #shopify #AI #ai #aitools #artificialintelligence #tech #USA #UK #Germany #France #Canada #Japan #Korea #China