Người đăng: Ba tuoc Monte Cristo
Gửi ngày 22 Tháng 5, 2006
In    Gửi mail

Bài này tôi viết để dành cho những ai đã biết và khá thạo về HTML và các chức năng của Photoshop và ImageReady rồi. Nếu bạn mới làm quen với Photoshop, bạn có thể tìm đọc các bài ít phức tạp hơn nhé.

Trong bài này tôi sẽ dùng lại giao diện đã hướng dẫn bạn làm ở bài trước. Tôi sẽ tiến hành Slice giao diện này để xuất bản trang web. Nếu bạn muốn chúng ta cùng có kết quả giống nhau, bạn có thể làm theo tutorial này rồi sau đó tiếp tục, hoặc đơn giản hơn là download giao diện này về.

Trước tiên bạn mở giao diện đó trong Photoshop. Sau đó trên Layer Palette bạn tạo một layer mới và nhấn tổ hợp phím Ctrl-Shift-Alt-E để Stamp Visible tất cả các layer vào làm một. Thao tác này giúp bạn chắc chắn rằng, sau này bạn sẽ không slice nhầm một "chú em" nào hết.



Sau đó, bạn tiến hành kéo các đường Guide Line để định vị những chỗ cần cắt như hình sau.




Khi bạn đã hài lòng với định dạng đó, bạn chuyển sang công cụ Slice (K) và tạo một Slice bao phủ toàn bộ layout. Ý tôi là bạn cắt một miếng bao toàn bộ giao diện để tạo bảng cho nó.

Tiếp theo bạn cứ từ từ slice theo hướng dẫn sau. Khi Slice bạn nên chú ý đến các chi tiết nhỏ. Như hình dưới đây, bạn cố gắng slice cân bằng giữa các bảng. Tuyệt đối tránh Slice kiểu lộn xộn, một miếng to bên này, một miếng nhỏ bên kia. Sau này các dòng code của bạn sẽ là một nồi thập cẩm, muốn edit nó thì mệt lắm.





Sau khi bạn đã hài lòng với các slice của mình, bạn chuyển sang ImageReady (Ctrl-Shift-M) và nhấn File > Save Optimize As và đổi tên nó thành index.



Chú ý: Nếu bạn là người cẩn thận, bạn có thể đặt tên cho các slice để tiện theo dõi. Vì bài này dành cho người đã biết qua, cho nên tôi cho rằng bạn biết cách đặt tên cho slice như thế nào rồi nhé.


Sau khi lưu lại xong, bạn sẽ có một file index.html và một thư mục images. Trong thư mục Images bạn có rất nhiều hình như sau. Tất nhiên chúng ta chưa muốn dừng lại ở đây. Vì như thế thì đơn giản quá hè hè. Công việc tiếp theo là "con" giao diện của bạn quá béo, nhiều phần "mỡ thừa" cho nên phải qua cuộc giải phẫu để hút mỡ, giảm béo đến mức tối thiểu.





Bây giờ bạn mở file index.html bằng một chương trình thiết kế web yêu thích. Tôi thì hay dùng Microsoft FrontPage cho nên tôi mở nó ra với Microsoft FrontPage.



Well, bây giờ đến phần tỉ mỉ nhất! bạn xem kỹ xem trong giao diện này chỗ nào có thể thay được thì thay. Như tôi quan sát thì trong giao diện này hai dòng kẻ dưới banner và dưới logo có thể bỏ hình đi và thay bằng code màu HTML.



Như thế bạn đã cắt được một ít mỡ đi rồi. Bạn xoá hai hình màu vàng và màu xanh đi, nó sẽ tạo ra hai ô trống. Dòng code của nó sẽ như sau.



Bạn xoá mấy chữ   và thay vào đó bằng code màu tương đồng với hình bạn đã xoá.



Đây là dòng code sau khi đã thay đổi xong.



Cứ tương tự như thế bạn xoá hết hình đi và thay bằng chữ vào.

Và đây là giao diện tôi có đươc

http://vietphotoshop.com/tutorials/imagere...slice/tutorial/

Bạn có thể view source để xem rõ ràng hơn. Hoặc bạn có thể download cả giao diện này về để từ từ ngâm cứ.

http://www.vietphotoshop.com/tutorials/ima...slice/slice.rar

© Ba tuoc Monte Cristo - www.vietphotoshop.com

Xem bình luận (0)

« Trở về danh mục