Я люблю иконки!

блог Кондратьевой Анны

Разработка сайта — htmlman

Testico — генератор превьюшек для иконки

Наверное, все в курсе такой обязательной процедуры, как демонстрация клиенту iOS иконки не просто на однотонном фоне, но и непосредственно на десктопе iPhone, вживленной в скриншот АppStore т.п.

Процедура это, конечно, важная: она помогает и дизайнеру, и непосредственно клиенту не увлекаться и не рисовать вместо работающей иконки небольшое произведение современного искусства — это часто бывает, когда иконку рисуют, показывают и оценивают исключительно на фоне с изящным градиентом.
Но боже, до чего же это утомительно! Даже если сразу рисовать иконку в 114×114 и в контексте десктопа, то все равно потом ее предстоит еще изменить ее размер и вживить еще в минимум два-три экрана.
Ну и умножаем это время минимум вдвое — ведь часто эту процедуру нужно проворачивать и для скетчей.

Хорошего инструмента, способного автоматизировать этот процесс, я не нашла.
И тогда мой великолепный муж решил написать специальный сервис, берущий на себя генерацию, сохранение и красивую демонстрацию всех необходимых скриншотов с загруженной иконкой.


Встречайте, testico.net — лучший сервис для генерации превью иконок:)

Почему лучший? Потому что при разработке учитывались самые «наболевшие» моменты из подобной работы. Тут нельзя указать цену вашего приложения (какое вообще это имеет отношение к иконке?), зато есть куча других плюшек, делающих жизнь иконщика на порядок проще:) О них — далее.

  • По сути, теперь вся работа по ресайзу сводится к тому, чтоб загрузить иконку на сайт и получить ссылку на страницу с примерами ее использования — три варианта фона от светлого к темному, три скриншота с iPhone (в том числе с AppStore), один с iPad, один — с iTunes.
  • Все полученные в процессе генерации скриншотов размеры иконок (512×512, 256×256, 144×144, 114×114, 72×72, 57×57) можно потом скачать одним архивом. Внимание: размеры БОЛЬШЕ загруженной иконки генерироваться не будут — только на уменьшение.
  • Также сервис позволяет выбирать, использовать на иконке стандартный эппсторовский блик или нет. Так что у вас будет отличная возможность увидеть, во что превратится ваша иконка, если вы забудете предупредить об этом блике клиента:)
  • Но больше всего я рада мобильной версии сайта. С айфона и айпада можно не только просмотреть иконку в режиме, максимально приближенному к реальным экранам (сервис самостоятельно определяет модель и подставляет нужные скриншоты), но и…
  • загрузить свою иконку прямо на домашний экран девайса АAAAааа!!!!!! Круто, правда круто? Эту идею нам подкинул потрясающий Кам и я до сих пор считаю этот момент одним из самых главных плюсов сервиса. Помимо всего прочего лично для меня это стало удобнейшим способом создать эдакое иконочное портфолио прямо на одном из экранов своего айпода:)
  • Быстро перейти на страницу с иконкой можно с помощью QR-кода, а для более ранних версий эппо-девайсов предусмотрен ручной ввод последних 7-и символов ссылки — ну и плюс, конечно, переход по ссылкам, которые можно получить после шаринга в фейсбук, твиттер, вКонтакте.

Загрузить на testico иконку с айфона/айпада нельзя, и будет нельзя до тех пор, пока фотошоп на этих гаджетах не станет привычным инструментом для иконщиков.

В тудушник мужа записано множество идей по совершенствованию и прокачке Testico, но пока он не прорабатывал весь задуманный функционал, руководствуясь той логикой, что лучше доводить testico до идеала, дав дизайнерам уже хоть какой-то инструмент для работы, а не заставляя их ждать.
Поэтому в этом своем релизе, testico пока не умеет обрезать загруженную картинку, поэтому для хорошего результата загружайте лучше иконку без фона.
А вот обрезка углов и наложение бликов в Testico уже сейчас реализованы настолько хорошо, насколько это вообще возможно в веб-сервисах.

В общем, пользуйтесь, тестируйте, экономьте свое время и делитесь впечатлениями с друзяшками в соцсетях (дада!). Если вдруг наткнетесь на какой-то баг, можно сообщить о нем тут в комментах или мужу на почту: x.stass@gmail.com

И да — огромное спасибо Кирочке и Байеру за их помощь в тестировании сервиса на их айфонах:)

