Как правильно сохранить изображение для web в photoshop

Настоящий урок я посвятил1 подготовке любого цифрового изображения, читаемого графическим редактором Adobe Photoshop, будь то PSD-файла, TIF-изображения или «большой» JPEG-картинки, к публикации на сайте, в форуме или социальных сетях, а также к пересылке по электронной почте. Другими словами, «джейпег» для Интернет. В рифму получилось.

Безусловно, форматы изображений, которые умеет читать Photoshop, едва ли исчерпываются названными тремя. И что приятно, большинство можно перевести в JPEG.

Вне зависимости от исходного формата в Photoshop существуют два пути «джейпегизации». Возможность выбирать приятна вдвойне. Оба пути различаются.

Внешние отличия обнаруживаются невооружённым взглядом, отличия в назначении («Каким путём следовать?») я выделю специально.

В настоящем уроке я представлю две пошаговые инструкции с необходимыми теоретическими «вкраплениями». Он рассчитан на то, чтобы показать Вам, как оптимально сохранить свой виртуальный рисунок, коллаж или фотографию в широко распространённом формате JPEG. Последний наиболее эффективен для изображений с плавными цветовыми переходами.

Для закрепления и расширения полученных знаний, а также в целях выработки навыка, я подготовил соответствующие упражнения. Предлагаю Вам их выполнить, а затем опубликовать свои результаты в х к настоящему уроку. Опробуйте в «полевых условиях» свой навык!

Покажу, как сохранить изображение в формате JPEG на примере рисунка, созданного в Photoshop.

Первый способ

1 шаг

Как правильно сохранить изображение для web в Photoshop

Открываю исходное изображение в Photoshop. В моём случае это файл с названием «Пример.psd», содержащий нарисованный шар.

Нажимаю на клавиатуре сочетание клавиш «Ctrl», «Shift» и клавиши, обозначенной латинской буквой «S» либо выбираю в главном меню «Файл» («File») > «Сохранить Как…» («Save As…»). Появляется диалоговое окно с заголовком «Сохранить как».

2 шаг

Как правильно сохранить изображение для web в Photoshop

Выбираю месторасположение будущего JPEG-изображения. В поле «Имя файла» ввожу новое название картинки, если необходимо. В ниспадающем списке «Тип файла» выбираю формат «JPEG (*.JPG, *.JPEG, *.JPE)».

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

Если вместо sRGB указан другой цветовой профиль, например, ProPhotoRGB или AdobeRGB, то перед началом рассматриваемой в уроке процедуры я переведу исходное изображение в цветовое пространство sRGB в целях единообразного отображения цветов на большинстве устройств. Сделаю это следующим образом.

3 шаг

Как правильно сохранить изображение для web в Photoshop

Нажимаю на клавиатуре клавишу «Esc», чтобы закрыть окно «Сохранить как».

Выбираю в главном меню «Изображение» («Image») > «Режим» («Mode»). Если «галочка» установлена напротив «8 битканал» («8BitsChannel»), то выбираю «16 битканал» («16bitsChannel»). Увеличение глубины цвета желательно, чтобы конвертация из одного цветового профиля в другой прошла аккуратно. Визуально на исходном и итоговом изображениях изменение глубины цвета едва ли отразится.

Затем выбираю в главном меню «Редактировать» («Edit») > «Преобразовать в профиль» («Convert to Profile»). Появляется диалоговое окно с заголовком «Преобразовать в профиль».

В моём случае исходный цветовой профиль («Source Space»), который описывает цвета в рисунке, называется «Adobe RGB (1998)». Выбираю в ниспадающем списке «Целевой профиль» («Destination Space») значение «sRGB IEC61966-2.1».

Проверяю параметры преобразования – они располагаются ниже: параметр «Инструмент» («Engine») имеет значение «Adobe (ACE)», «Метод (рендеринга)» («Intent») – «Относительный колориметрический» («Relative Colorimetric»), установлена «галочка» напротив параметра «Использовать компенсацию точки чёрного» («Use Black Point Compensation»), «галочка» отсутствует напротив параметра «Свести изображение, чтобы сохранить вид» («Flatten Image to Preserve Appearance»).

Если Вы увеличили глубину цвета (я проделал это чуть раньше), то параметр «Использовать дизеринг» («Use Dither») будет неактивным. Если в открытом изображении всего один слой (когда Вы открываете JPEG-картинки или «простые» TIF-изображения, обычно, так и есть), то параметр «Свести изображение, чтобы сохранить вид», также, неактивен.

Нажимаю кнопку «Готово» («OK»). Окно «Преобразовать в профиль» исчезает.

Снова открываю окно «Сохранить как» и проделываю действия 2-ого шага.

4 шаг

Как правильно сохранить изображение для web в Photoshop

Нажимаю в окне «Сохранить как» кнопку «Сохранить».

В главном окне программы появляется новое диалоговое окно с заголовком «Параметры JPEG» («JPEG Options»).

