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

Có rất nhiều điều tuyệt vời mà bạn có thể tạo ra Adobe Photoshop hữu ích trực tuyến, từ khung ảnh đơn giản đến giao diện người dùng phức tạp. Một trong những thứ hữu ích nhất bạn có thể tạo trong Photoshop là các nút 3D, sẽ rất hữu ích nếu bạn chạy blog hoặc trang web với giao diện tùy chỉnh.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo các nút 3D bằng Photoshop, cùng với các trạng thái 'lên' và 'xuống' trực quan, để bạn có thể tạo hoạt ảnh cho chúng. (Chúng tôi sẽ không đề cập đến hoạt ảnh trong bài viết này.)

Bước 1: Chuẩn bị tài liệu của bạn

Mặc dù các nút 3D bật lên thường xuyên nhất trên các trang web, nhưng điều quan trọng cần lưu ý là có các ứng dụng khác dành cho chúng, chẳng hạn như GIF động, màn hình sản phẩm mô phỏng và trò chơi di động. Tùy thuộc vào mục đích bạn đang tạo nút này, định dạng tệp cuối cùng của bạn và kích thước của nó có thể khác nhau.

Để tạo một nút 3D trong Photoshop, bạn sẽ cần tạo một tài liệu tùy chỉnh cho nó. Để làm điều này, hãy mở Photoshop và nhấp vào Tạo mới> Tùy chỉnh . Bắt đầu nhập các giá trị của bạn.

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

Cao 900 x 300 pixel
300 pixel / inch
Chế độ màu RGB

Mặc dù các thông số kỹ thuật này chắc chắn không phải là quy tắc khó và nhanh chóng, nhưng điều này sẽ đảm bảo rằng bạn có đủ chỗ để làm việc và khả năng điều chỉnh kích thước nút của bạn lên và xuống khi cần thiết.

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

Sau khi thiết lập các thông số kỹ thuật cho tệp của mình, bạn sẽ được đưa vào không gian làm việc của mình. Bạn sẽ có một canvas màu trắng nằm ngang trong một lớp duy nhất và đây là nơi bạn sẽ bắt đầu xây dựng nút của mình.

Để tạo nút 3D của bạn, hãy nhấp vào Công cụ Hình Chữ Rõ Ràng ở phía bên trái màn hình của bạn, được nhìn thấy ở đây với màu đỏ. Bạn cũng có thể sử dụng phím tắt U để truy cập nó.

Nhấp một lần vào lớp màu trắng của bạn: thao tác này sẽ tự động hiển thị Tạo hình chữ nhật tròn hộp. Bạn sẽ sử dụng hộp này để chỉ định kích thước của hình chữ nhật của bạn.

Đối với nút của chúng tôi, chúng tôi đã đi với:

Rộng 300 pixel
Cao 75 pixel

Chúng tôi cũng đảm bảo rằng các góc được làm tròn 10 pixel. Không quá cao và cũng không quá thấp. Sau đó, chúng tôi nhấn VÂNG .

Ghi chú: Các nút thay đổi theo kích thước và hình dạng, vì vậy bạn không cảm thấy như bạn phải sử dụng các kích thước chính xác này. Ngoài ra, nếu bạn đang tìm kiếm thêm thông tin về các phím tắt, đây là một số các lệnh bàn phím Photoshop hữu ích nhất .

Khi bạn nhấn VÂNG , Photoshop sẽ tạo một hình chữ nhật tròn với các kích thước này bên trong lớp của bạn. Bạn có thể thay đổi nó Lấp đầy và Đột quỵ màu sắc bằng cách sử dụng menu thả xuống ở góc trên cùng bên trái của màn hình.

Với mục đích của hướng dẫn này --- và để minh họa nút 'lên' và 'xuống' có thể trông như thế nào --- chúng ta sẽ làm cho nút 'xuống' của mình có màu đỏ.

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

Sau khi bạn tạo nút cơ bản và chọn màu của nó, bạn sẽ muốn điều chỉnh nó trong Kiểu lớp hộp thoại. Điều này là để làm cho nó trông 3D hơn.

Để truy cập của bạn Kiểu lớp hộp thoại, bạn có thể đi Lớp> Kiểu lớp từ menu trên cùng. Bạn cũng có thể nhấp đúp vào lớp có chứa nút của bạn, để hiển thị nó tự động. Cách này nhanh hơn nhiều và cá nhân chúng tôi thích nó hơn.

