[복습] 포토샵 #36~42 (feat. 롤스토리디자인 강좌)

36. 눈에 잘 띄는 심플한 배너 만들기 

배너/포스터는
눈에 잘 띄게 만드는 게 중요!!!



배너 만드는 팁!!

1. 가급적이면 단일 색상의 배경을 쓰기
배경에 시선이 많이 가면 주의가 분선됨

단일색상을 써라


2. 글자의 크고 작음을 확실히 해라


3. 구도를 생각해라!
여백의 미 등
구도를 미리 잡아야함



배너 크기를 미리 알지 못하면
해당 사이트에 가서 위치한 배너를 다른 이름으로 저장하거나
샘플받은 이미지를 그대로 포토샵에 가져오기


배너를 가지고 왔으면 rectangular tool -> 그 크기만큼 전체 ctrl+T 맞추기 
fill 검정색
스트로크 없음


누끼딴 이미지 가져오기
가운데로 캐릭터 이미지가 오도록 구도 잡음

1px라인 만들기
 rectangular tool 꾹 누르면 Line Tool 나옴 여기서 shift 누른채로 적당히 직선만듦
안쪽이 비어져있고 경계선만 그려져 있다면

해당 레이어 선택되어있는지 확인하고
라인 툴 선택된 채로
fill 색상 채우고 스트로크는 색상없음으로 하기

라인의 두께는 옆에옆에 H:1px로 바꾸기

라인복사
라인은 캐릭터 레이어 밑으로 보내서 
라인이 캐릭터 뒤로 가게 만들기
그러면 입체감이 더 느껴짐

준비한 서체 입력 (나눔스퀘어)
자간 900정도
폰트크기 15point

메인 타이틀 입력 (배달의 민족 도현서체)
자간 0 
가운데 위치

글자가 기우는 것도 ctrl+T로 가능
ctrl+t(활성화) -> ctrl누른채로 글자 모서리를 잡으면 기울게 만들 수 있다.



캐릭터에 스트로크 
outside로 해야 캐릭터가 안 잘림
사이즈는 5point 정도


그림자 효과
드롭 섀도우가 아닌
레이어를 하나 더 복사하고 검정색으로 색을 채운 경우


캐릭터 레이어 복사하고
원본 캐릭터는 눈 꺼두기

clear layer style -> 효과삭제
rasterize layer -> 이미지화
ctrl+섬네일 클릭 -> 레이어 선택영역 잡기
전경색 검정색 배경색 흰색 확인

단축키 alt+delete 
그림자 레이어는 해당레이어 밑으로 하고 옆으로 살짝 옮기고 투명도(53%)를 약간 낮추면
예쁘게 그림자가 들어감

 

37. 초스피드 PNG 파일로 저장하기
레이어 순서 바꾸는 단축키

(원하는 레이어 선택 후) ctrl + ] or [ = 한 칸 위 or 아래,
ctrl + shift ] or [ = 최상단 or 최하단으로 이동

격자무늬의 바탕 = 색상이 존재하지 않는 알파 영역

image-trim  기능 -> 좌우, 위아래 여백을 이미지에 딱 맞게 잘라냄


레이어 한 번에 잡기 = (move 툴 상태에서) ctrl + 오브젝트 클릭
글자 위에서 오른쪽 마우스 > Quick Export as PNG (trim된 상태로 저장됨)


여러 레이어의 경우에는 레이어 선택해서 그룹화시킨후 

Quick Export as PNG 로 보내면 됨



38. ‘포토샵 CC 2019’버전의 새로운 주요 기능 7가지
Photoshop CC 2019 New Features

0:22 프레임 툴 (The Frame Tool)
 과거엔 클리핑 마스크를 통해 이미지를 넣을 수 있었는데
프레임 툴로 그리고 이미지로 드래그 앤 드롭만 하면 
틀안에 이미지를 쉽게 넣을 수 있음

1:13 Ctrl + Z 여러 단계 실행 취소 (The Modern Undo)
 계속 뒤로 갈 수 있음

1:52 블렌드 모드 프리뷰 (Blend Mode Preview)
 shift + - 로 빨리 적용 했었는데
블렌드 모드 펼쳐놓고 마우스로만 이동해도 미리 볼 수 있음

2:26 컬러 휠 (Color Wheel)
 보색관계 채도, 밝기 등 직관적으로 확인 가능

2:52 자동 비율 프리트랜스폼 (Proportional Transform)
 예전 버전은 shift 누르고 비율에 맞게 수정

 아무 것도 누르지 않아도 비율에 맞게끔 수정가능
 shift 누르면 비율을 무시

3:38 더블 클릭 텍스트 (Double Click to Edit TEXT)
 무브 툴 상태에서도 더블 클릭해서 텍스트 수정 모드로 바로 갈 수 있음

4:15 새로운 컨텐츠 어웨어 필 (Brand New Content-Aware Fill)
 불필요한 이미지 지우는 기능
 선택영역 잡은 후 edit > content-aware fill > 프리뷰로 녹색 영역 지움으로써
디테일하게 이미지 지우기 가능해짐


39. 유튜브 자막 박스 디자인

new Document 에서
film&video preset을 선택
영상과 똑같은 크기 해상도가 같은 걸 캔버스로 선택

회색 전경색 채우기

#####자막 박스 만들기 시작######

아무 글자 입력해서 자막크기 가늠
Rounded Rectangle Tool 
fill-흰색
스트로크 없이
radius = 100px

####가이드라인 보기####
룰러(ctrl+R)를 통하여 만들어 둔 가이드 라인은
ctrl+; 키를 통하여 가이드 라인을 켜고 끌 수 있음

가이드라인에 맞춰서 자막박스 만들기
중앙에 조정하고 
글자 레이어 밑에 두기

그리고 ctrl+j로 하나더 복사
이거는 크기를 줄여서 이름이 들어갈 박스으로 만들 거임

화살표 모양 툴 > 꾹 누르면 Direct Selection Tool(직접 선택 툴) 뜸
끝 부분 드래그해서 포인트를 다 잡은 후 shift키 누른채 왼쪽으로 쭉 줄이기

썸네일 더블클릭해서 원하는 색상으로 변경


스트로크도 주기
흰색박스 레이어 선택 후 레이어스타일>스트로크 size 10px  색상은 이름박스와 같은 색상으로

이름박스 레이어에도 그대로 copy 해서 레이어 붙여넣기

###레이어 스타일 복사/붙여넣기 ###
레이어 스타일이 적용된 레이어의 '마우스 우클릭' - 'Copy Layer Style'
붙여 넣고 싶은 레이어 선택 후, '마우스 우클릭' - Paste Layer Style'



#####예쁜 그림자 만들기#####
글자 입력 후 이름박스에 넣기
글자에 포인트를 주기 위해 drop shadow주기

수치를 조절해서 또렷하게 만들기
투명도 55
거리는 5
스트레드는 10
사이즈 0
135도

글자는 흰색
그림자는 검정색

###위의 글자 박스 만들기###
일반 사각형 툴 만들고 위에
적당한 글자 입력해서 크기 가늠

해당 레이어 ctrl+J
사각형 툴 선택된 툴에서 fill-색상없음
스트로크 흰색
직선모양에서 dash 점선으로 바꾸기
점선 크기는 3px로 하기

그리고 크기를 줄여서 점선을 더 안쪽으로 오게 하기

다퍼주는 우디TV 끝에 넣어주는데
똑같으면 재미없으니깐
drop shadow 주기
blend mode normal 주황색(배경색과 같은 색)으로
투명도 100
각도 135
거리 7
스프레드 100
사이즈 5

입체감을 줄 수 있음

박스레이어만 다중선택해서 글자 끝까지 박스를 맞춰줌


보여지고 싶은 부분만 선택영역 잡고 
레이어 마스크

글자 안쪽 점선이 안보임

#####선택영역 잡고 레이어 마스크 씌우기#####
선택영역을 잡고 레이어 마스크를 씌우면,
선택영역이 잡힌 부분은 흰색!
나머지는 검정색!으로 마스크가 씌워짐

포인트 컬러 주기
다퍼주는 을 선택해서 노란색 적용
자막박스 디자인도 노란색 적용

 

 

 

40. 투명한 텍스트 효과
쉐이프툴 하나 누르고 네모난 도형 만들기
가운데 정렬

쉐이프 패널에 fill-아무 색상이나 스트로크-없음으로

글자 위에 입력
레이어 선택영역을 잡기 ****

ctrl+섬네일 클릭 ->선택영역 활성화됨(shift키 같이 누르면 다음 레이어 썸네일 클릭하면 다중선택됨)
글자레이어 누른채로 선택영역 지정
선택영역 눈끄면 더 잘보임

흰색 쉐이프***(지우려는 레이어로 꼭 선택해줘야함-글자 썸네일 누른채 글자레이어에 그대로 하면 안지워짐) 
누르고 delete -> 직접적으로 수정x 경고창 뜸
이미지화시키는 rasterize시켜야 함

마우스 오른쪽-rasterize 하고 delete키
ctrl+d 선택영역 해제

어떤 모양이든 선택영역 잡기만 하면 다 뚫을 수 있음

헷갈리니깐 흰색 쉐이프 레이어랑 바탕만 눈 키고 지운 도형은 눈꺼주기 




41. 직접 그린 스케치를 깔끔한 이미지로 만드는 방법
이미지 사이즈 보기 = ctrl + alt + I

스케치라서 뒷배경도 실제 종이와 같은 걸로 하면 잘 어울림

복사해서 붙여넣고 눈끄기
원본레이어 하나 더 복사

lasso Tool > 스케치 영역 주변으로 선택영역 대충 잡기
복사하고자 하는 레이어 제대로 선택되었는지 확인 후
ctrl+J

그러면 선택영역만 잘려서 레이어가 생성됨

그러면 배경레이어 눈을 켜고, 순서를 아래로 두기
기존 사이즈가 900px이니 그것보다 큰 사이즈 이미지로 배경 구하기
구글 - paper texture
도구 > 큰 사이즈

흰색 계열의 바탕이 있으면 블렌드 모드 추천
블렌드모드 중 하나쯤은 배경만 쏙 빠지는 모드가 있음

해당 스케치 레이어 선택 후 블렌드모드 확인

pin light 로 배경을 날림
색상은 변경이 돼서 복구 시켜야함


image > adjustment > curve (ctrl+m)
위쪽은 이미지의 밝은 영역, 아래쪽은 이미지의 어두운 영역
사진의 S자 곡선을 그리면, '콘트라스트'를 추가할 수 있었잖아요
커브를 적당히 아래로 내리기(색상 복구)

이제 그림들을 각각 분리
라소툴로 하트부분만 선택영역 잡기 > ctrl+j (feather값 0)
여자 얼굴만 따로 남자얼굴만 따로 
**이때 반드시, 기존 레이어를 선택하고 복사해야함

필요없는 레이어 눈끄기
분리시킨 레이어 위치 조정

캔버스에 보이는 레이어 바로 선택하기
무브 툴이 선택된 상태 및 오토 설렉션이 꺼져 있는 상태에선,
ctrl+마우스 좌클릭으로 레이어 바로 선택가능 


42. 재밌는 사진 합성, 대두 만들기 
사진 속 얼굴을 그대로 키워버리면 비트맵 기반 즉, 픽셀로 된 사진은
해상도가 깨져버림
그래서 원본 사진의 크기를 줄여버려야 함

원본 레이어 잠금 해제하기
원본레이어의 수정이 필요하다면, 잠금을 해제할 수 있음
원본 레이어 더블클릭 후 ok버튼 누르기

복사한 레이어 눈을 끄고 원본레이어 크기만 비율에 맞게 조정
cc2018 이전 버전은 shift키를 눌러야 비율에 맞게 조정됨

얼굴부분만 대략적으로 누끼 따기
펜 툴로 목 부분의 경계선만 디테일하게 따기
###펜 툴 라인 선택영역으로 바꾸기 = ctrl+엔터

그리고 복사한 레이어가 맞는지 확인 한 후  ctrl+j

복사레이어 눈을 끄고 위치 조정
crop툴로 이미지 만큼만 자르기

목경계선을 자연스럽게 하기 위해선 리퀴파이툴로 이미지 왜곡시키기


마스크 레이어 씌우기
전경색이 '검정색'인지 확인하기