11 thg 10, 2013

20 thủ thuật Photoshop dành cho thiết kế web

David Everly và Dan Rose đã tiết lộ 20 mẹo vặt hay nhất trong Photoshop giúp thiết kế website một cách hiệu quả nhất.

Đối với rất nhiều web designer, Photoshop vẫn là một công cụ chính được sử dụng chính trong quá trình thiết kế website. Từ việc sắp đặt lại các thư mục trong trang, hay chỉ là thiết kế một thành phần trong website. Dưới đây là một vài mẹo nhỏ rất hữu dụng cho các dự án sắp tới của bạn...

1. Sử dụng lưới

su dung luoi
Có nhiều công cụ giúp sử dụng lưới trong Photoshop

Hệ thống lưới có thể đơn giản hóa việc thiết kế cho các web designer. Hãy sử dụng các công cụ hỗ trợ miễn phí như phần mềm mở rộng của Photoshop Cameron McEfee's GuideGuide và Grid System Generator để tùy ý chỉnh sửa lưới căn lề một cách dễ dàng và chính xác.

2. Hãy chuẩn bị tất cả

Một trong những bí quyết thành công trong việc thết kế web (và quản lý thời gian) đó chính là tập hợp tất cả các thành phần của website trước khi bắt đầu với công việc "nặng kí" nhất là thiết kế.

Các web designer thường nhảy ngay vào một mảng nào đó thay vì phải suy nghĩ ra tất cả các thành phần còn lại của trang.Việc chuẩn bị một khung sườn thật chi tiết sẽ đảm bảo cho chúng ta có những quyết định thông minh hơn và tránh việc chỉnh sửa một dung khối lượng lớn về sau.


3. Tùy chọn các khổ văn bản có sẵn

tuy chon van ban kho co san
Tùy chọn các khổ văn bản

Bấm tổ hợp Ctrl/Cmd+ N để mở một cửa sổ làm việc mới. Với một menu bao gồm hầu hết các định dạng có sẵn của văn bản, tuy nhiên nó vẫn còn thiếu khá nhiều những kích thước phổ thông của một lưới web, kích thước banner, kích thước giao diện của các thiết bị IOS và Android. Hãy dành thời gian để tùy chỉnh các thông số mà bạn muốn.

4. Tùy chỉnh cách nhập văn bản của bạn

Hãy đóng tất cả các văn bản mà bạn đang sử dụng. Mở một bảng menu font chữ và tùy chỉnh các hiệu số như kiểu chữ, độ đậm nhẹ, khoảng cách giữa các chữ, và màu sắc. Không nên sử dụng font Myriad!

5. Một vector sắc nét

Giữ cho các đối tượng vector của bạn thật sắc nét. Với công cụ Rectangle (U), mở thanh công cụ Geometry ở trong thanh option. Kiểm tra độ nét pixel của các đối tượng.

6. Có những đường chấm rõ ràng

co duong cham ro rang
Tạo các đường chấm rõ ràng trong Photoshop

Chọn công cụ Brush tool (B) sau đó mở cửa sổ Brush Preset, chọn đến vùng chọn ở phía bên phải góc trên cửa sổ. Chọn Square Brushes và nhấn Append

Bây giờ chọn tính năng Hard Square với 1 pixel brush. Chuyển sang lại cửa sổ Brushes palette và nhấn Brush Tip Shape, tăng Spacing lên 300%. Trong chế độ Canvas size, giữ Shift trong khi kéo Brush dọc hoặc ngang để tạo thành một đường chấm sắc nét.

7. Căn chỉnh văn bản dễ dàng

Với một vài thao tác nhỏ gọn, Photoshop có thể Wrap Text dễ dàng với công cụ Indesign. Lựa chọn công cụ Rectangle tool (U). Trong tab thanh Option, các bạn đổi từ Fill sang Paths, chỉnh mục Shape thành Rectangle tool và chọn "add to path area" ( hoặc bấm +). 

Trong công cụ Canvas, vẽ một vùng chọn tứ giác lên trên vùng text của bạn. Trở lại với thanh Option bar chỉnh từ Fill sang Paths, chỉnh lại từ Shape sang Rectangle (hoặc có thể bấm -). Trong công cụ canvas với đường viền của vùng chọn gốc, vẽ một vùng chọn tứ giác với kích thước mà bạn muốn bỏ văn bản vào.

Sử dụng công cụ Type tool (T), và nhấn vào trong vùng chọn để thay đổi từ vùng chọn thành vùng để viết văn bản. Bạn có thể chỉnh sửa vùng viết với thanh công cụ Rectangle tool (U) và công cụ Direct tool (A)


8. Tô màu nhanh chóng

to mau nhanh chong
Sử dụng các câu lệnh để tô màu

Nhấn Alt/Opt + delete để tô màu cho chữ cái, hình dáng và layer với màu Foreground. Nhấn Ctrl/Cmd +delete để tô màu cho vùng chọn với màu background. Nhấn để để đổi màu Foreground và background thành 2 màu cơ bản đen trắng, nhấn X để đổi màu Foreground thành Background và ngược lại.

9. Hãy Ngăn Nắp

Sử dụng tổ hợp Ctrl/Cmd +G để gộp nhóm các layer và giữ cho các layer này một cách có hệ thống. Gộp nhóm các thành phần của Website – như thanh điều hướng, các chức năng của từng vùng, các thành phần hỗ trợ và các tiêu đề cuối của trang - thành từng vùng sẽ giúp cho bạn tránh phải gặp đau đầu trong quá trình thiết kế và phát triển của dự án.

10. Hãy sử dụng công cụ Smart

Sử dụng công cụ Smart Object (bạn vào Filter > convert for smart filters, và Ctr/nhấn chuột phải vào layer > Convert to smart object) một cách khôn ngoan để gia tăng tốc độ làm việc của bạn trong quá trình thiết kế. Đổi các bức ảnh lớn và các đối tượng vector thành các Smart object vẫn sẽ giữ nguyên chất lượng hình ảnh sau khi tùy chỉnh, xoay v..v.

11. Các Phím tắt

Để trở thành một ngôi sao sử dụng thành thạo Photoshop như trở lòng bàn tay, không phải là việc chúng ta biết cách làm như thế nào, mà phải làm thế nào cho nhanh và bạn sẽ sử dụng thời gian hoàn thành một chức năng cho web một cách có hiệu quả nhất. Một vài tổ hợp phím tắt cơ bản mà bạn cần biết bắt đầu với chức năng lưu cho trang web [cmd+opt+shift+S], Image Size [cmd+opt+I], Canvas Size [cmd+opt+C]. Đừng quên cấp độ [cmd+L] và Hue/Saturation [cmd+U] .

12. Tinh tế - mọi thứ cần phải chừng mực

su dung chung muc
Sử dụng chừng mực các hiệu ứng, đổ màu

Là một designer, chúng ta có khuynh hướng làm mất uy tín của mình trước các khách hàng bằng việc không cho họ cảm nhận đủ sự hiệu quả mà chúng ta đang hướng đến. Nên chúng ta đã thêm vào quá nhiều các hiệu ứng, đổ màu Gradient thái quá và lạm dụng công cụ tương phản (Constrast). Để phối màu thật chuẩn khi phối hợp sử dụng các hiệu ứng này bạn cần sử dụng một ít duyên dáng, và quan trọng hơn, đó là sự cẩn trọng.

13. Dùng mặt nạ toàn diện ( Mask) một cách thông minh.

Sử dụng công cụ Mask một cách toàn diện sẽ giúp ta đạt được hiệu quả cao trong công việc. Lấy ví dụ, nếu bạn có 5 tấm hình và bạn gộp nhóm hết các hình và đặt mặt nạ chung cho cả nhóm thay vì phải đặt mặt nạ cho từng Layer. Đó là một giải pháp tối ưu hơn là chúng ta phải lướt lại 20 cái mặt mạ, và không biết chúng để làm gì.

