WEBSITE INTERFACE DESIGN

WEBSITE INTERFACE DESIGN Ảnh: baomoikhanhhoa.com

Giảng viên: ThS Trần Kim Huệ
 Giảng viên: ThS Trần Kim Huệ
2
THỰC HÀNH
BÀI TẬP

SỐ 1
 - Một số thao tác cơ bản
trong Photoshop
- Một số tiện ích của Google Chrome
(Hỗ trợ trong việc
thiết kế giao diện Website)
Giảng viên: ThS Trần Kim Huệ 3
 Một số tiện ích của Google Chrome
1. Chụp ảnh màn hình toàn trang web trên trình duyệt Chrome
(GoFullPage)

2. Phần mềm chụp ảnh màn hình máy tính (Snipping Tool )

3. Cách bật menu chuột phải trên trang web không cho phép
(SuperCopy – Enable Copy)

4. Sử dụng tiện ích dịch ngôn ngữ (Google Dịch)

5. Cách lưu trang Web trên Google Chrome vào thanh dấu
trang (Bookmarks Bar )
…………… Giảng viên: ThS Trần Kim Huệ 4
 1 Chụp ảnh màn hình toàn trang web
trên trình duyệt Chrome
GoFullPage
https://chromewebstore.google.com/detail/gofullpage-full-
page-scre/fdpohaocaechififmbbbbbknoalclacl

- Click nút Thêm vào Chrome, sau đó click nút Thêm ện ích.

Giảng viên: ThS Trần Kim Huệ 5

 Chụp ảnh màn hình toàn trang web
trên trình duyệt Chrome (tt)
- Click icon 3 chấm trên thanh công cụ trình duyệt Google Chrome/
Chọn Tiện ích mở rộng/ Chọn Quản lý các tiện ích.

- Tiện ích GoFullPage: Click nút Enable để bật tính năng.

- Click icon Tiện ích > chọn Ghim để ghim tiện ích GoFullPage.

Giảng viên: ThS Trần Kim Huệ 6

 2
Phần mềm chụp ảnh màn hình máy tính
https://apps.microsoft.
com/detail/9mz95kl8m
r0l?ranMID=46107&ra
- Chạy file Snipping Tool Installer.exe - Chụp ảnh màn hình máy tính: Nhấn tổ nEAID=TnL5HPStwN
w&ranSiteID=TnL5HP

để cài đặt. hợp phím Windows logo key + Shi + StwNw-

zUYpX53nA3rs2O6rA
TDh.w&epi=TnL5HPSt
S hoặc chọn icon snip ở hộp thoại wNw-
zUYpX53nA3rs2O6rA

Snipping Tool để bắt đầu chụp ảnh. TDh.w&irgwc=1&clicki

d=_p021p0mhg9kfahf
srtxwce9jcm2xfhdoun
wn16ms00&OCID=AI
Dcmmaqfwnksg_AFF_
1243925_3327_TnL5
HPStwNw-
zUYpX53nA3rs2O6rA
TDh.w_190407&tduid
=%28ir__p021p0mhg9
kfahfsrtxwce9jcm2xfhd
ounwn16ms00%29%2
83327%29%28124392
5%29%28TnL5HPStw
Nw-
zUYpX53nA3rs2O6rA
TDh.w%29%28%29&
OWTGT=AFF_124392
5&hl=en-us&gl=US

 Hoặc sử dụng nút prtsc (Print Screen) để chụp hình ảnh theo vùng chọn.
Giảng viên: ThS Trần Kim Huệ 7
3 Cách bật menu chuột phải
trên trang web không cho phép
SuperCopy – Enable Copy
- Nhiều trang web không cho click chuột phải để chống sao chép hay
tải nội dung từ trình duyệt. Bạn có thể vô hiệu và sử dụng lại menu chuột phải.

https://chromewebstore.google.com/detail/supercopy-enable-
copy/onepmapfbjohnegdmfhndpefjkppbjkm

- Click nút Thêm vào Chrome.

Giảng viên: ThS Trần Kim Huệ 8

 Cách bật menu chuột phải
trên trang web không cho phép (tt)

- Click nút Thêm ện ích.

