Настройка Photoshop для веб, разработки приложений и iPhone

  1. Дальнейшее чтение на SmashingMag:
  2. Цель
  3. Почему это так сложно?
  4. Чем Photoshop отличается от OS X и Windows?
  5. Отключение управления цветом RGB в Photoshop
  6. Разница между «Назначить профиль» и «Преобразовать в профиль»
  7. Иллюстратор такой же, как фотошоп
  8. Гамма Различия
  9. Финальная проверка для iPhone UI
  10. Заключение
  11. Похожие сообщения

Большинство людей, которые разработали веб-сайты или приложения в Photoshop, в тот или иной момент сталкивались с проблемами, пытаясь сопоставить цвета на изображениях с цветами, созданными в HTML, CSS или коде. Эта статья направлена ​​на решение этих проблем раз и навсегда. Итак, как мы можем добиться управления цветом, которое сопоставляет цвета на нескольких устройствах? [Обновлено в феврале / 28/2017] В мире печати управление цветом обычно включает в себя калибровку всего рабочего процесса, от сканера или цифровой камеры до дисплея компьютера, для получения твердых доказательств и окончательного вывода на печать. Это может быть довольно сложным заказом, особенно когда устройства используют разные цветовые пространства - согласование устройств RGB и CMYK, как известно, сложно. При проектировании или редактировании для ТВ , калибровка основного экрана редактирования и использование монитора вещания являются обычным явлением; они показывают в реальном времени, как изображение будет выглядеть на обычном телевизоре в доме зрителя. В таком сценарии управление цветом предлагает много преимуществ и настоятельно рекомендуется. При создании веб-интерфейсов и интерфейсов приложений ситуация немного отличается. Окончательный вывод - это то же устройство, которое вы используете для создания обложки: дисплей компьютера (оставляя пока различия в гамме между Windows, OS X до 10.6 и iPhone, о которых мы расскажем позже).

Большинство людей, которые разработали веб-сайты или приложения в Photoshop, в тот или иной момент сталкивались с проблемами, пытаясь сопоставить цвета на изображениях с цветами, созданными в HTML, CSS или коде. Эта статья направлена ​​на решение этих проблем раз и навсегда. [Обновлено февраль / 28/2017]

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

Управление цветом для соответствия цветов на нескольких устройствах

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

При проектировании или редактировании для ТВ , калибровка основного экрана редактирования и использование монитора вещания являются обычным явлением; они показывают в реальном времени, как изображение будет выглядеть на обычном телевизоре в доме зрителя. В таком сценарии управление цветом предлагает много преимуществ и настоятельно рекомендуется.

При создании веб-интерфейсов и интерфейсов приложений ситуация немного отличается. Окончательный вывод - это то же устройство, которое вы используете для создания обложки: дисплей компьютера (оставляя пока различия в гамме между Windows, OS X до 10.6 и iPhone, о которых мы расскажем позже).

Однако есть одна загвоздка . Даже если вы создаете веб-интерфейс или интерфейс приложения на том же устройстве, на котором будет отображаться конечный продукт, цвета будут иметь разные источники: изображения (обычно PNG, GIF и JPEG), разметка стиля (CSS) и код (JavaScript). HTML, Objective-C и т. Д.). Получить их все может быть сложно.

Цель

При разработке веб-сайтов или интерфейсов приложений мы хотим идеально сочетать цвета, отображаемые на экране в Photoshop и сохраняемые в файлах, с цветами, отображаемыми в других приложениях, включая Firefox, Safari и iPhone Simulator. Мы не только хотим, чтобы цвета выглядели одинаково, но мы хотим, чтобы фактические значения, сохраненные в файлах, полностью соответствовали цветам, которые мы определили в Photoshop. Цвета не должны смещаться или казаться смещенными ни при каких обстоятельствах.

Почему это так сложно?

Photoshop применяет управление цветом к изображениям, отображаемым в его окнах, и к файлам, которые он сохраняет. Это плохо, если вы работаете исключительно с изображениями RGB для Интернета или экранных пользовательских интерфейсов. При настройках Photoshop по умолчанию # FF0000 будет отображаться как # FB0018, а # BB95FF будет отображаться как # BA98FD. Различия тонкие, но определенно есть.

Чем Photoshop отличается от OS X и Windows?

Управление цветом OS X применяется ко всему дисплею в самом конце цепочки обработки, после основного буфера в видео-памяти Управление цветом OS X применяется ко всему дисплею в самом конце цепочки обработки, после основного буфера в видео-памяти. Это означает, что хотя применяется управление цветом, программные утилиты, которые измеряют цвет на экране (например, / Utilities / DigitalColor Meter ), сообщат те же значения, которые вы сохранили в файле или ввели в качестве кода. Я считаю, что управление цветом в Windows Vista и Windows 7 (Windows Color System) работает аналогичным образом.

Управление цветом в Photoshop применяется только к части изображения его окон и сохраняемым файлам. Эта коррекция цвета происходит, когда Photoshop рисует изображение на экране, поэтому программные утилиты, которые измеряют цвет на экране, часто сообщают о цветах, отличных от указанных вами. Стоит отметить, что управление цветом OS X применяется поверх Photoshop.

Лучшее решение, которое я нашел, - максимально отключить управление цветом в Photoshop для документов RGB . Это приводит к тому, что цвета RGB, которые отображаются на экране и сохраняются в файле, соответствуют фактическому значению цвета. Если вам нужно откалибровать ваш монитор для работы в Интернете и разработки приложений, то вам лучше обойтись, изменив его на уровне ОС.

