Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

[Chia sẻ] Tối ưu công việc cho web designer - phần 1

Chủ đề thuộc danh mục 'Thủ thuật - Kinh nghiệm về web' được đăng bởi Silent, 6/3/14.

Lượt xem: 13,028

  1. Silent Thành viên cấp 0

    Mình có tham gia vào 1 vài group liên quan đến web, gặp hơn mấy chục design với front-end dev ngoài đời, tất nhiên đều là người việt. Thì đa phần đều rất ít hoặc gần như ko có người nào tận dụng hoàn toàn hết tính năng của Photoshop (Ps) hay Illustrator (Ai) và các extension, script phụ trợ cả.

    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.

    [​IMG]

    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:

    [​IMG]

    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.

    [​IMG]

    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


    [​IMG]
    [​IMG]

    Bộ tool này có 3 chế độ ở thanh setting tool – bên dưới menu

    [​IMG]

    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.


    [​IMG]

    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.

    [​IMG]

    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

    [​IMG]

    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

    [​IMG]

    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

    [​IMG]

    Đ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

    [​IMG]

    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 :D
    Phần sau sẽ đến các extension ^^

    ...
    Chỉnh sửa lần cuối: 16/3/14
    Boo Mina, dabeomoon, hitle9218 người khác thích bài viết này.
  2. vuong quoc

    vuong quoc Thành viên cấp 2

    Rất bổ ích.... mình củng dang học về lập trinh web và thiết kế giao diện .
    Chủ nhật thớt có di hội thảo website hiện đại không....cho e sdt e gặp mặt hỏi về website tí
    Silentthuha104 thích bài viết này.
  3. langthang217

    langthang217 Thành viên cấp 1

    ko hiểu sao cái properties của shape luôn mất sau khi mình chọn 1 layer khác rồi chọn lại shape vừa tạo...
    Silent thích bài viết này
  4. thuha104

    thuha104 Mới đăng kí

    khi nào hội website gặp nhau alo mình với nha
    Silent thích bài viết này
  5. banbaonylong

    banbaonylong Ko phải assmin

    Silent thích bài viết này
  6. iViperious

    iViperious Thành viên cấp 3

    langthang217 : khi bạn bỏ chọn 1 Shape nó sẽ tự động bỏ chọn tất cả các properties của shape đó (cái này thì tất nhiên rồi) Shape trong Photóhop bao gồm 2 phần : 1 là để bạn change color của Shape , và cái còn lại là các line vector tùy chỉnh hình dạng cho Shape của bạn. bạn muốn chọn lại thì bạn cần phải click chuột vào vùng chưa line vector chứ không phải là layer shape nhé ! sau khi chọn nó sẽ hiển thị line còn bạn muốn hiển thị các Point thì phải dùng Direct Selection Tool để chọn nhé !

    [​IMG]

    Để sử dụng shape nhuần nhuyễn trong PTS thì chỉ cần sử dụng Pen tools tốt là được , các công cụ khác sẽ dùng Phím tắt là control , alt ...để switch qua lại nhé .
    Silent thích bài viết này
  7. Silent

    Silent Thành viên cấp 0

    vuong quoc : nếu ko có gì bận thì mình sẽ đi đc, mình đã đăng kí rồi, cũng muốn gặp gỡ các web design khác, mình hơi ít giao tiếp với giới :D
    langthang217 : dùng Direct hoặc Path selection tool (A) chọn lại shape thì có lại nhé :)
    iViperious : thím nên sử dụng CS6 hoặc CC thì shape tool đã đc hỗ trợ theo kiểu khác, không khác gì so với vector bên Ai nhiều lắm đâu thím :)
    hippo91iViperious thích bài viết này.
  8. huythong91

    huythong91 Thành viên cấp 1

    Mình thấy text với align cũng quan trọng mà. Cho mình hỏi tý về align mình muốn sắp xếp khoảng cách đều nhau nhưng mà trong PS có vẻ khó hơn AI . Mình đã dùng Distribute nhưng có vẻ nó sắp xếp không đúng. Các pro cho ý kiến
  9. iViperious

    iViperious Thành viên cấp 3

    Silent :D thanks thím với mình CS mấy không quan trọng lắm trước giờ chưa từng thấy nó khác với bên Ai là mấy thím ah !
  10. HànPhong

    HànPhong Thành viên cấp 1

    4 Draw Hentai? @@
  11. akexxxx

    akexxxx Mới đăng kí

    rất bổ ích cho newbie !!!!
  12. willy.tran

    willy.tran Thành viên cấp 1

    Hóng phần 2, vì toàn bộ kiến thức này mình đã và đang sử dụng thường xuyên ;)
  13. davidpotter

    davidpotter Banned

    Cảm ơn thông tin bạn đã chia sẻ.
    Mình sẽ áp dụng thông tin này.
  14. minibavuong

    minibavuong Mới đăng kí

    Có thể cho mình xin facebook để có gì học hỏi thêm đc ko bro :)
  15. thietkewebhoian

    thietkewebhoian Thành viên cấp 1

  16. quyntmaster

    quyntmaster Mới đăng kí

    rất tốt Mình thấy text với align cũng quan trọng mà
  17. Resort.PhuTho

    Resort.PhuTho Mới đăng kí

    Triển khai làm thôi nào.
  18. MinaRin

    MinaRin Thành viên cấp 1

    Thanks thớt. Nhìn lại mới thấy script, extension chả bao giờ dùng. :'(
  19. Dog

    Dog Thành viên cấp 1

  20. Free The Box

    Free The Box Thành viên cấp 1

    Rất hay ạ :D Đợi phần extension của bác :D

Ủng hộ diễn đàn