SkyArtShop/Sky_Art_shop/IMAGE-GUIDE.md

Sky Art Shop - Image Requirements Guide

This document outlines all the images needed for the Sky Art Shop website. Use this as a checklist when gathering or creating images.

📸 Image Specifications

General Guidelines

• Format: JPG for photos, PNG for logos/graphics
• Quality: High resolution (minimum 1200px wide for hero images)
• Optimization: Compress images to reduce file size without losing quality
• Naming: Use descriptive, lowercase names with hyphens (e.g., washi-tape-collection.jpg)

🏠 Home Page Images

Hero Section

• hero-craft.jpg (1920x1080px recommended)
  • Main hero image showing scrapbooking/crafting
  • Should be bright, inviting, and showcase products

Inspiration Section

• craft-supplies.jpg (800x600px)
  • Display of craft supplies, journals, stickers, etc.

Collection Grid (4 images)

• washi-tape.jpg (400x400px)
• stickers.jpg (400x400px)
• journals.jpg (400x400px)
• cardmaking.jpg (400x400px)

Top Sellers (4 product images)

• products/product-1.jpg (500x500px)
• products/product-2.jpg (500x500px)
• products/product-3.jpg (500x500px)
• products/product-4.jpg (500x500px)

🎨 Portfolio Page Images

Category Thumbnails (4 images)

• portfolio/displays.jpg (600x800px)
  • Show display boards or craft fair setups
• portfolio/personal-crafts.jpg (600x800px)
  • Personal craft projects, decorated journals
• portfolio/card-making.jpg (600x800px)
  • Handmade cards collection
• portfolio/scrapbook-albums.jpg (600x800px)
  • Scrapbook album pages

Category Projects

Displays (4 images)

• portfolio/displays/project-1.jpg (800x600px)
• portfolio/displays/project-2.jpg (800x600px)
• portfolio/displays/project-3.jpg (800x600px)
• portfolio/displays/project-4.jpg (800x600px)

Personal Craft Projects (6 images)

• portfolio/personal-crafts/project-1.jpg (800x600px)
• portfolio/personal-crafts/project-2.jpg (800x600px)
• portfolio/personal-crafts/project-3.jpg (800x600px)
• portfolio/personal-crafts/project-4.jpg (800x600px)
• portfolio/personal-crafts/project-5.jpg (800x600px)
• portfolio/personal-crafts/project-6.jpg (800x600px)

Card Making (6 images)

• portfolio/card-making/project-1.jpg (800x600px)
• portfolio/card-making/project-2.jpg (800x600px)
• portfolio/card-making/project-3.jpg (800x600px)
• portfolio/card-making/project-4.jpg (800x600px)
• portfolio/card-making/project-5.jpg (800x600px)
• portfolio/card-making/project-6.jpg (800x600px)

Scrapbook Albums (6 images)

• portfolio/scrapbook-albums/project-1.jpg (800x600px)
• portfolio/scrapbook-albums/project-2.jpg (800x600px)
• portfolio/scrapbook-albums/project-3.jpg (800x600px)
• portfolio/scrapbook-albums/project-4.jpg (800x600px)
• portfolio/scrapbook-albums/project-5.jpg (800x600px)
• portfolio/scrapbook-albums/project-6.jpg (800x600px)

🛍️ Shop Page Images (12 product images)

Washi Tape

• products/washi-tape-1.jpg (500x500px) - Floral set
• products/washi-tape-2.jpg (500x500px) - Geometric patterns
• products/washi-tape-3.jpg (500x500px) - Pastel collection

Stickers

• products/sticker-pack-1.jpg (500x500px) - Vintage stickers
• products/sticker-pack-2.jpg (500x500px) - Nature themed
• products/sticker-pack-3.jpg (500x500px) - Kawaii bundle

Journals

• products/journal-1.jpg (500x500px) - Dotted journal
• products/journal-2.jpg (500x500px) - Travel journal
• products/journal-3.jpg (500x500px) - Gratitude journal

Other Products

• products/card-kit-1.jpg (500x500px) - Card making kit
• products/card-paper-1.jpg (500x500px) - Card stock
• products/scrapbook-kit-1.jpg (500x500px) - Scrapbook album kit

ℹ️ About Page Images (2 images)

• about-1.jpg (600x400px) - Crafting supplies or workspace
• about-2.jpg (600x400px) - Creative workspace or products

📝 Blog Page Images (6 images)

• blog/blog-1.jpg (800x600px) - Washi tape ideas
• blog/blog-2.jpg (800x600px) - Journal setup
• blog/blog-3.jpg (800x600px) - Card making
• blog/blog-4.jpg (800x600px) - Mental health/crafting
• blog/blog-5.jpg (800x600px) - Scrapbooking techniques
• blog/blog-6.jpg (800x600px) - Collage art

🎯 Tips for Creating/Selecting Images

Photography Tips

1. Lighting: Use natural light when possible, avoid harsh shadows
2. Composition: Keep main subject centered or follow rule of thirds
3. Background: Use clean, uncluttered backgrounds
4. Colors: Vibrant but not oversaturated colors work best
5. Focus: Ensure images are sharp and in focus

Stock Photo Resources (Free)

• Unsplash.com
• Pexels.com
• Pixabay.com
• Freepik.com (some free options)

Search Terms for Stock Photos

• "scrapbooking supplies"
• "washi tape collection"
• "bullet journal"
• "craft supplies flat lay"
• "handmade cards"
• "stationery collection"
• "journaling desk"
• "creative workspace"

Image Optimization Tools

• TinyPNG.com - Compress JPG/PNG files
• Squoosh.app - Google's image compression tool
• ImageOptim - Mac app for optimization
• GIMP - Free image editing software

📦 Placeholder Images

Until you have your own images, you can use placeholder services:

• Lorem Picsum: https://picsum.photos/800/600
• Unsplash Source: https://source.unsplash.com/800x600/?crafts
• Placeholder.com: https://via.placeholder.com/800x600

Example usage in HTML:

<img src="https://picsum.photos/800/600" alt="Placeholder">

✅ Image Checklist

Use this checklist to track your progress:

Home Page

• Hero image
• Craft supplies image
• 4 Collection grid images
• 4 Product images

Portfolio

• 4 Category thumbnails
• 4 Displays projects
• 6 Personal craft projects
• 6 Card making projects
• 6 Scrapbook album projects

Shop

• 12 Product images

About

• 2 About page images

Blog

• 6 Blog post images

Total: 59 images needed

🔄 Updating Images

To update images in the website:

1. Place your images in the appropriate folder under assets/images/
2. Ensure the filename matches what's referenced in the HTML
3. Optimize the image for web (compress, resize if needed)
4. Clear browser cache to see changes

📝 Adding Alt Text

For accessibility, add descriptive alt text to all images:

<img src="path/to/image.jpg" alt="Colorful washi tape collection on wooden desk">

Good alt text:

• Describes the image content
• Is concise (under 125 characters)
• Includes relevant keywords naturally
• Helps visually impaired users understand the content