GIÁO TRÌNH THIẾT KẾ BANNER

Giáo trình Thiết kế banner cho trang web bằng Flash
Người viết: Đỗ Mạnh Hà
 Mục đí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 cầ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 Flash.
(có thể tìm hiểu trên trang web: )
 Thao tác:
- Các bạn khởi động phần mềm Flash. Chọn New Document để tạo trang giấy mới.
- Việc đầu tiên là bạn phải đặt kích thước cho trang giấy mới. Banner của các website
trên hệ thống của violet.vn có chiều ngang chung là 770pixel. Còn chiều cao của
banner thì tùy ý. Tuy nhiên các bạn chỉ nên để chiều cao ở khoảng 150pixel đến
200pixel là vừa đủ. Nếu bạn đăt chiều cao quá lớn thì khi thể hiện trên màn hình
800x600, banner sẽ quá lớn và không đạt yêu cầu thẩm mĩ của một trang web.
Sau đây ta chúng ta cùng tìm hiểu những yêu cầu về nội dung và mỹ thuật cần thiết
của một banner:
• 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.
PHÒNG GIÁO DỤC VÀ ĐÀO TẠO QUẬN HAI BÀ
TRĂNG
TRƯỜNG THCS TÔ HOÀNG
Địa chỉ: 27 Đại Cồ Việt, Hai Bà Trưng, Hà Nội. Điện thoại: (04) 8692236
VD:
1. Tô màu nền:
- Bạn sẽ tạo một mầu nền cho banner như sau:
Trong bảng Propeties, Mục Background có một ô mầu trắng – mầu mặc định của
nền khi ta mới tạo trang mới. Bạn nhấn vào ô mầu trắng đó, một bảng mầu sẽ hiện
ra để bạn chọn.
Bạn nhấn vào ô mầu mà bạn muốn chọn làm nền
- Bạn nên chọn những mầu trầm hoặc tươi sáng như: nâu, đỏ, xanh lam đậm,…
Tránh những mầu non như mầu nõn chuối, vàng chanh, v..v…
2. 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.
- Hiện tại bạn đang có Layer 1, bạn sẽ tạo phần đầu trang trên Layer này. Bạn chọn
công cụ Rectang Tool (R) để vẽ một hình chữ nhật. Trong bảng Properties, bạn
điền kích thước cho hình này:
+ W (width – chiều rộng) = 770 pixel
+ H (heigh – chiều cao) = 30 pixel
- Bạn kéo mảng hình lên phía đầu trang bằng công cụ Selection Tool (V) .
- Chú ý: Hãy nhớ đặt tên cho Layer này nhé! Ví dụ như là: header.
- Bạn cũng có thể kéo một file ảnh trong file các mấu header sẵn do Bạch Kim cung

cấp để đưa vào làm header.
3. Viết chữ:
- Bạn tạo một Layer mới để chứa chữ bằng cách nhấn vào biểu tượng Insert layer
- Bạn chọn công cụ Text Tool (T) . Nhấn lên màn hình và gõ các chữ cần thiết.
- Bạn cũng có thể đổi Font chữ, thay đổi kích cỡ chữ, mầu chữ, căn lề, khoảng cách
chữ, khoảng cách dòng trong bảng Propertise:
- Nếu bạn muốn tạo các hiệu ứng cho chữ như bóng đổ, tỏa sáng,… , bạn chọn chữ
đó, nhấn F8 để chuyển chữ sang đối tượng Movie Clip.
- Trong bảng Properties phía dưới, bạn chọn thẻ Filter. Nhấn vào dấu cộng ( + ) và
chọn hiệu ứng mà bạn mong muốn. Bên cạnh đó có các lựa chọn (options) để bạn
thay đổi mức độ của hiệu ứng theo ý mình.
- Bạn có thể nhấn vào dấu trừ ( - ) để bỏ hiệu ứng mà mình không muốn.
- Xóa tất cả hiệu ứng.
- Hiện tất cả hiệu ứng.
- Ẩn tất cả hiệu ứng
- Đổ bóng.
- Làm mờ đi.
- Tỏa sáng.
- Làm nổi
- Chuyển độ sáng
- Chuyển độ nổi
- Đổi tong mầu, chỉnh đậm nhạt
4. Trang trí:
- Bạn muốn đưa một bức ảnh vào để trang trí cho phần nền? Bạn hãy lưu ý rằng khi
ta đưa thêm bất cứ đối tượng nào vào Flash, bạn hãy tạo một layer mới (Insert
Layer) đế chứa nó. Việc này giúp bạn dễ dàng chỉnh sửa từng đối tượng trên mỗi
Layer mà không làm ảnh hưởng đến các đối tượng khác trên Layer khác.
- Bạn tạo một Layer mới và kéo thả file ảnh vào trang thiết kế Flash. File đó sẽ nằm
trên Layer mà bạn vừa tạo.
- Bức ảnh có thể quá to hoặc bị nhỏ. Bạn hoàn toàn có thể thay đổi được kích thước

