• 검색 결과가 없습니다.

일러스트레이터

N/A
N/A
Protected

Academic year: 2022

Share "일러스트레이터"

Copied!
44
0
0

로드 중.... (전체 텍스트 보기)

전체 글

(1)
(2)

진짜 쓰는

포토샵 & 일러스트레이터

Ⓒ 2021. 이하나, 박경나 All Rights Reserved.

1쇄 발행 2021년 9월 15일 지은이 이하나(좐느), 박경나(톰왔) 펴낸이 장성두

펴낸곳 주식회사 제이펍

출판신고 2009년 11월 10일 제406-2009-000087호

주소 경기도 파주시 회동길 159 3층 3-B호 / 전화 070-8201-9010 / 팩스 02-6280-0405

홈페이지 www.jpub.kr / 원고투고 submit@jpub.kr / 독자문의 help@jpub.kr / 교재문의 textbook@jpub.kr 편집부 김정준, 이민숙, 최병찬, 이주원 / 소통기획부 송찬수, 강민철 / 소통지원부 민지환, 김수연 / 총무부 김유미 기획 및 교정 · 교열 강민철 / 내지 디자인 다람쥐 생활 / 표지 디자인 이민숙

용지 타라유통 / 인쇄 한길프린테크 / 제본 보경문화사 ISBN 979-11-91600-38-4(13000)

21,000원

제이펍은 독자 여러분의 아이디어와 원고 투고를 기다리고 있습니다. 책으로 펴내고자 하는 아이디어나 원고가 있는 분께서는 책의 간단한 개요와 차례, 구성과 저(역)자 약력 등을 메일(submit@jpub.kr)로 보내 주세요.

※ ‌‌이 책은 저작권법에 따라 보호를 받는 저작물이므로 무단 전재와 무단 복제를 금지하며, ‌ 이 책 내용의 전부 또는 일부를 이용하려면 반드시 저작권자와 제이펍의 서면동의를 받아야 합니다.

※ 잘못된 책은 구입하신 서점에서 바꾸어 드립니다.

리 가

포토샵

일러스트레이터

,

100%

이하나(좐느), 박경나(톰왔) 지음

(3)

게임 컨셉 디자이너와 프리랜서 디자이너가 알려 주는 실무 디자인 입문서

포토샵

일러스트레이터

핵심만 빠르게, 활용도

100%

예제로 제대로 배우자

!

이하나(좐느), 박경나(톰왔)지음

(4)

※ 드리는 말씀

・ 이 책에 기재된 내용을 기반으로 한 운용 결과에 대해 저자, 소프트웨어 개발자 및 제공자, 제이펍 출판사는 일체의 책임을 지지 않으므로 양해 바랍니다.

・ 이 책에 기재한 회사명 및 제품명은 각 회사의 상표 및 등록명입니다.

・ 이 책에서는 TM, Ⓒ, Ⓡ 등의 기호를 생략하고 있습니다.

・ 이 책의 예제 파일은 학습용으로 제공하며, 이외의 용도로 사용 시 발생하는 문제에 대해 저자 및 제이펍 출판사는 일체의 책임을 지지 않습니다.

・ 독자의 학습 시점이나 환경 설정, 사용하는 버전에 따라 책의 이미지와 차이가 있을 수 있지만, 학습하는 데 큰 어려움은 없습니다.

참고로, 이 책은 윈도우 운영체제에서 포토샵 및 일러스트레이터 2021 영문 버전을 기준으로 설명합니다.

・ 이 책에 나오는 예제 파일은 독자 지원 페이지 https://bit.ly/real_ph_il에서 다운로드할 수 있습니다.

독자 지원 페이지는 Notion으로 제작되어 인터넷 익스플로러에서는 열리지 않습니다. 크롬이나 엣지 브라우저를 사용하세요.

・ 책의 내용과 관련된 문의사항은 지은이나 출판사로 연락해 주시기 바랍니다.

- 지은이: hanaworks@naver.com 및 thomwhat@kakao.com - 출판사: help@jpub.kr

(5)

5

• 11

• 012

러스

• 014

러스 문 전

• 016

• 017

디자

• 018

01

LESSON 01 이 기 기

24

하 스

24

선 도를 하 PPI DPI

25

LESSON 02 이 하기

26

