235 lines
6.9 KiB
Markdown
235 lines
6.9 KiB
Markdown
|
# 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
|