Cách tạo các nút 3D bằng Adobe Photoshop

Có đông đảo điều tuyệt hảo và hoàn hảo nhất mà bạn rất có thể tạo trong Adobe Photoshop, từ các khung người thuần tuý đến những giao diện người sử dụng khắc nghiệt. Một trong những điều hữu hiệu nhất bạn rất có thể tạo trong Photoshop là các nút 3D. Chúng sẽ hữu hiệu nếu khách hàng chạy blog hoặc trang web với giao diện tùy chỉnh thiết lập.

Trong bài viết này, Kênh Tin TT39 sẽ chỉ cho bạn cách tạo các nút 3D bằng Photoshop, cùng với các hiện trạng “up” và “down” trực quan để bạn rất có thể làm động chúng. (Bài viết này không bao gồm phần hoạt ảnh).

Bạn đã biết cách tạo nút 3D bằng Photoshop chưa?

  • B1: Chuẩn bị tài liệu
  • Bước 2: Thiết lập hình chữ nhật cho nút 3D
  • Bước 3: Tạo nút 3D
  • Bước 4: Lưu dưới dạng Layer Style
  • Bước 5: Cách sử dụng Layer Style đã lưu
  • Bước 6: Thêm thoả thuận vào nút
  • Bước 7: Hoàn thiện

B1: Chuẩn bị tài liệu

Chuẩn bị tài liệu

Mặc dù các nút 3D dựng nên đều đặn nhất trên những trang web, nhưng điều quan trọng đề xuất hãy chú ý là có các ứng dụng khác dành cho chúng, ví dụ như GIF động, hiển thị sản phẩm mock-up (mô hình tỉ dụ cho đối tượng người sử dụng hoặc thiết bị được chế biến ra) và game mobile. Tùy thuộc vào việc bạn đã phát triển ra nút này để tiến hành gì, định hình file cuối cùng và kích cỡ của nút rất có thể sự đối chiếu.

Để tạo nút 3D trong Photoshop, bạn sẽ đề xuất tạo một tài liệu tùy chỉnh thiết lập cho nó. Để thực hành vấn đề này, hãy mở Photoshop và nhấp vào Create New > Custom, rồi bật nguồn nhập các giá trị.

Để tạo nút 3D, bạn sẽ muốn có một tài liệu nằm ngang. Ví dụ trong bài đã sử dụng:

  • Kích thước: 900 x 300 pixel
  • 300 Pixels/Inch
  • RGB Color Mode

Mặc dù các hệ số nhân viên kỹ thuật này không nhất thiết, nhưng điều đó sẽ bảo vệ rằng bạn có đủ chỗ để tiến hành việc và cơ hội lan rộng ra kích cỡ nút lúc đề xuất.

Bước 2: Thiết lập hình chữ nhật cho nút 3D

Thiết lập hình chữ nhật cho nút 3D

Sau khi tùy chỉnh thiết lập hệ số nhân viên kỹ thuật cho file của mình, bạn sẽ có đưa vào khoảng không làm việc. Bạn sẽ có một canvas trắng nằm ngang trong một layer và đây là khi bật nguồn thiết kế và xây dựng nút.

Để tạo nút 3D, nhấp vào Rounded Rectangle Tool ở phía phía bên trái ảnh nền. Bạn cũng đều sở hữu thể sử dụng phím tắt U để truy nhập nó.

Nhấp vào Rounded Rectangle Tool ở phía bên trái màn hình

Nhấp một đợt vào layer white color. Thao tác đó sẽ tự động hiển thị hộp Create Rounded Rectangle. Bạn sẽ sử dụng hộp này để chỉ dẫn và chỉ định kích cỡ của hình chữ nhật.

Đối với nút trong tỉ dụ, kích cỡ được xem là:

  • Rộng: 300 pixel
  • Cao: 75 pixel

Ví dụ cũng bảo vệ rằng các góc được chế biến tròn 10 pixel. Không quá cao và cũng không cực thấp. Sau đó, nhấn OK.

Chú ý: Các nút có kích cỡ và dạng hình không trùng lặp, vì vậy, không sẽ phải sử dụng đúng ra kích cỡ này. Ngoài ra, nếu ai đang tìm kiếm thêm tin tức về các phím tắt, đây được coi là 1 trong những số phím tắt Photoshop hữu hiệu nhất.

