Java, UX, HTML, CSS, WEB-design

Retinize It: бесплатный экшен Photoshop для нарезки графики для HD-экранов

[ad_1]

  • Артём Дашинский

  • 0 Комментарии

Retinize It: бесплатный экшен Photoshop для нарезки графики для HD-экранов

  • 6 минут чтения

  • Графика, Халява, Фотошоп

Краткое резюме ↬

Дисплеи высокой четкости (или «Retina») распространяются все шире и шире, и, очевидно, их количество будет расти. Таким образом, как создатели продуктов, которые будут потребляться на устройствах Retina, мы должны соответствующим образом оптимизировать рабочий процесс проектирования и разработки.

Дисплеи высокой четкости (или «Retina») распространяются все шире и шире, и, очевидно, их количество будет расти. Таким образом, как создатели продуктов, которые будут потребляться на устройствах Retina, мы должны соответствующим образом оптимизировать рабочий процесс проектирования и разработки.

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

retinize-it-действие

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

Дальнейшее чтение на SmashingMag:

  • Рабочий процесс Retina Asset, который вы всегда хотели для Photoshop
  • Создавайте пиксельные активы для нескольких коэффициентов масштабирования
  • Этикет Photoshop для адаптивного веб-дизайна
  • На пути к Retina Web

Еще после прыжка! Продолжить чтение ниже ↓

Не сумев найти инструмент, подходящий для рабочего процесса моей команды дизайнеров, Я создал набор из двух экшенов Photoshop, экономящих время. для нарезки графики для Retina и стандартных дисплеев. Отличные отзывы от моей команды вдохновили меня поделиться ими с другими дизайнерами. Инструмент получил хороший отклик в сообществе веб-дизайнеров и разработчиков интерфейсов, поэтому сегодня я рад представить Retinize It в журнале Smashing Magazine.

Веб-сайт Retinize It
Retinize Он использует действия Photoshop и retina.js для оптимизации для дисплеев Retina.

Как это работает

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

Ретинизируй это

В фоновом режиме Retinize It копирует выбранные слои в новый файл, делает фон прозрачным и обрезает пространство вокруг элемента. Как только это будет сделано, действие спросит, как вы хотите назвать файл, сохранит его, масштабирует исходный элемент на 200% и сохранит его как отдельный файл. После этого процесса вы вернетесь к исходному файлу.

Какую часть процесса нарезки экономит действие

Почти все. Единственное, что вам нужно сделать, это выбрать каталог и назвать файлы. Не забудьте добавить модификатор высокого разрешения, @2x, для версий файлов Retina. Это соглашение было установлено в библиотеке разработчиков iOS от Apple.

Если вы создаете приложение для iOS, вам необходимо предоставить фон и заставку в трех разрешениях: стандартное (320 × 480 пикселей), Retina (640 × 960 пикселей) и iPhone 5 (1136 × 640 пикселей). Соглашение об именах для стандартной версии и версии Retina довольно простое. Apple рекомендует добавлять изображения для разрешения экрана iPhone 5. -568h@2x суффикс, хотя Apple не требует его.

Судя по всему, это происходит из-за того, что Xcode не связывает автоматически -568h@2x изображения с разрешением iPhone 5; разработчики могут установить суффикс вручную для такого типа файлов. Я работал с разработчиком iOS, который попросил Apple добавить @5x суффикс. Таким образом, лучший способ определить соглашение об именах для изображений iPhone 5 в будущем — спросить своего разработчика. В остальных случаях используйте -568h@2x суффикс.

Методы, представленные в статье «На пути к Retina Web», приносят @2x от мобильных приложений до Интернета, что помогает нам очень быстро оптимизировать веб-сайты для дисплеев Retina.

Зачем масштабировать на 200%, а не на 50%?

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

Во-вторых, элемент с нечетным значением размера, масштабированный на 50%, в конечном итоге будет иметь значение x,5 пикселя, что сделает элемент размытым. Бьянго объясняет эту проблему в своей статье «Дизайн для дисплея Retina», как и Никлаус Гербер в своей статье «Дизайн для iPhone 4».

С какими слоями это будет работать?

Действие без Retina в этом пакете будет работать с любым типом слоя. Если вы используете версию для Retina, вам следует работать с фигурами и смарт-объектами, чтобы файл с масштабом 200% не выглядел пиксельным.

Кроме того, если у вашего слоя есть внутренняя или падающая тень, снимите флажок «Использовать глобальное освещение»; в противном случае эти эффекты в нарезанной версии слоя унаследуют угол Photoshop по умолчанию.

Что включает в себя набор?

В набор входят два экшена Photoshop:

  • Нарезать это. Это действие нарезает версию элемента в масштабе 100 %.
  • Ретинизируй это. Это действие сохраняет версию в масштабе 100 % и версию в масштабе 200 %.

Что делает его особенным?

  • Это бесплатно.
  • Установить в один клик.
  • Вам не нужно менять структуру слоев в файлах PSD.
  • Вам не нужно называть слои.
  • Он оптимизирован для дисплеев Retina.
  • Запуск в один клик, настройка не требуется.
  • Поддержка Windows и Mac.

Загрузка и документация

  • Веб-сайт Retinize It содержит часто задаваемые вопросы и дополнительную информацию.
  • Скачать (ZIP, 4 КБ)

Дополнительные инструменты

PNG ЭКСПРЕСС (MAC и Windows, 29 долларов)

png-экспресс
Спецификация, созданная PNG Express

Если у вас будет ограниченное взаимодействие с разработчиком, который будет кодировать ваш дизайн, и вы не уверены, что он будет идеальным до пикселя, PNG Express может здорово сэкономить время. Это поможет вам создать спецификации с инструкциями по расположению элементов, полям, шрифтам и размерам шрифтов.

PNG Express также имеет возможность нарезки изображений, включая поддержку Retina.

ImageOptim (только для Mac, бесплатно)

имиджоптим

ImageOptim уменьшает размер изображения при сохранении качества. Инструмент удаляет внутренние данные, внедренные графическими редакторами, такие как комментарии и цветовые профили. Я рекомендую добавить папку с изображениями с вашего веб-сайта в это приложение перед компиляцией и запуском. ImageOptim уменьшит размер изображения в среднем примерно на 30%.

Slicy (только для Mac, 29 долларов)

slicy_mini

Slicy — это прекрасно спроектированный инструмент, который большинство дизайнеров и разработчиков используют для нарезки графики для приложений iOS. Инструмент автоматически экспортирует графику из PSD, но требует организовать ваши слои в Photoshop и назвать их определенным образом. Кроме того, как только вы вносите изменения в Photoshop, Slicy автоматически обновляет фрагменты. Основная причина, по которой я решил не использовать Slicy, — это отсутствие возможности быстрого экспорта пары элементов из PSD без подготовки его для Slicy.

Сокрушительная редакция
(аль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Retinize It: бесплатный экшен Photoshop для нарезки графики для HD-экранов

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

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

Ваш адрес email не будет опубликован.

Краткое описание по статье Retinize It: бесплатный экшен Photoshop для нарезки графики для HD-экранов

Название: Retinize It: бесплатный экшен Photoshop для нарезки графики для HD-экранов . Краткое описание: [ad_1] ⭐ Артём Д . Дата публикации: 13.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»