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

Обновлено: 04.07.2024

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

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

Сохранение

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

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

В формате JPG и PNG

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

Экспорт в JPG и PNG:

Открываем пункт меню «Файл».
Переходим в раздел «Экспорт» и кликаем по строчке «Экспортировать слои в файлы».
Выбираем место для сохранения нажав на кнопку «Обзор».
Определяемся с префиксом.
В некоторых случаях отпадает необходимость в сохранении скрытых уровней, поэтому ставим маркер на строчке «Только видимые слои».
Указываем формат экспорта – JPG или PNG.
Нажимаем на кнопку «Выполнить».

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

В GIF

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

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

Сохранение в GIF:

Открываем пункт основного меню «Файл».
Переходим в категорию «Экспортировать».
Кликаем по строчке «Сохранить для Web (старая версия)».
В появившемся диалоговом окне в разделе «Набор» выбираем «GIF 128 с дизерингом» из выпадающего списка.
В блоке «Параметры повторов» должно стоять значение «Постоянно».
Определяемся с папкой для сохранения.
Кликаем по кнопке «Сохранить».

Возможные сложности

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

Ещё одна распространённая ошибка – «Возникла проблема с Генератором». Следует сохранить проект в штатном режиме и перезапустить программу. Если ошибка не пропала, то отключить сторонние плагины/дополнения и повторить попытку.

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

Видео-инструкция по сохранению:

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

Описание элементов диалогового окна

(Нажмите, чтобы увеличить)

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

слева – панель инструментов;
сверху – параметры отображения изображения;
в центре – область просмотра;
справа – инструменты управления оптимизацией;
внизу – некоторые сервисные параметры;

Панель инструментов

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

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

После нажатия на инструмент Масштаб и наведения курсора на изображение появляется значок лупы. Каждый щелчок мышью увеличивает масштаб изображения (при удержании клавиши Alt – уменьшает). В контекстном меню, открывающемся по правому клику, можно выбрать необходимый масштаб из списка или показать изображение во всё окно или экран. Также можно выделить часть изображения рамкой, чтобы увеличить этот фрагмент.

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

Параметры отображения

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

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

Управление оптимизацией

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

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

JPEG

В списке «Набор» и его подсписке (под JPEG) уточняется качество оптимизированного изображения. Оно имеет 5 вариантов:

наилучшее (по умолчанию);
очень высокое;
высокое;
среднее;
низкое.

При выборе перечисленных вариантом автоматически устанавливается значение параметра Качества в 100, 80, 60, 30 и 10 соответственно. Выбор худшего качества производится в случае, когда размер изображения неприемлемо велик.

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

В списке Матовый/Подложка при необходимости можно задать раскраску прозрачных пикселей. Доступны основной цвет, цвет фона, пипетки, белый и чёрный.

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

GIF или PNG

Форматы GIF и PNG-8 работают с ограниченной палитрой цветов глубиной 8 разрядов. Рисунки этих форматов используют до 256 оттенков, хранящихся в специальной таблице цветов, появляющейся при работе с GIF и PNG. При отсутствии нужного цвета производится дизеринг – его имитация смешиванием других цветов. Высокий процент дизеринга позволяет сохранить больше деталей и цветов, но и увеличивает вес файла. Дизеринг рекомендуется применять для градиентных изображений.

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

В левом от него списке выбирается метод создания таблицы цветов со следующими основными вариантами:

перцепционная – с предпочтением тех цветов, к которым глаз максимально чувствителен;
селективная (по умолчанию) – с дополнительным предпочтением цветов больших фрагментов изображения;
адаптивная – с предпочтением цветов преобладающего спектра;
ограниченная (безопасная палитра Web) – с полным исключением дизеринга.

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

В следующем списке выбирается алгоритма дизеринга из 3 вариантов:

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

Дополнительные регулировки доступны в нескольких списках справа. В списке Дизеринг его процент может изменяться плавным перемещением ползунка. В списке Web-цвета таким же образом можно регулировать и их процент.

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

Сервисные параметры нижней части окна

Внизу диалогового окна дублируется возможность масштабирования изображения. Справа внизу можно изменять размер изображения в пикселях или процентах. Чуть ниже находятся кнопки Сохранить и Готово. Очень удобна возможность периодического просмотра оптимизируемого изображения в браузере, реализуемая по нажатию кнопки Просмотр.

Сохранение/удаление набора параметров

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

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

После сохранения своих настроек, они станут доступны в списке Набор:

Для удаления созданного пользовательского набора:

в списке Набор выберите его имя;
Откройте окно меню;
Выберите команду Удалить настройки.

Работа с фрагментами изображения

При рассмотрении панели инструментов упоминалась возможность оптимизации отдельно взятого фрагмента большого изображения. Но для этого оно предварительно должно быть разделено на фрагменты.

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

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

Одна из полезных возможностей графического редактора «Фотошоп» – оптимизация изображений для веб-страниц. Функционал позволяет сжать снимок для дальнейшего использования в среде Интернет. Такой подход предполагает заметное уменьшение времени загрузки изображения при сохранении его качественной составляющей.

В статье пошаговый план как правильно сохранить изображения для Web в Photoshop.

Инструкция по работе

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

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

Формат файла

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

Кликаем по строчке с выбором форматов и в выпадающем списке определяемся с расширением.

Для справки! Формат JPEG идеально подходит для снимков с плотной цветовой гаммой, а также для фотографий, где используется градиент. В то время как расширение PNG чаще всего используется для отображения схем, логотипов и других изображений, где требуется прозрачность.

Качество

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

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

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

