Thứ Ba, 9 tháng 3, 2010

2. CẮT LAYOUT

Cắt Layout sau khi thiết kế xong giao diện của trang web là một việc làm hết sức quan trọng, nó có tác dụng sau:

1. Tách riêng các nút bấm ra khỏi image giao diện của trang web, việc này sẽ giúp cho bạn liên kết được nút bấm đến một trang web khác .

2. Tăng tốc độ tải website. Giao diện của trang web sẽ được tải nhanh hơn nếu như bạn cắt Layout, vì những hình ảnh được cắt ra sẽ được IE tải về theo từng mảnh, nếu để nguyên một cái Image lớn như vậy thì trình duyệt web sẽ tải về rất chậm. Nếu mà trang web của bạn tải về chậm thì sẽ làm người duyệt web dễ nản khi họ mới truy cập lần đầu tiên .


CÁC BƯỚC CẮT LAYOUT

Trước tiên bạn nên cắt cái banner trước , có người thích để nguyên cái banner . có người thì thích cắt nó ra làm nhiều mảnh , ở đây tôi không cắt nó , mà vẫn để nguyên , chỉ cắt nó ra khỏi theme của web thôi .

1. Nhấn K để sử dụng công cụ Slice Tool

2. Sau đó rê chuột và cắt lấy phần mà bạn muốn cắt. Vùng nào được cắt sẽ có số màu xanh hiện ra, vùng nào có số màu xám là vùng sẽ được photoshop tự động cắt. Việc này không ảnh hưởng gì hết.

3. Sau đó tôi tiến hành cắt cái mục tiêu đề làm 2 phần như các bạn thấy ở hình dưới

4. Tiếp đó rê chuột đến cắt các nút bấm , nhớ cắt sát viền nút bấm

5. Đối với các nút bấm không có hình dạng vuông hay chữ nhật (như các nút bấm bên phải) thì các bạn có thể dịnh kích cỡ tùy ý để cắt.

6. Tiếp đó cắt vùng mà bạn dự định sẽ ghi dữ liệu lên đó thường xuyên ,sau này khi soạn web , chúng ta sẽ xóa cái hình bị cắt ở vùng 11 và chỗ dó sẽ dùng để gõ chữ hay chèn hình ảnh khác - việc này sẽ thao tác bên phần HTML - hình

7. Tiếp đó, nếu muốn các bạn hãy cắt nhỏ những phần còn lại, mục đích là để web load nhanh hơn thôi.

8. Sau khi đã cắt hoàn thành, bạn hãy nhấn Ctrl+Shift+Alt+S hay vào File > Save for web để save trang web

Trong ô Setting bạn có thể lựa chọn file xuất ra sẽ là file GIF hay là JPG , ở đây tôi sẽ xuất ra file GIF

9. Sau khi nhấn Save thì hãy thiết lập như hình

- ô file name đặt tên là Index

- ô Save as type các bạn chọn HTML and Images (*.html)

10. Sau khi Save xong, thì bạn sẽ có 1 file index.html và 1 folder tên là images trong Folder này sẽ chứa tất cả các hình ảnh mà các bạn vừa cắt xong. Chú ý là không được đổi tên của folder này.

VẬY LÀ BẠN ĐÃ HOÀN THÀNH XONG PHẦN CẮT LAYOUT VÀ LƯU TRỮ TẠO WEB

Tới đây về cơ bản trang web của bạn đã hoàn thành, bạn hãy chạy file index kia xem nào

Không có nhận xét nào:

Đăng nhận xét