Гибкое использование навыков резки полистирола

автор:JowayYoung
склад:Github,CodePen
Блог:Официальный сайт,Наггетс,думаю нет,Знай почти
публика:Интерфейс IQ
Специальное заявление: Нелегко быть оригинальным, и перепечатка или плагиат не допускаются без разрешения.Если вам нужно перепечатать, вы можете связаться с автором для получения разрешения.

ряд

• Гибкое использование навыков разработки CSS Пожалуйста, нажмите здесь для непрерывных обновлений
• Гибкое использование навыков разработки JS Пожалуйста, нажмите здесь для непрерывных обновлений
• Гибкое использование навыков резки полистирола Пожалуйста, нажмите здесь для непрерывных обновлений

предисловие

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

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

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

Например轮廓outline,外边距margin,内边距padding,圆角border-radius,盒子阴影box-shadow,滤镜filter,行高line-height,文字阴影text-shadowПо-прежнему будут различия в производительности свойств CSS на PS, стандарты разные, дизайнеры не могут понять спецификации в коде, разработчики не могут понять спецификации в дизайне, плюс различные эффекты наложения слоев и изменения слияния, поэтому трудно изолировать эффект, который хочет разработчик. Следовательно, только квалифицированная работа с PS может разделить слои и их эффекты, которые нужны разработчикам, и стандартизировать спецификацию резки.

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

горячая клавиша

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

ярлыки файлов

• выйти из программы:ctrl/cmd + q
• открыть файл:ctrl/cmd + o
• Закройте файл:ctrl/cmd + w
• создайте новый файл:ctrl/cmd + n
• сохранить документ:ctrl/cmd + s
• Сохрани копию:ctrl/cmd + alt + s
• Сохранить другое:ctrl/cmd + shift + s
• Сохраните вырез:ctrl/cmd + shift + alt + s

Ярлыки инструментов

• Инструмент перемещения:v
• Инструмент выделения:m
• Лассо:l
• Инструмент «Волшебная палочка»:w
• Инструмент для нарезки:c
• Инструмент «Пипетка»:i
• Инструмент для ремонта:j
• Зубная щетка:b
• Инструмент «Штамп»:s
• Инструмент истории:y
• Инструмент «Ластик»:e
• Инструмент «Градиент»:g
• Инструмент уклонения:o
• Инструмент «Перо»:p
• Текстовый инструмент:t
• Инструмент пути:a
• Инструмент «Прямоугольник»:u
• Инструмент захвата:h
• Инструмент масштабирования:z

Изменить ярлыки

• копировать:ctrl/cmd + c
• Резать:ctrl/cmd + x
• Вставить:ctrl/cmd + v
• Отмена:ctrl/cmd + z
• Отменить назад:ctrl/cmd + alt + z
• Отменить вперед:ctrl/cmd + shift + z
• Слияние репликации:ctrl/cmd + shift + c
• Вставьте на место:ctrl/cmd + shift + v

Выберите ярлык

• все варианты:ctrl/cmd + a
• отменить выбор:ctrl/cmd + d
• Выберите повторно:ctrl/cmd + shift + d
• Наоборот:ctrl/cmd + shift + i
• Варианты перьев:ctrl/cmd + alt + d

Просмотр ярлыков

• Увеличенный вид:ctrl/cmd + +
• Уменьшить:ctrl/cmd + -
• Полноэкранный режим:ctrl/cmd + 0
• Фактический дисплей:ctrl/cmd + 1
• Показать скрытые линейки:ctrl/cmd + r
• Показать скрытые сетки:ctrl/cmd + "
• Показать скрытые направляющие:ctrl/cmd + :
• Показать скрытую область выбора:ctrl/cmd + h

Ярлыки слоев

• Дублируйте слой:ctrl/cmd + j
• Соединить слои:ctrl/cmd + e
• Трансформировать слои:ctrl/cmd + t
• Новый слой:ctrl/cmd + shift + n
• Найти слои:ctrl/cmd + alt + shift + f
• Выберите все слои:ctrl/cmd + alt + a

Примечание

• Каждый раз, когда начинается операция среза, используйтеctrl/cmd + +/-Увеличить до желаемого размера просмотра
• Каждый раз, когда выполняется операция среза, используйтеcИнструмент нарезки, чтобы обрезать цель
• В конце каждой операции резки используйтеctrl/cmd + shift + alt + sсохранить вырезать
• Многие навыки резки накапливаются в повседневной жизни, а сочетания клавиш требуют большего запоминания и многократного использования, и чем больше вы используете, тем естественнее
• При столкновении со слоями, которые трудно разделить, лучше всего спросить у дизайнера, каков принцип реализации, а затем шаг за шагом разблокировать слои.
• Не всегда жалуйтесь на то, что дизайнер плохо обрезает и обрезает то, что вам не нужно.Если вы хотите стандартную обрезку, вы можете обрезать ее сами.
• При разрезании изображения нужно быть внимательным, 1px нужно резать хорошо, не резать невзначай, детали определяют успех или неудачу, а также качество работы.
• Не сохраняйте каждый раз, когда разрез завершен, вы можете вернуться к исходному состоянию открытия файла через запись истории, и повторно разрезать следующий фрагмент
• упоминается в следующих советахэлементобратиться к одномуКоллекция фрагментов(может состоять из одного слоя, нескольких слоев, однослойной части, многослойной части)

Навык

Быстро выбрать один слой

• Сцены:выбор одного элемента(значки, кнопки, фоновые изображения, состоящие из одного слоя)
• Подготовка: сначала настройте при первом использовании
  • Инструмент «Перемещение» (v) → проверить自动选择→ выберите图层