24 комментариев

  1. Николай:

    Крышесносно! Я о таком только мечтать мог, а тут прям столько плюшек и все сразу!

    Спасибо большое, сильно упростили жизнь иконщика :)

    Ответить
  2. Николай:

    Забыл добавить пожелание :)

    Иногда клиенту очень придирчив, и хочет видеть как иконка будет смотреться везде где только можно. Так вот, я предлогаю добавить страницу приложения из iTunes — http://cl.ly/252X0n201r2p2d32000f

    Но это я так, малоли, а вдруг :)

    Спасибо большое еще раз!

    Ответить
    • Шама:

      Коль, да, это тоже в ближайших планах. Муж пока решил запускать сервис без всех запланированных экранов, чтоб посмотреть, насколько он вообще станет интересен иконщикам. Но эффект очевиден, так что скоро пойдут новые плюшки)

      Ответить
  3. Евгений:

    Наверное, имеет смысл добавить возможность менять название своего приложения. Тогда вообще песня будет!

    Ответить
    • Шама:

      Будет-будет:) И цена, и название, и выбор категорий…)

      Ответить
    • Василий:

      +1! Или хотя бы брать имя загружаемого файла)
      Сверхкрутой сервис! Спасибо мужу)

      Ответить
  4. Артём Сапегин:

    Пожалуй, это гораздо круче, чем http://touchin.ru/test-iphone-icon/ , которому мне довелось помогать с вёрсткой.

    Ответить
    • Шама:

      Да, этот сервис хорош, чтоб полностью протестить, влезет ли название аппа в допустимую ширину, и будет ли иконка контрастировать на фоне аппов-конкурентов, но иконщику проверить свою работу непосредственно на экране девайса иногда бывает куда важнее.

      Ответить
  5. Кам:

    Круто!

    Ответить
  6. Богдан:

    Просто замечательно! Недавно искал нечто подобное) Огромное спасибо!! Буду юзать с удовольствием))
    Раньше пользовался http://quirco.com/iPhoneIcon/ но там есть определенные провалы..

    Ответить
    • Шама:

      Спасибо, Богдан! Очень лестно знать, что мы не просто смогли удивить тех, кто о таком сервисе раньше и не слышал, но и тех, кто пользовался такими раньше)

      Ответить
    • Егор:

      http://quirco.com/iPhoneIcon/ — Вообще то там есть обратная связь с автором, который понимает русский и допиливает плюшки по желанию.

      Ответить
  7. sztu4ka:

    Спасибо вам и вашему мужу. Очень полезный сервис

    Ответить
    • Шама:

      Ну, тут только он благодарности заслужил. Я для Testico — такая же благодарная аудитория, как и все)

      Ответить
  8. Богдан:

    Простите если вопрос не в тему, но тоже связан с иконками, а именно с бликом который ставится системой автоматом при публикации. Кто, где, когда и кому должен указать, что на конкретной иконке блик не нужен? Это делает дизайнер или программист? Или менеджер который публикует приложение? Буду благодарен за разьяснение;)

    Ответить
    • Шама:

      Богдан, я сама это знаю со слов других, т.к. приложения в AppStore сама никогда не грузила, поэтому процитирую программста: «в Info.plist добавить опцию «Icon already includes gloss effects» и выставить ее в true».
      Так что это — работа программиста, не дизайнера.

      Ответить
      • Богдан:

        Спасибо большое за ответ :)

        Ответить
  9. Renderdoll:

    Замечательный и очень полезный сервис! Большое спасибо!
    p.s. хоть иконки и не создаю, но поиграться было очень интересно :))) буду рекомендовать своим знакомым 😉

    Ответить
  10. Шама:

    о, вот за рекомендации спасибо:)

    Ответить
  11. Олег из Израиля:

    спасибо, лучший генератор который когда либо видел

    Ответить
    • Шама:

      Олег, спасибо большое:)

      Ответить
  12. anton:

    доброго времени суток. А Вы не планируете изваять мужские варианты иконок для браузеров?

    Ответить
    • Шама:

      Здравствуйте, Антон. Планировала, но дальше этого юзера дело не пошло — все некогда, да некогда… Так и забила:)

      Ответить
      • anton:

        понятно. жалко, очень интересная тема.

        p.s.: за девчёнок спасибо

        Ответить

Добавить комментарий