sử dụng Firework 2003 để thiết kế web

Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – Fax: (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 1
Sọan bởi : GV. Nguyễn Hoàn Tuấn Anh
HƯỚNG DẪN SỬ DỤNG FIREWORKS CS3
I – GIỚI THIỆU CHUNG :
GIỚI THIỆU VỀ PHẦN MỀM FIREWORKS CS3



Æ Pointer Tool : Công cụ chọn đối tượng
Æ Sub selection Tool : Công cụ chọn NOTE ( điểm ) của đối tượng
Æ Scale Tool (Q): Công cụ thay đổi kích thước của đối tượng ( width , height )
Æ Crop Tool : Công cụ cắt lấy phần cần lấy của đối tượng



Æ Marquee Tool : Công cụ Chọn vùng đối tượng
: Chọn bằng Hình Chữ nhật
: Chọn bằng Hình Oval
Æ Lasso Tool : Công cụ Chọn vùng đối tượng

VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM

Tel: (84.8) 862 7509 – Fax: (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 2
Sọan bởi : GV. Nguyễn Hoàn Tuấn Anh
: Chọn tự do bằng nét tự do
: Chọn tự do bằng nét gấp khúc

Æ Magic Wand Tool : Công cụ chọn các vùng đối tượng có liên quan
Æ Brush Tool : Công cụ vẽ nét cọ
Æ Pencil Tool : Công cụ vẽ nét bút chì
Æ Eraser Tool : Công cụ xóa nét vẽ và hình ảnh
Æ Blur Tool : Công cụ làm mờ hình ảnh và đối tượng
Æ Rubber Stamp Tool : Công cụ lấy màu vùng lân cận để tô màu vùng cần tô



Æ Line Tool : Công cụ vẽ đường thẳng
Æ Pen Tool : Công cụ vẽ có định hướng
Æ Rectangle Tool : Công cụ vẽ hình dạng đối tượng ( hình chữ nhật , tròn, …)
Æ Text Tool : Công cụ gõ văn bản
Æ Freeform Tool : Công cụ chuyển đổi nét cứng ( 2 note ) thành nét mềm ( nhiều note )
Æ Knife Tool : Công cụ cắt đối tượng
VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – Fax: (84.8) 2649179

Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 3
Sọan bởi : GV. Nguyễn Hoàn Tuấn Anh



Æ Rectangle Hotspot Tool : Công cụ vẽ Link
Æ Slice Tool : Công cụ cắt hình trích xuất ra web



Æ Eyedropper Tool : Công cụ lấy màu đối tượng
Æ Paint Bukect Tool : Công cụ tô màu đối tượng và hình ảnh
Æ Stroke Color : Màu đường viền
Æ Fill Color : Màu nền

II. MỘT SỐ THAO TÁC CƠ BẢN KHI SỬ DỤNG FIREWORKS CS3 :


1. Tạo file mới : File > New

2. Mở file đã có : File > Open

3. Undo : Edit > Undo ( CTRL + Z )

VIỆT CHUYÊN

Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – Fax: (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 4
Sọan bởi : GV. Nguyễn Hoàn Tuấn Anh
4. Redo : Edit > Redo ( CTRL + Y )

5. Biến dạng đối tượng : Modify > Transform >


a. Free Transform : Co giản đối tượng
b. Scale : Co giản đối tượng ( lớn nhỏ, rộng cao )
c. Skew : Co giản đối tượng theo phương nghiêng
d. Distort : Co giản đối tượng tự do
e. Numberic Transform :
Rotate : xoay
Resize : thay đổi kích thước
Scale : phóng to thu nhỏ đối tượng
Flip Horizontal : Lật đối tượng theo chiều ngang
Flip Vertical : Lật đối tượng theo chiều dọc
Remove transform : Xóa thiết lập biến dạng đối tượng


VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN

740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – Fax: (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 5
Sọan bởi : GV. Nguyễn Hoàn Tuấn Anh
6.Sắp xếp thứ tự của đối tượng : Chọn đối tượng cần sắp xếp


Modify > Arrange >
f. Bring to Front : Mang đối tượng lên trên
g. Bring Forward : Mang đối tượng lên trên 1 layer
h. Send to Back : Mang đối tượng xuống dưới
i. Send Backward : Mang đối tượng xuống dưới 1 layer
7.Canh lề cho đối tượng : Chọn 2 hoặc nhiều đối tượng

VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – Fax: (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 6
Sọan bởi : GV. Nguyễn Hoàn Tuấn Anh

Modify > Align
j. Left,Right,Top, Bottom : Canh Trái, canh Phải, canh Đỉnh, canh Chân
k. Center Vertical : Canh giữa đối tượng theo chiều dọc
l. Center Horizontal : Canh giữa đối tượng theo chiều ngang
m. Distribute widths : Canh đều các đối tượng theo chiều ngang
n. Distribute heights : Canh đều các đối tượng theo chiều dọc .
8. Gôm nhiều đối tượng thành 1 nhóm : Modify > Group
9. Rã nhóm thành nhiều đối tượng : Modify > Ungroup

10. Các thao tác liên quan đến Text và Văn bản :
a. Text > Font : kiểu chữ
b. Text > Size : cỡ chữ
c. Text > Style : Thay đổi kích cỡ chữ
d. Text > Align : canh lề chữ

11. Trích xuất ra hình ảnh ( bitmap ) : File > Image Preview


VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – Fax: (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 7
Sọan bởi : GV. Nguyễn Hoàn Tuấn Anh
12. Trích xuất ra HTML : File > Export

III. TẠO CÁC HIỆU ỨNG CHO TEXT VÀ ĐỐI TƯỢNG :
SỬ DỤNG FILTERS :

1.2 Brightness / Contrast : Chỉnh sáng tối và độ sắc nét cho ảnh

1.3 Hue / Saturation : Chỉnh màu và độ tương phản cho ảnh

2.Bevel and Emboss : Tạo hiệu ứng lồi lõm cho đối tượng
2.1 Invert Bevel :

Tạo hiệu ứng lồi vác cạnh cho đối tượng
2.2 Inset Emboss :

Tạo hiệu ứng lõm cho đối tượng
VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – Fax: (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 8
Sọan bởi : GV. Nguyễn Hoàn Tuấn Anh
2.3 Outer Bevel :

Tạo hiệu ứng lồi bo tròn cho đối tượng
2.4 Raised Emboss :

Tạo hiệu ứng lồi bo tròn có Blur đường viền

3.Blur :
3.1 Gaussion Blur :

Tạo hiệu ứng nhòe theo thông số cho đối tượng
3.2 Mtion Blur :

Tạo hiệu ứng nhòe có Option cho đối tượng
_
Angle: góc quay hướng nhòe
_
Distance : số lượng ( độ dày )
3.3 Radial Blur :

Tạo hiệu ứng nhòe xoay tròn cho đối tượng
_
Amount: số lượng nhòe
_
Quality : độ rõ nét
3.4 Zoom Blur :

Tạo hiệu ứng nhòe theo kiểu Zoom cho đối tượng
_
Amount: số lượng nhòe
_
Quality : độ rõ nét

4.Noise > Add Noise : Tạo hiệu ứng Hạt


5.Other : Tạo hiệu ứng khác cho đối tượng
Convert to Alpha : chuyển hình màu thành trắng đen
CONVERT TO ALPHA =====>
VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – Fax: (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 9
Sọan bởi : GV. Nguyễn Hoàn Tuấn Anh

6.Shadow and Glow : Tạo hiệu ứng đổ bóng và viền cho đối tượng
6.1 Drop Shadow :

Tạo hiệu ứng đổ bóng cho đối tượng
6.2 Glow :

Tạo đường viền cho đối tượng
6.3 Inner Glow :

Tạo đường viền bên trong đối tượng
6.4 Inner Shadow:

Tạo bóng đỗ bên trong đối tượng
6.4 Solid Shadow:

Tạo bóng theo hình khối cho đối tượng
* Angle : góc đổ bóng
* Distance : độ dày của bóng
* Solid color : màu của bóng

7.Sharpen : Tạo hiệu ứng sắc nét cho đối tượng bitmap

IV.BÀI TẬP SỬ DỤNG CÁC CÔNG CỤ CĂN BẢN :
A.VẼ HÌNH MẶT CƯỜI :


VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – Fax: (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 10
Sọan bởi : GV. Nguyễn Hoàn Tuấn Anh
1. Tạo file mới : kích thước 400x400pixel, màu nền : #FF9900
2. Dùng công cụ Ellipse tool vẽ hình tròn kích thước 300x300 pixel

3. Tô màu chuyển sắc như sau :

_Màu bên tay phải : #FFCC00
_Màu bên tay trái : #FFFFFF
VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – Fax: (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 11
Sọan bởi : GV. Nguyễn Hoàn Tuấn Anh

4. Dùng Pointer tool chọn hình tròn vừa vẽ và thay đổi thanh định hướng như hình và đổ bóng
( Filters > Shadow and glow > Drop Shadow ) như sau :


5. Vẽ chân mày :
_ Dùng công cụ Pen (P) vẽ như sau :
VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – Fax: (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 12
Sọan bởi : GV. Nguyễn Hoàn Tuấn Anh
_ Click vẽ điểm 1, di chuyển đến điểm 2 click vẽ điểm 2 rồi kéo chuột về phía tay trái bên dưới để
bo góc như hình tào thành chân mày cho mặt cười.

_ Double click vào điểm số 2 để kết thúc nét vẽ, tô màu đen cho nét vẽ
_ Để nét vẽ được to hơn ta thiết lập thông số như hình sau :


VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – Fax: (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 13
Sọan bởi : GV. Nguyễn Hoàn Tuấn Anh
6. Copy chân mày vừa vẽ rồi Paste vào khung vẽ, chọn Modify > Transform > Flip Horizontal để
lật ngang thành chân mày thứ 2 và di chuyển về vị trí thích hợp.


7. Vẽ mắt cho mặt cười :
_ Dùng Ellipse tool (U) vẽ hình Ellipse đứng kích thước 33x55, màu nền #F29200, ko có màu viền



_ Thiết lập thông số như sau cho mắt của mặt cười :

Filters > Shadow and glow > Inner Shadow
VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – Fax: (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 14
Sọan bởi : GV. Nguyễn Hoàn Tuấn Anh

_ Copy và paste ta sẽ được 2 con mắt của mặt cười.
_Dùng Ellipse tool vẽ vòng tròn màu đen nằm trong con mắt ta sẽ được như hình sau : làm tương
tự cho con mắt còn lại.

8. Dùng Pen tool vẽ miệng cho mặt cười :
Vẽ điểm 1, vẽ điểm 2, quay về điểm 1 click vào rồi kéo sao cho tạo thành hình như sau.

9. Thiết lập thông số như sau :

VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – Fax: (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 15
Sọan bởi : GV. Nguyễn Hoàn Tuấn Anh
Æ Màu : #ff6600
Màu nền #FF6600, màu viền ko có.
Æ Màu : #996600
10. Vẽ lưỡi cho mặt cười :
_ Vẽ điểm 1, vẽ điểm 2 click vào điểm 2 lần nữa để ngắt đường định hướng rồi quay về click vào
điểm 1 để kết thúc nét vẽ.


_ Tô màu chuyển sắc như sau :




VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – Fax: (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 16
Sọan bởi : GV. Nguyễn Hoàn Tuấn Anh
B.VẼ THIỆP CHÚC MỪNG VALENTINE :

1. Vẽ trái tim :

_ Mở thước vẽ : View > Rulers.

_ Click vào thước và kéo các đường gióng từ trên thước xuống như sau :
VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – Fax: (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 17
Sọan bởi : GV. Nguyễn Hoàn Tuấn Anh

_ Dùng Pen tool vẽ trái tim như sau :



VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – Fax: (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 18
Sọan bởi : GV. Nguyễn Hoàn Tuấn Anh

_ Dùng Sub Selection tool (A) chỉnh lại các nút cho phù hợp hơn
_ Tô màu chuyển sắc từ trắng sang đỏ ta sẽ được như hình

2. Vẽ rectangle kích thước 160x100, màu nền : #FFCC00
_ Properties chọn Filters : Blur > Radial Blur




3. Dùng Rectangle vẽ hình chữ nhật 230x210 pixel , màu #FF6600,.
Dưới thanh properties chọn Filters : Shadown and glow > Inner Shadow
VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – Fax: (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 19
Sọan bởi : GV. Nguyễn Hoàn Tuấn Anh

4. Đặt hình chữ nhật vừa vẽ xuống bên dưới 2 hình chữ nhật màu vàng như hình sau :
Bên Panel Layer kéo layer chứa hình chữ nhật vừa vẽ xuống dưới layer chứa hình chữ nhật màu
vàng.

5. Copy trái tim rồi paste ra đề được trái tim thứ 2 rồi dung Scale tools (Q) để thu nhỏ kích thước
lại ta được như sau :

_ Dùng Pen tools vẽ them 2,3 đường cong như hình để trang trí.
6. Dùng Rectangle vẽ button tô màu chuyển sắc như hình :
VIỆT CHUYÊN
Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN
740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – Fax: (84.8) 2649179
Email:

Website: www.vietchuyen.org
– www.ddcntt.vn

Lớp: Chuyên Viên Website Lành Nghề Trang 20
Sọan bởi : GV. Nguyễn Hoàn Tuấn Anh

7. Chọn rectangle vừa vẽ dưới properties chọn Filters : Bevel and Emboss > Inset Emboss cấu
hình như sau để tạo hiệu ứng button bị ăn sâu xuống nền.

8. Dùng Text tools đánh chữ HAPPY VALENTINE DAY và tô màu chuyển sắc như hình :


VIỆT CHUYÊN