Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Hand Lettering
Design

어도비 포토샵에서 손으로 쓴 집들이 포스터를 만드는 방법

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Home Sweet Home.
How to Draw a House Step by Step
Best of the Design Web: April 2017

Korean (한국어) translation by h1ghqlty. (you can also view the original English article)

Final product image
What You'll Be Creating

이 자습서에서는 손으로 그린 ​​레터링 포스터를 만들어 집을 편안하게 만들고 모든 실내에 따뜻한 분위기를 더합니다. 우리는 어도비 포토샵의 다양한 그리기 도구와 기능을 사용하여 처음부터 멋진 편지를 만들고 필기체를 디지털화하여 종이에서 포토샵으로 옮기고 편집하여 포스터에 맞게 만들 것입니다.

이 자습서가 끝나면 이 레터링 포스터와 같이 더 많은 레터링 그림을 만들 수있는 팁과 트릭을 배웠습니다. 포스터가 인쇄되어 프레임에 배치 될 때 포스터가 어떻게 보이는지 궁금해지면 실제 포스터 프레임 모형을 시험해 볼 수 있습니다.

시작해봅시다!

1. 펜 도구로 글자를 만드는 법

1 단계

모든 것은 처음부터 시작됩니다. 우선, 우리는 우리가 무엇을 만들지에 대한 생각을 가질 필요가 있습니다. 우리는 집들이 포스터를 만들 계획이므로 아늑한 분위기를 위해 멋진 견적을 선택하기로 했습니다. 저는 "집은 당신의 마음이 있는 곳입니다"를 쓰고 "집"이라는 단어를 강조하면서 몇 가지 거친 섬네일 스케치를 만들었습니다.

첫 번째 스케치에서 인용문을 집 모양 안에 삽입하려고 시도하지만 이 경우 이미지의 일부가 불필요한 세부 사항으로 다소 갑갑하고 바쁘다고 생각하지만 구성의 주요 부분인 글자 자체는 너무 단조롭습니다. 그 외에도 "하트 "라는 단어와 상호 작용하지 않습니다. 이 단어는 "집 "이라는 단어와 균형을 이루는 또 다른 중요하고 의미 있는 요소입니다.

이 방법으로 생각하면, 나는 두 단어를 분명히 강조하는 또 다른 대략적인 스케치(첫 번째 것보다 더 거친 것)를 만듭니다. 나는 또한 "집"이라는 말 위에 양식화 된 지붕을 묘사하고 "하트" 라는 단어를 심장 모양으로 배치하는 상징주의의 손길을 더합니다. 이제 모든 것이 균형적이고 의미있게 보입니다. 두 번째 스케치에서 포스터를 만들어 봅시다!

thumbnail sketches

참조 스케치를 참조 이미지로 사용하려면 아래 스크린 샷을 마우스 오른쪽 버튼으로 클릭하고 컴퓨터에 저장하십시오.

home lettering sketch

2 단계

3000 x 3000 px, 300 ppi의 새 문서를 만들고 거기에 스케치를 놓으십시오.

스포이드 도구 (I)를 사용하여 스케치에서 진한 파란색 색상을 선택하고 페인트 통 도구 (G)를 사용하여 배경 레이어에 적용합니다.

스케치불투명도25%로 낮추십시오. 너무 흐리다면 반투명하게 만듭니다.

place sketch into photoshop

3 단계

이제 펜 도구 (P)를 사용하여 "홈"이라는 단어의 윤곽을 그리기 시작합니다. 폴리 라인을 사용하여 문자 "H"의 왼쪽 줄기를 그립니다. 경로를 닫고 오른쪽 줄기로 이동하여 얇게 만듭니다.

use the pen tool to trace the letter

펜 도구 사용이 불편하고 불안감을 느끼십니까? 걱정하지 마세요. 조금만 더 연습하면됩니다! 이 도구는 실제로 무서워하지만 사용하기가 어렵지 않습니다. 펜 도구에 대한이 쉬운 지침을 확인하고 직접 확인하십시오!

4 단계