14. Tinh chỉnh Mask để có một mái tóc đẹp

refine mask
Chọn Refine Mask để có mái tóc đẹp

Ai mà không muốn có một mái tóc đẹp? Đây là một mẹo nhỏ có thể sử dụng trên nhiều hình có độ phân giải khác nhau, không cần biết là mái tóc đó rối rắm như thế nào. Tạo một Mask cơ bản cho hình cần xử lý chọn Refine Mask (Refine Edge với phiên bản Cs 5). Hãy tùy chỉnh với biên độ Radius và xem phép màu xảy ra nào

15. Đổ bóng một cách chính xác

Như các tip ở trên đã nêu, dấu hiệu nhận biết một designer nghiệp dư đó là khi họ đổ bóng quá tối. Nó đồng nghĩa với việc đối tượng đang ở dưới một bóng đèn cao áp. Hãy luôn nhớ là giảm Opacity xuống, và tốt hơn, chúng ta nên dùng những màu tối khác làm màu nền thay vì là màu đen. 

16. Tự dạy cho bạn cách dùng Pen Tool

pen tool
Học cách sử dụng công cụ Pen tool

Dành thời gian để học cách sử dụng Pen tool là một điều hoàng toàn đúng đắn. Đó là một trong những điều mà nhiều người tránh học, nhưng nếu bạn muốn một layer Mask sắc xảo hay thêm các hiệu ứng bắt mắt vào sản phẩm thiết kế thì Pen tool là sự lựa chọn chính xác của bạn. Cải thiện kỹ năng của bạn bằng công cụ này

17. Làm sắc nét tấm hình của bạn với công cụ High Pass

Bạn đã sẵn sàng để cảm nhận sự kỳ diệu của Photoshop chưa? Tình huống là như thế này, khi bạn nhận được một tấm hình có độ phân giải thấp, và quá mờ để sử dụng. Hãy nhân đôi tấm hình với layer mới nhân đôi, bạn chọn filter > other > High Pass. Chọn mức độ khoảng 2 hoặc thấp hơn và sau đó chỉnh chế độ hòa trộn Overlay. Nếu nó quá sắc, bạn có thể giảm độ Opacity xuống. Sẽ có một kết quả bất ngờ đấy.

18. Đạt sự đồng nhất

Năm màu xanh khác nhau nhưng tất cả chúng đều không phải là màu xanh phù hợp với thương hiệu của khách hàng? Hãy cẩn trọng và kiểm soát lại các màu sắc mà mình đang sử dụng, đặc biệt là khi chúng ta xuất file. Một phần mềm có thể giúp chúng ta có màu sắc chính xác đó là 0to255.com. Nó cho chung ta những số liệu cụ thể về màu sắc và dãy màu đậm hơn hoặc sáng hơn của màu được chọn.

19. Đừng sử dụng những thiết lập mặc định

khong su dung thiet lap mac dinh
Không sử dụng các thiết lập mặc định

Điều khó nhất của các designer đó chính là tự chủ trong khi sử dụng Photoshop. Nếu bạn sử dụng Panel Effect như là một checklist đầy phong cách, bạn có nguy cơ cao không thể sử dụng các thiết lập đúng như mình mong muốn. Những thiết lập mặc định thường khá thô và nhằm để hiện rõ hiệu ứng lên mà thôi. Hãy giảm các biên độ của hiệu ứng và thay đổi các góc độ.

20. Tiểu Tiết

Một phần tối quan trọng trong việc có một bản design hoàn chỉnh đó chính là tinh chỉnh đúng đến trường pixel một. Hãy lướt qua một lượt tất cả các file PSD của bạn, hãy nhìn những góc cạnh nào có thể hơi mờ ở những vùng chọn vuông hay những outline dày hơn bình thường. Việc dành thời gian để hoàn thiện các layout của bạn là hoàn toàn xứng đáng.