이 문서에서는 중국어 버전의 Photoshop CS2를 예로 들어 설명합니다. 다른 버전의 Photoshop에서는 단계가 약간 다를 수 있습니다. 먼저 최종 효과를 살펴보겠습니다.
최종 효과를
위한 구체적인 단계는
다음과 같습니다.1. 중국어 버전의 Photoshop CS2를 시작하고 Ctrl+N을 눌러 "새로 만들기" 대화 상자를 열고 필요에 따라 일부 설정을 지정한 다음(크기는 향후 탐색 메뉴를 수용할 수 있어야 함) "확인" 버튼을 클릭하여 새 문서를 만듭니다.
2. 레이어 패널 아래에 있는 "새 레이어 만들기" 버튼을 클릭하여 새 레이어를 만듭니다. 도구 상자에서 "둥근 사각형 도구"를 선택하고 옵션 막대에서 반경을 15px로 설정한 다음 그림 1과 같이 새 레이어에 둥근 사각형을 그립니다.
그림 1
3. 이제 위의 모양에 다음 레이어 스타일을 적용합니다.
투사:
그림 2
내부 그림자:
그림 3
내부 광선:
그림 4
색상 오버레이:
그림 5
스트로크:
그림 6
스타일을 적용한 후그림 7과 같은 버튼 효과를 얻을 수 있습니다.
그림 7
4. 이제 "둥근 사각형 도구"를 다시 사용하여 이번에는 그림 8과 같이 버튼 위에 더 작은 흰색의 둥근 사각형을 그립니다.
그림 8
5. 이 레이어의 혼합 모드를 "오버레이"로 설정하고 불투명도를 30%로 설정하면 그림 9와 같은 버튼 효과를 얻을 수 있습니다.
그림 9
6. 그런 다음 그림 10과 같이 이 버튼을 복사하여 탐색 메뉴에 배열하고 텍스트를 추가합니다.
그림 10
7. 도구 상자에서 "Slice Tool"을 선택하고 "View" 메뉴를 연 다음 "Align" 왼쪽에 확인 표시가 있는지 확인합니다. 이렇게 하면 슬라이스가 가장자리에 자동으로 정렬되어 더욱 정확하게 만들어집니다. 조각. "Slice Tool"을 사용하여 버튼을 하나씩 자르면 각 슬라이스에 버튼이 포함됩니다. 결과는 그림 11에 나와 있습니다.
그림 11
8. 이제 슬라이싱이 완료되었으므로 이제 후속 웹 디자인을 준비하기 위해 HTML 파일로 출력할 수 있습니다. 최상의 이미지 효과를 얻으려면 "파일 | 웹용으로 저장" 메뉴 명령을 선택하십시오. 그림 12에 표시된 설정을 사용하십시오. 설정 후 "저장" 버튼을 클릭하세요.
그림 12
9. "최적화 결과를 다른 이름으로 저장" 대화 상자에서 웹 페이지 파일을 저장할 위치를 선택하고 그림 13과 같이 파일 이름을 입력한 후 저장 유형을 "HTML 및 이미지(*. html)"을 클릭한 후 "저장" 버튼을 클릭하세요.
그림 13
: HTML 페이지와 버튼 이미지가 포함된 이미지 폴더가 생성됩니다.
이제 HTML 코드를 다른 웹페이지에 복사하기만 하면 사용할 수 있으며 복사 시 Photoshop에서 생성된 헤더/본문 태그는 복사하지 마세요.