프런트엔드 Photoshop 슬라이싱

슬라이싱이란? (Photoshop에서 슬라이스)

슬라이스: 사진을 여러 부분으로 잘라서 하나씩 업로드하면 업로드 속도가 빨라집니다. 각 조각은 조각 자체 설정, 색상 팔레트, 링크, 뒤집기 효과 및 애니메이션 효과를 포함하는 독립된 파일로 전송됩니다.

슬라이싱 도구: 큰 그림을 여러 개의 작은 그림으로 분해하는 데 주로 사용됩니다. 이 기능은 오늘날의 웹 페이지가 그림과 텍스트로 가득 차 있기 때문에 주로 웹 페이지에서 사용됩니다. , 웹페이지를 검색하는 사람들이 너무 오래 기다리지 않도록 사진을 여러 개의 작은 사진으로 자릅니다.

슬라이싱은 웹페이지 제작 과정에서 매우 중요한 단계로, 슬라이싱이 올바른지 여부가 웹페이지의 후반 작업에 영향을 미치는 경우가 많습니다. 일반적으로 PS 또는 FW는 웹 페이지 또는 대규모 사진의 렌더링을 자르는 데 사용됩니다. 중요한 올바른 슬라이싱은 웹사이트에 매우 긍정적인 영향을 미칠 것입니다. 예를 들면 웹페이지 로딩 시간 단축, 동적 효과 생성, 이미지, 링크 최적화 등이 있습니다.

1. 웹 페이지 슬라이스 제작

1. 웹 페이지 로딩 시간 단축

때로는 웹 페이지에 큰 배너 이미지가 필요할 수 있으므로 비용이 많이 듭니다. 브라우저를 사용하여 이 이미지를 다운로드하면 오랫동안 이는 사용자 경험에 매우 해로웠습니다. 웹 슬라이싱의 출현은 이 문제를 매우 잘 해결합니다. 슬라이싱을 사용하면 전체 큰 그림을 여러 개의 작은 그림으로 나누고 브라우저도 이러한 작은 그림을 다운로드하게 됩니다. 이러한 방식으로 브라우저가 그림을 다운로드하는 시간이 크게 단축되어 많은 시간이 절약됩니다.

2. 이미지 최적화

일반적으로 전체 이미지는 jpg, gif, png, psd, dpf 등 한 가지 형식만 가능합니다. 최적화하려면 A 방법만 사용하세요. 웹 슬라이싱은 이 그림을 여러 개의 작은 그림으로 나눌 수 있으며, 별도로 최적화할 수 있는 다른 형식으로 저장할 수도 있습니다. 이렇게 하면 이미지 품질이 높아지는 동시에 이미지 메모리가 줄어들고 웹페이지 로딩 속도가 향상됩니다.

슬라이싱 전 준비사항: 웹페이지 PSD 파일 저장 및 PS 사진 통합

슬라이싱 구체적인 준비사항: 슬라이스 분할, 슬라이스 유형(사용자 슬라이스, 비사용자 슬라이스)

슬라이싱의 기본 포인트:

1. 색상 범위에 따라 자릅니다.

2. 슬라이스 크기: 웹페이지 슬라이스를 최대한 작게 자릅니다. 완료: 특정 영역의 제목 텍스트와 같은 전체 부분이 나중에 수정하기에 편리한지 확인합니다. 색상이 풍부한 부분은 JPG로 내보내야 하며 애니메이션이 있는 부분은 포함해야 합니다. GIF 애니메이션으로 내보내야 하는데,

언젠가 텍스트 등 특정 부분을 변경해야 할지 모르겠습니다. 별도로 사용되는 슬라이스만 수정하면 됩니다.

슬라이스 레이어 표시 및 숨기기: 배경 이미지 슬라이스, 불규칙한 이미지 슬라이스.

조각 편집: 조각 크기 조정, 조정, 삭제, 조각 지우기(하나씩 선택, 삭제하려면 마우스 오른쪽 버튼 클릭, 삭제하려면 모두 보기 가능), 조각 저장(웹에서 사용하는 형식으로 저장됨) )

슬라이스 삭제

                                                                                                     사용       사용         사용         사용         사용 ‐ ‐ ‐ ‐ 편집 슬라이싱 옵션: 슬라이스 유형, 이름: 자동 생성, 일반적으로 영어로 명명되며 영어를 사용하는 것이 더 친숙합니다. 웹 페이지 코드에서 URL: 링크 주소, 대상, ALT 태그입니다. 사진을 검색하고 최적화할 수 있습니다.

슬라이스 저장(웹용으로 웹으로 저장) Ctrl+Shift+Alt+S: 일반적으로 일반적으로 사용되는 형식은 JIF 및 PNG -24 배경 투명도 지원(투명 체크는 배경 투명도 지원), JPEG(화질은 일반적으로 80 이상). 그런 다음 저장을 클릭하고 형식을 저장합니다. 형식에는 이미지 제한이 있고 기본 설정으로 설정되어 있습니다. 슬라이스(모든 슬라이스: 사용자 슬라이스 또는 비사용자 슬라이스를 내보낼 것인지 여부, 모든 사용자 슬라이스: 슬라이스만 잘라냄, 선택한 슬라이스:만 자동으로 폴더(이미지)를 생성합니다.

슬롯 형식:

1, 세 가지 슬라이싱 형식: , png는 웹 페이지 투명도를 지원하고 jif는 상대적으로 좁은 색상을 지원합니다. 범위.

2, 세 가지 슬라이싱 형식 비교(적용 범위): JPG 웹 페이지는 이 형식을 지원하고 PNG는 투명도와 JIF 애니메이션을 게시할 수 있습니다.

                                                                                                                                                   세 가지 유형의 슬라이스의 적용 범위 및 장단점: png: IE6은 이미지 투명도를 지원하지 않으며 gif 애니메이션 내보내기의 색상은 단일이며 색상이 밝을 때 들쭉날쭉한 모양이 나타납니다. .

슬라이스 저장 및 이름 변경:

1. 슬라이스 내보내기

2. 슬라이싱 이름은 기호

의 시작 부분에 가장 좋습니다.

슬라이싱 스킬(그라디언트, 섀도우, 불규칙):

그라데이션: 슬라이싱을 당길 수 있습니다.

섀도우: 웹페이지에서 구현하는 방법, CSS3에서도 구현 가능 섀도우는 IE6이지만 IE8에서는 그림자만 슬라이스를 만들고 배경을 끄고 PNG-24 형식으로 저장할 수 있습니다.

불규칙: 배경이 숨겨져 있으므로 PNG 형식으로 저장하세요

웹페이지 슬라이스 실전

일부 색상은 직접 표현 가능, 위젯 제작(전체 컷), 동영상 재생 버튼

단계: 레이어 정리, 저장( 사진 백업), 최대한 많은 작업을 수행하세요. 정확하게 말하면 캔버스가 많은 경우 새 캔버스를 만들어 새 캔버스에 복사할 수 있습니다.

슬라이스를 빠르게 삽입하는 방법: 하이퍼링크 또는 다음으로 추가 배경링크

슬라이싱의 지식포인트와 핵심포인트 : 슬라이싱의 개념, 기능, 포맷선택

프론트엔드 포토샵 슬라이싱에 관련된 더 많은 글은 PHP 중국어를 주목해주세요 웹사이트!