• fans
  • 1036 reader
  • followers

Hôm qua dạo chơi thấy một trang web nó tạo ra hàng nút dạng inset khá đẹp và hiện đại. Nên tôi mày mò cách tạo ra được kết quả gần giống với hình gốc. Hôm nay chia sẻ với các bạn, nếu thích các bạn có thể làm theo, và nếu khéo kết hợp cũng tạo ra được nút di chuyển rất hiện đại.

Bởi vì bài này không quá phức tạp và cũng ngắn gọn cho nên tôi làm tut hình cho nó lẹ và đỡ mất thời gian hơn. Các bạn cũng có thể download phiên bản PSD về để xài. Nếu các bạn giống tôi, luôn thích xem kết quả trước khi làm theo thì đây là hình cuối cùng chúng ta sẽ được.

inset button photoshop tutorial

Bước 1: Để bắt đầu bạn mở một tài liệu mới trong Photoshop với kích thước khoảng 500×500 Px. Chọn màu nền trước là màu đen và trên hộp công cụ chọn Rounded Rectangular Tool (U) với thông số Radius = 8 px và tạo một hình như hình dưới.

inset button photoshop tutorial

Trong Layer Pallet chọn Layer Effect > Drop Shadow và thiết lập thông số như hình sau:

inset button photoshop tutorial

Bước 2: Trên Layer Pallete Ctrl-Click vào layer shape vừa tạo ở bước 1 để load vùng lựa chọn. Sau đó vào Select > Modify > Contract và điền vào hộp thoại là 1px

Bước 3: Trên Layer Pallet tạo một layer mới. Chọn công cụ Gradient (G) trong hộp công cụ và đặt màu nền trước là màu #44464C và màu nền sau là màu #0F1114 kéo một đường theo hình mũi tên.

inset button photoshop tutorial

Trong Layer Pallete chọn Layer Effect > Inner Shadow và thiết lập thông số như hình sau:

inset button photoshop tutorial

Trên layer Pallet tạo thêm một layer nữa. Trên Layer Pallete Ctrl-Click vào layer shape vừa tạo ở bước 1 để load vùng lựa chọn. Sau đó vào Select > Modify > Contract và điền vào hộp thoại là 2px. Di chuyển vùng chọn xuống dưới 2px bằng phím mũi tên trỏ xuống.

inset button photoshop tutorial

Đổi màu nền trước thành màu #2D343D và giữ nguyên màu nền sau và kéo một đường như hình trên. Bây giờ bạn có thể thêm chữ và là xong. Kết quả ở trên cùng của bài viết và bạn có thể download file PSD này về tham khảo.

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • Triệu

    anh DW ơi trong file PSD anh làm cái layer nền sáng kiểu gì vậy?

    • Lê Duy Lê

      Cái này mình đang cần. Thanks

      • Lê Duy Lê

        a

  • http://dct.udn.vn cbcbdxb

    cho toi hoi motro la

  • tran thanh long

    Em tên Trần Thanh Long. Hiện nay em đang làm một trang web yêu cầu có một banned động chạy dọc theo hai bên của trang web nhưng em không biết làm thế nào. Mong anh có thể làm giúp em một video về vấn đề này. Em xin cảm ơn

  • http://felixblog.tk FelixNguyen

    link demo của anh hỏng rùi anh ơi :)

  • Duy Khiêm

    anh DW có thể up lại link PSD bài này kô hình như nó die rồi thì phải. Thanks

  • Phung Ba Huu

    Anh DW ơi mấy cái link trong bài này của anh đều không dc nữa anh ah..anh kiểm tra lại nhé

  • http://dinhcoi.info kenichifc

    link hỏng rùi anh warlock ơi !!!

  • le anh kiet

    Em đang làm 1 dồ án viết bằng PHP em muốn hỏi anh cách để tạo hiệu ứng cho Button,button em là bằng photoshop và menu dropdown, và làm thế nào để lưu thông tin khi người dùng đăng ký vào csdl,em mong nhận được hồi âm của anh!Thank you verry much!

    • nhtera

      @le anh kiet hỏi hỗn hợp vậy :D
      Chỉ học vài lệnh cơ bản của php và mysql là bạn có thể làm được cái bạn hỏi về lưu người dùng đăng kí rồi .

  • hien

    sao em lam toi buoc 2 roi vo select roi nhung ko cho dc muc modify zay anh

  • http://izwebz.com trần ngọc thiên

    anh cho em hỏi em muốn cắt cái nút ra vào html thì làm sao dc a, với lại vào html phai cho no submit nữa, thanks a

  • Nguyễn Văn Nghiêm

    Anh làm hay thật ! Cảm ơn anh nhiều nha !

  • -huy

    đẹp quá :)

  • http://www.izwebz.com Demon Warlock

    Nếu sau này bài về Photoshop nhiều có thể anh sẽ làm một thư mục riêng. Nhưng giờ cứ để tạm trong này đã vì tut về Photoshop ở những nơi khác quá trời rồi :D. Kiếm được mấy tut độc hơi bị khó.

  • http://09x4.com/ mrkyt

    Có khi anh nên lập 1 box nữa chuyên các tutorial Photoshop chuyên phục vụ cho webmaster ^^

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives