Пользователь
0,0
рейтинг
19 декабря 2012 в 19:46

Разное → Генератор аватарок в стиле пиксель-арт, более 40 миллионов изображений

Привет, жители и гости хабра.
Хочу поделиться с вами одним интересным инструментом. Наша команда разрабатывала его в ходе проекта, о котором я еще расскажу. Пиксельный человек на КДПВ — результат его работы.

Мы не поленились посидеть с калькулятором и подсчитали приблизительное количество возможных изображений. Получили число чуть более сорока миллионов. Поэтому каждый может подобрать что-то на свой вкус. Картинок хватит на всех!

Итак, встречайте, 8biticon.com. Бесплатный, открытый и простой в использовании генератор аватарок.

Под катом история, описание и немного технической информации.


Немного истории


Чаще всего при регистрации на сайте, особенно если это не социальная сеть, возникает ситуация, когда у многих пользователей вместо картинок профиля устанавливаются такие изображения-заглушки:



Думаю все согласятся, что это не очень удобно, и визуально найти нужного человека в списке и узнать становится намного сложнее. Такая задача стояла и раньше, и разные проекты ее решали по-своему. Самый близкий для нас и популярный был, конечно stackoverflow.com. В их случае при регистрации выдается случайно сгенерированная картинка. Например, такая:



Это несколько упрощает задачу визуальной идентификации, однако не сильно. Было решено идти в этом направлении. Но все же создавать что-то более человекообразное. Перепробовав с десяток вариантов мы пришли к генерации аваторк с восьмибитными лицами.

Что же из этого вышло?


Принцип работы довольно прост:



Заранее подготовленные изображения-паттерны в случайном или нужном порядке накладываются друг на друга, после чего серверный скрипт их склеивает, и на выходе имеем заветный юзерпик. Картинку можно скачивать, можно устанавливать как аватар, если скрипт встроен в сайт.

На сайте 8biticon мы развернули приложение из собственных исходников, которые опубликованы на github, и добавили возможность быстрой установки аватарки в социалках. Для начала выбрали самые популярные в наших широтах vk.com и Facebook.

На данный момент серверная часть реализована как django-app, так что тем, кто пользуется этим фреймворком не составит труда встроить 8biticon в готовый или новый проект.

А пример использования конструктора в дикой природе можно посмотреть на сайте, ради которого все и затевалось: studyjam.net

Какие планы на будущее?


В планах развития, помимо рисования новых паттернов, создание полноценного open-source проекта с поддержкой различных серверных платформ. Ну и, скорее всего, добавить таких модных в наши дни свистелок как фотофильтры :-)

Этот ресурс был сделан just for fun. Поэтому, всех, кто желает сделать мир чуточку веселей и удобней, мы приглашаем принять в нем участие. Программистов, дизайнеров и просто тех, у кого есть желание.
А еще всегда приятно увидеть любые ваши предложения и замечания.

UPD. Сайт снова функционирует, приносим извинения за технические неполадки.
Матвей Дядьков @matveyco
карма
56,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разное

