Как сохранить в Интернете в фотошопе

Обновлено: 04.07.2024

Сохранить для Интернета в Adobe Photoshop CC 2015 было перемещено в меню из меню «Файл» -> «Сохранить для Интернета» в «Файл» -> «Экспорт» -> «Сохранить для Интернета» (предыдущая версия).

Куда он делся?

Файл -> Сохранить для Интернета

Файл -> Экспорт -> Сохранить для Интернета (предыдущая версия)

Из первых уст

Вот официальное уведомление от Adobe об этом: «Сохранить для Интернета в Photoshop CC 2015».

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

Я не особо пользуюсь меню и использую несколько неудобное сочетание клавиш Cmd+Option+Shift+C, поэтому даже не заметил изменения. Моя жена, с другой стороны, использует меню, а не сочетания клавиш, и этот дополнительный шаг в меню делает текущий рабочий процесс намного более неудобным.

Решение 1: используйте сочетания клавиш

Первое решение для ускорения работы — использование горячих клавиш. Cmd+Option+Shift+C используется по умолчанию, но вы всегда можете изменить сочетания клавиш в меню «Правка» -> «Сочетания клавиш». Лично я предпочитаю стараться не менять сочетания клавиш, чтобы привыкнуть к ним на тот случай, если мне понадобится для чего-то использовать чужой компьютер.

Решение 2. Установите надстройку «Помощник по экспорту»

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

Перейдите на страницу Photoshop Export Helper, чтобы установить его.

У вас должна быть включена синхронизация файлов Creative Cloud, и они будут автоматически загружены. Перезапустите Photoshop, и он будет находиться в разделе «Окно» -> «Расширения». Когда вы щелкнете по нему, панель появится, но вам, вероятно, придется перетащить ее на другую группу панелей, иначе я обнаружил, что она имеет тенденцию исчезать, скрываться или что-то в этом роде.

Чтобы убедиться, что синхронизация файлов Creative Cloud включена, перейдите в Creative Cloud, нажмите шестеренку, выберите «Настройки», затем «Creative Cloud», затем «Файлы», и функция синхронизации появится. На скриншотах ниже показано, как это сделать на Mac; извините, я не могу помочь с Windows.

Оптимизация для Интернета – это процесс сжатия изображений и настройки параметров отображения для оптимального использования в Интернете. Когда вы размещаете изображения в Интернете, размер файла становится важным; вы хотите добиться размера файла, который достаточно мал, чтобы позволить разумное время загрузки, но достаточно велик, чтобы сохранить цвета и детали в соответствии с вашими требованиями. В Интернете используются три основных формата графических файлов: GIF, JPEG и PNG.

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

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

Чтобы точно оптимизировать изображение для использования в веб-приложениях, таких как Adobe® Dreamweaver®, можно использовать команду «Сохранить для Интернета». Диалоговое окно «Сохранить для Интернета» позволяет предварительно просмотреть изображение в различных форматах файлов и с различными настройками оптимизации. Вы также можете установить параметры прозрачности и анимации.

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

Используйте диалоговое окно «Сохранить для Интернета», чтобы просмотреть влияние различных параметров оптимизации на фотографию, которую вы хотите опубликовать в Интернете. Процесс прост. Откройте фотографию и выберите «Файл» > «Сохранить для Интернета». Затем выберите формат в меню формата файла (GIF, JPEG, PNG-8 или PNG-24) и задайте нужные параметры. (Меню формата файла находится непосредственно под меню Preset.) Это сохраняет копию вашего файла, не перезаписывая исходное изображение.

Диалоговое окно «Сохранить для Интернета»

А. Панель инструментов B. Цвет пипетки C. Параметры оптимизации и всплывающее меню для дополнительных параметров D. Размер изображения E. Параметры анимации F. Меню уровня масштабирования G. Меню предварительного просмотра в браузере H. Исходное изображение I. Оптимизированное изображение

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

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

Небольшая панель инструментов расположена в верхнем левом углу диалогового окна. Чтобы просмотреть различные области изображения, выберите инструмент «Рука» и перетащите его, чтобы отобразить эти области. Чтобы увеличить изображение, выберите инструмент «Масштаб» и щелкните вид; затем, удерживая нажатой клавишу Alt, щелкните еще раз, чтобы уменьшить масштаб. (Кроме того, вы можете использовать поле «Масштаб» в нижней части диалогового окна.) Чтобы создать матовые цвета, используйте инструмент «Пипетка».

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

