127 lines
2.9 KiB
Markdown
127 lines
2.9 KiB
Markdown
# Les 5: AI voor Content en Asset Generation
|
|
|
|
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
|
>
|
|
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
|
> - Les05-Slide-Overzicht.md
|
|
> - Les05-Lesplan.md
|
|
> - Les05-Docenttekst.md
|
|
> - Les05-Bijlage-A-Lesopdracht.md
|
|
> - Les05-Bijlage-B-Huiswerkopdracht.md
|
|
|
|
---
|
|
|
|
## Hoofdstuk
|
|
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
|
|
|
## Beschrijving
|
|
AI-gegenereerde visuals en assets voor professionele webprojecten.
|
|
|
|
---
|
|
|
|
## Te Behandelen
|
|
|
|
### Image Generation Tools Vergelijking
|
|
- DALL-E 3 (via ChatGPT Plus)
|
|
- Leonardo.ai
|
|
- Ideogram
|
|
- Midjourney alternatives
|
|
|
|
### Prompt Engineering voor Images
|
|
- Style descriptors
|
|
- Mood en colors
|
|
- Composition
|
|
- Aspect ratios
|
|
- Negative prompts
|
|
|
|
### Asset Generation Workflow voor Web
|
|
- Hero images
|
|
- Icons
|
|
- Illustrations
|
|
- Backgrounds
|
|
|
|
### Image Optimization voor Web
|
|
- Compression
|
|
- Formats (WebP, AVIF, etc.)
|
|
- Responsive images
|
|
|
|
### Copyright & Licenties
|
|
- Copyright overwegingen bij AI-generated content
|
|
- Wat mag wel/niet
|
|
|
|
### Integratie in Next.js
|
|
- Next.js Image component optimalisatie
|
|
- Best practices
|
|
|
|
---
|
|
|
|
## Tools
|
|
- DALL-E 3 (ChatGPT Plus)
|
|
- Leonardo.ai
|
|
- Ideogram
|
|
- Next.js Image component
|
|
|
|
---
|
|
|
|
## Lesopdracht (2 uur)
|
|
|
|
### Complete Visual Identity Challenge
|
|
|
|
**Kies thema voor fictieve SaaS landing page:**
|
|
- Project management
|
|
- Fitness app
|
|
- Educational platform
|
|
- Of eigen keuze
|
|
|
|
**Genereer complete asset set:**
|
|
|
|
| Asset | Specificaties |
|
|
|-------|---------------|
|
|
| Hero image | 16:9 landscape |
|
|
| Feature icons | 6 stuks, consistent style, SVG-ready |
|
|
| Custom illustraties | 2 stuks voor sections |
|
|
| Background pattern | Seamless texture |
|
|
| Favicon | Multiple sizes |
|
|
|
|
**Vereisten:**
|
|
- Alle assets visueel consistent (coherent color palette, matching style, professional look)
|
|
- Geoptimaliseerd voor web (<200KB per image, correct formats)
|
|
- Geïntegreerd in Next.js landing page met Tailwind CSS
|
|
- Proper Image component usage
|
|
|
|
---
|
|
|
|
## Huiswerk (2 uur)
|
|
|
|
### Portfolio Project Visual Refresh
|
|
|
|
**Opdracht:**
|
|
- Kies een bestaand project uit eerdere lessen (of bouw nieuw landing page project)
|
|
- Vervang ALLE placeholder images met professioneel AI-gegenereerde assets
|
|
- Doel: cohesieve visual identity die eruitziet als professional design work
|
|
|
|
**Case Study Blog Post (400 woorden):**
|
|
|
|
Schrijf over:
|
|
- Prompts die werkten
|
|
- Iteratie proces
|
|
- Challenges encountered
|
|
- AI vs stock photos/Unsplash comparison
|
|
- Time saved estimate
|
|
- Quality assessment
|
|
- Zou je dit in productie gebruiken?
|
|
- Tips voor anderen
|
|
|
|
**Include:** Before/after screenshots
|
|
|
|
---
|
|
|
|
## Leerdoelen
|
|
Na deze les kan de student:
|
|
- Verschillende image generation tools vergelijken
|
|
- Effectieve prompts schrijven voor image generatie
|
|
- Consistente visual assets genereren voor webprojecten
|
|
- Images optimaliseren voor web performance
|
|
- Copyright overwegingen bij AI-generated content begrijpen
|
|
- Assets integreren in Next.js met proper optimization
|