การสร้าง Sticker Line เรียน ...€¦ ·...

Create Character for Line Sticker

การสราง Stickerเรยนรการสราง Sticker ®Line ของตนเอง

It could be the part of the presentation where you can introduce yourself, write your email…

มารจกกบAdobe Illustrator

Illustrator คอ โปรแกรมทใชในการวาดภาพ โดยจะสรางภาพทมลกษณะเปนลายเสน หรอท เรยกวา Vector Graphic จดเปนโปรแกรมระดบมออาชพทใชกนเปนมาตรฐานในการออกแบบระดบสากลสามารถท างานออกแบบตางๆ ไดหลากหลาย ไม ว า จ ะ เปนส งพ มพ บรรจ ภณฑ เ ว บ แล ะภาพเคลอนไหวตลอดจนการสรางภาพเพอใชเปนภาพประกอบในการท างานอนๆ เชน การตน ภาพประกอบหนงสอ เปนตน

โปรแกรม Adobe Illustrator คออะไร

HAND BOOK

คมอส าหรบการสรางรปสตกเกอรแอนเมชน

01

APNG คออะไร?

APNG คอ รปแบบไฟลกราฟกแบบเคลอนไหว จะชวยใหไฟล PNG กลายเปนภาพ เคลอนไหว ท างานเหมอนกบไฟล GIF สนบสนนภาพ 24 บตและความโปรงใสแบบ 8 บต นอกจากนยงคงรกษาความเขากนไดกบไฟล PNG แบบธรรมดาดวย

คมอส าหรบการสรางรปสตกเกอรแอนเมชน

คมอส าหรบการสรางรปสตกเกอรแอนเมชน

การตงคา FPS ไฟล APNG

ก าหนดล าดบแสดง PNGของสตกเกอรแตละรป

ก าหนดเวลาแสดงตามจ านวนเฟรม PNG

ก าหนดจ านวนรอบตามเวลาแสดง

ก าหนดใหเปนไฟล APNGแลวบนทกไฟล

หากไฟลมขนาดใหญเกนกวาทก าหนดไว ขอใหบบอดรปดวยเครองมอบบอด

* FPS (Frames Per Second) คอ จ านวนเฟรมตอวนาท

* รอบ คอ จ านวนครงทแสดงแอนเมชน

ความยาวเปนวนาท x จ านวนรอบ = ไมเกน 4 วนาท

● ขอใหสรางสตกเกอรแอนเมชนทสอความรสกไดเมอแสดงเปนภาพนง นอกเหนอจากการแสดงแบบแอนเมชน

● โปรดใชรปทสามารถสอไดถงความรสกในเฟรมท 1 ซงจะใชแสดงเปนภาพนงเชน สตกเกอรแอนเมชนทเปนเรองราวและสอความรสกในเฟรมสดทายวา "ขอบคณ" กขอใหน ารปใน เฟรมสดทายมาใชในเฟรมแรกดวย

ขอควรระวงในการจดเฟรมสตกเกอรแอนเมชน

คมอส าหรบการสรางรปสตกเกอรแอนเมชน

เรองราวแอนเมชนเรมตนจากรป [02.png] แตรปนไมสามารถสอความรสก "ขอบคณ" เมอแสดงเปนภาพนงใหน ารปเดยวกบทใชในเฟรมสดทายซงสามารถสอความรสก "ขอบคณ" มาใชเปนเฟรมท [01.png]โดย [01.png] จะแสดงเปนภาพนง (เมอไมไดเลนแอนเมชนหรอเมอแสดงบนหนาจอเลอกสตกเกอร)

คมอส าหรบการสรางรปสตกเกอรแอนเมชนขอควรระวงในการจดเฟรมสตกเกอรแอนเมชน

- ความยาวสงสด 4 วนาท ก าหนดความยาวเปนวนาท ไดแก 1, 2, 3 หรอ 4วนาท แตจะใหมเศษของวนาทไมได (เชน 1.5 วนาท)

- จ านวนเฟรม PNG ตอ APNG 1 ไฟล : ใชรปไมนอยกวา 5 เฟรม แตไมเกน 20 เฟรม

* จะไมสามารถอพโหลดไฟลไดถาใชไฟลทมขอมลเหมอนกนทงหมดทกเฟรม เพราะไมสามารถแสดงสตกเกอรเปนแอนเมชน

- ไฟล APNG 1 ไฟลมความยาวไมเกน 4 วนาท

คมอส าหรบการสรางรปสตกเกอรแอนเมชนจ านวนเฟรมและจ านวนรอบส าหรบสตกเกอร 1 รป

คมอส าหรบการสรางรปสตกเกอรแอนเมชนจ านวนเฟรมและจ านวนรอบส าหรบสตกเกอร 1 รป

รปทไมใชสเรยบแตมการไลสมาก รปทมฉากหลงแบบเคลอนไหวเกนครงหนงของพนทแอนเมชน

รปทมแอนเมชนแบบละเอยดและกนพนทมาก เชน เปลวไฟ เสนจ านวนมาก ประกายวบวบ กลบดอกไม

คมอส าหรบการสรางรปสตกเกอรแอนเมชนตวอยางไฟล APNG ทจะไมมขนาดใหญเกนไป

ใชสแบบเรยบและมจ านวนสนอย

ใชเฟรมเดยวกนหลายครงในแอนเมชน

(เฟรมทมเครองหมาย คอ เฟรมทซ า)

วธการสรางพนทท างาน02 (Artboard)

วธการสรางพนทท างาน (Artboard)คลก --> File --> New หรอกด Ctrl + N1

2 ตงคา

Width = 320 px Height = 270 px Unit = PixelsColor Mode = RGB

วธการสรางพนทท างาน (Artboard)พนทการท างาน3

สวนประกอบของหนาจอ

03

Fileหมวดของค าสงทจดการเกยวกบไฟลและโปรแกรมทงหมด เชน เปด/ปดไฟล บนทกไฟล การน าภาพเขามาใช

Edit

Type

สวนประกอบของหนาจอแถบเมนค าสง (Menu bar)

หมวดของค าสงทจดการแกไข เชน Undo Cut Paste Select รวมทงการก าหนดคณสมบตตาง ๆ ทมผลตอการปรบแตงภาพ

หมวดของค าสงทใชจดการตวหนงสอ เชน Fonts Paragraph เปนตน

Select

หมวดของค าส งท ใช ในการเลอกวตถ สามารถเลอกดวยคณสมบตได เชน เลอกวตถทม Fill และ Stroke แบบเดยวกน

Effectหมวดของค าสงทใชสรางเทคนคพเศษใหกบภาพแตจะไมมผลกบรปรางของ Path View เกยวกบมมมองทกสงในงาน เชน Zoom

Window

สวนประกอบของหนาจอแถบเมนค าสง (Menu bar)

หมวดของค าส ง เกยวกบการเปด /ปดหนาตางเครองมอตาง ๆ

Help

หมวดทรวบรวมวธการใชงานและค าแนะน าเพอชวยเหลอผใชโปรแกรม

สวนประกอบของหนาจอ

คอนโทรพาเนล (Control Panel)

เปนแถบตวเลอกส าหรบก าหนดคาตางๆ ของวตถ เพออ านวยความสะดวกแกผ ใช ใหสามารถก าหนดคาส ขนาด ต าแหนง และคณสมบตตาง ๆ ของวตถทเลอกไดงายขน

พาเนลควบคมการท างาน (Panel)

เปนหนาตางยอยท รวบรวมคณสมบ ต การท า ง านของเครองมอตางๆ ให เราเลอกปรบแตงการใชงานไดงายๆ ไมต อ ง เ ป ดห า แถบค า ส ง ซ งพาเนลจะถกจดเกบไวในกรอบจดเกบพาเนลดานขวาของหนาจอ

สวนประกอบของหนาจอกลองเครองมอ (Tool Box)

เปนกลองทเกบรวบรวมเครองมอส าหรบการท างาน โดยจะแบงออก ตามลกษณะการท างานโดสามารถเรยกใชจากการกดทปมสามเหลยมดานมมขวาลาง เชน เครองมอกลมShape กจะประกอบไปดวยเครองมอวาดรปทรงแบบสเหลยม, สเหลยมมมโคง, และวงกลม เปนตน การเปด/ปดกลองเครองมอ ใชค าสง Windows > Tools

สวนประกอบของหนาจอ

พนทการท างาน (Artboard)

ใชวางพกวตถทยงไมไดใชงานในขณะนน

พนทภายนอก (Scratch area)

มลกษณะเปนกรอบส เหลยมสด าใชเปนพนทในการสรางและปรบแตงภาพจะมขนาดตามทก าหนดไวตอนทเราสรางไฟล

เครองมอ04

Selection Tool : ใชส าหรบเลอกวตถ

Direct Selection Tool : ใชส าหรบเลอกจด หรอ Path ของชนงาน

Magic Wand Tool : ใชส าหรบเลอกสเดยวกน

Lasso Tool : ใชส าหรบเลอกชนงาน แตใชวธคลกและลากเมาสคลมสวนทตองการแทนการเลอกชนงาน

เครองมอSelection Tool

