■■▶ILLUSTRATOR ①◀ 2021. 1. 8. 05:25

[Illustrator - UI디자인 아이콘 제작]

- 직관적인 아이콘 아이디어 시각화 디자인구성요소 제작하기 -


 

프로토타입 웹페이지 제작에 필요한 기초데이터 수집 아이콘 편집과 창의적인 아이디어 구상 전개로 스케치 작업을 통해서 함축적이고, 직관적인 완성도 있는 아이콘을 제작해보기...

 

+++++++

 

 개별실습과제: 이수자(내부)평가 실기 대체

- UI디자인 디지털디자인 구성요소 제작 -



출처: https://edyoon.tistory.com/1042?category=671868 [▷ 윤샘 컴교실 (^(oo)^) YoonSemComClassroom ◁]

 

+++++++

 

 

 

-이수자(내부) 평가 실기 대체: 아이콘 제작-

Canvas Size(px)

상세페이지 권장 규격

- w960 x 2500h -



출처: https://edyoon.tistory.com/1042?category=671868 [▷ 윤샘 컴교실 (^(oo)^) YoonSemComClassroom ◁]

Canvas Size(px)

상세페이지 권장 규격

- w960 x 2500h -



출처: https://edyoon.tistory.com/1042?category=671868 [▷ 윤샘 컴교실 (^(oo)^) YoonSemComClassroom ◁]

Canvas Size(px)

상세페이지 권장 규격

- w960 x 2500h -



출처: https://edyoon.tistory.com/1042?category=671868 [▷ 윤샘 컴교실 (^(oo)^) YoonSemComClassroom ◁]

Canvas Size(px)

상세페이지 권장 규격

- w960 x 2500h -



출처: https://edyoon.tistory.com/1042?category=671868 [▷ 윤샘 컴교실 (^(oo)^) YoonSemComClassroom ◁]

Artboard_Canvas Size(px)

최종 산출 결과물(PNG 이미지) 권장규격

 

- width500 x 600height -

 

add_img_91x.zip
3.57MB

 

 

 

 

+++ 아이콘 제작 (40개 이상) 세부 작업내용 +++

 

1. 본인이 직접 제작한 아이콘 최소 10 이상 (얼굴 표정 5개 포함)

2. 포토샵 제공 아이콘이나 일러스트 심벌 10개 내외 삽입하기

3. 기타 웹에서 찾은 무료 아이콘 응용 편집 (SNS 아이콘 포함)

 

 

 

 

+++++++


 

 

 

 

 

 

 

디자인 구성요소 프로토타입 아이콘 제작

가벼운 오프닝... 작업!!

(펜툴을 사용하지 않고, 도형 툴 사용!! 오브젝트 조합으로 제작해 보기)

UI디자인 - 직관적인 아이콘 제작해 보기  [윤샘컴교실]  www.dbdb.pe.kr

 

 

++ 아이디어 시각화 아이콘 제작해 보기 ++

세탁기?  침대?

 

 

얼굴 표정 일러스트 아이콘 드로잉 [윤샘컴교실] http://www.dbdb.pe.kr

 

 

 

face_icon - sample

 

 

 

face_icon - sample daum

 

 

face_icon - sample daum

 

 

 

 

아이디어 시각화 기초데이터 수집... 사진 찍기!!

 

 

Align Panel(+Pathfindr): Shift + F7

 

 

 

 

[개별 실습과제!! 일러스트 드로잉 포트폴리오 컬렉션]

 

 

 

[개별 실습과제!! 포트폴리오 아이콘 제작해 보기]

 

아트보드(캔버스) 크기: Width 500 * Height 600(700)

 

 

 

 

[ icon drawing template ]

template_icon.ai
0.62MB
template_icon.ai
0.75MB
rawData_icon_YoonSemCom_94x.zip
0.74MB
v211118_icon.ai
0.54MB

w500 x 600h

 

 

문제해결능력 키우기!! 창의적으로 날씨와 얼굴 표정, SNS 포함한

포트폴리오로 사용 가능한 아이콘 제작해 보기

 

 

 

 

 

 

 

 

 

 

 

 

 

??? 완성도 보통 및 미흡 아이콘 제작 결과물 샘플 ???

 

 

 

 

 

 

 

 

 

