Повышение резкости значков iOS

Я создаю приложение для iOS и имею пару пользовательских значков для панели навигации. Первый - плюсик, и получилось довольно неплохо. У меня также есть значок обновления, и он не такой резкий, как знак плюса. Очевидно, что у него круглая форма и нужно немного сглаживать, но мне кажется, что значок обновления должен быть намного четче, чем он есть.

Я не эксперт в Photoshop или графическом дизайне, поэтому я ищу советы о том, как сделать значок обновления более четким и четким. Вот как я приступил к его созданию:

1) Начал с фоновых элементов в Photoshop. 2) Нашел иконку обновления. Мне понравилась бесплатная лицензия. 3) Взял иконку в формате .png и импортировал в Photoshop. 4) Сделал замену цвета значка с исходного серого на текущий белый с помощью инструмента замены цвета. 5) Сохранил белый значок обновления в файл .png. 6) Вернувшись к моему другому документу Photoshop (с фоном и т. д.), я сделал «Файл» -> «Поместить» и поместил в документ белое обновление .png. Размер вообще не менял. 7) Добавлен эффект обводки, идентичный значку обновления, как и значку плюса.

Я знаю, что должен быть лучший способ сделать это, чтобы получить лучший результат. Мне просто нужно стиснуть зубы, пойти в Illustrator и попытаться нарисовать что-то свое? У меня нет векторного представления той иконки, которую я нашел - только Photoshop и .png.

Любые советы будут высоко оценены. Во вложении скриншот панели навигации с обеими иконками.

введите описание изображения здесь

Для значков приложений всегда полезно использовать векторный формат, чтобы они хорошо масштабировались для разных разрешений. Эту иконку нетрудно создать в Illustrator. Хотите руководство по ее созданию?
Ну, я думаю, что мог бы создать значок в Illustrator, но недостаток знаний проявляется, когда пришло время сохранить его в файл, который можно использовать в XCode/iOS, — не мог бы я просто сохранить этот файл Illustrator в .png, это растровый вывод? Я знаю, что вектор даст мне возможность масштабировать вверх/вниз и т. д. без потери четкости, но то, что я делал в Photoshop, имеет именно тот размер, который мне нужен, и я увеличиваю масштаб и пытаюсь сделать все идеально в пикселях. Будет ли Illustrator действительно подходящим вариантом? Если это так, я думаю, я не понимаю, почему, если конечный результат основан на пикселях.
Должен ли я вообще сохранять их в формате .png или есть какой-то другой форман (.ico?), Который подойдет лучше?
PNG должно быть хорошо, но для сохранения четких краев вам следует создать и отредактировать значок в векторном формате. Я только что опубликовал для вас краткое руководство, в котором показано, как создать значок и получить его нужный размер в Photoshop или Illustrator.
Вы принимаете во внимание дисплеи Retina? Это похоже на стандартное разрешение на дисплее сетчатки, который всегда будет размытым. Но, как указано выше и ниже, в идеале вы должны использовать SVG (для приложений на основе HTML5) или преобразовать SVG в собственные элементы пользовательского интерфейса для собственных приложений.
Работает SVG или просто более высокая плотность пикселей в графике с конечным размером, заданным программно.

Ответы (2)

Вот как создать этот значок в Illustrator:

http://imgur.com/a/FzZb8#0

Шаг 1: Откройте новый документ Illustrator, вставьте растровый значок.

Шаг 2: Увеличьте иконку, так как мы собираемся измерять пиксели. Полезно размещать направляющие по центру значка. Ничто не должно быть точным.

Шаг 3: Измерьте ширину кривой. Я использовал инструмент линейки, расстояние от центра до центра составляет около 33,25 пикселей. Еще раз, не нужно быть точным.

Шаг 4: С помощью инструмента «Эллипс» создайте круг такого диаметра, щелкнув в любом месте документа, а затем введя измеренные значения высоты и ширины (33,25 пикселя).

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

Шаг 6: Добавьте обводку к кругу. Я использовал 5,5 pt, что оказалось немного толще, чем кривая значка, вы можете использовать что-то между 5 и 5,5 pt.

Шаг 7: Выберите сегмент кривой в правом верхнем углу круга. Используя инструмент лассо, выделите небольшую часть в правом верхнем углу (убедитесь, что растровое изображение значка заблокировано!)

Шаг 8: Нажмите «Удалить», чтобы удалить этот сегмент, чтобы у нас было 3/4 круга.

Шаг 9. Отредактируйте свойства обводки: добавьте выступающий конец

Шаг 10: Добавьте стрелку. Используя инструмент «Многоугольник», щелкните в любом месте, чтобы создать треугольник (3 стороны, 7 пикселей).

Шаг 11: Поверните треугольник на -90°, чтобы он совпал со стрелкой.

Шаг 12: Поместите треугольник на стрелку и отрегулируйте размер по мере необходимости.

Шаг 13: Выберите свою кривую, расширьте обводку (Объект -> Разобрать)

Шаг 14. Сохраните только значок в формате .EPS.

Чтобы экспортировать для iOS:

Есть два способа сделать это. В Photoshop просто откройте свой .EPS, и PS спросит вас, какого размера вы хотите его растрировать. Убедитесь, что установлен флажок «Сглаживание».введите описание изображения здесь

В Illustrator выберите всю фигуру и отредактируйте размер с помощью меню «Преобразование» на панели инструментов. Затем выполните File -> Export и сохраните как .PNG. Убедитесь, что флажок «Использовать монтажные области» не установлен, чтобы просто вывести значок.введите описание изображения здесь

Вы можете использовать PocketSVG

https://github.com/arielelkin/PocketSVG#pocketsvg

Класс, преобразующий масштабируемую векторную графику (SVG) в:

CGPaths
CAShapeLayers
UIBezierCurves
NSBezierCurves.

Это упрощает создание векторных контуров и фигур в приложениях для iOS или OS X.

Это ответвление парсера пути Безье от SVG от Мартина Хейвуда с исправлениями, сделанными Питером Омвли и Домиником Мортлоком.

Применение

Сделайте свой рисунок в редакторе векторной графики, таком как Illustrator, Inkscape, Sketch и т. д.

Save as an SVG.
Drag and drop it into your Xcode project.
Follow the steps on the link below

https://github.com/arielelkin/PocketSVG#использование

Повышение резкости значков iOS
СпросиСетьПолитика конфиденциальности1y, 0v