Trong Photoshop để thiết kế được một layout website hoàn chỉnh ngoài các công cụ để vẽ và những công cụ để chỉnh sửa hình ảnh thì công cụ cắt layout và quá trình tối ưu hóa layout được cắt là một khâu quan trọng trước khi Bạn sử dụng các phần mềm khác như Dreamweaver, notepad … để dựng layout . Bài 9 Hướng dẫn thiết kế website trên Photoshop sẽ hướng dẫn chi tiết các thao tác sử dụng công cụ Slice tool để cắt layout.
Bài 9A – Tìm hiểu về slices
Bài này sẽ giới thiệu cho Bạn hiểu về chức năng và công dụng của công cụ slice.
Mở file
slices1.psd trong thư mục Bài Tập Thực Hành (link download phía cuối bài viết). Vào menu
View -> Show -> Slices để hiển thị các đường slice (đường cắt bằng công cụ slice)
(hình 01).
Xem clip hướng dẫn:
Bài 9B – Sử dụng Slice Tool.
Mở file
slices2.psd trong thư mục Bài Tập Thực Hành.
Vào
View -> check vào Snap để các đối tượng và các đường line được hít vào với nhau khi sử dụng hoặc di chuyển các đối tượng đến gần nhau
(hình 02).
Vào
View -> Show -> Slices để hiển thị các đường cắt, chọn công cụ Select Tool trong tool box, lúc này xuất hiện số 01 phía trên bên trái cửa sổ soạn thảo và đường chấm bao quanh đối tượng.
Trong trường hợp các đường line này trùng với màu nền của bản thiết kế Bạn có thể thay đổi màu cho chúng để nhìn rõ hơn bằng cách vào
Edit -> Preferences -> Guides, Grid & Slices… sau đó thay đổi màu các đường line tương ứng
(hình 03).
Dùng công cụ Slice Tool kéo 1 hình chữ nhật bao quanh logo trang web Bạn sẽ thấy xuất hiện một ô với đường viền màu xanh, đây chính là ranh giới được cắt bởi công cụ Slice tool, đồng thời xuất hiện các số thứ tự 02,03,04 bên trong các vùng ranh giới, đây là tên của hình ảnh sau khi Bạn lưu layout này lại, hãy tiếp tục tạo các slice tương tự và khảo sát sự thay đổi của các đường slice.
Tiếp theo chọn công cụ
Slice Select Tool, công cụ này dùng để chọn và hiệu chỉnh các slice đã cắt trước đó. Mặc định chỉ có thể chọn và hiệu chỉnh với những slice được vẽ, các slice được tạo ra tự động sẽ không có tác dụng, nếu muốn hiệu chỉnh các silce này Bạn hãy nhấn vào
Promote trên status của công cụ
(hình 04).
 |
| Hình 05 |
Để chia 1 slice thành nhiều slice bằng nhau chọn
Slice Select Tool và nhấn button
Divide… (hình 04, 05)
Nhấn chuột phải -> chọn
Combine Slices để gộp các slice đang được chọn vào thành 1 Slice
Muốn xóa 1 slice chọn slice cần xóa nhấn phím delete hoặc nhấp phải chuột chọn
Delete Slices
Để xóa tất cả các slices vào menu
View -> Clear Slices
Xem clip hướng dẫn:
Bài 9C – Tạo slices trên layer.
Mở file
slices3.psd trong thư mục Bai Tap Thuc Hanh.
Chọn một hoặc nhiều layer cần cắt vào menu
Layer -> New Layer Based Slices lúc này các layer đã cắt di chuyển tới đâu thì các slices di chuyển theo tới đó đồng thời nếu có thay đổi về kích thước thì các slices này cũng sẽ thay đổi theo.
Xem clip hướng dẫn:
Bài 9D – Tối ưu hóa và lưu slices
Mở file
slices4.psd trong thư mục Bai Tap Thuc Hanh
Chọn
Slices Select Tool, chọn một slices cần đổi tên nhấn biểu tượng
để đổi tên cho hình ảnh sau khi lưu nhằm kiểm soát hình ảnh được dễ dàng khi sử dụng các phần mềm khác để dựng layout (Dreamweaver, notepad …) sau này.
Tiếp theo cẩn phải tối ưu hóa layout để khi xuất file ra được hình ảnh chất lượng nhưng không quá nặng.
Vào
File -> Save fo web & Devices…
Xem clip hướng dẫn:
Trong cửa sổ Popup Save for Web chọn thẻ
Optimized, chọn
Slices Select tool trên hộp công cụ, tiếp theo chọn slices cần tối ưu để hiệu chỉnh cho chúng. Đối với các hình ảnh thì nên tối ưu với đuôi mở rộng là JPG để có chất lượng đẹp, các hình ảnh tĩnh (hình ảnh không thay đổi trong khi truy cập trên trình duyệt) thì nên sử dụng đuôi mở rộng là GIF hoặc PNG để cho dung lượng file nhẹ nhằm tăng tốc độ tải trang khi chạy trên trình duyệt.
Mọi thắc mắc tong quá trình thực hành xin gửi e-mail về info@polygon.vn chúng tôi sẽ giải đáp thắc mắc cho Bạn.
Chúc các Bạn thành công.
Download bài tập thực hành
File name: Bai09_CatLayout.rar - File size: 27.40 MB