Cắt layout web bằng Adobe Firework

Thảo luận trong 'Thiết kế website' bắt đầu bởi bancamden, 22/4/12.

  1. bancamden

    bancamden Đang làm quen

    Tham gia ngày:
    25/5/11
    Bài viết:
    36
    Đã được thích:
    0
    Điểm thành tích:
    6
    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...

    [​IMG]

    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.

    [​IMG]


    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.

    [​IMG]


    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.

    [​IMG]


    OK, khi hoàn tất các công việc trên ta được giao diện như sau:

    [​IMG]


    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…

    [​IMG]


    Bạn làm như bài vẽ button bằng firework sẽ xuất hiện giao diện sau:

    [​IMG]


    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.

    [​IMG]


    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...
     
  2. babyinternet

    babyinternet Administrator

    Tham gia ngày:
    4/7/08
    Bài viết:
    4,655
    Đã được thích:
    1,583
    Điểm thành tích:
    113
    Nơi ở:
    [}{]e[][]
    Mình toàn dùng Photoshop cắt luôn mà không chơi cái firework bao giờ nhưng dù sao tut này cũng rất có ích cho các bạn mới làm quen với web. Điều quan trọng là bạn phải nhận định được mình sẽ sử dụng các hình nào, layout của bạn được viết dưới dạng HTML ra sao để cắt hình phù hợp nữa.
     
  3. doremon195

    doremon195 Lính mới

    Tham gia ngày:
    23/1/12
    Bài viết:
    11
    Đã được thích:
    0
    Điểm thành tích:
    1
    có tut bằng video thì tốt . Trực quan hơn là xem bv . dù sao thanks bác
     
  4. phuongbte

    phuongbte Lính mới

    Tham gia ngày:
    16/9/12
    Bài viết:
    6
    Đã được thích:
    0
    Điểm thành tích:
    1
    Cảm ơn Pac nhiều !
     
  5. 3zoka

    3zoka Guest

    Lần đầu tiên nghe tên công cụ này trước mình toàn tải file PSD về sửa .Để tải về dùng thử xem sao .Cảm ơn nhiều :go:
     
  6. mrdung123

    mrdung123 Đang làm quen

    Tham gia ngày:
    26/4/14
    Bài viết:
    66
    Đã được thích:
    0
    Điểm thành tích:
    6
    Mình thấy photoshop cs5 bây giờ tiện hơn mà bác
     
  7. fanfan

    fanfan Guest

    Dùng phần mềm để dựng giao diện với code = css thì cái nào đẹp và tương thích với nhiều trình duyệt hơn vậy :nemgach:
     
Đang tải...

Chia sẻ trang này