크로스바에 대한 직사각형 모양을 만들고 우리 글자의 모든 요소를 ​​통합합시다! 직접 선택 도구 (A)로 모든 항목을 선택하고 상단의 제어판에 있는 경로 작업 메뉴로 이동하십시오. 여기에서 셰이프 결합을 선택하고 메뉴 아래쪽의 셰이프 구성 요소 병합을 눌러 적용합니다. 우리는 그것을 갖고 있습니다! 이제 편지의 모든 부분이 합쳐졌습니다!

 Combine Shapes in Path Operations

5 단계

계속 나아가 글자 "O"를 추적 해 봅시다. 그것은 여러 요소들로 구성 될 것이므로, 주요 부분부터 시작합시다. 포인트를 만들 때마다 앵커 핸들을 드래그하여 선을 매끄 럽고 곡선으로 만듭니다. 타원형을 만들고 나서 "O"의 계수기를 만듭니다.

직접 선택 도구 (A)로 두 타원을 선택하고 이번에는 경로 조작 메뉴에서 겹쳐진 모양 제외를 선택하십시오. 셰이프 구성 요소 병합을 클릭하여 내부 원을 잘라냅니다.

Exclude Overlapping Shapes in the Path Operations menu

6 단계

우리는 우리의 글자를 약간의 색으로 채워서 경로 운용이 제대로 작동하는지 확인할 수 있습니다. 패스 패널 (윈도우> 패스)을 열고 패널 아래쪽의 전경색으로 패스 채우기를 클릭하고 현재 색상 패널에서 흰색으로 설정된 전경색을 적용해 봅시다.

Fill path with foreground color in the Paths panel

7 단계

채우기를 제거하고 글자 디자인을 계속하기 위해 이전 작업을 실행 취소 (Ctrl-Alt-Z)를 합니다.

펜 도구 (P)를 사용하여 스케치를 기본으로 사용하고 글자 위로 "O"의 스와시를 형성합니다. 글자 "O"의 왼쪽 상단부터 시작하여 점차 오른쪽으로 이동하여 바나나 모양의 곡선을 만듭니다.

add a swash to the letter

8 단계

마우스 키(또는 그래픽 태블릿의 펜)를 놓지 않고 도구를 전환하지 않고도 경로의 방향을 변경할 수 있습니다. 클릭하고 드래그하면 앵커 포인트의 핸들을 볼 수 있습니다. 그런 다음 마우스 키를 누른 상태에서 Alt 키를 클릭하고 핸들을 위로 돌리고 이동하십시오. 스와시의 맨 처음 고정점과 연결하여 경로를 닫습니다.

우리는 항상 직접 선택 도구 (A)를 사용하여 앵커 포인트를 이동하여 선이 매끄럽게 보이게 만듭니다.

add a swash to the letter 2

9 단계

"O"의 두 요소를 선택하고 모양 결합 및 모양 구성 요소 병합 기능을 사용하여 모양을 통합하십시오.

use the Combine Shapes and Merge Shape Components functions

10 단계

펜 도구 (P)를 사용하여 폴리 라인으로 글자 "M"을 그립니다.

use the Pen Tool to draw out the letter M

11 단계

글자 "E"로 계속하십시오; 이것은 이전 글자보다 조금 더 복잡 할 것입니다. 펜 도구 (P)를 사용하여 "O"문자와 비슷한 타원형을 만들기 시작하십시오. 직선을 사용하여 글자의 마지막 부분을 형성 한 다음 "E"의 안쪽 부분에 곡선 경로를 계속 형성하십시오.

Continue to the letter E

12 단계

점차적으로 위로 이동하십시오. Alt 키를 누른 상태에서 앵커 핸들의 방향을 변경하여 문자 "E"의 크로스바에 모서리를 만듭니다. 실루엣을 끝내고 길을 막으십시오.

change the direction of the anchor handle to make a crossbar

13 단계

문자의 안쪽 부분(카운터)에 드롭 모양의 모양을 추가하십시오. 이제 두 요소를 모두 선택하고 겹침 모양 제외를 적용 할 수 있습니다 (경로 작업에서 원하는 기능을 선택한 후 모양 구성 요소를 병합하는 것을 잊지 마십시오).

패스 패널에서 문자를 흰색으로 채워서 확인할 수 있습니다.

Add a drop-like shape for counter of the letter

단계 14

이제 펜 도구 (P)를 사용하여 곡선 모양을 형성하기 위해 크로스바 반대쪽에 스와시를 추가해 보겠습니다.

add a swash to the opposite side of the crossbar

단계 15

패스 작업에서 셰이프 결합과 파트를 모두 선택하고 셰이프 구성 요소 병합을 클릭하여 효과를 적용합니다.

Combine Shapes in the Path Operations

16 단계

좋습니다! 단어 "홈"의 모든 문자가 준비되었습니다. 패스 패널을 사용하여 문자를 흰색으로 채웁니다.

이제 채우기에 몇 가지 효과를 적용하여 문자를 더 재미있게 보이게 만듭니다.

use the Paths panel to fill the letters

2. 그림자와 그라디언트를 추가하는 방법

1 단계

그래디언트 채우기를 사용하여 글자에 볼륨을 추가해 보겠습니다. 그라디언트 도구 (G)를 사용하십시오 (페인트 통 도구와 동일한 드롭 다운 메뉴에서 찾을 수 있음).

먼저, 레이어 패널로 이동하여 "홈" 레이어의 투명한 픽셀을 잠궈서 주변에 영향을 주지 않고 모든 작업이 문자에만 적용되도록합니다.

색상 패널로 이동하여 파란색을 전경색으로, 흰색을 배경색으로 설정합니다.

그런 다음 그라디언트 도구 (G)를 잡고 단어 "홈"의 맨 아래에서 파란색에서 흰색으로 수직 선형 그라데이션을 적용하여 끕니다. 원하는 그라디언트 유형을 선택하여 상단의 제어판에서 그라데이션 설정을 확인할 수 있습니다.

apply linear gradient

2 단계

글자로 배경에 그림자를 드리 우고 "홈"이라는 단어를 더 두드러지게 만드십시오. "홈"레이어 바로 아래에 새 레이어를 만듭니다. 이제 새 레이어를 선택한 채로 Ctrl 키를 누른 상태에서 "홈"레이어를 클릭합니다. 이 방법으로 우리는 편지 주위에 "행진하는 개미"선택을 만듭니다.

색상 패널에서 전경색을 진한 파란색으로 설정하고 페인트 통 도구 (G)를 가져 와서 채우기를 클릭하여 새 레이어에 "홈"이라는 단어의 진한 파란색 복사본을 만듭니다. 이제 아래쪽 레이어를 몇 픽셀 아래로 오른쪽으로 이동하여 진한 파란색 그림자를 표시 할 수 있습니다.

create a shadow from selection

3 단계

이제 글자에 부드러운 그림자를 추가하여 입체적으로 만드는 방법을 살펴 보겠습니다. 펜 도구 (P) 또는 자유형 펜 도구를 사용하여 모양을 만듭니다. 글자 "E"를 확대(Ctrl-+)하고 아래의 스크린 샷과 같이 스와시와 크로스바를 연결하는 경로를 그립니다.

직사각형 모양을 만들어 경로를 계속 구축하십시오. 그것은 완벽할 필요는 없습니다. 단지 글자보다 더 넓어야합니다.

use the Pen Tool to connect the swash with the crossbar

4 단계

레이어 패널에서 "홈"레이어를 선택하고 Alt 키를 누른 상태에서 새 레이어 만들기 버튼을 클릭합니다. 팝업 새 레이어 창에서 이전 레이어를 사용하여 클리핑 마스크 만들기 상자를 선택하여 링크 된 레이어를 만듭니다. 새로운 레이어 옆에 작은 화살표가 표시됩니다.이 화살표는 우리가 그 위에 무엇을 그려도 메인 레이어의 오브젝트 경계 안에만 나타납니다.

어떻게 작동하는지 봅시다. 마우스 오른쪽 버튼을 클릭하고 선택을하십시오. 그라디언트 도구를 사용하여 파란색에서 흰색으로 대각선의 선형 그래디언트를 적용합니다.

