Báo Cáo Gi A Kì

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG
KHOA ĐA PHƯƠNG TIỆN

--------------------
BÁO CÁO
HỌC PHẦN THAY THẾ TỐT NGHIỆP
Đề tài: Nghiên cứu và Thiết kế đồ họa tĩnh cho bộ icon
"Fox Animated"
Giảng viên hướng dẫn: ThS. Trần Quốc Trung
Sinh viên thực hiện: Hoàng Nông Điện Biên – B18DCPT029
Khóa: 2018-2023
Hệ đào tạo: Đại học chính quy
HÀ NỘI - 2022
GVHD: Ths. Trần Quốc Trung

SVTH: Hoàng Nông Điện Biên
1
LỜI CẢM ƠN
Để có thể hoàn thành tốt đố án tốt nghiệp cuối năm lần này, trước tiên, em xin được
cảm ơn tất cả các thầy, các cô đang giảng dạy tại Học viện Công nghệ Bưu chính Viễn
thông, và đặc biệt hơn là các thầy cô khoa Đa Phương Tiện đã tận tình chỉ bảo hướng
dẫn em trong suốt những năm học vừa qua.
Đặc biệt hơn, em xin được bày tỏ sự biết ơn sâu sắc đến thầy Trần Quốc Trung, người
đã truyền cảm hứng, luôn hỗ trợ, giúp đỡ, tận tình chỉ bảo em để em có thể hoàn thành
tốt đồ án tốt nghiệp nói riêng, cũng như trong suốt quá trình học tập tại Học viện nói
chung.
Em cũng xin gửi lời cảm ơn chân thành tới gia đình, người thân và bạn bè, những người
đã luôn sát cánh động viên, hỗ trợ em trong quãng thời gian vừa qua.
Lời cuối cùng, em kính chúc các thầy cô giáo và gia đình luôn có sức khỏe dồi dào và
càng đạt được nhiều thành công hơn trong sự nghiệp cao quý!
Em xin chân thành cảm ơn!
Hà Nội, ngày tháng năm

Sinh viên thực hiện
Hoàng Nông Điện Biên

2
MỤC LỤC
LỜI CẢM ƠN 2
MỤC LỤC 3
DANH MỤC CÁC KÍ HIỆU VÀ CHỮ VIẾT TẮT 4
DANH MỤC THUẬT NGỮ 4
TUẦN 1( TỪ 17/10-24/10): TÌM VÀ NGHIÊN CỨU QUY CHUẨN 01 BỘ
ICON ĐỘNG TRÊN MẠNG XÃ HỘI 5
1.1.. Định nghĩa bộ icon động (animated sticker) 5
1.2. Cách tạo bộ icon động 5
1..2.1. Frame by frame 5
1.2.2. Sử dụng các phần mềm tạo chuyển động 7
1.3. Một số bộ icon động trên mạng xã hội 8
1.4. Quy chuẩn của một bộ icon động trên một số mạng xã hội 9
1.5. Những điều cần lưu ý cho bộ icon động 10
TUẦN 2 (TỪ 24/10-31/10): MOODBOARD PHÁT TRIỂN Ý TƯỞNG 11

2.1. Ý nghĩa và vai trò của Moodboard 11
2.2. Cách tạo bảng Moodboard 11
2.3. Tạo bảng Moodboard 13
TUẦN 3 (31/10- 7/11): LÊN Ý TƯỞNG PHÁC THẢO BỘ ICON ĐỘNG 15
TUẦN 4 (29/11- 5/12 ): LÊN Ý TƯỞNG PHÁC THẢO BỘ ICON
ĐỘNG 18
TUẦN 5 (TỪ 14/11- 21/11 ): HOÀN THÀNH KỊCH BẢN
CHUYỂN ĐỘNG VÀ ICON 20

3
DANH MỤC CÁC KÍ HIỆU VÀ CHỮ VIẾT TẮT
2D: Two Dimension 2 chiều
AI: Phần mềm Adobe Illustrator
AE: Phần mềm Adobe After Effect
FBF: Frame by frame Dạng các khung hình liên tiếp nhau để
tạo ra được hình ảnh chuyển động
DANH MỤC THUẬT NGỮ
Thuật ngữ Giải thích
Sticker Nhãn dán
Keyword Từ khóa
Concept Phác thảo ý tưởng
Moodboard Bảng ý tưởng

4
TUẦN 1 ( TỪ 17/10-24/10): TÌM VÀ NGHIÊN CỨU QUY CHUẨN 01 BỘ

ICON ĐỘNG TRÊN MẠNG XÃ HỘI
STT Nội dung làm việc

1 Tìm và nghiên cứu định nghĩa bộ icon động
2 Các cách tạo bộ icon động, một số bộ icon
động trên MXH
3 Quy chuẩn của 1 bộ icon động
1.1. Định nghĩa về bộ icon động

Icon động là một loại tính năng trên các trang mạng xã hội, người dùng sử dụng
những nhãn dán hoạt hình có chuyển động lặp đi lặp lại để giao tiếp cũng như thể hiện
bản thân với người thân và bạn bè xung quanh.
Icon động là một trong những yếu tố quan trọng trong việc giao tiếp đối với
mọi người, khi mà con người khó có thể gặp mặt trực tiếp với nhau, thì icon động sẽ
giúp những cuộc hội thoại trở nên thoải mái và gần gũi hơn.
1.2. Cách tạo bộ icon động
Hiện nay, các bộ icon động trên mạng xã hội được thực hiện theo nhiều cách, ví
dụ như:
1.2.1. Frame by frame
Là icon động dạng vẽ hoàn toàn bằng tay các chuyển động, mỗi icon động sẽ có
khoảng từ 5-20 khung hình xuất hiện liên tục để tạo chuyển động. Bộ icon động
dạng FBF sẽ được lưu dưới dạng tệp PNG (nền trong suốt) .
Ưu điểm của dạng FBF là có thể tạo ra những chuyển động linh hoạt và mềm
mại, không phải lo lắng về các góc xoay khó. Nhưng điều này sẽ phải đỏi hỏi
người hoạ sĩ sẽ phải vẽ rất tỉ mỉ và mất rất nhiều thời gian để có thể hoàn thành
xong một icon động.

5
Hình 1.1: Các khung hình để tạo chuyển động trong 1 icon
● Nguyên tắc tạo sticker Frame by frame (theo LINE)

1. Thời gian phát lại tối đa cho một nhãn dán riêng lẻ là 4 giây. Các tùy
chọn thời gian phát lại được giới hạn trong 1, 2, 3 hoặc 4 giây. Không
cho phép thời gian phát lại không phải số nguyên, chẳng hạn như 1,5
giây.
2. Giới hạn khung hình PNG cho mỗi APNG: Từ 5 đến 20 khung hình.
3. Khi tạo tệp APNG bằng công cụ tạo như APNG Assembler, các hình ảnh
giống hệt nhau lặp đi lặp lại có thể được kết hợp thành một khung hình
duy nhất.
4. Các tệp sử dụng cùng một dữ liệu cho tất cả các khung sẽ không hoạt
động bình thường như hình dán động và dẫn đến lỗi tải lên.
5. Tổng thời gian phát lại cho một APNG không được vượt quá 4 giây.
Hình 1.2: Hình ảnh miêu tả nguyên tắc tạo icon động theo FBF
6
1.2.2. Sử dụng các phần mềm tạo chuyển động 2D và 3D: Adobe After Effect,
Blender, C4D, Maya,...
Khi lựa chọn cách này, chúng ta sẽ tiết kiệm được nhiều thời gian hơn. Người
thiết kế icon động chỉ cần tách khớp của nhân vật, sau đó đưa vào các phần mềm
để tạo các chuyển động mong muốn.
Hình 1.3: Bộ icon động Tyrannosaurus Rex - Telegram Animated Stickers

