Skip to content

Commit 456d22a

Browse files
committed
setup initial pages.
1 parent 79833f2 commit 456d22a

13 files changed

Lines changed: 581 additions & 532 deletions

File tree

src/components/Footer.astro

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ const currentYear = new Date().getFullYear();
1010
<span class="text-2xl font-bold text-primary-600">LipsyncAnimation</span>
1111
</div>
1212
<p class="text-gray-600 text-sm mb-4">
13-
Free lip sync tools and guides for animation. Make characters talk—fast.
13+
Free lip sync tools and guides for animation. Make characters talk.
1414
</p>
1515
<p class="text-gray-500 text-xs">
1616
© {currentYear} LipsyncAnimation. All rights reserved.
1717
</p>
1818
</div>
19-
19+
2020
<div>
2121
<h3 class="text-sm font-semibold text-gray-900 tracking-wider uppercase mb-4">
2222
Tools
@@ -44,7 +44,7 @@ const currentYear = new Date().getFullYear();
4444
</li>
4545
</ul>
4646
</div>
47-
47+
4848
<div>
4949
<h3 class="text-sm font-semibold text-gray-900 tracking-wider uppercase mb-4">
5050
Company
@@ -74,4 +74,4 @@ const currentYear = new Date().getFullYear();
7474
</div>
7575
</div>
7676
</div>
77-
</footer>
77+
</footer>