Параметр «Качество» («Quality») позволяет задавать соотношение качества выходного изображения и объёма, который картинка будет занимать в памяти компьютера.

Таким образом, оплатой за уменьшение объёма является деградация качества исходного изображения. Чем меньше значение параметра «Качество», тем меньше объём JPEG-изображения.

В рассматриваемом примере я остановлюсь на значении равном 6.

Чтобы оценить качество картинки до сохранения, установлю рядом с параметром «Предпросмотр» («Preview») «галочку».

5 шаг

Как правильно сохранить изображение для web в Photoshop

Установлю значение второго параметра – «Форматирование» («Format Options») – равным «Стандартное оптимизированное» («Baseline Optimized»). Объём будущей JPEG-картинки уменьшился, а качество изображения осталось прежним.

6 шаг

Как правильно сохранить изображение для web в Photoshop

Нажимаю в окне «Параметры JPEG» («JPEG Options») кнопку «Готово» («OK») и проверяю результат.

Сравниваю объёмы исходного PSD-рисунка (~ 3000 Kb) и итоговой JPEG-картинки (82 Kb). Таким образом, JPEG-файл получился примерно в 36 раз меньше исходного изображения при визуально равном качестве. Удобно!

Обращаю внимание, что размер итогового JPEG-изображения остался прежним, как у исходного PSD-рисунка он равен 2480 пикселей × 2480 пикселей.

Закрываю исходное изображение. В появившемся диалогом окошке с предложением сохранить изменения, выбираю «Нет» («No»).

Второй способ

1 шаг

Как правильно сохранить изображение для web в Photoshop

  • Открываю исходное изображение в Photoshop.
  • Нажимаю на клавиатуре сочетание клавиш «Ctrl», «Alt», «Shift» и клавиши, обозначенной латинской буквой «S» либо выбираю в главном меню «Файл» > «Сохранить для Веб…» («Save for Web…»).
  • Появится новое диалоговое окно с одноимённым заголовком.

2 шаг

Как правильно сохранить изображение для web в Photoshop

В появившемся окне «Сохранить для Веб» («Save for Web») в ниспадающем списке в верхней части окна выбираю значение «JPEG».

3 шаг

Как правильно сохранить изображение для web в Photoshop

Устанавливаю значение параметра «Качество» («Quality») на максимум.

4 шаг

Как правильно сохранить изображение для web в Photoshop

Уменьшаю размер изображения с помощью параметра «Размер изображения» («Image Size»).

Это необязательная операция, но она помогает существенно уменьшить объём будущего JPEG-изображения, чаще всего, с минимальными потерями в качестве.

С одной стороны, уменьшение размера приведёт к естественному уменьшению объёма и, с другой стороны, к уменьшению детализации. Последнее, в свою очередь, ограничивает мои возможности в печати итоговой JPEG-картинки.

Если я не планирую печатать последнюю, то забуду об ограничениях.

В данном примере ввожу в поле «Ширина» («Width») значение 600. Автоматически изменится значение в поле «Высота» («Height»).

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

Изменения происходят автоматически и поле «Процент» находится в активном состоянии, если поля-параметры «Ширина» и «Высота» связаны, о чём свидетельствует соответствующий значок, расположенный справа от названных полей.

В окошке предпросмотра слева оценю размер и качество изображения. А примерный объём последнего смогу узнать по числу, указанному, обычно, в килобайтах (Kb) или мегабайтах (Mb) под левым углом окошка.

5 шаг

Устанавливаю «галочку» рядом с параметром «Оптимизированный» («Optimized»).

6 шаг

Если хочу ещё сократить объём выходного изображения, то уменьшаю значение параметра «Качество» («Quality»). Рекомендую придерживаться значений в пределах 45-90.

В данном случае я выберу значение равное 75.

В итоге, среднестатистическое, при скорости доступа в Интернет равной одному мегабиту (1 Mbits), время загрузки моего рисунка из Интернет составит одну секунду. Оно указывается под значением объёма будущего JPEG-изображения.

При этом, визуально картинка получилась вполне приемлемого качества, переходы тонов достаточно плавные.

7 шаг

Устанавливаю «галочку» рядом с параметром «Преобразовать в sRGB» («Convert to sRGB») и выбираю значение «Цвета, отображаемые монитором» («Monitor Color») в ниспадающем списке ниже.

8 шаг

Наконец, устанавливаю «галочку» рядом с параметром «Встроенный цветовой профиль» («Embed Color Profile»).

Действия на 7-ом и 8-ом шагах желательны, чтобы будущее JPEG-изображение примерно одинаково отображалось на различных устройствах.

9 шаг

Нажимаю кнопку «Сохранить…» («Save…»).

В появившемся диалоговом окне с заголовком «Сохранить оптимизированное изображение как» («Save Optimized As») выбираю месторасположение JPEG-картинки и задаю её имя, если необходимо. Нажимаю в активном окне кнопку «Сохранить». Оба окна исчезают. Теперь могу оценить результат.