Khi hộp Kiểu lớp của bạn đã lên, hãy chuyển đến tùy chọn Bevel & Emboss . Bật nó lên.

Đây là một cách nhanh chóng và dễ dàng để làm cho các cạnh của nút của bạn trông '3D' hơn. Đối với hướng dẫn này, đây là những cài đặt chúng tôi đã sử dụng:

Kết cấu

Phong cách: Bevel bên trong
Kỹ thuật: Đục mềm
Chiều sâu: 605
Phương hướng: Hướng lên
Kích thước: 5
Làm mềm: 1

Bóng râm

Góc: 90
Độ cao: 37
Chế độ làm nổi bật: Color Dodge, 55% Opacity
Chế độ bóng tối: Nhiều, Độ mờ 25%

Bí quyết là đặt các cài đặt đủ cao để bạn có thể thấy một số khác biệt, nhưng không quá mạnh đến mức choáng ngợp.

Sau khi hoàn thành với Bevel & Emboss, chúng tôi đã đi đến Viền và cũng bật tính năng đó. Đường viền làm cho định nghĩa của Bevel & Emboss mạnh hơn một chút và đối với hướng dẫn này, chúng tôi đã chọn cài đặt Hình nón - Đảo ngược .

Tiếp theo, bật Lớp phủ Gradient . Đây là những gì mang lại cho một nút trông tròn, hơi 'bóng'. Các cài đặt như sau:

Chế độ hòa trộn: Lớp phủ
Độ mờ: 90
Phong cách: Tuyến tính
Góc: 90
Tỉ lệ: 100

Cuối cùng, chúng tôi đã bật Bóng đổ , để làm cho nút trông hơi 'nhô lên' so với nền trắng của trang web hoặc blog. Một lần nữa, đây là các cài đặt:

máy in nói ngoại tuyến nhưng được kết nối

Kết cấu

Chế độ hòa trộn: Nhiều
Độ mờ: 35
Góc: 90
Khoảng cách: 2
Truyền đi: 6
Kích thước: số 8

Chất lượng

Viền: Tuyến tính
Tiếng ồn: 0
Layer Knocks Out Drop Shadow: Trên

Bây giờ đã đến lúc lưu các thông số kỹ thuật này dưới dạng Layer Style.

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

Sau khi bạn hoàn tất cài đặt của nút, nó sẽ bắt đầu có dạng 3D. Vì khả năng cao là bạn sẽ tạo nhiều nút 3D, chúng tôi cần tìm một cách nhanh chóng và dễ dàng để thực hiện việc này.

Đây là cách thực hiện.

Trước khi nhấp vào VÂNG bên trong Kiểu lớp hộp thoại, nhấp vào Phong cách mới . Khi bạn làm như vậy, Photoshop sẽ lưu kiểu lớp này mà bạn đã tạo cho nút của mình.

Nếu bạn đang sử dụng Photoshop CC, kiểu mới này sẽ được lưu vào Thư viện như bạn có thể thấy ở trên. Nó rất nhanh chóng và dễ dàng truy cập.

Bước 5: Cách sử dụng kiểu lớp đã lưu

Bây giờ bạn đã thiết kế nút của mình và bạn đã lưu nó dưới dạng Layer Style, hãy xem nó hoạt động cho trạng thái 'up' của bạn. Không có lời nói dối, điều này sẽ cắt giảm một nửa thời gian làm việc của bạn.

Đầu tiên, hãy tạo một nút khác ngay trên lớp nút màu đỏ, giống như vậy. Hãy làm cho nó màu xanh lá cây, để nhấn mạnh.

Tiếp theo --- thay vì nhấp đúp vào chính lớp đó để hiển thị Kiểu lớp hộp thoại --- nhấp đúp vào kiểu lớp trong Thư viện bảng điều khiển.

Khi bạn làm như vậy, Photoshop sẽ tự động áp dụng kiểu đã lưu của bạn cho lớp nút mới, trong khi vẫn giữ màu sắc và hình dạng mới của nó. Bây giờ bạn có hai nút --- một ở trạng thái tăng và một ở trạng thái giảm --- và nó rất đơn giản để thực hiện. Tôi thích lối tắt này.

Bước 6: Thêm văn bản vào nút của bạn

Tiếp theo, chúng ta sẽ thêm văn bản vào nút.

