Инструкция
Создайте несколько изображений различных разрешений для будущей пиктограммы. Используйте растровый графический редактор на свой выбор. Это может быть Photoshop, GIMP или Paint, входящий в дистрибутив Windows.
Разрешения изображений могут быть любыми. Однако имеет смысл создавать , имеющие стандартные разрешения пиктограмм в операционных системах. Так, мелкие значки обычно имеют размеры 16x16 пикселей, а крупные и большие - 32x32 и 48x48 соответственно. Также иногда используются пиктограммы разрешением 22x22 (для панелей инструментов), 64x64 и 128x128 (в качестве изображений диалогов, но весьма редко) пикселей.
При создании картинок для пиктограммы выделите области, которые должны быть прозрачными. Однородно залейте их любым, но одинаковым цветом, который более нигде на изображении не используется.
Сохраните созданные изображения в формате BMP. Воспользуйтесь соответствующей функцией графического редактора. Имена файлам изображений желательно давать согласно их разрешениям.
Создайте новую пиктограмму в IconPro. В главном меню приложения выберите пункты File и New Icon.
Добавьте несколько форматов изображений пиктограммы. В меню IconPro кликните по пунктам Edit и "Add Format...". В отобразившемся диалоге Add New Icon Format выберите разрешение растра пиктограммы и глубину его цвета. Добавьте форматы, соответствующие параметрам созданных на первом и втором шагах изображений.
Выберите один из форматов пиктограммы. Кликните по выпадающему списку, расположенному внизу окна документа. Выберите пункт, соответствующий формату.
Импортируйте изображение, соответствующее выбранному формату, из файла. В меню выберите пункты Edit и Import BMP. В отображенном диалоге перейдите в каталог, куда были сохранены изображения на втором шаге. Выделите нужный файл, нажмите кнопку «Открыть».
То есть, можно ли гарантировать, что при качественном отображении n- объекта, по ней кликнут?
Для того, чтобы решить эту задачу, мы решили посмотреть на иконки топовых iOS-игр на рынках США, Китая и Германии. Этот выбор мы сделали, исходя из следующих предпосылок:
Гроссинг
Иконка Candy Crush Saga от King — вряд ли идеал. Однако она выделяется не только в топе, но и в сторе: необычная окантовка (белое с фиолетовым), страшноватые конфеты на голубом фоне. К слову, этот же фон присутствует и в Pet Rescue Saga. Только в последнем случае King решили все-таки разместить на иконке изображение одного из игровых персонажей.
По поводу иконки Clash of Clans. Мы, возможно, путаем, но тренд на орущих на иконке мужчин запустила именно Supercell. В российской кассовом топе иногда ситуация доходила до того, что топ-5 целиком отходил играм с подобными иконками.
Иконка War of Hereoes — тоже не идеал. Она страшненькая, но зато рассчитана на строго определенную аудиторию, поклонников Marvel и героев этой вселенной.
Платный чарт
Найти общее в платных иконках здесь очень сложно. Каждая из них обращается к своей аудитории. На иконке Angry Birds Star Wars II Rovio посчитала нужным написать только "Звездные войны"; у Plague Inc. нарисовано два символа — биологического заражения и ДНК; у Minecraft — пикселизированная текстура; Heads Up! отображает то, как проходит игра, а на иконке NFL — игрок в американский футбол.
Бесплатный чарт
Тут тоже идет, если можно сказать, игра с символами. Уже глядя на иконки можно понять, про что игра. Исключение — Deer Hunter 2014, в которой надо не играть за оленя, а охотиться на него.
Гроссинг
У большинства представленных в китайском топе игр — потрясающий мультяшный арт. Имена игр приводить не буду (они все на китайском), но тут немного обратная американскому рынку ситуацию. Иконки, как правило, ничего не говорят пользователю (среди представленных выше — раннер, батлер, карточная игра и ММО). Зато тут есть серьезный акцент на лица, которые занимают большую часть экрана. Их задача — послать пользователю не информацию об игре, а настроение.
Платный чарт
Первое приложение (部落守卫战 ) — мобильная версия популярной в Китае MMO tower defence (да, похоже, такое бывает). Так что вполне понятно желание разработчиков разместить оригинальный логотип на иконке. В случае с приложением под номером четыре (狂斩三国 ) так поступили из-за говорящего названия — "Три порезанных" (спасибо, Google). Вполне хорошее имя для слешера.
Бесплатный чарт
В бесплатном чарте все понятно: есть приложения, чья иконка — символ, есть те, которые "про настроение".
Гроссинг
В четырех случаях из пяти тут представлены персонажи, которые транслируют определенное настроение.
Платный чарт
Даже если бы мы не писали, что за рынки мы рассматриваем, благодаря лидерству Construction Simulator 2014 в платном чарте можно было бы с легкостью догадаться: это Германия. Хотите подняться в немецком топе? Сделайте симулятор гражданской техники (комбайна, трактора, трамвая, строительного крана или чего-либо подобного).
Бесплатный чарт
Самый для нас большой секрет — первые две иконки. Нам они ничего не говорят. О чем игры, для кого — секрет за семью печатями. Зато трафика на них не жалеют.
Мы не откроем Америку, если скажем про иконки игр следующее: при их создании можно исходить из двух двух предпосылок.
1. Акцент на контент (если игра по птичек, рисуем птичек, если про гонки — рисуем машинки). Такой подход активно используется на западных рынках.
2. Акцент на настроение (мы же хотим нравиться пользователю, так почему бы не порадовать его улыбкой игрового персонажа или, если игра — хоррор, наоборот, не попробовать его напугать).
Также мы подготовили инфографику по тому, как различные издатели подходят к созданию иконок. Приятного просмотра.
Как нарисовать иконки так, чтобы они были чёткими? April 26th, 2011
Столкнулся я недавно с одной интересной задачкой. Мне потребовалось нарисовать простенькие, но красивые иконки-пиктограммы к одному приложению. С самим рисованием проблем не было, только вот когда я сжимал изображения до нужного размера, я вдруг заметил, что все линии стали какими-то расплывчатыми.
Как именно рисовать - это тема выходит за рамки данной статьи, мы с вами разберём лишь саму технику постобработки пиктограмм. Давайте сразу же для наглядности нарисуем простенькие фигурки. Будем рисовать их по-старинке, с помощью растра.
Итак, вот готовая картинка размером 114х114 пикселей.
Вроде выглядит неплохо, но давайте изменим размер на 48х48 пикселей.
Разница особо видна будет если поставить готовую иконку рядом с другими, нарисованными профессионалами. Как можно увеличить резкость? Если увеличим масштаб картинки, то мы увидим, что боковые линии немного размыты. Причина этого в том, что фотошоп - простая бездушная программа, которая изменяет размер картинки математически. Например, граница проходит между двумя пикселями. Мы изменяем размер в двое, Фотошоп делит размеры на два и ставит новую границу в аккурат на половине расстояния. Если это расстояние на два не делится, то граница попадает в межпиксельное пространство. Программа вычисляет "средние" тона и распределяет их между соседними пикселями. На картинке видно, что я имею ввиду:
Вот и ответ на поставленный вопрос: вся идея рисования чётких иконок заключяается в том, чтобы большинство линий проходили точно на границе пикселей . Но встаёт тогда другой вопрос: как лучше всего этого добиться? На это я приведу пару советов.
1) размер исходного изображения. В некоторых мануалах даются подробные инструкции по рисованию изображений. Например, для Андроида рекомендуют брать исходный холст размером 864х864 пикселя. Эта рекомендация исходит из того, что итоговая иконка должна быть 72х72, а это как раз ровно в 12 раз меньше, чем исходный холст. Таким образом, если рисовать изображение правильно, то после изменения размера, корректировки будут минимальными
2) рисуем только в Shape! Для этого выбираем фигурку и жмём эту кнопку:
и так получается Vector Mask. Если нужно сделать более сложную пиктограмму, то рисуем Path с помощью "ручки" (Pen Tool), выделяем получившуюся фигуру, делаем клик на правой мышке и выбираем Create Vector Mask
Нужно в итоге получить одну монолитную фигуру (Shape). Посему, если её нельзя выполнить за один подход, то нужно нарисовать несколько path-ов на одном слое , выделить их с помощью Path Selection Tool, которая выделяет всю фигуру целиком,
И объединить всё, выбрав правильный способ (видете 4 иконки слева от кнопки?) и нажав на кнопку Combine.
Если мы всё сделали правильно, то мы должны получить что-то вроде этого:
Почему именно Shape? А всё очень просто. Нам в любом случае нужно будет делать корректировку их размеров, а таким образом это сделать гораздо быстрее. Конечно можно использовать перевести в растр и сделать Ctrl + T (Transform), но в таком случае края вашей фигуры не будут ровными, так как при изменении пропорций фотошоп будет играть с крайними пикселями пропорционально. Как вы помните, вектор не зависит от размеров холста, его пропорции всегда будут одними и теми же.
3) используйте по максимуму только стили наложения (Layer Style). Это удобно тем, что вы можете двигать слой, а его эффекты будут двигаться вместе с ним (тени, градиенты, обрисовка...)
Итак, вернёмся к нашей иконке. Мы удалили всё и нарисовали квадратики и стрелки заново, используя Shape. Далее, мы сжали картинку до 48 пикселей. После чего мы сделали максимальный масштаб 3200%, чтобы был виден каждый пиксель, и вручную подгоняем все края, используютя этот инструмент:
С помощью этого инструмента мы выделяем нужные точки в path-e и двигаем их в нужную сторону, нажимая на "стрелочки" на клавиатуре, пока линия не сольётся с гранью между двумя соседними пикселями. Сравните изображения внизу, как было до корректировки, и стало после:
Встаёт резонный вопрос: а как же быть с круглыми частями? В данном случае, идеала достичь не удастся, но можно хотябы свести к минимуму появление отдельных пикселей. Например, окружность - это круглый path, образованный 4 точками. Так вот нужно хотя бы эти опорные точки разместить на границе пикселей так, что бы направляющие шли как раз по этой границе.
Ну теперь можно сравнить как было до и после в натуральную величину:
Если присмотреться, то разница видна. А если уж загрузить иконку на реальное устройство, то будет видно и подавно! Теперь понимаете, что работа дизайнера - это не так то уж и легко! Нужно не только придумать, но и выполнить работу качественно. Я лично уже запарился размеры подгонять под свои несколько десятков иконок.... Но результат стоит затраченных усилий!
Кстати, ещё хотелось бы добавить, что бывают случаи, когда приходится рисовать именно пикселями. То есть ставишь масштаб по максимуму, берёшь карандаш в 1 пиксель и рисуешь по-старнике. Такие иконки обычно более детализированы и имеют больше всяких мелочей. Но это уже для настоящих джедаев. В данной статье рассмотрены лишь относительно простые иконки-пиктограммы, которые используются в большинстве мобильных и вэб приложениях.
В этом уроке мы узнаем, как нарисовать красивую иконку телевизора в Adobe Photoshop.
Создайте новый документ (File > New) с показанными настройками
Залейте фон #FFFFFF цветом, а затем примените к нему следующие Эффекты слоя .
Используйте с радиусом 35px BODY , откройте Стили Слоя и примените следующие настройки.
Также добавьте Обводку с слою BODY со следующими настройками
Используйте инструмент Прямоугольник со скругленными углами (U) с радиусом 35px и создайте прямоугольник любого цвета. Назовите этот слой BODY_2 и после этого примените на этот слой следующие эффекты.
Также добавьте Обводку к слою BODY_2 со следующими настройками.
После этого добавьте Внутреннею тень к слою BODY_2 со следующими настройками.
Вы должны получить похожий результат.
BODY . Назовите этот слоя BASE . Используйте инструмент Прямоугольник со скругленными углами (U) с радиусом 35px
Для этого выберите слой BODY нажмите правой кнопкой мыши и выберите Скопировать стиль слоя и затем выберете слой Base нажмите на правую кнопку мыши и выберете Вставить стиль слоя .
После этого необходимо исправить толщину Обводки на 3px в слое BASE.
Вы должны получить похожий результат.
Создайте новый слой и поместите его под слой BODY . Назовите этот слой FOOT . Используйте инструмент Прямоугольник со скругленными углами (U) с радиусом 35px и затем примените к нему следующие эффекты слоя.
Примените также Внутреннюю тень к слою FOOT.
Вы должны получить похожий результат.
Теперь продублируйте слой FOOT
и поместите его как показано на рисунке.
Создайте новый слой, назовите его GLOSSY и поместите его поверх всех слоев, затем выберите инструмент Кисть (B) и большой кистью с мягкими краями поставьте одно белое пятно.
Затем поменяйте Режим наложения на Перекрытие с уменьшите Прозрачность на 50%
Создайте новый слой назовите его SCREEN и поместите поверх всех слоев.
Используйте инструмент Прямоугольник со скругленными углами (U) с радиусом 35px , чтобы создать прямоугольник. Затем скопируйте Стиль слоя BODY_2 и примените его к слою SCREEN . Теперь исправьте толщину обводки на 10px в слое SCREEN .
Вы должны получить похожий результат.
В этом шаге мы сделаем сам экран. Создайте новый слой SCREEN_2 . Поместите его поверх остальных слоев. Используйте инструмент Прямоугольник со скругленными углами (U) с радиусом 35px , чтобы создать прямоугольник. Затем примените Градиент в Стилях Слоя со следующими настройками.
Затем примените Внутреннюю тень к слою SCREEN_2 .
Затем примените Внутреннее свечение к слою SCREEN_2 .
Затем Тень к слою SCREEN_2 .
Вы должны получить похожий результат.
Создаем новый слой и называем его SCREEN GLOSSY и помещаем его поверх остальных. Затем выбираем инструмент Перо (P) и рисуем контур как показано на рисунке. И заливаем его белым цветом #FFFFFF . Затем уменьшаем прозрачность до 20%
Создаем новый слой, называем его LIGHT DOT и помещаем поверх остальных слоем. После этого выбираем инструмент Кисть (B) и большим размером кисти, с мягкими краями ставим по центру экрана одно большое белое пятно.
В этом шаге вы сделаем кнопки. Возьмите инструмент Эллипс (U) и создайте круг и поместите его примерно так как на картинке, назовите этот слой BUTTON .
Теперь вернитесь к слою BODY_2 и скопируйте его Стиль слоя нажав по нему правой кнопкой и выбрав Скопировать стиль слоя . После этого примените скопированный стиль на слой BUTTON .
После этого мы применяем Стиль слоя как показано на картинке, к нашей копии круга.
Затем добавляем Тень .
Вы должны получить похожий результат.
Повторяем ранние шаги и применяем Стили слоя к прямоугольнику, но немного модифицируем настройки Тени .
Вы должны получить похожий результат.
Мы дублируем слой BUTTON помещаем его под первой кнопкой, затем немного поворачиваем его. Также редактируем Стиль слоя Градиент второй кнопки.
Теперь наши кнопки готовы.
Результат должен быть как на картинке.
Сделаем динамик. Нам надо создать прямоугольник со скругленными углами под кнопками, как на рисунке. Назовем этот слой SPEAKER .
Теперь откроем Стиль слоя и применим следующие настройки.
Применим Внутреннюю тень к слою SPEAKER.
Добавим Обводку к слою SPEAKER .
