Giáo trình Thiết kế giao diện Web (Photoshop)
Ủ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
của Hiệu trưởng Trường Cao đẳng Nghề Đà Lạt
(LƯU HÀNH NỘI BỘ)
Lâm Đồng, năm 2019
LỜI GIỚI THIỆU
Vài nét về xuất xứ giáo trình:
Giáo trình này được viết theo căn cứ Thông tư số 03/2017/TT-BLĐTBXH ngày
01 tháng 03 năm 2017 của Bộ Lao động – Thương binh và Xã hội về việc Quy định về
quy trình xây dựng, thẩm định và 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 này được biên soạn có sự tham gia tích cực của các giáo viên có kinh
nghiệm, cùng với những ý kiến đóng góp quý báu của các chuyên gia về lĩnh vực công
nghệ thông tin.
Mối quan hệ của tài liệu với chương trình, mô đun/môn học:
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).
Cấu trúc chung của giáo trình này bao gồm 2 bài chính:
Bài 1: Giới thiệu về thiết kế giao diện web
Bài 2. Tạo layout trang web chuyên nghiệp
Lời cảm ơn
Giáo trình được biên soạn trên cơ sở các văn bản quy định của Nhà nước và tham
khảo nhiều tài liệu liên quan có giá trị. Song chắc hẳn quá trình biên soạn không tránh
khỏi những thiếu sót nhất định. Ban biên soạn mong muốn và thực sự cảm ơn những ý
kiến nhận xét, đánh giá của các chuyên gia, các thầy cô đóng góp cho việc chỉnh sửa
để giáo trình ngày một hoàn thiện hơn.
Lâm Đồng, ngày 10 tháng 12 năm 2019
Tham gia biên soạn
1. Phạm Đình Nam
2. Ngô Thiên Hoàng
3. Nguyễn Quỳnh Nguyên
4. Phan Ngọc Bảo
2
Bài 1: Giới thiệu về thiết kế giao diện web ................................................................ 4
1. Tạo theme cho cửa hàng bán đồ thủ công ............................................................. 4
Xác định mục tiêu kinh doanh ....................................................................................4
Chuẩn bị......................................................................................................................4
Chọn typeface (kiểu chữ)............................................................................................6
Chuẩn bị tài liệu..........................................................................................................6
Chào đón khách hàng mới ..........................................................................................6
Tạo lòng tin cho khách hàng.....................................................................................10
Thu thập thông tin người mua ..................................................................................13
2. 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ế khu vực Footer (chân trang) .......................................................................26
Bài 2. Tạo layout trang web chuyên nghiệp............................................................. 27
1. Sử dụng Mockup...................................................................................................27
2. Thiết lập Canvas ...................................................................................................28
3. Tạo tiêu đề ............................................................................................................31
4. Tạo mẫu texture ....................................................................................................36
5. Thêm logo.............................................................................................................38
6. Thêm thanh điều hướng........................................................................................40
7. Thanh trượt nội dung ............................................................................................42
8. Thêm một số dòng chào mừng .............................................................................47
9. Hoàn thiện tiêu đề.................................................................................................48
10. Sử dụng Gradient cho nền ..................................................................................49
11. Thêm thanh trượt xoay........................................................................................50
12. Tạo đường phân chia nội dung ...........................................................................51
13. Thêm nội dung chính ..........................................................................................51
3
Bài 1: Giới thiệu về thiết kế giao diện web
1. Tạo theme cho cửa hàng bán đồ thủ công
Trong hướng dẫn này, chúng ta sẽ tạo ra một bố cục cho một cửa hàng bán đồ thủ
công. Bài viết sẽ không nói chi tiết về kích thước phông chữ hoặc mã màu cụ thể,
nhưng thay vào đó sẽ tập trung vào việc giải thích các lựa chọn phông chữ, màu sắc, tỷ
lệ và các yếu tố khác.
Bạn cần:
Hình ảnh giao diện chính và hình ảnh sản phẩm
Xác định mục tiêu kinh doanh
Trước khi 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 về thương hiệu hay để bán sản phẩm
cho khách hàng mới, hoặc cung cấp giá trị đầu tiên, có được thông tin và sau đó bán
sản phẩm. Bạn cần phải suy nghĩ về mục tiêu kinh doanh và 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 bằng cách đặt những câu hỏi sau:
Bạn định bán gì?
Ai sẽ quan tâm đến sản phẩm?
Tại sao họ nên mua từ bạn?
Làm thế nào để cung cấp giá trị?
Bài hướng dẫn này tập trung vào hình ảnh mạnh mẽ và 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 và hấp dẫn những người
quan tâm đến hình ảnh.
Chuẩn bị
cách và định hướng chung.
Bước 1
Thu thập hình ảnh bạn thích cho bảng moodboard và bảng màu color palette.
Nhiều người sử dụng Pinterest, nhưng gomoodboard.com rất hữu ích và được thiết kế
hoàn toàn để tạo các bảng moodboard.
4
Bước 2
Tiếp theo hãy tạo một bảng màu cho thiết kế vì một sản phẩm có liên quan đến
thương hiệu và sẽ thu hút khách hàng. Tốt nhất nên sử dụng công cụ tạo bảng màu như
Adobe Color CC (trước có tên là Kuler) để tiết kiệm thời gian chọn màu sắc.
Tải hình ảnh lên bảng moodboard và xem màu nào được tạo ra. Điều chỉnh bảng
màu để phù hợp với nhu cầu và lưu lại màu sắc để tham khảo trong tương lai.
5
Chọn typeface (kiểu chữ)
Lấy cảm hứng từ một số mục trong bảng moodboard, chúng ta sẽ chọn phông
chữ Source Pro, bao gồm cả phiên bản sans và serif. Sử dụng hỗn hợp hai phông chữ
sẽ tạo cảm giác cân bằng và làm tiêu đề trông mạnh mẽ.
Chuẩn bị tài liệu
Bước 1
Mở Adobe Photoshop và tạo một tài liệu mới CMD + N. Xác định kích thước
theo ý bạn, trong ví dụ này là 1400x3564px.
Bước 2
Sau đó truy cập vào View > New Guide… để thiết lập một số đường dẫn
(guideline) để bố cục có đủ không gian và cân bằng. Thông thường, người dùng hay
chọn 1000px làm điểm khởi đầu và thêm một số đường dẫn từ góc.
Lưu ý: Các đường dẫn được sử dụng cho hướng dẫn này: dọc với 200px, 500px,
550px, 700px, 850px, 900px và 1200px.
Mẹo: Bạn cũng có thể sử dụng plugin GuideGuide Photoshop để làm cho quá
trình này nhanh hơn.
Chào đón khách hàng mới
Chúng ta sẽ bắt đầu thiết kế cửa hàng bằng cách tạo ra một khu vực phía trên hấp
dẫn thu hút sự chú ý của khách truy cập và gửi một tin nhắn tức thời giới thiệu về
trang web.
Bước 1
Tạo một nhóm mới gọi là "Navigation" và đặt đường dẫn ngang mới với giá
trị 130px. Đây là nơi logo, liên kết điều hướng và tìm kiếm sẽ "cư trú". Đặt logo ở bên
trái, nếu không có, hãy tạo một hình chữ nhật và đặt văn bản vào đó.
6
Bước 2
Bây giờ hãy đặt các mục điều hướng dưới dạng văn bản thuần. Từ giai đoạn lập
kế hoạch, bạn nên biết những gì cần đưa vào điều hướng để khách hàng tiềm năng thấy
hữu ích. Sử dụng công cụ Horizontal Type Tool (T) để viết các tiêu đề liên kết và đặt
chúng bên cạnh logo với một khoảng cách hợp lý.
Bước 3
Tìm kiếm là một chức năng vô cùng quan trọng. Làm cho trường tìm kiếm của
bạn trở nên nổi bật và có thể dễ dàng truy cập bằng cách đặt nó ở bên phải trên thanh
điều hướng trên cùng. Để tạo nó sử dụng công cụ Rectangle Tool (U) và Horizontal
Type Tool (T). Lưu ý rằng màu sắc được lấy cảm hứng từ hình ảnh chúng ta đã sử
dụng với Adobe Color CC.
7
Bước 4
Bây giờ đã đến lúc đặt một hình ảnh nổi bật sẽ là điểm nhấn cho toàn bộ trang
web khi khách truy cập lần đầu tiên nhìn thấy nó. Như bạn thấy trong các trang web
ngày nay, chúng ta nên chọn hình ảnh chất lượng cao với trọng tâm rõ ràng, cho phép
các phần văn bản và giao diện người dùng được phủ lên.
Sử dụng công cụ Rectangle Tool (T) để vẽ một hình chữ nhật với kích
thước 1400x700px (màu bất kỳ) và đặt nó ngay bên dưới thanh điều hướng trên cùng
(nhớ đặt đường dẫn ngang là 130px cho hình này). Sau đó, kéo một hình ảnh đã chọn
và đặt lớp này lên trên lớp hình chữ nhật.
Giữ phím Alt và di chuột qua lớp hình ảnh cho đến khi bạn thấy một mũi tên nhỏ
trỏ xuống, sau đó nhả chuột để tạo một Clipping Mask để hình ảnh chỉ hiển thị trong
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 của ảnh.
8
Bước 5
Để khiến hình ảnh thêm thu hút, hãy thêm một gradient màu đi từ màu trong suốt
sang màu đen ở phía dưới. Chọn công cụ Gradient Tool (G) và tùy chỉnh nó để đi từ
màu đen #000000 đến trong suốt. Sau đó giữ phím Shift và kéo chuột từ dưới cùng
của hình ảnh tới khoảng giữa để tạo một gradient. Sau đó, đưa nó vào một Clipping
Mask và giảm Opacity xuống còn 50%. Đổi tên lớp này thành "Shadow" để dễ dàng
xác định.
Bước 6
Bây giờ là lúc sử dụng một dòng tiêu đề mạnh mẽ thu hút ánh mắt của khách truy
cập và khuyến khích họ tìm hiểu thêm. Sử dụng cỡ chữ Sans Pro lớn và bôi đậm với
tiêu đề ngắn. Ở đây sử dụng phông chữ Source Sans Pro (Black) kích thước 70px và
160 cho tracking chữ.
9
Bước 7
Bạn đã thu hút sự chú ý của người dùng, bây giờ cung cấp một tiêu đề phụ và
quan trọng nhất là một lời mời gọi. Ở đây, ví dụ sử dụng kích thước 28px cho phông
chữ Source Serif Pro (định dạng Regular) cho tiêu đề phụ và được sử dụng lại nút
tìm kiếm để giữ giao diện tính thống nhất.
Lưu ý đến khoảng trống được sử dụng ở đây. Luôn luôn để không gian đủ xung
quanh các yếu tố để chúng có thể nhìn thấy nhanh và trông tổ chức hơn. Ngoài ra, nếu
nhìn kỹ, bạn sẽ thấy rằng các lớp văn bản gần nhau hơn.
Tạo lòng tin cho khách hàng
Vậy là bạn đã xong phần chào đón khách hàng. Sau khi đã thu hút sự chú ý và
quan tâm của khách, đã đến lúc chúng ta cho thấy một số lợi ích mà cửa hàng cung
cấp.
Bước 1
Giữ phần đầu của trang web ở mức tối thiểu để tạo tính thẩm mỹ đơn giản và
sạch sẽ cho phần còn lại của bố cục. Đặt tiêu đề thu hút khách truy cập và một mô tả
ngắn gọn sẽ khuyến khích họ nhiều hơn. Ở đây sử dụng phông chữ Source Sans Pro
(Semibold) 24px và màu xám đậm #282723. Đảm bảo để lại nhiều khoảng trống phía
trên dòng tiêu đề sao cho phù hợp với khu vực trên đầu.
Đối với mô tả sử dụng màu sáng để làm yếu tầm nhìn và biết đây là tiêu đề phụ.
Trong ví dụ này, sử dụng phông chữ Source Serif Pro (Regular) kích thước 16px và
màu xám #adadad.
10
Bước 2
Một cách hiệu quả để tạo lòng tin là sử dụng hình ảnh hấp dẫn chất lượng cao
kích thích và tạo mong muốn từ khách. Đảm bảo đầu tư thời gian để chụp những bức
ảnh tuyệt vời về sản phẩm của bạn hoặc thuê được một nhiếp ảnh gia chuyên nghiệp.
Đối với hướng dẫn này, chúng ta sẽ sử dụng các sản phẩm hư cấu được lấy từ
Unsplash và Stock Up.
Chọn công cụ Rectangle Tool (U) và vẽ một hình chữ nhật. Sau đó kéo ảnh sản
phẩm vào Photoshop, đặt nó trên hình chữ nhật và tạo một Clipping Mask. Thay đổi
kích thước hình ảnh nếu cần thiết bằng cách nhấn CMD + T.
Bước 3
11
Để giữ mọi thứ đơn giản, chúng ta sẽ chỉ cung cấp thông tin cơ bản về sản phẩm
bao gồm tiêu đề và giá (điều này có thể gây sự tò mò cho người mua).
Chọn cùng một phông chữ Source Serif Pro và nhập tiêu đề bằng màu xám đậm
như sử dụng cho dòng tiêu đề của phần này. Sau đó sử dụng màu xám sáng hơn cho
giá, vì nó là một thông tin phụ và không đòi hỏi quá nhiều sức mạnh thị giác. Một điều
nữa cần ghi nhớ là các yếu tố cửa hàng như tiêu đề, nút kêu gọi hành động (call to
action) và các khối mô tả cần được tập trung.
Bước 4
Bây giờ đặt tất cả các lớp sản phẩm vào một nhóm và sao chép chúng bằng cách
nhấn CMD + J, đặt chúng giữa các đường dẫn dọc được xác định trước đó để tạo
khoảng cách giữa.
Bước 5
Trong phần "Trending" (Xu hướng), bạn nên để ba sản phẩm vì đó là lựa chọn
thuyết phục hơn. Bây giờ chúng ta sẽ thiết lập đường phân cách để chia bố cục thành
12
các phần. Trong ví dụ này sử dụng công cụ Line Tool (U) 1px màu xám
nhạt #e6e6e6 để hiển thị nhưng không quá mạnh.
Mẹo: Giữ phím Shift để dễ dàng vẽ một đường ngang hoàn hảo.
Bước 6
Bây giờ chúng ta hãy tạo ra một phần khác cho thấy nhiều sản phẩm hơn và gọi
nó là "Popular". Phần này bạn nên chọn những sản phẩm phổ biến và thu hút người
dùng.
Tạo bản sao bằng cách nhấn CMD + J và tùy chỉnh tiêu đề, mô tả và sản phẩm
của phần "Trending". Sao chép nhiều sản phẩm hơn và tạo lưới 3x2 cho sản phẩm tốt
nhất.
Thu thập thông tin người mua
Sau khi phơi bày hầu hết các hình ảnh để gợi lên sự quan tâm từ khách mua, bây
13
giờ là thời gian để thu thập thông tin của khách truy cập trong trường hợp họ không
muốn mua ngay bây giờ, vì vậy bạn có thể tiếp cận sau.
Bước 1
Chúng ta sẽ tạo một phần blog đơn giản bằng cách sử dụng cùng một định dạng
tiêu đề, mô tả và một số đoạn trích của các bài đăng trên blog để chuyển hướng người
dùng tới nội dung có thể khiến họ quan tâm.
Chọn công cụ Rectangle Tool (U) và vẽ một hình chữ nhật lớn sẽ làm nền cho
phần mới này. Sử dụng màu xám nhạt tinh tế để tạo ra một sự tách biệt nhẹ giữa các
sản phẩm, màu được sử dụng ở đây là #fbfafa. Bây giờ sao chép tiêu đề và mô tả của
phần trước và đặt chúng lên trên nền mới.
Bước 2
Bây giờ chọn công cụ Horizontal Type Tool (T) và nhập tiêu đề, ngày tháng và
trích đoạn ngắn của bài đăng blog. Lại một lần nữa sử dụng phông chữ Source Serif
Pro cho tiêu đề và mô tả và Source Sans Pro cho ngày.
Ngay cả trong khối blog này, bạn sẽ nhận thấy hệ thống phân cấp thị giác rõ
ràng, tiêu đề là màu tối nhất và lớn nhất và các yếu tố khác nhỏ hơn và nhạt hơn về
màu sắc. Luôn luôn sử dụng hệ thống phân cấp thị giác để đạt được sự hợp lý và giữ
tính nhất quán cho bài đăng trên blog lớn như các khối sản phẩm.
14
Bước 3
Bây giờ đặt tất cả các lớp đăng bài trên blog vào một nhóm và sao chép nó hai
lần bằng cách nhấn CMD + J, đặt nó giữa các đường dẫn đứng để lại khoảng trống
như với các sản phẩm.
Bước 4
Sau khi hiển thị một số sản phẩm và các bài viết trên blog có giá trị, giờ là lúc tạo
một mẫu với lời kêu gọi hành động rõ ràng để đăng ký. Sử dụng công cụ Rectangle
Tool (U), chọn một màu sẫm, như màu #282723 và vẽ một nền cho mẫu đăng ký.
Bằng cách sử dụng nền tối hơn, bạn sẽ tạo độ tương phản thu hút sự chú ý của người
xem.
15
Bước 5
Bây giờ viết một lời quảng cáo ngắn giải thích tại sao mọi người nên đăng ký, thể
hiện lợi ích hơn là các tính năng. Sau đó điều hướng đến thiết kế và sao chép trường
nút tìm kiếm để sử dụng lại cho mẫu đăng ký. Kéo các lớp đã sao chép và đặt chúng
lên trên nền vừa tạo sau đó tùy chỉnh trường nhập và nút gọi hành động.
Bước 6
Cuối cùng, mỗi mẫu phải có một chân trang có liên kết để mọi người có thể cuộn
xuống và tìm điều hướng tới các trang chính như hỗ trợ khách hàng, thông tin liên hệ,
mạng xã hội và nhiều hơn thế nữa.
Sao chép các lớp văn bản đăng blog và tuỳ chỉnh chúng để hiển thị liên kết bạn
chọn. Chia các nhóm liên kết khác nhau và tạo các cột có khoảng cách đều nhau trong
một hàng. Lưu ý, bạn nên thêm dòng bản quyền ở cuối cùng của bố cục.
Vậy là chúng ta đã hoàn thành thiết kế theme cho cửa hàng bán đồ thủ công, bây
giờ hãy tiếp tục và xem lại các lớp tài liệu, xóa các tài liệu không cần thiết để khiến nó
hoàn hảo hơn.
16
2. Tạo Landing page cho trang web du lịch
Landing page đơn giản, sạch sẽ cho một trang web du lịch. Trong quá trình này, các
bạn sẽ được hướng dẫn cách tạo lưới tùy chỉnh với các đường dẫn, tạo kiểu chữ,
sử dụng rất nhiều không gian trắng và sáng tác nội dung trang web theo cách chuyên
nghiệp.
Tài liệu
Để tiện theo dõi hướng dẫn, bạn sẽ cần những tài liệu sau (có sẵn miễn phí):
Hình ảnh liên quan đến du lịch
Phông chữ PT Serif, Aller, Open Sans từ Fontsquirrel.com
Hình đại diện
Xem thêm:
Chuẩn bị tài liệu
Bước 1
Bắt đầu bằng cách tạo một tài liệu mới (File > New ...) bằng cách sử dụng các cài
đặt được hiển thị bên dưới.
17
Bước 2
Hãy thiết lập một số đường dẫn để bố cục có đủ không gian và trông cân bằng.
Việc này sẽ đảm bảo sự hoàn hảo cho pixel và xác định chiều rộng trang web. Chia
khoảng trống thành hai nửa theo chiều dọc để có thể tạo một thành phần trung tâm. Đi
tới View > New Guide… và đặt một số đường dẫn. Nhiều người thường chọn 1000px
làm chiều rộng trang web và thêm một số đường dẫn từ góc để tạo không gian.
Lưu ý: Các đường dẫn được sử dụng cho hướng dẫn này: theo chiều dọc ở
200px, 260px, 700px, 1140px và 1200px.
Mẹo: Bạn cũng có thể sử dụng plugin GuideGuide Photoshop để làm cho quá
trình này nhanh hơn.
Bước 3
Tiếp theo chúng ta sẽ tạo ra nhóm lớp có tiêu đề Header, Features, Social Proof,
CTA và Footer. Giữ nguyên phong cách Photoshop này sẽ giúp mọi thứ được sắp xếp
và dễ dàng điều hướng hoặc chỉnh sửa. Để tạo nhóm, vào Layer > New > Group ... và
đặt tên mỗi một tiêu đề như đã đề cập. Để tạo nhóm nhanh chóng chỉ cần nhấp vào
biểu tượng.
18
Thiết kế khu vực Header (tiêu đề)
Tiêu đề rất quan trọng đối với mỗi trang web vì nó là cơ hội đầu tiên thuyết phục
khách truy cập mới. Đây là nơi mà các nhà thiết kế, cần phải sử dụng hình ảnh nổi bật
và thông điệp rõ ràng với một số hành động kêu gọi khách truy cập.
Bước 1
Đầu tiên chúng ta sẽ thay đổi màu nền thành một màu thu hút ánh nhìn, trong ví
dụ này sử dụng màu xám nhạt #ebebeb. Sau đó, mở nhóm Header và sử dụng công
cụ Rectangle Tool (U) vẽ một hình chữ nhật với kích thước 1000x600px và đặt nó
giữa các hướng dẫn dọc. Sau đó, tải ảnh, kéo nó vào tài liệu Photoshop và đặt nó lên
trên lớp hình chữ nhật. Tiếp theo giữ phím Alt và di chuột qua lớp ảnh cho đến khi bạn
thấy một mũi tên nhỏ trỏ xuống, sau đó nhả ra. Thao tác này sẽ tạo một Clipping
Mask. Bây giờ nhấn CMD + T và thay đổi kích thước ảnh để phù hợp với nhu cầu.
Mẹo: giữ phím Shift để thay đổi theo tỷ lệ.
Bước 2
Bây giờ chúng ta cần thêm một lớp màu trong suốt để làm tối hình ảnh và văn
bản trắng dễ dàng đọc được. Tạo một lớp mới phía trên hình ảnh và tạo một Clipping
Mask cho nó. Sau đó, phủ lớp này bằng một màu đen bóng và thay
đổi Opacity khoảng 20% để vẫn có thể nhìn thấy hình ảnh.
19
Bước 3
Bây giờ đặt một logo đơn giản và thanh điều hướng ở trên cùng. Chọn công
cụ Horizontal Type Tool (T) và viết tiêu đề ở phía bên tay trái. Hãy chắc chắn rằng
tiêu đề dễ đọc và có đủ không gian xung quanh nó. Logo sẽ nằm ở góc trên cùng bên
trái vì đây là một công ước trên web phổ biến và điều mà nhiều khách truy cập mong
đợi. Ở đây sử dụng phông chữ Aller cho tiêu đề và Open Sans cho các mục điều
hướng.
Bước 4
Bây giờ đến phần thiết kế thông điệp chính, bạn nên hạn chế strapline để một
hoặc hai câu và chắc chắn rằng nó ngắn, dễ đọc. Trong trường hợp này sử dụng phông
chữ Open Sans 32px để viết thông điệp chính, nhấn mạnh vào cụm từ chính, trong ví
dụ này là "you travel" bằng cách bôi đậm nó.
Dòng thứ hai nhỏ hơn nhiều, do đó buộc nó phải nhận tầm quan trọng thứ yếu, vì
vậy mọi người sẽ đọc nó sau thông điệp chính. Ở đây, chúng ta sẽ tạo kiểu với khoảng
cách lớn hơn giữa các chữ cái do các ký tự là chữ hoa. Lưu ý nơi đặt tin nhắn, luôn
luôn suy nghĩ về độ tương phản để người đọc dễ dàng đọc hơn.
20
Tải về để xem bản đầy đủ
61 trang
10/05/2022
7320
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Thiết kế giao diện Web (Photoshop)", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- giao_trinh_thiet_ke_giao_dien_web_photoshop.pdf
