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

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

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

Создание иконки для iPhone

Привет, дорогие!
После долгого молчания хочу представить вам мой первый перевод — замечательную статью о рисовании иконок для iPhone. Её автор, Andrea Austoni — талантливый итальянский дизайнер, живущий и работающий в Кракове, Польша. Кстати, он же автор всех иконок в статье:)
Обязательно загляните на его сайт, cutelittlefactory.com – там можно почерпнуть очень много полезного и интересного:)
Thank you, Andrea!
За сим всё, слово автору:)

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

Финальные иконки
Чтобы проиллюстрировать процесс рисования, я создал иконку для вымышленного iPhone-приложения “Kitchen Range”. Это поисковая система для рецептов с поддержкой некоторых социальных возможностей: вы можете включить список компонентов в список покупок, публиковать фото вашего блюда и предлагать изменения в процессе приготовления.

Иконка представляет собой типичную газовую плиту, которая отлично подходит как графическая метафора, плюс хорошо вписывается в квадрат с закруглёнными краями.

Финальные иконки

Если вам интересно знать, как она создавалась, я написал об этом урок.

По поводу авторства:
Насколько мне известно, приложения “Kitchen Range” не существует. Я взял этот концепт как фиктивное приложение в качестве примера. Если вы считаете, что я украл существующую идею — пожалуйста, дайте мне знать об этом; если же вы занимаетесь разработкой подобных приложений и хотите воплотить эту идею в жизнь — свяжитесь со мной и мы обсудим это.

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

Вообще, говоря об иконке, мы подразумеваем небольшую иллюстрацию того, что представляет собой объект, программа, действие и т.п.
Иконки были одним из важнейших элементов операционной системы с 1984 года, когда на рынке появился Macintosh, первый коммерческий компьютер, управляемый посредством графического интерфейса.
Сейчас ОС-и имеют обширные наборы иконок, которые представляют все виды элементов: файлов, типов файлов, папок, общих действий…
Эти иконки обычно используют узнаваемые графические метафоры, чтобы их значение было сразу ясно.

В программах также применяется ряд иконок, символизирующих типичные действия вроде открытия, сохранения, создания нового документа и т.п. Они схожи с OS-иконками, и поэтому очень часто совпадают.
Это объясняется тем, что пользователи уже привыкли именно к таким изображениям, поэтому авторы программ стараются придерживаться ставших стандартами образов для удобства пользовательской навигации.

В случае с программным обеспечением, иконка исполняет роль ярлыка на рабочем столе, обеспечивая быстрый способ запуска программы. Обычно на нём изображён логотип программы.
Программы и приложения (особенно коммерческие), не менее чем компании нуждаются в лого, который поможет им выделиться на конкурентном рынке.
Логотип является важнейшим элементом визуальной индетификации, и все принципы дизайна логотипов, применяемые к компаниям, справедливы и в отношении программ.
Главная иконка приложения должна быть и полноценным лого.
В данный момент у нас есть три базовых типа софта, нуждающихся в лого: программы для ОС, web-приложения и приложения для телефонов. Им логотипы просто необходимы, дабы выделяться на фоне всё растущей толпы конкурентов.
И особенно такие лого нужны мобильным приложениям, которые представлены в списках магазинов и вовсе только ими. Повторяю, т.к. это важно:
Единственное, что видят потенциальные покупатели вашего приложения — это логотип.

Взгляните на представленный ниже скриншот App Store.

App Store

Как вы думаете, имеет ли смысл вкладывать деньги в профессионально разработанный логотип? Или можно сэкономить на этом?

Когда разработчик заказывает дизайнеру иконку для приложения, на самом деле он/она нуждается в логотипе. Икона является лишь компьютерным файлом, содержащим в себе логотип, будь то 72х 72 пикселей (Android, iPad) или 57х57 пикселей (iPhone) PNG.

Скетч
Предположим, что мы уже выполнили домашнее задание (обмен информацией с клиентом, мозговой штурм, поиск референсов), и выбрали графическую метафору: газовую плиту.
В дальнейшей разработке вы должны сделать иконку привлекательной и понятной с первого взгляда.

Тут уместно вспомнить шутку большого остряка Bill Hicks:
Дизайн иконки схож со съёмкой порно-фильма: главное — не стесняться!
Давайте же потратим некоторое время на эскиз, пока не найдем жизнеспособного образа.