상, 도, 도, 해하

26

상을 RGB CMYK 상

31

02 포토샵

0 포토샵 33

LESSON 01

하기

34

LESSON 02

40

40

패널

43

46

LESSON 03 포토샵 기 기

47

문서 불러

48

49

50

자 스

53

가하고 클 마스

55

58

60

선택하

61

문자 입력하

63

64

(6)

6

0 하기 65

LESSON 01

66

Levels

66

더 디 Curves

68

전체 하 Shadows Highlights

72

도를 Hue Saturation

73

Color Balance

74

자 스 고 Vibrance

76

Replace Color, Selective Color

77

Black White, Desaturate, Grayscale

80

전문가 하 Camera RAW Filter

82

83

하 한

86

LESSON 02

88

Spot Healing Brush Tool

88

Camera Raw Filter

89

Free Transform, Liquify

91

하 ( )

96

선을 혹은 선 하 수 하

103

Content Aware Patch Tool 불 자 스

107

110

Sky Replacement 하 체하

113

03 115

LESSON 01

하기

116

를 가

116

하고

120

LESSON 02 e

을 이용하

124

Pen Tool

124

Pen Tool 하 메뉴

128

Pen Tool 옵션 창

129

Pen Tool을 한 릭

129

(7)

7

LESSON 03

스 와 레이 이용

140

마스

140

마스 를

141

148

상을

151

Overlay를

153

Proof Setup에서

154

LESSON 04

러 활용하기

156

Brush Tool 옵션 창

156

태블

159

160

161

04 에서 163

LESSON 01

164

165

문자

171

177

LESSON 02 이

183

Object Selection Tool

184

2 성하

187

전체

191

마스 를 입력하

193

LESSON 03 스

이용 일러스트

195

Pen Tool을 하 체

196

체 디

205

207

LESSON 04

220

221

230

세 번

234

(8)

8

03 일러스트레이터

0 239

LESSON 01 일러스트레이터 하기

240

문서

240

242

LESSON 02

244

244

패널

247

Workspace

248

LESSON 03 오 하기

249

Selection Tool Direct Selection Tool을 수 하

249

Reflect Tool Rotation Tool을

254

0 259

LESSON 01 을 활용

260

261

269

270

LESSON 02 오 트 오 일러스트

273

274

275

도 을

276

284

LESSON 03 터 일러스트

289

290

293

296

하고

298

(9)

9

LESSON 04 포스터 일러스트

301

불러

302

Pencil Tool

304

해 러스 선

305

Paintbrush Tool

309

Blob Brush Tool

311

03 스트와 이포 315

LESSON 01

316

317

패스를 가 스

319

Eraser Tool

324

Draw Inside 해 도

326

마스

331

LESSON 02

336

고 디자 하

337

하고

340

더 며

342

04 에서 345

LESSON 01 레이 와 스트

346

SNS 고

346

입체

352

355

LESSON 02 이용

359

Blend Tool 옵션

359

2D

364

입체

368

해 입체

369

373

(10)

10

LESSON 03 터 이 하기

375

375

377

마스 해서

382

LESSON 04 스 일 레이

386

387

389

396

에 2

399

401 403

Stylize 옵션

406

LESSON 05

409

409

413

04 포토샵 일러스트레이터

LESSON 01 일러스트레이터 파일을 포토샵에서 불러와 활용하기

424

Libraries에서 불러

424

Ctrl+C, Ctrl+V 단 불러

425

PSD

427

LESSON 02 파일 활용

429

AI

430

PSD

431

LESSON 03 러 용 하기

434

러를

435

수 단

437 러스 수 단

438

439

(11)

11

하 . 스 이 을 한 에이 좐 입니다. 을 하면서 가 보

기 서 을 보고 아 을 스 이 에서 선

하고자 니다. 에서 자 기 로 을 아 보고 하 를 보기 고 로 구 . 에서 다 지 한 정

에서 상 의로 하 니 하다 이 다면 상 의를 고하 면 니다.

을 한 경나 자 고 원을 다 구 이입니다.

입 를 하 을 지나 자의 자 에서 한 을 하고 고 로 하 를 이 에 가 니다. 을 하기 해 경나 자

이 의 의 를 니다.