+++ 그리드 가이드선 레이아웃 작업 +++

 


 

 

 

 

 

 

 

 

 

 


 

 

icon_01.ai
다운로드

 

 

 

 

 

 

icon_03.ai
다운로드

 

 

 

 

ikons.ai
다운로드
IKONS.zip
다운로드
Metrize_Icons.ai
다운로드
Metrize_Icons.pdf
다운로드
Metrize_Icons.zip
다운로드

 

 

 

 

Free-Icons-Outline.ai
다운로드
Streamline- Illustrations-Free.ai
다운로드

 

 

icon_site(netian_empas)_94x.zip
2.70MB

 

 

 

 

??? 완성도 잘함 또는 매우잘함 아이콘 제작 결과물 샘플 ??? 

 

 

 

 

 

 

 

 

 

v200515_uiDesign_icon_YoonSemCom_91xxxx.zip
다운로드

 

 

 

 

 

 

 

 

 

 

+ + + 아이콘 산출 결과물 컬렉션 + + +

 

 

 

 

이_지

 

김_미

 

 

김_솔

 

 

 

김_혜 1

 

 

김_혜 2

 

 

최_현 1 

 

 

최_현 2

 

 

 

이_아

 

 

장_은

 

 

 

+ + + + + + +

 

 

[Illustrator  수업자료  다운로드!!]

 

압축해제 암호: 91????

 

 

 

 

01.

illustrator_step_01_91xxxx.zip
다운로드

 (오브젝트 다루기, 드로잉 작업 기본)

 

 

02.

illustrator_step_02_91xxxx.zip
다운로드

 (오브젝트 다루기, 드로잉 작업 응용)

 

 

 

 


03.

illustrator_step_03_91xxxx.zip
다운로드

 (아이디어 시각화, 펜툴다루기 응용)

1. 산봉우리 드로잉: Pen Tool & Smooth Tool 활용 작업

 

2. 알파벳 B 문자를 오브젝트(패스)로 변환하여 응용 작업

- 대문자 B(HY견고딕) / 글자크기 300px- Type / Create Outlines (Ctrl + Shift + O)- Direct Selection Tool & Smooth Tool 활용

 

3. 문자를 오브젝트(패스)로 변환 후...- 그룹 해제하고, 그라디언트 적용 가능- 개별 글자를 오브젝트 변형 가능 - Direct Selection Tool

Create Outlines

입력한 글자를 패스(Path) 오브젝트로 변환하여 이미지 처럼 변형할 수 있고, 버전에 상관 없고 다른 컴퓨터에서 공동 작업할때 글꼴 유실이 없는 장점이 있다. (문자 속성, 텍스트 성질은 없어짐)
일러스트 작업의 마무리는 모든 문자를 오브젝트로 변환해서 저장하는 것이 권장이다. 

인쇄소에서 출력할 때 글꼴 호환성 문제 위험요소를 사전에 예방할 수 있다.

Ctrl + A   &   Ctrl + Shift + O

 

 

 

 

 

+++ 타이포그래피 - 문자디자인 추가 실습 +++

https://edyoon.tistory.com/1010

 

 

 

 

+++++++

 

 

 

 

Window / Pathfinder

Pathfinder == Ctrl + Shift + F9

 

패스파인더의 디바이드 기능은 분할된 오브젝트들을 자동 그룹화 한다.

오브젝트 더블 클릭 / 격리 모드나 그룹해제를 하고 추가 작업을 진행한다.

 

 

 

+++++++

 

 

 

- 디자인 구성요소 프로토타입 제작 샘플 -

 

 아이디어 시각화 연습 - 카메라 캐릭터1

 

 

 

 

 

아이디어 시각화 연습 - 카메라 캐릭터2

 

아이디어 시각화 결과물 - 카메라 캐릭터 샘플 더보기

https://edyoon.tistory.com/1056


 

 

 

 

 

 

 

기초데이터(rawData) 수집

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

penTool_ex.ai
다운로드

 

 

 

+++ 기존의 아트보드 크기 바꾸기: shift + O +++

상단 옵션바에 W & H 값 입력, 또는 마우스로 바운딩 박스 드래그

 

 

 

 