Để thêm văn bản, hãy tạo một lớp mới bên trên hai lớp nút của bạn. Nhấn vào Công cụ gõ để bắt đầu nhập.

Đối với hướng dẫn này, chúng tôi sẽ viết từ 'đăng ký' vì đó là thứ bạn thấy khá thường xuyên trên các trang web và nền tảng truyền thông xã hội.

Chúng tôi cũng sẽ sử dụng phông chữ an toàn cho web san serif. Lựa chọn cuối cùng mà bạn sử dụng cho nút của riêng mình là tùy thuộc vào bạn. Montserrat, Proxima Nova, Arial và Verdana đều là những lựa chọn thay thế được sử dụng rộng rãi và an toàn cho web.

Tuy nhiên, sau khi điều này được thực hiện, vẫn còn một số thay đổi nhỏ hơn mà bạn cần thực hiện để làm cho văn bản này 'bật lên'.

Đầu tiên, nhấp đúp vào lớp có chứa văn bản của bạn để bạn có thể hiển thị nó trong Kiểu lớp hộp thoại.

Tiếp theo, nhấp vào Bóng bên trong , để thêm một chút vùng lõm (hoặc vùng trũng) vào văn bản của bạn. Điều này làm cho nó trông giống như các chữ cái đã được khắc vào nút. Các cài đặt chính xác mà chúng tôi đã sử dụng cho hướng dẫn này ở bên dưới.

Kết cấu

Chế độ hòa trộn: nhân
Độ mờ: 35
Góc: 90
Khoảng cách: 2
Nghẹt thở: 4
Kích thước: 1

Chất lượng

Viền: Tuyến tính
Tiếng ồn: 0

Tiếp theo, áp dụng một Lớp phủ Gradient cho những chữ cái đó, để làm cho chúng dễ hòa trộn vào nút hơn mà không xuất hiện bằng phẳng. Một lần nữa, các cài đặt cho chúng tôi là:

Chế độ hòa trộn: Ghi màu
Độ mờ: 90
Phong cách: Tuyến tính
Góc: 90
Tỉ lệ: 100

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

Sau khi bạn tạo kiểu văn bản này --- đặc biệt nếu bạn muốn sử dụng lại --- hãy truy cập Phong cách mới và lưu nó trước khi bạn nhấp vào VÂNG .

Sau khi kết thúc, bạn có thể nhanh chóng chuyển đổi qua lại khả năng hiển thị giữa hai lớp nút của mình, để xem trạng thái 'lên' và 'xuống' trông như thế nào.

Khá tuyệt phải không? Để lưu tệp của bạn, hãy truy cập Tệp> Lưu dưới dạng và lưu nó dưới dạng định dạng tệp thích hợp cho bất kỳ dự án nào bạn có thể đang thực hiện.

Tùy chỉnh blog của bạn với các nút và tiện ích 3D

Bây giờ bạn đã biết cách tạo các nút 3D trong Photoshop, bạn có thể thỏa sức sáng tạo với nó, thiết kế các nút 3D của riêng mình phù hợp với nhu cầu của bạn. Và với những kỹ năng này trong kho vũ khí của bạn, bạn có thể tạo ra một sản phẩm không chỉ chuyên nghiệp mà còn mang phong cách cá nhân.

Bạn muốn biết về những điều khác mà bạn có thể làm với chương trình này? Đây là cách xóa nền trong Photoshop .

Đăng lại Đăng lại tiếng riu ríu E-mail Cách truy cập Cấp bong bóng tích hợp của Google trên Android

Nếu bạn đã từng cần đảm bảo thứ gì đó ở mức vừa phải, thì giờ đây, bạn có thể có được mức bong bóng trên điện thoại của mình trong vài giây.

Đọc tiếp Chủ đề liên quan

Sáng tạo
Adobe Photoshop
Mẹo chỉnh sửa hình ảnh
Hướng dẫn Photoshop

Giới thiệu về tác giả Shianne Edelmayer(136 bài báo đã xuất bản)

Shianne có bằng Cử nhân về Thiết kế và nền tảng về podcasting. Giờ đây, cô ấy đang làm việc với tư cách là Nhà văn cao cấp và Người vẽ tranh minh họa 2D. Cô ấy bao gồm công nghệ sáng tạo, giải trí và năng suất cho MakeUseOf.

Xem thêm từ Shianne Edelmayer

Theo dõi bản tin của chúng tôi

Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!

Bấm vào đây để đăng ký