Начало работы с фронтальной резкой:
Вырезать картинку + код код
В Photoshop будет
создано большое количество кешей.
Сначала измените путь к кэш-диску и измените единицу измерения по умолчанию в пикселях.
пресеты ps:
инструменты, линейки, слои, информация, символы
использоватьЛинейкаМожно лучше обрезать изображение, даже не между 1 пикселем
Инструмент нарезки может быстро сгенерировать несколько изображений, но он не очень подходит
Вырежьте изображение, чтобы сгенерировать формат изображения png, имя должно быть значимым
Нарисуйте цвет, чтобы получить rgb
CSS Sprite - это CSS Sprite , и некоторые люди называют его CSS-спрайтом. Это технология слияния изображений CSS. Метод состоит в том, чтобы объединить небольшие значки и фоновые изображения в одно изображение, а затем использовать позиционирование фона CSS для отображения той части изображения, которая должна отображаться. .
Изображение отображается с использованием свойств CSS background и background-position,
Преимущества:
1. Уменьшите количество запросов к серверу при загрузке изображений веб-страницы
2. Может объединять большинство фоновых изображений и небольших значков, которые удобно использовать в любом месте, так что запросы из разных мест должны вызывать только одно изображение
3. Повышение скорости загрузки страницы
Недостатки:
самая большая проблема с CSS Sprite - это использование
памяти.Если изображение Sprite не организовано очень тщательно, вы в конечном итоге будете использовать много бесполезных пробелов.
Влияет на функцию масштабирования браузера, браузеру необходимо проделать дополнительную работу, чтобы исправить поведение краев этих изображений.
Оптимизация обрезки изображений занимает
3 секунды, и пользователи в основном закрывают страницу до ее загрузки в течение 3 секунд, поэтому количество изображений должно быть умеренным.
Цвета вместо картинок
, создание спрайтов,
использование иконок шрифтов
Использование сочетаний клавиш:
удалить слой удалить
ctrl + e объединить слой
v переместить
c кадрировать
Средство для
обрезки изображений: автоматизация внешнего
интерфейса MarkDown TinyPNG
