Căn cứ vào chương trình đào tạo nghề Thiết kế trang web, giáo trình giúp cung cấp cho người học những kiến thức cơ bản về thiết kế web cũng như kỹ năng sử dụng phần mềm Photoshop để thiết kế trang web. Để học được mô đun này người học cần có kiến thức cơ bản về ngôn ngữ HTML và kỹ thuật vẽ đồ họa (Corel Draw).
ỦY BAN NHÂN DÂN TỈNH LÂM ĐỒNG TRƯỜNG CAO ĐẲNG NGHỀ ĐÀ LẠT GIÁO TRÌNH MƠN HỌC/ MƠ ĐUN: THIẾT KẾ GIAO DIỆN WEB (PHOTOSHOP) NGÀNH/ NGHỀ: THIẾT KẾ TRANG WEB TRÌNH ĐỘ: CAO ĐẲNG Ban hành kèm theo Quyết định số:1157/QĐ-CĐNĐL ngày 11 tháng 12 năm 2019 Hiệu trưởng Trường Cao đẳng Nghề Đà Lạt (LƯU HÀNH NỘI BỘ) Lâm Đồng, năm 2019 TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng ngun trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm Giáo trình lưu hành nội Trường Cao đẳng Nghề Đà Lạt LỜI GIỚI THIỆU Vài nét xuất xứ giáo trình: Giáo trình viết theo Thơng tư số 03/2017/TT-BLĐTBXH ngày 01 tháng 03 năm 2017 Bộ Lao động – Thương binh Xã hội việc Quy định quy trình xây dựng, thẩm định ban hành chương trình; tổ chức biên soạn, lựa chọn, thẩm định giáo trình đào tạo trình độ trung cấp, trình độ cao đẳng Quá trình biên soạn: Giáo trình biên soạn có tham gia tích cực giáo viên có kinh nghiệm, với ý kiến đóng góp quý báu chuyên gia lĩnh vực công nghệ thông tin Mối quan hệ tài liệu với chương trình, mơ đun/mơn học: Căn vào chương trình đào tạo nghề Thiết kế trang web, giáo trình giúp cung cấp cho người học kiến thức thiết kế web kỹ sử dụng phần mềm Photoshop để thiết kế trang web Để học mô đun người học cần có kiến thức ngơn ngữ HTML kỹ thuật vẽ đồ họa (Corel Draw) Cấu trúc chung giáo trình bao gồm chính: Bài 1: Giới thiệu thiết kế giao diện web Bài Tạo layout trang web chuyên nghiệp Lời cảm ơn Giáo trình biên soạn sở văn quy định Nhà nước tham khảo nhiều tài liệu liên quan có giá trị Song hẳn q trình biên soạn khơng tránh khỏi thiếu sót định Ban biên soạn mong muốn thực cảm ơn ý kiến nhận xét, đánh giá chun gia, thầy đóng góp cho việc chỉnh sửa để giáo trình ngày hồn thiện Lâm Đồng, ngày 10 tháng 12 năm 2019 Tham gia biên soạn Phạm Đình Nam Ngơ Thiên Hồng Nguyễn Quỳnh Nguyên Phan Ngọc Bảo Bài 1: Giới thiệu thiết kế giao diện web Tạo theme cho cửa hàng bán đồ thủ công Xác định mục tiêu kinh doanh Chuẩn bị Chọn typeface (kiểu chữ) Chuẩn bị tài liệu Chào đón khách hàng Tạo lòng tin cho khách hàng 10 Thu thập thông tin người mua 13 Tạo Landing page cho trang web du lịch 17 Tài liệu 17 Chuẩn bị tài liệu 17 Thiết kế khu vực Header (tiêu đề) 19 Thiết kế khu vực Features (Tính năng) 22 Thiết kế khu vực Social Proof (Lời chứng thực) 23 Thiết kế cho khu vực Final CTA (Lời kêu gọi hành động) 24 Thiết kế khu vực Footer (chân trang) 26 Bài Tạo layout trang web chuyên nghiệp 27 Sử dụng Mockup 27 Thiết lập Canvas 28 Tạo tiêu đề 31 Tạo mẫu texture 36 Thêm logo 38 Thêm điều hướng 40 Thanh trượt nội dung 42 Thêm số dòng chào mừng 47 Hoàn thiện tiêu đề 48 10 Sử dụng Gradient cho 49 11 Thêm trượt xoay 50 12 Tạo đường phân chia nội dung 51 13 Thêm nội dung 51 Bài 1: Giới thiệu thiết kế giao diện web Tạo theme cho cửa hàng bán đồ thủ công Trong hướng dẫn này, tạo bố cục cho cửa hàng bán đồ thủ cơng Bài viết khơng nói chi tiết kích thước phơng chữ mã màu cụ thể, thay vào tập trung vào việc giải thích lựa chọn phơng chữ, màu sắc, tỷ lệ yếu tố khác Bạn cần: Hình ảnh giao diện hình ảnh sản phẩm Phơng chữ, ví dụ sử dụng hai phơng chữ Source Sans Pro Source Serif Pro từ Font Squirrel Xác định mục tiêu kinh doanh Trước bắt đầu thiết kế bố cục, trước tiên bạn cần xác định mục tiêu kinh doanh Ưu tiên hàng đầu để nâng cao nhận thức thương hiệu hay để bán sản phẩm cho khách hàng mới, cung cấp giá trị đầu tiên, có thơng tin sau bán sản phẩm Bạn cần phải suy nghĩ mục tiêu kinh doanh nhu cầu người dùng để thiết kế bố cục thuyết phục khách hàng Bắt đầu xác định mục tiêu kinh doanh cách đặt câu hỏi sau: Bạn định bán gì? Ai quan tâm đến sản phẩm? Tại họ nên mua từ bạn? Làm để cung cấp giá trị? Bài hướng dẫn tập trung vào hình ảnh mạnh mẽ sử dụng rộng rãi khơng gian âm để tạo cảm giác thoải mái cho thiết kế sang trọng hấp dẫn người quan tâm đến hình ảnh Chuẩn bị Trước bắt tay vào sử dụng Adobe Photoshop, xác định màu sắc, phong cách định hướng chung Bước Thu thập hình ảnh bạn thích cho bảng moodboard bảng màu color palette Nhiều người sử dụng Pinterest, gomoodboard.com hữu ích thiết kế hoàn toàn để tạo bảng moodboard Bước Tiếp theo tạo bảng màu cho thiết kế sản phẩm có liên quan đến thương hiệu thu hút khách hàng Tốt nên sử dụng công cụ tạo bảng màu Adobe Color CC (trước có tên Kuler) để tiết kiệm thời gian chọn màu sắc Tải hình ảnh lên bảng moodboard xem màu tạo Điều chỉnh bảng màu để phù hợp với nhu cầu lưu lại màu sắc để tham khảo tương lai Chọn typeface (kiểu chữ) Lấy cảm hứng từ số mục bảng moodboard, chọn phông chữ Source Pro, bao gồm phiên sans serif Sử dụng hỗn hợp hai phông chữ tạo cảm giác cân làm tiêu đề trông mạnh mẽ Chuẩn bị tài liệu Bước Mở Adobe Photoshop tạo tài liệu CMD + N Xác định kích thước theo ý bạn, ví dụ 1400x3564px Bước Sau truy cập vào View > New Guide… để thiết lập số đường dẫn (guideline) để bố cục có đủ khơng gian cân Thông thường, người dùng hay chọn 1000px làm điểm khởi đầu thêm số đường dẫn từ góc Lưu ý: Các đường dẫn sử dụng cho hướng dẫn này: dọc với 200px, 500px, 550px, 700px, 850px, 900px 1200px Mẹo: Bạn sử dụng plugin GuideGuide Photoshop để làm cho trình nhanh Chào đón khách hàng Chúng ta bắt đầu thiết kế cửa hàng cách tạo khu vực phía hấp dẫn thu hút ý khách truy cập gửi tin nhắn tức thời giới thiệu trang web Bước Tạo nhóm gọi "Navigation" đặt đường dẫn ngang với giá trị 130px Đây nơi logo, liên kết điều hướng tìm kiếm "cư trú" Đặt logo bên trái, khơng có, tạo hình chữ nhật đặt văn vào Bước Bây đặt mục điều hướng dạng văn Từ giai đoạn lập kế hoạch, bạn nên biết cần đưa vào điều hướng để khách hàng tiềm thấy hữu ích Sử dụng công cụ Horizontal Type Tool (T) để viết tiêu đề liên kết đặt chúng bên cạnh logo với khoảng cách hợp lý Bước Tìm kiếm chức vơ quan trọng Làm cho trường tìm kiếm bạn trở nên bật dễ dàng truy cập cách đặt bên phải điều hướng Để tạo sử dụng cơng cụ Rectangle Tool (U) Horizontal Type Tool (T) Lưu ý màu sắc lấy cảm hứng từ hình ảnh sử dụng với Adobe Color CC Bước Bây đến lúc đặt hình ảnh bật điểm nhấn cho toàn trang web khách truy cập lần nhìn thấy Như bạn thấy trang web ngày nay, nên chọn hình ảnh chất lượng cao với trọng tâm rõ ràng, cho phép phần văn giao diện người dùng phủ lên Sử dụng công cụ Rectangle Tool (T) để vẽ hình chữ nhật với kích thước 1400x700px (màu bất kỳ) đặt bên điều hướng (nhớ đặt đường dẫn ngang 130px cho hình này) Sau đó, kéo hình ảnh chọn đặt lớp lên lớp hình chữ nhật Giữ phím Alt di chuột qua lớp hình ảnh bạn thấy mũi tên nhỏ trỏ xuống, sau nhả chuột để tạo Clipping Mask để hình ảnh hiển thị vùng hình chữ nhật Nhấn CMD + T để thay đổi kích thước ảnh, lưu ý nhớ giữ phím Shift để thay đổi kích thước ảnh Giảm Opacity xuống 50% Thêm thêm mô tả dự án Thêm số dòng chào mừng Một lời chào mừng số mô tả trang web 47 Hoàn thiện tiêu đề Chúng ta gần hoàn thành tiêu đề Bây cần thêm hiệu ứng bóng tinh tế để hồn tất Tạo bóng tạo trước cách sử dụng công cụ Brush Để khoảng cách 1px phần đầu bóng 48 10 Sử dụng Gradient cho Tạo màu gradient từ xám nhạt đến trắng Tạo lớp bên tiêu đề áp dụng màu gradient 49 11 Thêm trượt xoay Tạo trượt xoay Áp dụng Inner Shadow cho điểm để biết mục hoạt động trượt 50 12 Tạo đường phân chia nội dung Chọn công cụ Pencil Tool vẽ đường pixel với màu xám nhạt (#aaaaaa) Ẩn cạnh mượt mà cách sử dụng mặt nạ gradient 13 Thêm nội dung Đây layout cột nên cần tạo cột với khoảng cách chúng Ở thực tính tốn đơn giản chia khơng gian có sẵn thành phần khoảng cách chúng 25 pixel Thêm đường hướng dẫn vào phần, sau gỡ bỏ phần 51 Thêm số dịch vụ đặc trưng cách thả vào biểu tượng từ biểu tượng Function Duy trì khoảng cách vật thể đồng 52 Tạo nút "Read More" đơn giản cách chọn công cụ Rectangle Tool để vẽ hình dạng Áp dụng Gradient Overlay Stroke cho nút 53 54 Sao chép nút cho phần khác Chúng ta thêm số mục công việc gần cách vẽ ba hộp giữ hình ảnh áp dụng stroke pixel Kéo hình ảnh vào hộp 55 Tạo bóng làm trước đặt hộp Thêm số mô tả dự án Hãy tạo nguồn cấp liệu Twitter Thả vào biểu tượng chim Twitter Thêm thông báo Twitter 56 Tạo nút cho More Tweets Áp dụng kiểu hình ảnh bên 57 58 Thêm nội dung văn 14 Tạo chân trang hoàn thiện Chọn vùng cho chân trang phủ với màu xám 59 Áp dụng Color Overlay bên Cuối thêm điều hướng chân thông tin quyền 60 Kết cuối 61 ... chương trình đào tạo nghề Thiết kế trang web, giáo trình giúp cung cấp cho người học kiến thức thiết kế web kỹ sử dụng phần mềm Photoshop để thiết kế trang web Để học mô đun người học cần có... đồ họa (Corel Draw) Cấu trúc chung giáo trình bao gồm chính: Bài 1: Giới thiệu thiết kế giao diện web Bài Tạo layout trang web chuyên nghiệp Lời cảm ơn Giáo trình biên soạn sở văn quy định Nhà... Quy định quy trình xây dựng, thẩm định ban hành chương trình; tổ chức biên soạn, lựa chọn, thẩm định giáo trình đào tạo trình độ trung cấp, trình độ cao đẳng Quá trình biên soạn: Giáo trình biên