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

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)

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

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

- 16 cột

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.

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

web2.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.

– 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