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

DANH MỤC CÁC KÍ HIỆU VÀ CHỮ VIẾT TẮTPhần mềm Adobe After Effect Dạng các khung hình liên tiếp nhau để tạo ra được hình ảnh chuyển động... Định nghĩa về bộ icon động Icon động là một loạ

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

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

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

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

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

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

T UẦN 4 (29/11- 5/12 ): LÊN Ý TƯỞNG PHÁC THẢO BỘ ICON

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

Phần mềm Adobe After Effect

Dạng các khung hình liên tiếp nhau

để tạo ra được hình ảnh chuyển động

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

2 Các cách tạo bộ icon động, một số bộ icon động trên MXH

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

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 xon g một icon động.

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

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

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

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.

60 frame/sticker tuỳ vào nền tảng sử dụng.

- FPS (Frame per second):

5 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.

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.

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

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ế

○ 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.

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ự.

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:

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ẹ

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.

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.

BỘ ICON ĐỘNG

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

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

Bản lên màu

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

• 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

TUẦN 5 (TỪ 14/11- 21/11 ): HOÀN THÀNH KỊCH BẢN CHUYỂN ĐỘNG

+Đuôi và 2 tai lắc qua lại

2 Thả tim +Trái tim chuy n động

3 Thẹn thùng +2 tay nhân vật chuy n động chụm 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

GVHD: Ths Trần Quốc Trung

SVTH: Hoàng Nông Điện Biên

20

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

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

+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

8 Vỗ tay +2 tay vỗ vào nhau

+ngôi sao lấp lánh xung

quanh

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

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

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

chuyển động qua 2 bên

+Chữ “deadline” hiện lên

sinh nhật pháo giấy, hiệu ứng

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 +Tai và đuôi lắc qua lại

+Ruy băng có chữ

“HPBD” rơi từ trên xuống

+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

GVHD: Ths Trần Quốc Trung

SVTH: Hoàng Nông Điện Biên