Jul 20
14

Photoshop framework để thiết kế web

Đăng trong danh mục Graphic Design, Web Design bởi admin | Tags: , , , , ,

photoshop-framework
Chào mọi người. Hôm nay mình sẽ hướng dẫn các bạn tạo 1 framework cho photoshop để tiến hành design một giao diện website.
Nếu như có bạn nào đã biết, từ framework có nghĩa là một tập các công cụ, bố trí, sắp xếp để tiến hành công việc của bạn nhanh gọn, chính xác và hiệu quả hơn. Mình dùng khái niệm framework trong photoshop cũng là ý muốn ám chỉ điều này mà thôi.

Mình sẽ hướng dẫn các bạn một số vấn đề cần chuẩn bị để có thể tạo một môi trường tốt để các bạn có thể tiến hành công tác thiết kế giao diện website của mình.


1> Color Setting:
- Để đảm bảo màu sắc phù hợp và đồng bộ trong quá trình thiết kế, các bạn cần thay đổi chút ít trong color setting (trên thanh menu EDIT >> Color Settings hay Ctrl+Shift+K), bạn chọn chế độ RGB là “Adobe RGB 1998″ như hình chụp.
photoshop-color-settings

2> Preferences:
Tùy chỉnh lại cho cấu hình lưới cho vùng làm việc. Bạn vào Preferences Guides,grid (menu EDIT >> Preferences >> Guides, Grid, Slices & Count.. hay nhấn Ctrl+K)

photoshop preference
- Bạn chỉnh lại setting cho grid như trong hình. Còn về màu sắc của grid, guide line, slice line bạn có thể thay đổi để phù hợp với màu sắc trong bản thiết kế của bạn.
preference-grid

3> Sử dụng mô hình lưới 960 (960-Grid System):
- Cái này có vẻ mới mẻ với một số bạn, nhưng mô hình lưới 960 đã được các nhà thiết kế web trên thế giới sử dụng khá lâu và hiệu quả, ngay cả yahoo cũng sử dụng thiết kế grid 960. thiết kế dựa theo lưới 960 sẽ giúp bố trí và thiết kế các phần tử cho web được dễ nhìn và khoa học hơn trong phạm vi chiều rộng 960px. Thiết kế 960 phù hợp cho các màn hình chuẩn từ 1024×768 trở lên.

Hiện có 2 cách áp dụng lưới 960:lưới 12 cột và lưới 16 cột. Tùy thuộc vào độ phức tạp và nhu cầu của bạn mà có thể chọn 1 trong 2 loại để thiết kế cho website của bạn.
-12 cột

template-960-grid---12-columns

- 16 cột

template-960-grid---16-columns

Mình upload lên đây 2 file lưới mà mình thường làm việc cho khách hàng của mình. Phiên bản của mình có bổ sung đôi chút đó là thêm ô lưới 50px để tiện canh chỉnh và làm việc.
Download: web-design-template-960-grid-12-columns

Download: web-design-template-960-grid-16-columns

Nếu bạn quan tâm tới mô hình thiết kế này thì vào website sau để tìm hiểu: http://960.gs/ – 960 grid system

4> Một số vấn đề khác:
- Mình khuyến khích các bạn sử dụng 2 màn hình (Dual monitor) để công việc thiết kế được thuận tiện hơn. Vì mình có thể sắp xếp để cho vùng làm việc được rộng rãi và các công cụ được dễ thao tác hơn. Đây là chụp màn hình dual monitor của mình.
photoshop-dual-monitor

- Sử dụng color swatch 2.0 để sử dụng các màu của web 2.0.

web2.0-color-swatchweb2.0 swatch
Để insert file này vào photoshop của bạn, bạn để ý dialog Swatches bên phải có mũi tên chỉ xuống (cái nút mình khoanh màu đỏ), chọn Load Swatches rùi chọn file mà bạn down về là bạn đã có thể sử dụng.

- Sử dụng Gradient color 2.0.

photoshop-color-gradient2.0 – Web_2_0_GRADS_v3_0
Để insert thì bạn phải vào gradient editor (Chọn tool Fill Gradient, rồi nhấn vào dải màu trên thanh công cụ ở trên cùng để vào Gradient Editor) rồi nhấn nút Load rồi chọn file vừa tải về.

—————
Hy vọng sau bài viết này bạn sẽ có một môi trường thiết kế Web hiệu quả và chuyên nghiệp hơn.

Bài viết liên quan:

14 Lời bình cho bài viết “Photoshop framework để thiết kế web”

  • Tran quang Thien
    July 30, 2009 at 7:31 pm

    Cam on ban. Bai viet hay va huu ich voi minh lam. Khong biet ban hoc ve thiet ke o dau vay.

    Reply
    • admin
      July 30, 2009 at 10:46 pm

      Rất vui khi thấy bài viết hữu ích cho bạn. Mình tự học thiết kế thôi bạn à..rất vui được làm quen.

      Reply
  • thuy
    August 4, 2009 at 4:50 pm

    minh rat vui khi doc bai viet nay, minh con yeu tin hoc va hien tai minh muon hoc ho ve theit ket web nhu the nao, thay moi nguoi lam minh ham va thich lam, vi minh muon lam trang web cho rieng minh , vi minh hoc my thuat nen minh muon theit ke trnag web cho rieng minh dê up nhung buc tranh cua minh .cam on ban nhieu nhé

    Reply
    • admin
      August 4, 2009 at 4:55 pm

      You are welcome!

      Reply
  • H Phương
    August 9, 2009 at 5:03 pm

    Mình đang tìm hiêủ vê` 960 grid.thâý vân~ con` mơí mẻ quá
    Cảm ơn bài viêt’ thú vị ;)

    Reply
  • trần hữu hải
    October 7, 2009 at 11:44 am

    anh ah. Sao em download ảnh cuối cùng về máy mà không đăng được lên blog .Đổi đuôi sang định dạng JVG cũng không được.mà sao ảnh này không có đường link

    Reply
    • admin
      October 7, 2009 at 11:54 am

      hi, như anh đã nói trong bài viết phần đó, cái file Gradient (đuôi “.grd”) không phải là 1 file hình ảnh nên dù em có đổi đuôi cũng không hiện gì ra đâu. Nó dùng để import vô Photoshop gradient mà ! Còn import thế nào thì anh cũng có hướng dẫn chỗ đó luôn rồi. Sau khi vào Gradient Editor, nhấn nút Load, sau đó browse tới file .grd là nó sẽ load nội dung của file .grd vào Gradient Editor để dùng sau này. Chúc vui.

      Reply
  • trần hữu hải
    October 7, 2009 at 11:46 am

    vừa đọc bài này xong là em thực hành ngay.em thấy mấy cái này rất hay

    Reply
  • Photoshop framework để thiết kế web - Cộng đồng IT
    December 2, 2009 at 8:46 am

    [...] framework để thiết kế web Photoshop framework để thiết kế web Chào mọi người. Hôm nay mình sẽ hướng dẫn các bạn tạo 1 framework cho [...]

    Reply
  • thanhmabo
    February 26, 2010 at 6:05 pm

    rat hay, cam on ban nhiu nhiu

    Reply
  • Lisa
    July 21, 2010 at 3:48 pm

    Em cũng đang tìm hiểu cái này, nhưng không biết cái hiểu của em là đúng hay sai nữa, nhờ admin sửa giúp
    >>>>Khi thiết kế bên photoshop thì bất kỳ đối tượng nào được tạo ra phải bắt dính với grid (dóng theo hàng ngang và theo hàng dọc)<<<<
    Nhưng không biết khi cắt thì cắt như thế nào, cắt như bình thường hay sao, hay có quy tắc gì cho nó hay sao?
    Và khi ráp nó bằng Dreamweaver thì nó có khác gì so với cách làm bình thường!
    Vui lòng hướng dẫn hoặc cho em xin file mẫu vẽ bằng photoshop và đã tiến hành cắt ráp bên Dreamweaver
    Chân thành cám ơn! Mong sớm nhận hồi âm

    Reply
    • admin
      July 21, 2010 at 4:22 pm

      Nên nhớ, Photoshop chỉ giúp làm ra những hình cần thiết cho website, chứ đừng bao giờ export trực tiếp vì nó sẽ toàn ra table và không tối ưu. Tốt nhất là nên viết HTML và CSS từ đầu để slice 1 cái template.

      Reply
      • Lisa
        July 22, 2010 at 9:26 am

        Cám ơn anh đã trả lời!
        Trước nay em vẽ giao diện bên photoshop sau đó cắt nhỏ ra rồi xuất ra hình ảnh sau đó mang qua Dreamweaver tạo bảng rồi chèn vào.
        Sau đó mọi người nói làm vậy là không được phải sử dụng thẻ HTML và CSS em cũng có tìm hiểu qua, và cũng dùng được sơ sơ
        Nhưng khi được giới thiệu cách làm này em bị hoang mang không biết phải bắt đầu từ đâu và không biết nó có khác gì so với cách làm thông thường mà em hay dùng không
        Nếu được Admin cho xin vài file ví dụ đơn giản nha
        Cám ơn admin

  • admin
    July 22, 2010 at 9:27 am

    Nếu không biết bắt đầu từ đâu thì hãy bắt đầu từ…Google nhé. Bạn biết Google sinh ra để làm gì không? Chúc may mắn với Photoshop,html và css.

    Reply

Viết lời bình