페이지 제작 부분 PS 컷팅
기술적인 측면에서 웹디자인의 첫 번째 단계는 아티스트가 웹페이지 렌더링을 하고, 두 번째 단계는 웹페이지를 컷팅하는 것입니다. 웹페이지의 프런트 엔드. 웹 페이지를 자르는 데 일반적으로 사용되는 도구로는 Fireworks와 PS가 있습니다. 여기서는 웹 페이지를 자르는 데 PS가 사용됩니다.
디자인 시안을 통해 원하는 결과물(.png, .jpg 파일 등)을 얻고, 웹 페이지에 사용할 이미지 자료(HTML: img, CSS: 배경)를 제공합니다.
1. PS 도구 사용
1.1 PS 환경 설정
편집 -> 환경 설정 -> 단위 및 눈금자, 픽셀을 선택합니다.
1.2 패널
"창" 메뉴에서 열기:
도구(기본적으로 활성화되어 있음)
옵션(기본적으로 활성화)
레이어(기본적으로 활성화)
정보(수동으로 활성화)
기록(수동으로 활성화)
다른 불필요한 기능을 닫고 위의 기능을 해당 영역에 배치합니다. 창-"작업 공간-"설정된 작업 공간을 다음과 같이 저장합니다.
1.3 공통 도구 사진 자르기
▪이동 도구
가 자동으로 선택되어 체크되며 그룹은 레이어로 변경됩니다
▪직사각형 선택 윤곽 도구
▪마술 지팡이 도구
▪자르기 도구 + 자르기 도구
▪배율 조정 도구
-확대: Ctrl+더하기 기호
-축소: Ctrl+Minus
▪색상 선택기
1.4 보조 보기
"보기" 메뉴에서 활성화:
▪정렬(기본적으로 켜져 있음)(가이드선 및 경계선을 만나면 흡착력이 있음)
▪눈금자 Ctrl+R
▪표시-> line Ctrl+ ; (추가 콘텐츠가 표시되어야 함)
2. 정보 얻기
디자인 초안을 열고 정보 얻기:
▪차원 정보: 측정
▪색상 정보: 색상 선택
정보를 얻는 데 가장 중요한 것은 캔버스를 최대한 늘려 오류를 최소화하는 것입니다.
측정
2.1 모든 숫자는 측정되어야 합니다
도구:
직사각형 선택 윤곽 도구 + 정보 패널
측정 내용:
너비, 높이
패딩, 여백
테두리
위치
텍스트 크기
행 높이
배경 이미지 위치
2.2 선택 항목 측정(직사각형 선택 윤곽 도구)
선택 항목에 추가: Shift 누르기
선택 항목에서 빼기: Alt 누르기
선택 항목과 교차: Shift+Alt 누르기
2.3 텍스트 관련 측정
2.3.1 텍스트 레이어 분리
레이어를 선택하고 도구 T를 클릭합니다. 상단 옵션 영역은 다음과 같이 표시됩니다.
직접 할 수 있습니다 텍스트 크기를 가져옵니다.
줄 높이와 같은 다른 신뢰도를 얻으려면 
을 클릭하세요.
2.3.2 별도의 텍스트 레이어 없음(선택 더 큰 글꼴을 측정)
직사각형 선택 윤곽 도구를 사용하여 텍스트를 선택하고 높이는 글꼴 크기입니다.
줄 높이 측정
사용 직사각형 선택 윤곽 도구에서는 아래와 같이 이전 텍스트 줄 아래쪽에서 이 텍스트 줄 아래쪽까지의 높이가 줄 높이입니다.
색상 선택
2.4 모든 색상을 모두 선택해야 합니다
도구:
색상 선택기 + 스포이드 도구
색상 선택 내용:
테두리 색상
배경 색상
텍스트 색상
캔버스를 최대한 확대하여 단단한 점을 얻고 들쭉날쭉한 점을 피하세요.
2.5 별도 텍스트 레이어의 색상을 직접 얻을 수 있으며, 다른 색상은 "색상 선택기 + 스포이드 도구"를 사용하여 얻을 수 있습니다.
레이어의 오버레이 효과로 인해 표시되는 색상이 실제 색상과 일치하지 않는다는 점에 주의하세요. 이는 색상 선택기를 사용하여 색상을 얻는 것입니다.
2.6 색상 선택 도구
2.6.1을 능숙하게 사용하여 배경이 단색인지 확인합니다(색상 선택기 + 스포이드 도구)
다른 영역을 계속 클릭하여 색상이 변경되는지 확인하세요
2.6.2 선형 그래디언트인지 확인(마법 지팡이)
먼저 레이어를 선택한 다음 마술 지팡이 도구를 선택하고 클릭하여 맨 윗줄을 선택합니다. 아래 그림:
계속 클릭하여 한 번에 한 줄씩 아래쪽으로 선택
선형 그래디언트인지 확인하세요.
3. 슬라이싱
3.1 슬라이싱이 필요한 콘텐츠
수정(일반적으로 background 속성에 사용):
아이콘, 로고
특수 효과가 있는 버튼, 텍스트 등
단색이 아닌 배경
콘텐츠 기반(일반적으로 img 태그에 사용됨)
배너, 광고 사진
기사 속 사진...
예를 들어 아래 사진에서 빨간색 상자를 잘라야 합니다. , 블랙박스는 배경에서 가져옵니다. 잘라낼 필요가 없습니다
3.2 잘라낸 사진의 저장 방식
내용은 일반적으로 다음과 같이 저장됩니다. .JPG,
수정된 파일은 일반적으로 .PNG8, .png24
로 저장됩니다. PNG8과 PNG24는 모두 완전 투명도를 지원하지만 ie6에서는 지원합니다. 호환이 필요한 PNG24 반투명도를 지원하지 않습니다.
3.3.사진 자르기
텍스트 숨기고 배경만 유지
3.3.1 텍스트 독립 레이어(숨겨진 텍스트 레이어)
찾은 텍스트 레이어
안경 아이콘 제거
3.3.2 텍스트와 이미지 병합(타일형 배경이 텍스트를 덮음)
배경 이미지를 늘릴 수 있습니다
직사각형 선택 윤곽 도구로 영역 선택
자유 변형 Ctrl+T
배경 이미지를 늘릴 수 없습니다( 배경에는 텍스쳐 효과 등이 있습니다.)
직사각형 선택 윤곽 도구로 영역 선택
이동 도구 + Alt 사용
3.3.3 슬라이스 가져오기
이미지 자르기.PNG24
• 도구를 이동하여 필요한 레이어를 선택합니다(여러 항목을 선택하려면 Ctrl 키를 누른 상태)
• 병합하려면 마우스 오른쪽 버튼을 클릭하세요 레이어(Ctrl+E)
•그리기 레이어를 새 파일로 이메일로 보내거나 기존 파일로 직접 드래그(새 항목: Ctrl+N)
.PNG8로 잘라내기( 배경으로 자르기)
•표시된 레이어 병합(Shift+Ctrl+E)
•직사각형 선택 윤곽 도구로 콘텐츠 선택
•마술봉 도구로 초과 제거(선택 항목에서 빼기: 길게 누르기) down Alt)
3.3.4 타일링 가능한 배경 컷아웃
직사각형 선택 윤곽 도구로 영역 선택
복사하여 새 파일에 붙여넣기
타일 콘텐츠는 파일의 너비(x축) 또는 높이(y축)를 채웁니다. 예를 들어 새 파일을 사용하여 x축을 타일링하는 경우 잘라낸 이미지의 너비는 다음과 같아야 합니다. 새 파일과 일치
3.4 슬라이싱 도구(전체적으로 잘라낼 수 있는 활동 페이지에 적합)
▪ 가이드 당기기
▪슬라이싱 도구 선택
▪"슬라이스 기반 기준"을 클릭합니다. 옵션 표시줄의 가이드" 버튼
▪슬라이스 선택 도구 선택
슬라이스를 두 번 클릭하여 파일 이름 및 기타 정보를 변경하세요
▪저장
모든 슬라이스를 선택하고 저장 형식을 균일하게 설정
4. 저장
필요한 내용을 저장합니다(배경은 보통 투명합니다)
▪ 복사, 생성, 붙여넣기(Ctrl+C, Ctrl+N, Ctrl+V 또는 콘텐츠를 새 파일로 드래그)
독립 레이어: 콘텐츠를 새 파일로 직접 드래그
함께 병합: 직사각형 선택 윤곽 도구 선택, 마술봉 추출, Ctrl+C, Ctrl+N, Ctrl+V
▪웹에서 사용하는 형식으로 저장 (Alt+Shift+Ctrl+S)
4.1 저장유형 1(JPG)
사진의 색상이 풍부하고 투명도가 필요하지 않은 경우
JPG 형식으로 저장하고 적절한 품질을 선택하는 것이 좋습니다
참고: 품질: 60-80; 100이 될 수 없습니다. 80은 이미 좋습니다
4.2 저장 유형 2(PNG8)
사진이 별로 화려하지 않은 경우 투명도 요구사항
PNG8 형식으로 저장
참고: 저장 시 디더링 및 매트 없음을 재설정해야 합니다
4.3 저장 유형 3(PNG24)
이미지에 반투명도 요구 사항이 있는 경우
PNG24 형식으로 저장
기본 설정입니다.
4.4 저장 유형 4(PSD)
사진 품질을 보장하기 위해
PSD 파일의 사본을 보관하고 향후 수정이 이루어질 것입니다. PSD 파일
5가지 수정 및 유지 관리
프로젝트가 진행됨에 따라 아이콘 위치 변경, 새 아이콘 추가, 이전 아이콘 삭제, 크기 수정이 필요할 수 있습니다. 캔버스의 내용을 수정하고 유지 관리해야 합니다.
5.1 캔버스 크기 변경
5.1.1 캔버스 추가
이미지->캔버스 크기, 상황에 따라 기준점 선택
5.1.2 캔버스 줄이기
첫 번째 방법: 직사각형 선택 도구로 영역을 선택하고 이미지->자르기하여 캔버스를 자릅니다.
두 번째 방법: 자르기 도구를 사용하여 직접 자르세요.
5.2 아이콘 이동
▪아이콘이 독립 레이어인 경우
이동 도구로 드래그하면 됩니다.
▪아이콘이 독립적이지 않은 경우
선택 도구를 이용하여 아이콘 영역을 선택
이동 도구를 이용하여 아이콘을 드래그
참고: 아이콘이 독립적이지 않은 경우 선택 도구를 사용하여 아이콘 영역을 선택하고 Ctrl+X를 눌러 잘라낸 다음 붙여넣어 아이콘을 전환할 수 있습니다. 독립 레이어로.
5.3 아이콘 추가
아이콘을 정리한 후 해당 위치에 배치합니다.
참고:
PNG8 이미지를 수정하려면 색상 모드를 RGB 색상으로 변경해야 합니다. 방법: 이미지->모드->RGB 색상.
여섯 가지 용도
이미지 병합 솔루션: 스프라이트 이미지
CSS 스프라이트는 중국의 많은 사람들이 CSS 스프라이트라고 부르며 웹 이미지 응용 프로그램 처리 방법입니다. 페이지에 포함된 흩어져 있는 모든 그림을 하나의 큰 그림으로 포함할 수 있으므로 페이지에 액세스할 때 로드된 그림이 이전처럼 하나씩 표시되지 않습니다. 큰 그림에서 특정 아이콘의 위치에 맞춰 배경을 배치합니다.
스프라이트 퍼즐의 장점: 네트워크 요청을 줄이고 웹 페이지 로딩 속도를 향상시킵니다.
6.1 크기 및 품질(균형 및 균형)
압축 도구:
▪Lossy TinyPng: https: / /tinypng.com/
▪무손실 미니이미지: https://github.com/NetEaseWD/minimage
6.2 병합
6.2.1 정렬
이미지 사이에 적절한 간격을 확보해야 합니다(이미지 수정 및 CSS 코드 작성이 용이하도록)
아이콘 배열: 가로 및 세로
6.2. 2 분류
▪ 같은 모듈에 속한 이미지 병합(기능화)
▪ 비슷한 크기의 이미지 병합(공간 절약)
▪비슷한 색상의 이미지 병합 (색상 수를 줄이면 파일 크기가 상대적으로 작아집니다)
▪위 방법에 따라 병합
6.2.3 병합 권장
▪이 페이지에 사용된 이미지만 병합
▪상태 기반 이미지 병합(마우스 오버 시 상태 변경 등)
7가지 브라우저 호환성 솔루션
7.1 IE6은 PNG24 반투명성을 지원하지 않습니다
해결책: sprite.png(24) 및 sprite_ie의 복사본 두 개를 저장합니다.
7.2 Css3
▪고급 브라우저는 css3 사용
▪저급 브라우저는 잘라낸 이미지 사용
7.3 Graceful downgrade
▪지원되는 디스플레이 효과
▪지원 없음, 효과 없음
더 보기 프론트 엔드 관련 기사 기술-PS컷팅, PHP 중국어 사이트를 주목해주세요!
Photoshop 액세스 : 방법 및 가용성Apr 24, 2025 am 12:07 AMPhotoshop은 영구 라이센스를 구매하거나 CreativeCloud에 가입하여 얻을 수 있습니다. 1. 장기 사용을위한 영구 라이센스를 구매하고 월별 결제는 없지만 최신 업데이트는 없습니다. 2. CreativeCloud를 구독하여 최신 버전 및 기타 Adobe 소프트웨어에 액세스하고 월별 또는 연간 요금을 지불해야합니다. 선택은 사용 빈도 및 요구 사항을 기준으로해야합니다.
Photoshop이 가장 잘하는 것 : 일반적인 작업 및 프로젝트Apr 23, 2025 am 12:06 AMPhotoshop은 이미지 편집, 레이어링 및 마스킹, 디지털 페인팅 및 다양한 디자인 응용 프로그램에 특화되어 있습니다. 1) 이미지 편집 및 수리 : 결함을 제거하고 색상과 밝기를 조정하십시오. 2) 레이어 및 마스크 : 비파괴 편집 및 생성. 3) 디지털 그림과 삽화 : 예술 작품을 만듭니다. 4) 실제 응용 프로그램 : 그래픽 디자인, 웹 디자인 및 디지털 아트 제작.
Photoshop 사용 : 창의적인 가능성과 실제 용도Apr 22, 2025 am 12:09 AMPhotoshop은 실제 응용 분야에서 매우 실용적이고 창의적입니다. 1) 초보자 및 전문가에게 적합한 기본 편집, 수리 및 합성 기능을 제공합니다. 2) 컨텐츠 인식 필 및 레이어 스타일과 같은 고급 기능은 이미지 효과를 향상시킬 수 있습니다. 3) 바로 가기 키를 마스터 링하고 레이어 구조를 최적화하면 작업 효율성을 향상시킬 수 있습니다.
Photoshop : 고급 기술 및 도구Apr 21, 2025 am 12:08 AMAdobe Photoshop의 고급 기능에는 고급 선택 도구, 레이어 블렌딩 모드 및 작업 및 스크립트가 포함됩니다. 1) 빠른 선택 도구 및 색상 범위 선택 도구와 같은 고급 선택 도구는 이미지 영역을 정확하게 선택할 수 있습니다. 2) "중첩"모드와 같은 레이어 블렌딩 모드는 고유 한 시각적 효과를 생성 할 수 있습니다. 3) 작업 및 스크립트는 작업 반복을 자동화하고 업무 효율성을 향상시킬 수 있습니다.
Photoshop의 주요 기능 : 수정 및 향상Apr 20, 2025 am 12:07 AMPhotoshop의 사진 편집 및 향상에서 강력한 기능에는 다음이 포함됩니다. 1. "수리 브러시 도구"를 사용하여 여드름을 제거하십시오. 2. "액화 도구"를 사용하여 얼굴을 날려 버립니다. 이러한 기능은 이미지 처리 효과를 최적화하기 위해 알고리즘 및 이미지 처리 기술을 통해 구현됩니다.
Photoshop의 주요 기능 : 깊은 다이빙Apr 19, 2025 am 12:08 AMPhotoshop의 주요 기능에는 레이어 및 마스크, 조정 도구, 필터 및 효과가 포함됩니다. 1. 레이어와 마스크는 이미지 부품을 독립적으로 편집 할 수 있습니다. 2. 밝기/대비와 같은 도구를 조정하면 이미지 톤과 밝기를 수정할 수 있습니다. 3. 필터와 효과는 시각 효과를 빠르게 추가 할 수 있습니다. 이러한 기능을 마스터하면 창의적인 전문가가 창의적인 비전을 달성하는 데 도움이 될 수 있습니다.
Photoshop and Digital Art : 그림, 그림 및 합성Apr 18, 2025 am 12:01 AMPhotoshop의 디지털 아트 응용 프로그램에는 그림, 일러스트레이션 및 이미지 합성이 포함됩니다. 1) 그림 : 브러시, 연필 및 믹싱 도구를 사용하여 아티스트는 현실적인 효과를 만들 수 있습니다. 2) 그림 : 벡터 및 모양 도구를 사용하여 아티스트는 복잡한 그래픽을 정확하게 그릴 수 있으며 효과를 추가 할 수 있습니다. 3) 합성 : 마스크 및 레이어 블렌딩 모드를 사용하여 아티스트는 다른 이미지 요소를 원활하게 혼합 할 수 있습니다.
고급 Photoshop 튜토리얼 : 마스터 수정 및 합성Apr 17, 2025 am 12:10 AMPhotoshop의 고급 사진 편집 및 합성 기술에는 다음이 포함됩니다. 1. 기본 작업에 레이어, 마스크 및 조정 레이어 사용; 2. 이미지 픽셀 값을 사용하여 사진 편집 효과를 달성하십시오. 3. 복잡한 합성을 위해 여러 층과 마스크를 사용하십시오. 4. "액화"도구를 사용하여 얼굴 특징을 조정하십시오. 5. "주파수 분리"기술을 사용하여 섬세한 사진 편집을 수행하면 이러한 기술은 이미지 처리 수준을 향상시키고 전문적인 수준의 효과를 달성 할 수 있습니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!
SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전
WebStorm Mac 버전
유용한 JavaScript 개발 도구
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
