Cắt layout web bằng Adobe Firework

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

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

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

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

Đặ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

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

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

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

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)
Cắt layout web bằng Adobe Firework, 8.7 out of 10 based on 7 ratings
Share This