PS 웹 디자인 튜토리얼 XVII - Photoshop에서 창의적인 포트폴리오 웹 페이지 디자인하기
- 高洛峰원래의
- 2017-02-13 09:06:382375검색
코더로서 예술 기반이 약해요. 디자인 기능을 향상시키기 위해 성숙한 웹 PS 튜토리얼을 참조할 수 있습니다. 한 문장을 의역하면 “당시 삼백편을 알면 지을 줄 몰라도 낭송할 수 있다”는 것이다.
이 시리즈의 튜토리얼은 온라인 PS 튜토리얼에서 가져온 것으로, 모두 해외에서 제공되며 모두 영어로 제공됩니다. 나는 이 훌륭한 튜토리얼을 번역하려고 노력합니다. 번역 능력이 제한되어 있기 때문에 번역의 세부 사항은 아직 해결이 필요합니다. 대다수의 네티즌들이 저에게 조언을 해주셨으면 좋겠습니다.
약속:
1. 이 글에 사용된 소프트웨어는 포토샵 CS5 버전입니다
2. 원본 튜토리얼의 스크린샷은 영어를 기준으로 다시 촬영했습니다. 그림의 중국어 버전
3. 원문의 일부 작업에는 매개변수가 제공되지 않습니다. 반복적인 테스트를 통해 일부 매개변수를 측정했는데, 이는 빨간색 텍스트로 표시됩니다. 일부 잘못된 매개변수의 경우 올바른 매개변수가 빨간색 텍스트
로 직접 표시됩니다. 예: (90, 22, 231, 77) 는 왼쪽 상단 모서리의 좌표를 나타냅니다. 직사각형은 (90, 22) , 너비 231, 높이 77
예: (90, 22) , 이는 직사각형의 왼쪽 위 모서리 좌표가 (90, 22), 직사각형의 나머지 두 매개변수는 튜토리얼
에서 지정했습니다. 4. 튜토리얼 마지막 부분에 제가 직접 경험한 내용이 첨부됩니다. 일부는 튜토리얼 등의 일부 단계를 최적화한 것입니다.
0단계 – 문서 설정부터 시작
0단계: 문서 설정
새 문서를 엽니다: 크기 1200×1640픽셀, 해상도 72픽셀/인치.
새 문서: 크기: 1200픽셀*1640픽셀, 해상도: 72픽셀/인치
모든 것을 정렬하려면 여기에서 960년대 그리드 시스템을 사용할 수 있습니다. 이 경우에는 Photoshop 가이드(Ctrl+ 규칙을 활성화하려면 R, 가이드를 추가하려면 View > New Guide를 사용하세요. 그러나 이전 튜토리얼에서 볼 수 있듯이 때로는 도움이 될 수도 있습니다.
요소를 정렬하려면 960 그리드 레이아웃 시스템을 사용할 수 있습니다. 여기서는 PS 안내선을 사용할 수 있으므로 필요하지 않습니다(눈금자를 활성화하려면 Ctrl + R, 안내선을 추가하려면 보기> 새 안내선 ). 이전 튜토리얼을 참조할 수 있습니다. , 때로는 매우 큰 도움이 될 수도 있습니다
1단계 – 배경
1단계: 배경
배경의 기본 레이어를 만들 예정입니다. 이 경우 레이아웃을 만들기 위해 서로 다른 블록을 분리하는 방법에 대한 정확한 아이디어가 있었는데, 왜 내 튜토리얼, 내 웹 디자인이 있습니까? 스케치(또는 와이어프레임)에서 시작하면 최종 목표가 무엇인지 염두에 두는 것만으로도 유용하지만 디자인 과정에서 아마도 새로운 요소를 추가하게 될 것임이 분명합니다.
우리는 기본 배경 레이어. 이 경우 레이아웃에서 서로 다른 블록을 정확하게 구별합니다. 이유는 무엇입니까? 글쎄요, 제 튜토리얼, 웹 디자인은 지속적으로 스케치(또는 와이어프레임)에서 시작됩니다. 각 부분의 최종 목적이 무엇인지 기억하는 데 도움이 되지만 분명히 디자인 프로세스 중에 새로운 요소를 추가할 수도 있습니다.
이 경우에는 5개의 컨테이너를 만들어서 다양한 영역에 콘텐츠를 추가하겠습니다.
첫 번째 레이어를 추가하면 #ededed 색상으로 배경이 됩니다. 레이어를 래스터화하고(color #ededed) 미묘한 노이즈 효과를 추가합니다(필터 > 노이즈 > 노이즈 추가... 양 0,5 – 0,8; 가우스 및 단색 확인).
첫 번째 레이어를 추가합니다. 이것이 배경 색상이 됩니다: #ededed. 레이어를 래스터화하고(색상: #ededed) 미묘한 노이즈 효과를 추가합니다(
필터 > 노이즈 > 노이즈 추가, 양: 0.5-0.8; 가우스 분포 및 단색 확인)
페이지 상단에 직사각형
을 그리고(직사각형 도구 사용, 색상: #cddcec) 다시 레이어를 래스터화하고 미묘한 노이즈를 추가합니다( 필터 > 노이즈 > 노이즈 추가 , 양: 0.5-0.8; 가우스 분포 및 단색 확인). 그라데이션 오버레이 추가(소프트 라이트, 54%, 검정색에서 흰색, 각도 90, 배율 75%) 직사각형 도구(U)를 사용하여 중간 컨테이너에 대한 새 모양(색상 #608bb6, 높이 약 400픽셀)을 추가하고 혼합 모드를 다음으로 설정합니다. 색상 번 및 채우기를 75%로 설정한 다음 레이어 스타일에서 1픽셀의 흰색 획을 추가합니다. 마지막으로 크레딧(바닥글)의 직사각형 모양을 만들고 중간 컨테이너와 동일한 도구와 색상을 사용하지만 이제 혼합을 설정합니다. 선형 조명 및 불투명도를 70%로 설정합니다. 직사각형 도구를 사용하여 중간에 직사각형 (0, 753, 1200, 400)(색상: #608bb6, 높이 400px)을 추가합니다. 영역에서 블렌딩 모드를 Color Burn으로 설정하고 채우기를 75%로 설정한 다음 1px 흰색 획을 추가합니다(레이어 스타일 패널에서). 마지막으로 직사각형 (0, 1592, 1200, 48) 을 추가하여 하단에 자막(바닥글)을 표시하고 중간 영역과 동일한 도구와 색상을 사용하고 혼합 모드를 설정하기만 하면 됩니다. 선형 조명으로( 선형 번이어야 합니다), 불투명도 는 70% 최종 결과보다 낮습니다. 다음은 최종 결과입니다 2단계: 배경 세부정보 배경에 더 많은 개성을 부여하고 싶습니다! 새 레이어를 추가하고(Ctr+Shift+N) 단일 행 선택 윤곽 도구를 사용하여 캔버스 상단에 1픽셀의 흰색 선을 추가합니다. 배경에 더 많은 기호를 추가하고 싶습니다 새 레이어를 만들고(Ctrl+Shift+N)단일 선 선택 윤곽 도구캔버스 상단에 1px 흰색 선을 추가하세요. 제안: 직선( 0, 0, 1200, 1) 이제 12×1 픽셀의 새 문서를 열고 배경 레이어의 잠금을 해제한 후 숨깁니다. 레이어 팔레트를 3200%로 확대하고 새 레이어를 추가한 다음 직사각형 선택 윤곽 도구를 사용하여 두 개의 1×1 픽셀 정사각형을 추가하고 아래와 같이 하나는 #fff 색상으로 채우고 다른 하나는 #000으로 채웁니다. 그런 다음 편집으로 이동합니다. > 패턴 정의. 이제 12px*1px 크기의 새 문서를 만들고 배경 레이어를 잠금 해제한 후 레이어 패널에서 숨깁니다. 3200%로 확대하고 새 레이어를 만든 다음 를 사용하여 두 개의 1px*1px 정사각형을 만듭니다. 하나는 채우기 색상이 #ffffff이고 다른 하나는 채우기 색상이 #000000입니다. 아래 그림과 같이. 그런 다음 편집> 패턴 정의 연필 도구 새 패턴을 사용하여 기본 문서로 돌아가려고 합니다. 패턴 직사각형 선택 윤곽 도구 이제 구름을 만들 차례입니다! 각 작업을 나누려면 5개의 안내선(84px – 186px – 600px – 1014px – 1118px)을 추가해야 합니다. 영역에서는 타원 도구를 사용하여 아래와 같이 몇 가지 모양을 추가하여 기본 모양을 만듭니다. 레이어 패널에서 이러한 레이어를 선택한 다음(Ctrl+이 레이어 클릭) Ctrl+G를 눌러 이러한 모양을 그룹으로 병합합니다. 그룹화하고 복사본을 스마트 개체로 변환합니다. 레이어 팔레트에서 그룹을 마우스 오른쪽 버튼으로 클릭한 다음 스마트 개체로 변환합니다. 이를 다시 조정하고 미묘한 노이즈 효과를 추가합니다. 이제 레이어를 사용하여 구름의 초과 부분을 숨겨야 합니다. 마스크: 구름의 아래쪽을 제외하는 선택 항목을 만들려면 "상단 배경" 레이어 축소판(레이어 팔레트에 있음)을 Ctrl 키를 누른 채 클릭한 다음 구름 레이어를 선택하고 벡터 마스크를 추가합니다. 그룹을 복제하고 사본을 스마트 개체로 변환 - 레이어 패널에서 그룹을 마우스 오른쪽 버튼으로 클릭하고 스마트 개체로 변환을 선택합니다. - 레이어를 래스터화하고 미묘한 노이즈 색상 효과를 추가합니다. 이제 레이어 마스크를 사용하여 나머지 구름을 숨겨야 합니다. 상단 배경 레이어 썸네일(레이어 팔레트에서)을 Ctrl + 마우스로 클릭하고 하단 구름을 제외한 선택 항목을 만든 다음 구름 레이어를 선택하고 레이어 마스크를 추가하세요. 다음 스타일을 적용하세요. 그런 다음 아래와 같이 스타일을 추가하세요. 레이어 패널에서 패턴 레이어를 맨 위로 이동 색상 오버레이 색상: #ededed 이제 구름 레이어를 복제하고 복사본을 원본 레이어 바로 아래에 배치한 다음 채우기를 0%로 설정하고 적용합니다. 다음 스타일을 따르세요. 이제 구름에 멋진 그림자를 추가해 보겠습니다. 구름 레이어를 복사한 다음 복사본을 현재 레이어 아래(약간 오른쪽)에 배치하고 채우기를 0%로 설정한 다음 아래와 같이 스타일을 추가합니다. 참고: 추가하기 전에 스타일 그 전에 복사한 구름의 아래쪽 절반을 삭제하는 작업을 수행해야 합니다 구름 복사본의 레이어를 선택한 다음 직사각형 선택 윤곽 도구를 사용하여 다음 선택 삭제 키를 눌러 클라우드 복사본의 하단 부분을 삭제 그럼 채워주세요 0%로 설정하고 아래와 같이 스타일을 추가하세요 그라디언트 색상 편집기: 왼쪽 색상: #4d76a4, 오른쪽 불투명도 80% 이 시점에서 동일한 기술을 사용하여 다른 구름을 그립니다.
3단계 – 헤더 세부정보 . (색상: #79a7db)를 사용하여 광고판을 디자인하고(펜 도구 사용 방법이 궁금하신가요? SEBASTIANO의 훌륭한 기사를 읽어보세요.) 선 도구 선분, 두께는 4px, 빌보드에 다음 레이어 스타일을 추가합니다 투영 색상: #79a7db 거리를 2
으로 변경한 다음 Drop Shadow를 추가하고 부드러운 그라데이션 오버레이: #79a7db 로봇 구성에 사용된 모든 도형을 그룹화하고 이전과 마찬가지로 레이어 마스크를 추가하여 다음과 같은 결과를 얻습니다. 모든 도형을 그룹으로 그룹화합니다. , 로봇을 형성하고 레이어 마스크를 추가합니다. 이전에 이 작업을 수행하여 다음과 같은 결과를 얻었습니다. 이 로봇을 그리는 것은 너무 복잡합니다. 이 로봇을 대체할 안드로이드 사진을 인터넷에서 직접 찾았습니다 이제 새와 뱃지를 그려야 합니다. 펜 도구, 브러시 도구 및 가로 문자 도구 간단하면서도 멋진 그림으로 레이아웃을 향상하는 방법을 이해하려면 아래를 살펴보세요. 이제 새와 털을 그려 보겠습니다. 무기. 펜 도구, 브러시 도구, 가로 텍스트 도구를 사용합니다. 레이아웃을 개선하는 방법을 이해하려면 다음 팁과 매우 간단한 예를 살펴보십시오. 참고: 새는 더 이상 그리지 않고 온라인에서 찾아보세요 새 이미지를 적절한 위치에 추가하세요 직사각형 도구를 사용하여 새의 왼쪽 상단에 직사각형을 추가합니다. 색상: #ebefbc 앵커 포인트 추가 도구를 사용하여 직사각형 왼쪽 중앙에 앵커 포인트를 추가합니다 새로 배치 추가된 기준점을 오른쪽으로 드래그 하고 다음 레이어 스타일을 추가합니다. 도형으로: 선 도구를 사용하여 새와 모양 사이의 흰색 직선 텍스트 도구를 사용하여 밝은 노란색 모양에 텍스트를 추가하세요. , 글꼴: Ballpark 4단계: 첫 번째 콘텐츠 영역 먼저 팀 구성원의 정보를 입력할 상자를 만듭니다. 직사각형 도구를 사용하여 480×425 흰색을 그립니다. 상자에 표시된 대로 두 개의 회색 선을 추가하고(클리핑 마스크를 만들어 흰색 상자 내의 세그먼트를 제한) 텍스트도 추가합니다(Delicious 글꼴 사용). 먼저 팀원 정보를 표시할 영역을 만듭니다. 직사각형 도구를 사용하여 흰색 직사각형 (532, 192)을 만들고 크기: 480px*425px 아래와 같이 회색 (#eeeeee) 두 개를 추가합니다. line ((532, 200) and (532, 606)) (직선이 흰색 직사각형 내부에만 표시되도록 클리핑 마스크 만들기) 및 텍스트 조각 추가(Font: Delicious), 다음 그림은 흰색 직사각형과 텍스트에 스타일을 추가합니다. 가이드 및 가로 문자 도구를 사용하여 팀 구성원에 대한 사진과 정보를 추가합니다. 이 경우 Lucida Sans를 사용하여 팀 구성원 사진과 정보를 추가합니다. 여기서는 Lucida Sans 글꼴을 사용합니다. 디자이너 이름 텍스트의 글꼴 설정은 다음과 같습니다. 색상: #1b77a8 다음과 같은 기술을 사용하여 흰색 화살표를 그립니다. 그리드의 도움으로 로 직사각형을 만들고 로 앵커 포인트를 추가한 다음 아름다운 리본 으로 바꿉니다. 를 선택한 후 를 활성화하여 다음과 같이 조정하세요 가로 문자 도구를 사용하여 “- – – – – – – –” 문자열을 생성합니다. 래스터화할 수 있습니다. 변형하여 다음과 같은 효과를 만듭니다. 부드러운 그림자도 추가합니다. 문자 도구를 사용하여 - - - - - - - 텍스트를 추가하고 래스터화한 후 변형을 따를 수 있습니다. 아래 효과를 적용하고 부드러운 그림자를 추가하세요 마지막으로 텍스트를 추가하세요(Delicious Font 사용) 일부 텍스트(Font: Delicious) 이제 스튜디오에서 제공하는 서비스에 대한 설명이 포함된 세 개의 블록을 만듭니다. 이 섹션에서는 Asher Abbasi가 WeGraphics를 위해 만든 Wapp vol. 2 및 Wapp vol. 1. 이 경우 가이드는 아이콘으로 채우고 섹션에 텍스트를 입력하는 데 매우 유용합니다. 이제 스튜디오에서 제공하는 서비스를 설명하는 블록 3개를 만듭니다. . 여기서는 Asher Abbasi가 제작한 WeGraphics의 Wapp vol. 2 및 Wapp vol. 1을 사용하겠습니다. 기억하세요: 그리드는 아이콘과 텍스트를 배치하는 데 도움이 됩니다 제목 글꼴: 색상: #10789b 아래 표시된 대로 3개의 "점"(좋은 그림자 포함)을 추가하고 1px 흰색 그림자로 텍스트를 향상시킵니다. 3개의 점(아름다운 그림자 포함)을 추가하고 아래 표시된 대로 이전 텍스트에 1px 흰색 그림자를 추가합니다점 투영, 투영 색상: #a3c6e6 텍스트 투영 흰색 상자 바로 아래에 멋진 메뉴도 생성합니다. 이 시점에서 이 메뉴를 구현하는 방법이 명확해야 합니다. "화살표"에 부드러운 내부 그림자만 추가합니다. 흰색 직사각형 아래에 아름다운 메뉴를 만들어 보겠습니다. 메뉴 구현 방법을 명확하게 알 수 있도록 화살표에 내부 그림자 스타일을 추가하겠습니다. 5단계 – 중간 리본 5단계: 디자인의 중간 요소는 슬로건이 포함된 큰 리본으로 소개되는 유익한 인포그래픽입니다. 이 리본을 구현하기 위해 평소와 같이 펜 도구( 초보자라면 Photoshop For Beginners: 펜 도구를 읽고 이 도구를 사용하는 방법에 대해 자세히 알아보세요. 어떤 종류의 모양을 그려야 하는지 이해하려면 아래를 살펴보세요. 기본 모양에는 #497287을 사용하고 어두운 모양에는 #798ea4를 사용합니다. 펜 도구 참고: 아래 그림과 같이 직사각형 도구와 를 사용하여 비슷한 모양을 완성할 수도 있습니다. 눈길을 끌 수 있도록, 각각 자, 같은 스타일을 적용해볼까요? 아래에서 볼 수 있듯이 "앞 모양"(우리가 사용할 패턴은 WeGraphics의 Old Paper Patterns에서 가져온 것입니다.) 12*24 패턴, 왼쪽과 각 면에 한 줄, 색상: #f0f0f0 두 개의 작은 삼각형에 다음 스타일을 적용합니다. 두 개의 삼각형에 다음 스타일을 추가합니다. 왼쪽 삼각형 투영 색상: #445055 오른쪽 삼각형 그림자 색상: #445055 마지막으로 슬로건 추가🎜> 6단계 – 인포그래픽 두 개의 원 디자인을 시작합니다(완벽한 원주, 색상 #3d3d3d를 그리려면 Shift 키를 누름). 왼쪽 모양의 경우 채우기를 0%로 설정하고 오른쪽 모양의 경우 혼합 모드를 생생한 빛으로 설정하고 채우기를 35%로 설정합니다. . 아래와 같이 스타일을 추가합니다(왼쪽 모양의 패턴 오버레이는 모두 동일함). (Shift를 누르고 있음) 완벽한 원을 그리는 키, 색상: #3d3d3d). 왼쪽 원의 채우기를 0%로 설정하고 오른쪽 원의 혼합 모드를 밝게 설정하고 채우기를 35%로 설정합니다. 레이어 스타일을 아래와 같이 설정합니다. (두 원 모두 동일하게 설정한 후 왼쪽에 패턴 오버레이 추가) 투영 색상: #445055 그런 다음 왼쪽에 패턴 오버레이 스타일을 추가합니다. 패턴은 12*12이고 왼쪽 위 모서리는 8*8 검은색 정사각형 왼쪽 원은 사용자 정의 패턴을 사용하므로 2단계와 동일한 기술을 사용하여 이 패턴을 만들 수 있습니다. . 왼쪽 원은 2단계의 기술을 사용하여 이 패턴을 만들 수 있습니다. 타원 도구(작은 흰색 원을 한 번 만든 후 복제하여 다시 사용)와 선 도구(가중치: 3px, 색상 #ffffff)를 사용하여 왼쪽의 그래프를 모두 그룹화합니다. 생성된 모양과 선을 생성하고 그룹을 복제한 다음 스마트 개체로 변환한 다음 래스터화합니다. 이제 레이어에 스타일을 추가할 수 있습니다. 타원 도구를 사용합니다(작은 흰색 원을 한 번 만든 다음 복제합니다. 필요한 만큼), Line Tool(가중치: 3px, 색상: #ffffff)을 사용하여 왼쪽의 원을 디자인합니다. 이러한 모양과 선을 그룹화하고, 그룹을 복사하고, 스마트 개체로 변환하고 래스터화하세요. 이제 그림자 색상에 레이어 스타일 을 추가할 수 있습니다: #94acb5 펜 도구를 사용하여 태그 몇 개를 그린 다음(생생한 색상 사용: #d82f4c, #edcd59, #4d85a2, #598b3b) 가로 문자 도구를 사용하여 이름을 지정하고 두 태그 모두에 소프트 드롭 shadwo를 적용할 수 있습니다. , 태그 및 텍스트. 다음으로 펜 도구를 사용하여 일부 태그를 그립니다(밝은 색상 사용: #d82f4c, #edcd59, #4d85a2, #598b3b, 사용된 실제 색상은 #cbc71e, #5a8c45, # e1c325, #ef6d39, #ec354d, #4c849e) 텍스트 도구를 사용하여 텍스트를 추가하고 라벨과 텍스트에 원하는 부드러운 그림자 스타일을 추가할 수 있습니다. 라벨의 레이어 스타일: 텍스트 레이어 스타일: 오른쪽 원 안에 다른 세 개의 원을 추가하고 채우기를 20%로 설정한 다음 그림과 같이 텍스트를 추가합니다(문자열에 부드러운 그림자를 적용할 수 있음). 추가 오른쪽 원에 또 다른 3개의 원( 색상: #092f46), 채우기를 20%로 설정하고 아래와 같이 텍스트를 추가합니다(텍스트에 부드러운 그림자를 추가할 수 있음) 이제 '디자인'과 '개발'의 과잉 부분을 숨겨야 합니다. 이미 본 것처럼 레이어 팔레트에서 "창의성" 원 모양을 Ctrl 키를 누른 채 클릭한 다음 선택 > 수정 > 확장으로 이동하여 값을 3픽셀로 설정합니다. Ctrl+Shift+I를 눌러 선택 항목을 반전시킨 다음 "Development"라는 모양에 레이어 마스크를 적용합니다. 3개의 원에 부드러운 그림자를 적용하여 세 원의 다른 매개변수는 동일합니다. 유일한 차이점은 각도가 다르다는 것입니다. 새 원을 그려보세요. 채우기를 0%로 설정하고 흰색 획(크기 3px)을 추가합니다. 스마트 개체로 변환하고 래스터화한 후 그림자를 추가합니다(이 "단계"에서 그래프에 적용된 것과 동일한 그림자). 인포그래픽에 다음 이미지와 같이 다른 선과 태그를 추가합니다. 스마트 개체로 변환하고 래스터화하고 그림자를 추가합니다(이 단계에서 이전과 동일한 그림자를 추가합니다). 마지막으로 아래와 같이 다른 라벨과 라인을 추가하세요 7단계: 하단 콘텐츠 영역 4단계와 동일한 방법으로 이 부분을 재현할 수 있습니다. 이 부분을 재현할 수 있습니다. 단계를 사용하여 4번의 기술을 이 부분에 재현합니다 원본 튜토리얼의 이 부분은 간단하고 여기에 자세히 추가하겠습니다 직사각형 도구 는 흰색 직사각형(186, 1220, 484, 290)을 만듭니다. 선 도구 를 사용하여 두 개의 직선(186, 1229, 484, 1) 및 (186, 1501 , 484, 1), 색상: #eeeeee; 텍스트 도구를 사용하여 텍스트를 추가하세요. 글꼴: Delicious. 텍스트 및 흰색 직사각형에 그림자 스타일 추가 사용 직사각형 도구 직사각형 2개(201, 1252) 및 (442, 1252)를 만들고 크기: 202px*132px에 다음 획 스타일 및 획 색상을 추가합니다: #bedbed 두 직사각형 위에 각각 이미지 파일을 배치한 다음 레이어 패널에서 이미지 레이어를 마우스 오른쪽 버튼으로 클릭하고 클리핑 마스크를 추가하여 이미지는 직사각형으로만 표시된다는 점 아래와 같이 이미지에 캡션을 추가합니다 제목 텍스트 글꼴: 색상: #1b77a8 자막 텍스트 글꼴: 색상: #a8b9c9 단락 텍스트 글꼴: 색상: #898989 아이콘과 텍스트를 추가하고 오른쪽에 포인트를 추가한 후 해당 스타일을 추가하세요. 제목 글꼴: 색상: #10789b 단락 텍스트 글꼴: 색상: #585858 아래 그림과 같이 2포인트, 색상: #5a8cc1을 추가하고 이전 텍스트에 1px 흰색 그림자를 추가합니다. 점 투영, 투영 색상: #a3c6e6 텍스트 투영 메인 콘텐츠 영역의 큰 흰색 깃발을 복사하여 가로로 뒤집은 후 해당 텍스트를 수정합니다 메인 콘텐츠 영역 오른쪽 하단의 스트리머 버튼 3개를 복사하여 가로로 뒤집어 해당 텍스트를 수정합니다 8단계: 저작권 크레딧과 함께 문자열을 추가하세요. 저작권 정보 추가 최종 결과: > 
2단계 – 배경 세부정보
사용할 새 패턴이 있습니다. 기본 문서로 돌아가서 새 레이어를 만들고 (직사각형 선택 윤곽 도구를 사용하여) 덮는 선택 영역을 그립니다. 전체 캔버스를 임의의 색상으로 채우고 채우기를 0%로 설정한 다음 레이어 스타일에서 패턴 오버레이를 추가합니다.
작업 영역을 제한하기 위해 5개의 가이드(84px – 186px – 600px – 1014px – 1118px)를 추가한 다음 타원 도구를 사용하여 표시된 대로 일부 모양을 추가하여 기본 모양을 만들 수 있습니다. 레이어 팔레트의 레이어(레이어를 Ctrl+클릭)를 누른 다음 Ctrl+G를 눌러 모양을 그룹화합니다.
시간 로고를 추가하려면 펜 도구(색상 #79a7db)를 사용하여 광고판을 디자인하고(펜 도구 사용 방법에 대해 의문이 있으신가요? Sebastiano가 작성한 이 환상적인 기사를 읽어보세요) 선 도구를 사용하여 두 개의 흰색 세그먼트를 추가합니다. 다음 스타일을 광고판에 추가합니다.
4단계 – 첫 번째 컨테이너
버튼 텍스트 글꼴: 색상: #ffffff
"follow us" 리본과 동일한 기술을 사용하여 직사각형 도구를 사용하고 가이드를 사용하여 직사각형 모양을 그립니다. , 앵커 포인트 도구를 추가하고 직접 선택 도구를 사용하여 멋진 리본으로 변형하세요.
스트리머에 그림자를 추가합니다. 방금 만든 레이어를 복제하고(기본 모양을 일시적으로 숨길 수 있음) 색상을 #000000으로 설정하고 불투명도를 5%로 설정합니다. 도형을 마우스 오른쪽 버튼으로 클릭하고 
단락 텍스트 글꼴: 색상: #585858, 텍스트 오른쪽 정렬 
의 색상이 별도로 변경되었습니다. : #497287, 더 어두운 모양의 색상 : # 798ea4
패턴 오버레이는 맞춤 패턴을 사용하며 효과는 비슷합니다. 
7단계 – 하단 컨테이너
8단계 – 크레딧