Chỉ định kích thước

Khi nhấn OK, Photoshop muốn tạo một hình chữ nhật có các góc bo tròn với các kích cỡ đã chỉ dẫn và chỉ định bên phía trong layer. Bạn rất có thể hiện đại màu FillStroke của hình chữ nhật này, bằng phương pháp sử dụng các menu drop-down ở góc cạnh trên cùng 1 phía bên trái ảnh nền.

Với mục đích của bài luyện tập huấn này và để minh họa một nút “up” và “down” trông làm sao, tỉ dụ sẽ khiến cho nút “down” trở thành màu đỏ.

Bước 3: Tạo nút 3D

Tạo nút 3D

Sau khi tạo nút chủ đạo và chọn màu cho nó, bạn sẽ muốn điều hòa nút trong hộp thoại Layer Style. Bước này là để tiến hành cho nút trông giống 3D hơn.

Để truy nhập hộp thoại Layer Style, bạn rất có thể vào Layer > Layer Style từ menu trên cùng. Bạn cũng đều sở hữu thể nhấp đúp vào layer có chứa nút, để tự động làm hộp thoại này dựng nên. Cách này kịp lúc hơn hẳn và đã được đông đảo người sử dụng ưa thích.

Khi hộp Layer Style dựng nên, hãy chuyển đến tùy chọn Bevel & Emboss, rồi bật nó lên.

Đây được coi là 1 trong những cách nhanh nhanh và dễ ợt để tiến hành cho các cạnh của nút trông “3D” hơn. Đối với tập huấn này, đây là các thiết lặp tỉ dụ đã sử dụng:

Structure

  • Style: Inner Bevel
  • Technique: Chisel Soft
  • Depth: 605
  • Direction: Up
  • Size: 5
  • Soften: 1

Shading

  • Angle: 90
  • Altitude: 37
  • Highlight Mode: Color Dodge, 55% Opacity
  • Shadow Mode: Multiple, 25% Opacity

Mẹo nhỏ là làm những công chuyện cho các thiết lặp đủ cao để thấy một số không giống, nhưng không thật mức.

Để các cài đặt đủ cao để thấy sự khác biệt

Sau trong khi nướng xong với Bevel & Emboss, hãy đến Contour và bật nó lên. Contour khiến cho Bevel & Emboss khỏe hơn một chút và tập huấn này đã chọn thiết lặp Cone – Inverted.

Bật Contour

Tiếp theo, bật Gradient Overlay. Các thiết lặp như sau:

  • Blend Mode: Overlay
  • Opacity: 90
  • Style: Linear
  • Angle: 90
  • Scale: 100

Bật Gradient Overlay

Cuối cùng, tỉ dụ đã bật Drop Shadow, để tiến hành cho nút trông “nổi” hơn một chút trên nền trắng của trang web hoặc blog. Một lần nữa, đây là các thiết lặp:

Structure

  • Blend Mode: Multiple
  • Opacity: 35
  • Angle: 90
  • Distance: 2
  • Spread: 6
  • Size: 8

Quality

  • Contour: Linear
  • Noise: 0
  • Layer Knocks Out Drop Shadow: On

Bây giờ là khi lưu các hệ số nhân viên kỹ thuật này dưới dạng Layer Style.

Bước 4: Lưu dưới dạng Layer Style

Lưu dưới dạng Layer Style

Khi bạn hoàn thành các thiết lặp cho nút của mình, nó sẽ bật nguồn trông 3D hơn. Vì cơ hội không nhỏ là mình muốn tạo nhiều nút 3D, nên đề xuất tìm 1 cách nhanh nhanh và dễ ợt để tiến hành điều này.

Đây là cách thực hành!.

Trước khi nhấp vào OK trong hộp thoại Layer Style, hãy nhấp vào New Style. Khi thực hành thao tác này, Photoshop sẽ giữ lại được layer style (kiểu layer) mà bạn đã tạo cho nút của mình.

Nếu bạn sử dụng Photoshop CC, hình treo tườngg mới đó sẽ có lưu vào phần Libraries, như rất có thể thấy ở phí a trên. Rất nhanh nhanh và dễ ợt truy nhập.

Bước 5: Cách sử dụng Layer Style đã lưu

Cách sử dụng Layer Style đã lưu

Bây giờ, bạn đã kiến thiết xong nút của mình và lưu nó dưới dạng Layer Style, hãy quan sát nó hoạt động trong hiện trạng “up”. Điều đó sẽ giảm ngắn hơn một ít thời kì làm việc của bạn.

Đầu tiên, hãy tạo một nút khác ngay trên layer nút màu đỏ và thêm màu xanh lá cây xanh cây để nhấn mạnh.

Tạo nút mới màu xanh lá cây

Tiếp theo, thay vì nhấp đúp vào chính layer đó để hiển thị hộp thoại Layer Styles, hãy nhấp đúp vào kiểu layer trong bảng chỉ dẫn và tinh chỉnh Libraries.

Khi bạn làm giả dụ thế, Photoshop sẽ tự động áp chế kiểu đã lưu cho layer chứa nút mới, trong khi vẫn giữ nguyên màu sắc và dạng hình của chúng. Bây giờ, bạn có hai nút, một nút ở hiện trạng “up” cùng một nút ở hiện trạng “down”. Thực hiện điều này thật thuần tuý!

Bước 6: Thêm thoả thuận vào nút

Thêm văn bản

Tiếp theo, ta sẽ thêm thoả thuận vào nút.

Để thêm thoả thuận, tạo một layer mới phía bên trên hai layer nút. Nhấp vào máy móc Type để bật nguồn nhập.

Hướng dẫn đó sẽ viết từ “subscribe” vì nó là thứ bạn thấy khá đều đặn trên các trang web và mạng xã hội.

Lựa chọn phông chữ cho nút trọn vẹn tùy thuộc vào bạn. Montserrat, Proxima Nova, Arial và Verdana đều là những sàng lọc hoán đổi được sử dụng rộng thoải mái và an toàn cho web.

Lựa chọn phông chữ phù cấu kết

Tuy nhiên, khi đã đi đượcều đó được thực hành, vẫn còn đó một số hiện đại rõ đường chỉ nét hơn mà bạn đề xuất làm.

Đầu tiên, nhấp đúp vào layer chứa thoả thuận để tiến hành hộp thoại Layer Style dựng nên.

Tiếp theo, nhấp vào Inner Shadow. Bước này đem đến cảm giác trông hệt như là các vần âm được khắc vào nút. Các thiết lặp đúng ra mà tỉ dụ đã sử dụng cho tập huấn này là:

Structure

  • Blend Mode: Multiply
  • Opacity: 35
  • Angle: 90
  • Distance: 2
  • Choke: 4
  • Size: 1

Quality

  • Contour: Linear
  • Noise: 0

Áp dụng Gradient Overlay cho các chữ cái đó

Tiếp theo, áp chế Gradient Overlay cho các vần âm đó, để tiến hành cho chúng “ăn khớp” hơn với phần nút. Một lần nữa, các thiết lặp được áp chế là:

  • Blend Mode: Color Burn
  • Opacity: 90
  • Style: Linear
  • Angle: 90
  • Scale: 100

Bước 7: Hoàn thiện

Hoàn thiện

Sau khi tạo kiểu cho chỗ thoả thuận này, nổi bật là nếu mình muốn dùng lại nó, hãy chuyển hẳn qua New Style và lưu nó trước khi bấm OK.

Sau đó, bạn rất có thể nhanh nhanh chuyển đổi qua giữa hai layer nút của mình, để nhìn các hiện trạng “up” và “down” trông hệt như làm sao.

Rất tuyệt đúng không? Để lưu file, hãy đi đến File > Save As và lưu file với định hình phù cấu kết cho bất kỳ dự án nào đang thực hành.

Bây giờ, bạn đã biết cách tạo các nút 3D trong Photoshop. Bạn rất có thể phát minh để kiến thiết các nút 3D phù cấu kết với đề xuất của riêng mình. Và với các cơ hội này, bạn rất có thể đã phát triển ra một loại sản phẩm không chỉ là nhanh nhanh mà còn phải mang dấu tích tnhh tư nhân rõ đường chỉ nét.

Nếu mình muốn biết về các điều khác rất có thể làm với lịch trình này. hãy chỉ dẫn thêm bài viết: Cách xóa nền trong Photoshop.

Chúc bạn thực hành thành công!

Sưu Tầm: Internet – Kênh Tin: TT39