• шаг
  • Выберите цель:alt+ Щелкните левой кнопкой мыши по цели (Перейдите к представлению «Слои», выбрав нужный слой.)
  • Скрытый слой:alt+ Щелкните левой кнопкой мыши на текущем слое显示图标 (Теперь цель отображается прозрачным цветом переднего плана.)

Быстрый выбор составных слоев

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

• Сцены:Выбор составного элемента(значки, кнопки, фоновые изображения, состоящие из нескольких слоев)
• Подготовка: сначала настройте при первом использовании
  • Инструмент «Перемещение» (v) → проверить自动选择→ выберите图层
• шаг
  • Выберите цель:alt+ Щелкните левой кнопкой мыши по цели (Перейдите к представлению «Слои», выбрав нужный слой.)
  • Выберите слои:ctrl/cmd+ Щелкните левой кнопкой мыши по слою (Выберите все слои, которые нужно объединить)
  • Соединить слои:ctrl/cmd + e (Создайте новый целевой слой)
  • Скрытый слой:alt+ Щелкните левой кнопкой мыши на текущем слое显示图标 (Теперь цель отображается прозрачным цветом переднего плана.)

Быстро копировать копии фрагментов

• Сцены:Коллекция элементов одинакового размера
• шаг
  • Дублирующий фрагмент:alt+ Срез левой кнопкой мыши (Перетащите копию фрагмента на следующую цель)

Быстрая точная настройка положения среза

• Сцены:Несоосность положения среза необходимо исправить
• шаг
  • Тонкая настройка 1px: клавиши со стрелками
  • 10px спиннер:shift+ клавиши со стрелками

Быстро разделить на равные части

• Сцены:Спрайты равномерно разделены,Изображения большого размера делятся поровну
• шаг
  • Разделить фрагменты: щелкните фрагмент правой кнопкой мыши → выберите划分切片
  • Настроить сетку: введите количество делений по горизонтали/вертикали.

Быстро читать образцы цветов

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

Быстро читать текстовые сообщения

• Сцены:Получить текстовую информацию
• шаг
  • Откройте инструмент «Текст»:t
  • Якорный текст: Щелкните левой кнопкой мыши по тексту (При клике нужно щелкнуть по середине китайского текста, иначе может сгенерироваться новый текстовый слой)
  • Переключить текстовую панель:F6 (Текстовая панель уже открыта, чтобы пропустить этот шаг)

Быстрое отсоединение слоев

• Сцены:Слои связаны и не могут быть разделены по отдельности
• шаг
  • Позиционирование слоя: переместите мышь в середину целевого слоя и связанного слоя (Перейти к просмотру слоя для обработки)
  • Отключить:alt+ Щелкните левой кнопкой мыши между двумя слоями (Нажмите, когда появится значок ссылки для разблокировки.)

Автоматически быстро вырезать иконки

• Сцены:Много изолированных икон
• Подготовка: сначала настройте при первом использовании
  • Правка → Настройки → Плагины → отмечено启用生成器
  • перезагрузить PS
  • Файл → Сборка → Активы изображения
  • Автоматически генерировать срезы после присвоения имен слоям/группам на более поздних этапах (неважно)
• шаг
  • Автосохранение JPG: использование слоя/группыxxx.jpgИмя (для настройки качества изображения необходимо добавить к суффиксу число, например, срез с качеством 60% называется какxxx.jpg6)
  • Автосохранение PNG: использование слоя/группыxxx.png8илиxxx.png24название
  • Автосохранение SVG: использование слоя/группыxxx.svgназвание
  • Автосохранение нескольких карт: использование слоя/группыxxx@2x.png,xxx@3x.pngназвание

Быстрая пакетная обработка изображений

• Сцены:Безмозглая обработка изображений большими партиями
• Подготовка: Запишите образцы движения для первого использования.
  • Панель действий (F9) → Новое действие → Записать действие (Процесс волновой резки) → остановить запись
• шаг
  • Выберите партию:文件→自动→批处理
  • Выберите действие обработки:1
  • Выберите исходный файл:2
  • Выберите выходной файл:3

Быстро вычесть фон волос

• Сцены:Изолированный фон, содержащий волосы
• шаг:Немного сложно, просто вставьте учебник напрямую

Уведомление

Photoshopиспользовать как можно большеCCверсия, чтобы пользоваться всеми вышеперечисленными навыками, новая версия может пройтиAdobe Creative Cloudуправлять (устанавливать и обновлять), а также может сотрудничать с другимиAdobeпрограммное обеспечение вместе. Там нет руководств по установке и взлому, а множество поисков в Интернете — это дурацкая установка и взлом.

Здесь рекомендуется сторонний инструмент улучшения PS:Пиксельный повар(Вы должны загрузить PS, чтобы использовать его), если вам не нужно вырезать изображение, вам нужно только измерить некоторую аннотацию. Это быстрее и удобнее в использовании. Это легкое приложение, и его стоит использовать. !

Суммировать

В конце написания резюме почти такое же.Если я помню, что я упустил в продолженииPS навыки резки, продолжим дополнять эту статью.

Наконец-то дайте всем клавиатуру!

(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["Bs","Tab","Caps","Enter"][p++]||'Shift',p])}\\|`,m+=y+(x+'    ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`)()

Эпилог

❤️Подписаться + Нравится + Избранное + Комментарий + Переслать ❤️, оригинальность это не просто, поощряйте автора к созданию более качественных статей

Обратите внимание на публичный аккаунтIQ前端, внешний общедоступный аккаунт, ориентированный на навыки разработки CSS / JS, вас ждут другие галантереи переднего плана

• Ответить после подписки资料Получите бесплатные учебные материалы
• Ответить после подписки进群Втяните вас в группу технического обмена
• Добро пожаловать, чтобы следоватьIQ前端,БолееНавыки разработки на CSS/JSНажимайте только на публичный аккаунт