Type Tool : ใชส าหรบเลอกจด หรอ Path ของชนงาน

Basic Shape Tool : ใชส าหรบสรางรปพนฐาน เชน สเหลยม วงกลม ดาว

Pencil Tool : ใชส าหรบสรางเสน ชวยในการปรบแตงแกไข

Eraser Tool : ใชส าหรบลบภาพ พน หรอเสนทไมตองการ

เครองมอCreate Tool

Pen Tool : ใชส าหรบสรางเสน Path โดยใชแขน ท าให Object มจดนอย

Line Segment Tool : ใชส าหรบลากเสนตรง

Paintbrush Tool : ใชส าหรบสรางเสน Path โดยการ Drag เมาสลากอยางอสระ

Blob Brush Tool : ใชส าหรบวาดภาพ สามารถวาดทบหรอตอกนได โดยงานจะออกมาเปนชนเดยวกน

Rotate Tool : ใชการหมนวตถ

เครองมอTransform Tool

Scale Tool : ใชส าหรบปรบ ยอ ขยายวตถ

Width Tool : ใชส าหรบปรบขนาดเสน

Free Transform Tool : ใชส าหรบหมน เปลยนขนาด หรอกลบทศทางวตถ

Shape Builder Tool : ใชส าหรบแกไขรปทรงของวตถ

Perspective Grid Tool : ใชส าหรบสรางภาพแบบ Perspective

Color Picker : จานสทผสมสเอาไวใชเอง โดยระบคาสหรอสมเลอกจากแถบสดานลาง เพอใหไดสใหม

เครองมอPalette

05

การน าภาพเขามาใช (Place)

การน าภาพเขามาใช (Place)

ทเลเยอร Image คลกเลอก File --> Place… เพอน าเขาไฟลน ามาใชงาน

จากนนเลอกไฟล Girl.jpg3 4

การน าภาพเขามาใช (Place)

จะไดไฟล Girl.jpg จากนนท าการ Toggles Lock เพอไมใหภาพท Import เคลอนทระหวางการสรางงาน5

การสรางตวละครดวยเครองมอ (Tool) ตาง ๆ06

1คลกเลอก Pen Tool (P) เพอวาดวตถทมการดดรปหรอมความโคงงอ

คลกหนงครงเพอสรางจดเรมตน จากนนคลกเมาสอกครงคางไวแลวลากเมาสไปตามความโคงทตองการ ท าแบบนไปจนถงจดเรมตนทสรางไว จะไดภาพวตถทตองการ

การสรางตวละครดวยเครองมอ (Tool) ตาง ๆ

2 จะไดภาพใบหนาของตวละครดงภาพ

การสรางตวละครดวยเครองมอ (Tool) ตาง ๆ

3 คลกเลอก Rectangle Tool (M) คางไวโดยเลอนเมาสไปชท Ellipse Tool (L) เพอวาดรปวงกลมเปนดวงตาของตวละครดงภาพ

การสรางตวละครดวยเครองมอ (Tool) ตาง ๆ

23*23 12*12 6*6

4 คลกเลอกท Selection Tool (V) เลอกวตถรปวงกลมทเปนดวงตาทงหมดของตวละคร ท าการ Copy และจดเรยงใหตรงตามเสนประทก าหนดไว

การสรางตวละครดวยเครองมอ (Tool) ตาง ๆ

5 คลกเลอก Ellipse Tool (L) เพอสรางวงกลมขนาด 16*16 และเลอก Rectangle Tool (M)เพอสรางรปสเหลยมขนาด 19*8

การสรางตวละครดวยเครองมอ (Tool) ตาง ๆ

ไปท Pathfinder เลอก Minus Front เพอตดวตถทง 2 ชนใหไดดงภาพ

6

16*16 19*8

9 ท าการ Copy วตถรปทรงปากของตวละครจากนนสรางวงกลมขนมา 1 อนขนาด 10*10 น ามาวางซอนกนดงภาพและท าการลบวตถรปสเหลยมทง

การสรางตวละครดวยเครองมอ (Tool) ตาง ๆ

ไปท Pathfinder เลอก Intersect เพอตดวตถทง 2 ชน และท าการเลอนวตถมาวางใหสวยงามดงภาพ

10

11 เปลยนชอจาก Layer 1 เปน Face และ Create New Layer ตงชอวา Hair

การสรางตวละครดวยเครองมอ (Tool) ตาง ๆ

12 ใชเครองมอ Pen tool ในวาดรปผมดานหลงของตวละครขนมาดงภาพ

การสรางตวละครดวยเครองมอ (Tool) ตาง ๆ

