03_Detail_App_Icon

Detail_App_Icon

1
단위값 px로 바꾸기
아트보드 1000x1000 설정 후, 사진 아트보드 크기에 맞추기
사진 layer option > template 체크 (덧대고 만들기 위해)
모양을 만든 후, 하나 더 복제해주기 (질감용)

2 <스피커 본체모형>
place(ctrl+shift+p) 이용하여 나무질감사진 가져오기
embed 눌러서 링크 풀기
크기 대략 맞춘 후, 복제한 도형에 클리핑마스크 적용

3 <나무판자의 금속테두리 >
sclae corner 체크하여 크기조절 문제없게 하기
두개 복제하여 어두운 경계선, 밝은 경계선에 놓아주기
gray scale 외각부터 순서대로 90 > 5 > 50
개체 3개 모두 잡고 블랜드 연결하기
블랜드 옵션 - specified steps 30

4
나무질감개체를 음영개체보다 아래로 내리기
음영개체의 블랜딩모드 soft light
두 개 잡고 그룹화한 후, 숨겨주기

5 < 나무판자의 쇠테두리 부분 만들기 >
사각형툴로 대략만들고radius값주기
object >path>offset path (offset : -2.3) x 2번 반복
그라데이션 색상값 넣어주기

6
내부의 숫자 한 번에 영역 잡아서 쓰기
글자의 좌우 너비 줄여주기
띄어쓰기로 알맞은 위치 조정해주기
안 맞는 부분은 alt 누르며 지우기 누르면서 위치 조정
create outline
색상 추출하여 넣어주기

7 < 화살표 >
사각형툴로 길게 만들기
그라디언트 넣어주기
위 > 아래 (어두운 레드 > 밝은 레드)
도형 복사해서 그림자 만들기
면에 검정색 넣고 opacity 값50
두 개 그룹화하기
현재까지의 모든 개체 모두 숨겨주기

8 < 나무판자의 광택 >
만들어놓은 나무판자 보이게 한 후, 복제해주기
복제한 개체와 라인툴로 적절하게 빛 받을 부분 그려주기
두 개의 개체를 잡고 divide
아랫부분은 지워주기
윗부분 흰색 넣고 opacity 20
사이즈 알맞게 조정하기

9
모두 보이게 한 후, 나무판자 부분만 그룹화하기
개체에게 effect > stylize > drop shadow >
normal, opatity-60, x-0, y-4, blur-2.5
위와 같이 그림자 넣은 후, 개체 잠그기

--- 나무판자 완료 ---

10 < 양쪽의 휠  >
원형 툴로 대략 잡아준 뒤 복제한 후, 복제된 개체를 좀 더 안쪽에 더 작게 배치해주기
바깥 원형개체에 그라디언트 linear넣어주기
swatch패널 꺼낸 후, 라이브러리 > gradients > neutrals > 4번째 (위-흰색 > 아래-검정색)
바깥 원형개체 잠그기

안쪽 원형개체에그라디언트 radial 넣어주기
개체에게 object > expand - gradient mesh 체크하기
오른쪽 마우스 > ungroup > release clipping mask
클리핑마스크를 해제한 후, 뒤에 있는 원래 모양의 개체는 방해될 수 있기에 숨겨놓기
아웃라인 화면 전환 후, 매쉬툴로 색이 변경되는 지점을 찍어주기
찍어준 지점에 해당색 넣어주기 > 완료
숨겨놓았던 클리핑마스크 개체를 다시 꺼내고 두 개 개체를 잡고 다시 클리핑마스크 씌워주기(ctrl+7)
휠 모두 잡고 그룹화하기
휠 그림자 opacity-50, x-0, y-12, blur-6 

11 < 스피커 >
중앙 밝은 부분 사각형툴로 대략 그려주기
그라디언트 linear (좌 > 우 방향)
그라디언트 좌 2개, 우 2개 추가하기 (총 6개의 구간)
굴곡에 따라 다른 해당 색상 넣어주기
그라이언트 툴로 위치 알맞게 조정하기
< 빛 받는 위 부분, 어두운 아랫 부분 >
위 작업을 하나 복제한 후, 높이 얇게 조절
recolor artwork > edit > 링크걸기 > 전체적으로 명도 변경

12 < 스피커 내부의 구멍 >
원형도형을 하나 만든 뒤, 수직으로 아래로 조금 내려 복제해주기
shape builder tool을 이용하여 구멍 만들어주기
처음지점에 1개, 복제하여 마지막지점에 1개 배치하기
두 개 잡고서 블랜드시키기
블랜드 specified distance - 21px

복제하여 아래 배치하기 > 하나가 부족함 (격리상태 이용)
맨 오른쪽 구멍을 더블클릭하여 shift누르며 오른쪽에 구멍 복제하기 > 두 줄 완료
만들어둔 두 줄을 복제해 아래에 배치하기
expand로 확장하기 (또 blend 사용해야 하기 때문)
위 두 줄, 아래 두 줄씩 그룹화하기
두 그룹을 선택한 후, 블랜드화하기 (option : step 10으로 변경)