Закрываю исходное изображение. В появившемся диалогом окошке с предложением сохранить изменения, выбираю «Нет» («No»).

Изображение, полученное вторым способом, удобно применять для публикации в Интернет. А изображение, полученное первым способом, можно помимо публикации в Интернет выводить на печать. В виду того, что размер изображения не изменялся, оно не подвергалось интерполяции, а значит его качество априори выше качества изображения, полученного вторым способом.

Подробнее об интерполяции и её влиянии на деградацию качества цифрового изображения я расскажу в уроке «Что такое интерполяция?»

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

  1. Прошу Вас поделиться в х результатами упражнений.
  2. Упражнения
  3. Скачайте архив (объём ~ 36 Mb) с изображениями-примерами.
  1. Подготовьте фотографию «Пример1.jpg» для публикации в электронном портфолио. Для этого создайте три JPEG-изображения максимального, насколько это возможно, качества. Пусть объём каждого (место, занимаемое в памяти компьютера) не превышает 100. При этом, пусть высота первой картинки будет равна 800 пикселам, второй – 500 пикселам, и третьей – 50 пикселам.  Какое значение параметра «Качество» Вам потребовалось установить в каждом из трёх случаев? При каком минимальном значении параметра «Качество» третья картинка выглядит приемлемо?  
  2. Подготовьте рисунок «Пример2.psd» к печати в местной фотолаборатории, которая не принимает -файлы, сохранив изображение в максимальном качестве в формате JPEG. Каков фактический объём получившейся JPEG-картинки?  
  3. Подготовьте фотографию «Пример1.jpg» к отправке на фотоконкурс. Организаторы конкурса хотят оценить не только смысловое содержание фотографии, но и её техническое качество. Поэтому они установили требования к принимаемым произведениям: объём – не более 300, размер – не менее 2048 пикселей по длинной стороне. Какая пара чисел «значения параметра “Качество” – размер по длинной стороне в пикселах» будут наиболее эффективно удовлетворять указанным требованиям?  
  4. Сохраните рисунок «Пример2.psd» в формате JPEG в 7-10 вариантах, отличающихся лишь значением параметра «Качество» на 10-15%. Например, «Пример2_10.jpg» сохраните со значением параметра «Качество» равным 10, «Пример2_20.jpg» – со значением параметра «Качество» равным 20 и так далее. При этом, размер всех вариантов уменьшите вчетверо относительно размера исходного изображения. Затем последовательно, начиная от картинки наилучшего качества, покажите в одном и том же масштабе все варианты двум-трём людям и попросите их выбрать варианты приемлемого качества. Начиная с какого значения параметра «Качество», картинка перестаёт быть визуально приятной (укажите среднее значение)?  
  5. Сохраните фотографию «Пример3.tif» в формате JPEG в трёх вариантах максимального, насколько это возможно, качества так, чтобы каждый вариант пользователь мог загрузить не более, чем за 1 секунду при скорости доступа в Интернет равной 1 Mbits. В первом варианте уменьшайте размер за счёт параметра «Качество», во втором варианте – за счёт параметра «Размер изображения» (или «Процент»), в третьем варианте – за счёт комбинирования и первого, и второго параметров. Покажите все варианты двум-трём людям и попросите их выбрать вариант наилучшего качества. Какой подход позволяет получить изображение наилучшего технического качества?
Читайте также:  Удаление объектов в photoshop cc

Примечание:

1 Одна из причин, побудивших меня подготовить данный урок заключается в следующем. Периодически я получаю фотографии и разнообразные изображения. Друзья присылают личные снимки, участники занятий – результаты выполненных заданий.

Многие из присылаемых картинок, мягко говоря, огромны «не по назначению»: как по объёму в килобайтах, так и по размеру в пикселах. Требуется время, чтобы скачать изображения.

А если фотографии, объём которых исчисляется мегабайтами, направятся ко мне во вложении к письму по электронной почте, то почтовый клиент будет воспроизводить их с временной задержкой, иногда достаточно ощутимой, и в 100% масштабе. Признаюсь, всё это создаёт неудобства.

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

Сортировать: Новые Комментируемые Просматриваемые

В этом уроке вы познакомитесь с самыми основами Photoshop. Это команды автоматической коррекции: Автотон, Автоконтраст и Автоматическая цветовая коррекция. Вы узнаете алгоритмы…

Читать дальше →

12/12/2019. Обработка фото — Photoshop и Lightroom. Евгений Карташов

7 582

7

Сегодня я хочу рассказать вам об интересной разработке, которая создана специально для того, чтобы ускорить рутинные процессы ретуши. Это расширение для Photoshop, которое…

Источник: https://photo-monster.ru/postobrabotka/read/sohranyaem-izobrajenie-v-formate-jpeg-gibko.html

Как сохранить картинку в Фотошопе, способы

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