- Click biểu tượng 3 chấm trên thanh công cụ trình duyệt Google Chrome.
Chọn Tiện ích mở rộng/ Chọn Quản lý các tiện ích.

- Click nút Enable SuperCopy - Enable Copy để vô hiệu chặn chuột phải
của trang Web .

- Mở trang Web ngăn chặn click chuột phải, sao chép nội dung. Giờ đây, bạn đã
có thể dễ dàng lưu lại nội dung, hình ảnh ở trang Web đó.
Giảng viên: ThS Trần Kim Huệ 9
4 Sử dụng tiện ích Google Dịch
Google Dịch https://chromewebstore.google.com/detail/google-
d%E1%BB%8Bch/aapbdbdomjkkjkaonfhkkikfgjllcleb?hl=vi

- Click nút Add extension (Thêm vào Chrome).

Giảng viên: ThS Trần Kim Huệ 10

 Sử dụng tiện ích Google Dịch
- Click biểu tượng 3 chấm trên thanh công cụ trình duyệt Google Chrome.
Chọn Tiện ích mở rộng/ Chọn Quản lý các tiện ích.

- Click nút Enable Google Dịch.

- Click icon Tiện ích > chọn Ghim để ghim tiện ích GoFullPage.

Giảng viên: ThS Trần Kim Huệ 11

 Sử dụng tiện ích Google Dịch
- Ở Tiện ích Google Dịch > Chọn Chi tiết> - Chọn biểu tượng 3 chấm> Chọn Dịch
chọn Tùy chọn tiện ích.

- Mở trang Web mà bạn cần dịch từ

tiếng Anh, Nhật, ….. để dịch sang
tiếng Việt.

Giảng viên: ThS Trần Kim Huệ 12

5 Cách lưu trang Web trên Google Chrome
vào thanh dấu trang (Bookmarks Bar)
- Trình duyệt Chrome > Chọn biểu tượng
3 chấm > chọn Dấu trang > Chọn Đánh dấu
thẻ này… > chọn Một thư mục khác…

Giảng viên: ThS Trần Kim Huệ 13

 Cách lưu trang web trên Google Chrome
vào thanh dấu trang - Bookmarks Bar (tt)
- Click chọn Thư mục mới > Đặt tên - Kiểm tra kết quả: Chọn biểu tượng 3 chấm>
cho thư mục vừa tạo> Click nút Lưu. Chọn Dấu trang và danh sách>Chọn
Trình quản lý dấu trang.

Giảng viên: ThS Trần Kim Huệ 14

 Một số thao tác cơ bản trong Photoshop

1. Mở và Lưu Tệp Hình Ảnh 6. Sử Dụng Các Lớp (Layers)

2. Sử Dụng Các Công Cụ Chọn Vùng 7. Làm Sắc Nét và Làm Mờ

3. Hoàn Tác và Làm Lại 8. Chỉnh Sửa và Xóa Nền

4. Cắt và Chỉnh Kích Thước Hình Ảnh 9. Thêm văn bản

5. Điều Chỉnh Màu Sắc và Ánh Sáng 10. Sử Dụng Bộ Lọc (Filters)
 Một số thao tác cơ bản trong Photoshop
1. Mở và Lưu Tệp Hình Ảnh 2. Sử Dụng Các Công Cụ Chọn Vùng
• Mở hình ảnh: File > Open... • Công cụ chọn vùng: Marquee Tool
(phím tắt M)
• Lưu hình ảnh: File > Save As...
• Công cụ chọn nhanh: Quick Selection Tool
(phím tắt W)
• Công cụ Lasso: Lasso Tool (phím tắt L)

3. Hoàn Tác và Làm Lại

• Hoàn tác: Edit > Undo (phím tắt Ctrl + Z)...

• Làm lại: Edit > Redo (phím tắt Ctrl + Shift + Z)...
 Một số thao tác cơ bản trong Photoshop
4. Cắt và Điều Chỉnh Kích Thước Hình Ảnh 6. Sử Dụng Các Lớp (Layers):
• Dụng cụ cắt: Chọn công cụ Crop Tool • Tạo lớp mới: Layer > New > Layer
(phím tắt C), kéo để chọn khu vực cần cắt,
• Nhân đôi lớp: Chọn lớp và
nhấn Enter.
nhấn Ctrl + J
• Thay đổi kích thước hình ảnh:
Image > Image Size... • Xóa lớp: Kéo lớp vào icon thùng rác
ở dưới cùng của bảng Layers.

5. Điều Chỉnh Màu Sắc và Ánh Sáng

• Điều chỉnh độ sáng/tương phản: Image > Adjustments > Brightness/Contrast...
• Điều chỉnh màu sắc: Image > Adjustments > Hue/Saturation...
• Cân bằng màu: Image > Adjustments > Color Balance...
 Một số thao tác cơ bản trong Photoshop
7. Làm Sắc Nét và Làm Mờ 8. Chỉnh Sửa và Xóa Nền
• Làm sắc nét: Filter > Sharpen > • Xóa nền: chọn Magic Eraser Tool
Unsharp Mask... (phím tắt E)
• Làm mờ: Filter > Blur > chọn loại • Sử dụng công cụ Pen để chọn vùng
làm mờ mong muốn (Gaussian Blur, phức tạp: Pen Tool (phím tắt P), sau đó
Motion Blur, v.v.) tạo vùng chọn từ đường path vừa tạo)

9. Thêm Văn Bản 10. Sử Dụng Bộ Lọc (Filters)

• Chọn công cụ Text (phím tắt T), • Áp dụng các bộ lọc: Filter > chọn bộ lọc
nhấp vào khu vực muốn thêm mong muốn (Blur, Sharpen, Distort,
văn bản và bắt đầu gõ Noise, v.v. )
 1 Xem, chỉnh sửa kích thước ảnh trong Photoshop
- Mở chương trình Photoshop

- Mở tệp tin ảnh cần kiểm tra kích thước:

File/Open/Chọn tệp tin ảnh/ Click nút Open.

- Kiểm tra kích thước của ảnh: Chọn Image/ chọn

Image Size hoặc nhấn tổ hợp phím (Ctrl + Alt + I).

- Hộp thoại Image Size: Hiển thị kích thước chiều

rộng (width) và chiều cao (height), Resolution
(Độ phân giải) của ảnh.

- Thay đổi kích thước ảnh: thay đổi kích thước

 Thông tin về độ phân giải (Resolution) của hình ảnh: của một chiều (rộng hoặc cao),chiều còn lại sẽ
72 pixel là bình thường, 150 trở lên là phù hợp cho in ấn
tự động thay đổi theo cùng một tỷ lệ. Click nút OK.
Giảng viên: ThS Trần Kim Huệ 19
2
Xử lý ảnh cho website trong Photoshop
Hình ảnh là một trong các yếu tố quan trọng nhất hình thành nên một Website.
Bởi vậy, cần chú trọng xử lý hình ảnh cho rõ nét, ấn tượng…

Giảng viên: ThS Trần Kim Huệ 20

 Xử lý ảnh cho website trong Photoshop
- Mở tệp tin ảnh cần xử lý: File > chọn Open >
chọn đường dẫn chứa file hình > click nút Open.

- Trình menu: chọn Filter > chọn Sharpen >

chọn Unsharp Mask…

- Hộp thoại Unsharp Mask: Thiết lập các thông số

cho phù hợp để hình ảnh được rõ nét.

+ Radius: Chỉnh chiều rộng của quầng sáng dọc

hình ảnh.
+ Threshold: Chỉnh giá trị độ tương phản cạnh.
+ Amount: Điều chỉnh quầng sáng của ảnh.
Giảng viên: ThS Trần Kim Huệ 21
 Xử lý ảnh cho website trong Photoshop

Phối hợp nhiều thao tác:

- Image > chọn Adjustments > chọn Curves > điều chỉnh các thông số phù hợp
- Image > chọn Levels > điều chỉnh các thông số phù hợp
- Image > chọn Brightness / Contrast > điều chỉnh các thông số phù hợp
- Filter > chọn Sharpen / Sharpen Edges
Giảng viên: ThS Trần Kim Huệ 22
NAME SURNAME
Kiểm tra
độ phân giải màn hình
- Chuột phải màn hình Desktop/
chọn Display settings.

- Hộp thoại Settings: Ở Display Resolution:

hiển thị thông số độ phân giải màn hình

Độ phân giải 1366 x 768 Pixel. Vậy

tổng số điểm ảnh hiển thị trên màn
hình là 1.049.088 điểm ảnh.

Giảng viên: ThS Trần Kim Huệ 23

3
Cách cài đặt Font chữ cho máy tính

Giảng viên: ThS Trần Kim Huệ 24

 Cách cài đặt Font chữ cho máy tính

Bạn muốn có thể tạo ra những mẫu chữ đẹp, độc, lạ khi gõ văn bản bằng cách
cài thêm font chữ cho máy tính.

Cách 1:

- Tải Font chữ về > Mở file Font chữ mà bạn vừa tải > Chọn Font chữ mà bạn muốn
cài đặt và nhấn Copy.

- Nhấn Paste file vừa copy vào thư mục C:\Windows\Fonts.

Cách 2: Cài font chữ trực tiếp

- Chọn các file mà bạn muốn cài đặt > Chọn chuột phải và nhấn vào Install.

Giảng viên: ThS Trần Kim Huệ 25

Giảng viên: ThS Trần Kim Huệ 26
 Cách tạo bố cục
trang web
chuyên nghiệp
trong Photoshop
Giảng viên: ThS Trần Kim Huệ 27
 - Độ chính xác cao: Photoshop cho phép thiết kế
giao diện web với độ chính xác từng pixel.
LỢI ÍCH
- Tự do sáng tạo: Photoshop có nhiều công cụ và
KHI tính năng mạnh mẽ để thiết kế logo, hình nền,…
THIẾT KẾ đến các yếu tố giao diện phức tạp.

WEBSITE - Dễ dàng chỉnh sửa: Thay đổi các yếu tố thiết kế

BẰNG mà không ảnh hưởng đến phần còn lại của trang web.
Điều này rất hữu ích trong giai đoạn thảo luận và
PHOTOSHOP
phản hồi với khách hàng.

Giảng viên: ThS Trần Kim Huệ 28

 LỢI ÍCH - Tạo ra các yếu tố đồ họa chất lượng cao: Tạo ra
hình ảnh, icon, banner.. chất lượng cao, giúp trang web
KHI của bạn trông chuyên nghiệp và hấp dẫn hơn.
LỢI ÍCH
THIẾT KẾ - Làm việc với layers: Tính năng làm việc với layers
KHI
WEBSITE giúp bạn dễ dàng quản lý và sắp xếp các thành
phần của thiết kế một cách khoa học và linh hoạt.
THIẾT
BẰNG KẾ
- Tích hợp tốt với các công cụ: Illustrator, A er
WEBSITE
PHOTOSHOP Effects, hay các phần mềm phát triển web như
BẰNG Dreamweaver.

PHOTOSHOP - Hỗ trợ tốt cho việc xuất file: Xuất file thiết kế
sang các định dạng cần thiết cho phát triển web
như JPEG, PNG, hoặc SVG.
Giảng viên: ThS Trần Kim Huệ 29
 Bài tập 1: Thực hiện bố cục trang web bằng Photoshop
- Bước 1: Mockup - Bước 8: Thêm các câu chào mừng

- Bước 2: Thiết lập Canvas - Bước 9: Thêm điều khiển xoay thanh trượt
- Bước 3: Tạo header - Bước 10: Tạo Content Divider
- Bước 4: Tạo mẫu Pattern
- Bước 11: Thêm Main Content
- Bước 5: Tạo Logo (nội dung chính)

- Bước 6: Thêm liên kết điều hướng - Bước 12: Thêm điều khiển xoay thanh trượt

- Bước 7: Thêm Content Slider - Bước 13: Tạo Footer và Hoàn thiện
(thanh trượt nội dung)
Giảng viên: ThS Trần Kim Huệ 30
 BƯỚC 1: Mockup

- Lên kế hoạch cho những yêu cầu,

tính năng cần có và giao diện.

- Sắp xếp các ý tưởng trên thành một

Layout chi tiết.

