Как использовать Photoshop Save for Web Tool
В качестве графического дизайнера или веб-дизайнера вам может быть предложено предоставить готовые к Интернету изображения, например фотографии для веб-сайта или рекламного баннера. Инструмент «Сохранить для Интернета» — это простой способ подготовить файлы JPEG для Интернета, помогая с компромиссом между размером файла и качеством изображения.
В этом уроке вы сохраняете изображения JPEG. Инструмент «Сохранить для Интернета» также создан для сохранения файлов GIF, PNG и BMP.
Что делает графическую Web-Ready?
Большинство готовых к использованию в Интернете графических изображений имеют общие характеристики:
- Разрешение — 72 dpi.
- Цветовой режим — RGB.
- Файлы уменьшаются в размерах для более быстрой загрузки веб-страниц.
01 из 07
Открыть изображение
Чтобы воспользоваться инструментом «Сохранить для Интернета», откройте изображение в Photoshop.
Нажмите файл> открыто, найдите изображение на своем компьютере и нажмите открыто, Для практических целей фото работает хорошо, хотя любой тип изображения будет делать.
Измените размер фотографии на небольшой размер, который вы можете использовать на веб-сайте. Для этого нажмите Образ> Размер изображения, введите новую ширину в поле Ширина и выберитеПиксели, В этом случае введите 400 пикселей и нажмите Хорошо.
02 из 07
Откройте инструмент «Сохранить для Интернета»
Предположите, что кто-то попросил вас поставить фотографию шириной 400 пикселей, готовую к публикации на веб-сайте.
Нажмите файл > Сохранить для Интернета для открытия Сохранить для Интернета диалоговое окно. (В более поздних версиях Photoshop путь файл > экспорт > Сохранить для Интернета.
)
Просмотрите различные настройки и инструменты в окне.
03 из 07
Настроить сравнение
В верхней части Сохранить для Интернета Окно представляет собой ряд вкладок с метками оригинал, оптимизированный, 2-Up, а также 4-Up, Нажимая эти вкладки, вы можете переключаться между представлением исходной фотографии, оптимизированной фотографией с использованием настроек «Сохранить для Интернета» или сопоставлением двух или четырех версий вашей фотографии.
выберите 2-Up сравнить исходную фотографию с оптимизированной, показывая бок о бок копии изображения.
04 из 07
Установить предварительный просмотр
Нажмите на фотографию слева, чтобы выбрать ее. выберите оригинал от Предустановленная меню с правой стороны Сохранить для Интернета окно (если оно еще не выбрано).
Это дает предварительный просмотр оригинальной, неотредактированной фотографии с левой стороны.
05 из 07
Настройка оптимизированного предварительного просмотра
Нажмите на фотографию справа, чтобы выбрать ее. выберите Высокий JPEG от Предустановленная меню. Теперь вы можете сравнить оптимизированную фотографию справа, которая будет вашим окончательным файлом, с оригиналом слева.
06 из 07
Изменение качества JPEG
Наиболее важным параметром в правом столбце является Качественный значение. По мере снижения качества изображение выглядит более грязным, но размер файла снижается, а файлы меньшего размера — более быстрые загрузки веб-страниц.
Попробуйте изменить качество на 0 и обратите внимание на разницу в фотографиях слева и справа, а также меньший размер файла, который находится под фотографией.
Цель состоит в том, чтобы найти счастливую среду между размером файла и качеством. Качество от 40 до 60 обычно зависит от ваших потребностей. Попробуйте использовать предварительно установленные уровни качества (JPEG Medium, например), чтобы сэкономить время.
07 из 07
Сохранить изображение
Как только вы удовлетворены фотографией справа, нажмите Сохранить кнопка. Сохранить оптимизированный как откроется окно. Введите имя файла, найдите нужную папку на своем компьютере и нажмите Сохранить, Теперь у вас есть оптимизированная, готовая к работе фотография.
в формате JPG, PNG, GIF
Программа Photoshop работает со всеми популярными графическими форматами. Инструменты импорта и экспорта реализованы на профессиональном уровне. Но в ряде случаев появляется необходимость сохранения не всего проекта целиком, а каких-то конкретных слоёв.
В статье разберем вопрос, как сохранить слои в Фотошопе отдельными файлами.
Содержание
- 1 Сохранение
- 1.1 В формате JPG и PNG
- 1.2 В GIF
- 2 Возможные сложности
Сохранение
Подобный формат экспорта особенно востребован у веб-дизайнеров. Работа над крупным проектом подразумевает обилие графических элементов, равно как и слоёв. Сохранение в Фотошоп последних в отдельные файлы позволяет использовать их при окончательной вёрстке, минуя времязатратный поиск по всему проекту.
Инструмент экспорта слоёв не такой гибкий, как в случае с обычными файлами. Здесь нет возможностей автоматической компиляции и другого схожего функционала. Сложные операции придётся выполнять вручную.
В формате JPG и PNG
Это два самых распространённых графических формата. При экспорте слоёв из Photoshop каких-либо потерь по части качества не происходит. Также отсутствуют артефакты, а вместе с тем сохраняется разметка элементов.
Экспорт в JPG и PNG:
- Открываем пункт меню «Файл».
- Переходим в раздел «Экспорт» и кликаем по строчке «Экспортировать слои в файлы».