하 . 을 자한 기 로 좐 의 를 아 을 한 입니다. 이번 스 이 에서 전 이 A to Z 로 고 하기보다 에 서 자 기 을 하면 지에 을 니다. 고 기 을 더 더 된 을 를 구 해 보 니다. 이 을 아니

에 입된 에 지 을 자 의 선 ( ) 이 면 니다.

이번이 이 하 스스로 이 니다. 기 를 해 이하나

자 이 의 의 을 니다. 로 이 을

중 하지 상 하 바 니다. 하 면서 이 스 지 고

(12)

12

183

LESSON 02 만들기 2개 이상의 이미지를 결합하여 하나의 이미지로 표현하는 이중 노출 효과를 만들어 보겠습니다. 영화 포스터, 광고 등에 많이 쓰이는 이 효과는 꼭 인물 사진이 아니더라도 다양하게 활용할 수 있습니다.

: Object Selection Tool, 마스크, 레이어 블렌드, 조정 레이어 : 스웨거

: #fdf8f4 : 3000×2000px

: bear.jpg, forest.jpg : double_exposure_bear.jpg 결과 미리보기

0

183

만들기

88

CHAPTER 02

ea i r s 하기

에서 의 여 여 가지가 지 중 가 간 한 이 바로 [Spot Healing Brush Tool]입니다. 를 클릭 하면 변을 자 로 지해 서 클릭 을 체하 기 입니다.

0

Skin jpg 옵니다. 1 에서 [Layer New Layer](Ctrl Shift N)를 선택 해 정을 이 하나를 가합니다. 2 툴바에서 [Spot Healing Brush Tool]을 선택합니다.

0

1 상 옵션 바에서 기를 정합니다. 보다 정 가 니다. 2 Mode:

Normal, Type: Content Aware로 지정하고 3 Sample All Layers에 체 하 .

서 하 를 가 문에 [Background] 를 하 해 [Sample All Layers] 은 체 해 해 .

1

2

1 3

2

0

미리 보기

완성 결과를 먼저 살펴보고 어떤 기능이 사용되는 지 알아보세요. 실습에 사용되는 폰트, 크기, 예제 파일 및 완성 파일도 확인할 수 있습니다.

참고 영상

크리에이터의 유튜브 채널에서 포토샵 및 일러스트 레이터 편 주요 예제의 실습 영상을 참고해 보세요.

실습에 따라 본문 내용과는 일부 단계의 옵션 값이 나 순서가 약간 다를 수 있습니다.

간단 실습

실무 디자이너가 진짜 쓰는 기능은 따로 있습니다.

디자인 툴의 수많은 기능 중에서도 효율적으로 작 업할 수 있는 중요 기능만 간단히 실습하며 빠르게 익힐 수 있습니다.

(13)

13

424

PART 04

이 의 AI 에서 보면 아 창이 고 기를 정하고 [OK]

를 클릭하면 정이 가 한 이 지로 니다. AI 이 지를 하 다 을 아보 니다.

Libraries에서 불러오기

0

Chapter 2에서 한 SushiCat ai 이 에서 옵니다. Layers 패널에서 경 이 를 가 고 고 이 선택해 Libraries 패널에 합니다. 고 이 에이

Libraries 패널에서 니다.

일러스트레이터 파일을 포토샵에서 불러와 활용하기

0

OK] LESSON 01 빈티지 로고 만들기

321

03

문자가 선택된 상태에서 Properties 패널을 보면 [Character] 옵션이 나타납니 다. 1 여기서 Font: 양진체, 11pt로 지정합 니다. 2 툴바의 [EyedropperTool](I) 을 선택하고 3 로고 원의 중앙을 클릭해 글 자 색을 변경합니다.

혹은 상단 메뉴에서 [Window-Type- Character](Ctrl+T)를 선택해도 Character 패널을 불러올 수 있습니다.

04

툴바에서 [TypeonaPathTool] 아이콘을 더블클릭하면 옵션 창이 나타납니다. 1 Align to Path: Center로 변경하고 2 [OK]를 클 릭합니다. 문자가 원 패스의 중간에 정렬됩니다.

05

[TypeonaPathTool]이 선택된

상태에서 Lorem ipsum 문구를 3번 클릭해 문자를 전체 선택한 뒤 JWANNEU HOUSE 를 입력합니다.

패스를 선택한 뒤 [Type-Type on a Path-Type on a Path Options]를 선 택해도 옵션 창을 생성할 수 있습니다.

[Type Tool]을 선택한 상태에서 문자를 한 번 클릭하면 입력할 수 있고, 문자를 더블클릭하면 한 마디가 선택되며, 세 번 클릭하면 입력한 문자 전체가 선택됩니다.

2

3

1

1

2

친절한 실습 과정

누구나 쉽게 따라 할 수 있도록 설명과 화면 그림에

1

:

1

로 실습 과정을 표시했습니다.

TIP

실습 중에 초보자가 쉽게 놓칠 수 있는 부분을 짚어 드립니다.

포토샵 & 일러스트레이터 연동 작업

[

PART 04

]에서는 포토샵과 일러스트레이터를 동시 에 활용하는 작업이나, 목업 적용 및 색상 설정 방법 등을 소개합니다.

(14)

14

포토샵 일러스트레이터 하기

습을 하 면 해 되 있 니다. 은 러스 2021 문 전을

니다. 러 전에 상 습을 할 수 있습니다. 면 도 에서

전을 다 하 7 할 수 있 며, 에 을 불한 해 니다.

0

이지(www.adobe.com kr)에 한 지원 다 로

를 선택합니다.

0

다 로 에서 Photoshop illustrator을 아 체 을 클릭 합니다.

03

7 간

로 니다. 에 에 간 정

을 지 해 합니다. 선 Photoshop 의 체 을 클릭합니다.

1

2

(15)

15

04

입력 정보

고 의(체 )한 을 클릭합니다.

에 구 정 옵션을 선택한 을 클릭합니다.

하 을 면 7 전에 해 니다. https account.adobe.

com 에 니다. 에서 [ ]를 클릭한 에서 [ ]를 클릭하세 . 를 선택한

할 수 있습니다.

05

이 서 정보를 입력하고

기간 을 클릭합니다. 7 기간 로 가 지 니 정하지 고 정보 를 입력해 됩니다. 가 를 하지 면 7 이 에 를 해 합니다. 지

로 문 정보를 한 하기 를 클릭 하면 정을 이 됩니다.

3

2 1

입력

1

입력

2

(16)

16

에 클 (CreativeCloud, CC)에서 다 을 하 다면 러스

를 할 자 한 전 됩니다. 에서 디자 체 문 전을

을 고 해서 문 전 습을 니다. 러스 가 한 전 되 있다면 다

을 면 됩니다.

0

이 가 면서 자

로 Creative Cloud Desktop 됩니 다. Creative Cloud Desktop을 아 한 상 에 아이콘을 클릭하고 경 정 을 선택합니다.

0

경 정 창이 면 을 클릭한 에서 기 옵션을 합니다. 를

한 한글 전을 한 로 문 전을 English(International) 로 정한 을 니다.

03

다 Creative Cloud Desktop 로 아 서 Photoshop을 고 을 .

을 기타 전 을 선택하면 이전 전을 니다.

1

2

3

포토샵 일러스트레이터 하기

(17)

17

파일 s bi rea i

자 여 서 하 을 이 에서 된 의 을 합니 다. 자 지원 이지(https bit.ly real ph il)를 문해 보 . .zip

스 이 .zip 을 클릭하여 다 로 하고 을 고 하 . 이전 전 자 CC 전 기 로 니다.

[Notion] 며, 러에서 할 수 습니다. ,

해 세 . 하 다면 https bit.ly real ph il 2에서 할 수도 있습니다.

에 용 트 하기

에서 가지 한글 (글 )를 니다. 원 한 을 해 전에 에 된 (OTF )를 해 .

: https www.swagger.kr font.html

: http company.gmarket.co.kr company about company company font.asp 양진체: http supernovice.org font

: http www.baskinrobbins.co.kr event view.php flag seq 3722 자 지원 이지에 의 이지(https bit.ly real fonts)에 한 한글 의 URL 를 정 해 니다. 더 다 한 한글 를 다면 (noonnu.cc)나 다 (www.dafont.com)에 해서 한 를 색해 합니다.

파일

(18)

18

088쪽 091쪽 103쪽

104쪽 자 스 111쪽

108쪽

에서 수 하 116쪽 PenTool 129쪽 마스 를 141쪽

기 | 포토샵

