Photoshop Font, Layer Mask

2022.09.20.

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 5

 

---

Review


오늘은 그동안 가장 배우고 싶었던 Font를 배우는 수업이었다.
오전부터 Naver, Google에 들어가 Font를 다운받고 Photoshop에서 Font를 이용해 디자인하는 예제를
실행했다. 너무너무 재밌었당

하지만 선생님께서 디자인이 재밌는 사람은 편집 디자인 쪽으로 가면 되는데,
디자인 쪽은 디자인과를 우대하고 비전공은 엄청 무시당한다는 매우 현실적인 말씀을 해주셨다...
그냥 가지 말라는 말씀이시죠 선생님..? 호에엥

여튼 오늘 선생님께서 실무를 경험해 본 바탕으로 프론트엔드나 웹퍼블리셔 등 우리가 취업할 수 있는 방향에
대해서 이런저런 이야기를 해주셨다.

이 수업에는 나와 같이 프론트엔드 개발을 배우러 왔다가 그냥 비슷한 수업으로 신청하신 분들이
꽤 있는 것 같다. 이 수업 커리큘럼이 프론트엔드 개발 쪽과도 관련이 있냐는 질문도 많이 하시는 듯하다.
선생님께서 요즘은 개발을 못하는 웹 디자이너를 뽑지 않는다는 말씀도 해주셨다.
결론은 웹 디자이너란 퍼블리싱, 프론트엔드까지 다 할 줄 알아야 한다는 말이다.
내가 몸값을 올릴 수 있는 방법은 그것 뿐이다.

이번주에는 교보문고에 가서 일단 웹디자인기능사 자격증 책을 좀 보고 오려고 한다.
자격증에 대해서도 조사하고, 못다한 HTML, CSS 공부할 거리도 좀 찾아보고 와야겠다.
파이팅-

---

 

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 5

Edit - Preference - Type에 들어가서 Font 이름을 영어로 보이게 하는 옵션을 해제했다.

---

<폰트 웹 사이트>

1. PXtoEM.com: PX to EM conversion made simple.

PXtoEM.com: PX to EM conversion made simple.

2. 네이버 글꼴 모음 (naver.com)

네이버 글꼴 모음

3. Google Fonts + 한국어 • Google Fonts + Korean

Google Fonts + 한국어 • Google Fonts + Korean

Browse Fonts - Google Fonts

Google Fonts

4. Font Awesome

Font Awesome

---

위의 글꼴은 설정에서 None으로 두었고, 아래는 Sharp로 두었다.
Ctrl + T를 눌러 크기를 조절할 수 있는데, 확대하거나 축소했을 때 확실히 위의 글꼴이 더 선명하게
보이는 것 같다.

Layer를 오른쪽 마우스로 클릭하면 Rasterize Type이 있다.
그걸 클릭하면 비트맵으로 바꿀 수 있다. 비트맵으로 설정되고 나면 폰트를 더이상 수정할 수 없다.

- otf : 오픈타입폰트.
- ttf : 트루타입폰트.

네이버 글꼴 모음 사이트에서 '나눔 글꼴'과 '마루 부리 글꼴' 을 무료로 다운받아 설치했다.
구글 폰트 사이트에서는 'Open Sans', 'Coming Soon' 영문 폰트를 다운 받아 설치했다.

유명한 만큼 깔끔하고 예뻐서 마음에 든다.

영문 폰트로 한글을 쓰면 이상한 기호가 나타나면서 오류가 나니 이 점을 알아두자.

위에 공유한 사이트 중 'Font Awesome' 이라는 사이트에 유명 브랜드의 아이콘들의 코드가 공유되어있다.
사이트에서 브랜드들의 아이콘 코드를 복사할 수 있다.
나같은 경우는 'twitter' 라는 브랜드의 아이콘을 선택하여 복사했다.

포토샵으로 와서 Text Tool을 켜고 코드를 붙여넣기 한다.
그러면 위와 같이 나타나고 Ctrl + T 를 눌러 크기를 조절하면 된다.

 

svg 파일

svg 파일 자체를 포토샵에서 open하면 위와 같은 형태로 나타난다.
사이즈를 조절해도 깨짐이 없어 어느 크기로든 사용할 수 있다.

Type - Orientation - Vertical 을 하면 형태가 세로로 바뀐다.
영문은 세로쓰기가 되지 않는데, 한글은 세로쓰기가 가능하다.

---

 

500 x 500 사이즈의 New Layer를 열어준 다음, Ctrl + R을 눌러 자를 끌어다가 250 x 250이 되게
깔끔하게 조정해준다.

사각형 툴로 아래 부분을 선택해 검정색으로 채워준다.

Type Tool로 'Photoshop' 문자를 쓴 다음 'Ctrl + Photoshop Layer 클릭' 하면

텍스트가 선택이 되고, 이 상태에서 Alt 키를 눌러 선택을 제거할 부분을 선택한다.
윗부분을 제거해 폰트의 아래 부분만 하얀색으로 보이도록 선택할 것이다.

새로운 Layer를 하나 생성하고, 'Alt + Delete' 를 눌러 하얀색으로 채워준다.

예제 완성

Ctrl + H 를 눌러 Guide를 제거하면 완성이다.

---

 

Type Tool로 먼저 빈 Layer에 문구를 쓰고 나서

Quick Selection을 사용해서 장미를 선택했다.
Magic Wand Tool로 해도 된다.

장미를 아까 문구 Layer에 끌어와서 Ctrl + T로 크기를 조절한다.