Отключение управления цветом раньше было довольно простым в Photoshop CS2 и во всех предыдущих версиях, но теперь требует немного больше навыков.

Отключение управления цветом RGB в Photoshop

Эти инструкции предназначены для Photoshop CC на Mac и Windows. Настройка других версий очень похожа.

Шаг 1: Перейдите в « Правка» → «Настройки цвета» и установите для рабочей области RGB значение « Монитор RGB» .

Шаг 1: Перейдите в « Правка» → «Настройки цвета» и установите для рабочей области RGB значение « Монитор RGB»

Шаг 2: Откройте документ и перейдите в « Правка» → «Назначить профиль» , затем установите для него значение « Не управлять цветом этого документа» . Это должно быть сделано для каждого документа, над которым вы работаете.

Это должно быть сделано для каждого документа, над которым вы работаете

Шаг 3: Убедитесь, что View → Proof Colors выключен.

Шаг 4. При сохранении файлов с помощью « Сохранить для Web и устройств» убедитесь, что параметр « Преобразовать в sRGB» отключен. Если вы сохраняете файл JPEG, то также отключите встроенный цветовой профиль (возможно, вы захотите включить его для определенных фотографий, но, скорее всего, вы захотите отключить его для элементов интерфейса и значков).

Разница между «Назначить профиль» и «Преобразовать в профиль»

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

Каждый документ Photoshop содержит цветовой профиль, который отделен от фактических цветовых данных, хранящихся для каждого пикселя. Назначить профиль просто изменяет профиль в документе, не затрагивая какие-либо данные о цвете. Это неразрушающее действие: вы можете назначать новый цветовой профиль вашим документам так часто, как вам нравится, без какого-либо ущерба. Назначение нового профиля может изменить способ отображения вашего документа на экране, но данные, содержащиеся в файле, останутся без изменений.

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

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

Иллюстратор такой же, как фотошоп

Если вы хотите, чтобы изображения, сохраненные в Illustrator или импортированные из Illustrator в Photoshop, также совпадали, выполните следующие действия. Эти инструкции предназначены для Illustrator CS4 на Mac и Windows. Настройка Illustrator CS3 очень похожа.

Шаг 1. Перейдите в « Правка» → «Настройки цвета» и установите для рабочей области RGB значение « Монитор RGB»

Перейдите в « Правка» → «Настройки цвета» и установите для рабочей области RGB значение « Монитор RGB»

Шаг 2: Откройте документ и перейдите в « Правка» → «Назначить профиль» . Затем установите « Не управлять цветом этого документа» . Это должно быть сделано для каждого документа, над которым вы работаете.

Это должно быть сделано для каждого документа, над которым вы работаете

Шаг 3: Убедитесь, что View → Proof Colors выключен.

Шаг 4. При сохранении файлов с помощью « Сохранить для Web и устройств» убедитесь, что параметр « Преобразовать в sRGB» отключен. Если вы сохраняете файл JPEG, то также отключите « Внедрить цветовой профиль» (опять же, возможно, вы захотите включить его для определенных фотографий, но, скорее всего, вы захотите отключить его для элементов интерфейса и значков).

Гамма Различия

Windows использовала гамма 2.2 с момента его введения. OS X использовала гамму 1.8 для всех версий, кроме Snow Leopard (последний выпуск), который использует 2.2. Что это значит? До появления Snow Leopard веб-страницы выглядели темнее в Windows. К счастью, обе операционные системы теперь синхронизированы, поэтому веб-страница должна выглядеть очень похоже на Mac и ПК, которые используют один и тот же монитор.

Информация о гамме iPhone немного трудно найти; Я не мог установить, является ли это 1,8 или 2,2. Это еще одна причина для проверки вашего интерфейса на iPhone.

Финальная проверка для iPhone UI

Экран и калибровка вашего iPhone или iPod, скорее всего, будут отличаться от экрана и калибровки вашего Mac или ПК. Я часто импортирую полноэкранные изображения пользовательского интерфейса в iPhoto и синхронизирую их с iPhone, чтобы точно знать, как будет выглядеть окончательный интерфейс на устройстве (в Windows вы можете синхронизировать фотографии с помощью iTunes). Это дает вам еще один шанс внести коррективы перед нарезкой изображений или фиксацией чего-либо в коде.


Эта статья   объясняет, как справиться с проблемой, что при тестировании некоторых макетов интерфейса приложения iPhone в альбомной ориентации они выглядят размытее, чем в Photoshop

Эта статья объясняет, как справиться с проблемой, что при тестировании некоторых макетов интерфейса приложения iPhone в альбомной ориентации они выглядят размытее, чем в Photoshop.

На Mac перемещение цветов между Photoshop и кодом может быть упрощено с Выбор разработчика , Hex Color Picker а также Цвета (все бесплатно).

Заключение

Теперь вы можете перемещать растровые и векторные изображения между Photoshop и Illustrator без каких-либо цветовых сдвигов и любым способом. Вы также можете получить цвет с помощью палитры цветов в Photoshop, а затем использовать то же значение цвета HEX в своем коде CSS, HTML, JavaScript, Flash или Objective-C, и оно будет идеально соответствовать вашим изображениям. Я надеюсь, что эта статья помогла. Если у вас есть какие-либо вопросы, не стесняйтесь спрашивать в комментариях ниже.

Похожие сообщения

Вас могут заинтересовать следующие похожие посты:

Чем Photoshop отличается от OS X и Windows?
Итак, как мы можем добиться управления цветом, которое сопоставляет цвета на нескольких устройствах?
Почему это так сложно?
Чем Photoshop отличается от OS X и Windows?
2.2. Что это значит?