- Sử dụng mô hình và khung lưới để tạo ra

các bố cục .

- Ghép phần tử lại với nhau chỉ bằng

tông màu xám để dễ quan sát, tập trung
vào bố cục tổng thể.
Dịch từ: https://www.photoshoptutorials.ws Giảng viên: ThS Trần Kim Huệ 31
 WEBSITE INTERFACE DESIGN
Giảng viên: ThS Trần Kim Huệ 32
BƯỚC 2: Thiết lập Canvas
1. Tạo một tài liệu mới có kích thước:
+ File/ New (hoặc Ctrl+N): 1200 x 1500 pixel

Chọn toàn bộ tài liệu

Giảng viên: ThS Trần Kim Huệ

2. Tạo bố cục rộng 960 pixel

+ Nhấn Ctrl+A để chọn toàn bộ tài liệu.

+ Vào Select > Transform Selection. Thu nhỏ vùng
chọn xuống còn 960 pixel. Đó là vùng làm việc 33
của layout. Thu nhỏ vùng chọn còn 960 pixel
3. Thêm đường hướng dẫn (Guide)
+ Vào View/ chọn Ruler (Ctrl+R) để hiển thị thước.

+ Nhấp chuột trái vào thanh thước kẻ nằm ngang

và kéo xuống để tạo đường gióng nằm ngang.
Vùng chọn 960 pixel
+ Nhấp chuột trái vào thanh thước kẻ nằm dọc và
kéo xuống để tạo đường gióng nằm dọc.

Giảng viên: ThS Trần Kim Huệ

34
Kết quả thêm đường dẫn (Guide)
4. Thay đổi kích thước phần lựa chọn 5. Thêm các đường hướng dẫn
thành chiều rộng 920 pixel (Guide) vào vùng chọn

+ Vào Select > Transform Selection để thu Kết quả thêm các đường dẫn
nhỏ vùng chọn xuống còn 920 px. (Guide) ở vùng chọn 920px

Tạo phần đệm giữa đường viền và nội dung

Giảng viên: ThS Trần Kim Huệ 35
BƯỚC 3: Tạo header

WEBSITE INTERFACE DESIGN

1. Tạo Thư mục (Folder):

+ Hộp thoại Layer: Click icon Create a new group.

+ Đổi tên Folder vừa tạo: Double click vào tên

Group1, sau đó đổi tên là Header.

2. Lưu file:

Giảng viên: ThS Trần Kim Huệ

- Vào File > Save.
- Chọn đường dẫn chứa thư mục cần lưu tệp tin.
- Đặt tên file: ví dụ là Template.psd Tạo các Folder: Header,
Content, Footer 36
 3. Tạo phần tiêu đề của bố cục

+ Rectangular Marquee để vẽ vùng chọn + Tô màu xám cho vùng chọn và sau đó
có chiều cao 465 pixel - tạo phần tiêu đề sử dụng Layer Styles để tô màu xám.
của bố cục!

Giảng viên: ThS Trần Kim Huệ 37

4. Thêm Gradient vào tiêu đề

- Double click vào layer để mở hộp thoại

Layer Style/ Check vào Gradient Overlay.
Tạo Gradient với 2 màu bên dưới:

+ Foreground : chọn màu #0f201c

+ Background: chọn màu #002931

- Bấm phím G để chọn công cụ Gradient

- Click chuột trái 1 điểm trên và 1 điểm

dưới (như hình).

Giảng viên: ThS Trần Kim Huệ 38

Giảng viên: ThS Trần Kim Huệ
39
 5. Thêm điểm nhấn vào tiêu đề

- Tạo một lớp mới bằng cách nhấn

Ctrl+Alt+Shift+N

- Chọn một cọ mềm (phím B – Brush Tool),

với đường kính 600px.

+ Foreground : chọn màu # 316c73

+ Background: chọn màu #19535a

- Nhấp chuột trái một lần vào giữa tiêu đề.

Giảng viên: ThS Trần Kim Huệ 40

6. Chọn một vùng có chiều cao -Nhấn phím Delete để xóa phần
110 pixel từ trên xuống đã chọn. Xem hình bên dưới

Giảng viên: ThS Trần Kim Huệ 41