13 Create New Layer ตงชอวา HairBow และใชเครองมอ Pen tool ในวาดรปโบวขนมาดงภาพ

การสรางตวละครดวยเครองมอ (Tool) ตาง ๆ

14 ใชเครองมอ Pen tool ในการวาดรปทรงตางๆดงภาพ โดยแยก Layer (คอ, เสอ, กระโปรง, แขน, ขา)

การสรางตวละครดวยเครองมอ (Tool) ตาง ๆ

15 จะไดตวละครทสมบรณดงภาพ

การสรางตวละครดวยเครองมอ (Tool) ตาง ๆ

07

การใสสวตถ

การใสสวตถการลงสดวย Color Picker

1 2คลกเลอกวตถทสรางไวจากนน ดบเบลคลกท Color Picker เพอเลอกส จากนนกดปม OK

การใสสวตถการลงสดวย Eyedropper Tool

1

2

คลกเลอกวตถทสรางไวจากนน

เลอกใชเครองมอ Eyedropper Tool จมทสทตองการ

วตถทถกเลอกจะเปลยนส3

การใสขอความ08

การใสขอความการใสขอความดวย Type Tool

เลอกเครองมอ Type Tool (T) ใสขอความทตองการ

09

ขนาดของสตกเกอรไลน

ขนาดของสตกเกอรไลนรปภาพหลก

จ านวน 1 รป

ขนาด (Pixel) 240*240

ขนาดของสตกเกอรไลนรปภาพหลก

จ านวน 8 รป, 16 รป 24 รป, 32 รป, 40 รป

ขนาด (Pixel) 320*270

ขนาดของสตกเกอรไลนรปภาพแทบหองแชท

จ านวน 1 รป

ขนาด (Pixel) 96*74

การ Save ไฟลงาน10

การ Save ไฟลงาน

เลอกเมน File > Save As… ตงชอ File Name เปน Character.ai จากนนกดปม Save 1 2

11

การ Export ตวละคร

การ Export ตวละคร

เลอกเมน File > Export… ตงชอ File Name เปน Girl01 เลอกนามสกลเปน .pngจากนนกดปม Save

1 2

การ Export ตวละคร

โปรแกรม APNG Anime Maker 12

โปรแกรม APNG Anime Maker

APNG Anime Maker คอ โปรแกรมทจะสรางไฟลภาพเคลอนไหว PNG ใสตวเลขในกลอง คลก "มลลวนาท" หรอ "เฟรมตอวนาท" เพอตงหนวงเวลาส าหรบเฟรมทเลอก สามารถตงคาทงหมดน าไปใชกบทกเฟรม Offset เปน X และ Y ต าแหนงทจะท าใหภาพทเลอกเพม X และ Y

โปรแกรม APNG Anime Maker

หนาตาโปรแกรม

โปรแกรม APNG Anime Maker

คลก Save สรางโฟลเดอรเพอเกบไฟลภาพเคลอนไหว ตงชอไฟลและกด Save3

การอปโหลดสตกเกอร

13

อปโหลดสตกเกอร

LINE Creators Studio LINE Creators Market

อพโหลดสตกเกอรLine Creators Studio

อพโหลดสตกเกอรLine Creators Studio

ยนค าขอใหพจารณา

เชคสตกเกอรบนหนาดตวอยางแลว

จงยนค าขอใหพจารณา

รอการพจารณาเมอเสรจสนการพจารณา

คณจะไดรบการตดตอจากบญชทางการ LINE Creators Market ทางขอความแชทและอเมล>

อพโหลดสตกเกอรLine Creators Studio

เรมจ าหนาย

เมอสตกเกอรเปลยนสถานะเปน “อนมต ”

คณจะเรมจ าหนายสตกเกอรท LINE STORE

และรานสตกเกอรในแอพได

แนวทางการสรางสตกเกอร14

แนวทางการสรางสตกเกอรรปภาพหลก

จ านวน 1 รป

ขนาด (พกเซล) 240 * 240

แนวทางการสรางสตกเกอรรปสตกเกอร

จ านวน 8, 16, 24, 32, 40 รป

ขนาด (พกเซล) 370 * 320

แนวทางการสรางสตกเกอรรปภาพแทบหองแชท

จ านวน 1 รป

ขนาด (พกเซล) 96 * 74

ขนตอนการดาวนโหลด

15

IOS

ขนตอนการดาวนโหลดแบงออกเปน 2 ระบบ

Android

1

ขนตอนการดาวนโหลดIOS

เขาไปท App Store คนหา LINE Creators Studio จากนน กดตดตง

2

1

ขนตอนการดาวนโหลดAndroid

เขาไปท Play Store คนหา LINE Creators Studio จากนน กดตดตง