Комментарии (135)

  • НЛО прилетело и опубликовало эту надпись здесь
    • +2
      Вот почему-то я себе тоже сгенерировал именно афро-еврея…
      • +1
        А а конструкторе вообще раввина можно сделать )
      • +5
        … я уже пожалел, что прочитал первый комментарий: в голову ничего, кроме афро-еврея теперь не приходит…
        • +4
          … ооо, афро-еврейка!

          Блин.
          • +3
            Теперь мне сложно различать своих друзей на фейсе, сегодня утром я заметил у себя в друзьях трех афро-евреев.
        • 0
          Можно покликать на «Generate random image»
  • +8
    Сайт уже не открывается )
    • 0
      Да, быстро загрузило VPS, пробуем расширить.
      • +4
        Ох уж этот хабраэффект :) Скачал исходники с гитхаба — зачётный генератор! респект!
      • +1
        Сайт не работает сейчас?
    • –5
      а если бы в облаке хостили…
      • +32
        … уже б давно разорились? ;)
        • +1
          Смотря как считать: за хостинг заплатили бы больше, но зато выдержали бы хабраэффект. Если проект монетизируется за счёт количества посетителей, то выгода очевидна.
          • +1
            Проект не монетизируется. И после некоторых манипуляций вроде работает.
            • +2
              ОК. Вообще приложение понравилось. Было бы классно, если бы можно было загружать свои «кусочки пазла» :)

              Спасибо за исходники!
  • +2
    Не открывается.
    • +1
      Скоро откроется, апдейтится новая конфигурация. Будем надеяться это поможет :-)
  • +1
    быстро хабраэффект пришел :(
    • +1
      Целых два сайта. А что, вечер же
  • +20
    Автор, генерируйте теперь руками аватарку каждому отписавшемуся в посте.
    • +7
      Только не афро-евреев…
  • 0
    Хабраэффект, однако :)
  • +5
    Отличная идея! Все уже давно устали от автоматически сгенерированных картинок граватара или подобных. А это реалтное запоминающееся лицо!
  • +3
    Есть такой ресурс Gravatar. gravatar.com его часто хватает
    • +2
      Ага, именно он и используется на stackoverflow.com. Причём, там можно выбирать, или генерятся такие мозайки, или жуки или тоже пиксельарт. Вот тут есть подробнее ru.gravatar.com/site/implement/images/
    • +2
      Было б здорово, если б этот генератор тоже туда в качестве альтернативы встроили. Его, вроде бы, открытые хорошие ребята держат, можно связаться…
  • +18
    Было бы еще круче, если элементы аватарок выбирались не рандомом, а на основе анализа фотографии.
    • +11
      Тоже зашел в надежде прочитать про именно такой принцип. Но для начала и такой функционал радует (:
      • +2
        Об этом тоже думали, но это на перспективу.
        • +1
          Будем ждать. Удачи в развитии!
          • +1
            А если не нравится ждать, то приглашаем помочь в развитии ;-)
            • 0
              Боюсь что мое ци еще слишком слабо, чтобы кому то помогать)
  • +1
    Ну вот и готова тема для следующего поста: хабраэффект, как его пережить :)
    • +1
      Да уж, не расчитали маленько :) Но теперь будем знать!
      Вроде подняли пока.
  • НЛО прилетело и опубликовало эту надпись здесь
    • +3
      Спасибо, вообще в планах добавить выбор произвольного цвета всему.
      • +1
        Можно посоучаствовать, например, в расширении клипарта?
        • +2
          Конечно, без проблем! Пишите в ЛС или на почту.
          • +1
            Эммм, борода есть… а где позвольте спросить лысина? Вроде сама собой транспарентная напрашивается.
            Я не настолько лохмат :)

            • +2
              А вот и она

              image
              • +2
                Это не лысина — это плешь: Р
            • 0
              Да-да, добавьте, пожалуйста, лысину! Извините, ошибся, см. ниже.
          • 0
            Да-да, добавьте, пожалуйста, лысину!
  • +3
    Хорошая штука! Поднимайтесь быстрей, а то часть картинок грузится, а часть нет.
  • +3
    Хорошо бы приспособить, чтобы для MineCraft использовать!
  • +2
    Жаль что фонов лиц всего 4, хорошо было бы расширить, альтернативные формы добавить.
  • +12
    API, API, API!!!
    • +17
      Будьте здоровы!
  • +1
    Не забудьте переключить на генерацию девушек, они очень милые получаются =)
  • +3
    Пробился на сайт, наконец. Очень круто!
  • +2
    Клево. Забавнее нажимать на кнопку «Generate random image», чем придумывать свое.
    • +8
      Во, до кучи. Просто 16 раз нажал «генерировать случайную картинку», и каждый раз клевая штуковина получается:

      • +6
        Внизу второй справа — афроеврей, как и было сказано.
        • +9
          а внизу первый справа очень похож)
      • +1
        Прослеживатется тенденция смотреть вправо. Причем не только на этих 16-ти. =)
        • +1
          дык аватарка слева от текста в форуме, резонно на свой текст смотреть ;)
  • +2
    Чем то даже похож ))
    • +1
      Универсальный портрет среднестатистического хабрапользователя.
      • НЛО прилетело и опубликовало эту надпись здесь
  • +10
    Предвидится вал измененных аватарок вКонтакте)
    • +3
      Эволюция от цветных квадратов к 8-битным аватаркам. Прогресс!
    • +2
      И на хабре тоже =)
      • +2
        уже
        Спойлер

  • +2
    Волос длинных нет.
  • +2
    А эспаньолки, то, нету!
  • +1
    Неправильно работает, я выбрал изображение а он для авотарки в вк мне совсем другое дает
  • +1
    Забавно )
    Почему бы в ручном режиме не сделать возможной комбинацию мужских и женских черт?
  • +2
    Класс! Спасибо.
  • +3
    Очень забавно. Особенно девушки харизматичные получаются) Много раз генерировал — у каждой свой характер, причем очень четко выраженный. А еще порадовапи пейсы)
  • +3
    У исходников на github укажите, пожалуйста, лицензию. А то непонятно, можно ли их использовать в своих проектах и на каких условиях.
    • +1
      Использовать можете как вам нравится. А если оставите где-то ссылочку на первоисточник — будет вообще отлично :-)
      • +1
        А картинки тоже можно использовать?
      • +4
        Ссылочку оставить не вопрос. Но, вы, все же, укажите какую-нибудь свободную лицензию. Вот, только недавно, такой вопрос обсуждался www.opennet.ru/opennews/art.shtml?num=35480

        исследование, согласно которому половина проектов на GitHub опубликованы без явного указания лицензии. Если проект опубликован без лицензии, то по умолчанию все права на код остаются собственностью автора (All rights reserved). Попытка интеграции подобного кода в сторонние проекты может негативно отразиться на их лицензионной чистоте и в последствии привести к возможным юридическим претензиям.
      • +2
        WTFPL? :)
  • +5
    Классно, поставлю эти аватарки всем контактам в телефоне.
    • +2
      спасибо за идею! сейчас пороюсь в api гугла, автоматизировать бы это все, а то вручную 800 контактов…
      • +5
        ждём линку %)
  • +1
    А на мне что-то сбойнуло…
  • +1
    Посмотрел на КДПВ, думал Кукуц пост написал.
  • +2
    почему бы не увеличить пикселизацию, так сказать? Было бы прикольней, если было бы четче) На маленькой аве нормально, но если аватарка 50х50, то уже не айс.

    А идея зачетная, есть ли возможность подключения к сайту?
    • +2
      Конечно есть. Об этом в статье написано. И исходники выложены. Только сейчас это все работает для django/python. Если добрые люди помогут переписать это на PHP/Ruby — можно будет пользоваться практически всем.
      Просто у самих пока руки до этого не доходят.
  • –1
    Казалось бы, но причём тут 8 бит? Что-то сомнительно, чте результирующая картинка влезет в 256-цветную палитру.
    • +1
      • +2
        Понятие «пиксел арт» совершенно ортогонально понятию «8-битности».
        В той статье слова даже такого нету.
        • 0
          А вы заголовок статьи прочитали? )
          • +1
            Я ещё и название домена сайта прочитал.
        • +2
          Адекватных доменов со словом пиксель довольно мало. Поэтому пришлось искать синонимы.
          А на сайте большими буквами написано «Pixel art icon constructor». 8biticon — имя собственное.
  • +1
    А откуда 40 миллионов изображений?
    У вас в базе находится следующее количество изображений:
    Background: 20
    Face: 4
    Clothes: 52
    Mouth: 11
    Hair: 18
    Eyes: 16
    Итого — 13 178 880 вариантов сочетаний. Если же не считать фон, то уникальных лиц окажется всего 658,944.
    • +4
      Считалось с бэкграундами. И вы не посчитали женские паттерны.
      • +2
        Упс, mea culpa. Не заметил переключатель для девушек. Тогда действительно получается 43,472,640 вариантов. А без бекграундов — 2,173,632 уникальных лиц.

  • +6
    Есть ощущение, что вы как-то недооценили насколько охренительную штуку придумали. Я не большой специалист по монетизации, но показалось вдруг, что каким-то макаром это должно вас озолотить.
    • +1
      Ага. Реализовывали как доп. продукт, а получилось лучше имеющихся специализированных сервисов )
  • +3
    Молодцы! Ваш проект «вставил» покруче любого энергетика и я наконец проснулся — спасибо, ребят;)

    Сделал для себя
    .

    И для друга ;)
    .
    • –6
      Стало быть, у Вас есть друг афроеврей?
      • +2
        После 5-го раза шутка несколько приелась.
        И, к слову, они таки есть.
        • 0
          Есть и такие:
  • +1
    А, я понял. Это такой сервис фотороботов. А я-то думал, для чего его приспособить.
    • –9
      А я вот понял, что это сервис афроевреев.
  • +3
  • +1
    Очень круто, спасибо! =)
  • +4
    Элвис жив!

    image
    • +1
      Ray Orbison image
  • +2
    Два лишних пикселя и портрет стал похож, спасибо за сервис)
    image
  • +3
    Лежит сайт, все еще.:(
  • +4
    Следующий шаг — генерация таких аватарок по загруженной фотографии.
    • +2
      Почему-то я сначала подумал, что именно так сервис и работает, но теперь он похоже вообще никак не работает)
  • +1
    Поправьте опечатку в названии
    Генератор аватрок в стиле пиксель-арт, более 40 миллионов изображений
  • +2
    Было бы круто интегрироваться с gravatar'ом. Их генератор mosterid вроде бы тоже написан сторонним разработчиком.
    • 0
      Отличная идея для сервиса, даже не обязательно с граватаром интерироваться, просто сделать сервис с аналогичным апи, который по идентификатору (почте) выдавал бы один и тот же случайный аватар в нужном размере.
      • 0
        *тут должна быть картинка про новые стандарты*
        • 0
          Я бы на месте разработчиков просто повторил бы api gravatar'a, как раз чтобы на было как на картинке, о которой речь. Благо, там того api — формат одного запроса. Но, все же, это различные сервисы.
          • 0
            В связи с тем, что много предложений по поводу создания API, мы уже об этом думаем.
          • 0
            А мне как пользователю регистрироваться на ещё одном сервисе? Разве что API будет брать фотку с граватара, а если ее нет, то подставлять сгенеренную.
            • 0
              А вам, как пользователю, вообще ничего делать не нужно — берется либо ваша аватарка, если вы ее явно указали, либо случайно сгенерированная картинка из этого сервиса.
      • 0
        Так с гравтаром же главное, что пользователь все-таки может загрузить туда свой userpic, который будет использоваться. То есть для равноценной замены надо всю функциональность gravatar.com реализовать.
  • +2
    bitbuilder.nimblebit.com/
    тут пару идей есть, может будет полезным :)
  • 0
    А почему сайт весь на английском?
    • 0
      Скорее всего потому что так круг пользователей может быть шире. Исходники же есть, можно сделать свой на русском.
  • 0
    • 0
      Цветка не хватает :)
  • 0
    В одежде 2 одинаковых синих рубашки

    • НЛО прилетело и опубликовало эту надпись здесь
  • –1
    eightbit.me/ — нечто похожее :)
  • 0
    Напомнило игры от NimbleBit: Tiny Tower и Pocket Planes.
  • 0
    Добавьте усы Гитлера и трубку Сталина. Афро-еврей Гитлер — это было бы круто
  • 0
    Очень похожи аватарки на HomeworkFox.
    • 0
      Все верно. Там код из этой штуки работает:

      homeworkfox.com/static/8bit/js/8biticon.js
      • 0
        Все верно. Этот проект тоже разрабатывала наша команда, на нем иконки обкатывались.
  • 0
    Что-то на 8biticon.com/ все поломалось. Диз поехал полностью.
  • 0
    Классный генератор аватарок на Rock, Paper, Shotgun (пример статьи с комментами). Скроллить до комментов и искать странных монстриков, нарисованных как будто в пейнте.
    • +1
      Это gravatar.com о котором не раз вспоминали в комментах
      • 0
        Хм, и правда. Не знал, что у них есть генерилка помимо основного функционала, спасибо.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.