การสร้าง 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)


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

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


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

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

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

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

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

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


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


23*23 12*12 6*6

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


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


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

6

16*16 19*8

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


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

10

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


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


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


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


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


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 รป


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



การ Save ไฟลงาน10

การ Save ไฟลงาน

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

11

การ Export ตวละคร


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

1 2


โปรแกรม APNG Anime Maker 12

โปรแกรม APNG Anime Maker

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


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


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

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

13

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

LINE Creators Studio LINE Creators Market

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


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

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

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

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

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


เรมจ าหนาย

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

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

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

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

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


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

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

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


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



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

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ขนาดการอปโหลดรป

รปภาพหลก

- จ านวน 1 รป

- กวาง 240 px สง 240 px


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

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

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


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

- จ านวน 1 รป

- กวาง 96 px สง 74 px





30%

Google Play

35% 35%

ใบก ากบภาษ

ใบก ากบภาษ

Statistics21

Statistics

THANKYOU

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

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

Documents

การสร้าง Sticker Line เรียน ...€¦ · ในเฟรมสุดท้ายว่า "ขอบคุณ" ก็ขอให้น ารูปใน