# 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:

```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:

```html
<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