7
1.3. Một số bộ icon động trên mạng xã hội
- Bộ sticker Chin&Su chim Lạc và sâu Xanh do người Việt Nam thiết kế, cụ thể
là do đội ngũ của studio Sticky Monkey đã mất 5 tháng để thực hiện
Hình 1.4: Bộ sticker Chin&Su do Sticky Monkey thiết kế theo dạng Fram by frame

8
1.4. Quy chuẩn của bộ icon động trên một số mạng xã hội
- 1 bộ sticker động bao gồm 10-20 sticker,

- Định dạng file: File PNG (nền trong suốt), TGS, APNG tuỳ vào nền tảng sử
dụng.
- FPS (Frame per second): 5-60 frame/sticker tuỳ vào nền tảng sử dụng.
- Kích thước: 16x16, 32x32, 240x240, 512x512,... tuỳ vào yêu cầu của nền tảng
sử dụng.
- Thời gian: dưới 4 giây.
- Hình dán động phải có khả năng truyền tải cảm xúc hoặc ý tưởng không chỉ
thông qua hoạt ảnh mà còn thông qua hình ảnh tĩnh của chúng.
- Đảm bảo rằng khung đầu tiên của mỗi hình dán của bạn, được sử dụng làm hình
ảnh tĩnh của miếng dán, mô tả phù hợp cảm giác mà bạn muốn mỗi hình dán thể
hiện.

9
1.5. Những điều cần lưu ý cho bộ icon động

● Các bộ icon động được để xuất
- Nhãn dán dễ sử dụng trong hội thoại và giao tiếp hàng ngày.
- Nhãn dán bao gồm các cảm xúc, thông điệp và hình ảnh minh họa dễ
hiểu.
● Các bộ sticker không được đề xuất
- Các nhãn dán khó sử dụng trong cuộc trò chuyện hàng ngày, chẳng hạn
như đồ vật và phong cảnh.
- Hình dán có khả năng hiển thị kém, chẳng hạn như hình ảnh quá dài hoặc
hình minh họa dài đầy đủ các nhân vật cao.
- Các bộ thiếu sự đa dạng
- Nội dung vi phạm trật tự công cộng và đạo đức, khêu gợi uống rượu hoặc
hút thuốc khi chưa đủ tuổi, chứa hình ảnh khiêu dâm hoặc bạo lực hoặc
có thể kích động chủ nghĩa dân tộc.

10
TUẦN 2 (TỪ 24/10-31/10): MOODBOARD PHÁT TRIỂN Ý TƯỞNG
STT Nội dung công việc

1 Tham khảo về vai trò và ý nghĩa của Moodboard
2 Tạo bảng moodboard
2.1. Ý nghĩa và vai trò của Moodboard
● Định nghĩa: Moodboard có nghĩa là các bảng tâm trạng (kỹ thuật số hoặc tài
liệu) mà mọi người kết hợp các hình ảnh, kết cấu khác nhau để người xem có
thể hình dung ý tưởng và concept. Hay nói một cách đơn giản hơn, Moodboard
là một bảng với những tấm ảnh được sử dụng trong ngành thiết kế để trình bày
một dự án đến nhà đầu tư tiềm năng hoặc đơn giản là truyền đạt ý tưởng của
nhà thiết kế.
● Vai trò:
○ Tiết kiệm thời gian thiết kế, không mất nhiều thời gian để làm một bản
trình bày cầu kỳ.
○ Moodboard có thể khiến các nhà thiết kế dễ dàng tìm hiểu thị hiếu, sở
thích của khách hàng.
○ Từ bảng Moodboard có thể giúp khách hàng hình dung được ngôn ngữ
và phong cách thiết kế.
2.2 Các cách tạo Moodboard
2.2.1. Sử dụng bảng mẫu

Những moodboard này giống như prototype và wireframe. Mục tiêu của họ là để hiển thị cấu
trúc và phân cấp hình ảnh của một sản phẩm. Sự khác biệt là các phần tử giao diện người dùng
trên một bảng mẫu không được mô tả chi tiết như trong các prototype hoặc sơ đồ như trong các
wireframe.

