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

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

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

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.

Ngày đăng: 26/10/2014, 22:00

Từ khóa liên quan

Tài liệu cùng người dùng

  • Đang cập nhật ...

Tài liệu liên quan