thiết kế giao diện website bằng photoshopNền kinh tế các nước trên thế giới đang phát triển mạnh mẽ, trong đó có cả Việt Nam. Mức sống, thu nhập của người dân tang lên, cải thiện rất nhiều theo từng năm. Do đời sống vật chất đã đầy đủ, nên phát sinh them nhu cầu thoải mái về tinh thần là điều dễ hiểu. Bởi vậy, ngành du lịch trong nước đang càng ngày càng chiếm tỉ trọng lớn trong nền cớ cấu nền kinh tế nước ta. Du lịch dần trở thành môi trường cạnh tranh khốc liệt với các công ty, tập đoàn kinh doanh trong lĩnh vực này. Trong thời đại mà Internet đã trở nên hết sức phổ biến trong mọi lĩnh vực kinh tế, chính trị, xã hội, được phổ biến rộng rãi đến nhiều tầng lớp xã hội, việc thiết kế Website du lịch trở nên đặc biệt quan trọng đối với mọi doanh nghiệp kinh doanh du lịch nhưng chưa có Website. Một công ty du lịch chất lượng phục vụ tốt thôi là chưa đủ, họ phải có website để quảng bá thương hiệu qua internet nhằm thu hút khách hàng đến với. Nhận thấy tiềm năng phát triển và khả năng áp dụng thực tế cao, cho nên em quyết định chon đề tài là: Thiết kế giao diện web du lịch với phần mềm hỗ trợ là photoshop.
BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH KHOA CÔNG NGHỆ THÔNG TIN ĐỒ ÁN MÔN HỌC CHUYÊN ĐỀ CHUYÊN SÂU KTPM1 THIẾT KẾ GIAO DIỆN WEB DU LỊCH VỚI PHOTOSHOP Giảng viên giảng dạy : ThS Trần Thị Hồng Yến Sinh viên thực : Vũ Nguyên Thụy MSSV : 1711545722 Lớp : 17DTH1B Chuyên ngành : Kỹ thuật phần mềm Tp HCM, tháng 12 năm 2020 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH KHOA CÔNG NGHỆ THÔNG TIN ĐỒ ÁN MÔN HỌC CHUYÊN ĐỀ CHUYÊN SÂU KTPM1 THIẾT KẾ GIAO DIỆN WEB DU LỊCH VỚI PHOTOSHOP Giảng viên giảng dạy : ThS Trần Thị Hồng Yến Sinh viên thực : Vũ Nguyên Thụy MSSV : 1711545722 Lớp : 17DTH1B Chuyên ngành : Kỹ thuật phần mềm Tp HCM, tháng 12 năm 2020 TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH KHOA CƠNG NGHỆ THƠNG TIN CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc NHIỆM VỤ ĐỒ ÁN MÔN HỌC Họ tên SV: VŨ NGUYÊN THỤY MSSV: 1711545722 Chuyên ngành: Kỹ thuật phần mềm Lớp: 17DTH1B Tên đề tài: THIẾT KẾ GIAO DIỆN WEB DU LỊCH VỚI PHOTOSHOP Giảng viên giảng dạy: ThS Trần Thị Hồng Yến Thời gian thực hiện: 21/10/2020 đến 26/12/2020 Nhiệm vụ/nội dung (mô tả chi tiết nội dung, yêu cầu, phương pháp… ): - Xác định yêu cầu, thu thập thông tin liệu liên quan để thiết kế giao diện web - Phân tích thiết kế phác thảo giao diện web - Thiết kế giao diện web với Photoshop - Xử lý hình ảnh, tối ưu hóa ảnh cho web - Cắt slide xuất web - Tạo banner, slideshow ảnh quảng cáo động - Xây dựng website hoàn chỉnh - Viết báo cáo đồ án, in đóng theo biểu mẫu qui định Nội dung yêu cầu thông qua Bộ mơn TRƯỞNG BỘ MƠN Tp.HCM, ngày 21 tháng 10 năm 2020 GIẢNG VIÊN GIẢNG DẠY (Ký ghi rõ họ tên) (Ký ghi rõ họ tên) ThS Phạm Văn Đăng ThS Trần Thị Hồng Yến LỜI CẢM ƠN Em xin gửi lời cảm ơn chân thành đến cô Trần Thị Hồng Yến – giảng viên môn Chuyên đề chuyên sâu kỹ thuật phần mềm trang bị cho em kiến thức, kỹ cần có để thực đề tài nghiên cứu Tuy nhiên trình nghiên cứu đề tài, kiến thức chuyên ngành hạn chế nên em thiếu sót tìm hiểu, đánh giá trình bày đề tài Rất mong quan tâm, góp ý thầy cô Em xin chân thành cảm ơn! Sinh viên thực VŨ NGUYÊN THỤY LỜI MỞ ĐẦU Nền kinh tế nước giới phát triển mạnh mẽ, có Việt Nam Mức sống, thu nhập người dân tang lên, cải thiện nhiều theo năm Do đời sống vật chất đầy đủ, nên phát sinh them nhu cầu thoải mái tinh thần điều dễ hiểu Bởi vậy, ngành du lịch nước ngày chiếm tỉ trọng lớn cớ cấu kinh tế nước ta Du lịch dần trở thành môi trường cạnh tranh khốc liệt với cơng ty, tập đồn kinh doanh lĩnh vực Trong thời đại mà Internet trở nên phổ biến lĩnh vực kinh tế, trị, xã hội, phổ biến rộng rãi đến nhiều tầng lớp xã hội, việc thiết kế Website du lịch trở nên đặc biệt quan trọng doanh nghiệp kinh doanh du lịch chưa có Website Một cơng ty du lịch chất lượng phục vụ tốt chưa đủ, họ phải có website để quảng bá thương hiệu qua internet nhằm thu hút khách hàng đến với Nhận thấy tiềm phát triển khả áp dụng thực tế cao, em định chon đề tài là: Thiết kế giao diện web du lịch với phần mềm hỗ trợ photoshop NHẬN XÉT CỦA GIẢNG VIÊN GIẢNG DẠY Tp.HCM, ngày … tháng 01 năm 2021 GVHD TRẦN THỊ HỒNG YẾN BẢNG PHÂN CÔNG THỰC HIỆN ĐỒ ÁN MÔN HỌC Họ tên SV1: VŨ NGUYÊN THỤY MSSV: 1711545722 Họ tên SV2: NGUYỄN HIỀN THỨC MSSV: 1711456402 Chương 1 Chương 2 Chương 2 Chương 3 Thiết kế layout dulich2 Thiết kế layout dulich1 Tối ưu xuất web dulich2 Tối ưu xuất web dulich1 SV thực (Ký tên) SV thực (Ký tên) VŨ NGUYÊN THỤY NGUYỄN HIỀN THỨC Giảng viên chấm thi 1: ThS Trần Thị Hồng Yến Điểm cho Sinh viên 1: Điểm cho Sinh viên 2: Nhận xét: Giảng viên chấm thi 2: Điểm cho Sinh viên 1: Nhận xét: Điểm cho Sinh viên 2: MỤC LỤC Chương 1: GIỚI THIỆU MÔI TRƯỜNG THIẾT KẾ VÀ CÔNG CỤ HỖ TRỢ 1.1 Giới thiệu môi trường thiết kế: 1.2 Lịch sử: 1.2.1 Lịch sử hình thành Adobe Photoshop: 1.2.2 Lịch sử phiên Adobe Photoshop: 1.3 Các chức bản: 1.4 Một số chức áp dụng : .10 Chương 2: GIỚI THIỆU ĐỒ ÁN 16 2.1 Tên đồ án: 16 2.2 Mô tả đồ án: 16 2.3 Lý chọn đồ án: 16 2.4 Giới thiệu trang web thiết kế giao diện web: 17 2.5 Môi trường thiết kế: 18 2.6 Công cụ hỗ trợ (nếu có): 18 Chương 3: THỰC HIỆN ĐỒ ÁN 19 3.1 Thu thập liệu mẫu: .19 3.2 Phác thảo giao diện web: 20 3.3 Thiết kế giao diện web với Photoshop: 21 3.4 Xử lý hình ảnh, tối ưu hóa ảnh cho web 29 3.5 Cắt slide xuất web .30 3.6 Tạo banner, slideshow ảnh quảng cáo động 32 3.7 Xây dựng website hoàn chỉnh 34 Chương 4: KẾT LUẬN .37 4.1 Ưu điểm đồ án: 37 4.2 Hạn chế đồ án: 37 4.3 Hướng phát triển đồ án: 37 TÀI LIỆU THAM KHẢO 38 MỤC LỤC HÌNH ẢNH Hình 1.1 Logo Adobe Photoshop Hình 1.2 Các phím tắt Photoshop CS6 có chức File, Layer,… .7 Hifnh1.3.Các phím tắt Photoshop CS6 Hình 1.4 Chức transforrm 11 Hình 1.5 Kết sử dụng Transform 11 Hình 1.6 Chức Measurement 12 Hình 1.7 Chức Magnetic Lasso Tool 12 Hình 1.8 Kết Magnetic Lasso Tool 13 Hình 1.9 Chức Magic Wand Tool 13 Hình 1.10 Kết Magic Wand Tool 14 Hình 1.11 Chức Custom Shape Tool 14 Hình 1.12 Kết Custom Shape Tool 15 Hình 2.1 Layout trang web thiết kế giao diện .17 Hình 2.2 Layout trang web thiết kế giao diện .18 Hình 3.1 Dữ liệu mẫu slideshow cho web dulich 19 Hình 3.2 Thu thập liệu phần body web cho web dulicht 19 Hình 3.3 Thu thập liệu phần footer cho web dulich .19 Hình 3.4 Dữ liệu mẫu slideshow web dulich1 .20 Hình 3.5 Thu thập liệu phần body web dulich1 20 Hình 3.6 Thu thập liệu phần header 20 Hình 3.7 Thu thâp liệu phần footer 20 Hình 3.8 Phác thảo phần web dulich1 .21 Hình 3.9 Phác thảo phần web dulich2 .21 Hình 3.18 Thiết kế body cho web dulich1 Hình 3.19 Thiết kế body cho web dulich2 - Thiết banner thứ cho web dulich2 gợi ý chuyến cho người dùng, banner hai đơn giản them chữ tạo điểm bật thu phóng kích thước: 26 Hình 3.20 Thiết kế banner2 cho web dulich2 - Thiết kế body thứ chuyến du lịch gợi ý cho người dùng dùng chức fx, cắt hình,… Hình 3.21 Thiết kế body gợi ý người dùng cho web dulich2 - Tiếp đó, thiết kế phần quảng cáo cho hai website: 27 Hình 3.22 Thiết kế quảng cáo cho web dulich1 Hình 3.23 Thiết kế quảng cáo cho web dulich2 - Cuối cùng, thiết kế phần footer cho hai website giúp người dùng tìm giúp đỡ từ admin dùng chức thêm chữ, đổ bóng cho bắt mắt, giúp người sử dụng theo dõi thông tin qua trang mạng xã hôi, dùng chức dán logo, đổ bóng cho chữ copy layer,… 28 Hình 3.24 Thiết kế footer cho web dulich1 Hình 3.25 Thiết kế footer cho web dulich2 Hình 3.26 Thiết kế phần cuối footer thứ cho web dulich2 29 Thiết kế xong giao diện hai trang web dulich hiển thị sau: Hình 3.27 Giao diện web dulich1 sau thiết kế xong Hình 3.28 Giao diện web dulich2 sau thiết kế xong 3.4 Xử lý hình ảnh, tối ưu hóa ảnh cho web Để có hình ảnh chất lượng tốt, tối ưu hóa giúp website hiển thị đẹp mắt, mượt mà nhanh em xử lý lưu hình ảnh lưu thành định dạng png, jpeg, gif cho phù hợp với web Các icon lưu định dạng png 30 Hình 3.29 Icon lưu định dạng png Một số hình ảnh background, ảnh chuyến du lịch định dạng jpeg, điều chỉnh mức chất lượng cho đạt cân tốt chất lượng kích thước tập tin Hình 3.30 Background lưu định dạng jpeg GIF: sử dụng 256 màu Đây lựa chọn tốt cho hình ảnh động slideshow Hình 3.31 Slideshow lưu định dạng gif 3.5 Cắt slide xuất web Sử dụng công cụ Slice tool để cắt slide cho web Hình 3.32 Cắt slide cho web dulich1 Chỉnh sửa phần cắt slide phù hợp trước xuất web 31 Hình 3.33 Edit phần cắt slide trước xuất Tiến hành xuất web Hình 3.34 Xuất Web Thiết lập số cài đặt cần thiết ấn save trước xuất web htnl 32 Hình 3.35 Save để xuất Web 3.6 Tạo banner, slideshow ảnh quảng cáo động Tạo banner cho website: Hình 3.36 Banner cho web dulich1 Hình 3.37 Banner cho web dulich2 Xây dựng ảnh động slideshow ảnh động quảng cáo cho website Đầu tiên nhấn vào Windown chọn Timline 33 Hình 3.38 Chọn Timline làm hình động Sau chọn Create Frame Animation tạo khung hình Hình 3.39 Tạo khung ảnh làm hình động Xử lý khung hình cho hợp lý mượt mà Hình 3.40 Ảnh động cho slideshow web dulich1 Hình 3.41 ảnh động cho slideshow web dulich2 Hình 3.42 Tạo ảnh đơng quảng cáo Lưu dạng gif ảnh động 34 Hình 3.43 Lưu ảnh động quảng cáo File ảnh sau lưu Hình 3.44 Các file ảnh động lưu 3.7 Xây dựng website hoàn chỉnh Sau xuất web ta file sau Hình 3.45 Cấu trúc thư mục xuất Web Tạo thư muc css tạo file style.css trog thư mục css 35 Hình 3.46 Tạo thêm thư mục css file style.css Copy css trog phần head file index.html vào file style.css Hình 3.47 Code css file style.css Sau hồn chỉnh Hình 3.48 Giao diện hồn chỉnh web dulich1 36 37 Hình 3.49 Giao diện hồn chỉnh web dulich2 Chương 4: KẾT LUẬN 4.1 4.2 4.3 Ưu điểm đồ án: Giao diện web đẹp mắt dễ nhìn Dễ sử dụng Nắm rõ kiến thức mà giảng viên giảng dạy Hạn chế đồ án: Do thời gian nộp đồ án có hạn nên cịn số thiếu sót lúc thực đồ án Một số hình ảnh cịn đơn giản Chưa hồn chỉnh đầy đủ thành trang web hoàn thiện Hướng phát triển đồ án: 38 - Tương lai gần hoàn thiện thành trang web hồnh chỉnh nhiều - người sử dụng biết đến Là bước đệm cho việc sử dụng photoshop thành thạo sau Xây dựng web phức tạp dễ nhìn dễ sử dụng cho người dùng 39 TÀI LIỆU THAM KHẢO [1] ThS Trần Thị Hồng Yến (2020), Slide giảng môn Chuyên đề chuyên sâu KTPM1 , Khoa CNTT, Trường ĐH Nguyễn Tất Thành [2] Dan Rose (2015), Responsive Web Design with Adobe Photoshop, Adobe Press [3] Faulkner Andrew, Chavez Conrad (2018), Adobe Photoshop CC Classroom in a Book, Adobe Press [4] Create a Professional Web Layout Photoshop Tutorial: https://www.photoshoptutorials.ws/photoshop-tutorials/how-to-create-a-professional-weblayout-in-photoshop/ [5] How To Design A Website In Photoshop – YouTube: https://www.youtube.com/watch?v=7qUmoudVXZI 40