장미 Layer에서 보정을 해줬는데, Lighten으로 바꿔주고 Hue/Saturation도 재설정했다.

예제 완성

 

---

Type Tool로 먼저 문구를 적어준다.

곡선을 그려야 해서 Curvature Pen Tool을 이용해서 그려줬다.
Fill은 없애고 Stroke만 문구와 같은 색상으로 설정해준 후 드래그 하면서 마우스로 찍으며
곡선을 그려줬다.

Red 곡선은 예쁘게 그려지지 않아서 Ctrl + T 에서 Warp 기능으로 좀 더 다듬었다.

예제 완성

---

원본

 

Type Tool로 문구를 써준 다음 Type - Warp Type - Arch 로 설정하고 비율을 알맞게 조얼해준다.

예제 완성

---

Healing Brush Tool로 문구를 넣을 자리를 보정해준다.

그런 다음 Type Tool을 클릭해 'Invite to dinner' 이라는 문구를 넣고 Type - Warp Text 에 들어가
아치형으로 설정 후 Bend 비율을 조정한다.

예제 완성

---

위와 마찬가지로 문구를 삽입할 부분을 위해 Healing Brush Tool과 Patch Tool을 이용해 보정한다.

그런 다음, 문구를 넣고 Type - Warp Text 에 들어가 아치형으로 설정 후 Bend 비율을 조정한다.

예제 완성

---

원본

 

문구를 넣고 난 다음 Type - Warp Text 에 들어가

Rise로 설정 후 Bend, Horizental, Vertical 모두 알맞게 조절한다.

 

Curvature Pen Tool을 이용해 원을 그린 다음 Type Tool을 그 위에 갖다대면 원 모양 그대로
문구를 작성할 수 있다.

Direct Selection Tool로 드래그를 하면서 Text를 이동시킬 수 있다.
자간 비율을 조절하며 알맞게 배치한다.

Pen Tool로 그렸던 Path를 삭제하면 Pen Tool은 없어지고, 텍스트만 알맞게 조정한다.
Alt 키를 누른 채로 마우스로 드래그하면 Layer를 복제할 수 있다. 다른 곳에도 같은 이미지의
Layer를 배치시킨다.

예제 완성

마지막으로 Layer Opacity만 조절하면 완성된다.





<Layer Mask 예제>

Vector Mask를 만들어준다.
Layer Mask에는 색을 넣어줘도 음영만 남는다.

검정색 칠했을 때,

 

하얀색 칠했을 때

 

회색 칠했을 때

Mask에 검정색을 칠하면 안보이게 하는 역할을 하고,
하얀색을 칠하면 보이게 하는 역할을 한다.
회색을 칠하면 Opacity만 낮춘 것처럼 변한다.

1번 사진

 

2번 사진

 

2번 사진을 1번 사진으로 끌어온 후, Layer 1의 레이어마스크를 생성한다.

예제 완성

Gradient를 켜고 레이어 마스크를 클릭한 뒤 10시에서 4시 방향으로 드래그하면 완성된다.
여기서 주의할 점은 Gradient의 Mode를 Screen으로 설정하면 그라디언트가 먹히지 않으니
꼭 Normal로 두어야 한다.

---

 

1번 사진

 

2번 사진

 

1번 사진에 2번 사진을 끌어온 후, Layer 1의 레이어 마스크를 생성한다.

예제 완성

레이어 마스크를 클릭한 뒤, 드래그 해서 그라디언트를 넣어주면 완성이다.

---

 

Layer 1의 눈을 꺼주고 카메라에 사진을 넣을 부분을 동그라미 툴로 선택한다.

예제 완성

그런 다음 눈을 켜주고 Layer Mask를 생성한다.
레이어 링크를 해제한 후 레이어 이미지를 클릭하고 크기를 조절하면 완성이다.

---

1번 사진

 

2번 사진

 

2번 사진을 1번 사진으로 옮긴 후 Ctrl + T를 눌러 Ctrl 키를 누른 채로 이미지 꼭짓점을 조정해
수영장 부분에 대충 맞춘다.

Layer 눈을 끄고 Polygonal Nasso Tool로 석양 이미지를 넣을 부분을 선택한다.

레이어 마스크를 생성한다.

Layer Link를 풀면 이미지를 자유롭게 이동시킬 수 있다.

예제 완성

 

Layer 2의 눈을 끈 다음 동그라미 툴로 이미지를 넣을 곳을 선택해준다.
조금 자연스럽게 보이게 하기 위해 Feather 값을 6으로 줬다.

예제 완성

그런 다음 Layer Mask를 생성하고, 레이어 링크를 해제하고 이미지를 조절하면 완성이다.

---

 

Layer 0의 눈을 꺼주고, 동그라미 툴로 사진을 넣을 부분을 선택한다.

예제 완성

그러고 나서 눈을 켜주고, 레이어 마스크를 생성한 후 레이어 링크를 해제해 이미지 사이즈를
조절한다.

---

 

물고기를 Object Selection Tool을 이용해서 선택해준다.

바다 사진으로 드래그 해 끌고 와서 크기를 조정해준다.

예제 완성

그런 다음, 레이어 마스크를 생성하고 레이어 마스크를 클릭한 뒤,
Gradient를 6시에서 12시 방향으로 직선 방향으로 넣어주면 자연스럽게 변형이 된다.

*이미지 출처
Instagram : @postershop.kr

*내용 출처
: https://www.gilbut.co.kr/book/view?bookcode=BN003325#bookData