mirror of
https://github.com/MarshalX/telegram-crawler.git
synced 2024-12-28 23:38:26 +01:00
252 lines
19 KiB
HTML
252 lines
19 KiB
HTML
<!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'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's open Sticker Platform. Stickers take many forms – from…">
|
||
<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?229" 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'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'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'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'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'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'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'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 Telegram’s 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="//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?46"></script>
|
||
|
||
<script>backToTopInit("Go up");
|
||
removePreloadInit();
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|