telegram-crawler/data/web/core.telegram.org/stickers.html
2022-09-09 10:10:24 +00:00

267 lines
20 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 platform for stickers and emoji. Stickers take…">
<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 platform for stickers and emoji. Stickers take…">
<link rel="icon" type="image/svg+xml" href="/img/website_icon.svg?4">
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
<link rel="alternate icon" href="/img/favicon.ico" type="image/x-icon" />
<link href="/css/bootstrap.min.css?3" rel="stylesheet">
<link href="/css/telegram.css?231" 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 <strong>open platform</strong> for stickers and <a href="#custom-emoji">emoji</a>. 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><strong>Creating Stickers</strong><ul>
<li><a href="#creating-animations">Animated</a></li>
<li><a href="#video-stickers-and-emoji">Video</a></li>
<li><a href="#static-stickers-and-emoji">Static</a></li>
</ul>
</li>
<li><strong>Uploading Stickers</strong><ul>
<li><a href="#using-the-stickers-bot">How to Upload</a></li>
<li><a href="#importing-stickers-from-other-apps">Importing from other apps</a></li>
</ul>
</li>
</ul>
<h3><a class="anchor" name="animated-stickers-and-emoji" href="#animated-stickers-and-emoji"><i class="anchor-icon"></i></a>Animated Stickers and Emoji</h3>
<p>Telegram stickers and emoji can move with smooth <strong>60 FPS animations</strong> to bring your characters to life in high resolution.</p>
<blockquote>
<p>Animations require Telegram&#39;s unique <strong>.TGS format</strong> click <a href="#video-stickers-and-emoji">here</a> for <strong>Video Stickers and Emoji</strong> made in <strong>.WEBM format</strong>.</p>
</blockquote>
<h4><a class="anchor" name="creating-animations" href="#creating-animations"><i class="anchor-icon"></i></a>Creating Animations</h4>
<p>To create vector-animated stickers and emoji 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 Telegram&#39;s <strong>.TGS format</strong>.</li>
</ol>
<blockquote>
<p>The Lottie-based .TGS format allows for incredibly detailed animations that are <strong>less than 30 KB</strong> in size six times smaller than the average photo.</p>
</blockquote>
<h4><a class="anchor" name="animation-requirements" href="#animation-requirements"><i class="anchor-icon"></i></a>Animation Requirements</h4>
<ul>
<li>The canvas size must be <strong>512х512 pixels</strong>.</li>
<li>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>Final file 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 artwork: <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-animations" href="#uploading-animations"><i class="anchor-icon"></i></a>Uploading Animations</h4>
<p>When your files 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>To upload emoji, send <code>/newemojipack</code> to <a href="https://t.me/Stickers">@Stickers</a>. The requirements for .TGS stickers and emoji are <strong>exactly the same</strong>.</p>
<p>Your set will need an icon. Icons for your sets must be <strong>100x100 pixels</strong>, with a looped animation not exceeding 3 seconds.</p>
<hr>
<h3><a class="anchor" name="video-stickers-and-emoji" href="#video-stickers-and-emoji"><i class="anchor-icon"></i></a>Video Stickers and Emoji</h3>
<p>Stickers and emoji can also be 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-videos" href="#creating-videos"><i class="anchor-icon"></i></a>Creating Videos</h4>
<p>To create stickers and emoji from video files, 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>.</p>
<h4><a class="anchor" name="video-requirements" href="#video-requirements"><i class="anchor-icon"></i></a>Video 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>For stickers, one side must be exactly <strong>512 pixels</strong> in size the other side can be 512 pixels <strong>or less</strong>.</li>
<li>For emoji, the video must be exactly <strong>100x100 pixels</strong> in size</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>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-videos" href="#uploading-videos"><i class="anchor-icon"></i></a>Uploading Videos</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>To upload emoji, send <code>/newemojipack</code> to <a href="https://t.me/Stickers">@Stickers</a>. Note that video emoji need to be a <a href="#video-requirements">smaller resolution</a> than stickers.</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-and-emoji" href="#static-stickers-and-emoji"><i class="anchor-icon"></i></a>Static Stickers and Emoji</h3>
<p>Turn your favorite drawings and memes into packs of images that are easily to share and access on any device.</p>
<h4><a class="anchor" name="creating-images" href="#creating-images"><i class="anchor-icon"></i></a>Creating Images</h4>
<p>To create static stickers and emoji for Telegram, 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="image-requirements" href="#image-requirements"><i class="anchor-icon"></i></a>Image Requirements</h4>
<ul>
<li>For stickers, one side must be exactly <strong>512 pixels</strong> in size the other side can be 512 pixels <strong>or less</strong>.</li>
<li>For emoji, images must be exactly <strong>100x100 pixels</strong> in size.</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-images" href="#uploading-images"><i class="anchor-icon"></i></a>Uploading Images</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>
<p>To upload emoji, send <code>/newemojipack</code> to <a href="https://t.me/Stickers">@Stickers</a>. Note that static emoji need to be a <a href="#image-requirements">smaller resolution</a> than stickers.</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>
<h3><a class="anchor" name="custom-emoji" href="#custom-emoji"><i class="anchor-icon"></i></a>Custom Emoji</h3>
<p>As of version 8.9 released in August 2022, Telegram apps support <a href="https://telegram.org/blog/custom-emoji">custom emoji</a>.<br>Emoji use the same technology as stickers, making it very easy to convert your art to <strong>both formats</strong>. Check out the <a href="#video-requirements">video</a> and <a href="#image-requirements">image</a> sections for details on the different size requirements.<br>To upload them, use the <code>/newemojipack</code> command in <a href="https://t.me/stickers">@Stickers</a>. </p>
<blockquote>
<p>Everyone can create new custom emoji, however, adding and using custom sets is currently an exclusive <a href="https://t.me/premium">feature</a> of <a href="https://telegram.org/blog/700-million-and-premium">Telegram Premium</a> users.</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-images">static stickers</a>. For <a href="#uploading-animations">animated stickers</a> use <code>/newanimated</code>, or <code>/newvideo</code> for <a href="#uploading-videos">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-and-emoji">image file</a>, <a href="#animated-stickers-and-emoji">.TGS file</a>, or <a href="#video-stickers-and-emoji">.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-and-emoji">static sticker</a> packs can <code>/skip</code> this step, but it is required for <a href="#animated-stickers-and-emoji">animated</a> or <a href="#video-stickers-and-emoji">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-and-emoji">.PNG</a>, <a href="#static-stickers-and-emoji">.WEBP</a> or <a href="#video-stickers-and-emoji">.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/privacy">Privacy</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?46"></script>
<script>backToTopInit("Go up");
removePreloadInit();
</script>
</body>
</html>