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

PSD sang CSS3 trong 5 nốt nhạc

Chủ đề thuộc danh mục 'Download' được đăng bởi việt ptit, 3/6/13.

Lượt xem: 8,696

  1. việt ptit Thành viên cấp 3

    MÌnh thấy box thiết kế web khá đìu hiu, nay mới hóng được một bài viết khá hay và hữu ích bên izweb nên share về đây cho anh chị em tham khảo, hâm nóng lại box này :D

    "Chúng ta đều biết CSS3 có thể tạo ra được những hiệu ứng đẹp mắt và ấn tượng. Với CSS3, chúng ta có thể giảm bớt lượng hình ảnh sử dụng khi chuyển từ PSD sang HTML&CSS.Tuy nhiên, cũng thật có có thể nhớ hết được tất cả các mã lệnh của CSS3. Chính ví điều đó mà các nhà phát triển đã tạo ra các extension trong photoshop chỉ với 1 cú click, bạn đã có thể chuyển toàn bộ hiệu ứng Blending options thành CSS.

    Trong bài viết này tôi sẽ giới thiệu đến các bạn 2 extension chuyển từ hiệu ứng photoshop sang CSS3.

    CSS3Ps

    Đây là một extension miễn phí, tuy nhiên chúng ta phải mất 5s để cho extension xử lý và lưu trữ nó lên mây. Việc bạn cần làm là có một phiên bản photoshop từ CS3 trở lên và CSS3Ps hổ trợ hệ điều hành Windows và MacOs.
    Bạn có thể download nó miễn phí tại: http://css3ps.com/Download/
    Hướng dẫn cài đặt có tại link download trên.
    Sau khi cài đặt xong bạn có thể vào photoshop và mở nó lên bằng cách vào menuWindows>Extension>CSS3Ps
    Bây giờ, tôi có một nút button được thiết kế bằng photoshop và tôi muốn chuyển nó sang HTML/CSS và không sử dụng ảnh, chỉ dùng hiệu ứng của css3 để thiết kế nó.

    [​IMG]

    Các bạn có thể thấy trong button trên có rất nhiều hiệu ứng như background màu chuyển sắc, viền border, đổ bóng shadow,… Để tự viết hết các hiệu ứng đó thì rất mất thời gian.
    [​IMG]

    Tuy nhiên, với CSS3Ps thì bạn chỉ cần chọn layer cần chuyển, và click và nút biểu tượng của CSS3Ps, nó chuyển chúng ta đến trình duyệt để xử lý. Sau 5s nó sẽ hiển thị kết quả của button ra cho chúng ta. Kết quả hoàn toàn giống nhau.
    [​IMG]

    Ngoài ra, CSS3Ps còn cho chúng ta chọn kiểu viết CSS như kiểu thuần CSS, Less hoặc Sass, rất tiện lợi.
    Tuy nhiên việc sử dụng CSS3Ps lại có chút bất tiện là nó lại xử lý trên trình duyệt, lại phải tốn 5s chờ đợi. Do đó, còn một extension khác cho bạn lựa chọn là CSS Hat.
    Tip: 5s đó đủ cho bạn làm một tách trà hoặc chai nước đấy!!!

    CSS Hat

    CSSHat là một extension thương mại (giá 29.99$), có chức năng tương tự CSS3Ps. Tuy nhiên, nó có rất nhiều điểm mạnh và rất nhiều điểm cộng so với CSS3Ps.
    Ví dụ: Nó hiển thị kết quả ngay tại pannel của extension, không phải mất thời gian chờ đợi, nó còn có option để hiển thị hình ảnh sạng base64, comment code, dùng class hay không. Hỗ trợ các kiểu viết CSS như Stylus CSS, Compass CSS3,…

    [​IMG]

    Các sử dụng cũng tương như như trên, mở extension bằng cách vào Windows>extension>CSSHat.
    Để chuyển từ hiệu ứng photoshop sang CSS3 thì chúng ta cần chọn đối tượng, cửa sổ làm việc của CSSHat sẽ ngay lập tức hiển thị các kết quả code của CSS3.
    Rất tiện dụng phải không các bạn?

    Lưu ý: Nên tránh sử dụng hiệu ứng Bevel & Emboss, vì các extension không thể chuyển hiệu ứng đó sang CSS3.
    Kết luận

    Việc sử dụng CSS3Ps hay CSSHat là tùy khả năng của bạn. Tuy nhiên, cả hai đều có tác dụng là rút ngắn cho chúng ta thời gian code CSS, và cũng tránh việc bức tóc, cắn răng, vắt óc suy nghĩ xem tại sao code CSS3 đúng mà lại không hiển thị hoặc hiển thị sai."
    NGUỒN: http://www.izwebz.com/css/psd-sang-css3-trong-5-not-nhac/

    ...
    Bao Phuong, Phạm Hữu Dư, always14 người khác thích bài viết này.
  2. Chick Vietdesigner

    Chick Vietdesigner Mới đăng kí

    Hay, đánh dấu, tks bác :D
  3. việt ptit

    việt ptit Thành viên cấp 3

    Lưu ý: không hiểu vì sao mà khi mình sử dụng bản Ps CS5 thì thất bại trong việc cài đặt CSS3PS tuy nhiên khi dùng bản Ps CS6 thì OK! Chúc các bạn thành công
  4. mgr

    mgr Cựu quản trị

    Tuyệt vời ông mặt trời :D
  5. hoang7991

    hoang7991 Thành viên cấp 2

    Quá hay, thanks bác, phải qua chính chủ like lần nữa :like:
  6. tienlx

    tienlx Thành viên cấp 2

    tiện lợi thật
  7. kesitinh_ks

    kesitinh_ks Thành viên cấp 2

    Like mạnh:-bd
  8. 4allfile

    4allfile Banned

    cái này là chuyển nền màu sang css3 thế còn backgroud là 1 cái ảnh thì sao ta, có chuyển đc ko
  9. MioDung

    MioDung Thành viên cấp 3

    thiết kế phẳng ko thích điều này :D
  10. việt ptit

    việt ptit Thành viên cấp 3

    Mình không rành về thiết kế nhưng theo mình nhận thấy thì thiết kế phẳng nhìn đơn giản thì dùng cái này càng tốt chứ sao, load 1 đoạn code thì phải nhanh hơn load 1 bức ảnh chứ :-/
  11. BinLoanVT

    BinLoanVT Mới đăng kí

    Giúp mình cài đặt và sử dụng trên PS CS4 với! loay hoay cả buổi chiều mà chưa được
  12. việt ptit

    việt ptit Thành viên cấp 3

    Bạn dùng bản PS CS6 xem sao, ngày trước mình cũng dùng CS5 nhưng k cài được cái plugin này (dù trong bài viết tác giả có nói là cài được) sau đấy mình đành up lên CS6 và cài được luôn

Ủng hộ diễn đàn