Giáo trình thiết kế Banner

Giáo trình Thiết kế banner cho trang web bằng Photoshop
Người viết: Đỗ Mạnh Hà
đích:
Tự thiết kế được banner (đầu đề) cho website (trang web) của đơn vị mình trên hệ thống website của violet.vn

Yêu :
Người thực hiện đã nắm được một số kiến thức cơ bản về phần mềm Photoshop.
(có thể tìm hiểu trên trang web: http://daotao.violet.vn)

Thao tác:
Các bạn khởi động phần mềm Photoshop. Tạo một trang giấy mới (Ctrl N). Hộp thoại New hiện ra. Bạn có thể điền tên trang này là “banner”. Kích thước banner trong các trang web của violet.vn có chiều ngang (width) là 770 pixels, còn chiều cao thì tùy ý. Tuy nhiên bạn không nên để chiều cao quá lớn làm cho banner choán hết cả màn hình máy tính. Bạn nên để ở độ cao (height): 100 pixels đến 200 pixel thôi.


Bạn nhấn OK để đồng ý tạo trang giấy mới. Trang giấy có kích thước đúng như bạn đặt đã hiện ra, và bây giờ bạn sẽ thỏa thích tô vẽ lên đó để tạo nên banner cho trang web của mình.

Tuy nhiên, một banner cũng có những yêu cầu về nội dung và mỹ thuật của nó:
Nội dung:
+ Đơn vị chủ quản (nếu có).
+ Tên đơn vị (là tên trang web).
+ Địa chỉ liên lạc.
VD:






Mỹ thuật:
+ Dùng Font chữ dễ đọc, rõ ràng: không dùng chữ quá hoa lá, uốn lượn,… hay chữ có nét quá mảnh. Nên dùng chữ in hoa với dòng tên trang web, chữ thường với dòng địa chỉ. Dòng địa chỉ chỉ cần nhỏ, vừa đủ để đọc được, không nên quá lớn và chiếm nhiều diện tích. Mầu của chữ cũng nên nổi bật so với nền
+ Phần nền trang trí nên có tông màu thích hợp, không quá lòe loẹt khiến người xem nhức mắt như màu hồng tươi, màu xanh nõn chuối sáng rực, v..v… Bạn có thể thêm lô gô – biểu trưng của đơn vị, ảnh minh họa,… Lôgô phải rõ ràng và chính xác. Ảnh minh họa: đã là minh họa thì chỉ ở một phần của banner. Nếu choán cả banner thì chỉ nên mờ nhạt đằng sau chữ làm nền.
VD:












Tô màu nền:
Bạn sẽ tạo một mầu nền cho banner như sau:
Chọn công cụ tạo vùng chọn nhìn chữ nhật:
Rectangular Marquee Tool (M) khoanh lấy toàn bộ phần banner. Lúc này bạn đang chọn trên Layer background.
Bạn chọn mầu để đổ lên vùng chọn này bằng cách nhấn vào ô Set foregronund color
. Bảng Color Picker hiện ra. Bạn chọn lấy một mầu như mong muốn và nhấn OK. Trở lại vùng chọn, bạn nhấn Alt + Delete để đổ màu lên vùng chọn. (*)

Tạo thanh đầu trang (header):
Mỗi website thuộc hệ thống website của violet.vn khi thành viên đăng nhập vào thì sẽ hiển thị lời chào và tên thành viên đó phía trên cùng bên phải website.
VD:
Xin chào thầy giáo: Đỗ Mạnh Hà
Xin chào cô giáo: Ngô Thị Chinh
Vì vậy bạn cần tạo một mảng mầu nằm ngang phía trên có độ cao khoảng 30 pixel. Mảng mầu này có mầu sáng vì lời chào hiển thị chữ màu đen.
Bạn tạo một layer mới chứa mảng mầu này: trên thanh menu chọn: Layer Layer… (Ctrl + Shift + N). Bảng New layer hiện ra. Bạn điền tên cho layer này vào mục Name để dễ quản lý. Ví dụ tôi đặt tên là “đầu trang”: dau trang



Sau đó nhấn OK để tạo layer mới.(**)
Trên Layer đầu trang bạn lại tạo một vùng chọn bằng công cụ
Rectangular Marquee Tool (M). Trên thanh tùy chọn của công cụ này, mục Style, chọn Fixed size.
Ô Width (chiều rộng) bạn chọn bằng nhiều ngang của banner: 770 pixel
Ô Heitgh (chiều cao) bạn chọn khoảng 30 pixel
Nhấn chuột lên trang giấy, bạn sẽ thấy vùng chọn hiện ra có kích thước đúng như bạn đã đặt. Bạn di chuyển vùng chọn lên phía trên cùng của banner. Chọn mầu và đổ lên vùng chọn. (như mục (*))



Viết chữ:
Chọn công cụ
Type Tool (T), click chuột vào màn hình khi hiện ra con thanh type nhấp nháy thì bạn gõ chữ. Gõ xong bạn chọn công cụ Move Tool (V) để thoát khỏi công cụ Type Tool (T)
Để thay đổi font chữ, cỡ chữ, kiểu chữ, căn lề, mầu chữ, v…v… bạn chọn trên thanh tùy chọn:


Bạn tạo hiệu ứng cho chữ như: bóng đổ, tỏa sáng, nổi bóng, v…v