집 > 기사 > 웹 프론트엔드 > 프론트 엔드 엔지니어 기술을 위한 Photoshop의 능숙한 사용에 관한 시리즈의 세 번째 부분 - 사진 자르기

프론트 엔드 엔지니어 기술을 위한 Photoshop의 능숙한 사용에 관한 시리즈의 세 번째 부분 - 사진 자르기

高洛峰원래의: 2017-02-20 09:22:141246검색

이전 단어

프론트 엔드 엔지니어는 측정을 위해 Photoshop을 사용하는 것 외에도 절단을 위해 이 소프트웨어를 사용해야 합니다. 이번 글은 포토샵 스킬 시리즈 세 번째 글입니다 - 사진 자르기

사진 자르기 정보

웹페이지 제작 시 어떤 사진을 잘라야 할까요? 크게 두 가지로 나뉘는데, 하나는 장식용 사진, 다른 하나는 콘텐츠 사진입니다

[1] 수정된 사진

수정된 사진은 주로 웹페이지의 내용을 수정한 것으로 보통은 배경 속성에 사용되는 스프라이트 이미지이며 일반적으로 png24(IE6는 반투명도를 지원하지 않음) 및 png8 형식으로 저장됩니다. 장식용 그림에는 주로 다음과 같은 카테고리가 포함됩니다.

1. 아이콘, 로고

2. 특수 효과가 있는 버튼, 텍스트 등(디자이너가 디자인한 글꼴이 흔하지 않은 경우 텍스트 사진이 잘렸을 때)

3. 단색이 아닌 배경

[2] 만족스러운 사진

천 마디 말보다 사진 한 장이 " 여기서 사진'은 콘텐츠를 의미합니다. 성적인 이미지는 주로 웹페이지용 콘텐츠를 제공하며 일반적으로 태그에 사용됩니다. 콘텐츠 사진은 색상이 풍부하고 일반적으로 JPG 형식으로 저장되며 특정 압축이 필요합니다. 콘텐츠 사진에는 주로 다음과 같은 카테고리가 포함됩니다.

1. 배너, 광고 사진

2. 기사 속 사진

[참고] 일부 콘텐츠 사진은 서버 데이터이므로 그럴 필요가 없습니다. 사진을 자르려면 자리 표시자를 사용하세요

사진 자르기 단계

[1]텍스트를 숨기고 배경만 남겨두세요

코드로 작성할 수 없는 텍스트에 특수 효과가 있는 경우 텍스트와 배경을 함께 잘라냅니다.

　1. 텍스트가 독립된 레이어인 경우 숨깁니다. 텍스트 이미지

먼저 텍스트 레이어를 찾은 후 눈 아이콘을 제거하세요

2. 텍스트와 배경이 병합된 경우 배경을 타일링하여 텍스트 가리기

a. 배경이 늘어나는 경우 Rectangular Marquee Tool을 사용하여 배경에 작은 직사각형 프레임을 그리고 Free Transform Tool(ctrl+t)을 사용하여 배경을 늘립니다. 텍스트를 가리고 두 번 클릭하거나 Enter 키를 누르세요

b. 배경에 질감이 있어서 늘릴 수 없는 경우 직사각형 선택 윤곽 도구를 사용하여 배경에 작은 직사각형 프레임을 그린 다음 이동 도구 +alt를 사용하여 현재 레이어를 복사한 후 다시 누릅니다. 모든 텍스트가 덮일 때까지 화살표 키를 사용하거나 마우스로 이동합니다(마우스를 이동할 때 레이어가 직선으로 이동하도록 Shift 키를 누르세요).