Make Selection and apply gradient

5 단계

연결된 레이어의 혼합 모드를 Multiply로 전환하여 그라디언트의 흰색 부분을 투명하게 만듭니다. 우리는 글자 "E"의 몸체에서 크로스바(와 그 스와시)를 분리하여 부드러운 그림자를 만들었습니다.

같은 그림자를 크로스바 상단에 추가합니다. 이번에는 그라디언트 방향을 반대 방향으로 변경하십시오.

Switch the Blending Mode to Multiply

6 단계

동일한 기술을 사용하여 글자 "O"에 그림자를 추가합니다. 글자에서 볼록한 부분을 떼어냅니다.

이제 전체 단어가 입체적으로 보입니다. 컴포지션의 다음 요소로 넘어 갑시다!

add the shadow to the letter O

3. 사용자 정의 도형을 추가하고 레터링을 디지털화하는 방법

1 단계

우리가 다음에 할 일은 하트 모양을 추가하는 것입니다. 다행히 수동으로 그릴 필요가 없습니다. 사용자 정의 도형 도구를 사용할 수 있고, 제어판의 모양 목록에서 마음을 고르고, 스케치를 사용하여 원하는 크기의 하트를 만들 수 있습니다. 레퍼런스 스케치를 참고하십시오.

create a heart with custom shape tool

2 단계

직접 선택 도구 (A)를 가져 와서 앵커 핸들을 움직이면 심장이 더 부풀어 오르고 아래쪽이 둥글게됩니다. 핸들을 볼 수 없으면 포인트 변환 도구를 사용하여 핸들을 클릭하여 앵커 포인트 밖으로 드래그하십시오.

드롭 다운 패널에서 원하는 색상을 선택하여 상단의 제어판에서 채우기 색상 사이를 전환하거나 둘 다 설정하거나 없음으로 설정합니다.

나는 마음 속에 내 스케치의 글자를 볼 필요가 있기 때문에 채우기 색을 없음으로 설정하고 있습니다.

reshape the heart

3 단계

"하트"라는 단어로 넘어 갑시다. 이러한 스크립트 스타일의 손으로 그린 ​​레터링의 경우 실제 브러시 펜과 용지를 사용하는 것이 좋습니다. 언제나 손으로 직접 글자를 써보고 싶다면 좋은 출발점입니다. 가장 좋은 브러시 펜 중 하나가 Tombow Fudenosuke이거나 다른 브러시 펜 일 수도 있습니다.

평범한 젤 펜이나 연필로도 할 수 있습니다. 가짜 칼리그래피를 수동으로 작성하고 색상으로 채우는 소위 "가짜 칼리그래피"를 만듭니다. 우리의 경우에는 어쨌든 포토샵에서 조정할 것 이므로 손으로 글자를 쓴듯한 효과를 얻는 것이 좋을 때 어떻게 영향을 미치는지는 중요하지 않습니다.

그래서 저는 문자에 글자를 긋고 편지의 모양을 하트 모양과 비슷하게 배치합니다. 나중에 각 글자의 위치가 마음에 맞지 않으면 조정할 수 있으므로 걱정하지 마시고 참고 스케치에있는 글자와 비슷하게 보이도록 노력하십시오.

글자를 스캔하거나 사진을 만들어 포토샵으로 드래그하십시오. 이미지> 조정> 레벨 (Control-L)로 이동하여 여기에서 레터링 레이어의 전체 대비 및 밝기를 늘려서 어두운 문자를 실제로 검정색으로 만들고 배경색을 흰색으로 만들어 용지 텍스처를 사라지게 해야합니다.

이렇게하려면 검은 색 슬라이더를 오른쪽으로 드래그하고 반대쪽 (흰색) 슬라이더를 왼쪽으로 드래그하여 중간 슬라이더에 더 가깝게 배치하십시오. 두 슬라이더의 위치를 ​​조정하면서 이미지를 선명하고 깨끗하게 보이게합니다.

digitise your lettering and use Levels

4 단계