7. Thu nhỏ theo chiều dọc (Ctrl+T)

- Chọn Layer.

- Nhấn tổ hợp phím Ctrl+T để tiến hành

thu nhỏ.

- Dùng chuột kéo rê các nút để thu nhỏ

theo chiều dọc.

Giảng viên: ThS Trần Kim Huệ 42

8. Điểm sáng được căn giữa với tiêu đề

- Chọn một cọ mềm (phím B – Brush

Tool) có đường kính 600px.

- Chọn các lớp, tiêu đề và điểm sáng

và nhấn “V” để chuyển sang Công cụ
di chuyển. Trên Bảng tùy chọn,
chọn nút Căn chỉnh trung tâm theo
chiều ngang.

Giảng viên: ThS Trần Kim Huệ 43

 9. Tạo một lớp mới, vẽ một đường nổi bật bằng Công cụ
Bút chì - Pencil Tool

- Tạo một Layer.

- Chọn Pencil Tool với các thông số:

- Size: 2 pixel.
- Color: #01bfd2.

- Vẽ 1 đường thẳng (phối hợp với

phím Shift).

Giảng viên: ThS Trần Kim Huệ 44

10. Sử dụng mặt nạ Gradient để ẩn các cạnh một cách trơn tru

Chọn Công cụ Gradient, tạo Gradient theo thông số bên dưới:

Áp dụng độ dốc ở trên ở phần Mặt nạ (Mash)

45
BƯỚC 4: Tạo mẫu Pattern

Tạo một mẫu Pattern và áp dụng

cho tiêu đề.
- Chọn Công cụ Bút chì, đặt kích
thước cọ thành 2 pixel.
- Thêm hai chấm chạm vào góc
của nhau. Tắt nền và chọn các
chấm.
- Chọn Chỉnh sửa > Xác định Mẫu.

Giảng viên: ThS Trần Kim Huệ 46

- Tạo một lớp mới và đặt nó bên dưới lớp tô sáng. Chọn vùng chúng ta muốn áp
dụng mẫu. Nhấn Shift+F5 để tải hộp thoại Fill. Chọn mẫu (pattern) vừa tạo. Và OK.

Giảng viên: ThS Trần Kim Huệ 47

- Phần lựa chọn đã được điền đầy đủ mẫu. Hãy xem kỹ hơn.

Giảng viên: ThS Trần Kim Huệ 48

 BƯỚC 5: Tạo Logo

1. Thêm điểm sáng sau Logo

Chọn cọ mềm (Brush):

+ Color: #19535a

+ Size: 165px

+ Hardness: 20%

+ Opacity: 56%

Giảng viên: ThS Trần Kim Huệ 49

2. Thêm biểu Logotype (kiểu chữ)

Thêm Type (phím T). Phông chữ (Font) sử dụng là “Bebas”. Tải xuống miễn phí.

Giảng viên: ThS Trần Kim Huệ 50

- Áp dụng hiệu ứng tinh tế cho logo Text –
gồm Gradient Overlay và Drop Shadow.

Kết quả chữ sau khi thực hiện hiệu ứng

Giảng viên: ThS Trần Kim Huệ 51

BƯỚC 6: Thêm liên kết điều hướng

1. Thêm Liên kết điều hướng (Navigation hoặc Menu)

Thêm Type (phím T):

+ Font style: Arial

+ Font size: 14p.

+ Regular
+ Sharp
+ Color: # 1eafb5

Giảng viên: ThS Trần Kim Huệ 52

2. Tạo nút điều hướng – Nút Home

- Sử dụng Rectangular Marquee Tool.

Sau đó, tô bất kỳ màu nào.

- Sử dụng Gradient Overlay theo thông số

như hình bên.

Giảng viên: ThS Trần Kim Huệ 53

BƯỚC 7: Thêm Content Slider
1. Content Slider - Thanh trượt nội dung

- Chọn vùng có kích thước 580 x 295 pixel. - Tô vùng chọn bằng tông màu xám.

Giảng viên: ThS Trần Kim Huệ 54

 - Bây giờ thêm hiệu ứng đổ bóng vào
