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

Lớp: Chuyên Viên Website Lành Nghề Trang 1 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 Æ S

Lớp: Chuyên Viên Website Lành Nghề Trang 1

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

: 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

Lớp: Chuyên Viên Website Lành Nghề Trang 3

Æ 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

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

Lớp: Chuyên Viên Website Lành Nghề Trang 5

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

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

Lớp: Chuyên Viên Website Lành Nghề Trang 7

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

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

Lớp: Chuyên Viên Website Lành Nghề Trang 9

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

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

Lớp: Chuyên Viên Website Lành Nghề Trang 11

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

_ 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

Lớp: Chuyên Viên Website Lành Nghề Trang 13

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

_ 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

Lớp: Chuyên Viên Website Lành Nghề Trang 15

Æ 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

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

Lớp: Chuyên Viên Website Lành Nghề Trang 17

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

VI ỆT

CHUYÊN

_ 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

Lớp: Chuyên Viên Website Lành Nghề Trang 19

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

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