Điện thoại: 0944210999
Do đó mình sẽ giới thiệu với các bạn những extension, script.. cũng như 1 số cách để tận dụng triệt để các tính năng của Ps trong việc thiết kế web và một chút về Ai (mình sẽ dành nó cho 1 bài viết khác).
Và nếu bạn biết bất cứ thứ gì có thể giúp hỗ trợ công việc design hãy chia sẽ với mình, mình luôn muốn cập nhật kĩ thuật để đẩy nhanh tiến độ công việc.
Mình sử dụng các phiên bản CS6 hoặc CC nhé. Tốt nhất nên dùng CC mới nhất.
1. Thiết lập
Nếu bạn chỉ sử dụng những thứ mặc định của photoshop cung cấp cho bạn thì thật là đáng tiếc, khi mà adobe cung cấp cho các soft của họ chế độ workspace để bạn có thể tùy chỉnh và tối ưu cho công việc của bạn.
Hãy thiết lập các tool mà bạn hay sử dụng nhất theo ý muốn của bạn.
Những tool ko có phím tắt nhưng bạn dùng thường xuyên thì tốt nhất hãy thiết lập phím tắt cho nó, cả khi phải hi sinh các phím tắt mà các tool bạn ít dùng cho công việc đang chiếm giữ.
Để thiết lập phím tắt, các bạn sử dụng đường dẫn :
- Edit>Keyboard Shortcuts…
Hoặc sử dụng tổ hợp phím tắt Alt + Shift + Ctrl + K:
Sau khi thiết lập xong, ưng ý rồi hãy lưu lại workspace của bạn bằng cách bấm theo hình trên cùng và chọn New Workspace… và đặt tên và check theo như bên dưới.
Thế là ko lo bị mất thiết lập cũ, làm cái khác thì tạo thiết lập khác, bấm chuyển qua lại. Đây là một trong những thứ là CC lưu trữ lại trên cloud.
2. Giới thiệu các tool Ps thường dùng cho design website/ui (mình hay dùng :lmao: )
A. Shape
Bộ tool này có 3 chế độ ở thanh setting tool – bên dưới menu
Là: Shape / Path / Pixel
Thì bạn nhớ, luôn là Shape. Nó giúp bạn tạo ra các đôi tượng như bên vector vậy, bạn thích co kéo nó to cỡ nào cũng được. Qua vài bước đơn giản bạn có thể tái tạo vector từ nó khi lôi vào Ai. Mình tạo các “thẻ div”, icon… trong Ps đều bằng shape. Lí do chính mà mình đồng ý làm việc web design trên Ps thay vì Ai.
Và quan trọng hơn, dùng nó để có thể quan sát ngay lập tức thông số, tùy chỉnh thông số chính xác đến từng pixel. Chưa kể các tool hỗ trợ xuất ra các thuộc tính CSS từ Ps, mà mình sẽ giới thiệu với các bạn ở phía sau đều hỗ trợ nó.
Nếu nhận được 1 file .psd web hiện thời mà toàn bộ đều là pixel mình sẽ remove luôn. Nếu bạn sử dụng CC thì quá tốt.
Ps CC cung cấp sức mạnh vượt trội cho web designer bằng cách buff cho shape.
B. Notes
Mình rất hay dùng nó để ghi chú mọi thứ trên file thiết kế khi gửi nó đi xa tới các front-end dev khó tính xD.
C. Layer Comp
Nếu bạn ko xài nó thì đúng là một đáng tiếc, nó giúp bạn lưu trữ lại các thay đổi trong vị trí, thuộc tính của các đối tượng trong phiên làm việc 1 dạng backup tuyệt vời.
D. Ruler
Điều hài là các front-end mình gặp rất hay ngồi ước lượng khoảng cách hoặc bật cái thanh ruler trên đầu lên rồi kéo lên xem, nhẩm ra khoảng cách các object :lol: Trong khi Ps cung cấp 1 cái tool cực tiện dụng, nhưng rất hiếm ai xài tới. Trong hình mình đã thiết đặt phím tắt N cho nó
E. Guide
Cái này để tạo grid , tất nhiên phần sau sẽ giới thiệu 1 extension chuyên dụng hơn. Nhưng mình luôn tạo phím tắt cho cái này, vì đôi khi nó rất có ích :beauty:
Vậy từ đầu đến h, quan trọng nhất là phải nhớ các phím tắt cho công việc nhé. Ngồi bấm chuột lâu lắm
Phần sau sẽ đến các extension ^^
Do mình sơ suất quên mất phần export của Photoshop (Ps) luôn >> mình tạm thời dời phần giới thiệu tool lại 1 chút nhé.
+Bonus: Xuất hình
Nếu như ở các phiên bản Ps trc đây mình thường dùng Slice tool (C)
Đặc điểm của tool này nhiều người tưởng kéo thành ô rồi dùng tiếp tool Crop tool để cắt :lmao:. Thực chất tool này phải sử dụng cùng với chế độ Save for web… (Alt + Ctrl + Shift + S) thì mới phát huy tác dụng. Thì hiệu quả của nó là giúp bạn xuất ra tất cả các thành phần được khoanh vùng bởi Slice trong 1 lần xuất duy nhất.
Ví dụ, mình có file psd như sau, đã dùng Slice khoanh vùng:
Tiếp tục dùng Slice Select Tool (C) nhấp vào các con số xanh 03, 05, 10 (nhấp nhẹ thôi) ở các vùng khoanh nhập tên vào phần name, đây là tên của thành phần sau khi xuất ra.
Mặc dù có slice background type cơ mà nếu bạn ko tắt layer background thì xuất ra là png, gif để transparent nó cũng ko hề transparent đâu : sosad:.
Kích hoạt Save for web… (Alt + Ctrl + Shift + S)
Ở đây, bạn bấm từng khu vực đã khoanh vùng rồi thiết lập thông số xuất ra. Sau khi xuất ra (nên để chế độ là Images only). Thì toàn bộ file sẽ nằm trong folder tên images
Bạn có thể thấy ngoài 3 khu vực đc khoanh vùng và đặt tên ban đầu thì tất cả các phân vùng rác khác nó cũng xuất luôn xD. Chưa kể vì mình ko tắt layer background nên file hình Pol.gif dù check transparent nhưng nó có nền trắng :lol:
Do đó mình đã bỏ cách này từ khá lâu rồi :v. Còn 1 cách khác khá hay là File>Script> Export layer to files…
Thì nó sẽ xuất toàn bộ các layer trong file psd ra thành các file hình, định dạng theo các bạn thiết lập, có trong suốt luôn.
Thằng này vì chỉ là 1 đoạn script do đó rất ngu, xuất cả text và các layer có thiết lập Blending option. Ví như mình thiết lập shadow cho cái hình tam giác thì nó sẽ ko tài nào xuất đc (nó cho thành thư mục images đó). Và nó chỉ xuất đc mỗi lần 1 loại định dạng. Cách đặt tên cho file thì quá tệ.
Do đó ở Ps CC đã cung cấp cho chúng ta 1 chế độ cực kì hay. Có thể làm tới đâu xuất đến đó, ko cần bấm xuất hay gì nữa. Nó nằm ở File>Generate>Image Assets
Chỉ cần kích hoạt, và thay đổi tên layer là nó sẽ tạo ra 1 thưc mục cùng chỗ với file psd và xuất file hình đó ra. Xuất đc cả group chứ đừng nói là layer.
Nó thiết lập đc cả thông số xuất ra, dù hơi hạn chế 1 chút. Chi tiết: http://helpx.adobe.com/photoshop/using/generate-assets-layers.html
+Bonus: Tô màu nhanh
Cách tô màu bất cứ layer nào dù là text hay shape, image… đó là tổ hợp phím Alt + Backspace (là nút thường dùng để xóa kí tự đứng phía trước ấy). Nó sẽ tô với màu nào thì các thím tự mò nha :brick:
+Bonus: Paragraph Style
Phần này mình ko tính nhét vào vì mình ko hay xài cho ui design lắm, chỉ xài khi edit truyện là nhiều thôi. Cơ mà có ng nhắc nên nhét vào luôn.
Cái tool này có tác dụng là lưu trữ lại các thiết lập của các đoạn text. Ví dụ mình setting như sau:
Thì khi mình tô đen hoặc chọn 1 layer text nào đó và áp chế vào lập tức toàn bộ sẽ chạy theo setting này. Và một khi mình thay đổi thiết lập của 1 paragraph style và lưu lại thì toàn bộ các đoạn text ảnh hưởng bởi nó cũng sẽ thay đổi theo.
À mà khuyên các bạn nào xài máy ko đc mạnh thì nhớ tắt chế độ preview đi nhé
0 nhận xét: