2.6 KiB
2.6 KiB
Les 5: AI voor Content en Asset Generation
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