Chào các bạn hiền, ở các bài trước mình đã giới thiệu về cách vẽ nút và tao bóng đổ vẽ chữ… Tất cả các điều đó vận dụng vào bạn có thể vẽ một layout web đơn giản. Trong bài hôm nay mình sẽ cắt layout web bằng Adobe Firework.
Cắt layout web
Giả sử bạn đã vẽ ra được giao diện web bằng Firework rồi bây giờ cắt hình ra để style giao diện. Do vẽ demo nên k đẹp đừng có chê nha! hehe…
Cắt layout web bằng Firework
Bây giờ bạn sẽ hình dung và hệ thống lại các hình mình cần sử dụng trong hình vẽ: logo, các góc bo tròn, hình nền của menu, nền banner, nền footer… và cắt các thành phần đó ra.
Bạn dùng công cụ slice tool để quét các phần của đối tượng mình muốn cắt.
Slice tool
Khi muốn thay đổi kích thước vùng bạn đã quét sao cho phù hợp bạn dùng công cụ Scale tool và tùy chỉnh lại.
Scale tool
Lưu ý khi cắt Layout WEB
Khi cắt bạn nên đặt tên các hình mình cần giữ lại vì nếu bạn k đặt tên sau khi xuất file thì tất cả có một tên mặc định rất khó nhớ. Để cho dễ dàng hơn bạn đặt tên các file mình sẽ sử dụng đến.
Chọn vào hình cần đặt tên và xuống thanh thuộc tính làm như hình dưới đây.
Đặt tên cho hình trong layout web
OK, khi hoàn tất các công việc trên ta được giao diện như sau:
Layout WEB
Xuất file (Export images)
Bây giờ đến việc xuất file ra, công việc này cũng rất quan trọng. Bạn có một số tùy chọn trong trường hợp này có thể xuất hình, hình + HTML… bạn nên chọn kiểu hình + HTML vì khi xuất xong mình có thể kiểm tra lại được.
Chọn vào menu File - Export Wizard…
Export Layout web
Bạn làm như bài vẽ button bằng firework sẽ xuất hiện giao diện sau:
Export Layout Web Firework
Sau đó chọn đường dẫn lưu các file. Vậy là hoàn thành, bạn kiểm tra lại các file của mình có vừa ý không.
Cắt File
Bạn sẽ dễ dàng nhìn thấy các file mình đã đặt tên và gop chúng vào một thư mục tiến hành style giao diện thôi. hehe
Kết luận:
Bài này tuy đơn giản tuy nhiên mình mong sẽ giúp được các bạn chưa bít và muốn tự mình design giao diện. Ok có ý kiến thì comment nha pà con.
VN:F [1.9.22_1171]
Rating: 8.7/10 (7 votes cast)