Создание пользовательских иконок для Windows Mobile 6.5
Этот блог-пост – пошаговое руководство по созданию профессиональных иконок для приложений Windows Mobile. Здесь рассказывается, как с помощью Adobe Photoshop правильно стилизовать картинку и задать ей нужный размер, чтобы в результате получить иконку, которая будет использоваться как в самом приложении, так на Windows® Marketplace for Mobile. Для упрощения работы к этому руководству прилагается action-файл Photoshop. Разработчикам, которые планируют распространять свои программы через Windows® Marketplace for Mobile, эта информация будет особенно полезна – ведь загружаемые приложения должны соответствовать определенным критериям.
Содержание:
Иконки приложений
Создание пользовательских иконок и изображений
Уменьшение размера пользовательских иконок и изображений
Иконки приложений
Стиль иконок для Windows Mobile 6.5 подразумевает:
- Наличие рамки - круглой или квадратной со скругленными углами
- Наличие тени
- Наличие отражения
На рисунке 1-1 показана "сырая" картинка, из которой мы сделаем иконку для Windows Mobile 6.5. Для этого изображение нужно будет модифицировать в соответствии с указанными выше требованиями.
Рисунок 1-1
На рисунке 1-2 показана та же самая картинка, но уже превращенная в иконку. Именно так эта иконка будет выглядеть в меню "Пуск" в Windows Mobile 6.5 – круглой, как показано слева, или квадратной со скругленными углами, как показано справа.
Рисунок 1-2
Создание пользовательских иконок и изображений
Загрузите Photoshop и откройте нужное изображение. Затем нажмите Ctrl+A, чтобы выделить всю картинку, и скопируйте ее в буфер обмера, нажав Ctrl+C. То, что должно получиться, показано на рисунке 1-3.
Рисунок 1-3
Откройте файл Shapes.psd. Нажмите Ctrl+V, чтобы вставить из буфера свое изображение в отдельный слой. Как показано на рисунке 1-4, этот слой должен быть расположен под слоем Highlight и над слоем Round.
Рисунок 1-4
Нажмите Ctrl+T и уменьшите изображение так, чтобы оно умещалось внутри круга. Для изменения размера потяните за маркер в углу.
Рисунок 1-5
Выделите слой с изображением. Затем, удерживая Ctrl, нажмите на иконку векторной маски слоя Round. Тем самым будет выделена круглая область.
Рисунок 1-6
Нажмите на кнопку "Add layer mask". Для изображения будет создана круглая, маска. На рисунке 1-7 показано, что должно получиться.
Рисунок 1-7
Нажмите на индикатор "глаз" рядом со слоями Round и Background, чтобы сделать эти слои невидимыми.
Рисунок 1-8
Теперь выберите пункт меню Image – Adjustments - Hue/Saturation (или просто нажмите Ctrl +U). Откроется диалоговое окно Hue/Saturation. На рисунке 1-9 показано, как, изменяя параметры тона, насыщенности и яркости, можно задать изображению произвольный оттенок.
Рисунок 1-9
Если вы хотите сделать иконку не круглой, а квадратной со скругленными углами, нажмите на индикатор "глаз" слева от заголовка группы слоев Round. Вся группа станет невидимой. Теперь сделайте видимой группу слоев Square with Rounded Corners, для этого нужно нажать на пустой квадрат слева от заголовка группы. Перетащите слой с вашим изображением из группы Round в группу Square with Rounded Corners так, чтобы слой расположился между слоями Highlight и Square with Rounded Corners. Точно так же, как вы создавали круглую маску, создайте маску квадратную. У вас должно получиться так, как показано на рисунке 1-10.
Рисунок 1-10
Сохраните иконку в формате PNG, выбрав пункт меню "File-Save As". Размер сохраненного изображения будет 90 на 90 пикселей, а разрешение – 192 dpi. Это корректный размер иконки для меню "Пуск" в Windows Mobile 6.5.
Рисунок 1-11а
При сохранении в формате PNG выберите опцию "None".
Рисунок 1-11б
Уменьшение размера пользовательских иконок и изображений
Иконка для меню "Пуск" должна быть представлена в следующих размерах:
| 90x90 пикселей при 192 dpi | |
| 60x60 пикселей при 128 dpi | |
| 45x45 пикселей при 96 dpi |
Рисунок 1-12а
Иконка для клиентского приложения Marketplace должна быть представлена в следующих размерах:
| 60х60 пикселей при 192 dpi | |
| 36x36 пикселей при 96 dpi |
Рисунок 1-12б
Иконка на веб-сайте Marketplace должна быть представлена в следующих размерах:
| 64x64 пикселей при 96dpi | |
| 45x45 пикселей при 96 dpi |
Рисунок 1-12в
Для получения более подробной информации о подготовке иконок для приложений, обратитесь к руководству Application Submission Requirements for Windows Marketplace for Mobile (Windows Marketplace for Mobile: требования к загружаемым приложениям).
Чтобы подготовить иконки меньшего размера, откройте в Photoshop созданный вами PNG-файл.
Рисунок 1-13
Уменьшение размера вручную
Выберите пункт меню "Image - Image Size".
Рисунок 1-14
Измените разрешение (поле "Resolution"), как показано на рисунке 1-15. Для каждого разрешения сохраните иконку в отдельном PNG-файле.
| 90х90 пикселей при 192 dpi | |
| 64х64 пикселей при 96 dpi | |
| 60х60 пикселей при 192 dpi | |
| 60x60 пикселей при 128 dpi | |
| 45x45 пикселей при 96 dpi | |
| 36x36 пикселей при 96 dpi |
Рисунок 1-15
Изменение размера в пакетном режиме
Если необходимо одинаково уменьшить размер сразу нескольких аналогичных файлов, можно воспользоваться режимом пакетной обработки в Photoshop. Нажмите Ctrl+O и откройте нужные файлы, а так же action-файл Resize.atn.
Рисунок 1-16
В Photoshop откроется панель Actions (рисунок 1-17)
Рисунок 1-17
Откройте меню "File", в нем выберите пункт "Automate", а затем "Batch".
Рисунок 1-18
В открывшемся диалоговом окне, в разделе "Play" измените значение "Set" на "Resize". Если необходимо уменьшить размер иконок до 60 на 60 пикселей при 128 dpi, выберите в поле "Action" значение Resize60X60@128dpi. Если необходимо уменьшить размер иконки до 45 на 45 пикселей при 96 dpi, выберите в поле "Action" значение Resize45X45@96dpi, и так далее. В поле "Source" выберите "Opened Files", а в поле "Destination" укажите папку, куда нужно положить уменьшенные иконки. Наконец, для запуска процесса пакетной обработки нажмите OK.
Рисунок 1-19
Следите за новыми блог-постами, скоро я опубликую руководство по использованию этих иконок в Windows Mobile.
Перевод: Светлана Шиблева