Đang tải... (xem toàn văn)
Trang 1 Trường Đại Học Hòa Bình KHOA CÔNG NGHỆ ĐA PHƯƠNG TIỆN ------ ĐỒ ÁN TỐT NGHIỆP Đề tài: Sử dụng phần mềm Photoshop thiết kế giao diện web ứng dụng trong thương mại điện tử Giáo
Sử dụng phần mềm Photoshop thiết kế giao diện web ứng dụng thương mại điện tử Trường Đại Học Hịa Bình KHOA CƠNG NGHỆ ĐA PHƯƠNG TIỆN ĐỒ ÁN TỐT NGHIỆP Đề tài: Sử dụng phần mềm Photoshop thiết kế giao diện web ứng dụng thương mại điện tử Giáo viên hướng dẫn : TS Nguyễn Đăng Khoa Sinh viên thực : Nguyễn Quốc Việt Lớp : 513DPT Hà Nội, 4/2017 Sử dụng phần mềm Photoshop thiết kế giao diện web ứng dụng thương mại điện tử Mục lục LỜI CẢM ƠN LỜI NÓI ĐẦU CHƯƠNG I: GIỚI THIỆU CHUNG VỀ PHẦN MỀM ADOBE PHOTOSHOP 1.Giới thiệu Phần mềm Adobe Photoshop 1.1 Tổng quan phần mềm Photoshop 1.2 Sự đời phát triển phần mềm Photoshop: Vai trò Photoshop thiết kế Website Phần mềm thực đồ án:Photoshop CC 2015.5 3.1 Tổng quan Photoshop CC 2015.5 Các cải tiến Adobe Photoshop CC 2015 bao gồm: 10 3.2 Hướng dẫn cài đặt Photoshop CC 2015.5 11 Hướng dẫn cài đặt crack 11 CHƯƠNG II : THƯƠNG MẠI ĐIỆN TỬ VÀ WEBSITE TRONG THƯƠNG MẠI ĐIỆN TỬ 15 2.1 Thương mại điện tử gì? 15 2.1.1 Khái niệm thương mại điện tử 15 2.1.2 Vai trò thương mại điện tử 16 2.2 Website thương mại điện tử 17 2.2.1 Giao diện website gì? 18 2.2.2 Những yêu cầu cần thiết thiết kế giao diện website 19 CHƯƠNG III: PHÂN TÍCH VÀ THIẾT KẾ GIAO DIỆN WEBSITE 22 3.1 Phân tích Website cần thiết kế 23 3.1.1 Đối tượng thiết kế 23 3.1.2 Đối tượng khách hàng 23 3.1.3 Cách thức hoạt động giao diện 23 3.1.4 Chi tiết cấu trúc giao diện 25 Sử dụng phần mềm Photoshop thiết kế giao diện web ứng dụng thương mại điện tử 3.2 Thiết kế giao diện 26 3.2.1 Thiết kế giao diện trang chủ 26 3.2.2 Thiết kế giao diện trang 37 NHẬN XÉT 63 KẾT LUẬN 64 Sử dụng phần mềm Photoshop thiết kế giao diện web ứng dụng thương mại điện tử LỜI CẢM ƠN Để hồn thành khóa luận tốt nghiệp với đề tài: “Sử dụng phần mềm Photoshop thiết kế giao diện web ứng dụng thương mại điện tử”, em xin gửi lời cảm ơn sâu sắc tới giảng viên TS Nguyễn Đăng Khoa Đã tận tình bảo cho em hoàn thành đề tài Em xin cảm ơn thầy cô giáo khoa công nghệ truyền đạt cho em kiến thức quý báu năm học vừa qua tạo điều kiện thuận lợi giúp em hồn thành khóa luận tốt nghiệp cách tốt Em xin trân thành cảm ơn! Hà Nội, ngày tháng năm 2017 Sinh viên thực : Nguyễn Quốc Việt Sử dụng phần mềm Photoshop thiết kế giao diện web ứng dụng thương mại điện tử LỜI NÓI ĐẦU Hiện nay, Công nghệ đa phương tiện ngành mũi nhọn đất nước Hàng năm xu phát triển ngành công nghệ nhằm đáp ứng số lượng lớn yêu cầu xã hội nhiều mặt như: kinh tế, văn hóa, xã hội Do đó, việc ứng dụng rộng rãi ngành cơng nghệ đa phương tiện xã hội điều tất yếu Từ Internet đời, kéo theo bùng nổ loạt dịch vụ Internet khiến sống người trở nên đại hơn, khoảng cách địa lý khơng cịn vấn đề gây khó khăn Những lợi ích mà Internet mang lại cho người lớn Trong Website dịch vụ phổ biến Internet Ngày nay, khoa học công nghệ phát triển, người ứng dụng hệ thống Internet vào đời sống sản xuất trở nên phổ biến rộng rãi Hệ thống Internet đường truyền tải thông tin nhanh cho khách hàng lúc nơi Website công cụ hỗ trợ hiệu hoạt động kinh doanh xem cánh tay đắc lực cho chiến lược Marketing doanh nghiệp Chính vậy, vai trò website thương mại điện tử quan trọng cho tồn phát triển đơn vị kinh doanh linh vực Các công cụ phục vụ thiết kế web ngày trở nên phổ biến thân thiện với người dùng, trường hợp khách hàng có nhu cầu muốn xây dựng cho website với hoàn hảo nội dung thẩm mỹ tạo cho người mua khách hàng ấn tượng, tin tưởng, chuyên nghiệp dịch vụ thiết kế web chuyên nghiệp thường sử dụng Photoshop để thiết kế Phần mềm chuyên dụng Adobe Photoshop lựa chọn số thiết kế giao diện website Sử dụng phần mềm Photoshop thiết kế giao diện web ứng dụng thương mại điện tử CHƯƠNG I GIỚI THIỆU CHUNG VỀ PHẦN MỀM ADOBE PHOTOSHOP 1.Giới thiệu Phần mềm Adobe Photoshop 1.1 Tổng quan phần mềm Photoshop Adobe Photoshop (thường gọi Photoshop) phần mềm chỉnh sửa đồ họa phát triển phát hành hãng Adobe Systems đời vào năm 1988 hệ máy Macintosh Photoshop đánh giá phần mềm dẫn đầu thị trường sửa ảnh bitmap coi chuẩn cho ngành liên quan tới chỉnh sửa ảnh Từ phiên Photoshop 7.0 đời năm 2002, Photoshop làm lên cách mạng ảnh bitmap Phiên Adobe Photoshop CC Ngồi khả chỉnh sửa ảnh cho ấn phẩm, Photoshop sử dụng hoạt động thiết kế trang web, vẽ loại tranh (matte painting nhiều thể loại khác), vẽ texture cho chương trình 3D gần hoạt động liên quan đến ảnh bitmap Sử dụng phần mềm Photoshop thiết kế giao diện web ứng dụng thương mại điện tử Adobe Photoshop có khả tương thích với hầu hết chương trình đồ họa khác Adobe Adobe Illustrator, Adobe Premiere, After After Effects Adobe Encore 1.2 Sự đời phát triển phần mềm Photoshop: 198 Ngày 10 tháng 2, phần mềm Adobe Photoshop phiên 0.63 thức đời cha đẻ tên Thomas Knoll người sáng lập nên phần mềm Bản 0.63 viết chạy hệ điều hành Macintos System 1990 PHOTOSHOP 1.0.7, photoshop nâng cấp lên 1.0.7 chạy riêng cho Macintos 1993 PHOTOSHOP 2.0, photoshop nâng cấp lên phiên 2.0 lúc chạy Window 3.1 , lúc có tên Photoshop LE - Năm 1993 , photoshop nâng cấp lên phien 3.0 chạy hệ điều hành Windows 98 1996 PHOTOSHOP 4.0, photoshop nâng cấp lên phiên 4.0 , tính dần cải thiện Lúc chạy hệ điều hành Win 98 Giao diện lúc cải thiện đáng kể 1998 PHOTOSHOP 5.0, Photoshop 5.0 đời , năm 5.5 nâng cấp Đây giao diện 5.0 2000 PHOTOSHOP 6.0, photoshop 6.0 đời viết chạy hệ điều hành Win 2000 2002 PHOTOSHOP 7.0 Photoshop 7.0 đời đánh dấu phát triển vượt bậc loại phần mềm xử lý ảnh Bitmap Sử dụng phần mềm Photoshop thiết kế giao diện web ứng dụng thương mại điện tử 2003 PHOTOSHOP CS1 , phiên Photoshop CS đời nhằm tăng cường thêm nhiều tính xử lý ảnh , chạy Win XP 2005 PHOTOSHOP CS2, hãng Adobe đánh dấu vượt trội phần mềm hãng đột phá CS2 , photoshop CS2 đời với nhiều tính mạnh mẽ , chạy hệ điều hành Win XP Mac OS X 10.4 Tiger 2007 PHOTOSHOP CS3 Xử lý nhanh có lẽ tính đáng ý phiên năm 2007.Phiên tập trung nâng cấp cơng cụ có thay tập trung vào 2008 PHOTOSHOP CS4 Giao diện người dùng đơn giản hoá đáng kể CS4 Sử dụng công cụ thêm vào tiêu đề để dễ truy cập Nhanh chóng truy cập cho hoạt động phổ biến làm sẵn có khu vực bảng điều khiển Tính Masks điều chỉnh bảng điều khiển bổ sung 2010 PHOTOSHOP CS5 Adobe Photoshop CS5 Extended là photoshop với nhiều tính mới, giải pháp tuyệt đỉnh cho tác vụ xử lý ảnh số cao cấp, cung cấp tính phối ghép biên tập vốn có Adobe Photoshop CS5 cộng thêm công cụ đột phá cho phép tạo lập chỉnh sửa nội dung 3D chuyển động 2012 PHOTOSHOP CS6 Thêm vào công cụ thiết kế sáng tạo, cung cấp giao giện thiết kế lại tập trung vào nâng cao hiệu suất 2013 – 2015 PHOTOSHOP CC Là phiên nâng cấp sau CS6 với cải tiến thông minh tiện lợi cho người sử dụng Sử dụng phần mềm Photoshop thiết kế giao diện web ứng dụng thương mại điện tử Vai trò Photoshop thiết kế Website Với xu hướng lên ngành thiết kế đồ họa thiết kế web lĩnh vực ưa chuộng Để thiết kế trang web đầy đủ nội dung cho hoạt động khơng phải điều khó, khó phải khiến cho thật ấn tượng thu hút người xem điều mà nhà thiết kế web hướng tới Hầu hết thời trang web đẹp độc thiết kế với photoshop, cho dù trang web nhỏ, đơn giản hay phức tạp yêu cầu bạn phải thiết kế trước photoshop trình đồ họa tương đương Vì thiết kế web photoshop điều cần thiết cho muốn thiết kế web Phần mềm chuyên dụng Adobe Photoshop lựa chọn số thiết kế đồ họa Tuy nhiên để thiết kế mẫu Layout chuyên nghiệp đẹp mắt yếu tố mỹ thuật, bạn cần phải có kiến thức tốt việc sử dụng công cụ hỗ trợ phần mềm Adobe Photoshop điều giúp bạn tiết kiệm thời gian làm việc hoàn chỉnh mẫu thiết kế yêu cầu đề Phần mềm thực đồ án:Photoshop CC 2015.5 3.1 Tổng quan Photoshop CC 2015.5 Photoshop CC 2015 phần mềm biết tới với nhiều chức hỗ trợ chỉnh sửa hình ảnh, tạo ảnh tĩnh ảnh động độc đáo Bên cạnh đó, Photoshop CC 2015 cịn bao gồm nhiều tính hấp dẫn khác cắt ảnh, làm bìa sách, nhãn vở, bìa văn báo cáo, tiểu luận, đồ án … Photoshop CC 2015 đại đa số người dùng toàn giới sử dụng thiếu laptop, PC nhà thiết kế, đồ họa Sử dụng phần mềm Photoshop thiết kế giao diện web ứng dụng thương mại điện tử Các cải tiến Adobe Photoshop CC 2015 bao gồm: • Artboards • Export nhanh hiệu • Tìm stock nhanh library (stock) • Cho phép thêm layer style • Thiết kế phù hợp với iOS • Hiệu ứng làm mờ (blur) thật với noise • “Trị mụn” “cứu ảnh” tốt – nhanh • Glyph Panel • Move and extend objects with more control • Better panoramas with Content-Aware Fill • Adobe Camera Raw 9.1 – thêm sương mù • Hỗ trợ hình HiDPI • Làm nhẹ tường tác với 3D model • Tạo Bump maps từ ảnh • In 3D 10