11
Các thành phần được hiển thị thông qua hình ảnh minh họa ngẫu nhiên và hình ảnh trình bày bố cục
của một sản phẩm kỹ thuật số. Ngoài ra, hình ảnh có thể được chọn theo cách đó để dễ dàng nhận ra
bảng màu tương ứng. Phương pháp này nhanh hơn prototype bởi vì nó không yêu cầu chi tiết.
2.2.2. Tham khảo các bộ sưu tập có sẵn
Tham khảo các bộ sưu tập là một nguồn cảm hứng khác và một phương pháp hiệu quả cho nhà
thiết kế để hiển thị ý tưởng. Có rất nhiều tài nguyên như Behance và Dribbble, nơi các nhà thiết
kế có thể tìm thấy các concept đầy cảm hứng. Bộ sưu tập các tác phẩm thiết kế được thống nhất
bởi một phong cách chung hoặc bất kỳ tính năng nào khác có thể dễ dàng minh họa ý tưởng cho
một dự án mới. Hơn nữa, moodboard như vậy giúp khách hàng dễ dàng hiểu một concept bởi vì
họ có thể thấy các tài liệu tham khảo các sản phẩm tương tự.

12
2.2.3. Cắt ghép tự do
Nhà thiết kế thường thu thập ảnh có độ phân giải cao miễn phí để họ có thể sử dụng tài liệu
trong các dự án trong tương lai hoặc ở nơi khác. Những bộ sưu tập này có thể có ích cho việc
tạo moodboard. Ảnh ghép miễn phí bao gồm các bức ảnh đẹp là một cách hiệu quả để thể hiện
tâm trạng thông qua chúng.
Ngoài ra, ảnh ghép có thể được làm đầy với các ví dụ minh hoạ, phông chữ và màu sắc. Đây là
loại bảng tâm trạng là nhanh nhất và dễ nhất trong số những người khác. Tuy nhiên, nếu một
khách hàng định hướng chi tiết, họ có thể không vui mừng với một ảnh ghép miễn phí làm ví dụ
về một dự án trong tương lai.
2.3 Tạo bảng Moodboard

• Đối tượng hướng đến:
• Các bạn trẻ lứa tuổi học sinh, sinh viên từ 13 cho đến 24 tuổi
• Những cặp đôi yêu nhau
• Những người trong gia đình cũng có thể dùng khi giao tiếp với nhau
• Keyword: dễ thương, tròn, con cáo
• Màu sắc chủ đạo:
• Màu vàng: mang đến sự năng động, nhiệt huyết,những tư tưởng sáng tạo, luôn
trở mình và thay đổi không ngừng nghỉ. Màu vàng cũng là màu của ánh nắng,
niềm tin và sức mạnh, thể hiện sự lạc quan, tích cực, nhẹ nhàng, ấm áp, sự
sáng tạo và sinh lực.
• Màu hồng :mang đến là tình yêu đôi lứa, là sự hạnh phúc giữa người với người.
“Cuộc đời màu hồng” hay “tình yêu màu hồng” đều được sử dụng khá phổ biến
hiện nay. Ngoài ra sắc màu này còng là biểu tượng của sự suôn sẻ, mọi chuyện
đều diễn ra như mong ước của con người trong cuộc sống.
• Màu trắng: Là màu sắc có đặc tính mang lại sự bình tĩnh, thoải mái và hy vọng,
vì nó là màu sắc tinh khiết và hoàn thiện nhất. Đó là màu đại diện cho sự tươi
sáng. Nó giống như một mảnh giấy trắng chưa được viết. Nó để tâm trí cởi mở và
tự do với bất cứ điều gì nó có thể tạo ra trên đường đi.
• Phong cách thiết kế các nhân vật: Dạng Flat design kết hợp line.

13
Bảng moodboard
Giải pháp thiết kế

- Sử dụng phần mềm Adobe Photoshop để thực hiện phác thảo ý tưởng.
- Adobe Illustrator cho thiết kế hoàn chỉnh và tách layer.