của chúng bằng công cụ Free Transform Tool (Q) . Khi bạn chọn vào công cụ
này, xung quanh bức ảnh sẽ có những nút vuông màu đen, bạn giữ chuột để kéo
làm thay đổi kích thước của ảnh. Nếu bạn muốn thay đổi độ lớn mà giữ nguyên tỉ lệ
chiều cao và chiều ngang, bạn giữ phím Shift khi thay đổi kích thước.
- Để cho bức ảnh mờ đi làm nền, bạn phải biến đối tượng ảnh đó thành một Movie
Clip. Bạn nhấn phím F8. Tích vào ô Movie Clip và nhấn OK. Đối tượng ảnh đã
chuyển sang dạng Movie Clip. Bạn chọn vào đối tượng này và trong bảng
properties, mục Color, bạn chọn Alpha. Ở ô thông số, bạn gõ vào là 30% hoặc bạn
nhấn vào mũi tên nhỏ và kéo thanh trượt xuống cho hình mờ đi.
• Flash có một tuyệt chiêu giúp bạn làm cho những bức ảnh ẩn hiện và thay đổi
ảnh. Cách làm không khó, chỉ cần bạn làm đúng theo các bước sau:
- Bạn cũng đưa một bức ảnh vào, thu nhỏ, biến nó thành đối tượng Movie Clip như
phần trên.
- Bạn dùng công cụ Selection Tool (V) nhấn đúp vào đối tượng Movie Clip này. Như
vậy bạn đã ở trong Movie clip này.
- Trong Movie Clip (đoạn phim) này, bạn sẽ tạo ra nhiều Layer (Insert Layer), mỗi
Layer bạn sẽ để một bức ảnh. Mỗi bức ảnh bạn sẽ lại nhấn F8 và chuyển nó sang
định dạng Movie Clip. Các bức ảnh này nằm trên cùng 1 vị trí.
- Sau đây ta sẽ làm cho chúng thay nhau xuất hiện. Ở bức ảnh thứ nhất (photo 1),
trên Time line (dòng thời gian), bạn chọn frame 20, nhấn F6 để tạo một Key Frame.
- Tiếp tục nhấn F6 ở Frame 5 và Frame 15.
- Chọn Frame 1 và Frame 20, kéo Alpha trong mục Color xuống bằng 0%.
- Nhấn chuột phải vào Frame trong khoảng giữa của Frame 1 và Frame 5, giữa của
Frame 15 và Frame 20, chọn Creat Motion Tween.
- Làm tương tự như trên với các bức ảnh còn lại (photo 2, photo 3, …)
- Bôi đen cả Time line của bức ảnh thứ 2 (photo 2) và dịch chuyển sao cho Key frame
thứ nhất nằm ở frame 20.
- Bôi đen cả Time line của bức ảnh thứ 3 (photo 3) và dịch chuyển sao cho Key frame
thứ nhất nằm ở frame 40.
- Để kéo dài thời gian xuất hiện của ảnh, bạn chỉ cần kéo dài thêm frame xuất hiện

của mỗi bức ảnh (khoảng giữa 2 Key Frame có Alpha = 100%): Nhấn vào frame ở
giữa, nhấn F5 trên bàn phím để chèn thêm frame.
- Dùng công cụ Selections Tool (V) nhấn đúp ra ngoài vùng có ảnh bạn sẽ thoát ra
khỏi Movie Clip chứa nhiều Movie Clip nhỏ này.
5. Chiết xuất file:
- Sau khi hoàn thành, banner của bạn có thể được sắp xếp như ví dụ sau: