프론트엔드 엔지니어 기술을 위한 Photoshop의 능숙한 사용에 관한 시리즈 5부 - 스프라이트 사진

이전 단어

앞서 언급했듯이 설명 그림은 결국 스프라이트 그림으로 병합됩니다. 이번 글은 포토샵 스킬 시리즈 다섯 번째 글입니다 - 스프라이트

정의

CSS 스프라이트(sprite)는 웹 이미지 응용 처리 방식으로, 모든 것을 허용하는 웹 이미지 응용 프로그램 처리 방법입니다. 페이지와 관련된 여러 이미지가 하나의 큰 이미지에 포함됩니다. 스프라이트 이미지 처리 방법을 사용하면 두 가지 이점을 얻을 수 있습니다.

　【1】http 요청 수 감소

　【2】이미지 크기 감소 및 웹 페이지 로딩 속도 향상 (여러 이미지의 로딩 속도는 결합된 이미지의 로딩 속도보다 느립니다.)

모든 것이 완벽하지는 않지만 장점을 달성하는 동시에 단점도 가져옵니다. 즉, 개발이 증가합니다. 그리고 웹페이지의 유지관리 비용.

응용 시나리오

앞서 언급했듯이 모든 그림을 스프라이트 그림으로 만들 수 있는 것은 아니며 설명 그림만 적합합니다

【1】내용 img 태그에 설정된 이미지는 스프라이트 이미지로 병합할 수 없습니다. 이러한 이미지를 병합하면 페이지의 가독성에 영향을 미치고 의미가 줄어들며 조정 가능한 범위가 작습니다

【2】가로 및 세로로 타일링된 이미지의 경우 수직으로 스프라이트 이미지로 병합할 수 없습니다. 가로로 배열된 경우 가로로 배열된 모든 사진은 하나의 큰 사진으로만 병합될 수 있으며 가로로 배열되지 않고 세로로만 배열될 수 있습니다. 세로로 배열된 모든 사진은 하나의 큰 사진으로만 병합될 수 있습니다. 수직이 아닌 수평으로만 배열

병합

스프라이트 그림의 제작은 실제로 산발적인 작은 그림을 하나의 큰 그림으로 병합하는 것이지만, 작은 그림은 병합 다음 규칙을 따라야 합니다.

[1] 이미지를 병합하기 전에 간격을 두어야 합니다

1. 작은 아이콘인 경우 간격은 적절하게 작아질 수 있습니다. 20픽셀

2. 큰 아이콘인 경우 남을 간격이 더 커야 합니다. 큰 아이콘을 조정하면 영향을 받는 공간이 더 커지기 때문입니다

　【 2] 그림은 가로, 세로로 배열합니다

[3] 병합 및 분류의 원칙

병합 및 분류에는 세 가지 원칙이 있습니다. 모듈별, 크기별, 색상별 분류

a. 동일한 모듈에 속한 이미지 병합

b. 비슷한 크기

c. 비슷한 색상의 사진 병합

[4] 추천 병합

실제 스프라이트 제작에는 일반적으로 두 가지 방법이 사용됩니다. 하나는 이 페이지에서만 사용되는 이미지를 병합하는 것이고, 다른 하나는 상태 저장 아이콘을 병합하는 것입니다. 구현

과거에는 스프라이트 이미지를 수동으로 구현해야 했는데 이는 매우 번거롭고 오류가 발생하기 쉽습니다. 요즘에는 스프라이트를 만드는 데 편리한 도구가 많이 있습니다. 제가 자주 사용하는 것은 CSS 배경 병합 도구라는 작은 도구입니다.

사용방법은 아래와 같습니다.

유지 관리

[캔버스 확대]

이미지-> 캔버스 크기 -> 위치 선택(보통 왼쪽 상단)

【캔버스 줄이기】

[참고] PNG8의 색상 모드는 기본적으로 인덱스 색상 모드로 설정되어 있으며, png8 이미지를 수정할 때 색상 모드를 RGB 모드로 변경해야 합니다. . 이미지-> 모드-> RGB 색상

1. 이미지 선택-> 자동 자르기 효과를 얻을 수 있는 왼쪽 상단의 픽셀 색상을 기준으로 선택합니다. 🎜>

　2. 먼저 유지하려는 영역을 선택한 후 이미지-> 자르기를 선택하거나 툴바에서 자르기 도구 버튼을 선택하여 잘라냅니다

[아이콘 이동]

　1 .아이콘이 독립 레이어인 경우 이동 도구로 드래그하세요

2. 아이콘이 독립되지 않은 레이어인 경우

a. 먼저 선택 도구를 사용하여 아이콘 영역을 선택한 다음 이동 도구를 사용하여 아이콘을 드래그하여 레이어를 이동할 수 있습니다. 이동

b. 먼저 선택 도구를 사용하여 아이콘 영역을 선택한 다음 를 잘라서 를 붙여 넣으면 됩니다. 더욱 편리한 조작

더 많은 프론트엔드 엔지니어 스킬을 위한 포토샵 영리한 활용 시리즈 다섯 번째 글 - 스프라이트 사진 관련 글은 PHP 중국어 홈페이지를 주목해주세요!