2

ขนตอนการเขาใช16 LINE Creator Studio

ขนตอนการเขาใช LINE Creator Studio

เปดแอพ LINE Creators Studio

เขาสระบบดวยบญช LINE

สรางสตกเกอร

ยนค าขอใหพจารณาสตกเกอร

12

3

4

ขนตอนการเขาใช LINE Creator Studioเปดแอพ LINE Creators Studio

ขนตอนการเขาใช LINE Creator Studioเขาสระบบดวยบญช LINE

1 2

ขนตอนการเขาใช LINE Creator Studioเขาสระบบดวยบญช LINE

3

กด “ตกลง” เพอยอมรบขอก าหนด การใชบรการ LINE Creator Studio

กด “ตกลง” เพอยนยนการใชบรการ LINE Creator Market

4

ขนตอนการสรางสตกเกอร

17

ขนตอนการสรางสตกเกอร

เลอกรปภาพ

ตดรปใหเหลอเฉพาะสวนทตองการ

แตงรปโดยใสขอความหรอสตกเกอร

บนทก

12

3

4

เครองมอและเมนในการสรางสตกเกอร

18

ขนตอนการสรางสตกเกอร

เลอกรปภาพ

ตดรปภาพ

ตกแตงรปภาพ

12

3

วธการท าสตกเกอร

19

ตวอยางท 1

วธการท าสตกเกอร

วธการท าสตกเกอร

แตะ + เพอเรมสราง

ตงชอสตกเกอร

และค าอธบาย

แตะ + เพอสราง1 2 3

เครองมอและเมนในการสรางสตกเกอร

ใชรปจากอลบม

วาดรป

ถายรป

เครองมอและเมนในการสรางสตกเกอรรปทรง

เครองมอและเมนในการสรางสตกเกอรการปรบรป

ปรบขนาดและมมของรปภาพ

เครองมอและเมนในการสรางสตกเกอรกรอบรป

เครองมอและเมนในการสรางสตกเกอรตดรป

เครองมอและเมนในการสรางสตกเกอรลากเสน

เครองมอและเมนในการสรางสตกเกอรยางลบ

เครองมอและเมนในการสรางสตกเกอรตกแตงรปภาพ

เครองมอและเมนในการสรางสตกเกอรใสขอความ

เครองมอและเมนในการสรางสตกเกอรใสฟลเตอร

เครองมอและเมนในการสรางสตกเกอรการตกแตงรปภาพ

เครองมอและเมนในการสรางสตกเกอรการใสสตกเกอร

วธการท าสตกเกอรบนทก

It could be the part of the presentation where you can introduce yourself, write your email…

20LINE Creators Market

LINE Creators Market

• เพยงแคลงทะเบยนดวยบญช LINE ของคณ LINE Creators Marketเปดรบผลงานจากทกคน โดยไมเกยงอายหรออาชพ

• สามารถสรางสรรคสตกเกอร ไดทงแบบอนเมชน อโมจ และธมเพอจ าหนายท LINE STORE ครเอเตอรจะไดรบสวนแบง 35% จากยอดขายสตกเกอรและธม (หลงหกคาธรรมเนยม 30% ของ Apple Google หรออนๆ)

LINE Creators Market

LINE Creators Market

LINE Creators Market

LINE Creators Market

LINE Creators Market

LINE Creators Market

LINE Creators Market

LINE Creators Market

LINE Creators Market

LINE Creators Marketขนาดการอปโหลดรป

รปภาพหลก

- จ านวน 1 รป

- กวาง 240 px สง 240 px

LINE Creators Marketขนาดการอปโหลดรป

- รปสตกเกอร (เลอก)

- 8 รป, 16 รป, 24 รป, 32 รป, 40 รป

- กวาง 320 px สง 270 px (สงสด)

LINE Creators Marketขนาดการอปโหลดรป

- รปภาพแทบหองแชท

- จ านวน 1 รป

- กวาง 96 px สง 74 px

LINE Creators Marketขนาดการอปโหลดรป

LINE Creators Marketขนาดการอปโหลดรป

LINE Creators Marketขนาดการอปโหลดรป

LINE Creators Marketขนาดการอปโหลดรป

30%

Google Play

35% 35%

ใบก ากบภาษ

ใบก ากบภาษ

Statistics21

Statistics

THANKYOU

จดท าโดย ภาควชาคอมพวเตอรศกษา คณะครศาสตรอตสาหกรรม มหาวทยาลยเทคโนโลยพระจอมเกลาพระนครเหนอ

โครงการรวมมอระหวาง CDG Code Their Dreams x CED KMUTNB