Вырезать Вырезать Вырезать Вырезать в передней части

by.Чен Манцин 25 сентября 2017 г.

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

photoshop

метод быстрого экспорта

Во-первых, очень глупый и очень распространенный способ, подходящий для небольшого количества иконок:
1. Скопируйте значок, который вы хотите вычесть (command+c)
2. Создайте новый слой (command+n), обычно размер по умолчанию — это размер изображения, скопированного в буфер обмена.
3. Вставьте слой (command+v)
4. Сохранить как веб-формат (command+option+shift+s) или экспортировать напрямую (command+option+shift+w)

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

Немного более продвинутый:
Со временем после ps cc предоставляетБыстрый экспортФункция, по умолчанию быстрый экспорт в png. Таким образом, вам не придется каждый раз выбирать размер формата, один раз настраивать и использовать его везде.

Изменения конфигурации:предпочтение > Экспорт

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

После завершения настройки вы можете экспортировать иконку через Файл->Быстрый экспорт как xxx или щелкнуть правой кнопкой мыши на выбранном слое->Экспортировать как xxx

метод быстрого среза

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

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

Разрезать по опорной линии

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

Итак, как быстро создать новую опорную линию, команда + r, чтобы открыть линейку, а затем вручную потянуть ее одну за другой, что является пустой тратой времени. Вот часть знаний, которые мало кто использует,вид -> Новое руководство из формы.

Как ленивый человек, вы можете сначала установить горячую клавишу,Правка -> сочетания клавиш, найдите новую опорную строку по колонке shape, задайте удобную и неконфликтную, например, вот что я задалShift + command + 1

Далее можно выбрать слой, нажать горячую клавишу, и опорная линия будет послушно сгенерирована (с автоматическим выбором вкуснее), поставить движущуюся картинку, чтобы насладиться:

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

Создавайте срезы из стандартизированных шаблонов

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

согласно сctrl+jПродублируйте этот слой и поместите его ниже изображения, которое вы хотите вырезать.

Затем выберите эти слои и нажмитеслой -> Базовый фрагмент нового слоя

Dangdangdang, все изображения вырезаны и, наконец, экспортированы.

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

запись действия

Программисту должно быть неприятно заставлять вас каждый раз повторять одно и то же действие, как при написании повторяющегося кода. На этом этапе мы можем написать функцию для инкапсуляции наших действий, и ps также предоставляет функцию записи действий.
window -> Actionsили горячие клавишиoption+F9Откройте панель «Действия записи».

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

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

Затем выберите только что созданное действие или введите комбинацию клавиш, и действие будет запущено. Например, в только что созданном действии выберите слой и нажмитеshift+F6После этого картинка сохранится в заданной вами папке. (После завершения действия нет подсказки, просто перейдите в папку, чтобы увидеть его)

Автоматическая обрезка изображений (включая формат WebP, SVG)

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

Требования к версии: ps cc

первыйcommand+kОткрытьНастройки, нажмитеПлагины (плагины),подтверждатьСоздать -> Активы изображениявключен
Затем щелкните меню «Файл->Создать->Изображение», чтобы подтвердить, что пункт меню отмечен;

Далее нужно только назвать слой (типа icon.png), и файл будет послушно лежать в директории "filename-assets" в той же директории, где лежит psd файл (∩´・ω・｀ ⊂)

Советы:
1. Папки также могут быть
2. Для вывода изображения @2x Retina добавьте 200% перед слоем, например 200% logo@2x.png ;
Для получения дополнительной информации см.официальная документация

Если вы хотите сгенерировать формат svg или webp, вам нужно создать новую папку в корневом каталоге пользователя ~ с именемgenerator.json, содержание

{
    "generator-assets": {
        "svg-enabled": true,
        "webp-enabled": true
    }
}

Другие советы

скопировать css

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

Советы:
1. Смарт-объекты не поддерживают функцию "Копировать CSS", можно использовать слой после растеризации.
2. Для пакетного сбора нескольких слоев выберите несколько слоев и выполнитеCtrl+GЧтобы преобразовать выбранные слои в группу слоев. Затем щелкните правой кнопкой мыши в группе и выберите «Копировать CSS», чтобы получить CSS-код в партиях.

Открывать и закрывать все остальные группы

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

Умные направляющие

При измерении расстояний пригодятся умные направляющие.
view (вид) -> show (отображать) -> smart guides (умные направляющие)

Просмотр расстояния между слоями. Выбрав слой, нажмите и удерживайтеCmdключ (Mac) илиCtrl(Windows) и наведите указатель мыши на другой слой, чтобы увидеть расстояние между ними.

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

Дополнительные сведения об использовании см.Сетки и направляющие

sketch

прямо здесьОфициальный учебник:

напиши в конце

Поскольку сцена написания этой статьи написана под Mac, а Photoshop на английском языке, большинство сочетаний клавиш в этой статье основаны на Mac.Если вы используете систему Windows, вам необходимо выполнить соответствующее преобразование. Также команды некоторых операций в основном переведены по личным впечатлениям, прошу простить, если есть неточности.

Другие рекомендуемые ресурсы:

Общие сочетания клавиш Photoshop: http://www.uisdc.com/45-handy-photoshop-shortcuts

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

Как использовать: долгое нажатие команды

Как один (4)