UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 개강

2022.09.14.

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

 

 

---

Review


드디어 국비과정 개강 첫 날이다.

원래 8월 29일에 개강 예정이었는데 2주가 미뤄져 오늘 개강하게 되었다.
오늘은 오자마자 학원 관계자 분이 OT를 하시고, 선생님은 포토샵 선수업 때 했던 것들을
기초로 다시 포토샵 Tool을 익히는 수업을 하셨다.

OT를 들으면서 6개월 동안 정말 성실하지 못한 사람들이 많구나 그런 생각을 했다.
성실하게 출석하며 수료한다면 나에게 정말 도움이 되는 시간이 될 것 같다.

선생님께서 취업에 도움되는 자격증에 대해 말씀해주셨다.
이 과정을 공부하면서 내가 딸 수 있는 자격증으로는 GTQ 포토샵, GTQi 일러스트, 웹디자인 기능사,
컴퓨터 그래픽스 운용기능사 등이 있다.

알아보니 GTQ 포토샵, GTQi 일러스트는 같은 날에 응시하면 1교시, 2교시로 하여 한번에
응시할 수 있다고 한다. 올해는 12월 24일에 마지막 시험이 있어 그 때 꼭 응시하려고 한다.
웹디자인 기능사와 컴퓨터 그래픽스 운용기능사 시험은 올해는 끝이 났다.
2개는 내년에 수료하고 나서 준비하는 걸로 계획을 세워보려고 한다.

오늘 거의 8시간 정도 수업을 듣고 나니 진이 다 빠진다.
공시 준비할 때는 하루에 10시간도 넘게 공부 했는데, 그때도 그렇고 지금도 그렇고 공부는 역시
체력 싸움인 것 같다. 잘 먹고 운동도 하면서 체력 관리를 열심히 해야할 것 같다.
힘내자 -

---

 

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

<자격증 관련 사이트>
: 선생님께서 자격증 시험을 준비할 때 도움이 되는 사이트를 공유해주셨다.
기출문제를 풀거나 시험 일정 등을 조사할 때 도움이 될 것 같다.


1. 최강 자격증 기출문제 전자문제집 CBT (comcbt.com)

최강 자격증 기출문제 전자문제집 CBT

2. GTQ(그래픽기술자격) 소개 (kpc.or.kr)

GTQ(그래픽기술자격) 소개

3. Q-net 자격의 모든것

Q-net 자격의 모든것

4. 행복한 만남 [건시스템] (gunsys.com)

행복한 만남 [건시스템]

 

---

 

먼저 가로 1000, 세로 500, 해상도 72로 New Layer를 만든다.

- 확대 : Ctrl + +
* 돋보기 + 눌러져 있는 상태에서 alt 키 누르면 -로 바뀜
- 축소 : Ctrl + -
- 손툴 : Spacebar
- 돋보기 tool 더블클릭 : 100%
- 손툴 tool 더블클릭 : Fit Screen

색 설정하는 방법은 지난번에 배운 것 그대로라 내용은 생략하겠다.
수치를 조절하면서 색이 어떻게 바뀌는지 설명해주셨다.

동그라미 선택 툴로 선택한 뒤 전경색으로 채우기 위해 Alt + Delete 를 눌러 완성했다.

- 전경색 채우기 : Alt + Delete
- 배경색 채우기 : Ctrl + Delete

왼쪽은 anti-alias를 해제하고, 오른쪽은 anti-alias를 선택한다.
확대해보면 오른쪽은 테두리가 뭉개진다.

사각형 tool은 테두리가 뭉개지고 그런 것이 없다.

<포토샵 단축키>
- 선택툴 사용시
Alt : 중심
Shift : 정비례

- 선택툴 사용한 후
Shift : 선택 영역 추가
Alt : 선택 영역 빼기
Alt + Shift : 선택 영역 겹친 부분

Feather 값을 20 px로 설정해준 뒤 사각형 툴로 선택을 하면 테두리가 둥그런 사각형 모양으로
선택이 된다.
그런 뒤 Alt + Delete 를 누르면 Feather는 부드럽게 선택되는 것이기 때문에 번진 느낌으로
색이 채워진다. Feather 값을 올릴수록 선택이 덜 된다고 생각하면 된다.

 

이번에는 Feather 값을 100 px으로 설정한 뒤 전경색으로 채워보았다.

 

-선택 영역 반전 : Ctrl + Shift + I

Feather 20 px로 준 이후 사각형 tool로 선택한 뒤 Select - Inverse를 눌러 선택 영역을
반전시켰다. 그러고 나서 Alt + Delete를 눌러 전경색으로 채웠다.

예제 완성

<Feather 예제>

 

 

우선 동그라미 툴로 선택할 부분을 설정한 뒤 Select - Inverse을 누르고 Ctrl + Delete를 눌러
배경색으로 채웠다. 너무 번진 느낌이라 Feather 값을 10으로 줄여 다시 설정했다.

 

 

예제 완성

Feather 값이 클수록 선택이 안되고 유실되는 것이 많아진다.
그래서 이때는 Feather 값을 10만 줘도 충분한 것 같다.

---

 

Feather 값을 5로 설정해서 사각형 툴로 선택한 뒤 Select - Inverse를 눌러 전경색으로 채운다.

 

 

예제 완성

<레이어 복제하기 예제>

1번 사진

 

2번 사진

 

2번 사진에서 동그라미 tool을 이용해 선택하여 1번 사진으로 드래그한다.

그러면 1번 사진에서 Layer 1이 생성된다.
Layer 1의 이름을 ball로 바꿔준다.

 

 

레이어를 복사하려면 'Ctrl + J' 도 있고 'Alt + 드래그' 도 있다.
둘 중 하나의 방법을 이용해서 레이어를 복사한다.
개인적으로 나중에 변경할 경우를 대비해서 레이어 자체를 복사하는 Ctrl + J를 하는 것이 더 낫다.

 

 

---

 

단추를 동그라미 툴을 이용해서 딴 다음 Ctrl + J로 레이어를 복제한다.

 

 

Image - Adjustment - Hue/Saturation 을 눌러서 오른쪽 단추의 색을 변경한다.

 

 

예제 완성

 

---

<레이어 크기 조절 / 이동하기 예제>

 

 

 

예제 완성

 

---

 

1번 사진

 

2번 사진

 

2번 사진을 1번 사진으로 드래그 해서 이동시킨다.
그런 뒤 Ctrl + T로 사진 크기를 컴퓨터 사이즈에 맞게 조절하면 완성된다.

 

예제 완성

 

---

 

역시나 위와 같은 방식으로 크기를 조절하고 회전시키며 예제를 실행한다.

 

 

예제 완성

만들 당시가 오후 3시 40분이어서 3시 40분으로 맞춰 예제를 완성했다.

 

---

 

 

창문을 선택 툴로 선택한 뒤 Alt 키를 누른 채로 드래그 해서 창문을 복사시킨다.

 

 

예제 완성

Ctrl + J를 눌러 레이어를 복사하기도 하고 Alt 키를 누른 채로 드래그하기도 해서 창문을
여러군데 복제했다.

 

---

<자석 툴 예제>

Magnetic Lasso tool 을 이용해서 노란색 꽃을 선택해준다.
실수로 잘못 눌렀다면 Space bar를 누르면 이전으로 다시 돌아간다.

 

 

선택한 부분을 Ctrl + J를 눌러 레이어를 복제시킨다.

 

이번에는 Image - Adjustments - Hue/Saturation을 눌러 색을 조절한다.

 

 

Object selection tool을 이용하면 저런 색이 뜨면서 꽃 모양을 선택해준다.
Quick selection tool을 이용해서 선택할 수도 있다.

- 브러시 사이즈 작게 : [
- 브러시 사이즈 크게 : ]

 

---

 

 

Object selection tool로 따다가 선택이 안된 부분은 Quick selection tool을 이용해서 나머지를 선택했다.
그 다음 Select - Inverse를 눌러 선택한 부분의 반대쪽을 선택하는 예제를 실행했다.

---

 

 

Object Selection Tool을 이용하기도 하고 선택이 안된 부분은 Quick Selection Tool을 눌러
브러시 크기를 줄여 섬세하게 선택하였다.

 

 

위의 방법과 같이 Image - Adjustments - Hue/Saturation을 눌러 색을 조절하였다.
채도를 높이는 것이 더 예뻐서 채도를 올려보았다.

예제 완성

 

---

 

1번 사진

 

2번 사진

 

위의 예제와 마찬가지로 Object selection tool로 선택해준 뒤 나머지는 Quick selection tool로
딸 수 있다. 그런 뒤 2번 사진으로 선택 툴로 이동시켜준다.

 

 

예제 완성

 

누끼를 딸 때 다른 방법은 Select - Select and Mask 에서 브러시로 더하고 빼며 섬세하게 딸 수 있다.

 

 

---

<Puppet Warp 예제>

 

Edit - Puppet Warp 를 눌러 사람 관절을 움직이듯이 변형시킬 수 있다.
변형하고 싶은 곳에 마우스로 점을 찍으면서 점을 가지고 회전시키면 된다.

예제 완성

<포토샵 핵심 단축키 정리하기>
-레이어 복사 : 'Ctrl + J' or 'Alt + 드래그'
-선택 영역 반전 : Ctrl + Shift + I

- 선택툴 사용시
Alt : 중심
Shift : 정비례

- 선택툴 사용한 후
Shift : 선택 영역 추가
Alt : 선택 영역 빼기
Alt + Shift : 선택 영역 겹친 부분

- 확대 : Ctrl + +
* 돋보기 + 눌러져 있는 상태에서 alt 키 누르면 -로 바뀜
- 축소 : Ctrl + -
- 손툴 : Spacebar
- 돋보기 tool 더블클릭 : 100%
- 손툴 tool 더블클릭 : Fit Screen
- 브러시 사이즈 작게 : [
- 브러시 사이즈 크게 : ]

 

 

 

 

 

 

 

 

*이미지 출처
Instagram : @page_737

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