›

Bài giảng môn Lập trình và Thiết kế Web 1 - Bài 3: Slicing trong Photoshop

pdf 22 trang huongle 3330
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng môn Lập trình và Thiết kế Web 1 - Bài 3: Slicing trong Photoshop", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_mon_lap_trinh_va_thiet_ke_web_1_bai_3_slicing_tron.pdf

Nội dung text: Bài giảng môn Lập trình và Thiết kế Web 1 - Bài 3: Slicing trong Photoshop

  1. Bài 3 : Slicing trong Photoshop Môn : Lập trình và Thiết kế Web 1 KHOA CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC KHOA HỌC TỰ NHIÊN 2008 Authored by: Lương Vĩ Minh
  2. Bài 3 : Slicing trong Photoshop Môn : Lập trình và Thiết kế Web 1 Contents I. Slicing ảnh 2 II. Bước 1 – Load ảnh 3 III. Bước 2 – Tạo GuideLine cho hình 4 IV. Bước 3 - Xén ảnh (Slicing) 6 V. Bước 4 : Chỉnh sửa tên ảnh Slice 12 VI. Bước 5 : Kết xuất Ảnh slice thành Webpage 13 VII. Bước 6 : Loại bỏ các thành phần dư thừa, chỉnh sửa 20 1/1/2008 | Photoshop Bài 3 :Slicing trong 1
  3. I. Slicing ảnh - Đây là giai đoạn thứ 2, sau khi đã phát họa giao diện website bằng các phần mềm xử lý ảnh (Photoshop, CorelPhotopaint). - Đầu vào của giai đoạn Slicing ảnh : Là giao diện của Website ở dạng thô o Là 1 File Photoshop o Hoặc 1 File hình (jpg, png, bitmap, ) - Đầu ra của giai đoạn Slicing ảnh : o Hình ban đầu được cắt thành các mảnh nhỏ o Một trang web kết nối các hình đó thành 1 trang web hoàn chỉnh - Các bước khi slicing ảnh bằng Photoshop : o Bước 1 : Load 1 ảnh JPG o Bước 2 : Tạo các đường Guideline trên ảnh o Bước 3 : Tiến hành xén ảnh (slicing) o Bước 4 : Chỉnh sửa tên cho ảnh Slice o Bước 5 : Kết xuất (Export) ảnh thành một webpage hoàn chỉnh o Bước 6 : Loại bỏ các thành phần dư thừa, và chỉnh sửa o Bước 7 : Đưa vào sử dụng làm template cho Website 1/1/2008 | BàiSlicing3 : trong Photoshop 2
  4. II. Bước 1 – Load ảnh - Mở chương trình Adobe Photoshop CS3 (hoặc phiên bản cũ hơn) - Mở file Photoshop hoặc file hình về giao diện của Website sẽ xây dựng. Trong bài hướng dẫn này, ta mở file : booksonline.jpg - Một số phím tắt khi sử dụng Photoshop CS2 (đối với phiên bản cũ, phím tắt có thể khác): o Ctrl _ + : Zoom in (Phóng to) o Ctrl _ - : Zoom out (Thu nhỏ) o Ctrl _ R : Ẩn hay hiện thước kẻ (phần lớn, nên hiển thị thước kẻ khi slicing) o Ctrl _ Shift _ ; : Mọi thao tác sẽ snap và đường kẻ hướng dẫn (Guideline), lưới (Grid) o Ctrl _ ; : Hiện / ẩn đường kẻ hướng dẫn Guideline Hiện / ẩn lưới (Grid) 1/1/2008 o Ctrl _ ‘ : | o Mọi thao tác ẩn hiện, đều có thể thực hiện trên menu : View . Photoshop Bài 3 :Slicing trong 3
  5. III. Bước 2 – Tạo GuideLine cho hình - Trong giai đoạn này, cần hiện thị thước kẻ (Ruler) để tạo GuideLine - Mặc định, khi có Guideline thì Photoshop sẽ bật Hiển thị Guideline (Ctrl - ;) - Mục tiêu của bước này : Tạo ra các đường kẻ trước khi sang bước slicing. Các đường kẻ này sẽ giúp cho việc slicing dễ dàng và chính xác hơn. - Cách tạo ra 1 Guideline: o Sử dụng chuột, Click và kéo một đường từ thước kẻ (Ruler) vào màn hình chính o Có thể sử dụng công cụ Move Tool - (phím tắc V) trên thanh công cụ (Toolbar) để thay đổi vị trí của các Guideline có sẳn o Để xóa một Guideline : Chọn và kéo Guideline vào thước kẻ bằng dụng cụ Move Tools. - Lưu ý : o Guideline chỉ có thể là đường thẳng, đường ngang, không có đường chéo (mặc dù có Guideline đường chéo). o Phải quyết định kỹ sẽ xén ảnh (slicing) kỹ để từ đó, tạo Guideline đúng. o Do slicing là giai đoạn tạo ra các hình ảnh nhỏ (hình chữ nhật), vì vậy, khi tạo các đường Guideline như thế nào, thì sẽ dẫn đến việc slicing như thế đó. Chú ý, khi kẻ Guideline, tốt nhất nên chọn kích thước CHẴN trên thước kẻ theo đơn vị Pixel. VD : Kéo một đường Guidline ngang ở vị trí 200 pixel, không nên tạo ở vị trí 201 pixel 1/1/2008 | o Cách đổi đơn vị trên thước kẻ : Double-Click vào thước kẻ và đổi đơn vị. BàiSlicing3 : trong Photoshop 4
  6. o Tạo Guideline đến đâu, slicing (xén) ảnh đến đó. o Sau khi tạo các Guideline xong, nên lưu lại thành file photoshop (*.psd) để chỉnh sửa sau này. 1/1/2008 | Photoshop Bài 3 :Slicing trong 5
  7. IV. Bước 3 - Xén ảnh (Slicing) - Bật chế độ snap vào đường Guideline để hỗ trợ quá trình slicing (Ctrl + Shift + ; ) - Sử dụng thanh công cụ Slice Tool – (phím tắt K) để tiến hành xén ảnh theo đường kẻ Guideiline. - Chú ý, cố gắng cảm nhận khi kéo thả Slice Tool , vì khi kéo giữa các góc giao nhau giữa các đường Guideline, sẽ bị hút nhẹ vào gốc giao. - Tiếp tục tạo GuideLine và Slicing cho đến khi hoàn tất quá trình Slicing 1/1/2008 | BàiSlicing3 : trong Photoshop 6
  8. - Xóa Slice đã tạo : Click phải lên vùng quản lý của slice (nằm gốc trái trên của Slice) Chọn Delete 1/1/2008 | Photoshop Bài 3 :Slicing trong 7
  9. - File ảnh booksOnline.jpg 1/1/2008 | BàiSlicing3 : trong Photoshop 8
  10. - Kết quả Guideline và Slicing cuối cùng cho file ảnh booksOnline.jpg 1/1/2008 | Photoshop Bài 3 :Slicing trong 9
  11. - Kết quả Guideline và Slicing cuối cùng cho file ảnh booksOnline.jpg 1/1/2008 | BàiSlicing3 : trong Photoshop 10
  12. - Kết quả Slicing cuối cùng cho file ảnh booksOnline.jpg 1/1/2008 | Photoshop Bài 3 :Slicing trong 11
  13. V. Bước 4 : Chỉnh sửa tên ảnh Slice - Mỗi ảnh nhỏ slice sẽ có một số thứ tự và một tên. Tên mặc định là TênFileẢnh_STTFile. - Tuy nhiên, nhưng ảnh slide quan trọng thì cần đổi tên để sau khi export ở bước sau, phát sinh các ảnh nhỏ sẽ dễ nhận biết hơn. - Tại control điều khiển của ảnh slice cần đổi tên Chọn Edit Slice Options - Trong hộp thoại Slide Option, chỉnh sửa tên của slice tại mục Name. 1/1/2008 | BàiSlicing3 : trong Photoshop 12
  14. VI. Bước 5 : Kết xuất Ảnh slice thành Webpage - Từ menu File Save For Web and Device - Trong hộp thoại xuất hiện, tùy yêu cầu Webpage như thế nào mà tùy chỉnh các tham số cho hợp lý o GIF JPEG o Quanlity : 60 100 o - Chọn Save Trong hộp thoại Save Optimize As, tùy chỉnh các tham số : o File name : o Save as Type : HTML and Image (*.html) - Chọn Save. - Kết quả sẽ được một file HTML và một thư mục hình 1/1/2008 | Photoshop Bài 3 :Slicing trong 13
  15. 1/1/2008 | BàiSlicing3 : trong Photoshop 14
  16. - Kết quả trang HTML 1/1/2008 | Photoshop - Kết quả mã nguồn file HTML Bài 3 :Slicing trong 15
  17. 16 Bài 3 : Slicing trong Photoshop | 1/1/2008
  18. 17 Bài 3 : Slicing trong Photoshop | 1/1/2008
  19. 18 Bài 3 : Slicing trong Photoshop | 1/1/2008
  20. 1/1/2008 | Photoshop Bài 3 :Slicing trong 19
  21. VII. Bước 6 : Loại bỏ các thành phần dư thừa, chỉnh sửa - Sử dụng phần mềm Adobe Dreamweaver CS3 để chỉnh sửa một số phần trên website đã tạo. Tùy vào quan niệm và kỹ thuật, có thể cần phải thay đổi kích cỡ hình, và một số kỹ thuật khác - Đây là Webpage gốc, toàn bộ nội dung trên đầy là hình ảnh slice. 1/1/2008 | BàiSlicing3 : trong Photoshop 20
  22. - Đây là kết quả webpage đã được chỉnh sửa thay thế : o Phần nội dung, bỏ bớt đi o Một số vùng chuyển từ thẻ thành background của 1/1/2008 | Photoshop Bài 3 :Slicing trong 21