대비 문자에 만족하면 선택> 색상 범위로 이동하여 옵션 창을 엽니다. 여기에서 기본적으로 스포이드 도구가 선택됩니다. 단어 "하트"위에 마우스를 놓고 검은 글자 중 하나를 클릭하십시오. 퍼지 슬라이더를 40%로 두거나 검정 영역이 모두 미리보기에 표시되지 않는다고 생각하면서 값을 조정하십시오. 준비가 되면 확인을 클릭하면 편지 주변에 "개미 행진"이 표시됩니다. 편지를 복사 (Control-C)하십시오.

use Select Color Range to select black letters

5 단계

이제 포스터에 "하트"단어를 붙여 넣고 (Control-V) 자유 변형을 위한 Control-T를 눌러 레이어의 크기를 조정하고 회전하여 하트 모양에 맞 춥니 다.

글자 중 일부가 심장 모양에 맞지 않는 경우 올가미 도구 (L)를 사용하여 글자를 선택하고 (그 주위를 그립니다) Control-T를 다시 누르고 선택한 문자를 개별적으로 회전/크기조정 하십시오.

우리의 글자를 눈에 보이게하고 밝게합시다. "하트" 레이어를 선택하고 이미지> 조정> 반전으로 이동하여 글자 색상을 검정색에서 흰색으로 변경합니다.

Paste and Invert the layer

6 단계

문자 주위에 작은 세부 사항을 추가해 보겠습니다. 브러시 도구 (B)를 가져 와서 브러시 패널 (윈도우> 브러쉬)을 열거 나 마우스 오른쪽 버튼을 눌러 브러쉬 목록을 열고 하드 라운드 브러시를 선택하십시오.

목록에 이 항목이없는 경우 오른쪽 상단에있는 작은 톱니 바퀴 아이콘을 클릭하여 드롭 다운 메뉴를 열고 목록에 크기가 있는 둥근 브러쉬를 찾으십시오. 그것을 클릭하고 바꾸거나 브러쉬 목록에 추가하십시오.

open the brush panel or list of brushes

7 단계

브러시 설정은 상단의 제어판에서 찾을 수 있습니다. 불투명도흐름100%로 유지하여 선을 선명하고 두껍게 만듭니다. 그래픽 태블릿을 사용하여 "H" 문자 주위에 점과 획을 그립니다.

add minor details

8 단계

각 문자 주위에 획과 점을 추가하십시오. 작업이 끝나고 결과에 만족하면 하트 모양 레이어를 선택하고 사용자 정의 모양 도구를 클릭하여 상단의 컨트롤 패널에 있는 모양 메뉴를 활성화하고 채우기 색상을 빨간색으로 설정하여 심장 안쪽을 채우십시오

fill the heart with red color

9 단계

노란색에서 흰색까지 간단한 선형 그래디언트를 적용하여 "하트"글자에 황금색 또는 금속성 느낌을 더 해보겠습니다. 이렇게하면 입체적으로 보입니다.

apply gradient to the lettering

10 단계

다음으로 우리는 "is"라는 단어를 그려 볼 것입니다.이 단어는 따옴표에 두 번 사용됩니다. 따라서 실제로 두 번 쓰면 모든 요소를 ​​독특하고 손으로 쓴 것처럼 보이게 할 수 있습니다.

저는 동일한 하드 라운드 브러시와 그래픽 타블렛을 사용하여 스케치를 참조로 사용하여 작은 글자 "i"를 그립니다. 보시다시피, 처음부터 위아래 수평선을 그린 다음 문자의 가장자리에 두 개의 세로선을 추가하여 두께를 정의합니다. 그리고 마지막으로, 편지의 안쪽 부분을 하늘색, 거의 흰색의 색으로 채 웁니다.

그런 다음 문자 "s"와 똑같은 기술을 사용합니다. 그 실루엣을 그려 내면 안쪽 부분을 색으로 채웁니다.

write with hard round brush

11 단계

여기서 우리는 포스터가 지금까지 어떻게 보이는지 볼 수 있습니다. "is"레이어 (Control-J)의 사본을 사용하여 하트 바로 아래에 추가했습니다.

use the copy of the is layer

12 단계

이제 우리는 콤포지션의 다음 요소로 넘어 가서 심장 모양 바로 위에 "당신의" 단어를 추가 할 수 있습니다.

단단한 손과 그래픽 태블릿이있는 경우 어도비 포토샵의 하드 라운드 브러시 또는 붓글씨 브러시로 실험해 볼 수 있습니다. 또는"하트"라는 단어에 사용 된 것과 동일한 기술을 사용할 수 있습니다.

따라서 브러쉬 펜을 사용하여 종이에 "어디에서"라는 문구를 작성한 다음 스캔하여 포토샵으로 가져 와서 레벨(Control-L)을 사용하여 깨끗하고 대조적으로 만듭니다. 그런 다음 선택 > 색상 범위를 사용하여 검정색 글자를 선택하고 복사 (Control-C)붙여 넣기 (Control-V)를 포스터에 바로 넣습니다. 자유 변형 (Control-T)을 사용하여 단어를 회전하고 크기를 조정하여 하트 모양의 상단 부분에 맞춥니다.

이미지> 조정 > 반전으로 레이어를 반전시켜 문자를 흰색으로 만듭니다.

아래의 스크린 샷에서 볼 수 있듯이, "하트"라는 단어와 마찬가지로 빨간색 점과 획을 하트 ​​왼쪽 가장자리에 추가하기 시작했습니다. 포스터의 전반적인 디자인에 복잡하고 장난기있는 표정을 제공합니다. 따라서 이 종류의 장식적인 세부 정보를 추가하여 포스터를 고집합시다.

scan and digitize your hand-lettering

13 단계

하드 라운드 브러시(100% 불투명도흐름)를 사용하여 하트 주위에 작은 장식 세부 사항을 계속 추가하십시오.

ad minor decorative details around the heart

14 단계

하트가 끝나면 포스터 상단으로 이동하여 우리집의 양식된 지붕 같은 장식 스타일로 그려 봅시다. 새 레이어 만들기, 전경색을 하늘색으로 설정하고 브러시의 크기를 변경하여 주위의 점과 획보다 지붕의 삼각형 모양을 조금 더 두껍게 만듭니다.

나는 벽난로의 굴뚝에서 매우 단순화되고 거의 추상적인 연기를 묘사 한 지붕 오른쪽에 소용돌이 치는 요소를 추가하고 있습니다.

다음으로, "홈"이라는 단어 아래에 약간의 선을 추가하여 반대 방향으로 굴려 지붕의 균형을 잡습니다.

draw a stylized roof of our house

15 단계

다른 장식 요소 집합에 대한 새 레이어를 만들어 보겠습니다. 여기서는 전경색을 훨씬 더 어둡게 만들고 단어 "홈"의 글자 주위에 소용돌이, 선 및 점을 추가합니다. 이미지 > 조정 > 스트로크가 너무 어두우면 레이어를 뒤집을 수 있고 전체 단어를 마쳤으면 뒤를 뒤집을 수 있습니다.

create another set of decorative elements

16 단계

여기에 우리의 어두운 장식품이 완성되었습니다! 계속 해봅시다!

dark ornaments are finished

17 단계

우리는 하트 주변에 더 많은 소용돌이와 스트로크를 추가 할 것입니다. 먼저 이미지의 왼쪽을 채우고 반대쪽으로 이동하여 유사한 장식을 만들어 컴포지션의 균형을 맞추게하십시오.

포스터 맨 아래에 "is"라는 단어의 양쪽에 연한 파란색 가로 스트로크를 추가하여 마무리하십시오.

Finish up by adding light-blue horizontal strokes

홈 스위트 홈! 우리 집들이 포스터가 준비되었습니다!

위대한 직업, 여러분! 이 튜토리얼이 당신의 아늑한 실내 장식이나 인쇄물을 위해 손으로 직접 써주는 장난이 많은 포스터를 만드는 데 영감을 불어 넣기를 바랍니다. 이 기사에서 설명한 모든 팁과 트릭을 자유롭게 사용하고 결과를 공유하는 것을 잊지 마십시오.

행복한 디자인!

Our Housewarming Poster is Ready
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.