slack-gif-creator
Slack GIF Creator
A toolkit providing utilities and knowledge for creating animated GIFs optimized for Slack.
Slack Requirements
Dimensions:
- Emoji GIFs: 128x128 (recommended)
- Message GIFs: 480x480
Parameters:
- FPS: 10-30 (lower is smaller file size)
- Colors: 48-128 (fewer = smaller file size)
- Duration: Keep under 3 seconds for emoji GIFs
Core Workflow
from PIL import Image, ImageDraw
# 1. Create frames
frames = []
for i in range(12):
frame = Image.new('RGB', (128, 128), (240, 248, 255))
draw = ImageDraw.Draw(frame)
# Draw your animation using PIL primitives
frames.append(frame)
# 2. Save as GIF
frames[0].save(
'output.gif',
save_all=True,
append_images=frames[1:],
duration=100, # ms per frame
loop=0
)
Drawing Graphics
Drawing from Scratch
When drawing graphics from scratch, use PIL ImageDraw primitives:
from PIL import ImageDraw
draw = ImageDraw.Draw(frame)
# Circles/ovals
draw.ellipse([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)
# Stars, triangles, any polygon
points = [(x1, y1), (x2, y2), (x3, y3)]
draw.polygon(points, fill=(r, g, b), outline=(r, g, b), width=3)
# Lines
draw.line([(x1, y1), (x2, y2)], fill=(r, g, b), width=5)
# Rectangles
draw.rectangle([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)
Animation Concepts
Shake/Vibrate
Offset object position with oscillation using math.sin() or math.cos() with frame index.
Pulse/Heartbeat
Scale object size rhythmically using math.sin(t * frequency * 2 * math.pi) for smooth pulse.
Bounce
Object falls and bounces - use easing functions for landing.
Spin/Rotate
Rotate object around center: image.rotate(angle, resample=Image.BICUBIC)
Fade In/Out
Create RGBA image, adjust alpha channel, or use Image.blend(image1, image2, alpha).
Slide
Move object from off-screen to position with easing.
Zoom
Scale and position for zoom effect - zoom in: scale from 0.1 to 2.0, crop center.
Explode/Particle Burst
Create particles radiating outward with random angles and velocities.
Optimization Strategies
- Fewer frames - Lower FPS (10 instead of 20) or shorter duration
- Fewer colors - Use 48 colors instead of 128
- Smaller dimensions - 128x128 instead of 480x480
- Remove duplicates - Skip identical frames
Dependencies
pip install pillow imageio numpy
More from forever-efficient/pitfal-solutions-website
optimize-images
Batch optimize images for web delivery. Converts to WebP, generates multiple sizes, and creates blur placeholders.
39gallery-manage
Organize, validate, and manage photo/video galleries. Create gallery structures, validate image files, and prepare content for upload.
35logs
View recent CloudWatch logs for Lambda functions and API Gateway.
30stripe-setup
Set up Stripe products, prices, and webhooks for Pitfal Solutions photography packages. Creates products for portrait sessions, event coverage, digital downloads, and prints. Use when configuring payment processing.
30deploy
Deploy the Pitfal Solutions website to AWS. Use when user says deploy, push to production, or update live site. Runs pre-checks, builds Next.js, deploys Terraform infrastructure, syncs to S3, and invalidates CloudFront cache.
29db-seed
Seed the DynamoDB database with sample data for development and testing. Populates galleries, inquiries, and admin tables. Use when setting up local dev environment or resetting test data. WARNING - never run in production.
29