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

    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