telegram-crawler/data/corefork.telegram.org/animated_stickers.html
2021-09-09 18:46:07 +00:00

138 lines
6.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html class="">
<head>
<meta charset="utf-8">
<title>Creating Animated Stickers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="description" content="Telegram apps support animated stickers as of version 5.9. All artists are welcome to create and upload new packs of animated…">
<meta property="og:title" content="Creating Animated Stickers">
<meta property="og:image" content="">
<meta property="og:description" content="Telegram apps support animated stickers as of version 5.9. All artists are welcome to create and upload new packs of animated…">
<link rel="shortcut icon" href="/favicon.ico?4" type="image/x-icon" />
<link href="/css/bootstrap.min.css?3" rel="stylesheet">
<link href="/css/telegram.css?212" rel="stylesheet" media="screen">
<style>
</style>
</head>
<body class="preload">
<div class="dev_page_wrap">
<div class="dev_page_head navbar navbar-static-top navbar-tg">
<div class="navbar-inner">
<div class="container clearfix">
<ul class="nav navbar-nav navbar-right hidden-xs"><li class="navbar-twitter"><a href="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)"><i class="icon icon-twitter"></i><span> Twitter</span></a></li></ul>
<ul class="nav navbar-nav">
<li><a href="//telegram.org/">Home</a></li>
<li class="hidden-xs"><a href="//telegram.org/faq">FAQ</a></li>
<li class="hidden-xs"><a href="//telegram.org/apps">Apps</a></li>
<li class=""><a href="/api">API</a></li>
<li class=""><a href="/mtproto">Protocol</a></li>
<li class=""><a href="/schema">Schema</a></li>
</ul>
</div>
</div>
</div>
<div class="container clearfix">
<div class="dev_page">
<div id="dev_page_content_wrap" class=" ">
<div class="dev_page_bread_crumbs"></div>
<h1 id="dev_page_title">Creating Animated Stickers</h1>
<div id="dev_page_content"><p>Telegram apps support <a href="https://telegram.org/blog/animated-stickers">animated stickers</a> as of version <strong>5.9</strong>. All artists are welcome to create and upload new packs of animated stickers.</p>
<h3><a class="anchor" name="required-tools" href="#required-tools"><i class="anchor-icon"></i></a>Required Tools</h3>
<p>To create animated stickers for the Telegram platform, you will need the following:</p>
<ol>
<li>Any vector graphics editor that allows exporting vector objects to Adobe After Effects for turning them into animations.</li>
<li>Adobe After Effects.</li>
<li>The <a href="https://github.com/TelegramMessenger/bodymovin-extension">Bodymovin-TG</a> plugin, a fork of Bodymovin for Adobe After Effects that can be used to export animations to <strong>.TGS</strong>, the Telegram animated sticker format.</li>
</ol>
<h3><a class="anchor" name="technical-requirements" href="#technical-requirements"><i class="anchor-icon"></i></a>Technical Requirements</h3>
<ul>
<li>Sticker/canvas size must be <strong>512х512 pixels</strong>. </li>
<li>Sticker objects must not leave the canvas.</li>
<li>Animation length must not exceed <strong>3 seconds</strong>.</li>
<li>All animations must be looped.</li>
<li>Sticker size must not exceed <strong>64 KB</strong> after rendering in Bodymovin.</li>
<li>All animations must run at <strong>60 Frames Per Second</strong>.</li>
<li>You <strong>must not</strong> use the following Adobe After Effects functionality when animating your stickers: Auto-bezier keys, Expressions, Masks, Layer Effects, Images, Solids, Texts, 3D Layers, Merge Paths, Star Shapes, Gradient Strokes, Repeaters, Time Stretching, Time Remapping, Auto-Oriented Layers.</li>
</ul>
<!--Using any of these tools will make it impossible to export your animation with Bodymovin-TG.-->
<h3><a class="anchor" name="uploading-stickers" href="#uploading-stickers"><i class="anchor-icon"></i></a>Uploading Stickers</h3>
<p>Once your stickers are ready, send the <code>/newanimated</code> command to the <a href="https://t.me/stickers">@stickers</a> bot then send it the <strong>.TGS</strong> files.</p>
<p>Your set will need an icon. Icons for animated sticker sets must be <strong>100x100 pixels</strong>, with a looped animation not exceeding 3 seconds.</p>
</div>
</div>
</div>
</div>
<div class="footer_wrap">
<div class="footer_columns_wrap footer_desktop">
<div class="footer_column footer_column_telegram">
<h5>Telegram</h5>
<div class="footer_telegram_description"></div>
Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.
</div>
<div class="footer_column">
<h5><a href="//telegram.org/faq">About</a></h5>
<ul>
<li><a href="//telegram.org/faq">FAQ</a></li>
<li><a href="//telegram.org/blog">Blog</a></li>
<li><a href="//telegram.org/jobs">Jobs</a></li>
</ul>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/apps#mobile-apps">Mobile Apps</a></h5>
<ul>
<li><a href="//telegram.org/dl/ios">iPhone/iPad</a></li>
<li><a href="//telegram.org/dl/android">Android</a></li>
<li><a href="//telegram.org/dl/wp">Windows Phone</a></li>
</ul>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/apps#desktop-apps">Desktop Apps</a></h5>
<ul>
<li><a href="//desktop.telegram.org/">PC/Mac/Linux</a></li>
<li><a href="//macos.telegram.org/">macOS</a></li>
<li><a href="//telegram.org/dl/web">Web-browser</a></li>
</ul>
</div>
<div class="footer_column footer_column_platform">
<h5><a href="//core.telegram.org/">Platform</a></h5>
<ul>
<li><a href="//core.telegram.org/api">API</a></li>
<li><a href="//translations.telegram.org/">Translations</a></li>
<li><a href="//instantview.telegram.org/">Instant View</a></li>
</ul>
</div>
</div>
<div class="footer_columns_wrap footer_mobile">
<div class="footer_column">
<h5><a href="//telegram.org/faq">About</a></h5>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/blog">Blog</a></h5>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/apps">Apps</a></h5>
</div>
<div class="footer_column">
<h5><a href="//core.telegram.org/">Platform</a></h5>
</div>
<div class="footer_column">
<h5><a href="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)">Twitter</a></h5>
</div>
</div>
</div>
</div>
<script src="/js/main.js?42"></script>
<script>backToTopInit("Go up");
removePreloadInit();
</script>
</body>
</html>