В большинстве случаев это лучший формат для сохранения фотографий.

Как и JPEG, это хороший формат для фотографий. Выбирайте PNG-24 вместо JPEG, только если ваше изображение содержит прозрачность. (JPEG не поддерживает прозрачность; вы должны заполнить его матовым цветом.) Файлы PNG-24 часто намного больше, чем файлы JPEG того же изображения.

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

PNG‑8 – менее известная альтернатива GIF. Используйте его для тех же целей (кроме анимации).

Изображения в форматах GIF и PNG-8, иногда называемые изображениями с индексированными цветами, могут отображать до 256 цветов. Чтобы преобразовать изображение в формат с индексированными цветами, Photoshop Elements создает таблицу поиска цветов. Если цвет исходного изображения не отображается в таблице поиска цветов, приложение либо выбирает ближайший цвет в таблице, либо имитирует цвет, используя комбинацию доступных цветов.

Файлы JPEG и PNG-24 поддерживают 24-битный цвет, поэтому они могут отображать до 16 миллионов цветов. В зависимости от формата вы можете указать качество изображения, прозрачность или матирование фона, цветное отображение и метод, который браузер должен использовать для отображения изображения во время загрузки.

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

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

Название каждой предустановки отражает формат файла и уровень качества. Например, выберите JPEG High, чтобы оптимизировать изображение в формате JPEG с высоким качеством изображения и низким уровнем сжатия. Выберите GIF 32 Dithered, чтобы оптимизировать изображение в формате GIF, уменьшить количество цветов до 32 и применить дизеринг.

Брайан Хейнс написал об онлайн-бизнесе для The Balance Small Business. Он серийный предприниматель с более чем 10-летним опытом.

Одной из наиболее важных функций Photoshop является функция «Сохранить для Интернета/устройств».

Зачем его использовать? Хотя вы можете просто сохранить файл стандартным способом, таким как «Файл» / «Сохранить как», функция «Сохранить для Интернета/устройств» выполняет три важные функции.

Он оптимизирует размеры файла (например, 150 x 150 пикселей), что позволяет ему лучше вписываться в веб-страницы, выглядеть лучше и менее искаженно.
Он оптимизирует размер файла (например, 23 КБ), что позволяет загружать его быстрее.
Он сохраняется в формате RGB (или монитора), а не в формате CMYK (печать).

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

Откройте исходный файл

Чтобы начать, вам нужно перейти в меню "Файл/Открыть", чтобы открыть файл. Это может быть любой формат — jpg, gif, psd, png или другие. Пока Photoshop может открыть его, вы можете вывести его для Интернета.

Сохранение файла для Интернета

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

Перейдите в меню «Файл» / «Сохранить для Интернета/устройств» и нажмите.Это примерно половина раскрывающегося меню.

Этот процесс никак не меняет исходный файл. Вы создаете новый файл. После того, как вы закончите этот урок и вернетесь к исходному изображению в Photoshop, вам нужно будет сохранить этот файл, если вы внесли в него какие-либо изменения. Важно назвать новое изображение иначе, чем исходное. Часто достаточно просто добавить _web к имени файла. (пример: filename_web.jpg)

Настроить представление сравнения на 2 варианта

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

Если вы посмотрите в верхнюю часть окна, вы увидите следующие варианты: Исходный, Оптимизированный, 2-в-одном, 4-в-одном. В большинстве случаев 2-Up — это то, что вам нужно.

Установите размер просмотра на 100 %

Чтобы убедиться, что вы просматриваете на 100 %, установите флажок в левом нижнем углу экрана.

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

Выберите размеры файла

Размеры для Интернета почти всегда указываются в пикселях (px). Важно соблюдать пропорции. Рядом с полем изображения находится небольшое изображение звена цепи. Что это делает, так это масштабирование ширины при настройке высоты. Например, изображение размером 600 на 400 пикселей. Если вы уменьшите ширину до 300 пикселей, файл автоматически масштабируется до высоты 200 пикселей. Если флажок не установлен, изображение будет искажено.