src/components/SiteNav.astro

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ const navItems = [
55
{ href: '/tools', label: 'Tools' },
66
{ href: '/learn', label: 'Guides' },
77
{ href: '/blog', label: 'Blog' },
8-
{ href: '/pricing', label: 'Pricing' },
98
];
109
1110
function isActive(href: string): boolean {

src/content/blog/ultimate-lip-sync-guide.mdx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ image: '/blog/lip-sync-guide.jpg'
88
featured: true
99
---
1010

11-
# The Ultimate Lip Sync Guide for Beginners
1211

1312
Lip sync animation brings characters to life by matching mouth movements to spoken dialogue. Whether you're working on a 2D cartoon, 3D animation, or game cutscene, understanding the fundamentals of lip sync is essential for creating believable characters.
1413

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
---
2+
title: 'Adobe Express Animate Voice: Quick Audio-to-Animation Tool'
3+
description: 'Learn how to use Adobe Express Animate Voice for fast lip sync animation from audio files or voice recordings. One of the quickest ways to bring characters to life.'
4+
publishedAt: '2024-01-15'
5+
category: 'beginner'
6+
estimatedReadTime: '6 minutes'
7+
tags: ['adobe-express', 'animate-voice', 'audio-animation', 'quick-tools']
8+
featured: true
9+
order: 2
10+
---
11+
12+
13+
14+
Want to make a character talk using your voice or an audio file? Adobe Express Animate Voice is a free, web-based tool that does the lip sync for you. You don’t need animation experience. Just follow these steps.
15+
16+
17+
18+
## What You Need
19+
20+
All you need is a web browser, a free Adobe account, and either an audio file or a microphone to record your voice. That’s it.
21+
22+
23+
---
24+
25+
## Step 1: Open the Tool
26+
1. Go to [Adobe Express](https://express.adobe.com).
27+
2. Sign in with your Adobe account.
28+
3. Find and open the "Animate Voice" feature.
29+
4. Click "Create New Project."
30+
31+
32+
33+
## Step 2: Pick a Character
34+
Choose a character for your animation. You can use one of the built-in characters, upload your own design, pick a template from the library, or just use a simple shape to test things out.
35+
36+
37+
38+
## Step 3: Add Your Audio
39+
Now add your audio. You can either upload an audio file (MP3, WAV, or M4A, up to 2 minutes and 25MB for free accounts) or record your voice directly in the browser. If you record, you can do as many takes as you want until you’re satisfied.
40+
41+
42+
## Step 4: Make the Animation
43+
1. Upload or record your audio.
44+
2. Pick voice settings if needed (like gender or accent).
45+
3. Click "Generate."
46+
4. Wait for the tool to process.
47+
5. Watch the preview.
48+
6. Adjust timing or sync if it looks off.
49+
50+
51+
---
52+
53+
54+
## Tips for Best Results
55+
56+
For the best results, use clear audio with minimal background noise and speak at a steady volume. If you’re new, start with simple characters to get the hang of it. Always preview your animation and adjust the sync if something looks off.
57+
58+
59+
## Extra Features (Optional)
60+
61+
- **Upload your own character:** Prepare images with different mouth shapes, then upload and map them.
62+
- **Export:** Download as MP4 or image sequence for use in other software.
63+
- **Batch process:** Use the same settings for multiple audio files if you have many clips.
64+
65+
66+
67+
## What Can You Use This For?
68+
69+
This tool is great for online courses, social media videos, animated explainers, podcasts with talking characters, or just hobby and school projects. If you need a character to talk, this tool can help.
70+
71+
72+
73+
## Limitations
74+
75+
The free version limits you to 2-minute audio, fewer character choices, standard quality, and adds an Adobe watermark. You’ll need an internet connection, and it’s not as customizable as professional animation tools. Sometimes, the AI results might need a little manual fixing for perfect sync.
76+
77+
78+
79+
## When to Use This Tool
80+
81+
Use Adobe Express Animate Voice when you want something fast and easy, don’t need frame-by-frame control, and are happy with standard lip sync quality.
82+
83+
84+
85+
## Exporting
86+
87+
When you’re done, you can download your animation as an MP4 or an image sequence. If you want to do more editing, just import the file into your favorite video editor.
88+
89+
90+
91+
## Practice and Improve
92+
93+
Start with a simple project to get comfortable. Try out different characters and audio types, and play with the timing and settings to see what works best for your needs.
94+
95+
96+
---
97+
98+
## Summary
99+
100+
Adobe Express Animate Voice is a simple way to make characters talk using your audio. Just pick a character, add your voice, and let the tool do the work. It’s fast, free, and great for beginners or anyone who needs quick results. For more control, try manual animation tools or combine this with other editors.
101+
102+
Want to go further? See our [Viseme Chart Reference](/learn/visemes-chart) for manual animation, or try our [Phoneme Timing Editor](/tools/phoneme-timing) for more control.

src/content/guides/visemes-chart.mdx

Lines changed: 58 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,39 @@ featured: true
99
order: 1
1010
---
1111

12-
# Complete Viseme Chart Reference
1312

14-
A **viseme** is the visual representation of a phoneme (speech sound). In lip sync animation, visemes are the key mouth shapes that represent how the mouth looks when producing specific sounds. Understanding and memorizing these shapes is fundamental to creating believable lip sync animation.
1513

16-
## Why Visemes Matter
14+
Want to make your animation characters talk? You need to know the basic mouth shapes, called visemes. Here’s a simple, no-nonsense guide to get you started.
1715

18-
Instead of animating every tiny mouth movement, animators use a simplified set of visemes that can represent all speech sounds. This approach:
1916

20-
- **Saves time** - Fewer shapes to animate
21-
- **Ensures consistency** - Standardized mouth positions
22-
- **Improves readability** - Clear, recognizable shapes
23-
- **Works across languages** - Universal mouth mechanics
17+
---
18+
19+
## Why Use Visemes?
20+
21+
You don’t need to animate every sound. Just use a small set of mouth shapes. This saves time, keeps things clear, and works for any language.
2422

25-
## The Standard 8 Visemes
2623

27-
Most professional animation studios use 8-12 visemes. Here's the essential set of 8 that covers all English sounds:
24+
## The 8 Essential Visemes (Mouth Shapes)
2825

29-
### 1. Closed (M, B, P)
30-
**Phonemes:** M, B, P
31-
**Example words:** "Map", "Boy", "Pop"
32-
**Description:** Lips completely pressed together
33-
**Animation tip:** Quick transition - don't hold too long
26+
Most animators use these 8 shapes for English. Learn these first:
27+
28+
29+
1. **Closed** (M, B, P)
30+
- Lips together. For sounds like "map," "boy," "pop."
31+
2. **Narrow** (F, V)
32+
- Bottom lip touches top teeth. For "fish," "voice."
33+
3. **Open** (AH, AA, AO)
34+
- Mouth wide open. For "car," "cot."
35+
4. **Smile** (EE, IH, EH)
36+
- Corners back, teeth show. For "see," "sit."
37+
5. **Round** (OO, UH, W)
38+
- Lips pushed forward. For "too," "book."
39+
6. **Tongue** (TH)
40+
- Tongue between teeth. For "think," "that."
41+
7. **Teeth** (S, Z, T, D, N, L)
42+
- Tongue near teeth. For "say," "dog," "no."
43+
8. **Rest**
44+
- Neutral mouth. Use for pauses and silence.
3445

3546
### 2. Narrow (F, V)
3647
**Phonemes:** F, V
@@ -74,33 +85,17 @@ Most professional animation studios use 8-12 visemes. Here's the essential set o
7485
**Description:** Natural resting mouth position
7586
**Animation tip:** Return to this shape between phrases
7687

77-
## Extended Viseme Sets
78-
79-
Some studios use additional visemes for more nuanced animation:
8088

81-
### 9. Wide Open (AY, EY)
82-
**Phonemes:** AY, EY
83-
**Example words:** "Say", "Day"
84-
**Description:** Similar to smile but more open
89+
---
8590

86-
### 10. Narrow Open (IY)
87-
**Phonemes:** IY
88-
**Example words:** "Easy", "Beach"
89-
**Description:** Between smile and closed
91+
## More Shapes (Optional)
9092

91-
### 11. Back Vowel (UW)
92-
**Phonemes:** UW
93-
**Example words:** "Blue", "True"
94-
**Description:** Round but more relaxed
93+
Some animators use extra shapes for tricky sounds or more detail. Start with the main 8, then add more if you need them.
9594

96-
### 12. Consonant Cluster (Multiple)
97-
**Phonemes:** Complex consonant combinations
98-
**Example words:** "Strength", "Twelfth"
99-
**Description:** Hybrid shapes for difficult sounds
10095

101-
## Phoneme to Viseme Mapping
96+
## Which Shape for Which Sound?
10297

103-
Here's a complete mapping of English phonemes to visemes:
98+
Heres a quick chart. Find your sound, use the matching mouth shape:
10499

105100
| Phoneme | Sound | Example | Viseme |
106101
|---------|-------|---------|--------|
@@ -127,76 +122,49 @@ Here's a complete mapping of English phonemes to visemes:
127122
| UH | /ʊ/ | "book" | Round |
128123
| W | /w/ | "way" | Round |
129124

130-
## Animation Guidelines
131125

132-
### Timing Rules
133-
- **Lead the audio** by 1-2 frames
134-
- **Hold vowels** longer than consonants
135-
- **Quick transitions** for plosives (P, B, T, D)
136-
- **Smooth blends** for flowing sounds
126+
---
137127

138-
### Hierarchy of Importance
139-
1. **Vowels** - Most important, hold longest
140-
2. **Accented syllables** - Emphasize with clear shapes
141-
3. **Consonants** - Quick hits, some can be implied
142-
4. **Unstressed sounds** - Can be simplified or skipped
128+
## How to Animate with Visemes
143129

144-
### Emotional Adjustments
145-
Modify visemes based on character emotion:
146-
- **Happy:** Wider smiles, more open shapes
147-
- **Sad:** Drooped corners, less pronounced shapes
148-
- **Angry:** Tighter shapes, more tension
149-
- **Surprised:** Exaggerated openings
130+
1. Listen to your audio.
131+
2. For each sound, pick the right mouth shape from the chart.
132+
3. Change shapes just before the sound happens (lead by 1-2 frames).
133+
4. Hold vowels longer, switch quickly for short sounds.
134+
5. Adjust the mouth for emotion (smile for happy, tight for angry, etc).
150135

151-
## Common Mistakes
152136

153-
### Over-Articulation
154-
**Problem:** Making every sound too precise
155-
**Solution:** Blur similar sounds together, especially in fast speech
137+
---
156138

157-
### Under-Articulation
158-
**Problem:** Not making shapes clear enough
159-
**Solution:** Ensure key vowels and accented syllables are readable
139+
## Common Mistakes (and How to Fix Them)
160140

161-
### Wrong Timing
162-
**Problem:** Shapes appear too late or too early
163-
**Solution:** Mouth shapes should slightly precede the audio
141+
- Don’t make every sound too perfect. Blend shapes for fast speech.
142+
- Don’t skip the main vowels—make them clear.
143+
- Change the mouth shape just before the sound, not after.
144+
- Move the jaw too, not just the lips.
164145

165-
### Ignoring Jaw Movement
166-
**Problem:** Only moving lips without jaw
167-
**Solution:** Jaw opens for vowels, closes for consonants
168146

169-
## Practice Exercises
147+
---
170148

171-
### Exercise 1: Viseme Identification
172-
Listen to simple words and identify which visemes you'd use:
173-
- "Hello" → Teeth-Smile-Teeth-Round
174-
- "Goodbye" → Teeth-Round-Teeth-Closed-Round-EE
149+
## Practice
175150

176-
### Exercise 2: Emotion Variations
177-
Practice the same word with different emotions:
178-
- "Yes" (happy) - wider smile
179-
- "Yes" (reluctant) - tighter shapes
180-
- "Yes" (excited) - more open, energetic
151+
- Say a word out loud. Match each sound to a mouth shape.
152+
- Try the same word with different emotions.
153+
- Practice slow and fast speech—see which shapes you can skip or blend.
181154

182-
### Exercise 3: Speed Variations
183-
Practice with different speech speeds:
184-
- Slow speech: Use all visemes clearly
185-
- Normal speech: Blend similar sounds
186-
- Fast speech: Hit only the most important shapes
187155

188-
## Using This Reference
156+
---
189157

190-
1. **Memorize the basic 8** - These cover 90% of animation needs
191-
2. **Practice with simple words** first
192-
3. **Use our [Viseme Viewer tool](/tools/viseme-viewer)** for interactive practice
193-
4. **Record yourself speaking** for reference
194-
5. **Study professional animation** to see these principles in action
158+
## How to Use This Chart
195159

196-
## Next Steps
160+
1. Learn the 8 main shapes.
161+
2. Practice with simple words.
162+
3. Try our [Viseme Viewer tool](/tools/viseme-viewer) to see them in action.
163+
4. Record yourself and check your mouth shapes.
197164

198-
Now that you understand visemes, learn how to time them properly with our [Phoneme Timing Editor](/tools/phoneme-timing) or dive deeper with our [Ultimate Lip Sync Guide](/blog/ultimate-lip-sync-guide).
199165

200166
---
201167

202-
*Need a quick reference while animating? Bookmark this page or use our interactive [Viseme Viewer](/tools/viseme-viewer) tool.*
168+
## Summary
169+
170+
You only need a handful of mouth shapes to make your characters talk. Learn the basics, practice matching sounds to shapes, and use the chart as a quick reference. For more help, try our [Phoneme Timing Editor](/tools/phoneme-timing) or read the [Ultimate Lip Sync Guide](/blog/ultimate-lip-sync-guide).

src/layouts/ToolLayout.astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,8 +116,8 @@ const jsonLD = buildJSONLD('Article', {
116116
<p class="text-sm text-gray-600 mb-4">
117117
Get AI-powered lip sync generation and batch processing tools.
118118
</p>
119-
<a href="/pricing" class="btn btn-primary text-sm w-full">
120-
Learn More
119+
<a href="https://docs.google.com/forms/d/e/1FAIpQLSckgJArXBc1N_DYsvtEv94u185bvzLN-NiU47x3Y9cw6ag3Mw/viewform?usp=dialog" target="_blank" rel="noopener noreferrer" class="btn btn-primary text-sm w-full">
120+
Join Waitlist
121121
</a>
122122
</div>
123123
</div>

src/lib/seo.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export interface SEOData {
1212
}
1313

1414
const SITE_TITLE = 'LipsyncAnimation';
15-
const SITE_DESCRIPTION = 'Free lip sync tools and guides for animation. Make characters talk—fast.';
15+
const SITE_DESCRIPTION = 'Free lip sync tools and guides for animation. Make characters talk.';
1616
const SITE_URL = 'https://lipsyncanimation.com';
1717

1818
export function buildSEO(data: SEOData = {}) {
@@ -110,4 +110,4 @@ export function buildJSONLD(type: 'Organization' | 'WebSite' | 'Article' | 'Blog
110110
default:
111111
return {};
112112
}
113-
}
113+
}

0 commit comments

Comments
 (0)