Быстрый переход к разделу:
- Что такое стикерпак и какие требования у стикера
- Создаем стикер при помощи бота
- Вариант с обрезкой в квадрат
- Вариант с прозрачным фоном в Photoshop
- Как сделать стикер в iPhone
- Как создать анимированные стикеры в Telegram
Что такое стикерпак и какие требования у стикера
Стикерпак — это набор изображений, которые заменяют стандартные эмодзи.
Вместо обычного смайлика с поцелуем вы сможете отправить девушке ваше совместное милое фото, а вместо эмодзи с деньгами — скинуть стикер с лицом бухгалтера в рабочий чат.
Конечно, не стоит смешивать личные и публичные стикеры в Telegram, ведь пользователи, добавившие набор стикеров, будут видеть все изображения, добавленные к стикерпаку.
Намного лучше создать отдельный стикерпак со своим названием и тематикой. Достаточно подготовить изображения со стороной 512 пикселей в формате png или webp и загрузить их удобным способом.
Сделай карточку за 3 МИНУТЫ! Нейросети для дизайна карточек товара Wildberries, Ozon и Я.маркет
Создаем стикер при помощи бота
Если не гнаться за точностью, можно использовать бот в Telegram, который из любой картинки сделает подходящее для использования в стикерпаке изображение.
- выберите название,
- отправляйте сначала файлы с изображениями, а после соответствующие эмодзи,
- наполняйте стикерпак.
Вариант с обрезкой в квадрат
Стикеры в Telegram должны соответствовать разрешению 512 пикселей по одной из сторон. Вторая сторона может быть меньше, но наиболее популярный формат — квадратный стикер 512х512.
Если стикер в Telegram кажется прямоугольным, скорее всего, дело в том, что часть фона прозрачная, поэтому пропорция квадрата теряется.
Сделать изображение квадратным и задать размеры позволяет редактор фото в телефоне. Для этого:
- укажите размеры,
- выберите область изображения,
- сохраните фото в необходимом разрешении.
Если ваш телефон не может выполнить эти операции, воспользуйтесь сторонними сервисами (например, I love img) или приложениями:
Вариант с прозрачным фоном в Photoshop
В стандартных фоторедакторах тяжело получить прозрачный фон для стикеров в Telegram. Прозрачный фон делает стикер более органичным в интерфейсе мессенджера и создает эффект проработанности — в том числе поэтому для стикеров в Telegram используется формат png, который позволяет сохранить фон прозрачным.
Наиболее простой способ создать прозрачный фон для стикеров в Telegram — Photoshop:
- С помощью нажатия в меню «Выделение — Предмет» в два клика убрать все лишнее с фото и получить готовое изображение.
- После выделения предмета инвертируйте область (Ctrl+Shift+I) и вырежите все ненужное.
Младший брат Photoshop в онлайн-формате Photopea не предоставляет таких возможностей, поэтому стирать лишнее на фото для стикеров в Telegram с прозрачным фоном придется вручную.
Как сделать стикер в iPhone
Приложение Stickers позволяет не только ровно обрезать изображение, но и создавать стикеры с прозрачным фоном. Достаточно открыть фото и выделить область, которая должна остаться в качестве стикера.
Инструменты приложения позволяют менять толщину выделения, чтобы:
- включить в стикер самые тонкие детали,
- отменять неудачные движения,
- использовать функцию предпросмотра, чтобы убедиться, что вы сделали все верно и получили именно то изображение, которое хотите использовать в качестве стикера в Telegram.
У других приложений, например, «Редактора стикеров для Telegram» меньший функционал, однако они тоже могут оказаться полезными, если нет задачи сделать идеальные стикеры для iPhone.
А еще у владельцев iPhone с iOS 16 есть функция автоматического создания стикера из фото. Достаточно долго удерживать палец на объекте, который хотите использовать в качестве стикера в Telegram, и iPhone сам удалит фон и предложит отправить результат в качестве стикера.
Как создать анимированные стикеры в Telegram
Для анимированных стикеров Telegram использует собственный формат tgs, который можно получить, установив расширение Bodymovin-TG в Adobe After Effects. Создав обычную циключиную анимацию размером не более 64 КБ, можно открыть расширение Bodymovin for Telegram Stickers и сохранить композицию в нужном формате.
Важно: использование этих инструментов в After Effects может привести к ошибкам при сохранении файлов, поэтому от них лучше отказаться:
- Repeaters,
- Masks,
- Solids,
- Texts,
- Auto-Oriented Layers,
- Layer Effects,
- 3D Layers,
- Images,
- Gradient Strokes.
Анимированные стикеры в Telegram могут отличаться частотой кадров: если один стикер сохранен в 30 к/сек, а другой в 60 к/сек, платформа не даст использовать их в одном стикерпаке.
Использование средств Adobe требует дополнительных навыков и знаний и усложняет работу над стикерами в Telegram, зато позволяет создавать настоящие шедевры стикеростроения.
Если вы не занимаетесь графикой и дизайном профессионально, будет достаточно квадратных стикеров, сделанных на телефоне: в стикерпаке важнее идея, нежели изящность исполнения. Наиболее популярные стикеры сегодня — картинки с котиками и смешными комментариями, а не сложные работы аниматоров, исполненные в дорогостоящих программах.
Фото на обложке: Shutterstock / AngieYeoh
Источник: rb.ru
Создание Чат-Бот-Магазин в Телеграм с нуля. Часть первая
В кабинете пользователя будут храниться личные данные необходимые для оформления покупки. Заполнение данных нужно сделать доступным как при оформлении покупки, так и просто в разделе Личного кабинета.
Имя Фамилия
Адрес доставки
Навигация по каталогу должна быть удобная и интуитивно понятная. Необходимо реализовать возможность перемещаться не только вглубь каталога, но и на шаг назад. Это также должно работать в любом другом разделе бота.
Карточка товара
Картинка (1 шт, при желании можно расширить)
Описание в том числе характеристики
Единица измерения
Корзина покупателя позволяет сложить в нее интересующий товар и оформить покупку. В корзине обязательно должны быть инструменты по управлению:
Удалить товар из корзины
Просмотреть все товары в корзине
Увеличитьуменьшить количество товара
Оформить покупку
Адрес доставки
Фамилия Имя
Онлайн (попробуем Яндекс.Кассу или QIWI)
При получении товара
Предпросмотр покупки
В этом разделе можно разместить информацию о магазине, службе поддержки, способы обратной связи и другое.
По мере продвижения вперед, будем в ТЗ что-то или дополнять, или исключать. Код будем писать в нашем уже известном файле index.php (это файл, на который у нас настроен webHook), познакомимся с PDO.
Таблицы базы данных
id – уникальный идентификатор
user_id – id пользователя в Телеграм
first_name – имя пользователя
last_name – фамилия пользователя
phone – телефон пользователя
adress – адрес доставки
id – уникальный идентификатор
name – название каталога
Карточка товара
id – уникальный идентификатор
parent – родительская категория
name – название товара
description – описание товара
image_tgr – картинка товара в базе телеграм
image — картинка товара не стороннем сервере
price – цена товара
unit – единица измерения
id – уникальный идентификатор
product_id – id товара
product_count – количество товара
user_id – id пользователя
description – описание раздела
Структура таблиц в формате SQL
— — Структура таблицы `bot_shop_basket` — CREATE TABLE IF NOT EXISTS `bot_shop_basket` ( `id` int(11) NOT NULL AUTO_INCREMENT, `product_id` int(11) NOT NULL, `product_count` int(11) NOT NULL, `user_id` int(11) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; — — Структура таблицы `bot_shop_category` — CREATE TABLE IF NOT EXISTS `bot_shop_category` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; — — Структура таблицы `bot_shop_help` — CREATE TABLE IF NOT EXISTS `bot_shop_help` ( `description` text NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=utf8; — — Структура таблицы `bot_shop_product` — CREATE TABLE IF NOT EXISTS `bot_shop_product` ( `id` int(11) NOT NULL AUTO_INCREMENT, `parent` int(11) NOT NULL, `name` varchar(200) NOT NULL, `description` text NOT NULL, `image_tlg` varchar(200) NOT NULL, `image` varchar(200) NOT NULL, `price` decimal(10,2) NOT NULL, `unit` varchar(10) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; — — Структура таблицы `bot_shop_profile` — CREATE TABLE IF NOT EXISTS `bot_shop_profile` ( `id` int(11) NOT NULL AUTO_INCREMENT, `user_id` int(11) NOT NULL, `first_name` varchar(32) NOT NULL, `last_name` varchar(32) NOT NULL, `phone` varchar(15) NOT NULL, `adress` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8;
Еще будет как минимум одна таблица для промежуточной записи шагов пользователя, то есть нам нужно понимать для каких целей пришла информация от пользователя, то ли это текст для редактирования фамилии, или для раздела Помощь.
Источник: imakebots.ru
Простая интеграция сайта с Whatsapp, Viber и Telegram
Сейчас популярны мессенджеры. Пользователи активно в них общаются, шлют друг другу смешные стикеры, кидают войсы и созваниваются, не тратя деньги на мобильную связь.
А для компаний, популярность мессенджеров изменила сам формат общения с клиентами. Многие пользователи уже не хотят звонить и общаться голосом, им удобнее написать в любимый мессенджер и получить консультацию в чате с менеджером.
При разработке сайтов в студии мы сразу ставим на них иконки мессенджеров для мобильной версии. Пользователь заходит на сайт со смартфона, бодро кликает по кнопке WhatsApp и переходит в чат с консультантом компании.
Как установить мессенджеры на сайт
Для того чтобы пользователь по клику на иконку мессенджера (Ватсапа, Вайбера или Телеграмма) сразу переходил в чат с менеджером, нужно установить на сайт специальные ссылки. И разместить иконки.
Ссылка на Whatsapp на сайте:
Ссылка на Telegram на сайте:
Ссылка на Viber на сайте:
Эти ссылки нужно установить в html-код сайта. Обычно в шапку или под ней. Рядом с номером телефона.
И заменить выделенные красным номера на мобильный телефон менеджера. На его телефоне, разумеется, должны быть установлены все три приложения.
Для Телеграмма, вместо номера, нужно указать логин. Задать его можно в настройках приложения.
Заходим в Setting, и в пункте username указываем логин.
Продвигаем сайты с гарантией
Растим продажи, позиции и посещаемость
Где найти значки
Также вам понадобятся иконки мессенджеров.
Их можно скачать ниже
Иконки нужно загрузить на сайт и указать путь к ним (в коде выше путь выделен зеленым).
Как получить ещё больше обращений с сайта
Использовать необычный вариант почты. В нашем Телеграм-канале мы рассказывали, как эту почту можно назвать, чтобы увеличить конверсию в письмо. Почитайте, это интересно.
Еще один вариант — установить на сайт чат с онлайн-консультантом.