+++++++

 

 

[개별실습과제 곰돌이 캐릭터 아이디어 시각화 해보기]

 

 

 

 

 

 

 

+ 일러스트 결과물 / 포트폴리오 컬렉션 +

 


 

 


04. 기초데이터 수집&디자인구성요소 제작 - 약도

rawData_map_YoonSemCom_91x.zip
9.69MB
윤샘컴교실_약도제작_템플릿_브러시(라이브러리).ai
다운로드

 (종합 응용실습 과제)

가상의(본인이 자주가는) 매장이나 맛집/카페 등... 약도 제작하기

- 아트보드(명함) 크기: w90 x 50h (단위 mm) -

완성도 높게 제작해서 제출하기: 본인이름_약도.png(gif)

 

 

+++ 일러스트 브러시 라이브러리 활용 +++

Window / Brush Libraries / Artistic / Artistic_Paintbrush

F5 - Brushes Panel

 

 

 

 

 

 

 

[프로토타입 제작 기초데이터 수집 - 명함 약도 샘플]

 

 

 

 

++ 강변북로 일산 가는길 중간에... 자유로 행주산성 맛집들 ++

 

 

 

 

 

 

+++++++

 

 

 

-이수자(내부) 평가 실기 대체: 약도 기획제작-

Canvas Size(px)

상세페이지 권장 규격

w960 x 2500h -



출처: https://edyoon.tistory.com/1042?category=671868 [▷ 윤샘 컴교실 (^(oo)^) YoonSemComClassroom ◁]

Canvas Size(px)

상세페이지 권장 규격

w960 x 2500h -



출처: https://edyoon.tistory.com/1042?category=671868 [▷ 윤샘 컴교실 (^(oo)^) YoonSemComClassroom ◁]

Canvas Size(px)

상세페이지 권장 규격

w960 x 2500h -



출처: https://edyoon.tistory.com/1042?category=671868 [▷ 윤샘 컴교실 (^(oo)^) YoonSemComClassroom ◁]

Canvas Size(px)

상세페이지 권장 규격

w960 x 2500h -



출처: https://edyoon.tistory.com/1042?category=671868 [▷ 윤샘 컴교실 (^(oo)^) YoonSemComClassroom ◁]

Artboard_Canvas Size(px)

최종 산출 결과물(PNG 이미지) 권장규격

 

- w500 x 600h -

 

 

본인이 자주가는 카페나 맛집, 편의점 잘 아는 장소 관련해

기초데이터 수집을 하고, 아이디어 시각화 기획 약도 제작해 보기

 

 

 

 

 

...찾아오시는 길(약도) 기획 제작 추가 참고자료...

https://edyoon.tistory.com/1002?category=671869

 

 

 

 

 

 

 

+ + + 약도 산출 결과물 컬렉션 + + +

 

 

+++ 이젠 당산(영등포) 캠퍼스 약도 제작 +++

프로토타입제작 기초데이터 수집 자료

 

 

 

ezen_map1_YoonSemCom.ai
다운로드
ezen_map2_YoonSemCom.ai
다운로드

 

 

     

 

 

 


 

+ + + + + + +

 

개인용(비상업용) 무료 PNG 투명 이미지 제공 사이트

 

 

 

 

 

 

 

 

 

 

 

 

+ + + + + + +

 

[ ...icon sns... ]

 

 

 


 

 

+++++++

 

 

 ++ 결시자(-10점) 재평가 실기 템플릿 ++

- 필기 평가는 문제 변경해 결시자 재평가 실시 -



 

- 빈 영역에 아이콘 10개 이상 추가해 보기 -

기초데이터 수집 벤치마킹 샘플자료 - UI/UX 아이콘 메뉴

 

 

 

 

+++++++

 

[ txt_icon / css_coding ]

txt_icon_best_font_awesome)_offLine_91x_end.zip
19.76MB

 

 

+++++++

 

 

[ 자동차 내부 UI/UX - 사용자 (메뉴)버튼 ]

자동차 내부 UI/UX - 비상등 (메뉴) 버튼...?

 

 

 

윤샘 edyoon.tistory.com 컴교실

 

 

 

posted by [Selha YoonSem]
: