Многие дизайнеры присылают мне многослойные PSD своих проектов, и мне нужно разбить их на части, чтобы разместить их на веб-страницах. Я могу делать приличное количество вещей в Photoshop, но я не очень эффективен в этом.
Мой старый способ просто скопировать изображение, которое находится в слое, и вставить его в новое изображение, кажется, требует навсегда, пока я возился с кадрированием и т. д.
У меня есть Photoshop CS5, поэтому мне не нужно внешнее программное обеспечение, чтобы что-то делать, но мне просто нужно выяснить, как взять один слой, который может содержать что-то маленькое, например значок, и экспортировать его как PNG или JPG.
Мне известен сценарий под названием «Экспорт слоев в файлы», но он занял около часа и был экспортирован ВСЕ мои слои в огромное количество файлов. Я не искал такого широкого решения.
Есть простой способ сделать это?
Чтобы экспортировать один слой или группа слоев в Photoshop у вас должны быть только те соответствующие слои, которые вы хотите экспортировать видимыми. (Так что скройте все слои, которые вы не хотите экспортировать, и оставьте видимым соответствующий.) Затем перейдите в Файл — Сохранить для Интернета и сохраните изображение.
Чтобы глубже понять этот процесс, ознакомьтесь с этим руководством.
Выберите слой, который хотите экспортировать в новый файл.
В верхнем меню нажмите «Слой» -> «Дублировать слой …»
Обратите внимание, что есть ДВА варианта. Один — для имени нового слоя …
Второй — для назначения нового слоя, будь то текущий документ или Новый документ. Выберите «Новый».
3
Предыдущие ответы не будут автоматически обрезаться к размеру слоя, как указывает Баррапонто. Смарт-объекты исправляют это и более эффективны:
- Щелкните правой кнопкой мыши слой на панели слоев и выберите Преобразовать в смарт- Объект
- Снова щелкните слой правой кнопкой мыши и выберите Редактировать содержимое
CTRL + щелкните несколько слоев перед преобразованием в смарт-объект, чтобы сгруппировать их.
3
Я бы добавил к ответу @Daniel Garman.
- Дублировать слой (либо в меню, щелкнув правой кнопкой мыши по слою) -> NEW (также дает возможность дать ему имя в это время, чтобы вы не потеряли как слой был вызван перед тем, как перейти к этапу сохранения)
- Image -> Trim (что даст вам варианты удаления прозрачных пикселей)
- File — > Сохранить для Интернета (CMD-SHIFT-OPT-S в OSX)
Это довольно быстрый способ сделать это.
0
Вы можете сделать это, перейдя в Файл -> Скрипты -> Экспорт слоев в файлы
1
Традиционным способом экспорта только части слоя является использование фрагментов:
-
Скройте любые перекрывающиеся слои, содержащие пиксели, которые вы не хотите экспортировать (если они не перекрывают интересующую вас область, вы можете оставить их показанными).
-
Создайте фрагмент для интересующего вас раздела, используя либо меню «Слои»: «Новый слой на основе слоя» (что выполняется автоматически), либо вручную создайте его. с помощью инструмента «Срез». Убедитесь, что выбран единственный фрагмент новостей (в том же всплывающем меню есть инструмент выбора фрагмента справа от того, который создает фрагменты).
-
В в диалоговом окне «Сохранить для Интернета» убедитесь, что фрагмент все еще выбран. (В этом диалоговом окне есть собственный инструмент выбора фрагмента, если он вам нужен).
-
В процессе сохранения , есть выпадающее меню; убедитесь, что вы выбрали «Выбранные фрагменты», чтобы не сохранить все.
Большинство людей больше не используют фрагменты, поскольку они были разработаны для более ранних дней Интернета, когда отдельные изображения часто разрезались, а затем собирались заново в HTML — сейчас это делается редко. Но я по-прежнему считаю их полезными для этой цели.
К сожалению, интерфейс для срезов не был обновлен, и они могут быть немного неудобными в использовании, но посмотрите, помогут ли они в вашей ситуации.
старомодный традиционный способ сделать это — скажем, до CS тоже работают, в этом случае:
- уменьшите все многослойные иллюстрации до одного слоя — вы можете отменить это позже
- option/alt щелкните этот слой в палитре LAYER — это даст вам выбор только этого слоя, а не окружающего холста.
- copy — edit> copy или option/alt C ==== теперь у вас есть копия этого слоя в буфере обмена.
- создайте новый документ — когда вы это сделаете, вы заметите, что новый документ теперь будет иметь размер того, что вы скопировали в буфер обмена
- ваш новый документ будет содержать простой фон …. просто нажмите «вставить» -> изменить> вставить или optioin/alt V
- на этом этапе у вас есть 2 отдельных документа — вы можете вернуться к ОРИГИНАЛЬНОМУ документу и отменить сглаживание любого слоя до исходное состояние
Оптимизация веб-изображений в Photoshop
Есть два основных фактора, которые определяют, как изображения будут выглядеть в Интернете: качество и размер файла. В результате изображение низкого качества выглядит пиксельным, размытым или имеет видимые шумовые артефакты. Исправление? Используйте изображение более высокого качества.
Но это создает другую проблему. Изображение более высокого качества означает, что размер его файла больше. Для загрузки изображений большего размера требуется больше времени. А на мобильных устройствах, где пропускная способность ограничена, а скорость имеет значение, это становится еще более серьезной проблемой.
Так как же нам найти правильный баланс между качеством изображения и размером файла? Вот здесь и появляется оптимизация изображения.
Начнем с этого изображения для веб-сайта цифрового агентства.
Это отличное фото прямо с камеры. Но загрузить это фото без оптимизации было бы не очень хорошо. Давайте подробнее рассмотрим, почему.
Посмотрите на этот размер файла. 10,6 МБ — это слишком много почти для любого случая использования в Интернете. Все зависит от вашего макета дизайна, но я стараюсь сохранять размеры файлов для самых больших изображений меньше 1 МБ, стремясь по возможности менее 500 КБ. Чем меньше вы можете сделать его (не жертвуя слишком большим качеством), тем лучше.
Совет для профессионалов: При оптимизации изображений для Интернета важно начинать с максимально возможного размера файла. Обычно это означает изображение большего размера. Вы всегда можете сделать его меньше, сохранив при этом качество. Но если вы начнете с маленького изображения и попытаетесь увеличить его, вы быстро потеряете качество изображения. И никакая оптимизация не сделает его хорошо.
Вместо того, чтобы сначала изменить размер изображения (выбрав «Изображение»> «Размер изображения»), мы можем выполнить все изменение размера и оптимизацию в единое диалоговое окно. Ура, что сэкономили лишний шаг!
Photoshop имеет параметры экспорта, специально разработанные для веб-изображений. В более новых версиях Photoshop есть два разных способа сделать это. Один называется «Экспортировать как», а другой — «Сохранить для Интернета (устаревший)». В более старых версиях Photoshop это называется «Сохранить для Интернета и устройств». Мы рассмотрим оба варианта.
Перейдите в Файл> Экспорт> Экспортировать как …
Это окно состоит из трех основных частей. Левая сторона используется для экспорта изображений с одинаковым соотношением сторон для разных разрешений экрана. (Это тема для другой статьи. ) А пока обратите внимание на размер файла исходного изображения: 11 МБ! Средняя часть — это область предварительного просмотра изображения. Вы можете увеличивать и уменьшать масштаб, чтобы проверить качество изображения. В правой части происходит волшебство.
В разделе «Параметры файла» выберите JPG в раскрывающемся меню «Формат». Мы немного поговорим о типах файлов. Для «Качество» сделайте 100%. Мы вернемся позже и посмотрим, как это влияет на качество и размер файла.
Следующий раздел — Размер изображения, и здесь вам нужно знать, насколько велико ваше окончательное изображение. Для целей этого урока это изображение должно быть не больше 1600 пикселей в ширину. Измените ширину на 1600 пикселей, и вы увидите, что высота и масштаб% автоматически настраиваются на то же соотношение сторон.
Изменение размеров изображения — отличный первый шаг к оптимизации. Посмотрите размер файла в левой части окна. Образ теперь весит менее 1 МБ, что является хорошим улучшением. Но помните, чем меньше мы сможем сделать размер файла без потери качества, тем лучше.
Помните настройку «Качество»? Вернемся к этой настройке и посмотрим, сможем ли мы оптимизировать дальше. Во-первых, в среднем окне предварительного просмотра увеличьте масштаб до 100%, чтобы мы могли увидеть, как наши изменения влияют на качество. В разделе «Параметры файла» измените качество на 0% и просмотрите изображение для предварительного просмотра.
Возможно, мы зашли слишком далеко. Размер файла феноменальный (всего 54 КБ!), А качество картинки — мусор. Заметили все блочные артефакты? Фу. Давайте изменим качество на 60% и посмотрим, как это выглядит.
Ах да, это намного лучше. Размер файла по-прежнему велик (294 КБ), а качество изображения фантастическое. Перетащите изображение для предварительного просмотра, чтобы проверить другие части изображения и убедиться, что все в порядке. Мне это кажется великолепным, поэтому теперь выберите «Экспортировать все …» и назовите новое изображение.
Быстрое сравнение показывает, что мы уменьшили размер файла более чем на 97%! Это приводит к гораздо более быстрому (и приятному) онлайн-опыту.
Процесс почти такой же, как и для «Сохранить для Интернета. ”Так что давайте посмотрим, как оптимизировать использование этой опции.
Совет от профессионалов: Если у вас есть выбор, выберите «Экспортировать как» вместо «Сохранить для Интернета». У вас есть не только опции для экспорта изображений для дисплеев Retina, но и диалоговое окно появляется быстрее, особенно при оптимизации больших изображений. Кроме того, Adobe пометила этот вариант как Legacy. Кто знает, как долго это продлится.
Выберите «Файл»> «Экспорт»> «Сохранить для Интернета (устаревшая версия)». В более старых версиях Photoshop выберите «Файл»> «Сохранить для Интернета и устройств». Давайте взглянем на это окно.
Как видите, в этом окне можно увидеть и сделать гораздо больше. Не беспокойтесь о большей части этого. Вот как оптимизировать изображения из этого окна.
Во-первых, убедитесь, что вкладка «Оптимизировано» выбрана из вкладок над изображением предварительного просмотра. Обратите внимание на размер файла исходного изображения в нижнем левом углу изображения: 10,51 МБ.
В правом верхнем углу окна у нас есть раскрывающийся список для типов файлов. Убедитесь, что выбран JPEG. Для «Качество» установите значение 100. Мы вернемся к этому параметру. последний, кто выбирает качество окончательного изображения.
В правом нижнем углу окна находится раздел «Размер изображения». Нам нужна ширина изображения 1600 пикселей, поэтому измените «W» на 1600, убедитесь, что значок «ограничить части» выбран (это связанная цепочка). «H» и «процент» автоматически настраиваются на одно и то же соотношение сторон.
Теперь изображение весит менее 1 МБ, но давайте вернемся к параметру« Качество »и уменьшим его. чтобы получить еще меньший размер файла. Убедитесь, что окно предварительного просмотра увеличено до 100%, чтобы мы могли видеть, как наши изменения влияют на качество. Посмотрим, как снова выглядит качество 0%.
Ага, все еще плохо. Давайте повысим качество до 60% и посмотрим на изображение. В этом окне вы можете найти полезную вещь, выбрав вкладку 2-Up, вы можете сравнить исходное изображение рядом с оптимизированным изображением. Перетащите оптимизированное изображение, и исходное изображение будет отражать ваши движения.
Как и раньше, мы видим, что размер файла был уменьшен при сохранении хорошего качества изображения. Когда все станет хорошо, нажмите кнопку «Сохранить…» (не кнопку «Готово») и назовите новое изображение.
В этом диалоговом окне есть еще пара параметров. Убедитесь, что в раскрывающемся меню «Формат» выбрано «Только изображения». В разделе «Настройки» можно выбрать «Другое», чтобы изменить способ именования файлов.
По умолчанию Photoshop заменяет пробелы дефисами. Вы можете изменить это и другие параметры здесь. Если у вас есть все, что вам нужно, нажмите кнопку «Сохранить …» в диалоговом окне «Сохранить оптимизированное как».
Другое сравнение показывает огромное уменьшение размера файла, даже крошечное. немного больше, чем процесс «Экспортировать как».
Каждый Метод оптимизации также позволяет выбрать тип файла. Мы использовали JPG для нашего примера изображения. В «Экспортировать как» мы получаем PNG, JPG, GIF и SVG. В «Сохранить для Интернета» мы получаем GIF, JPG, PNG-8, PNG-24 и WBMP. 100% изображений, которые я оптимизировал и экспортировал для Интернета, были в формате JPG, PNG или GIF. Давайте поговорим об этих типах файлов и о том, когда вы будете использовать каждый из них..
JPG (или JPEG)
JPG — это сегодня самый популярный тип файлов для веб-изображений. Это тип файла со сжатием с потерями, что означает, что каждый раз, когда вы сохраняете JPG, он немного теряет качество. Это из-за сжатия. В нашем примере изображения мы экспортировали его как JPG с качеством 60% (или 40% сжатием). Кажется, это много, но поскольку нет большой разницы в визуальном качестве, я считаю, что сохранение с качеством 60% — это идеальный баланс между качеством и размером файла.
Можете ли вы заметить разницу в сжатии между эти два изображения? Одна сторона сохраняется в 100% качестве; другой — 60%. Может быть, если вы увеличите масштаб очень близко, вы сможете увидеть. Но как часто вы делаете это при просмотре страниц?
Для изображения с большим количеством цветов, градиентов и теней, JPG — лучший выбор. Примеры изображений — это фотографии пейзажей, людей и продуктов. Но JPG — не лучший тип файла для каждой ситуации.
GIF
GIF — это формат сжатия без потерь, что означает, что это не так. терять любое качество. Звучит здорово; почему бы нам не сохранить все изображения в формате без потерь? Основным недостатком файлов типа GIF является ограничение максимальной цветовой палитры 256 цветами. Взгляните на тот же пример изображения, чтобы увидеть разницу.
Поначалу это может быть трудно увидеть, но обратите внимание на то, что сбоку на ее лице есть пунктирная линия. Из-за ограниченной цветовой палитры GIF-файлы плохо справляются со сложной окраской и затенением.
Так чем же полезны GIF-файлы, помимо анимированных мемов? Их ограниченная цветовая палитра делает их идеальными для веб-изображений, таких как логотипы, однотонные иллюстрации и простые значки.
GIF-файлы также позволяют сохранять эти изображения с прозрачностью; JPG — нет. Однако края имеют тенденцию к пикселизации. В таких случаях лучше всего сохранить GIF на сплошном цвете того же цвета, что и фон вашего веб-сайта. Вот пример логотипа Sidecar, сохраненного в виде прозрачного GIF-изображения и помещенного на цветной фон.
Заметили грубые и неровные края? Нет буэно. Но не волнуйтесь. Позже это исправят.
Если вам не нужна прозрачность, вы, безусловно, можете использовать JPG. Но ничто не может сравниться с сочетанием качества и размера файла GIF, когда речь идет об этих типах изображений.
Вот иллюстрация Sidecar, сохраненная как в формате JPG, так и в формате GIF. (JPG был сохранен с качеством 100%, поскольку такие изображения наносят ущерб сжатию JPG.)
Они выглядят одинаково, но давайте посмотрим на размер файла.
GIF и его качество без потерь являются здесь победителем, уменьшая размер файла более чем на 80% по сравнению с JPG..
Раньше мы шутили про анимированные GIF-файлы, но если вам нужна анимация, GIF — единственный тип файла, который ее поддерживает.
PNG
PNG — лучшее из обоих миров. Это дает вам сжатие без потерь GIF с неограниченной цветовой палитрой JPG. Но сжатие без потерь не делает его хорошим выбором для изображений с большим количеством цветов. Что касается размера файла, JPG по-прежнему является лучшим выбором.
Когда дело доходит до веб-изображений, вы захотите использовать PNG, как и GIF. Используйте его для логотипов, однотонных иллюстраций, штриховых рисунков и простых значков. Так почему бы всегда не использовать гифки? Если вам не нужна прозрачность, тогда GIF — отличный выбор.
Но помните, что GIF-файлы немного борются с прозрачностью. Если вам нужны чистые края для прозрачного изображения, выберите PNG (или PNG-24 при использовании параметра «Сохранить для Интернета»). Давайте снова посмотрим на логотип Sidecar, сохраненный как PNG и GIF.
Посмотрите, насколько красивее выглядят края. Теперь мы можем использовать этот логотип в Интернете на любом темном фоне.
PNG также имеет гораздо большие параметры прозрачности. В GIF-файлах прозрачным можно выбрать только один цвет (обычно белый). По этой причине GIF-файлы либо полностью прозрачны, либо полностью непрозрачны. Вот почему мы получаем эти неприятные края.
В PNG есть разные уровни прозрачности. Вот почему края выглядят такими красивыми и гладкими, потому что пиксели имеют разный уровень прозрачности.
Есть много способов оптимизировать изображения для Интернета. Мы надеемся, что эта основа даст вам лучшее представление о том, как найти правильный баланс качества и размера файла. Хотя жестких правил для оптимизации не существует, одно можно сказать наверняка: оптимизируйте всегда.
