telegram-crawler/data/core.telegram.org/stickers.html
2022-04-18 20:44:16 +00:00

249 lines
19 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>Telegram Stickers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="description" content="All users can create, send and share custom artwork using Telegram&#39;s open Sticker Platform. Stickers take many forms from…">
<meta property="og:title" content="Telegram Stickers">
<meta property="og:image" content="">
<meta property="og:description" content="All users can create, send and share custom artwork using Telegram&#39;s open Sticker Platform. Stickers take many forms from…">
<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?226" 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">Telegram Stickers</h1>
<div id="dev_page_content"><p>All users can create, send and share custom artwork using Telegram&#39;s open <strong>Sticker Platform</strong>. Stickers take many forms from <strong>basic images</strong> to stunning <strong>vector animations</strong>. </p>
<p>To start building your own custom sets, click below:</p>
<ul>
<li><a href="#animated-stickers">Animated Stickers</a></li>
<li><a href="#video-stickers">Video Stickers</a></li>
<li><a href="#static-stickers">Static Stickers</a></li>
<li><a href="#using-the-stickers-bot">Uploading your Stickers</a></li>
<li><a href="#importing-stickers-from-other-apps">Importing from other apps</a></li>
</ul>
<h3><a class="anchor" name="animated-stickers" href="#animated-stickers"><i class="anchor-icon"></i></a>Animated Stickers</h3>
<p>Telegram stickers can move with smooth <strong>60 FPS animations</strong> to bring your characters to life in high-resolution.</p>
<blockquote>
<p>Animated stickers use Telegram&#39;s unique <strong>.TGS format</strong> click <a href="#video-stickers">here</a> for <strong>Video Stickers</strong> made in <strong>.WEBM format</strong>.</p>
</blockquote>
<h4><a class="anchor" name="creating-animated-stickers" href="#creating-animated-stickers"><i class="anchor-icon"></i></a>Creating Animated Stickers</h4>
<p>To create vector animated stickers you will need the following:</p>
<ol>
<li>Any vector graphics editor that allows exporting vector objects to Adobe After Effects to turn 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>
<blockquote>
<p>The Lottie-based .TGS format allows for incredibly detailed stickers that are <strong>less than 30 KB</strong> in size six times smaller than the average photo.</p>
</blockquote>
<h4><a class="anchor" name="animated-sticker-requirements" href="#animated-sticker-requirements"><i class="anchor-icon"></i></a>Animated Sticker Requirements</h4>
<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: <em>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</em>.</li>
</ul>
<h4><a class="anchor" name="uploading-animated-stickers" href="#uploading-animated-stickers"><i class="anchor-icon"></i></a>Uploading Animated Stickers</h4>
<p>When 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 .TGS 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>
<hr>
<h3><a class="anchor" name="video-stickers" href="#video-stickers"><i class="anchor-icon"></i></a>Video Stickers</h3>
<p><a href="https://telegram.org/blog/video-stickers-better-reactions">Video Stickers</a> are built with <strong>.WEBM</strong> an open-source format that is compatible with many graphics editors to create high-detail images. Requires <a href="https://telegram.org/apps">Telegram 8.5</a> or higher.</p>
<!--
> This format also allows you to [import custom stickers](https://core.telegram.org/import-stickers) to Telegram from other apps.
-->
<h4><a class="anchor" name="creating-video-stickers" href="#creating-video-stickers"><i class="anchor-icon"></i></a>Creating Video Stickers</h4>
<p>To create Video Stickers, you only need <a href="https://core.telegram.org/stickers/webm-vp9-encoding">editing software</a> that lets you export your project as a <strong>.WEBM video file</strong> (alpha channel <strong>no longer required</strong>).</p>
<h4><a class="anchor" name="video-sticker-requirements" href="#video-sticker-requirements"><i class="anchor-icon"></i></a>Video Sticker Requirements</h4>
<blockquote>
<p>See this <a href="https://core.telegram.org/stickers/webm-vp9-encoding">Encoding .WEBM with VP9 Guide</a> for details </p>
</blockquote>
<ul>
<li>One side of the sticker must be exactly <strong>512 pixels</strong> in size the other side can be 512 pixels <strong>or less</strong>.</li>
<li>Video duration must not exceed <strong>3 seconds</strong>.</li>
<li>Frame rate can be up to <strong>30 FPS</strong>.</li>
<li><del>Video must have a transparent layer</del> (this is no longer required).</li>
<li>Video should be looped for optimal user experience.</li>
<li>Video size should not exceed <strong>256 KB</strong>. </li>
<li>Video must be in .WEBM format encoded with the <strong>VP9 codec</strong>.</li>
<li>Video must have <strong>no audio stream</strong>.</li>
</ul>
<h4><a class="anchor" name="uploading-video-stickers" href="#uploading-video-stickers"><i class="anchor-icon"></i></a>Uploading Video Stickers</h4>
<p>Once your stickers are ready, send the <code>/newvideo</code> command to the <a href="https://t.me/Stickers">@Stickers</a> bot then send it the .WEBM files.</p>
<p>Your set will need a .WEBM icon. Icons for video sticker sets must be <strong>100x100 pixels</strong>, with a looped animation not exceeding 3 seconds.</p>
<hr>
<h3><a class="anchor" name="static-stickers" href="#static-stickers"><i class="anchor-icon"></i></a>Static Stickers</h3>
<p>Turn your favorite drawings and memes into packs of images that are easily accessible <strong>on any device</strong> no more digging through your gallery.</p>
<h4><a class="anchor" name="creating-static-stickers" href="#creating-static-stickers"><i class="anchor-icon"></i></a>Creating Static Stickers</h4>
<p>To create static stickers for the Telegram platform, you only need an image editor that lets you export in <strong>.PNG</strong> or <strong>.WEBP</strong> format.</p>
<h4><a class="anchor" name="static-sticker-requirements" href="#static-sticker-requirements"><i class="anchor-icon"></i></a>Static Sticker Requirements</h4>
<ul>
<li>One side of the sticker must be exactly <strong>512 pixels</strong> in size the other side can be 512 pixels <strong>or less</strong>.</li>
<li>The image file must be in either .PNG or .WEBP format.</li>
</ul>
<blockquote>
<p>Tip: a transparent background, white stroke and black shadow effect will make your sticker stand out.</p>
</blockquote>
<h4><a class="anchor" name="uploading-static-stickers" href="#uploading-static-stickers"><i class="anchor-icon"></i></a>Uploading Static Stickers</h4>
<p>Once your stickers are ready, start a chat with the <a href="https://t.me/Stickers">@Stickers</a> bot and send the command <code>/newpack</code>. Your sticker set can also have a <strong>custom icon</strong> a <strong>100x100 pixel image</strong> in .PNG or .WEBP format.</p>
<blockquote>
<p>For more info about using the <a href="https://t.me/Stickers">@Stickers</a> bot, click <a href="#using-the-stickers-bot">here</a>.</p>
</blockquote>
<hr>
<h3><a class="anchor" name="using-the-stickers-bot" href="#using-the-stickers-bot"><i class="anchor-icon"></i></a>Using the @Stickers Bot</h3>
<p>Publishing and <a href="#editing-a-sticker-pack">editing</a> sticker packs is <strong>simple</strong> and <strong>automated</strong>, thanks to the <a href="https://t.me/Stickers">@Stickers</a> bot. It can also show you <a href="#sticker-stats">detailed stats</a> for stickers and packs.</p>
<h4><a class="anchor" name="publishing-a-sticker-pack" href="#publishing-a-sticker-pack"><i class="anchor-icon"></i></a>Publishing a Sticker Pack</h4>
<p>Once you open the bot, press the <strong>Start button</strong> or send <code>/start</code>. The bot will reply, describing its different commands. It will walk you through step by step, but here&#39;s a quick guide:</p>
<ul>
<li>Open the <a href="https://t.me/TelegramTips/283">bot menu</a> in the message bar and select the <code>/newpack</code> command to start uploading <a href="#uploading-static-stickers">static stickers</a>. For <a href="#uploading-animated-stickers">animated stickers</a> use <code>/newanimated</code>, or <code>/newvideo</code> for <a href="#uploading-video-stickers">video stickers</a>.</li>
<li>Give your sticker pack a <strong>name</strong> this name will appear <strong>as the title</strong> for your pack in the sticker panel.</li>
<li>Send your first sticker file an <a href="#static-stickers">image file</a>, <a href="#animated-stickers">.TGS file</a>, or <a href="#video-stickers">.WEBM file</a>. Using one of the <a href="https://telegram.org/apps#desktop-apps">Desktop</a> or <a href="https://telegram.org/apps#web-apps">Web apps</a> is <strong>strongly recommended</strong>.</li>
<li>Choose an <strong>emoji</strong> that corresponds to your sticker this lets users quickly find it with <a href="https://t.me/TelegramTips/294">sticker suggestions</a>.</li>
<li>Continue uploading all your sticker files.</li>
<li>When you&#39;re done uploading, send the <code>/publish</code> command.</li>
<li>Set an icon for your pack <a href="#static-stickers">static sticker</a> packs can <code>/skip</code> this step, but it is required for <a href="#animated-stickers">animated</a> or <a href="#video-stickers">video stickers</a>.</li>
<li>Choose a <strong>short name</strong> for your sticker pack it will be used to create a <strong>shareable link</strong> for the pack like <a href="https://t.me/addstickers/HotCherry">t.me/addstickers/HotCherry</a>. Congratulations! Your stickers are ready for the world.</li>
</ul>
<blockquote>
<p>After your pack is finished, you can send <code>/start</code> again to see the full list of commands, or use the bot menu to create another pack, <a href="#editing-a-sticker-pack">edit an existing pack</a>, or <a href="#sticker-stats">see statistics</a>.</p>
</blockquote>
<h4><a class="anchor" name="editing-a-sticker-pack" href="#editing-a-sticker-pack"><i class="anchor-icon"></i></a>Editing a Sticker Pack</h4>
<p>Once you&#39;ve created <a href="#publishing-a-sticker-pack">one or more packs</a>, you can <strong>add</strong>, <strong>edit</strong> or <strong>replace stickers</strong> in your existing sets.</p>
<ul>
<li>Use <code>/addsticker</code> if you have more artwork you&#39;d like to add to a set. Choose one of your packs from the list the upload process is <a href="#publishing-a-sticker-pack">exactly the same</a> as before.</li>
<li>Use <code>/editsticker</code> to <strong>change the emoji</strong> you assigned to a sticker select the pack and sticker, or simply send the intended sticker from your panel.</li>
<li>Use <code>/replacesticker</code> if you want to swap out an older sticker for an updated version.</li>
<li>Use <code>/ordersticker</code> to <strong>change the order</strong> of stickers in your pack. Choose the pack and one of the stickers, then choose another sticker to appear before it (to the left) in the panel.</li>
<li>Use <code>/delsticker</code> to <strong>remove a sticker</strong> from the pack you can always use <code>/addsticker</code> to add it again if you change your mind.</li>
<li>Use <code>/seticon</code> to set an icon for your pack or to <strong>change the icon</strong>. Static sticker packs without a custom icon will use the first sticker as its icon.</li>
</ul>
<blockquote>
<p>Edits to your sticker packs may take up to an hour to update for all users.</p>
</blockquote>
<h4><a class="anchor" name="sticker-stats" href="#sticker-stats"><i class="anchor-icon"></i></a>Sticker Stats</h4>
<p>There are a number of commands that let you <strong>see statistics</strong> for your stickers here&#39;s what they all do:</p>
<ul>
<li><code>/packstats</code> shows how many times your pack was <strong>used</strong>, <strong>installed</strong> and <strong>removed</strong> both recently and overall.</li>
<li><code>/stats</code> shows how many times an <strong>individual sticker</strong> has been sent.</li>
<li><code>/top</code> shows the most popular stickers from <strong>all your packs</strong>.</li>
<li><code>/packtop</code> shows your most popular sticker packs and their <strong>individual stats</strong>.</li>
<li><code>/topbypack</code> shows the top stickers from a <strong>specific sticker pack</strong>.</li>
<li><code>/packusagetop</code> shows your most popular packs by <strong>recent usage</strong>.</li>
</ul>
<blockquote>
<p>You can filter the results of <code>/top</code>, <code>/packtop</code>, <code>/topbypack</code> and <code>/packusagetop</code>. For example <code>/top 20</code> would show your top 20 stickers, and <code>/topbypack -5</code> would show the 5 least popular stickers from a pack.</p>
</blockquote>
<h3><a class="anchor" name="importing-stickers-from-other-apps" href="#importing-stickers-from-other-apps"><i class="anchor-icon"></i></a>Importing Stickers From Other Apps</h3>
<p>Developers can build apps to automate importing stickers using Telegrams API. With these tools, users can instantly bring their favorite stickers to Telegram.</p>
<h4><a class="anchor" name="for-developers" href="#for-developers"><i class="anchor-icon"></i></a>For Developers</h4>
<p>As of version 7.8, Telegram apps support a simple API for importing stickers. Developers can use this to <strong>build apps</strong> or <strong>add tools</strong> to apps that let users instantly transfer stickers to Telegram or create custom stickers from photos or videos.</p>
<blockquote>
<p>Click <a href="https://core.telegram.org/import-stickers#sticker-formats">here</a> for more information about developing apps for importing stickers.</p>
</blockquote>
<h4><a class="anchor" name="for-users" href="#for-users"><i class="anchor-icon"></i></a>For Users</h4>
<p>Users can find apps that allow them to import stickers or quickly <strong>generate their own</strong>. They can also easily <a href="#publishing-a-sticker-pack">publish custom stickers</a> with the <a href="https://t.me/Stickers">@Stickers</a> bot using <a href="#static-stickers">.PNG</a>, <a href="#static-stickers">.WEBP</a> or <a href="#video-stickers">.WEBM</a> files for stickers from other apps.</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="/">Platform</a></h5>
<ul>
<li><a href="/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="/">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?45"></script>
<script>backToTopInit("Go up");
removePreloadInit();
</script>
</body>
</html>