Design System v4 · Avatars

env: demo · UI Kit v0.3.6

Аватары, картинки, статус-точки, avatar-mark и stacked avatars.

League avatar sizes

Число обозначает точный размер фотографии внутри рамки: 40 значит 40×40 px, 80 — 80×80 px.

40 Дерево Бронза Серебро Золото Элита
50 Дерево Бронза Серебро Золото Элита
60 Дерево Бронза Серебро Золото Элита
80 Дерево Бронза Серебро Золото Элита
100 Дерево Бронза Серебро Золото Элита

Квадратные рамки профиля

Скруглённая квадратная рамка используется на профиле и в popover статистики. Для Дерева показан утверждённый вариант V4; для остальных лиг — его облегчённое продолжение.

Дерево Дерево
Бронза Бронза
Серебро Серебро
Золото Золото
Элита Элита

League frame variants · V2–V6

Пять конструкций на единой геометрии: сдержанная V2, V3 только с эмблемой, премиальные V4 и V5, а также V6 с вдвое более тонким ободом.

V2
Дерево Дерево
Бронза Бронза
Серебро Серебро
Золото Золото
Элита Элита
V3
Дерево Дерево
Бронза Бронза
Серебро Серебро
Золото Золото
Элита Элита
V4
Дерево Дерево
Бронза Бронза
Серебро Серебро
Золото Золото
Элита Элита
V5
Дерево Дерево
Бронза Бронза
Серебро Серебро
Золото Золото
Элита Элита
V6
Дерево Дерево
Бронза Бронза
Серебро Серебро
Золото Золото
Элита Элита

Коллекции рамок всех лиг · V6

Пять самостоятельных немультяшных стилей и чеканка с отдельным логотипом лиги для каждой лиги на точной геометрии V6, без свечения.

Дерево
Дерево · Ар-деко Ар-деко
Дерево · Ботаническая Ботаническая
Дерево · Плетёная Плетёная
Дерево · Минималистичная Минималистичная
Дерево · Геральдическая чеканка Геральдическая чеканка
Дерево · Чеканка + логотип лиги Чеканка + логотип лиги
Бронза
Бронза · Ар-деко Ар-деко
Бронза · Ботаническая Ботаническая
Бронза · Плетёная Плетёная
Бронза · Минималистичная Минималистичная
Бронза · Геральдическая чеканка Геральдическая чеканка
Бронза · Чеканка + логотип лиги Чеканка + логотип лиги
Серебро
Серебро · Ар-деко Ар-деко
Серебро · Ботаническая Ботаническая
Серебро · Плетёная Плетёная
Серебро · Минималистичная Минималистичная
Серебро · Геральдическая чеканка Геральдическая чеканка
Серебро · Чеканка + логотип лиги Чеканка + логотип лиги
Золото
Золото · Ар-деко Ар-деко
Золото · Ботаническая Ботаническая
Золото · Плетёная Плетёная
Золото · Минималистичная Минималистичная
Золото · Геральдическая чеканка Геральдическая чеканка
Золото · Чеканка + логотип лиги Чеканка + логотип лиги
Элита
Элита · Ар-деко Ар-деко
Элита · Ботаническая Ботаническая
Элита · Плетёная Плетёная
Элита · Минималистичная Минималистичная
Элита · Геральдическая чеканка Геральдическая чеканка
Элита · Чеканка + логотип лиги Чеканка + логотип лиги
Элита · Минималистичная-2 Минималистичная-2

League effect modes

Gold animated Gold animated
Gold static Gold static
Gold none Gold none
Elite animated Elite animated
Elite static Elite static
Elite none Elite none

Grand Club champion

Временная чемпионская рамка копирует геометрию Elite. Лавровый эффект предназначен для чествования победителя на главной в течение 48 часов.

Champion animated Champion static Champion frame only
Ваш билет-приглашение Билет проверен — вход разрешён
Баланс доступа

Мои турнирные билеты

  • ×1 Grand Club Championshipдо 31 августа

Sizes

XS xs
SM sm
MD md
LG lg
XL xl

Images + states

Индикатор присутствия ставит компонент PresenceDot (`.yc-avatar-dot`): зелёная точка — онлайн, приглушённый серый квадрат — офлайн, фиолетовый треугольник — игрок за столом. Состояния различаются формой, а не только цветом. Работает в любой relative-обёртке аватарки, включая рамку лиги.

Online Offline PL VI

League avatar + presence

Как на главной («Турнирные соперники») и в турнирной таблице: рамка лиги плюс индикатор присутствия.

Онлайн Онлайн
Играет Играет
Офлайн Офлайн

Avatar marks

VI VIP VIP GO Gold Gold BE Best rating Best rating TO Tournament gold Tournament gold TO Tournament silver Tournament silver TO Tournament bronze Tournament bronze BA Battle winner Battle winner PL Player week Player week CH Champion month Champion month CH Champion week Champion week TE Team winner Team winner

Player rows

Мария П. Мария П. VIP · online 1 624
Олег Т. Олег Т. playing 2 310
ДМ Дмитрий В. thinking 980

Avatar Group

Стек аватаров с overflow «+N». Для участников турнира, команды.

max=3 max=4 max=5 все
xs Анна Борис СЕ +3 Анна Борис СЕ МА +2 Анна Борис СЕ МА ПА +1 Анна Борис СЕ МА ПА ИР
sm Анна Борис СЕ +3 Анна Борис СЕ МА +2 Анна Борис СЕ МА ПА +1 Анна Борис СЕ МА ПА ИР
md Анна Борис СЕ +3 Анна Борис СЕ МА +2 Анна Борис СЕ МА ПА +1 Анна Борис СЕ МА ПА ИР
lg Анна Борис СЕ +3 Анна Борис СЕ МА +2 Анна Борис СЕ МА ПА +1 Анна Борис СЕ МА ПА ИР

AI avatar studio

Блок генерации аватара нейросетью со страницы /user/photo: стиль кликом по образцу, палитра-«добавка», обязательный текст до 400 символов. Здесь показан сокращённый набор стилей и палитр.

Аватар с помощью ИИ

Новое

Выберите стиль, добавьте палитру и опишите, что нарисовать. Варианты хранятся 30 дней — применить можно любой.

Доступно сегодня: 1 из 1.
1. Выберите стиль
2. Добавьте цветовую палитру
Текст уходит нейросети как пожелание. 0/400
Примеры — нажмите, чтобы подставить:

Пишите простыми словами: кто или что на картинке, во что одет, какое настроение. Чем понятнее описание, тем ближе результат. Здесь же можно задать свой стиль и цвета — например «в стиле старой открытки, тёплые бежевые тона»: нейросеть прочитает это и учтёт вместе с выбранными выше.

Страницу можно закрыть: как только картинка будет готова, вы получите всплывающее уведомление со ссылкой на неё.

Аватар виден всем игрокам. Непристойные и оскорбительные просьбы нейросеть не рисует — вместо них получится нейтральная картинка.