17
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 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: Đề bài: 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. 1: Giao diện trang chủ.

Lab7 bac pt

Embed Size (px)

Citation preview

Page 1: Lab7 bac pt

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 WebsiteBÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho Website

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:

Đề bài:

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.

1: Giao diện trang chủ.

Page 2: Lab7 bac pt

BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho WebsiteBÀ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

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

Page 3: Lab7 bac pt

BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho WebsiteBÀ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

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

Page 4: Lab7 bac pt

BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho WebsiteBÀ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

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

Page 5: Lab7 bac pt

BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho WebsiteBÀ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

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

Page 6: Lab7 bac pt

BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho WebsiteBÀ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

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).

Page 7: Lab7 bac pt

BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho WebsiteBÀ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

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.

Page 8: Lab7 bac pt

BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho WebsiteBÀ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

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.

Page 9: Lab7 bac pt

BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho WebsiteBÀ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

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ủ.

Page 10: Lab7 bac pt

BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho WebsiteBÀ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

Tạo các Trang con!

Page 11: Lab7 bac pt

BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho WebsiteBÀ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

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.

Page 12: Lab7 bac pt

BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho WebsiteBÀ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

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ý

Page 13: Lab7 bac pt

BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho WebsiteBÀ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

Trang giới Thiệu album

Page 14: Lab7 bac pt

BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho WebsiteBÀ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

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.

Page 15: Lab7 bac pt

BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho WebsiteBÀ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

Trang hình ảnh

Page 16: Lab7 bac pt

BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho WebsiteBÀ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

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

Page 17: Lab7 bac pt

BÀI TRỢ GIẢNG BÀI THỰC HÀNH SỐ 7 | Tạo ảnh cho WebsiteBÀ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

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!