(19)

19

164쪽

183쪽

패스, 클 마스 를 한 러스 195쪽 상세 220쪽

(20)

20

기 | 일러스트레이터

도 을 260쪽 메 릭 패 273쪽

릭 러스 289쪽 러스 301쪽

316쪽 336쪽

SNS346쪽 입체 352쪽

(21)

21

2D 364쪽 입체 369쪽

377쪽 386쪽

409쪽 413쪽

(22)

포토샵과 일러스트레이터에는 수많은 기능이 있지만, 실제 실무 디자이너가 쓰는 기능은 극히 일부이며, 실습 예제를 반복하다 보면 누구든지 마스터할 수 있습니다.

하지만 문제는 디자인을 위한 기본기입니다.

어떻게 해야 디자인 감각을 키우고, 디자인 지식을 쌓을 수 있을까요?

우선 주변의 아름다운 것을 많이 보는 데서 시작해 보세요.

눈에 띄는 구성, 디자인, 글꼴을 눈여겨 보면 규칙이 보이기 시작합니다.

여기서는 실습 전에 알아두면 좋은 디자인 기본 지식을 간단히 살펴보겠습니다.

리 가

포토샵

일러스트레이터

, 100%

이하나(좐느), 박경나(톰왔) 지음

(23)

LESSON 01

LESSON 02

(24)

24 PART 01

고 기

하 스터와 터

이 지를 하 스 ( ) 를 아 니다. 스 의 이 지를 로 하고 스 이 로 이 지를 하 로 합니다.

스 (Raster) 정 (Pixel)이 여 이 지를 구 하 입니다. 서 이 고 하기 합니다. 가 니 에서 보 색상 이 자이 여 구 된 이 지 입니다. 의 가 을 이 지의 기 지고 하 니다. 하지 기가

스 이 지를 면 이 지의 서 이 로 보이고 전체 로 보입 니다. 에서 보정을 한 원 에 가 이 지를 보정한 에 합니다. 기 로 스 이 지 경 가 아니 면 기를 하 면( 기) 됩 니다.

(Vector) 이를 선 로 해 이 지를 구 하 입니다. 스 에 색상 을 하 이 아니 의 로 기 문에 이 지 이 지를 이 나 이 지에 상을 지 니다. 서 력하 로고 간 이나 스 을 로 해 합니다. 스 이 (Illustrator)나 로 (CorelDRAW) 로 에서 스 이 AI 아니 PDF SVG EPS 스 이 에 니다.

기 기

0

(25)

25

LESSON 01

기 기

스 이 에서 이 지 해상 를 나타 PPI (Pixels per Inch) 1 (2.54cm) 의 로 하 지로 의 를 나타 입니다. 가 10 PPI 면 가로

로 1 1 의 간에 100 의 이 가고 20 PPI 면 1 1 의 간에 400 의 이 가기 문에 PPI 이 클

이 지를 선 하 니다. 보 이 지

72 PPI로 하고 력 이 지 300 PPI로 해 력 이 지가 하 보이지 니다.

서 에서 문서를 New Document 창을 보면 기 로 Resolution: 72 Pixels Inch 로 지정 스 이 Raster Effects: High 300 ppi로 지정됩니다.

러스

스 이 의 기 PPI 정해 지 New Document 창에서 하 중 [Web] [Mobile] [Film Video] 72 PPI로 [Print] [Photo] [Art Illustration] 300 PPI로 정 니다. 에서 력을 전 로 하 을 고 스 이 에서 에 이 지 을 니다. 에 PPI를 다 정해 한다 기 하 .

DPI(Dots per Inch) 해상 를 합니다. 면상의 를 나타 PPI DPI 력 가로 로 1 1

에 의 로 가 지를 나타 니다. DPI 한 이 클 고 한 이 지를 력 니다.

7 DPI 15 DPI

1 inch

1 inc h

1 inch

1 inc h

7 PPI 15 PPI

(26)

포토샵

포토샵을 켜고 작업 화면을 보면사방에 온갖 메뉴와 툴바, 옵션, 패널이 즐비합니다.

어느 세월에 하나씩 다 눌러 가며 기능을 익힐 수 있을까요?

그렇게 익힌 기능으로 제대로 된 결과물을 만들 수 있긴 할까요?

사실 매일 같이 그래픽 툴을 쓰는 디자이너들도

대부분 자신의 스타일이나 작업 대상에 따라 자주 쓰는 기능만 잘 알아요.

여기서는 실무 디자이너에게 꼭 필요한 기능을 간략하게 소개하고 주요 기능을 조합해서 실무 디자인 결과물을 직접 만들어 보며 기능을 익혀 볼게요.

포토샵

일러스트레이터

, 100%

이하나(좐느), 박경나(톰왔)

지음

(27)

포토샵

복잡해 보이는 작업물도 탄탄한 기본기로부터 만들어지는 법!

포토샵을 사용해 본 적은 있지만 어쩐지 어렵게 느껴졌다면 이번

Chapter

에서 포토샵 환경 설정과 기본 기능부터 손에 익혀 보겠습니다.

포토샵을 훨씬 더 편하고 쉽게 사용할 수 있을 거예요.

0

(28)

66 CHAPTER 02

하 Le e s

Levels 이 지의 기( )를 하 기 입니다. 상 에서 [Image Adjustments Levels]

(

Ctrl L

)를 선택하면 Levels 창이 나타납니다.

여기서 Input Levels 스 의 중간 의 을 하여

기 (콘 스 ) 을 변경 니다.

InputLevels InputLevels

의 스 을 보면 이 지 ( 하 바)의 가 고 이 지 ( 바)의 가 니다.

0

(29)

67

LESSON 01

Stool jpg 을 고 Levels 을 변경하여 이 지의 변 를 보 니다. Levels 간 해 가 색이고 가 색 지 정하 정이 고 하면 됩니다.

기 을 기 로 Input Levels 의 바를 로 하면 이

지고 의 바를 로 하면 이 더 아 의 가 해지 을 니다. 이 을 하 이면 이 타 보이 나 하 아가 보 니 의하 .

Levels , 하 은 은은한

[Output levels] 에서 되 은 하면 됩니다.

(30)

164 CHAPTER 04

어두운 담벼락에 환하게 반짝이는 네온사인 이미지를 만들어 보겠습니다. 담벼락 이미지에 조정 레이어를 이용 하여 밤거리 느낌으로 톤을 조절한 뒤, [

Shape Tool

]과 [

Type Tool

]로

SALE

문구를 만들고 레이어 스타일 로 네온사인 효과를 표현해 보았습니다.

: 조정 레이어, 레이어 스타일 : 스웨거, G마켓 산스 : #ff4fb2, #63cdff : 900×600px

: wall.jpg : neonlight_.psd

결과 미리보기

0

(31)

165

LESSON 01

만들기

을 보 니다. 자체의 색 을 하면 더 하 지 이번

나중에 가 색 을 기 해선 정 이 를 이 해 중 정하기 더 합니다.

0

Width: 900px, Heigh: 600px, Resolution: 100의 문서를 니다. wall jpg 을

1

[Move Tool](

V

)로

2

클릭 하여 이 니다.

0

1

Layers 패널 하 의 정 이 아이콘을 클릭하고

2

[ Brightness Contrast]를 선택합니 다.

3

Properties 패널에서 Brightness: 150, Contrast: 73 로 하면 이 전체 로

니다.

1

2

2

1

3

(32)

일러스트레이터

처음부터 일러스트레이터만 배우는 사람보다 포토샵을 먼저 공부하고 일러스트레이터를 공부하는 경우,

또는 동시에 공부하는 사람의 비중이 많습니다.

포토샵이 래스터(픽셀) 기반으로 사진 보정과 디자인을 할 수 있는 프로그램이라면 일러스트레이터는 벡터 기반으로 회사의 로고나 출력물을 제작할 때 사용하고

깔끔한 일러스트를 제작할 때도 사용됩니다.

현재의 포토샵이 일러스트레이터의 기능을 꽤 많이 포함하고 있으나 포토샵과 일러스트레이터 프로그램은 서로의 부족한 부분을 보완할 수 있는 관계로

디자이너라면 하나의 프로그램만 선택해 사용하기 어렵고

포토샵을 주로 사용하는 디자이너라도 다른 사람이 제작한 일러스트레이터 파일의 소스나 이미지를 정리해 포토샵에 불러와 사용하는 방법 정도는 알고 있어야 실무에서 원활히 작업할 수 있습니다.

포토샵도 재미있는 프로그램이지만 일러스트레이터도 사용해보면 꽤 매력 있고 재미있다는 걸 여러분도 알게 되셨으면 좋겠습니다.

포토샵

일러스트레이터

, 100%

이하나(좐느), 박경나(톰왔)

지음

(33)

일러스트레이터에서 나만의 작업환경을 만드는 방법, 아트보드(새 문서)를 만드는 방법과 일러스트레이터의

다양한 도구와 패널의 기능에 대해 알아봅니다.

그리고 포토샵과 비슷하지만 다른 레이어의 활용 방법과 가장 많이 사용하는 선택, 이동, 복제 기능을 알아보겠습니다.

0

(34)

240 CHAPTER 01

0

이 를 하면 면이 나타 다가 면이 니다. [Create new]를 클릭하 면 문서를 고 [Open]을 클릭하면 PC에 된 스 이 을 니다.

[Create new](

Ctrl N

)를 클릭합니다.

일러스트레이터 하기

일러스트레이터 시작 화면은 어도비에서 제공하는 튜토리얼 또는 업데이트 공지사항 등을 확인할 수 있고 새 문 서를 제작하고 불러오는 대기실 같은 공간입니다.

0

(35)

241

LESSON 01

0

New Document 창이 니다. 스 이 에서 기 로 다 한 문서 을 합 니다. [Mobile] [Web] [Film Video]의 기 Pixel, RGB Color, 72 ppi 고 [Print]의 경 mm, CMYK Color, 300 ppi 니다. 이 이 이 바 이 에 색상 가 변경됩니다.

1

[Print] 에서

2

[A4]를 선택하고

3

[Create]를 클릭해 A4 의 문서를 합니다.

03

1

에서 [Edit Preferences User Interface]를 선택합니다.

2

Preferences 창의 [User Interface]에서 스 이 면 기를 선택 니다. 기 번 기로 정 지 로의 글자가 더 보이

3

번 가 기로 선택해 을 하

니다.

2 1

3

1 2

3

(36)

316 CHAPTER 03

커피숍 원형 로고를 제작합니다. [

Type on a Path Tool

]을 사용해 둥근 패스를 따라가는 원형 텍스트를 제작 하고

Transparency

패널의 마스크(

Mask

) 기능을 사용해 로고에 빈티지 느낌을 추가하는 방법을 알아볼게요.

흑백 마스크를 사용해 원하는 영역을 투명하게 만들 수 있는 기능도 함께 알아보겠습니다.

: Type on a Path Tool , Mask, Dash Line

: (C 60%, M 60%, Y 60%, K 75%), (C 0%, M 25%, Y 60%, K 0%), (C 62%, M 0%, Y 38%, K 0%)

: 50×50mm : 양진체 : mask.jpg : Coffee Logo.ai 결과 미리보기

0

(37)

317

LESSON 01

빈티지 로고 만들기

0

Ctrl N

Width: 50mm, Height: 50mm 기의 문서를 합니다.

1

툴바에서 [Star Tool]을 선택하고

2

Fill: C 60 , M 60 , Y 60 , K 75 , Stroke: None 로 지정한 뒤

3

아 보 를 클 릭합니다.

4

옵션 창에서 Radius 1: 20mm, Radius 2: 20 5mm, Point: 90 로 지정한 뒤

5

[OK]를 클 릭합니다.

0

을 면 한가 하기 해 Properties 패널의 [Align]에서 아이콘 아이 콘을 클릭합니다. 로 하 원 Align 기 로 아 보 중앙에 정렬합니다.

1

2 3

5

4

(38)

386 CHAPTER 04

스 일

레이

뉴모피즘(

Neumorphism

) 스타일의 휴대폰 뮤직 플레이어를 만들어 보겠습니다. 뉴모피즘 스타일은

Inner Glow

,

Drop Shadow

등 부드럽게 퍼지는 그림자를 사용해 버튼이나 아이콘을 입체적이고 깔끔하게 표현하 는 효과로 최근 등장한 디자인 트렌드 중 하나입니다. 포토샵이나

Adobe XD

와 같은 프로그램에서도 제작 가 능한 스타일입니다.

: Appearance 패널, Drop Shadow, Clipping Mask

: #ffffff, #ecf0f3, #bcc5c9, #848687,

#5c73f2

: 750×1334px, 72ppi : Myriad Pro : Cover.jpg : 뉴모피즘.ai

결과 미리보기

04

(39)

387

LESSON 04

만들기

일용 트

0

New Document 창에서

1

[Mobile] 을 선택하고

2

[iPhone 8 7 6]을 선택합니다.

3

[Create]를 클릭해 문서를 합니다.

0

1

[Rectangle Tool](

M

)을 해 아 보 바 에 에 색상 을 니다.

기 상 니다. 에서 Width: 100px, Height: 100px 정 로 고 ffffff, ecf0f3, bcc5c9, 848687, 5c73f2 5 의 색상 로 변경한 상태입니다.

2

색상 이

이 고

3

이 를 가합니다.

1 2

3 2

1

3

(40)

포토샵 일러스트레이터

포토샵은 래스터(픽셀) 기반이며 일러스트레이터는 벡터 기반으로

이미지를 표현하는 방식이 다르지만, 프로그램을 호환해서 사용하는 경우가 종종 있습니다.

인물의 사진이 들어가는 포스터 작업을 할 때 포토샵에서 인물사진 보정과 전체적인 디자인 작업을 하고 일러스트레이터에서 만든 로고만 불러와 작업하는 경우를 예로 들 수 있겠습니다.

작업의 결과물이 어떤 프로그램 사용의 비중이 높은지 좀 더 수월한지에 따라 주로 사용하는 프로그램을 선택하면 됩니다.

리 가

포토샵

일러스트레이터

, 100%

이하나(좐느), 박경나(톰왔) 지음

(41)

LESSON 01

LESSON 02

LESSON 03

(42)

424 PART 04

스 이 의 AI 을 에서 보면 아 창이 고 기를 정하고 [OK]

를 클릭하면 정이 가 한 이 지로 니다. AI 의 이 지를 에 하 다 을 아보 니다.

Libraries에서 불러오기

0

Chapter 2에서 한 SushiCat ai 을 스 이 에서 옵니다. Layers 패널에서 경 이 를 가 고 고 이 선택해 Libraries 패널에 합니다. 고 이 에이 클

에 고 Libraries 패널에서 해 니다.

일러스트레이터 파일을

포토샵에서 불러와 활용하기

0

(43)

425

LESSON 01

0

Libraries 패널을 보면 한 고 이가 고 해 에 합 니다.

03

Creative Cloud Desktop 로 을 면 [ ]에 고 이가 된 니다. 다 기기를 더 정에 로 된 상태 면 서 이 을 니다.

r r 불러오기

스 이 의 를 에 간 하 를 하 입니다.

에서 Table jpg 이 지를 고 스 이 에서 고 이를 합 해 보 니다.

(44)

참조

관련 문서

§ 표본들은 모집단을 대표하지 못하기 때문에 표본을 기반으로 모집단에 관한 결론을 내리기가

따라서 본 연구에서는 제품디자인 개발 과정에서 제품디자이너가 표 면처리 디자인을 염두에 두고 디자인을 진행하였을 때 정확한 표면처리 , 디자인

② 사출식 중공성형 (Injection blow molding). • 기계적 성질이 높은 수지를 사용하여 용기를 제작할

피아제(Piaget)는 어린이의 흥미와 발달의 과정에 따른 정도를 기반으로 연령대에 맞는 어린이가 자유로운 탐구를 할 수 있는 환경을 조성해야 한다는 주장 아래에 어린이

이에 정부는 다양성과 수월성을 이룰 수 있는 대안으로 기존의 전문계 고 등학교를 기반으로 전체적으로는 평준화 정책과 고등학교 유형의 틀을 유지 하면서

실제 전문가는 새로운 지식을 습득하거나 잘못된 지식을 바로 알게 된다면 언제든 머릿속에서 규칙을 추가하거나 변경할 수 있지만, 저장된

이러한 문제는 Social Scientific Issue를 기반으로 한 STEAM 교육의 필요성이기도 하다... 한국교원대학교

유니버설 디자인 (Universal Design) 은 사용자에 대한 효율성을 높이는 제품이나 환경 디자인을 말하며 많은 사람들이 편리하게 사용하도록 함으로써 모든 사람들 ,