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: traning@vietchuyen.org 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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: traning@vietchuyen.org 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 [...]... traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn 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ẽ VI ỆT C H U YÊ _ Để nét vẽ được to hơn ta thiết lập thông số như hình sau : Lớp: Chuyên Viên Website Lành Nghề Sọan... 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ẽ VI ỆT _ Tô màu chuyển sắc như sau : Lớp: Chuyên Viên Website Lành Nghề Sọan bởi : GV Nguyễn Hoàn Tuấn Anh Trang 15 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: traning@vietchuyen.org Website: www.vietchuyen.org... 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 : Lớp: Chuyên Viên Website Lành Nghề Sọan bởi : GV Nguyễn Hoàn Tuấn Anh Trang 14 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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn Màu : #ff6600 Màu :... 2649179 Email: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn VI ỆT C H U YÊ N 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... xuống như sau : Lớp: Chuyên Viên Website Lành Nghề Sọan bởi : GV Nguyễn Hoàn Tuấn Anh Trang 16 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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn VI ỆT C H U YÊ _ Dùng Pen tool vẽ trái tim như sau : Lớp: Chuyên Viên Website Lành Nghề Sọan bởi :... chứa hình chữ nhật màu vàng VI ỆT 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 : Lớp: Chuyên Viên Website Lành Nghề Sọan bởi : GV Nguyễn Hoàn Tuấn Anh Trang 19 YÊ N Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN... – Fax: (84.8) 2649179 Email: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn C H U 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 VI ỆT 8 Dùng Text tools đánh chữ HAPPY VALENTINE DAY và tô màu chuyển sắc như hình : Lớp: Chuyên Viên Website Lành Nghề Sọan bởi : GV Nguyễn Hoàn Tuấn Anh... #FF6600, Dưới thanh properties chọn Filters : Shadown and glow > Inner Shadow Lớp: Chuyên Viên Website Lành Nghề Sọan bởi : GV Nguyễn Hoàn Tuấn Anh Trang 18 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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn 4 Đặt hình chữ nhật vừa vẽ xuống bên dưới 2... như sau cho mắt của mặt cười : Filters > Shadow and glow > Inner Shadow Lớp: Chuyên Viên Website Lành Nghề Sọan bởi : GV Nguyễn Hoàn Tuấn Anh Trang 13 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: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn _ Copy và paste ta sẽ được 2 con mắt của mặt... (84.8) 862 7509 – Fax: (84.8) 2649179 Email: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn VI ỆT C H U YÊ 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 : Lớp: Chuyên Viên Website Lành Nghề Sọan bởi : GV Nguyễn Hoàn Tuấn Anh Trang 11 Trung . traning@vietchuyen.org 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. 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ố. Æ 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.