13
모두 보이게 한 후, 구멍만 잡고 블랜딩모드 multiply

-- 끝 --

---

○ 스큐어모피즘 
  : 사물의 형태나 상황을 그대로 재현하는 방식이며 ui 디자인에 주로 사용되는 것을 크게 볼 수 있다. 
    즉, 실생활에서 쓰이는 도구의 모양 질감등을 그대로 표현하는 방식을 말한다. 

* 장점 
- 사실적이기 때문에 이질감이 적은 디자인이다
- 시각적으로 어필할 수 있는 부분이 많다. 
- 사물을 있는 그대로 표현하기 때문에 직관적인 이해가 가능한 디자인이다. 
- 중장년층을 타겟으로 하기에 좋은 디자인이다. 
- 아날로그한 감성을 보여주며 사용자들의 감성을 자극할 때 사용하기도 한다. 

* 단점 
- 창의적인 부분 결여되어 보일 때가 많다. 
- 과다한 정보로 다소 화면이 답답해보일 때가 있다. 


○ 미니멀리즘 
  : 최소한의 요소만을 사용하여 대상의 본질을 표현하는 예술문화에서 발현되었다. 
    부수적인 디테일은 빼고 물체의 가장 중요한 상징만을 단순화시켜 표현하는 디자인 방식이다. 

* 장점
- 디자인의 형태와 색감에 크게 집중할 수 있도록 만들 수 있다. 
- 간결하기 때문에 세련되어 보임 
- 창의적인 면이 돋보인다. 
- 적정한 여백을 두어 여유롭고 안정적여 보인다. 
- 본질에 집중시키는 디자인을 표현하기에 적합한 상태를 가지고 있다. 

* 단점
- 직관적인 이해가 힘들다 
- 중장년층 타겟으로 하기에 힘들다. 

* 픽사베이(pixabay)

  : 저작권 무료 이미지 다운로드 사이트
  ㄴ 그 어떠한 이미지 다운로드 사이트보다도 저작권에서 가장 안전함 

* place

  : 작업탭에 선택한 파일을 곧바로 띄울 수 있는 기능

  ㄴ ctrl + shift +P
  ※ 플레이스한 이미지는 embed 하여 링크 풀어줘야 한다. (이미지 유실 방지)


* 클리핑마스크 (clipping mask)
  : 가장 상단에 두어진 프레임 도형과 교차한 면적만이 표현으로 드러나는 기능이다. 
  - 적용 : ctrl + 7
  - 해제 : ctrl + alt + 7
  ※ 조건 : 프레임으로 사용할 물체는 가장 상단에 있어야 한다. 

○ 그룹 격리모드 
  : 그룹, 클리핑마스크, 블렌드로 묶여있는 물체를 격리시켜 개별적으로 수정할 수 있는 상태 

○ 컴파운드패스(compound path)
  : 두 개 이상의 도형을 순서상태 없이 하나로 묶어줄 수 있는 기능이다. 
  : 글자를 2차적인 변형하여 클리핑마스크의 프레임으로 활용할 때 가장 사용 많이 하는 방식이다. 
   ㄴ ctrl + 8

* 환경설정 > 스케일코너즈(scale coners)
  - 체크 시 
  : 사이즈 조절에도 불구하고 코너비율 모습 그대로 유지한다.
  - 체크 해제 시
  : 조절되는 사이즈에 맞춰 코너값이 유동적으로 변화를 가진다.

* 블렌드 (blend)
  : 두 개 이상의 오브젝트를 연결지어 중간단계 개수에 따라 색상 연결 연출도 오브젝트 간격 분배 연출도 할 수 있다 
  - 블렌드 연결 : ctrl + alt + B
  - 블랜드 연결 해제 : ctrl + alt + shift + B

※ 블렌딩모드 항목
  - 소프트라이트 (soft light)
  : 50% 명도는 표현에서 제외하되 이보다 밝거나 어두운 것들을 자연스럽게 강조 
  색상, 질감을 자연스럽게 합성할 때 
  - 오버레이 (overlay)
  : 소프트라이트보다 선명한 효과
  - 멀티플라이 (multiply)
  : 어두운 색상은 표현에서 점점 강조하되 밝은 색상은 점점 표현에서 제외시킴
  색상, 질감을 어둡게 강조하여 합성할 때 주되게 사용함

* offset path
  : 가로세로폭이 다른 물체를 지정한 수치 아래 모두 같은 여백두어 줄이거나 늘려줄 수 있는 기능이다. 
  : 특정 물체 테두리 만들 때 가장 크게 활용함 
  ex) 텍스트, 로고, 캐릭터
  ㄴ 상단메뉴 - 오브젝트 - 패스 

※ 일반 아이드로퍼툴로 그라디언트 스탑에 색상 추출하기 (eyedropper tool)
  1) 물체 선택 
  2) 알맞은 그라디언트 스탑 선택 
  3) 아이드로퍼(i)툴 선택 
  4) 쉬프트+색상 추출 

* 행동 반복 단축키
  ㄴ ctrl + D

---

* 캐릭터 패널
  ㄴ ctrl + T

* 장평 
  : 글자의 가로 세로폭을 조정할 수 있는 기능이다. 

 

* 가로폭이 넓은 글자 
  ㄴ> 안정적인, 장엄한,  고전적인 
*세로폭이 높은 글자 
  ㄴ> 세심한, 세련된

* creat outlines

  : 선택된 오브젝트들 중에서 오직 텍스트만을 일반적인 개체와 같이 확장시켜주는 기능이다.

  : 글꼴 유실 방지, 글자에 대한 2차적인 변형 작업 실행 시 사용

  ㄴ ctrl + shift + O

* 패스파인더 (pathfinder)

  : 선택 된 두 개 이상의 도형을 합치거나 나누어줄 수 있는 작업 기능 

  ㄴ ctrl + shift + F9

* divide
  : 오브젝트가 닿은 구간마다 나누어줄 수 있는 기능이다.
  : 기능 실행 후 오브젝트는 그룹으로 묶이기 때문에 별도로 격리하여 작업 관리해야 한다.

* 드롭 쉐도우 (drop shadow)

  : 선택 물체와 동일한 형태가진 상태로 설정값 만큼의 그림자를 제작할 수 있는 기능이다. 

  ㄴ 상단메뉴 - effect - stylize

※ 복수의 개체를 한 장과 같이 인식 시켜 설정값 처리할 때에는 그룹으로 묶어준 뒤 값처리 함 



* 스와치 패널(swatches)

  : 작업자가 자주 사용하는 속성을 등록하여 언제든 꺼내 사용하거나 일러스트가 제공하는 속성을 가지고와 작업에

   활용할 수도 있다. (색상, 그라디언트, 패턴)

   ㄴ 상단메뉴 - window

* 그라디언트 메쉬(gradient mash)

  : 선택된 도형에게 그라디언트와 메쉬를 작업 병행 가능한 상태 만들어주는 기능이다.
  : 지정된 그라디언트 타입의 방향에 따라 메쉬 선을 추가하는 데 사용할 수 있다

  ㄴ 상단메뉴 - object - expand

* 조건 및 순서
  1) 오브젝트에게 알맞은 타입의 그라디언트 지정하기 
  - 리니어 : 수직, 수평 메쉬 
  - 라디얼 : 사선 메쉬 
  2) 작업 중 불필요한 스트로크 제거 
  3) 특수한 그라디언트 오브젝트에게 메쉬를 추가하기 위하여 익스팬드 적용

      >expand 옵션 > gradient mesh지정 후 적용
  4) 확장 후 걸려있는 그룹과 클리핑마스크 해제
  5) 분리되어 나온 클리핑마스크의 프레임은 원활한 작업 위하여 숨겨둔다. 
  6) 메쉬 작업
  7) 숨겨두었던 클리핑마스크의 프레임 도형을 다시 드러내야 함 
  8) 다시 드러낸 클리핑마스크의 프레임 도형과
     작업했던 메쉬 도형을 모두 잡아 클리핑마스크 적용 

 

* 클리핑마스크 
  ㄴ ctrl + 7

* 그라디언트 패널
  ctrl + F9

* 이전 사용 이펙트창  띄우기 
  ㄴ ctrl + shift + alt + E

* 그라디언트 툴 (G)
  : 그라디언트가 적용된 오브젝트 위에서 마우스를 클릭 드래그하여 그라디언트 방향 설정하거나,

  분포도에 대한 조정할 수 있다
  ㄴ> 스탑을 더블클릭하여 색상 변경 하거나 슬라이더 바깥으로 밀어 삭제할 수 있다. 

* 쉐입 빌더 툴 (shape builder tool)
  : 마우스 클릭 또는 드래그만으로 물체를 나누어주거나 합쳐줄 수 있는 기능이다. 
  : 패스파인더가 도구화 된 기능이다. 
  ㄴ shift + M
  - 클릭 : 나누기
  - 클릭 드래그 : 합치기 
  - 알트+클릭 : 면적 제거 

* 블렌드 연결

  : 선택된 두 개 이상의 오브젝트가 연결되는 기능이다.

  ㄴ ctrl + alt + B

 

※ 블렌드 작업 특징 
  1) 블렌드에 의해 연결된 중간도형들은 실제 물체가 아니다. 
  ㄴ> 중간도형을 실제 물체와 같이 활용하기 위해서는 expand 까지 해야 함 
  2) 블렌드 연결은 오브젝트가 만들어진 순서대로 연결 됨 
  ㄴ> 블렌드 툴로 순서 지정할 수 있음 
  3) 복수의 개체가 한 장처럼 블렌드 연결되었으면 할 때에는 그룹으로 묶어두면 됨