Thông tin tài liệu
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 Thiết kế đồ họa tĩnh cho icon "Fox Animated" Giảng viên hướng dẫn: ThS Trần Quốc Trung Sinh viên thực hiện: Hồng Nơng Điện Biên – B18DCPT029 B18DCPT029 Khóa: 2018-2023 Hệ đào tạo: Đại học quy HÀ NỘI - 2022 HỌC PHẦN THAY THẾ TỐT NGHIỆP GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên HỌC PHẦN THAY THẾ TỐT NGHIỆP LỜI CẢM ƠN Để hồ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ảm ơn tất thầy, cô giảng dạy Học viện Cơng nghệ Bưu Viễn thơng, đặc biệt thầy cô khoa Đa Phương Tiện tận tình bảo hướng dẫn em suốt năm học vừa qua Đặc biệt hơn, em xin bày tỏ biết ơn sâu sắc đến thầy Trần Quốc Trung , người truyền cảm hứng, ln hỗ trợ, giúp đỡ, tận tình bảo em để em có thể hồn thành tốt đồ án tốt nghiệp nói riêng, cũng như trong suốt q trình học tập 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 sát cánh động viên, hỗ trợ em quãng thời gian vừa vừ a qua Lời cuối cùng, em kính chúc thầy giáo gia đình ln có sức khỏe dồi đạt nhiều thành công nghiệp cao quý! Em xin chân thành cảm ơn! Hà Nội, ngày năm Sinh viên thực tháng Hồng Nơng Điện Biên GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên HỌC PHẦN THAY THẾ TỐT NGHIỆP MỤC LỤC LỜI CẢM ƠN MỤC LỤC DANH MỤC CÁC KÍ HIỆU VÀ CHỮ VIẾT TẮT DANH MỤC THUẬT 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 1.1 Định nghĩa icon động (animated sticker) 1.2. Cách tạo bộ icon động 2.1 Frame by frame 1.2.2 Sử dụng phần mềm tạo chuyển động 1.3. Một số icon động mạng xã hội 1.4. Quy chuẩn icon động số mạng xã hội Những điều cần lưu ý cho bộ icon động 1.5. Những 10 TUẦN (TỪ 24/10-31/10): MOODBOARD PHÁT TRIỂN Ý TƯỞNG 11 2.1. Ý nghĩa 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 (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 TUẦN (TỪ 14/11- 21/11 ): HOÀN THÀNH KỊCH BẢN CHUYỂN ĐỘNG VÀ ICON 18 20 GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên HỌC PHẦN THAY THẾ TỐT NGHIỆP DANH MỤC CÁC KÍ HIỆU VÀ CHỮ VIẾT TẮT 2D: Two Dimension chiều AI: Phần mềm Adobe Illustrator AE: Phần mềm Adobe After Effect FBF: Frame by frame Dạng khung hình liên tiếp để tạo 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 GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên HỌC PHẦN THAY THẾ TỐT NGHIỆP TUẦN ( 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 1 2 3 Nội dung làm việc Tìm nghiên cứu định nghĩa icon động Các cách tạo icon động, số icon động MXH Quy chuẩn icon động 1.1. Định nghĩa icon động Icon động loại tính trang mạng xã hội, người dùng sử dụng nhãn dán hoạt hình có chuyển động lặp lặp lại để giao tiếp thể bản thân với người thân bạn bè xung quanh Icon động yếu tố quan trọng việc giao tiếp người, mà người khó gặp mặt trực tiếp với nhau, icon động giúp hội thoại trở nên thoải mái gần gũi 1.2. Cách tạo icon động Hiện nay, icon động mạng xã hội thực theo nhiều cách, ví dụ như: 1.2.1 Frame by frame Là icon động dạng vẽ hoàn toàn tay chuyển động, icon động có khoảng từ 5-20 khung hình xuất liên tục để tạo chuyển động Bộ icon động dạng FBF sẽ được lưu dạng tệp PNG (nền suốt) Ưu điểm dạng FBF tạo chuyển động linh hoạt mềm mại, khơng phải lo lắng góc xoay khó Nhưng điều phải phải đỏi hỏi người hoạ sĩ sẽ phải phải vẽ rất tỉ mỉ nhiều thời gian để hồn thành xong icon động. GVHD: Ths Trần Quốc Trung SVTH: Hoàng Nông Điện Biên HỌC PHẦN THAY THẾ TỐT NGHIỆP Hình 1.1: Các khung hình để tạo chuyển động 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 nhãn dán riêng lẻ giây Các tùy chọn thời gian phát lại giới hạn 1, 2, giây Không cho phép thời gian phát lại số nguyên, chẳng hạn 1,5 giây 2. 3. 4. Giới hạn khung hình PNG cho APNG: Từ đến 20 khung hình Khi tạo tệp APNG bằng cơng cụ tạo như APNG Assembler, hình ảnh giống hệt lặp lặp lại kết hợp thành khung hình nhất. Các tệp sử dụng liệu cho tất khung sẽ không hoạt động bình thường hình dán động dẫn đến lỗi tải lên Tổng thời gian phát lại cho APNG khơng vượt q 4 giây. Hình 1.2: Hình ảnh miêu tả nguyên nguyê n tắc tạo icon động theo FBF GVHD: Ths Trần Quốc Trung SVTH: Hoàng Nông Điện Biên HỌC PHẦN THAY THẾ TỐT NGHIỆP 1.2.2 Sử dụng phần mềm tạo chuyển động 2D 3D: Adobe After Effect, Blender, C4D, Maya, Khi lựa chọn cách này, sẽ tiết kiệm nhiều thời gian 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 chuyển động mong muốn. Hình 1.3: Bộ icon động Tyrannosaurus Rex - Telegram Animated Stickers Stickers GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên HỌC PHẦN THAY THẾ TỐT NGHIỆP 1.3. Một - số icon động mạng xã hội Bộ sticker Chin&Su chim Lạc sâu Xanh người n gười Việt Nam thiết kế, cụ thể đội ngũ của studio Sticky Monkey đã mất 5 tháng để thực hiện Hình 1.4: Bộ sticker Chin&Su Sticky Monkey thiết kế theo dạng Fram by frame GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên HỌC PHẦN THAY THẾ TỐT NGHIỆP 1.4. Quy - - - - - - - chuẩn icon động số mạng xã hội sticker động bao gồm 10 -20 sticker, Định dạng file: File PNG (nền suốt), TGS, APNG tuỳ vào tảng sử dụng FPS (Frame per second): 5-60 frame/sticker tuỳ vào tảng sử dụng. Kích thước: 16x16, 32x32, 240x240, 512x512, tuỳ vào yêu cầu tảng sử dụng. Thời gian: 4 giây Hình dán động phải có khả truyền tải cảm xúc ý tưởng không thơng qua hoạt ảnh mà cịn thơng qua hình ảnh tĩnh chúng Đảm bảo bảo rằng khung đầu tiên của mỗi hình dán của bạn, 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. GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên HỌC PHẦN THAY THẾ TỐT NGHIỆP 1.5. Những ● ● điều cần lưu ý cho icon động Các icon động để xuất xuất - Nhãn dán dễ sử dụng hội thoại giao tiếp hàng ngày ngày. - Nhãn dán bao gồm cảm xúc, thơng điệp hình ảnh minh họa dễ hiểu. Các sticker không đề xuất xuất - - - - Các nhãn dán khó sử dụng trị chuyện hàng ngày, chẳng hạn đồ vật phong cảnh. Hình dán có khả năng hiển thị kém, chẳng hạn như hình ảnh q dài hình minh họa dài đầy đủ nhân vật cao. Các thiếu đ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 chưa đủ tuổi, chứa hình ảnh khiêu dâm bạo lực kích động chủ nghĩa dân tộc. GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên 10 HỌC PHẦN THAY THẾ TỐT NGHIỆP TUẦN (TỪ 24/10-31/10): MOODBOARD PHÁT TRIỂN Ý TƯỞNG STT 2.1. Ý ● ● 1 Nội dung công việc Tham khảo vai trò ý nghĩa Moodboard 2 Tạo bảng moodboard nghĩa vai trò Moodboard Định nghĩa: Moodboard có nghĩa bảng tâm trạng (kỹ thuật số tài liệu) mà người kết hợp hình ảnh, kết cấu khác để người xem hình dung ý tưởng concept Hay nói cách đơn giản hơn, Moodboard bảng với ảnh sử dụng ngành thiết kế để trình bày dự án đến nhà đầu tư tiềm đơn giản truyền đạt ý tưởng nhà thiết kế. Vai trò: ○ ○ ○ Tiết kiệm thời gian thiết kế, không nhiều thời gian để làm trình bày cầu kỳ. Moodboard khiến nhà thiết kế dễ dàng tìm hiểu thị hiếu, sở thích khách hàng hàng. Từ bảng Moodboard giúp khách hàng hình dung ngơn ngữ 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 giống prototype wireframe Mục tiêu họ để hiển thị cấu trúc phân cấp hình ảnh sản phẩm Sự khác biệt phần tử giao diện di ện người dùng bảng mẫu không mô tả chi tiết prototype prototyp e sơ đồ wireframe GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên 11 HỌC PHẦN THAY THẾ TỐT NGHIỆP Các thành phần hiển thị thơng qua hình ảnh minh họa ngẫu nhiên hình ảnh trình bày bố cục c ục sản phẩm kỹ thuật số Ngồi ra, hình ảnh chọn theo cách để dễ dàng nhận bảng màu tương ứng Phương Phương pháp nhanh nhanh prototype khơng u cầu chi tiết. 2.2.2 Tham khảo sưu tập có sẵn Tham khảo sưu tập nguồn cảm hứng khác phương pháp hiệu cho nhà thiết kế để hiển thị ý tưởng Có nhiều tài nguyên Behance Dribbble, nơi nhà thiết kế tìm thấy concept đầy cảm hứng Bộ sưu tập tác phẩm thiết kế thống bởi phong cách chung tính khác dễ dàng minh họa ý tưởng cho dự án Hơn nữa, moodboard giúp khách hàng dễ dàng hiểu concept họ thấy tài liệu tham khảo sản phẩm tương tự GVHD: Ths Trần Quốc Trung SVTH: Hoàng Nông Điện Biên 12 HỌC PHẦN THAY THẾ TỐT NGHIỆP 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ọ sử dụng tài liệu dự án tương lai nơi khác Những sưu sư u tập có ích cho việc tạo moodboard Ảnh ghép miễn phí bao gồm ảnh đẹp cách hiệu để thể tâm trạng thông qua chúng. màuu sắc Đây Ngồi ra, ảnh ghép làm đầy với ví dụ minh hoạ, phơng chữ mà loại bảng tâm trạng nhanh dễ số người khác Tuy nhiên, khách hàng định hướng chi tiết, họ khơng vui mừng với ảnh ghép miễn phí làm ví dụ dự án 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 24 tuổi Những cặp đôi yêu nhau Những người gia đình dùng giao tiếp với Keyword: dễ thương, tròn, cáo Màu sắc chủ đạo: Màu vàng: mang đến động, nhiệt huyết,những huyết,những tư tưởng sáng tạo, ln trở thay đổi khơng ngừng nghỉ Màu vàng màu ánh nắng, niềm tin sức mạnh, mạnh, thể lạc quan, tích cực, nhẹ nhàng, ấm áp, sáng tạo và sinh lực. Màu hồng :mang đến tình 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” hồn g” sử dụng phổ biến bi ến Ngoài sắc màu còng biểu tượng suôn sẻ, sẻ, chuyện diễn mong ước người 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 hy h y vọng, màu sắc tinh khiết hồn thiện nhất Đó màu đại diện cho tươi sáng Nó giống mảnh giấy trắng chưa viết Nó để tâm trí cởi mở • • • • • • • • • tự do với điều tạo đường đi. • Phong cách thiết kế nhân vật: Dạng Flat Fl at design kết hợp line GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên 13 HỌC PHẦN THAY THẾ TỐT NGHIỆP Bảng moodboard Giải pháp thiết kế - - Sử dụng phần mềm Adobe Photoshop để thực phác thảo ý tưởng. Adobe Illustrator cho thiết kế hoàn chỉnh tách layer GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên 14 HỌC PHẦN THAY THẾ TỐT NGHIỆP TUẦN (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 tổng hợp ý tưởng cho ch o biểu cảm, hành động trang mạng Hình 3.1: Hình ảnh tham khảo GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên 15 HỌC PHẦN THAY THẾ TỐT NGHIỆP Hình 3.2: Bản thiết kế • • • Bản sketch lấy hình ảnh cáo làm chủ đạo Chú cáo 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 dễ thương sketch GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên 16 HỌC PHẦN THAY THẾ TỐT NGHIỆP Bản lên màu GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên 17 HỌC PHẦN THAY THẾ TỐT NGHIỆP TUẦN (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 ngơi nhấp nháy lên • -Vỗ tay Nhân vật vỗ tay, xung quanh có hiệu ứng tỏa ra, nhân vật lắc qua lại • bên -Xin -X in c hào GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên 18 HỌC PHẦN THAY THẾ TỐT NGHIỆP • Nhân vật cầm bảng hiệu ghi chữ “xin chào” lắc qua lắc lại, hiệ hiệu u ứng chói lóa bật xzung quanh -Khóc: • Nhân vật khóc hàng nước mắt chảy ra, 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 GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên 19 HỌC PHẦN THAY THẾ TỐT NGHIỆP TUẦN (TỪ 14/11- 21/11 ): HOÀN THÀNH KỊCH BẢN CHUYỂN ĐỘNG VÀ ICON STT Tên 1 Khóc Kị Kịch ch bả n cchu huyy n độn động g Sketch AI +Nhân vật +Nhân vật l y ta tayy dụi dụi mắt +2 hàng nước mắt chảy sang bên +Đuôi tai lắc qua lại 2 Thả tim +Trái titim +Trái m chu chuyy n độn động g phóng to thu nhỏ +Ngôi đằng sau lấp lánh +Tai đuôi lắc qua lắc lại 3 Thẹn thùng +2 ta tayy nhâ nhân n vvật ật ch chuy uy n động chụm lại + Tai đ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ị đồng tình +Chữ OK bên cạnh kèm theo hiệu ứng lấp lánh +Đuôi tai nhân vật lắc qua lại GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên 20 HỌC PHẦN THAY THẾ TỐT NGHIỆP 5 Hỏi ch m Khó hiểu +Đ u nhâ nhân n vvật ật nghi nghiên êng g qua lại +Tai đuôi lắc qua lại +Các dấu hỏi chấm lắc qua lại 6 Lè lưỡi trêu đùa +Nhân vật lè lưỡi, lưỡi chuyển động +Tai đ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 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 từ tay +ngôi lấp lánh xung quanh +Tai đuôi lắc qua lại GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên 21 HỌC PHẦN THAY THẾ TỐT NGHIỆP 9 Xin chào +Nhân vật giơ bảng có chữ “ HELLO” lên, tay lại vẫy qua lại +Tai đuôi lắc qua lại + hiệu ứng tia sáng bắt từ bảng 10 Chạy deadline +Tay n +Tay nhâ hân n vvật ật chuy chuy n động lên xuống chuyển động qua bên +Chữ “deadline” lên đằng sau +Giấy tờ bay lung tung đằng sau 11 Chúc mừng sinh nhật +Tai đuôi lắc qua lại +Nhân vật nam bắn 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 lửa từ nến chuyển động qua lại +Tai lắc qua lại +Ruy băng có chữ “HPBD” xuống rơi từ 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 hình GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên 22 HỌC PHẦN THAY THẾ TỐT NGHIỆP GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên 23 ... HỌC PHẦN THAY THẾ TỐT NGHIỆP GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên HỌC PHẦN THAY THẾ TỐT NGHIỆP LỜI CẢM ƠN Để hồn thành tốt đố án tốt nghiệp cuối năm lần... Biên HỌC PHẦN THAY THẾ TỐT NGHIỆP TUẦN ( 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 1 2 3 Nội dung làm việc Tìm nghiên cứu định nghĩa icon động ... HỌC PHẦN THAY THẾ TỐT NGHIỆP Bản lên màu GVHD: Ths Trần Quốc Trung SVTH: Hồng Nơng Điện Biên 17 HỌC PHẦN THAY THẾ TỐT NGHIỆP TUẦN (TỪ 7/11- 14/11 ): BẮT ĐẦU LÊN KỊCH BẢN VÀ VẼ CÁC ICON
Ngày đăng: 02/12/2022, 22:57
Xem thêm:
