Home-theater-designers
당신이 만들 수 있는 놀라운 것들이 많이 있습니다 어도비 포토샵 간단한 액자에서 복잡한 UI에 이르기까지 온라인에서 유용합니다. Photoshop에서 만들 수 있는 가장 유용한 것 중 하나는 3D 버튼으로, 사용자 정의 인터페이스로 블로그나 웹사이트를 운영할 때 유용할 것입니다.
이 기사에서는 시각적인 '위' 및 '아래' 상태와 함께 Photoshop을 사용하여 3D 버튼을 만드는 방법을 보여주고 애니메이션을 적용할 수 있습니다. (이 기사에서는 애니메이션 자체를 다루지 않을 것입니다.)
1단계: 문서 준비
3D 버튼은 웹사이트에서 가장 자주 표시되지만 애니메이션 GIF, 목업 제품 디스플레이 및 모바일 게임과 같은 다른 응용 프로그램이 있다는 점에 유의해야 합니다. 이 버튼을 만드는 목적에 따라 최종 파일 형식과 크기가 다를 수 있습니다.
Photoshop에서 3D 버튼을 만들려면 해당 버튼에 대한 사용자 정의 문서를 만들어야 합니다. 이렇게 하려면 Photoshop을 열고 새로 만들기 > 사용자 지정 . 값을 입력하기 시작합니다.
3D 버튼을 만들려면 가로 문서가 필요합니다. 우리의 경우 다음을 사용했습니다.
- 900 x 300픽셀 높이
- 300픽셀/인치
- RGB 색상 모드
이러한 사양은 확실히 어렵고 빠른 규칙은 아니지만 작업할 공간이 충분하고 필요에 따라 버튼 크기를 위아래로 조정할 수 있는 기능이 있습니다.
2단계: 3D 버튼의 직사각형 설정
파일 사양을 설정한 후 작업 공간으로 이동합니다. 단일 레이어에 수평 흰색 캔버스가 있고 여기에서 버튼을 만들기 시작할 것입니다.
3D 버튼을 만들려면 둥근 사각형 도구 화면 왼쪽에 빨간색으로 표시됩니다. 바로 가기를 사용할 수도 있습니다. 유 액세스할 수 있습니다.
흰색 레이어를 한 번 클릭하면 자동으로 둥근 사각형 만들기 상자. 이 상자를 사용하여 직사각형의 크기를 지정합니다.
버튼의 경우 다음과 같이 했습니다.
- 300픽셀 너비
- 75픽셀 높이
또한 모서리가 10픽셀씩 둥글게 처리되었는지 확인했습니다. 너무 높지도 않고 너무 낮지도 않습니다. 그런 다음 우리는 눌렀습니다. 좋아요 .
메모: 단추는 크기와 모양에 따라 다르므로 이러한 정확한 치수를 사용해야 할 필요는 없습니다. 또한 바로 가기에 대한 추가 정보를 찾고 있다면 다음 중 일부를 참조하십시오. 가장 유용한 Photoshop 키보드 명령 .
누를 때 좋아요 , Photoshop은 레이어 내부에 이러한 치수로 둥근 사각형을 만듭니다. 당신은 그것을 변경할 수 있습니다 채우다 그리고 뇌졸중 화면의 왼쪽 상단 모서리에 있는 드롭다운 메뉴를 사용하여 색상을 지정합니다.
이 튜토리얼의 목적과 '위' 및 '아래' 버튼의 모양을 설명하기 위해 '아래' 버튼을 빨간색으로 만들 것입니다.
3단계: 버튼을 3D로 만들기
기본 버튼을 만들고 색상을 선택한 후에는 레이어 스타일 대화 상자. 보다 입체적으로 보이게 하기 위함입니다.
액세스하려면 레이어 스타일 대화 상자, 당신은 갈 수 있습니다 레이어 > 레이어 스타일 상단 메뉴에서. 버튼이 포함된 레이어를 두 번 클릭하여 자동으로 불러올 수도 있습니다. 이 방법은 훨씬 빠르며 개인적으로 선호합니다.
레이어 스타일 상자가 나타나면 옵션으로 이동하십시오. 베벨 및 엠보싱 . 전원을 켜십시오.
이것은 버튼의 가장자리를 더 돌출된 '3D' 모양으로 만드는 빠르고 쉬운 방법입니다. 이 자습서에서 사용한 설정은 다음과 같습니다.
구조
- 스타일: 내부 베벨
- 기술: 끌 소프트
- 깊이: 605
- 방향: 위로
- 크기: 5
- 부드럽게 하다: 1
농담
- 각도: 90
- 고도: 37
- 하이라이트 모드: 컬러 닷지, 55% 불투명도
- 그림자 모드: 다중, 25% 불투명도
비결은 약간의 차이를 볼 수 있을 만큼 충분히 높게 설정하는 것입니다. 그러나 너무 강해서 압도적이지는 않습니다.
Bevel & Emboss 작업을 마친 후 윤곽 그것도 켰다. Contour는 Bevel & Emboss의 정의를 조금 더 강하게 만들고 이 튜토리얼에서는 설정을 선택했습니다. 원뿔 - 거꾸로 .
다음으로 켜십시오. 그라디언트 오버레이 . 이것이 버튼에 둥글고 약간 '광택이 나는' 모양을 주는 것입니다. 설정은 다음과 같습니다.
- 혼합 모드: 위에 까는 것
- 불투명: 90
- 스타일: 선의
- 각도: 90
- 규모: 100
마침내, 우리는 켰다 그림자 , 버튼이 웹사이트나 블로그의 흰색 배경에서 약간 '올라온' 것처럼 보이도록 합니다. 다시 말하지만 설정은 다음과 같습니다.
윈도우 10 끄기 기능
구조
- 혼합 모드: 다수의
- 불투명: 35
- 각도: 90
- 거리: 2
- 확산: 6
- 크기: 8
품질
- 윤곽: 선의
- 소음: 0
- 레이어 녹아웃 그림자: 에
이제 이 사양을 레이어 스타일로 저장할 차례입니다.
4단계: 레이어 스타일로 저장
버튼 설정을 마치면 3D로 보이기 시작합니다. 둘 이상의 3D 버튼을 만들 가능성이 높기 때문에 빠르고 쉬운 방법을 찾아야 합니다.
방법은 다음과 같습니다.
클릭하기 전에 좋아요 에서 레이어 스타일 대화 상자, 클릭 새로운 스타일 . 그렇게 하면 Photoshop에서 버튼에 대해 만든 이 레이어 스타일을 저장합니다.
Photoshop CC를 사용하는 경우 이 새로운 스타일이 도서관 위에서 볼 수 있듯이 섹션. 매우 빠르고 쉽게 액세스할 수 있습니다.
5단계: 저장된 레이어 스타일을 사용하는 방법
이제 버튼을 디자인하고 레이어 스타일로 저장했으므로 '위쪽' 상태에서 작동하는 모습을 보겠습니다. 거짓말이 아닙니다. 작업 시간이 반으로 단축됩니다.
먼저 빨간색 버튼 레이어 바로 위에 다른 버튼을 만들어 보겠습니다. 강조를 위해 녹색으로 만들어 보겠습니다.
다음---레이어 자체를 두 번 클릭하여 레이어 스타일 대화 상자 --- 레이어 스타일을 두 번 클릭하십시오. 도서관 패널.
그렇게 하면 Photoshop은 새 색상과 모양을 유지하면서 저장된 스타일을 새 버튼 레이어에 자동으로 적용합니다. 이제 두 개의 버튼이 있습니다. 하나는 업 상태이고 다른 하나는 다운 상태이며 매우 간단합니다. 이 바로 가기를 좋아합니다.
6단계: 버튼에 텍스트 추가
다음으로 버튼에 텍스트를 추가하겠습니다.
텍스트를 추가하려면 두 개의 버튼 레이어 위에 새 레이어를 만듭니다. 클릭 문자 도구 입력을 시작합니다.
이 튜토리얼에서는 '구독'이라는 단어를 쓸 것입니다. 웹사이트와 소셜 미디어 플랫폼에서 자주 볼 수 있는 단어이기 때문입니다.
우리는 또한 san serif 웹 안전 글꼴을 사용할 것입니다. 자신의 버튼에 사용할 최종 선택은 귀하에게 달려 있습니다. Montserrat, Proxima Nova, Arial 및 Verdana는 모두 널리 사용되는 대안이며 웹에 안전합니다.
그러나 이 작업이 완료된 후에도 이 텍스트를 '팝업'하기 위해 수행해야 하는 몇 가지 미묘한 변경 사항이 있습니다.
먼저 텍스트가 포함된 레이어를 두 번 클릭하여 레이어 스타일 대화 상자.
다음을 클릭하십시오. 내부 그림자 , 텍스트에 약간의 함몰(또는 함몰 영역)을 추가합니다. 이렇게 하면 버튼에 글자가 새겨져 있는 것처럼 보입니다. 이 튜토리얼에서 사용한 정확한 설정은 아래와 같습니다.
구조
- 혼합 모드: 곱하다
- 불투명: 35
- 각도: 90
- 거리: 2
- 초크: 4
- 크기: 1
품질
- 윤곽: 선의
- 소음: 0
다음으로 적용 그라디언트 오버레이 납작하게 보이지 않으면서 버튼에 더 쉽게 혼합되도록 합니다. 다시 말하지만, 우리의 설정은 다음과 같습니다.
- 혼합 모드: 컬러 화상
- 불투명: 90
- 스타일: 선의
- 각도: 90
- 규모: 100
7단계: 마무리
이 텍스트 스타일을 만든 후 ---특히 다시 사용하려면 ---로 이동하십시오. 새로운 스타일 클릭하기 전에 저장 좋아요 .
이 작업을 마치면 두 버튼 레이어 사이의 가시성을 빠르게 앞뒤로 전환하여 '위쪽' 및 '아래쪽' 상태가 어떻게 보이는지 확인할 수 있습니다.
꽤 멋지죠? 파일을 저장하려면 다음으로 이동하십시오. 파일 > 다른 이름으로 저장 , 작업 중인 프로젝트에 적합한 파일 형식으로 저장합니다.
3D 버튼 및 위젯으로 블로그 사용자 지정
이제 Photoshop에서 3D 버튼을 만드는 방법을 알았으므로 창의력을 발휘하여 필요에 맞게 자신만의 3D 버튼을 디자인할 수 있습니다. 그리고 무기고에 있는 이러한 기술을 사용하여 전문적일 뿐만 아니라 개인적으로도 보이는 제품을 만들 수 있습니다.
이 프로그램으로 할 수 있는 다른 작업에 대해 알고 싶으십니까? 여기 Photoshop에서 배경을 제거하는 방법 .
공유하다 공유하다 트위터 이메일 Android에서 Google의 내장 버블 레벨에 액세스하는 방법급하게 수평이 맞는지 확인해야 했던 적이 있다면 이제 몇 초 만에 휴대전화에서 거품 수준을 확인할 수 있습니다.
다음 읽기 관련 항목- 창의적인
- 어도비 포토샵
- 이미지 편집 팁
- 포토샵 튜토리얼
Shianne은 디자인 학사 학위와 팟캐스트 배경 지식을 가지고 있습니다. 현재 그녀는 수석 작가이자 2D 일러스트레이터로 일하고 있습니다. 그녀는 MakeUseOf의 크리에이티브 기술, 엔터테인먼트 및 생산성을 다룹니다.
Shianne Edelmayer가 참여한 작품 더보기뉴스레터 구독
기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!
구독하려면 여기를 클릭하세요.