По умолчанию значение выставлено на «Высокое» (60%), что является оптимальным вариантом для большинства фотографий. Также следует обратить внимание на строчку «Оптимизация». Данный параметр позволяет ещё больше уменьшить размер файла. Ставить маркеры на «Прогрессивный» и «Встроенный профиль» необязательно, потому как популярные браузеры, вроде Chrome или Firefox не поддерживают вариативность цветовых моделей.

Цветовое пространство

Функция «Преобразовать в sRGB» должна быть активна. Дело в том, что все браузеры работают с цветовой моделью RGB. Если изображение ранее было переведено в режим CMYK, то после сохранения гамма на сайте будет отображаться некорректно.

Строчку «Просмотр» оставляем без изменений: «Цвет монитора». Блок ниже определяет вывод метаданных для изображения. Большинство систем управления содержимым (CMS) позволяют пользователю ввести всю необходимую информацию о картинке, поэтому здесь можно выставить параметр «Не показывать» из выпадающего списка.

Размер изображения

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

Целесообразнее менять размер изображения перед сохранением файла для Web, иначе могут возникнуть конфликты версий. Перед открытием диалогового окна достаточно нажать комбинацию клавиш Ctrl + Alt + I и определиться с параметрами.

Значение «Качество» в блоке «Размер изображения» оставляем без изменений – бикубический. Это универсальный метод интерполяции, позволяющий получить достойную детализацию при максимальном сжатии данных.

Сравнение исходных и оптимизированных размеров файла

По завершению настроек следует оценить качество оптимизации изображения. Ключевой момент – размер файла на выходе. В примере объём последнего – 5,93 Мб. Это очень много для веб-страницы, учитывая, что в распоряжении доброй половины пользователей мобильный 3G-интернет.

Тогда как оптимизированная для веб-страниц версия файла занимает всего лишь 152,6 Кб. Такая фотография откроется за доли секунды, а томительное ожидание не будет вынуждать пользователя покидать ресурс.

Сохранение изображения

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

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

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

Дополнительная видео-информация:

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

Чтобы сохранить файл, откройте меню Файл и выберите любую из команд групп Сохранить : Сохранить , Сохранить как или Сохранить копию . При выборе команды сохранения открывается диалог Сохранение на компьютере (Сохранение в облачные документы) . Можно в любой момент переключиться на другие доступные варианты сохранения в поле выбора облачных документов — Сохранить в облачные документы и Сохранить на компьютер .

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

Сохранить

Чтобы сохранить изменения в документе в текущем формате, выберите Файл > Сохранить .

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

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

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

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

В диалоговом окне «Сохранить как. » выберите параметры сохранения.

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

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

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

Для этого выберите:

«Файл» > «Сохранить копию»
Кнопка Сохранить копию под диалоговым окном «Сохранить как»

Выбор команды «Сохранить копию» в меню «Файл»

Не видите нужного формата, такого как JPEG или PNG? Сохраните копию документа для всех форматов

Начиная с Photoshop версии 22.4.2 вы можете вернуться к устаревшему рабочему процессу «Сохранить как» с помощью следующих параметров установок.

Включить устаревший процесс «Сохранить как»

При желании можно вернуться к устаревшему рабочему процессу Сохранить как и (или) не добавлять слово «копия» при сохранении в качестве копии.

Чтобы найти эти новые параметры установок, перейдите к:

(macOS) Photoshop > Установки > Обработка файлов > Параметры сохранения файла
(Windows) Редактирование > Установки > Обработка файлов > Параметры сохранения файла

При включении установки Включить устаревший процесс «Сохранить как» :

macOS: при использовании параметров Сохранить как и Сохранить копию теперь будет открываться устаревшее диалоговое окно сохранения с параметрами Сохранить как , доступными в Photoshop 22.3 и более ранних версий, в том числе с флажком Сохранить копию . Если включен устаревший рабочий процесс, при использовании параметра «Сохранить копию» для сохранения файла Photoshop флажок Как копию будет включен по умолчанию. При выборе параметра Включить устаревший процесс «Сохранить как» в установках в macOS отобразится диалоговое окно, предупреждающее вас о риске перезаписи файлов, возникающем при использовании устаревшего рабочего процесса Сохранить как , так как слово «копия» больше не будет интерактивно присоединяться к имени файла. Из-за этого при выборе установки Включить устаревший процесс «Сохранить как» установка Не добавлять слово «копия» к имени файла при сохранении копии будет включена автоматически и ее невозможно будет отключить, если установка Включить устаревший процесс «Сохранить как» не отключена.

Windows: установка Включить устаревший рабочий процессс «Сохранить как» использует первоначальный режим сохранения, в том числе интерактивно добавляет слово "копия" к именам файлов, когда это необходимо. Таким образом, вы не увидите предупреждение при включение устаревших установок в Windows. Кроме того, поскольку устаревший рабочий процесс Сохранить как может добавлять слово «копия» к именам файлов, вы не увидите предупреждающее оповещение, а параметр установки Не добавлять слово «копия» к имени файла при сохранении копии можно включать или отключать по необходимости.

Не добавлять слово «копия» к имени файла при сохранении копии

macOS и Windows: установка Не добавлять слово «копия» к имени файла при сохранении копии управляет тем, будет ли присоединяться ли слово «копия» к имени файла документа Photoshop в ситуациях, когда для пользователя существует риск перезаписи файлов. Выбрав эту установку, термин "копия" больше не будет автоматически присоединяться к именам файлов при сохранении в качестве копии, как в новом интерфейсе Сохранить копию , так и в устаревшем процессе Сохранить как (macOS и Windows).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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