- Выбираем место для сохранения нажав на кнопку «Обзор».
- Определяемся с префиксом.
- В некоторых случаях отпадает необходимость в сохранении скрытых уровней, поэтому ставим маркер на строчке «Только видимые слои».
- Указываем формат экспорта – JPG или PNG.
- Нажимаем на кнопку «Выполнить».
При сохранении в формате JPG можно выбрать качество картинки – от 0 до 12, что повлияет на конечный размер файла. Формат PNG позволяет оставить прозрачность с триммингом, но без возможности выбора качества изображения.
Скорость выполнения процедуры зависит от количества уровней и обозначенного разрешения, а также производительности персонального компьютера. Экспорт массивных проектов на слабых ПК может занимать до получаса.
В GIF
По завершению работы с анимацией формата GIF её необходимо оптимизировать. Иначе затянется не только экспорт, но и последующая загрузка файла браузером. Первым делом следует оптимизирование цвета. В анимации должны остаться только три палитры: «Селективная», «Адаптивная» и «Перцепционная».
Другие варианты могут конфликтовать со скриптами браузера.
Далее нужно убедиться, что инструмент «Шкала времени» работает в покадровом режиме. После чего во вспомогательном меню выбрать пункт «Оптимизировать анимацию». Обязательно выставляем маркер на строчке «Удаление лишних пикселов». Теперь можно переходить к экспорту.
Сохранение в GIF:
- Открываем пункт основного меню «Файл».
- Переходим в категорию «Экспортировать».
- Кликаем по строчке «Сохранить для Web (старая версия)».
- В появившемся диалоговом окне в разделе «Набор» выбираем «GIF 128 с дизерингом» из выпадающего списка.
- В блоке «Параметры повторов» должно стоять значение «Постоянно».
- Определяемся с папкой для сохранения.
- Кликаем по кнопке «Сохранить».
Возможные сложности
Одна из самых распространённых проблем при экспорте слоёв в отдельные файлы – всплывающее окно с ошибкой: «Команда не выполнена, так как не существует папка назначения».
Дело в том, что программа не распознаёт кириллицу. Если в пути сохранения есть русские буквы, то экспорт будет прерван. Единственное решение – сохранить файлы в другое место, где в названии присутствует только латиница.
Ещё одна распространённая ошибка – «Возникла проблема с Генератором». Следует сохранить проект в штатном режиме и перезапустить программу. Если ошибка не пропала, то отключить сторонние плагины/дополнения и повторить попытку.
Программа не будет экспортировать пустые слои, где нет пикселей, корректирующие уровни или обтравочные маски. Система в этом случае пишет «Слой пустой». Также могут возникнуть проблемы с экспортом, если изображение выходит за границы документа. Необходимо либо расширить последние, либо подогнать картинку под линейку.
Экспорт в отдельные файлы также может выступать в качестве страховочного инструмента.
Слияние нескольких уровней в один закрывает доступ к отдельным элементам. Имея под рукой файл слоя можно легко найти нужный объект или разметку.
Как указать разрешение в Photoshop для сохранения для Интернета — Hocking Design
Как указать разрешение в Photoshop для сохранения для Интернета — Hocking Design
4565
post-template-default,single,single-post,postid-4565,single-format-standard,eltd-core-1.2.3,awake child-child-ver-1.0.1,awake-ver-1.7,eltd -smooth-scroll,eltd-smooth-page-transitions,eltd-mimic-ajax,eltd-grid-1200,eltd-blog-installed,eltd-style-default-style,eltd-fade-push-text-top,eltd-header -standard, eltd-sticky-header-on-scroll-up, eltd-default-mobile-header, eltd-sticky-up-mobile-header, eltd-menu-item-first-level-bg-color, eltd-dropdown -slide-from-left,eltd-,eltd-fullscreen-search eltd-search-fade,eltd-side-menu-slide-from-right,wpb-js-composer js-comp-ver-6.7.0,vc_responsive
Как указать разрешение с помощью функции Photoshop «Сохранить для Интернета»
В этом руководстве объясняется, как указать разрешение с помощью функции Photoshop «Сохранить для Интернета».
На самом деле это то, что я лично не знал, что делаю неправильно, и какое-то время не проверял, поэтому я решил поделиться этим, и, возможно, кто-то еще найдет это полезным.
Если у вас сложилось впечатление, что функция «Сохранить для Интернета» в Photoshop просто встроит установленное вами разрешение в размер изображения, к сожалению, вы ошибаетесь. Чтобы файл сохранял установленное вами разрешение, вы должны установить правильные настройки, и вот как:
Ниже приведено письменное руководство о том, как указать разрешение в программе Photoshop «Сохранить для Интернета».
Щелкните здесь, чтобы просмотреть видеоруководство.
Укажите разрешение с помощью Photoshop «Сохранить для Интернета»
ШАГ 1
Открыв файл в Photoshop, перейдите в «Файл», а затем «Экспорт».
В меню выберите «Сохранить для Интернета (устаревшие)…»
ШАГ 2
В меню справа, если вы видите «Метаданные» и «Нет», выбранные в раскрывающемся меню…
… и вы сохраняете этот файл.
Photoshop автоматически изменит разрешение на 72 dpi.
ШАГ 3
Поэтому, чтобы избежать этого, установите разрешение с помощью «Сохранить для Интернета (устаревшее)…», откройте:
(мне нравится выбирать «Использовать профиль документа» рядом с «Предварительный просмотр»)
В раскрывающемся списке рядом с Метаданные вам нужно выбрать «Все»
Теперь, когда вы проверите разрешение этого файла, вы увидите, что Photoshop внедрил ваше разрешение. В данном случае 96 точек на дюйм.
ШАГ 4
Это больше просто дополнительный совет от меня Я создаю много веб-баннеров, и я обнаружил, что даже если я установил размер изображения и выбрал «Все» рядом с «Метаданные», иногда Photoshop все равно будет экспортировать другое разрешение. Похоже на истерику, поэтому проверьте свои файлы, а когда это произойдет — перезапустите Photoshop 🙂
Как указать разрешение в Photoshop «Сохранить для Интернета» (CC) — Видеоруководство
Для просмотра в полноэкранном режиме и подписки на наш канал на YouTube нажмите здесь.
Написано Донной Хокинг, графическим дизайнером и творческим художником. Если вы дизайнер / агентство, нуждающееся в поддержке, или компания, которая ищет кого-то для создания ваших печатных и веб-материалов, свяжитесь с нами, я буду рад услышать от вас. Вы также можете прочитать больше о том, какие услуги я предоставляю здесь.
Используйте пакетную команду Photoshop для быстрого сохранения изображений для Интернета | Том Хоул | Stirtingale
Photoshop CC 2015 представил значительно улучшенный вывод «Экспортировать как» , но странным образом исключил его использование в действиях . Я бы посоветовал всем, кто хочет улучшить рабочий процесс экспорта в следующих версиях Creative Cloud, оставить комментарий к отчету на форуме сообщества Adobe Photoshop, чтобы он был исправлен.
Пользователям Creative Cloud 2015+ имейте в виду, что функция «Сохранить для Интернета» была перемещена Файл -> Экспорт -> Сохранить для Интернета (предыдущая версия)
Изначально я написал это руководство в 2011 — с тех пор многое изменилось. Хотя общий принцип (вы можете записывать «действия» и использовать «пакетный» командный интерфейс для их запуска) остается прежним, я приношу свои извинения, если некоторые скриншоты/скринкасты устарели.
Я оставил это руководство активным, так как оно все еще помогает людям. Если вы столкнетесь с какими-либо конкретными проблемами с новой версией Photoshop, оставьте комментарий.
Отображение изображений в Интернете является компромиссом между Качество изображения и Размер файла .
Чем меньше размер файла, тем быстрее загружается ваш сайт для посетителей и тем меньше трафика вы будете использовать.
Чем выше качество изображения, тем лучше будут выглядеть ваши изображения. Однако, эффективно используя инструмент «Сохранить для Интернета», вы можете уменьшить размер изображения с минимальной потерей качества.
Обратите внимание, это оригинальный учебник, который я написал в 2011 году для CS5. Принципы как из видеоурока, так и из текстовых руководств должны работать во всех версиях фотошопа, которые позволяют использовать ПАКЕТНЫЕ команды и ДЕЙСТВИЯ.
Хотя использовать инструмент «Сохранить для Интернета» в Photoshop довольно просто, монотонность повторения этой задачи для десятков изображений может быть довольно пугающей.
В этом посте вы узнаете, как создать простой Action , позволяющий быстро изменять размер целых пакетов изображений за один раз.
Откройте образ. В этом уроке я буду использовать отсканированное изображение размером 120, которое яркое и яркое.
Сначала нужно убедиться, что панель Action видна в Photoshop.
Панель должна выглядеть примерно так
Щелкните значок папки внизу панели, чтобы создать новый набор.
Появится новая папка. (Обратите внимание, что вы можете создать действие в существующей папке, если хотите)
Нажмите кнопку Значок нового действия между значком папки и корзиной.
Обратите внимание, что вы можете назначить ярлык для действия, чтобы иметь быстрый доступ к нему в будущем.
После создания нового действия оно автоматически начнет запись.
Обратите внимание, что вы можете приостановить/возобновить запись с помощью значков Стоп/Запись в нижней части панели
Откройте диалоговое окно Размер изображения
Изображение->Размер изображения
Изображение, которое я использую для этого урока, является отсканированным изображением с очень высоким разрешением. Обычная цифровая фотография будет иметь разрешение 240 dpi/300 dpi (пикселей на дюйм).
Разрешение экрана 72 dpi. Измените разрешение на 72dpi (пикселей/дюйм)
Вы заметите, что ширина уменьшилась с 5275pd до 158px. Теперь измените размер высоты/ширины на желаемый размер.
Обратите внимание, если вы хотите изменить размер всех ваших изображений, чтобы они имели высоту 600 пикселей, установите высоту на 600 пикселей, если вы хотите изменить ширину всех изображений на 600 пикселей, установите ширину на 600 пикселей.
Для фотографии Измените разрешение изображения, используя настройку Bicubic.
Bicubic лучше всего подходит для создания плавных градиентов, Bicubic Smoother лучше всего подходит для увеличения, а Bicubic Sharper лучше всего подходит для уменьшения.
Нажмите OK
Теперь размер изображения изменен.
Далее нам нужно изменить цветовое пространство на sRGB (с помощью которого большинство веб-браузеров попытаются автоматически отобразить изображение).
Обратите внимание, если мы попытаемся просмотреть изображение в веб-браузере с помощью Adobe1998 в качестве цветового пространства по сравнению с тем, если мы преобразуем изображение в SRGB, оно будет ненасыщенным .
Наличие неправильного цветового пространства в JPEG при загрузке объясняет, почему многие изображения в Интернете выглядят недостаточно насыщенными.
Открыть Редактировать->Преобразовать в профиль
В раскрывающемся меню выберите Рабочий RGB sRGB 2.1.
Выберите Perceptual в меню Intent.
Нажмите OK.
Теперь выберите Сохранить для Интернета и устройств в меню.
В качестве предустановки выберите JPEG High.
Теперь вы можете использовать ползунок качества JPEG, чтобы настроить качество изображения по вкусу. Для сайта-портфолио я бы предложил 80. Для общего пользования 50/60.
Обратите внимание: можно изменять размер изображений/изменение цветовых пространств в этом меню, но рекомендуется этого не делать, поскольку открытие большого изображения шириной 5000 пикселей в диалоговом окне замедляет работу всей системы, поскольку Photoshop пытается отобразить оптимизированная версия.
Нажмите Сохранить и выберите папку, в которой должны появиться изображения, оптимизированные для Интернета.
Сейчас Закройте изображение . Это важно, потому что при запуске пакета вы не хотите оптимизировать десятки изображений и оставлять их все открытыми в Photoshop.
Вас спросят, хотите ли вы сохранить выберите НЕТ . При повторном сохранении на этом этапе исходное изображение будет перезаписано.
Теперь остановите запись действия, выбрав «Стоп» в левом нижнем углу меню «Действие».
Теперь ваше действие завершено, вы можете открыть любое изображение, запустить действие и знать, что оно сохранит изображение, оптимизированное для Интернета, с использованием ваших настроек.
Однако, что действительно полезно, так это использование команды BATCH для открытия и оптимизации большого количества изображений.
Открыть Файл->Автоматизация->Пакетная обработка.