Однако, когда я обратил внимание на процесс сохранения, то оказалось, что это довольно объёмная тема.

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

Поэтому, сегодня я решил написать подробную, понятную и достаточно развёрнутую статью о том, как сохранить картинку в Фотошопе.

Как сохранить изображение в Фотошопе

Итак, вы открыли картинку в графическом редакторе. Потратили много сил, времени и нервов. В конце концов добились нужного результата, однако не знаете, как сохранить свою работу.

Например, как обратился ко мне один подписчик:

Как сохранить фото в Фотошопе? Кое-что исправил на фотографии. А файл сохранить не получается, выскакивает какое-то предупреждение. Я новичок – скажите, как закончить работу с готовым изображением?

Честно говоря, я не понял, какое предупреждение может появляться, так как файл сохраняется в любом случае, только может меняться формат.

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

Тогда будет понятно, что спрашивает у тебя программа, при сохранении фотографии.

Как бы то ни было, я сегодня покажу все способы сохранения.

Варианты сохранения изображений

В программе есть несколько вариантов сохранения фотографий или изображений:

  1. Сохранить;
  2. Сохранить как…;
  3. Сохранить для Web.

На скриншоте хорошо видно, где находятся эти пункты. Также, вы можете увидеть горячие клавиши для сохранения в различных вариантах.

Как правильно сохранить изображение для web в Photoshop

Остановлюсь на каждом способе сохранения.

Сохранить

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

Для того, чтобы сохранить изображение, проверьте, что вы объединили все созданные слои, иначе, картинка сохранится в формате PSD.

Как правильно сохранить изображение для web в Photoshop

А ваша исходная фотография останется без изменений. Чтобы объединить слои, установите курсор на верхний слой и нажмите правую кнопку мышки. Из списка выбирайте объединить видимые – если слоёв много, объединить с предыдущим – если их только два. Если у вас есть скрытые слои, то можно выбрать – выполнить сведение.

То есть, в итоге должен остаться только один слой. Для формата JPG – слой с замочком и названием “фон”, для формата PNG без замка – называется “Слой 0”. Кажется – что всё это мелочи, на самом деле это очень важно для дальнейшего сохранения файла.

Как правильно сохранить изображение для web в Photoshop

После того, как вы убедились, что лишних слоёв нет, нажмите “файл – сохранить” или “Ctrl+S”.

Если ваша картинка в формате jpeg, то, перед сохранением появится такое окно настроек.

Как правильно сохранить изображение для web в Photoshop

Здесь вы можете указать программе в каком качестве сохранять фото.

Как правильно сохранить изображение для web в Photoshop

Важно понять, что чем выше качество, тем тяжелей вес изображения. Так что вам придётся выбирать между качеством и весом. Меняя качество наблюдайте за изменением картинки. Иногда смена качества не портит изображение вовсе. Установите нужное значение и нажмите ок. Теперь можно закрывать картинку, так как она успешно сохранилась.

Я вот думаю, что возможно моему подписчику именно такое “предупреждение” вышло, только на английском.

Теперь рассмотрим, как сохранить картинку в PNG формате.

Сохранить картинку в PNG

Вернее, я хочу рассказать как сохранить обработанную PNG картинку. Допустим вы открыли изображение в PNG формате, внесли изменения, соединили все слои. Хочу отметить, что  если это PNG файл, то нельзя выполнять сведение слоёв.

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

Как правильно сохранить изображение для web в Photoshop

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

Сохранить как

К пункту сохранить как мы прибегаем в случаях:

  1. Когда нудно поменять формат изображения, к примеру jpeg заменить на png или на gif файл, то есть конвертировать.
  2. Когда нужен дубликат изображения, к примеру вы хотите оставить исходную картинку и обработанное изображение. Тогда нажимайте сохранить как, выбирайте папку, куда хотите сохранить и замените название картинки, если сохраняете в ту же папку, где находится исходник.
    Как правильно сохранить изображение для web в Photoshop

Процедура сохранения такая же, как я описывал в предыдущем разделе.

Сохранить для Web

Наконец мы добрались до последнего способа сохранения. Скажу честно, я им пользуюсь чаще всего. Причин на то несколько, но, обо всём по порядку. Если вы обрабатывали фото и планируете его распечатать, то не рекомендуется его сохранять для Web.

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

Чем же отличаются картинки в Интернете, от тех изображений, что идут для печати. Прежде всего – разрешением. Изображению в Интернете хватает 72 пикселя на сантиметр в квадрате, чтобы оно нормально воспринималось глазом.

Но, если такую картинку распечатать – она потеряет практически всё – резкость, качество, цвет и так далее. Наилучшее разрешение картинок для печати – 300 пикселей на сантиметр в квадрате. Для Интернета такие фотографии слишком тяжёлые, занимают много места.

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

При этом неважно, сколько слоёв, свели их или нет, есть замочек или нет. Для этого сохранения программа автоматически считывает только видимые слои, временно объединяя их в одно изображение.