Первый эскиз иконки

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

Иконка для iTunes
Когда вы листаете ваши приложения в iTunes с помощью Cover Flow, иконки отображаются в очень больших размерах, вплоть до 512 пикселей. Вот почему каждое iPhone/iPod Touch/iPad приложение поставляется с версией лого в 512х512px.

Вот скриншот установленных мною приложений, просматриваемых в Cover Flow (по клику — большой размер).

Иконки приложений в Cover Flow

Эта иконка должна быть богаче и подробнее, чем основная, поэтому дизайнеры всегда начинают работу именно с этого размера.
Вот так выглядит ITunes-иконка для “Kitchen Range”.

Иконки приложений в Cover Flow

Иконка приложения.
Главная иконка приложения должна быть выполнена в PNG 57х57px. Она располагается на стартовом экране вашего айфона и запускает приложение. Закруглённые края, объём и блики добавляются в iPhone автоматически (и думаю, объём и блики можно отключать).

Итак, уже создана иконка 512х512 и теперь мы должны её уменьшить. Это очень важный момент в дизайне иконки. Можно даже сказать, что иконка хороша настолько, насколько хорош её 57-пискельный вариант.
В нашем случае меньший размер имеет второстепенное значение и мы займёмся им в следующем параграфе.

После уменьшения иконки до 57х57 пикселей результат, скорее всего, получится грязным. Это происходит потому, что Photoshop уменьшает пропорционально, и многие элементы в конечном итоге выходят размытыми.

Иконка приложения

Так что после уменьшения дизайнеру необходимо ещё довести иконку вручную, в частности править каждый шейп по сетке и контролировать, что его края не выходили за пиксели. Это — единственный способ избежать сглаживания и грязи.
Многие элементы на маленьком размере станут нечитаемыми, так что нужно будет их изменить, перерисовать или вовсе убрать во избежание визуального шума.
Стили и эффекты слоя также должны быть подкорректированы под меньший размер.
Опять-таки, это всё должно быть сделано дизайнером, а не программой.
Сравните автоматически уменьшенную иконку с иконкой, правленой вручную:

Автоматически уменьшенная и уменьшенная вручную

Хотя Photoshop сделал отличную работу в сохранении пропорций, дизайнеру удалось спасти больше информации из оригинального дизайна, сохранив иконку объёмной.
Интересно отметить, что когда левой пиктограмме добавили резкости после ресайза, это позитивно сказалось на её четкости и разборчивости. Когда же сделали резче правую иконку, в ней мало что изменилось — признак того, что дизайнер отлично поработал.

Маленькая иконка
Когда пользователь осуществляет Spotlight-поиск, iPhone отображает маленькую иконку рядом с каждым результатом. Поэтому дизайнер также должен подготовить иконку приложения и в размере 29х29px.

Автоматическое уменьшение иконки из размера в 57х57 дает такой результат:

29х29px

Мы можем улучшить её с помощью ручной оптимизации шейпов и устранения тех элементов, которые не читаются в этом размере.

29х29px

Думаю, очевидно, что вторая иконка гораздо чище и четче, а следовательно — и более читабельна.
Я полагаю, что некоторые разработчики опускают последнюю оптимизацию, чтобы сэкономить деньги. Мне понятны их мотивы, но я не советую использовать графику, просто прошедшую через автоматические фильтры. Итальянцы Люди делают это лучше;)

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

Каждая игра или приложение для айфона должно поставляться с загрузочной картинкой. В гайдлайне Apple ясно указано, что это — не главная страница, и не должна использоваться для демонстрации ваших художественных навыков. Наоборот, изображение загрузки должно быть максимально небольшим по весу, дабы обеспечить максимальную скорость загрузки.

Быстрый способ сделать такое изображение — это продублировать интерфейс приложения, убрав из него все динамичные объекты (иконки, текст и т.п.). Создайте размером 320х480 px в горизонтальном положении холста и убедитесь, что полученный PNG весит максимально мало (можете использовать Smush.it для его сжатия).
Я не работал над дизайном интерфейса и загрузочной картинки для Kitchen Range.

Конечный результат
На выходе заказчик должен получить от дизайнера следующий набор графики:
* Иконка для iTunes 512х512 (iTunesArtwork.png)
* Иконка приложения 57х57 (Icon.png)
* Маленькая иконка 29х29 (Icon-Small.png)
* Загрузочная картинка 320х480 (Default.png)

Заключение
Думаю, я смог доказать, что дизайн иконок для операционной системы iPhone — довольно трудоёмкая работа.
На каждом этапе работы, концепции уникального и привлекательного лого до создания идеальных иконок, вручную оптимизированных для каждого размера, дизайнер иконок сталкивается с довольно сложно работой.
Обычные для каждого дизайнера знания визуального представления, композиции и колористики должны сопровождаться хорошим знанием программы.
Впрочем, это заявление справедливо для любых иконок.

Это небольшое руководство предназначено как для дизайнеров, так и для разработчиков. Также, помимо обсуждения гайдлайна Apple, я создал логотип и иконки для фиктивного приложения (Kitchen Range), дабы показать свой подход к работе над ними.
В следующий раз, когда вам будет нужна для вашего приложения — взгляните на эту статью: вы будете знать, чего ожидать от дизайнера, и будете готовы к успешному сотрудничеству.
Удачи, и если вы готовы обсудить со мной работу, напишите мне!;-)

———————
Оригинал статьи, Designing iPhone Icons

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

  1. Cheerful:

    О, читаю)
    Операционная система iPhone, а не оперативная)
    еще не дочитал

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

    Чёрт, совсем уработалась:) Спасибо, поправила:)

    Ответить
  3. Cheerful:

    Отличный перевод, Ань) Молодец)

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

    Спасибо, Миш:) Она мне столько крови попорила, и я рада, что всё-таки смогла её довести:)

    Ответить
  5. Anonymous:

    Спасибо за перевод :)
    И таки "почерпнуть" (:

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

    Вот засада, точно О_о
    Всю жизнь верила, что с "д" писать нужно…
    Спасибо!:)

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

    Кстати если не знаешь есть такой сайт http://www.quirco.com/iPhoneIcon/ там можно посмотреть как будет выглядеть иконка на айфоне с наложенным бликом :)

    На этой неделе делал пару иконок для андройда, всю голову сломал об их гайдлайн пока пытался перевести, гугл-переводчик такую фигню показывал :)

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

    О, вот за ссылочку большое спасибо, очень полезная вещь.

    А по поводу Андроида — разобрался хоть в итоге?
    А то я как-то ради любопытства хотела погуглить тонкости производства иконок для него, но уже на 15-то минуте сдалась.
    Было бы здорово прочесть мануал по ним, написанный человеческим языком;)

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

    Только про размеры тень и градиенты, про стиль иконок так и не понял, то ли их надо делать простыми, то ли не обязательно, но заказчик принял и то хорошо :)

    Вот ссылка, причем это на андройд 2.0, для 1 версии там совершенно другой стиль был
    http://developer.android.com/guide/practices/ui_guidelines/icon_design.html

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

    Спасибо, по крайней мере, будет от чего отталкиваться:)

    Ответить
  11. Anonymous:

    Спасибо за статью!
    Полноценный ответ на мои вопросы =)

    с ув. Ольга

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

    Лёгкой работы, Ольга:)

    Ответить
  13. Артур:

    А можно использовать Иллюстратор для рисования иконок для iPhone или ток Фотошоп ???

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

    Артур, как кому удобнее:)

    Ответить
  15. Anonymous:

    Используйте сайт http://www.quirco.com/iPhoneIcon/ — быстро и удобно

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

    Спасибо:)

    Ответить
  17. kirill-kazachek:

    Нужно почаще сюда наведыватся! Такие интерестности пропускаю)))

    Ответить
  18. ivan:

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

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

      Ой, а можете поподробнее объяснить, что происходит? Иконка на девайсе находится уже с приложением? когда тестуируете через testico.net, ситуация та же?

      Мне друзья когда -то мельком упоминали, что похожий глюк с иконкой смогли исправить, поудаляв по одному пикселю в каждом уголке иконки и сохранив ее как png с альфа-каналом. Не знаю, насколько это подойдет в Вашей ситуации. но попробовать можно.

      Ответить
  19. Вероника:

    О, большое спасибо, отличный перевод отличной статьи! Очень кстати нашла вас!))

    Ответить

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