У вас также есть возможность масштабировать изображение в процентах.

Выберите тип файла для экспорта

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

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

Наиболее распространенным в Интернете является формат jpg. Это наименьший формат файла, который означает, что посетители вашего сайта загружают его быстрее. Если у вас есть прозрачность, выберите png-24. Если вы не знаете, что означает прозрачность, вам следует выбрать jpg.

Выберите качество изображения

Каждый из трех параметров jpg (высокий, средний, низкий) имеет предустановленные настройки качества, которые можно настроить вручную. Если вы просматриваете на 100%, вы можете решить, какое качество вам нужно. Чтобы настроить уровень масштабирования, см. Шаг 5. Изображение будет выглядеть в Интернете так же, как и в окне предварительного просмотра.

Если вы выбрали формат, отличный от jpg, этот шаг можно пропустить.

Сохраните файл

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

Сохранить для Интернета – это полезная функция более поздних версий Adobe Photoshop, которая позволяет нам найти лучший компромисс между размером и качеством, чтобы сохранить приличный вид JPEG, PNG или GIF. Это достигается за счет снижения качества и удаления ненужных метаданных. В этом учебном пособии основное внимание уделяется JPEG, и оно поможет вам понять, как работает функция «Сохранить для Интернета», чтобы вы могли получить наилучший результат для своих нужд.

1. Сохранить для веб-основ

Начните с изображения. Отличительной особенностью Save For Web является то, что вы не вносите никаких изменений в исходный файл, он будет сохранен как новый файл; вам также не обязательно иметь правильный размер.

Нажмите "Файл" > "Сохранить для Интернета"

Нажмите "Файл" > "Сохранить для Интернета" (Control-Alt-Shift-S)

Формат и размер «Сохранить для Интернета»

Это то, что вы должны увидеть. Мы рассмотрим две вещи: формат и размер. Что бы вы ни изменили, это не изменит ваш оригинал, так что не беспокойтесь об этом. Я собираюсь изменить это значение на 1000 пикселей, чтобы мы все еще могли видеть, что мы делаем. Вы можете работать с гораздо меньшими размерами для Интернета, и это нормально. Если вы нажмете 2-Up вверху, вы сможете увидеть исходный файл слева и то, что будет вашим меньшим файлом для сохранения в Интернете, справа.

2-up позволяет сравнить оригинал со сжатым изображением

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

Вы заметите, что в разделе "Качество" по умолчанию установлено бикубическое значение. Как правило, это лучший выбор, поскольку он сэмплирует больше пикселей, чем другие, но вы заметите, что для этого есть три варианта: бикубический, бикубический более резкий и бикубический сглаженный. Согласно Adobe, Bicubic Sharper дает лучшие результаты при уменьшении размера изображения, но если вы не уверены, Bicubic подойдет.

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

2. Сбалансируйте качество JPEG и размер файла

Вы могли заметить, что рядом с 2-Up стоит 4-Up. Это действительно может помочь нам сравнить качественные образцы

Сравнение оригинала и трех копий, сжатых в разной степени

Здесь оригинал показан вверху слева (1,83 МБ), максимальное качество — вверху справа (696,3 КБ), высокое качество — внизу слева (150,1 КБ) и среднего качества в правом нижнем углу (101,2 КБ). Отметка «Оптимизировано» также немного уменьшит размер файла.

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

Сравнение сжатия файлов Save For Web на каждом основном этапе

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

3. Предварительный просмотр в браузере и сохранение

Предварительный просмотр изображения в веб-браузере

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

Заключение

Сохранение изображений для Интернета — это компромисс. Вы хотите, чтобы ваше изображение загружалось быстро, не занимало слишком много места (это особенно важно для сторонних веб-сайтов, таких как Facebook и Twitter, которые просто не допускают больших размеров) и при этом выглядело великолепно. С помощью «Сохранить для Интернета» вы можете более точно настроить изображение для Интернета, чем раньше, тщательно находя компромисс между сжатием/размером и качеством. Сделайте это правильно, и вы окажетесь на шаг впереди всех тех, кто по-прежнему добавляет полноразмерные изображения на свои веб-сайты, в профили и портфолио и позволяет программному обеспечению делать наилучшие предположения.

Читайте также: