Tutorial: צור פוסט מוטיבציה

למד ליצור ציטוט מעורר השראה עבור סיפורי Instagram באמצעות אנימציה Letter Collage.

זמן: ** 10 דקות דיפרטי: התחלנר

מה אתה יוצר

ציטוט מרתק מוטיבציה עם שלושה ביטויים, כל אחד באמצעות סגנונות קולגות שונים של מכתב וגילוי אנימציה.

Zq0ZAnimatedמוטיבציה לצטט עם אפקטים של התנגשות אותיות

תכונות תלמד

• ** סגנונות Letter Collage - Neon אריחים, חתכים מגזין, נייר חיתוך אפקטים
• *האנימציה המוגזמת - מכתבים מופיעים אחד על ידי אחד
• גנרטורים אחוריים - רקע מעורפל
• Keyframe Animations - שינויי צבע ואפקטים מעוררים

שלב ראשון - Set Up Canvas

1. Open PinePaper Editor
2. לחץ על גודל canvas ירידה ב Footer
3. • Instagram Story (1080×1920)

Zq0ZSelect Instagram Story Size

שלב 2: הוספת רקע אנימציה

1. לחץ על הכרטיסייה Scenes בפאנל הנכון
2. המונחים: Generator
3. בחר Sunburst
4. להבין את הצבעים:
   • צבע 1: #FF6B6B (קורל אדום)
   • צבע 2: #4ECDC4 (teal)
   • צבע 3: #FFE66D (yellow)
5. המונחים: 16
6. המונחים: 0.5
7. לחץ >Generate**

Zq0ZAnimated sunburst רקע עם צבעים תוססים

שלב 3: יצירת “DREAM Big”

1. לחץ על כפתור ה-Letter Collage** בסרגל הכלים (או הקש L)
2. תגית: DREAM Big
3. להבין את הסגנון:
   • סגנון: Tile
   • תגית: Neon
   • גודל פונט: *72
   • רדינוס: 8
   • הצל
4. מיקום במרכז (x: 540, y: 750)

ערך קוד:

const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540,
  y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

שלב 4: הוסיפו את האנימציה “DREAM Big”

1. עם ההתנגשות שנבחרה, פתח את לוח הזמנים **
2. לחץ >Add Staggered Animation
3. המונחים:
   • אפקט: Pop In
   • סטייג’י: 0.08s
   • תגית: 0.5s
   • המונחים: Linear (משמאל)
   • תגית: Out

ערך קוד:

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

שלב 5: יצירת מכתב עבודה

1. צור קשר נוסף עם:

   • שם הסרטון: Work HARD**
   • סגנון: Magazine (ransom Note Look)
   • תגית: Magazine
   • גודל פונט: *60
   • מיקום: (540, 920)

2. הוסף אנימציה מדהימה:

   • אפקט: Fade Slide Up
   • Stagger Delay: 0.1s
   • המונחים: Wave (זרימת גילוי)

ערך קוד:

const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540,
  y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

שלב 6: יצירת מכתב “STAY HUMBLE”

1. צור את המכתב השלישי:

   • תגית: **STAY HUMBLE
   • סגנון: Paper Cut (3D אפקט צל)
   • גודל פונט: *68
   • מיקום: (540, 1100)

2. הוסף אנימציה מדהימה עם קפיצה:

   • אפקט: Pop In
   • סטייג’י: 0.06s
   • המונחים: Center (reveals from Midward)
   • תגית: Bounce

ערך קוד:

const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540,
  y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

שלב 7: הוספת קו מאובטח

1. צור מלבן עבור מפיץ דקורטיבי:

   • Width: 500, גובה: 8
   • צבע: לבן (#FFFFFF)
   • מיקום מתחת לביטויים

2. הוסף מפתח אנימציה עבור צבע pulsing:

ערך קוד:

const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.0, properties: { fillColor: '#FFFFFF' } },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

שלב 8: Preview and Play

1. הקש Space לשחק את האנימציה
2. ציר הזמן מראה לולאה של 6 שניות
3. צפו בגילויים המוגזמים:
   • “DREAM Great” פופס במכתב
   • “עבודה קשה” עולה עם אפקט גל
   • “STAY HUMBLE” קופץ מהמרכז החוצה

שלב 9: יצוא

For Instagram Story (Video)

1. לחץ על Export
2. בחר WebM (recommended) או MP4
3. המונחים:
   • תגית: **6 שניות
   • המונחים: 30 fps
   • איכות: High
4. לחץ Export והמתין להורדה

עבור פלטפורמות אחרות

קוד שלם

הנה הקוד המלא כדי לשחזר את האנימציה:

// Setup canvas
app.setCanvasSize('instagram-story');

// Animated sunburst background
app.executeGenerator('drawSunburst', {
  colors: ['#FF6B6B', '#4ECDC4', '#FFE66D'],
  rayCount: 16,
  animate: true,
  animationSpeed: 0.5
});

// "DREAM BIG" - Neon tile style
const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540, y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

// "WORK HARD" - Magazine ransom style
const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540, y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

// "STAY HUMBLE" - Paper cut style
const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540, y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

// Accent line with color animation
const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

// Play the 6-second loop
app.playKeyframeTimeline(6, true);

התחל מהיר: השתמש בתבנית

במקום לבנות מאפס, לטעון את התבנית שנבנתה מראש:

1. פתח Templates Panel (Right Sidebar)
2. קטגוריה: Social Media
3. המונחים:**
4. התבנית עומס עם כל האנימציה מוכן

האותיות הקטנות של Letter Collage Styles

דפוסים של סטיות

טיפים Pro

** טקסט אור על רקע כהה (או להיפך) חיוני לקריאה.

• תזמון כפול - 0.05-0.1s בין אותיות מרגיש טבעי. מהר מדי נראה מכני.

Mix סגנונות - שימוש בסגנונות שונים של Letter Collage לכל ביטוי מוסיף עניין חזותי.

ההדגשה - bounce המקל על “STAY HUMBLE” שואב תשומת לב נוספת.

צעדים הבאים

• Letter Collage Reference – כל הסגנונות והאפשרויות
• (Keyframe Editor)(/features/keyframes) - בקרת תזמון אישית
• (Effects)(/features/effects) - תוספות ונקודות
• Physics Animation - אפקטים מתקדמים