1. BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho Website
BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho Website
Đề bài: Sử dụng các ảnh được cung cấp trong thư mục Tai nguyen của Lab 7 và các công cụ của
Photoshop để thiết kế lên các giao diện trang web như sau:
1: Giao diện trang chủ.
File photoshop kết quả được lưu lại dưới tên 07_Practice_Home.psd. File ảnh kết quả được lưu lại
dưới tên 07_Practice_Home.jpg.

2. BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho Website
1.Việc đầu tiên khi tạo 1 Website bạn cần phải xác định trước kích thước hiển thị cho phù
hợp với màn hình:
Các loại màn hình phổ biến hiện nay có độ phân giải: 1024x 768, 1280x 800, 1920x 1080 ...
Website gồm 2 lớp hiển thị chính là Background và Content (nội dung).
- Việc cần làm là đảm bảo nội dung web site hiển thị chính xác trong phạm vi kích thước các
màn hình phổ biến sao cho phù hợp với nhiều người dùng nhất!
- Tôi sử dụng kích thước cho Content là dưới 1000px (kích thước màn hình nhỏ nhất 1024px
trừ đi 20px của thanh cuộn trình duyệt).
- Kích thước Background lớn hơn 1024px.
- Chiều cao không hạn chế (có thể cuộn)!
Tạo File ảnh với kích thước
như trong hình

3. BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho Website
Vào thư mục tài nguyên, chọn file ảnh có tên 001.jpg (Hình ảnh Lam Trường), tôi chọn hình ảnh này làm
Background cho toàn bộ trang Web, bạn bấm Ctrl+ T, giữ Shift kéo ảnh vừa khít với kích thước file vừa
tạo!
Background cho toàn bộ trang web

4. BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho Website
Tạo Layer mới, đặt tên là Menubar
- Dùng công cụ rectangular maqueer tool (M)
- chọn Style cho Rectangular maqueer tool (M) là Fixed Size, rồi điền các kích thước With= 1024px, Height=
140px.
-Vẽ ra Menu và đổ màu

5. BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho Website
1: Click đúp vào Layer Menu Bar để ra bảng Layer Style.
2: Chọn Gradient Style.
3: có thể chỉnh một số chức năng khác trong Layer Style

6. BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho Website
1: Click dúp vào biểu tượng dãi màu trong bảng Gradient Style đang mở.
2: Một bảng màu sẽ hiện ra cho phép điều chỉnh thông số dải màu.
3: Bạn chọn màu theo ý muốn bằng cách Click đúp vào mỗi chốt của dải màu, trường hợp này chuyển từ màu Đen
(mã màu #000000 sang màu Ghi (mã màu #666666).

7. BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho Website
1: Thoát khỏi bảng Layer Style, ngoài bảng layer chọn layer Menubar, chọn Opacity trên bảng layer, và
giảm xuống 70% cho Menu có thuộc tính trong suốt.
2: Dùng công cụ viết type (T) để gõ chữ, viết ra tên các Menu và điều chỉnh khoảng cách cho phù hợp.

8. BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho Website
Dùng công cụ Rectangular Marqueer tool (M) thêm lần nữa, chọn Style cho công cụ này là Fixed, điền
chiều rộng 1px, cao 120px, rồi vẽ vào đúng vị trí để tạo vách ngăn cho Menu.

9. BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho Website
1: Nhân các vách ngăn menu vừa tạo ra, di chuyển và đặt đúng vị trí (Lưu ý khi di chuyển giữ phím Shift
cho các vách ngăn luôn thẳng hàng).
2: Lại dùng công cụ Rectangular Marqueer tool (M) vẽ tiếp hình chữ nhật bằng đúng kích thước mỗi
Menu để làm trạng thái di chuột vào, dùng công cụ Gradient đổ màu cho hình trạng thái di chuột này
tương tự bước tạo Menu.Đến đây coi như bạn đã hoàn thành phần thiết kế trang chủ.

10. BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho Website
Tạo các Trang con!

11. BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho Website
Trang cá nhân:
Từ File gốc trang củ vừa tạo ở phần
trước, hãy Save As (Ctrl+ Shift+ S)
lưu tên file mới là 07_Practice_Per-
sonal.
1: Chọn công cụ Rectangular
Marqueer tool (M), Chọn Style là
Fixed Size chiều rộng 960px và chiều
cao thích hợp (khoảng 350px- 400px).
2: Tạo 1 Layer mới đặt tên là Con-tent.
3: Đổ màu đen cho hình chữ nhật vừa vẽ ra trên layer content.
4: Giảm Opacity của layer xuống còn 80% để tạo độ trong suốt cho layer.

12. BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho Website
6: Bạn vào thư mục tài nguyên mở File văn
bản có tên “Thong tin ca nhan.txt” copy
toàn bộ nội dung. Dùng công cụ Type tool
(T) vẽ 1 hình chữ nhật nằm trên khung màu
đen vừa tạo, chuột phải/ Paste (Ctrl+ V).
7: Chọn Font chữ Arial, màu trắng, kiểu
chữ regular.
8: Vào thư mục tài nguyên tìm bức ảnh tên
007.jpg, kéo thả vào giao diện đang làm
việc của Photoshop, tiếp tục bấm phím V
(Select) rồi kéo sang cửa sổ đang dùng để
thiết kế trang cá nhân, dùng lệnh Transform
(Ctrl+ T) , giữ Shift rồi kéo bức ảnh nhỏ lại
cho đúng tỉ lệ và kích thước như hình vẽ.
Enter để kết thúc lệnh.
9: Di chuyển biểu tượng di chuột đã tạo ở phần trước sang menu “Cá nhân” để người dùng biết được vị
trí hiện tại của mình trên trang Web.
Căn chỉnh lại vị trí tương đối giữ chữ, hình ảnh, màu sắc, bố cục sao cho hợp lý

13. BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho Website
Trang giới Thiệu album

14. BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho Website
Từ trang cá nhân vừa tạo, lại Save as file thành tên 07_Practice_Album.PSD.
10: Kéo lần lượt các ảnh có tên Vol1.jpg, Vol2.jpg, Vol3.jpg, Vol4.jpg, Vol5.jpg, Vol6jpg, Vol7.jpg, Vol8.
jpg, Vol9.jpg, Vol10.jpg vào giao diện Photoshop rồi đưa sang cửa sổ thiết kế hiện tại của trang Al-
bum.
- Dùng lệnh Transform (Ctrl+ T), giữ Shift để thay đổi kích thước giữ nguyên tỉ lệ ảnh, sắp xếp kích
thước mỗi ảnh cách nhau 20px, và mép ngoài ảnh cách viền của nền Content 20px. (tham khảo hình
minh họa)
11: Lại di chuyển phần biểu tượng di chuột vào ở Menu sang Menu Album.

15. BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho Website
Trang hình ảnh

16. BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho Website
Làm tương tự các phần trên, Save As (Ctrl+ Shift+ S) file thiết kế trang Album vừa làm thành File Hình ảnh có
tên “07_Practice_Photo.psd”, xóa hết phần hình ảnh nội dung của trang Album và làm tương tự trang đó.
12: Vào thư mục tài nguyên, lấy các ảnh có tên lto1.jpg, lt02.jpg, lt03.jpg, lt04.jpg.- Dùng lênh Transform (Ctrl+
T) và sắp xếp sao cho các ảnh cách nhau theo chiều ngang và 2 ảnh ở ngoài cách viền theo chiêu fngang là
10px, các ảnh các mép trên và mép dưới viền theo chiều dọc là 20px như hình vẽ.
13: Di chuyển biểu tượng di chuột vào từ Menu Album sang Menu

17. BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho Website
Vậy là cơ bản các bạn đã thiết kế thành công giao diện của một Website cá nhân dạng đơn giản, về bản
chất việc thiết kế website không đòi hỏi nhiều kĩ thuật cao siêu về đồ họa, nhưng nó lại đòi hỏi việc tính
toán kích thước, tỉ lệ các ảnh sao cho chính xác và hợp lý để dễ dàng cho người sử dụng quan sát, ngoài ra
cũng phải đảm bảo dễ dàng cho người lập trình và người dàn trang bằng HTML, CSS sau này!
Chúc các bạn thành công!