나만의 단축키 사용법을 응용력 있게 숙달 시키면, 남들보다 효과적이고 빠른 작업을 할 수 있습니다.
(기본적인 오브젝트 단순 복사는 Alt + 마우스 드래그)
1. 개체, 빠른 반전 복사 (Reflect Tool / Vertical / Copy)
[작업 순서]
1. 도형 다각형 툴로 위의 왼쪽 삼각형(상하 방향키 이용)을 만든다.
2. 선택 툴로 삼각형을 선택하고서, 키보드의 알파벳 O 선택 (Reflect)
3. Alt 키와 마우스 드래그, 아래와 같이 중심점을 오른쪽 꼭지점 이동
4. 자동으로 팝업 된, Reflect 창에서 Vertical 선택하고서 Copy 버튼
(Alt Key 또 다른 기능 --> 오브젝트의 중심점 이동)
한번 더 반복 연습해 보기!!
+++++++
2. 개체, 빠른 회전&반복복사 (Rotate Tool + Ctrl+D)
[작업 순서]
1. 도형 다각형 툴로 위의 왼쪽 삼각형(상하 방향키 이용)을 만든다.
2. 선택 툴로 삼각형을 선택하고서, 키보드의 알파벳 R 선택 (Rotate)
3. Alt 키와 마우스 드래그, 아래와 같이 중심점을 오른쪽 꼭지점 이동
4. 자동으로 팝업 된, Rotate 창에서 (30도) 선택하고서 Copy 버튼
5. 하단 왼쪽 처럼 1개 복사된 상황에서, Ctrl + D 여러번 반복 복사!!
오른쪽 이동한 중심점(anchor)을 축으로 개체 회전&반복 복사
한번 더 반복 연습해 보기!!
+++++++
3. 빠른 확대&축소 반복 복사 (Scale Tool + Ctrl+D)
[작업 순서]
1. 도형 다각형 툴로 위의 왼쪽 육각형을 만든다. (오른쪽 완성 개체)
2. 선택 툴로 육각형을 선택하고서, 키보드의 알파벳 S 선택 (Scale)
3. Alt 키 & 마우스 클릭, 아래와 같이 중심점을 이동하지 않고 클릭
4. 팝업 Scale 창에서 Uniform 선택하고서 80% 입력, Copy 버튼
5. 하단 왼쪽 처럼 1개 축소 복사 됨, Ctrl + D 여러번 반복 복사!!
6. 축소된 각 오브젝트를 개별 선택하여 색상 변경 함
한번 더 반복 연습해 보기!! (70% 축소)
+++++++
이상 위의 3가지 기본 단축키 기능을 일러스트에서 작업시 적절하게 응용하여 활용하면 보다 효율적으로 오브젝트를 편하게 제작할 수 있습니다.
+++++++
간단한 실습과제
위에서 학습한 단축키 응용 기능을 활용해서 예쁜? 꽃잎 만들어 보기, 2가지 형태로 작업...?
(나름의 작업방법 이것저것 자유롭게 시도해 보기)
1. 타원 만들고, 선택 툴로 선택
2. 키보드 R 선택
3. Alt 키 사용 중심점 아래로(밖으로 수직 이동)
4. 각도 30도 입력 후, Copy
5. Ctrl + D <-- 같은 각도로... 반복 복사 회전!!
나름의 디자인 감각 창의력...? 발휘!!
+ 예쁜 꽃 이것저것 만들어 보기 +
오브젝트를 축소만 시켜도 색다른 느낌!!
Pen & Reflect Tool 응용!!
'■■▶ILLUSTRATOR ①◀' 카테고리의 다른 글
| 00(Illustrator) 오브젝트 드로잉, 중요한 ★펜 툴(Pen Tool)★ 다루기1 (페인트 붓) (0) | 2017.09.20 |
|---|---|
| 00(Illustrator) 하트 만들기 3가지(도형 원형, 직접 선택, 전환(convert) 툴 사용) (0) | 2017.09.17 |
| 00(Illustrator) 무료 아이콘 (SVG img) & 아이콘 사이트 모음 - UI/UX Design (1) | 2017.09.15 |
| 00(Illustrator) 일러기초 도형 툴, 직선 툴 사용(사각형, 원, 별, 점선, 화살표) (1) | 2017.09.13 |
| 00(Illustrator) 일러기초 글 입력&폰트파일 추가 (0) | 2017.09.13 |
+++ 타이포그래피(Typography) +++
메인 타이틀 텍스트 긴 그림자 효과 제작하기
+++++++
+++++++
!! 개별실습과제 !!
Good Price! / SEASON OFF 80% / 고객감사 / 한정가격 / 빅 이벤트
+++++++
기초데이터 수집 & 벤치마킹 샘플 자료
+++++++
+ 자유 변형(Free Transform) / 변형(Transform) 응용 +
결과물은 비슷하지만, 기술적인 작업 내용이나 순서는 다른 경우가 많다
'■■▶PHOTOSHOP ②◀' 카테고리의 다른 글
| 00(Photoshop) [개별 문제해결 응용실습과제] - 기초데이터 수집 약도 제작 (0) | 2017.09.17 |
|---|---|
| 00(Photoshop) 아이디어 시각화 느낌 전달... 무드보드!! (디자인 구성요소 제작)_91x (0) | 2017.09.16 |
| 00(Photoshop) 텍스트 로고1 - 타이포그래피(textLogo_typography_signature) (0) | 2017.09.16 |
| 00(Photoshop) 이미지 배경제거 편집하기 - 웹사이트 활용 / 94x (0) | 2017.09.15 |
| 00(Photoshop) 개념적인 용어의 이해 UI/UX Design 개요 (UI/UX...?) / 키보드 UXUI (0) | 2017.09.11 |
++ 나만의 시그니처 텍스트 로고 제작해 보기!! ++
다양한 글꼴 & 텍스트 조합으로 아래 제시된 2개 사이즈 제작하기!!
sample size: w190 x 60h / w290 x 90h
+++++++
제작한 본인 시그니처 로고 PPT 파일에 삽입해 보기
▣ (^(oo)^) edyoon.tistory.com ▣
'■■▶PHOTOSHOP ②◀' 카테고리의 다른 글
| 00(Photoshop) 아이디어 시각화 느낌 전달... 무드보드!! (디자인 구성요소 제작)_91x (0) | 2017.09.16 |
|---|---|
| 00(Photoshop) 텍스트 로고2 - 타이포그래피(textLogo_typography_signature) (0) | 2017.09.16 |
| 00(Photoshop) 이미지 배경제거 편집하기 - 웹사이트 활용 / 94x (0) | 2017.09.15 |
| 00(Photoshop) 개념적인 용어의 이해 UI/UX Design 개요 (UI/UX...?) / 키보드 UXUI (0) | 2017.09.11 |
| 00(Photoshop) [연습문제&실습과제] - 반복 & 숙달 연습 (0) | 2017.09.11 |
!! 주의 !!
현업 실무에서는 저작권 관련해서 꼼꼼히 확인후 사용!!
이미지/폰트/아이콘/동영상 기초데이터 수집시
개인용&상업용 모두 무료 or 개인용 무료 / 상업용 유료
+++++++
[상업용 사용 가능한 무료 아이콘 다운로드 사이트]
다양한 디바이스로 웹 사이트를 접근 했을때의 문제 해결을 위해 반응형 웹 사이트를 만드는 트랜드에 따라서 요즘은 디자인을 단순화 시키고, 이미지 보다는 로딩 속도도 빠르고 유지보수 수정이 쉬운 텍스트 사용이 많아 졌습니다.
실무에서는 웹 사이트의 디자인을 단순화 하고, 이에 대한 디자인적인 부분을 보완하기 위해서 용량이 크지 않고 단순 깔끔한 아이콘을 많이 사용합니다.
(직관적으로 얼굴, 날씨, 전원 아이콘을 찾아 보세요)
사용자에게 직관적인 정보 전달에 효과적인 아이콘을 사전에 적절하게 설계(기획)하여 웹 페이지에 배치 사용하는 것이 UI/UX디자인 구현의 시작이라 할 수 있습니다.
+ 간단한 실습1 +
위의 AI 파일을 다운받아서 실무 사용대비 편집 백업 작업!!
(새 문서 아트보드 사이즈: 200*200px / Color Mode: RGB)
+ RGB Color Code +
(TV/모니터, 빛의 3원색, 가산혼합)
- Red: ff0000
- Green: 00ff00
- Blue: 0000ff
+ CMYK Color Code +
(안료/물감, 색의 3원색 + 검정, 감산혼합)
- Cyan: 00ffff
- Magenta: ff00ff (짙은 분홍색, Purple: 800080)
- Yellow: ffff00
- Black: 000000
아래는 색상별, 완성 파일 아트보드 200*200px (100%)
+ 간단한 실습2 +
아래는 최종 완성 파일 오브젝트 개별 저장(GIF, PNG)
(1개의 오브젝트를 총 4개의 속성으로 변환해서, 4개 파일 저장 함)
1. Save for Web --> gif (아트보드 배경 흰색, 불투명)
2. Save for Web --> gif (Transparency, 배경 투명)
3. Save for Web --> png (아트보드 배경 흰색, 불투명)
4. Save for Web --> png (Transparency, 배경 투명)
우측 메뉴에서 Transparency 체크 (투명 적용)
+++++++
1. Save for Web --> gif (배경 불투명)
IconColor_face_1(YoonSemComClass).gif
(Transparency: 체크 해제, Clip to Artboard: 체크)
2. Save for Web --> gif & Transparency (배경 투명)
IconColor_face_1_Transparency(YoonSemComClass).gif
(Transparency: ?, Clip to Artboard: ?)
3. Save for Web --> png (배경 불투명)
IconColor_face_1(YoonSemComClass).png
(Transparency: ?, Clip to Artboard: ?)
4. Save for Web --> png & Transparency (배경 투명)
IconColor_face_1_Transparency(YoonSemComClass).png(Transparency: ?, Clip to Artboard: ?)
+ 학습한 내용 개별 실습과제1 +
(반복/숙달/이해)
날씨 관련 아이콘들을 실무 사용대비 편집 백업 작업!!
(새 문서 아트보드 사이즈: 300*300px / Color Mode: RGB)
작업완료 저장 파일명 제시
1. 본인이름_IconColor_weather_group.ai (아이콘 색상별 모음)
2. 개별 오브젝트 이미지 속성별 저장 (gif, png 각각 2개 파일)
- 본인이름_weather_1.gif
- 본인이름_weather_1_tcy.gif
- 본인이름_weather_1.png
- 본인이름_weather_1_tcy.png
- 본인이름_weather_2.gif
- 본인이름_weather_2_tcy.gif
- 본인이름_weather_2.png
- 본인이름_weather_2_tcy.png
현장 실무에서는 파일명이나 폴더명을 누구나 쉽게 이해 할 수 있도록 의미있게 잘 정해야 합니다. 본인만 알 수 있게 대충 파일명을 정한다면 미숙한 아마추어로 평가 받을 수 있습니다. ㅠㅠ
최악의 파일명 예시...
icon_1.gif, icon_2.gif, icon_2.gif...
img_1.gif, img_2.gif, img_3.gif...
+++++++
+ 학습한 내용 개별 실습과제2 +
(내가 사용할 아이콘 직접 기획 디자인 제작해 보기)
툴 패널의 도형 툴을 이용하여 아래의 아이콘을
참고해서 최소 10개 이상 직접 제작해 보세요...
위의 제시된 아이콘과 똑같이 작업하셔도 좋습니다.
(다양한 색상을 정해서 적용 시켜보기)
또는 본인만의 작업 방법과 창의적인 아이디어를 추가하여 자유롭게 나만의 독특한 아이콘들을 제작해 보세요...
최종 작업완료 결과물 파일 저장은 위의 [실습과제1] 파일명 형식을 참고해서 스스로 자유롭게 결정 저장하세요!!
작업 완료된 결과물(AI, GIF, PNG) 제출
상호간 품평회? 비교/보완/수정 할 부분은...?
+++++++
+ 제작한 아이콘 활용 간단한 HTML 실습 +
메모장을 실행해서 아래의 제시된 간단한 태그 명령어들을 오타 없이 입력해 보세요...
File Save--> HDD D:\html\오늘날짜_html_1.html
20171108_html_1.html
추가로 일러스트에서 제작한 이미지(투명/불투명)의 저장 속성에 따른 특징을 웹 브라우저에서 파악하기 위한 간단한 실습을 해보겠습니다.
1. <img src="..." alt="이미지 설명"/>
2. <body bgcolor="yellow"> "red"
3. Path(경로)... 개념?
-일러스트, 윈도우 O/S, 인터넷
4. 인터넷(온라인) 상의 이미지 삽입(불러오기) 실습
+++++++
무료 아이콘 사이트 모음
(Know How 시대는 갔다!! Know Where 시대다...?)
1. http://www.webalys.com/minicons/icons-free-pack.php
++++++++++++++++
2. http://www.alessioatzeni.com/metrize-icons/
(ai, pdf, psd, svg,...)
(직관적으로 파일(영화/음악) 열기 관련 아이콘을 찾아 보세요)
++++++++++++++++
대체적으로 무료 아이콘을 제공하는데, 일부는 구입해야 하거나
사용 제한이 있는 아이콘도 있습니다. 잘 확인하고 사용하세요...
3. http://ikons.piotrkwiatkowski.co.uk/index.html
(ai, psd, png, svg,...)
(직관적으로 사용 가능한 소리제거 아이콘을 찾아 보세요)
++++++++++++++++
(직관적으로 사용 가능한 시스템 설정 아이콘을 찾아 보세요)
4. http://www.streamlineicons.com/free-icons-keep-focus.html
++++++++++++++++
5. http://ux.streamlineicons.com/
여기까지... 다운로드한 일부 파일만 포스팅 했습니다.
위의 웹 사이트들에 방문 직접 다운로드 해서 확인해 보세요!!
++++++++++++++++
웹 사이트 제작시 실무에서는 아이콘을 직접 제작해서 사용하기도 하지만, 많은 시간과 노력을 투자하기 보다는 일반적으로는 상업용으로 사용 가능한 무료 아이콘들을 찾아서 사용합니다.
[개별 실습과제]
추가로 괜찮은 무료 아이콘 찾아서 공유하기
(사이트 리서치 아이콘 자료 수집해 보기)
!! 상업용으로 사용 가능한지... 잘 살펴 봐야 합니다 !!
https://www.webdesignerdepot.com/2013/12/free-download-vector-ecology-icons/
https://dribbble.com/shots/1344983-simple-line-icons-100-ai-eps-svg-psd
추천 할 만한 무료 아이콘 웹 사이트가 있으면...
아래 댓글에 자유롭게 URL 공유하셔도 좋습니다.
(초창기 시절 인터넷 발전의 계기는 차단벽이 없는 개방성과 정보의 수평 공유)
+++++++
[ ?... UI/UX Design ...? ]
+++++++
[ svg images ]
ai -- (아트보드 크기조정 / save as) --> svg
ai 파일 일러스트에서 오브젝트 크기 만큼 아트보드를 조정하고, save as / svg 파일 형식으로 선택하고 저장하기
[ txt_icon / css_coding ]
'■■▶ILLUSTRATOR ①◀' 카테고리의 다른 글
| 00(Illustrator) 하트 만들기 3가지(도형 원형, 직접 선택, 전환(convert) 툴 사용) (0) | 2017.09.17 |
|---|---|
| 00(Illustrator) 단축키 응용 --> 빠른 오브젝트(회전&복사, 확대&축소), 예쁜 꽃잎 (0) | 2017.09.16 |
| 00(Illustrator) 일러기초 도형 툴, 직선 툴 사용(사각형, 원, 별, 점선, 화살표) (1) | 2017.09.13 |
| 00(Illustrator) 일러기초 글 입력&폰트파일 추가 (0) | 2017.09.13 |
| 00(Illustrator) [연습문제01&실습과제] (간단한 실습과제 - 반복 & 숙달 연습) (0) | 2017.09.12 |
뭐 별거 있나? ^.^ 그냥 좋은거 보고, 맛난거 먹고 돌아다니며 ^.^ 맘 편하게!
(^(oo)^) 천안 한국기술교육대학교 학식 컬렉션 (^(oo)^)
+++++
+++++
++ 국내 맛집 추천 명함 컬렉션 ++
https://edyoon.tistory.com/1012
'<그냥 세상사는 이야기들>' 카테고리의 다른 글
| 추천 필독서 [세계사 편력] 윤샘이 죽기전에 꼭 읽어 보고 싶은 책 (0) | 2017.10.08 |
|---|---|
| [윤샘컴교실] 세계불꽃축제(2017.09.30) 전망 좋은 이촌2동(서부이촌동) 한강둔치 (0) | 2017.09.30 |
| 자동차 싼타페 타이밍벨트 교체 (강서구 화곡동 대영모터스) (0) | 2017.07.15 |
| 자동차 시동 불량...? 스타트 모터 교체 비용 (0) | 2017.07.13 |
| 걸레스님 중광 마지막 전시회(남긴 말) - 괜히 왔다 간다. (0) | 2017.04.19 |