В специальном окне программа предложит указать в каком формате желательно сохранить картинку.

Как правильно сохранить изображение для web в Photoshop

Если это jpeg, то указать качество.

Как правильно сохранить изображение для web в Photoshop

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

Читайте также:  Основные средства управления для редактирования видео в photoshop

По остальным параметрам я полагаюсь на программу, она чаще всего выбирает самые оптимальные параметры. Когда всё установлено, выбран формат, качество, смело жмите – сохранить.

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

Но, на всякий случай, сохраните эту страничку в закладки, а ещё лучше – подпишитесь на мой блог. Тогда вы первым узнаете о выходе новых статей. Не забудьте нажать на кнопки социальных сетей, вам не сложно, мне приятно, ведь я старался для вас.

Советую прочитать:

  • Как выделить объект в Фотошопе и отделить от фона;
  • Как сделать водяной знак в Фотошопе;
  • Изменить размер изображения в Фотошопе;
  • Как вставить фото в фото в Фотошопе;
  • Как перенести объект в Фотошопе (Photoshop).

P.S. Прикладываю скриншот моих заработков в партнёрских программах. И напоминаю, что так зарабатывать может каждый, даже новичок! Главное – правильно это делать, а значит, научиться у тех, кто уже зарабатывает, то есть, у профессионалов Интернет бизнеса.

Как правильно сохранить изображение для web в Photoshop
Заберите список проверенных, особенно актуальных, Партнёрских Программ 2018 года, которые платят деньги!

Скачайте чек-лист и ценные бонусы бесплатно

=>> «Лучшие партнёрки 2018 года»

Источник: https://ingenerhvostov.ru/photoshop/kak-sohranit-kartinku-v-fotoshope-sposobyi.html

Как настроить цветопередачу для публикации фото в интернете?

Иногда после обработки фотографий в Lightroom или Photoshop у некоторых пользователей фотографии отличаются по цветам и контрасту при сохранении и загрузке их в интернет, просмотре в другом графическом редакторе или просто на компьютере. Выглядят не так, как в фотошопе или лайтруме. 

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

Adobe Lightroom

Начнем с лайтрума. Тут достаточно установить правильные параметры экспорта фотографий. После обработки фотографии мы нажимаем «экспорт» и в появившемся окошке проверяем, чтобы в разделе «формат файла» было указано «цветовое пространство» sRGB . Вот и все!

Как правильно сохранить изображение для web в Photoshop

  1. А также, если вы сохраняете фотографии для публикации в интернете, в соцсетях или на форумах, нужно заранее подготовить фотографии, чтобы при загрузке на соответствующий ресурс они не теряли качество и насыщенность.
  2. Формат файла
  3. Как правильно сохранить изображение для web в Photoshop

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

Размер фотографии стоит выбирать исходя из простой логики, чтобы при просмотре и с мобильного телефона, и с компьютера она сохранила свою резкость. Оптимальным размером для интернета сейчас являются значения от 1400 пикселей по длинной стороне, до 2100. В частности для «ВКонтакте» идеальным будет 1680 пикселей по длинной стороне.

Как правильно сохранить изображение для web в Photoshop

Резкость вывода. Для интернета – чем больше, тем лучше. В разумных пределах. В лайтруме ставим «сильная».

Как правильно сохранить изображение для web в Photoshop

После этих настроек ваша фотография готова к публикации в интернете.

Adobe Photoshop

Для того, чтобы настроить правильную цветопредачу в фотошоп, заходим в «редактирование», «настройка цветов».

Как правильно сохранить изображение для web в Photoshop

И в появившемся окне выбрать настройки «универсальные настройки для Европы 3».

Как правильно сохранить изображение для web в Photoshop

Если в вашем фотошопе нет предустановок для Европы, то просто выставите в поле RGB – «sRGB IEC61966-2.1», там всегда будет один профиль sRGB.

Как правильно сохранить изображение для web в Photoshop

Кликаем ok, идем дальше.

«Просмотр» – «варианты цветопробы» – и ставим интернет-стандарт sRGB.

Как правильно сохранить изображение для web в Photoshop

  • А также при открытии RAW-файла в фотошопе обратите внимание и выставите профиль sRGB.
  • Теперь ваш фотошоп правильно воспроизводит и сохраняет все цвета фотографии.

Сохранение фотографии для интернета в Adobe Photoshop

Подготовить фотографию для экспорта в интернет можно и в фотошопе. Для этого нужно сначала ее уменьшить, потом добавить резкости.

Уменьшаем через «изображение» – «размер изображения»:

Выставляем единицу измерения «пиксели» и в поле «ширина» указываем необходимый нам размер. Ресамплинг оставляем автоматический или ставим «бикубическая (с уменьшением)».

После уменьшения нужно добавить резкости на фотографию. Для этого отлично подойдет «умная резкость».

Обязательно делаем новый слой и заходим в «фильтр» – «усиление резкости» – «умная резкость».

Уменьшение шума ставим на 0. Радиус для уменьшенной фотографии находим в диапазоне от 0,3 до 1. Для фотографии размером 1680 пикселей по длинной стороне подойдет радиус 0,4 – 0,5. Эффект также находим в диапазоне от 70 до 150.

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

Значения резкости подбираются на глаз, но для интернета лучше делать больше резкости. Фотография будет смотреться на экране намного выразительнее.

Поделиться в социальных сетях 5770

Источник: https://www.blenda.by/blog/kak-nastroit-cvetoperedachu-v-lightroom-i-photoshop-i-sohranit-fotografii-dlya-publikacii-v-internet/

Как правильно сохранять изображения в Photoshop?

Работая с графическим редактором Adobe Photoshop вот уже 5 лет, я удивился узнав, что не все знают о важности и необходимости правильно сохранять изображения. Обратившись к интернету, я действительно не нашел актуальной и правильной информации по этой теме. По этой причине, я разобрался в вопросе и хочу рассказать вам как правильно сохранять изображения.

Кому это нужно знать и зачем?

Всем — кто работает с графическим редактором, не обязательно Adobe Photoshop. Иллюстратор, художник, графический дизайнер, веб-дизайнер, проектировщик интерфейсов, фотограф, студент, школьник — научившись правильно сохранять изображения, уменьшая размер файла, вы экономите не только свое, но и чужое время.

О каком времени речь?

Для начала проясним одну вещь:

Используя интернет, вы теряете время — много времени

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

Допустим, средняя скорость загрузки страницы 3 секунд, где 2 из них приходятся на загрузку изображений.

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

Не обманывайте себя «мегабайтами в секунду»

Скорее всего, ваш интернет-провайдер обещает вам 100 Мбит/с — это гениальный рекламный ход (читайте как: обман) породивший множество заблуждений, в том числе и в теме скорости загрузки сайта. Я замерил скорость соединения с сервером расположенным в Москве, результат:

Как правильно сохранить изображение для web в PhotoshopСкорость соединения с Московским сервером ~53 Мбит/сек — seogadget.ru/internet

А вот скорость загрузки страницы с сайта upages.io значительно ниже:

Как правильно сохранить изображение для web в PhotoshopСкорость загрузки страницы сайта upages. io ~300 Мбит/сек — seogadget.ru/sitespeedСколько изображений в день вы просматриваете?

Десятки? Сотни? Я как активный пользователь интернета просматриваю несколько сотен изображен в день, причем большинство из них высокого разрешения. Если уменьшить вес этих изображений и соответственно увеличить скорость загрузки, хотя бы на 1 секунду, умножив на 500 изображений в день, то получим около 8 минут в день и 4 часа в месяц.

4 часа в месяц я ожидаю, когда загрузится картинка

Все, что нужно знать о сохранении изображений

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

Вредной привычкой является установка качества в значение 100, но в сравнении с 80 разнится видимого качества практически равна нулю, а вот разница в весе ощутима.

Как правильно сохранить изображение для web в PhotoshopНеправильный способ сохранения изображения ~360 Кбайт

Для размещения изображения на сайте, передаче по почте, сохранения в облаке, отправке в мессенджере и т. п. — необходимо использовать Save for Web.

Как правильно сохранить изображение для web в Photoshop

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

Как правильно сохранить изображение для web в PhotoshopПравильный способ сохранения изображения ~160 Кбайт

JPEG или PNG?

JPEG — для изображений с большим количеством цветов и сложных фигур: иллюстраций, картин, фотографий.

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

Какое качество (Quality) выбрать?

Для большинства изображений оптимальным значением будет 80, для некоторых простых изображений, где не важен четкий переход между цветами. можно поставить значение 60.

Оптимизация (Optimized)

Функция включает дополнительный алгоритм по преобразованию цветов, рекомендуется включать всегда, кроме случаев, когда важны самые мельчайшие детали (например Pixel Art).

Преобразовать в sRGB (Convert to sRGB)

Преобразование цветов изображения к соответствующей таблице sRGB.

sRGB является стандартом для интернета

Разрешение (Image Size)

Самым распространенным разрешением экрана является: 1366×768 — для компьютера и 720×1280 — для смартфона. Имейте это ввиду и не сохраняйте изображения больше, чем 1920 по ширине.

Метаданные (Metadata)

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

Когда вы последний раз смотрели подробную информацию скачанного изображения?

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

Источник: https://upages.io/nahodki/kak_pravilno_sokhranyat_izobrazheniya_v_photoshop

Сохранить для web или save for web в photoshop

Для многих вебмастеров оптимизация изображений для WEB-среды представляет собой обработку картинок и сохранение их в разных форматах: gif (1-256 цветов), png-8 (1-256 цветов), png, jpeg. После оптимизации картинок их вес должен быть наименьшим. Обычно страница сайта вместе с картинками не должна быть более 600 Кбайт. Размер картинок напрямую зависит от её качества. Чем меньше вес картинки, тем хуже её качество и наоборот. Если картинка содержит в себе 2-3 цвета, то её можно сохранить в форматах: gif, png-8. Если сайт содержит в себе много не оптимизированных картинок, то происходит большая нагрузка на сервер и пользователь с медленным интернетом может так и не дождаться загрузки страницы. В таких случаях пользователь уходит на другой сайт с “лёгкими” страницами. Одной из главных целей любого вебмастера является удержание посетителя на своём сайте.

Читайте также:  Обводка контура и текста в photoshop

окно “Сохранить для web и устройств” Как правильно сохранить изображение для web в Photoshop

Можно настроить качество изображения и количество цветов. Чем меньше цветов, тем меньше вес картинки. Но не увлекайтесь. Фотографии не стоит сохранять в gif и png-8 форматах. Для них подойдет jpeg c алгоритмами сжатия и png-24 с поддержкой прозрачных областей. Сохраним картинку для веб-среды. В строке меню выберем пункт “Сохранить для WEB и устройств” или “save for web”.

пункт “Сохранить для web и устройств” Как правильно сохранить изображение для web в Photoshop

В выпадающем списке выберем “jpeg”. Поставим галочку у режима “Прогрессивный”. В поле качество поставим значение 80%. Для сайтов хорошо подойдёт такая оптимизация. Алгоритмы сжатия jpeg портят качество картинки, но именно они позволяют уменьшить вес картинки.

При оптимизации внимательно смотрите на то, как будет выглядеть ваша картинка с алгоритмами сжатия. Для этого в окне найдите вкладку “2 варианта”.

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

настройка оптимизации изображения Как правильно сохранить изображение для web в Photoshop

Тут придётся искать золотую середину между качеством и весом картинки. Форматы gif, png-8, png-24 позволяют использовать прозрачность. Формат jpeg не поддерживает прозрачность.

Если вы пытаетесь сохранить картинку с прозрачностью в jpeg формате, то photoshop автоматически сохранит картинку с белым фоном. В том месте, где вы планировали прозрачный участок, появится белое поле.

Все картинки, которые вы планируете закачать на сайт, должны иметь разрешение в 72 dpi. Именно такое разрешение должно быть у картинок.

Источник: http://egorch.ru/post/save-image-web-photoshop/

Сохранение изображений в Adobe Photoshop

Начиная с версии Photoshop CC 2015, параметр Файл > Сохранить для Web перемещен в пункт Файл > Экспорт > Сохранить для Web (старая версия) вместе с новыми параметрами экспорта.

Сведения об этих новых параметрах экспорта см. в разделе Экспорт монтажных областей, слоев и других ресурсов.

Чтобы сохранить изменения в текущем файле, воспользуйтесь командой «Сохранить». Команда «Сохранить как…» позволяет сохранить изменения в другой файл.

  1. Выберите «Файл» > «Сохранить».

    Файл остается в текущем формате.

  1. Выберите команду «Файл» > «Сохранить как…».

    Примечание.

    С помощью внешнего модуля Camera Raw изображения Camera RAW можно сохранять в другом формате файла, например в формате Digital Negative (DNG).

  2. Выберите формат в меню «Типы файлов».

    Примечание.

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

  3. Укажите имя и местоположение файла.
  4. В диалоговом окне «Сохранить как…» выберите параметры сохранения.
  5. Нажмите кнопку «Сохранить».

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

    Примечание.

    Чтобы копировать изображение, не сохраняя его на жесткий диск, используйте команду «Создать дубликат». Чтобы сохранить временную версию изображения в памяти, используйте панель «История» для создания снимка.

В диалоговом окне «Сохранить как…» можно задать различные параметры сохранения файла. Доступность параметров зависит от характеристик сохраняемого изображения и выбранного формата файла.

Сохраняет копию файла, оставляя текущий файл открытым на рабочем столе.

Сохраняет информацию об альфа-канале в данных изображения. Отключение этого параметра удаляет альфа-каналы из сохраненного изображения.

Сохраняет все слои в изображении. Если этот параметр отключен или недоступен, все видимые слои сводятся или совмещаются (в зависимости от выбранного формата).

Сохраняет комментарии к изображению.

Сохраняет информацию о плашечном канале в данных изображения. Отключение этого параметра удаляет плашечные каналы из сохраненного изображения.

Использовать параметры цветопробы, ICC-профиль (Windows) или встроенный профиль (Mac OS)

Создает документ с цветовым профилем.

Примечание.

Следующие параметры просмотра изображения и расширения файла доступны только в случае, если значение «По заказу» выбрано для параметров «Просмотры изображений» и «Добавлять расширение» (в Mac OS) в диалоговом окне «Установки обработки файлов».

Сохраняет данные миниатюры для файла.

Для расширения файла используйте нижний регистр (в Windows)

Обеспечивает начертание расширения файла строчными буквами.

Параметры просмотра изображений (Mac OS)

Сохраняет данные миниатюры для файла. Миниатюры отображаются в диалоговом окне «Открыть».

Параметры расширений файлов (Mac OS)

Задает формат для расширений файлов. Установите флажки «Добавить», чтобы добавить расширение формата к имени файла, и «Строчными буквами», чтобы расширение отображалось строчными буквами.

  1. Выполните одно из следующих действий.
    • (Windows) Выберите «Редактирование» > «Установки» > «Обработка файлов».
    • (Mac OS) Выберите «Photoshop» > «Установки» > «Обработка файлов».
  2. Определите значения для следующих параметров.

    Выберите параметр для сохранения просмотров изображений: «Никогда» для сохранения файлов без просмотров, «Всегда» для сохранения файлов с указанными просмотрами или «По заказу», чтобы назначать просмотры для каждого файла отдельно. В Mac OS можно выбрать один или несколько типов просмотра. (См. раздел Параметры просмотра изображений в Mac OS.)

    Расширение файла (Windows)

    Выберите параметр для трехбуквенных расширений файлов, указывающих на формат файла. Используйте параметр «Прописными буквами» для начертания расширений файлов прописными буквами либо «Строчными буквами» для начертания расширений файлов строчными буквами.

    Добавлять расширение (Mac OS)

    Расширения необходимы для файлов, используемых или переносимых на компьютер под управлением Windows.

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

    Сохранить как в исходную папку

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

    Фоновое сохранение позволяет продолжать работать в Photoshop после того, как будет выбрана команда «Сохранить». Ожидать, пока Photoshop завершит сохранение файла, не потребуется.

    Автоматическое сохранение информации о восстановлении

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

В Mac OS можно выбрать один или несколько из следующих типов просмотра (для ускорения процесса сохранения файлов и минимизации размера файлов выбирайте только необходимые типы просмотра).

Использует просмотр в виде значка файла на рабочем столе.

Сохраняет версию файла 72 ppi для использования в приложениях, в которых можно открывать изображения Photoshop только в низком разрешении. Просмотр PICT используется для файлов не в формате EPS.

Отображает просмотр в диалоговом окне «Открыть».

Сохраняет просмотр, который может быть отображен системами Windows.

Photoshop поддерживает документы размером до 300 000 пикселов в любом измерении и предлагает три формата файлов для сохранения документов с изображениями любого размера и более чем 30 000 пикселов.

Имейте в виду, что большинством других приложений, включая более ранние версии Photoshop, чем Photoshop CS, не могут обрабатываться файлы, размер которых превышает 2 ГБ, либо изображения любого размера и более чем 30 000 пикселов.

  1. Вызовите команду «Файл» > Сохранить как и выберите один из следующих форматов файла.

    Формат больших документов (PSB)

    Поддерживает документы с любым размером файла. В файлах PSB сохраняются все возможности Photoshop (хотя некоторые фильтры внешних модулей недоступны, если ширина или высота документа превышает 30 000 пикселов). В настоящее время файлы PSB поддерживаются только в Photoshop CS и более поздних версиях.

    Поддерживает документы любых размеров (по размерам в пикселах или по размерам файлов), но не поддерживает слои. Большие документы, сохраняемые в формате Photoshop Raw, сводятся.

    Поддерживает файлы размером до 4 ГБ. Документы, размер которых превышает 4 ГБ, не могут быть сохранены в формате TIFF.

Можно экспортировать и сохранять слои как отдельные файлы с использованием множества различных форматов, включая PSD, BMP, JPEG, PDF, Targa и TIFF. Слои именуются автоматически по мере сохранения. Можно задать параметры для управления генерацией имен.

  1. Выберите «Файл» > «Экспорт» > «Экспортировать слои в файлы».

  2. В диалоговом окне «Экспорт слоев в файлы» в разделе «Выходная папка» нажмите кнопку «Обзор», чтобы выбрать место сохранения для экспортируемых файлов. По умолчанию создаваемые файлы сохраняются в той же папке, где хранится исходный файл.
  3. Введите имя в текстовом поле «Префикс имени файла», чтобы задать общее имя для файлов.
  4. Выберите параметр «Только видимые слои», если необходимо экспортировать только те слои, для которых включена видимость на панели «Слои». Используйте этот параметр, если нет необходимости экспортировать все слои. Отключите видимость для слоев, которые экспортировать не нужно.
  5. В меню «Тип файла» выберите формат файла. Задайте необходимые параметры.
  6. Выберите параметр «Включить ICC-профиль», если необходимо встроить профиль рабочего пространства в экспортируемый файл. Этот параметр важен для рабочих потоков с цветовым профилем.
  7. Нажмите кнопку «Выполнить».

Источник: https://helpx.adobe.com/ru/photoshop/using/saving-images.html

Ссылка на основную публикацию