14
TUẦN 3 (TỪ 31/10- 7/11 ): LÊN Ý TƯỞNG PHÁC THẢO

BỘ ICON ĐỘNG
STT Nội dung công việc
1 Phác thảo ý tưởng icon động
2 Thiết kế AI
Tổng hợp hình ảnh tham khảo

Tìm kiếm và tổng hợp các ý tưởng cho biểu cảm, hành động trên các trang mạng
Hình 3.1: Hình ảnh tham khảo

15
Hình 3.2: Bản thiết kế đầu tiên
• Bản sketch lấy hình ảnh con cáo làm chủ đạo
• Chú cáo sẽ mặc thêm trang phục để icon thú vị, bớt đơn điệu
• Thêm nhiều nét tròn để tạo sự dễ thương
bản sketch

16
Bản lên màu

17
TUẦN 4 (TỪ 7/11- 14/11 ): BẮT ĐẦU LÊN KỊCH BẢN

VÀ VẼ CÁC ICON ĐẦU TIÊN
-Thả tim
• Cáo ôm trái tim đưa lên trước mặt, đằng sau có hiệu ứng trái tim và ngôi sao
nhấp nháy nổi lên
-Vỗ tay
• 2 Nhân vật vỗ tay, xung quanh có hiệu ứng tỏa ra, đuôi nhân vật lắc qua lại 2
bên
-Xin chào
18
• Nhân vật cầm bảng hiệu ghi chữ “xin chào” lắc qua lắc lại, hiệu ứng chói lóa nổi
bật xzung quanh
-Khóc:
• Nhân vật khóc 2 hàng nước mắt chảy ra, 2 tay nhân vật dụi dụi mắt, mồm
chuyển động mếu, đuôi lắc qua lại

19
TUẦN 5 (TỪ 14/11- 21/11 ): HOÀN THÀNH KỊCH BẢN CHUYỂN ĐỘNG
VÀ ICON
STT Tên Kịch bản chuyển động Sketch AI
1 Khóc +Nhân vật lấy 2 tay dụi

mắt
+2 hàng nước mắt chảy

sang 2 bên
+Đuôi và 2 tai lắc qua lại
2 Thả tim +Trái tim chuyển động

phóng to thu nhỏ
+Ngôi sao đằng sau lấp

lánh
+Tai và đuôi lắc qua lắc

lại
3 Thẹn thùng +2 tay nhân vật chuyển

động chụm lại
+ Tai và đuôi lắc qua lại
+ mắt long lanh, ria mép

chuyển động lên xuống
4 Đồng ý +Tay nhân vật giơ ra,

đầu gật gật biểu thị sự
đồng tình
+Chữ OK hiện ra ở bên

cạnh kèm theo hiệu ứng
lấp lánh
+Đuôi và tai nhân vật lắc

qua lại

20
5 Hỏi chấm +Đầu nhân vật nghiêng

Khó hiểu qua lại
+Tai và đuôi lắc qua lại
+Các dấu hỏi chấm lắc

qua lại
6 Lè lưỡi +Nhân vật lè lưỡi, lưỡi

trêu đùa chuyển động
+2 tay chuyển động lên

xuống
7 Sốt +2 tai lắc qua lại
+đầu nhân vật chuyển

động lên xuống biểu thị
nhân vật đang hít thở
sâu
+ hình tròn quay chầm

chậm
8 Vỗ tay +2 tay vỗ vào nhau
+ hiệu ứng tia sáng bắt

ra từ tay
+ngôi sao lấp lánh xung

quanh

21
9 Xin chào +Nhân vật giơ bảng có

chữ “ HELLO” lên, tay
còn lại vẫy qua lại
+ hiệu ứng tia sáng bắt

ra từ bảng
10 Chạy +Tay nhân vật chuyển

deadline động lên xuống và
chuyển động qua 2 bên
+Chữ “deadline” hiện lên

đằng sau
+Giấy tờ bay lung tung

đằng sau
11 Chúc +Nhân vật nam bắn

