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

Hướng dẫn thiết kế button cho website đẹp chuyên nghiệp bằng Photoshop

Chủ đề thuộc danh mục 'Thiết kế' được đăng bởi Người Chia Sẻ, 17/6/15.

Lượt xem: 6,944

  1. Người Chia Sẻ Share to be shared!

    Bài viết sau đây hướng dẫn bạn tạo 1 button (nút nhấn) bóng bẩy bằng Adobe Photoshop. Như hình kết quả cuối cùng như sau.

    do0DoWK.png

    Bạn thực hiện các bước sau để tạo 1 button như trên.

    1. Mở chương trình photoshop chọn trình đơn File->New để tạo file photoshop mới. Với thông số như hình sau.

    7R6QUpY.png

    2. Click vào thanh công cụ vẽ hình chữ nhật tròn như hình sau. ( Nếu không thấy thanh công cụ bạn có thể chọn trình đơn Windows->Tools để hiển thị thanh công cụ)

    2WJrAYr.png

    Chọn bán kính đường cong là 5px như hình sau (Bạn có thể chọn bán kính khác nếu muốn)

    HbA8aTA.png

    Click vào khu vực vẽ và vẽ 1 hình chữ nhật như hình sau. (Bạn có thể chọn màu nào cũng được không quan trọng.)

    [​IMG]

    3. Sau khi ban vẽ hình chữ nhật thì trên hộp layer xuất hiện layer của bạn vừa mới vẽ (Nếu bạn không thấy hộp layer thì chọn Windows->Layer để hiển thị hộp layer)

    Chọn layer của hình chữ nhật vừa mới vẽ. Sau đó click vào nút như hình sau. Rồi chọn Gradient Overlay.

    dml6wY5.png

    Cửa sổ Layer Style sẽ xuất hiện với mục Gradient overlay được chọn như sau. Bạn click vào chỗ vị trí chuột như hình bên dưới.

    YyQYoPo.png

    Sẽ hiển thị cửa sổ Gradient Editor như hình sau. Bạn click vào vị trí trỏ chuột như hình dưới.

    R2HFPt6.png

    Cửa sổ chọn màu sẽ xuất hiện. Bạn chọn 1 màu cho button của bạn (Bạn muốn button màu xanh thì chọn màu xanh, button màu đỏ thì chọn màu đỏ,....). Ở đây chúng tôi chọn màu xanh. Sau đó bạn nhấn OK.

    3f0jdIp.png

    Sau khi nhấn OK cửa sổ chọn màu sẽ đóng lại và xuất hiện lai cửa sổ Gradient Editor. Bạn click vào ở giữa thanh như vị trí bàn tay trong hình bên dưới.

    NwNgtML.png

    Sẽ xuất hiện một mục đánh dấu mới sau đó bạn chọn màu cho mục đánh dấu này. Bằng các click vào ô màu như hình bên dưới.

    1WNLpFb.png

    Bạn tiếp tục chon màu xanh giống như mục đánh dâu ban đầu như lợt hơn 1 chút. Sau đó nhấn nút OK.

    CD6Lgul.png

    Sau đó tiếp tục click vào vị trí như hình bên dưới để tạo thêm 1 mục đánh dấu mới.

    dpTsROW.png

    Sẽ xuất hiện mục đánh dấu thứ 3 và bạn lại tiếp tục chọn màu cho mục đánh dấu mới như hình sau.

    ivtkiS1.png

    Ban tiếp tục chọn màu xanh giống ở mục đánh dấu thứ 2 nhưng lợt hơn nhiều như hình sau. Sau đó bạn nhấn nút OK.

    UGWzrnQ.png

    Bạn tiếp tục double click vào mục đánh dấu cuối cùng để chọn màu như hình sau.

    Ed7Axuk.png

    Bạn chọn màu giống như mục đánh dấu thứ 3 như lợt hơn 1 chút như hình sau sau đó bạn nhấn nút OK.

    zYI5hn2.png

    Tiếp tục nhấn nút OK ở cửa sổ Gradient Editor.

    3pB3avG.png

    Tiếp tục nhấn nút OK ở cửa sổ Layer Style.

    z56gdz2.png

    Lúc này button với hiệu ứng bóng bẩy đã xuất hiện trong bản vẽ. Bạn tiếp tục điền chử cho button này băng cách chọn công cụ gõ chữ như hình sau.

    F64wJEe.png

    Sau đó bạn nhấn nút như hình sau để tạo 1 layer mới. Bạn sẽ gõ chữ trên layer này.

    7SiBkzR.png

    Ban click chuột vào vùng vẽ sau đó gõ chữ "Sample Text" kết quả sẽ ra như sau.

    zvbbUxb.png

    Bạn đã tạo được button bóng bẩy bằng Photoshop.

    Kết luận: Việc tạo một hiệu ứng bỏng bẩy như trên khá đơn giản. Bạn chỉ việc áp dụng hiệu ứng Gradient Overlay trên layer mà có button rồi bạn chọn 4 màu thứ tự theo hình sau. Thứ tự từ trái qua phải.

    DQMTWQM.png

    Nếu bạn chọn nút là màu (xanh, đỏ, xanh lá,...) thì.
    • Vị trí đầu tiên có màu đậm nhất.
    • Vị trí thứ 2 lợt hơn vị trí đầu tiên 1 chút
    • Vị trí thứ 3 lợt hơn nhiều 1 chút so với vị trí số 2
    • Vị trí thứ 4 lợt hơn 1 chút so với thứ 3.
    Bạn thử làm lại và chọn màu khác xem kết quả như thế nào.

    Nguồn: globalsofts.com

    Bonus thêm cái video cho ai cần

    ...
    maithutranghanoi thích bài viết này
  2. MeGAIdea

    MeGAIdea Mới đăng kí

    Mình nghĩ giờ họ theo thiết kế phẳng, ít ai làm theo phong cách này. nhưng hay. tks thớt
  3. conan.kute

    conan.kute Mới đăng kí

    Oánh dấu :3 . thank bác chủ thớt
  4. anhthanh2410

    anhthanh2410 Thành viên cấp 1

    tầm 3, 4 năm trước thì chuyên nghiệp thật, bây giờ phẳng chuyên nghiệp hơn nhiều :)
  5. Stingrose

    Stingrose Banned

    vớ vẩn,tốn time.từng đó công đoạn để thiết kế trong shop thì với iluss chỉ mất 2 công đoạn mà còn đẹp hơn rất nhiều.Max rảnh....

Ủng hộ diễn đàn