Зарегистрирован: 07.04.2008 Сообщения: 2915 Откуда: Москва Модель телефона: сотовый браслет: [Samsung Gear S] планшет: [Sony Xperia Tablet Z LTE]
Добавлено: 19 Июн 2013 17:01 Заголовок сообщения: Иконки с iOS 6 (iOS 6 icons) - импорт на Android
Тема посвящена получению графики иконок Apple iOS, и импортированию её на Google Android.
Мысль 1
По результатам разнообразных экспериментов, основная цель - получение как можно более крупных и качественных изображений графики иконок Apple iOS (назовём их "эталоны").
Далее, иконки Android можно делать из них путём уменьшения размера изображения (с обязательным применением хорошей интерполяции при таком уменьшении - я сейчас использую для этих целей свободный графический редактор GIMP). Если эталон (волею судеб) сам по себе нашёлся изначально маленький - могут возникнуть проблемы с качеством изображения при интерполяции во время уменьшения.
На текущий момент, самый перспективный путь, который видится для получения крупной и качественной графики иконок Apple iOS - импорт графики из App Store, со страниц приложений.
Графику которой нет в App Store (или тамошняя не устраивает) - можно искать в разделе "Картинки" разных поисковиков, а также импортировать непосредственно с самих устройств Apple.
Мысль 2
Сейчас занимаюсь импортом графики иконок Apple iOS на свой Android-планшет Sony Xperia Tablet Z (смена там иконок на новые - с помощью проги "Icon Changer free", из Play Market - поддерживает создание иконок размером до 96 x 96; нюансы работы с этой прогой - см. синий пост в этой теме).
Иконки предпочитаю крупные, "смотрибельные" и удобные, так что использую весь доступный размер.
Многие "родные" иконки Android, импонируют мне намного меньше аналогов с iOS (особенно бесит дебильный календарь, с застывшим навеки числом "31" ).
Лирическое отступление:
Я календарь... переверну...
И снова - третье сентября...
На скрин иОС... опять взгляну...
Но там - не третье сентября!
Но почему? ну почему...
Расстаться с иОС мне пришлось...
Ведь было всё у нас всерьёз!
Нормального числа!
(На iOS, не только календарь сам на его иконке переворачивался - но также и часы сами шли на их иконке [на джейле] . На Android, такое сделать ещё легче - написать виджет. Но что-то таких виджетов, я пока не находил... Ну да ладно - просто поменяю иконки на нечто "нейтральное" [календарь вид издалека или с обложки, карманные часы с закрытым циферблатом, и т.п.], пока виджетов нетути...)
Также, мне не особо нравятся "родные" уменьшенные иконки Android (с реальным размером лого, порядка 70 пикселей).
Некоторые "родные" иконки Android - такие как например Skype, почта - напротив, нравятся гораздо больше "раздутых" аналогов с iOS. Для увеличения размера таких "родных" иконок, оптимальный путь - искать их крупную качественную графику в разделе "Картинки" разных поисковиков.
В итоге:
Для всех иконок, которые планирую импортировать на Android с iOS, алгоритм - нижеследующий: _________________ Квадры шквал и квадроскутер
Последний раз редактировалось: Silver Surfer (20 Июн 2013 04:15), всего редактировалось 47 раз(а)
Зарегистрирован: 07.04.2008 Сообщения: 2915 Откуда: Москва Модель телефона: сотовый браслет: [Samsung Gear S] планшет: [Sony Xperia Tablet Z LTE]
Добавлено: 19 Июн 2013 18:25 Заголовок сообщения:
I. Первый (основной) путь получения графики иконок iOS:
Импорт графики из App Store, со страниц приложений.
На эти страницы можно заходить как с устройства Apple, так и непосредственно с компа. В итоге для себя выбрал путь заходить с компа - на странице в iTunes, размер изображения иконки получается 220 x 220 (и оно там несжатое); а на моём Apple iPod touch 4 - скриншот с клиента AppStore даёт размер изображения иконки 144 x 144 - а в браузере Safari такие страницы открываются только с запуском клиента App Store, и открытия страницы в нём .
Алгоритм:
1. На компе с Windows, открываем iTunes.
2. В нём справа вверху жмём "iTunes Store".
3. Сверху жмём кнопку "App Store" (саму кнопку).
4. Сверху жмём либо "iPhone", либо "iPad" (у одного и того же приложения, могут быть отличающиеся лого; как пример - малозаметно, по яркости; хорошая идея - открыть и то и то, спастить скриншоты страниц в mspaint, а потом сравнить их).
5. Справа вверху в поиске ищем нужное приложение.
6. Открываем его страницу.
7. Делаем её скриншот в буфер (кнопка "Print Screen" на клавиатуре компьютера).
8. Открываем графический редактор GIMP.
9. Создаём новое изображение (CTRL+N).
10. Пастим туда из буфера обмена (CTRL+V).
11. Выбираем инструмент "перемещение" (крест стрелок). Двигаем лого проги в левый верхний угол изображения (так чтобы на левой и верхней границе, не было линии окантовки) - двигать можно и стрелками клавиатуры.
12. Постепенно уменьшаем размер холста (меню "Изображение - Размер холста"; не забывайте отключать справа взаимосвязь между шириной и высотой!), контролируя нижнюю и правую границы лого (так чтобы на правой и нижней границе, не было линии окантовки - но также и чтобы не "срезать лишнего"). Например, у меня сейчас получился итоговый размер холста 218 x 218 - однако (для любой другой проги, или вообще каждый раз) он может отличаться...
13. Меню "File" - "Экспортировать"....
14. "Выберите тип файла (По расширению)": Изображение PNG
15. "Имя:" - вписать имя файла (не стерев расширение) - например, имя проги.
16. Справа внизу жмём кнопку "Экспортировать".
17. "Черезстрочность (Adam7)": нет; "Сохранить цвет фона": нет; "Сохранить гамму": да; "Сохранить смещение слоя": нет; "Сохранить разрешение": нет; "Сохранить время создания": нет; "Сохранить комментарий": нет; "Сохранить значения цвета прозрачных точек": да; "Степень сжатия": 0. ("Запомнить эти параметры").
18. Справа внизу жмём кнопку "Экспорт".
19. Когда сохранилось, закрываем в GIMP открытое изображение (там жмём кнопку "Закрыть без сохранения").
20. Находим сохранённый файл в проводнике. Делаем 2 его копии (на всякий).
21. Открываем в GIMP сохранённый файл.
22. Приближаем верхний левый угол (наименее затенённый) изображения - мышью целим в него, жмём кнопку "+" на клавиатуре чтобы приблизить туда.
23. Все точки границы лого, которые (объективно) кажутся оттенка окантовки лого (а не цвета основного тела лого; но до разумных пределов), поточечно зарисовываем чистым чёрным цветом (выбираем инструмент "карандаш"; "Режим:" нормальный; "Непрозрачность:" 100; "Кисть": 1. Pixel; "Размер:" 1; проконтролировать чтобы всё остальное было отключено, и по умолчанию; выбираем чистый чёрный цвет).
24. Закрашиваем этим же чистым чёрным весь остальной левый верхний угол (выше).
25. Отдаляем масштаб чтобы посмотреть что получилось (не халтурьте на этом важном моменте с грамотным отсечением фона ).
27. Тыкаем ей в черноту угла. Она должна вся выделиться.
28. Меню "Выделение - Инвертировать". Теперь выделено всё остальное.
29. Жмём на клавиатуре кнопку DEL. Вуаля, остался только чёрный угол, на прозрачном фоне (если на белом - это плохо - надо зайти в меню "Слой - Прозрачность - Добавить альфа-канал", и повторить с удалением, ещё раз).
30. Меню "File - Перезаписать..." (сохранились).
31. Выделяем всё (CTRL+A), копируем в буфер обмена (CTRL+V).
35. Выбираем инструмент "перемещение" (крест стрелок). Двигаем фрагмент в правый верхний угол, чтобы встал точно к границам холста (для этого, приближаем правый верхний угол).
36. Меню "File - Перезаписать..." (сохранились).
37. Закрываем изображение в GIMP (без сохранения).
38. Открываем в GIMP это же изображение.
39. Повторяем 31 - 36, только отражая уже сверху вниз, и двигая фрагмент к нижней границе. Вуаля, получили маску для отделения лого от фона.
40. Меню "File - Перезаписать..." (сохранились).
41. Закрываем изображение в GIMP (без сохранения).
42. Открываем в GIMP это же изображение.
43. Выделяем всё (CTRL+A), копируем в буфер обмена (CTRL+V).
44. Закрываем изображение в GIMP (без сохранения).
45. Открываем в GIMP (сделанную в п. 20) копию лого.
46. Пастим из буфера обмена (CTRL+V). Вуаля, на лого наложилась маска.
47. Меню "File - Перезаписать..." (сохранились).
48. Закрываем изображение в GIMP (без сохранения).
51. Тыкаем им в черноту левого верхнего угла. Она должна вся выделиться.
52. Жмём на клавиатуре DEL. Вуаля, угол стал прозрачного цвета (если белого - это плохо - надо зайти в меню "Слой - Прозрачность - Добавить альфа-канал", и повторить с удалением, ещё раз).
53. Повторить 51-52 для всех остальных 3 углов.
54. Меню "File - Перезаписать..." (сохранились).
55. Закрываем изображение в GIMP (без сохранения).
56. Вуаля, "эталон" графики иконки готов!
(также, готова маска, которая в принципе теоретически может пригодиться, для следующей иконки)
P.S. Для разных эталонов (даже такой же формы), возможно понадобятся свои отдельные маски. Для каких-то, вы можете захотеть дополнительные вырезы прозрачности (чтобы получить концептуально такие же иконки, как "родные" Android - например Skype, почта, приложения Яндекс).
P.P.S. Готовые эталоны, сейчас выкладываются в специальный пост внизу темы.
mamba - 1 - source.png
Описание:
Первый файл - вырезанный из скриншота страницы приложения в App Store, квадрат с лого
Размер файла:
186,23 KB
Просмотрено:
23680 раз(а)
mamba - 2 - mask.png
Описание:
Второй файл - маска лого
Размер файла:
186,23 KB
Просмотрено:
23680 раз(а)
mamba - etalon.png
Описание:
Третий файл - искомый результат - "эталон" графики иконки iOS
Размер файла:
186,23 KB
Просмотрено:
23680 раз(а)
_________________ Квадры шквал и квадроскутер
Последний раз редактировалось: Silver Surfer (20 Июн 2013 05:34), всего редактировалось 41 раз(а)
Зарегистрирован: 07.04.2008 Сообщения: 2915 Откуда: Москва Модель телефона: сотовый браслет: [Samsung Gear S] планшет: [Sony Xperia Tablet Z LTE]
Добавлено: 19 Июн 2013 19:33 Заголовок сообщения:
Экспорт на Google Android графики иконок Apple iOS (с эталонов, полученных ранее):
Сейчас занимаюсь импортом графики иконок Apple iOS на свой Android-планшет Sony Xperia Tablet Z (Android 4.1). Смена там иконок на новые - с помощью проги "Icon Changer free", из Play Market - поддерживает создание иконок размером до 96 x 96.
Иконки предпочитаю крупные, "смотрибельные" и удобные, так что использую весь доступный размер (не особо нравятся "родные" уменьшенные иконки Android, с реальным размером лого порядка 70 пикселей или что-то типа того).
Для тех иконок, которые планирую экспортировать на Android с iOS -
Алгоритм (довольно лёгкий):
1. Берём эталон графики иконки iOS (файл, который получали в предыдущем посте).
2. Копируем его в другую папку (конечный файл, сразу и будет файлом изображения иконки для Android).
3. Открываем файл в GIMP.
4. Меню "Изображение - Размер изображения...".
5. Ставим: "Ширина": 96; "Высота": 96; разрешение - не трогаем; "Интерполяция": Кубическая.
9. Вуаля, изображение иконки Android (нужного размера) готово!
Замена иконок на Android-устройстве. Некоторые моменты работы с Icon Changer free:
- после выбора иконки из альбома, надо аккуратно растянуть лассо на всё изображение целиком
- в случае появления у изображения чёрных углов (Icon Changer free как-то странно себя иногда ведёт - иногда корректно воспринимает изображение PNG с прозрачностью - иногда почему-то нет ):
a) удалить изображение из альбома, и снова загрузить
b) закрыть приложение Icon Changer free, и снова запустить (возможно, ребутнуть девайс)
c) если чёрные углы упорно остаются: зайти в "Decorate", и там аккуратно делать "Cut Edge" - пока не останется (никакой) черноты на закруглённых углах
- приятный момент - прога позволяет делать пустое название иконки - люблю такой стиль иконок
P.S. Готовые иконки Android (с размером 96 x 96), сейчас выкладываются в специальный пост внизу темы.
mamba - 96 x 96.png
Описание:
Файл изображения иконки Android (для Sony Xperia Tablet Z; размер иконки 96 x 96)
Размер файла:
36,23 KB
Просмотрено:
23560 раз(а)
_________________ Квадры шквал и квадроскутер
Последний раз редактировалось: Silver Surfer (20 Июн 2013 05:35), всего редактировалось 30 раз(а)
Зарегистрирован: 07.04.2008 Сообщения: 2915 Откуда: Москва Модель телефона: сотовый браслет: [Samsung Gear S] планшет: [Sony Xperia Tablet Z LTE]
Добавлено: 19 Июн 2013 20:58 Заголовок сообщения:
<этот пост - в разработке. старый материал удалил. ориентировочно будет готов в ближайшие дни >
III. Третий путь получения графики иконок iOS:
Из скриншотов графики иконок на самом iOS-устройстве.
Этот путь - не особо рекомендуется (вернее, рекомендуется - в последнюю очередь), т.к. даёт эталоны меньшего размера. А если эталон маленький - могут возникнуть проблемы с качеством изображения при интерполяции во время уменьшения размера изображения при создании иконки Android.
Алгоритм:
1. Сделать обои для устройства - фон чистого белого цвета:
1.1. Сделать снимок экрана устройства (скриншот) - любой, хоть локскрин (нажав одновременно клавиши Sleep и Home)
1.2. Подключить устройство проводом к компу с Windows. Выскочит мастер работы с камерой. Скачать им скриншот.
1.3. Открыть скриншот в GIMP. Сделать обои чистого белого цвета - выделить всё (CTRL+A), удалить (DEL). Если в итоге получится прозрачный фон - залить весь рисунок чистым белым цветом (инструмент ведёрко, выбрать чистый белый цвет - не другой какой-либо оттенок).
1.4. В меню File - перезаписать.
2. Залить белые обои на устройство:
2.1. Положить обои в отдельную папку (чтоб они там были единственным файлом).
2.1. Подключить устройство usb-проводом к компу. На компе, открыть iTunes.
2.2. Зайти в iTunes на устройство. Выбрать раздел "Photo". Поставить галочку "Sync photos from folder". Выбрать папку с обоями. Внизу в iTunes нажать "Sync". Подождать, когда пройдет весь процесс синхронизации.
3. Поставить на устройстве белые обои (зайти в значок "Photo", открыть там файл белых обоев, нажать внизу прямоугольник со стрелкой, выбрать "Set as wallpaper", "Home Screen").
4. Переместить значки, которые мы хотим взять, в самый верхний ряд значков экрана (чтобы избежать эффектов от градиента фона).
5. Сделать скриншот значков (нажав одновременно клавиши Sleep и Home). Скачать его на комп. Сделать его копию (на всякий).
6. На компе, в GIMP открыть: скриншот значков; mask.png; icon.png.
7. В mask.png, выделить всё (CTRL+A), скопировать в буфер обмена (CTRL+C).
8. В скриншоте значков, вставить из буфера обмена (CTRL+V), выбрать инструмент перемещение (крест стрелок), переместить маску на интересующий значок. Повторить этот пункт, для всех интересующих значков.
9. В меню File - перезаписать (перезаписали файл скриншота значков). Закрыть скриншот значков, и mask.png.
10. Открыть скриншот значков. Инструментом "прямоугольное выделение" выделить место вокруг интересующего значка (с запасом). Скопировать в буфер обмена (CTRL+C).
11. В icon.png, вставить из буфера обмена (CTRL+V), выбрать инструмент перемещение (крест стрелок), переместить вставленное так чтобы со всех сторон не было чёрных линий.
12. В меню File - перезаписать (перезаписали icon.png). Закрыть скриншот значков, и icon.png.
14. Открыть icon.png. Выбрать инструмент "волшебная палочка". Снять все галочки настроек, кроме "сглаживание". В "порог", установить 0.
15. Для каждого чёрного угла, тыкнуть в него "волшебной палочкой", потом нажать DEL.
16. В меню File - перезаписать (перезаписали icon.png). Закрыть icon.png. Получили файл исходника (размер изображения: 114 x 114).
По экспорту на Google Android с эталонов, полученных ранее - см. синий пост в этой теме
<этот пост - в разработке. старый материал удалил. ориентировочно будет готов в ближайшие дни > _________________ Квадры шквал и квадроскутер
Последний раз редактировалось: Silver Surfer (20 Июн 2013 04:12), всего редактировалось 11 раз(а)
Вы не можете начинать темы Вы не можете отвечать на сообщения Вы не можете редактировать свои сообщения Вы не можете удалять свои сообщения Вы не можете голосовать в опросах Вы не можете вкладывать файлы Вы можете скачивать файлы