mừng sinh pháo giấy, hiệu ứng
nhật pháo giấy bay lung tung
+Nhân vật nữ cầm bánh,

hiệu ứng ngọn lửa từ cái
nến chuyển động qua lại
+Ruy băng có chữ

“HPBD” rơi từ trên
xuống
12 Cảm ơn +Nhân vật cúi đầu
+2 tay chuyển động lên

xuống
+Hiệu ứng hoa scale to

nhỏ, xoay tròn
+Chữ “ thank you” chạy

từ trái qua giữa màn
hình
22

23

Báo Cáo Gi A Kì

Uploaded by

Copyright:

Available Formats

You might also like

Báo Cáo Gi A Kì

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Báo Cáo Gi A Kì

Uploaded by

Copyright:

Available Formats

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

KHOA ĐA PHƯƠNG TIỆN

Giảng viên hướng dẫn: ThS. Trần Quốc Trung

Sinh viên thực hiện: Hoàng Nông Điện Biên – B18DCPT029

Hệ đào tạo: Đại học chính quy

GVHD: Ths. Trần Quốc Trung

Em xin chân thành cảm ơn!

Hà Nội, ngày tháng năm

GVHD: Ths. Trần Quốc Trung

TUẦN 2 (TỪ 24/10-31/10): MOODBOARD PHÁT TRIỂN Ý TƯỞNG 11

GVHD: Ths. Trần Quốc Trung

DANH MỤC CÁC KÍ HIỆU VÀ CHỮ VIẾT TẮT

2D: Two Dimension 2 chiều

AI: Phần mềm Adobe Illustrator

AE: Phần mềm Adobe After Effect

DANH MỤC THUẬT NGỮ

Thuật ngữ Giải thích

Sticker Nhãn dán

Concept Phác thảo ý tưởng

Moodboard Bảng ý tưởng

GVHD: Ths. Trần Quốc Trung

TUẦN 1 ( TỪ 17/10-24/10): TÌM VÀ NGHIÊN CỨU QUY CHUẨN 01 BỘ

STT Nội dung làm việc

1.1. Định nghĩa về bộ icon động

1.2. Cách tạo bộ icon động

1.2.1. Frame by frame

GVHD: Ths. Trần Quốc Trung

● Nguyên tắc tạo sticker Frame by frame (theo LINE)

Hình 1.3: Bộ icon động Tyrannosaurus Rex - Telegram Animated Stickers

GVHD: Ths. Trần Quốc Trung

1.3. Một số bộ icon động trên mạng xã hội

GVHD: Ths. Trần Quốc Trung

- 1 bộ sticker động bao gồm 10-20 sticker,

GVHD: Ths. Trần Quốc Trung

1.5. Những điều cần lưu ý cho bộ icon động

GVHD: Ths. Trần Quốc Trung

TUẦN 2 (TỪ 24/10-31/10): MOODBOARD PHÁT TRIỂN Ý TƯỞNG

STT Nội dung công việc

2 Tạo bảng moodboard

2.1. Ý nghĩa và vai trò của Moodboard

2.2 Các cách tạo Moodboard

2.2.1. Sử dụng bảng mẫu

GVHD: Ths. Trần Quốc Trung

2.2.2. Tham khảo các bộ sưu tập có sẵn

GVHD: Ths. Trần Quốc Trung

2.2.3. Cắt ghép tự do

2.3 Tạo bảng Moodboard

GVHD: Ths. Trần Quốc Trung

Giải pháp thiết kế

GVHD: Ths. Trần Quốc Trung

TUẦN 3 (TỪ 31/10- 7/11 ): LÊN Ý TƯỞNG PHÁC THẢO

Tổng hợp hình ảnh tham khảo

Hình 3.1: Hình ảnh tham khảo

GVHD: Ths. Trần Quốc Trung

Hình 3.2: Bản thiết kế đầu tiên

GVHD: Ths. Trần Quốc Trung

Bản lên màu

GVHD: Ths. Trần Quốc Trung