thanh trượt. Tạo một lớp mới. Chọn Công cụ
- Đưa hình ảnh bạn muốn sử dụng vào. Brush, đặt đường kính thành 400 pixel.
Cắt nó vào lớp cơ sở mà chúng ta đã tạo Mở bảng Brushes, giảm độ tròn. Sử dụng
ở trên. các cài đặt bên dưới:

Giảng viên: ThS Trần Kim Huệ

55
 - Áp dụng một số hiệu ứng làm mờ
- Đặt màu cọ thành #000000 và thêm điểm.
Gaussian để làm mềm các cạnh.

Giảng viên: ThS Trần Kim Huệ 56

- Chọn nửa dưới của bóng và xóa nó. - Đặt lại vị trí bóng ngay phía trên thanh trượt

Giảng viên: ThS Trần Kim Huệ 57

- Thu nhỏ nó theo chiều dọc. Tiếp theo - Nhân đôi bóng đổ và xoay nó theo chiều
căn chỉnh nó vào giữa thanh trượt. Chọn dọc. Đặt nó vào cạnh dưới của thanh trượt.
cả hai lớp và trên Bảng tùy chọn, nhấp vào
nút Căn chỉnh giữa theo chiều ngang.

Giảng viên: ThS Trần Kim Huệ 58

- Tạo các nút điều khiển thanh trượt bằng - Giảm độ mờ của nút xuống
công cụ Rectangular Marqee. (Opacity: 50%).
Tô màu: #000000.

Giảng viên: ThS Trần Kim Huệ 59

- Mở hình dạng tự động từ Bảng tùy chọn
và chọn mũi tên này. - Thêm một dải. Tô màu #000000.
Thêm nó vào các nút.

Giảng viên: ThS Trần Kim Huệ 60

- Giảm Độ mờ đục xuống (Opacity: 50%). - Thêm mô tả về dự án: Featured Project….

Giảng viên: ThS Trần Kim Huệ 61

BƯỚC 8: Thêm các câu chào mừng

- Lời chào mừng: HELLO; YOU ARE HERE; We can help you…...

Giảng viên: ThS Trần Kim Huệ 62

- Thêm hiệu ứng đổ bóng . - Chừa khoảng cách 1px giữa phần
Tạo bóng giống như đã tạo trước đó, tiêu đề và phần bóng.
bằng công cụ cọ vẽ.

Giảng viên: ThS Trần Kim Huệ 63

BƯỚC 9: Thêm điều khiển xoay thanh trượt

- Áp dụng Inner Shadow cho một điều khiển

- Tạo điều khiển xoay. để chỉ ra mục đang hoạt động hiện tại
trong thanh trượt

Giảng viên: ThS Trần Kim Huệ 64

 BƯỚC 10: Tạo Content Divider - Ẩn các cạnh một cách mượt mà
bằng cách sử dụng mặt nạ Gradient.
- Chọn Công cụ Bút chì và vẽ đường 1 pixel.
Chọn màu xám nhạt (#aaaaaa).

Giảng viên: ThS Trần Kim Huệ 65

BƯỚC 11: Thêm nội dung chính (main content)

- Bố cục 3 cột. Tạo 3 cột bằng nhau với - Thêm các đường hướng dẫn vào các hộp.
một số khoảng đệm 25 pixel giữa chúng. Sau đó, xóa các hộp. Và đây là các cột.
Chiều rộng 290px bằng nhau

Giảng viên: ThS Trần Kim Huệ 66

- Chèn các biểu tượng, duy trì khoảng cách - Áp dụng Gradient Overlay và Stroke là
giữa các đối tượng một cách đồng đều 1 pixel vào nút.

- Tạo nút “Read more…”. Chọn Công cụ

Giảng viên: ThS Trần Kim Huệ

hình chữ nhật bo tròn để vẽ hình dạng –
là một Lớp hình dạng.

67
 - Sao chép nút
- Kéo hình ảnh vào hộp.

- Vẽ ba hộp giữ hình ảnh và áp dụng nét

vẽ 3 pixel.

Giảng viên: ThS Trần Kim Huệ 68

 - Tạo Line (Pencil Line), Gradient.
- Tạo bóng đổ như chúng ta đã làm - Nguồn cấp dữ liệu Twitter.
trước đó và đặt nó bên dưới các hộp - Thả biểu tượng chú chim Twitter vào.
- Tạo nút cho Thêm Tweet.

- Thêm một số mô tả về dự án (Text)

và tạo nút.

Giảng viên: ThS Trần Kim Huệ

69
 - Tạo bóng đổ như chúng ta đã làm - Tạo Line (Pencil Line), Gradient.
trước đó và đặt nó bên dưới các hộp - Nguồn cấp dữ liệu Twitter.
- Thả biểu tượng chú chim Twitter vào.
- Tạo nút Thêm Tweet với Gradient, stroke 1 px

- Thêm một số mô tả về dự án (Text)

Giảng viên: ThS Trần Kim Huệ

và tạo nút.

70
BƯỚC 12: Thêm điều khiển xoay thanh trượt

- Áp dụng Inner Shadow cho một

- Tạo điều khiển xoay. điều khiển để chỉ ra mục đang hoạt động
hiện tại trong thanh trượt

Giảng viên: ThS Trần Kim Huệ 71

 BƯỚC 13: Tạo Footer và Hoàn thiện

- Chọn phần chân trang và tô màu xám - Thêm điều hướng chân trang và thông tin
bản quyền. Và thế là kết thúc phiên.

Giảng viên: ThS Trần Kim Huệ 72

 Giảng viên: ThS Trần Kim Huệ
73
CUỐI CÙNG
KẾT QUẢ
Giảng viên: ThS Trần Kim Huệ 74
 Convertio - Chuyển đổi tập tin
của bạn sang bất kỳ định dạng nào

Giảng viên: ThS Trần Kim Huệ

Công cụ chuyển đổi JPG sang ICO https://convertio.co/vn/ 75
 NAME SURNAME
Website Icons

https://flaticon.com
https://www.freepik.com
https://www.iconfinder.com
https://icons8.com
https://iconarchive.com
https://fonts.google.com/

7
Giảng viên: ThS Trần Kim Huệ
6
 Web Theme, Domain, Hosting

NAME SURNAME
Nhà cung cấp tên miền và hosting Web Theme & Templates
https://www.pavietnam.vn/ h ps://www.web30s.vn/
https://www.matbao.net/ h ps://chonweb.vn/
https://www.hostinger.vn/ h ps://themeforest.net/
https://www.godaddy.com/ h ps://thachpham.com/
https://www.hostgator.com/ h ps://www.freepik.com
………………. h ps://muatheme.com/
h ps://gracethemes.com/
Web Theme (TH)
h ps://themewp.vn/
https://noithat2.trustweb.vn/
https://dulich23.maugiaodien.com/
………..
https://bds45.maugiaodien.com/
https://www.web30s.vn/demo/Addina
-2306
……………
Giảng viên: ThS Trần Kim Huệ 77
 LINK

NAME SURNAME
Trình chuyển đổi tập tin: h ps://conver o.co/vn/

Cửa hàng trực tuyến:

https://chromewebstore.google.com/collection/get_started?utm_source=ext_app_menu

Top 15 tiện ích trên Chrome: https://hoanghamobile.com/tin-tuc/tien-ich-google/

Chụp ảnh màn hình toàn trang web: https://chromewebstore.google.com/detail/gofullpage-

full-page-scre/fdpohaocaechififmbbbbbknoalclacl

Chụp ảnh màn hình toàn trang web: https://chromewebstore.google.com/detail/gofullpage-

full-page-scre/fdpohaocaechififmbbbbbknoalclacl

Enable Copy: Chuột phải trang web: h ps://chromewebstore.google.com/detail/supercopy-

enable-copy/onepmap johnegdm ndpe kppbjkm

Google dịch: https://chromewebstore.google.com/detail/google-

d%E1%BB%8Bch/aapbdbdomjkkjkaonfhkkikfgjllcleb?hl=vi
Giảng viên: ThS Trần Kim Huệ 78
 Thank you
Trần Kim Huệ
0702 390 036
huetrangdu2024@gmail.com

Giảng viên: ThS Trần Kim Huệ 79