Nút Photoshop Tạo Web 2.0

Các nút Hướng dẫn Photoshop có lẽ là một trong những danh mục nóng nhất trong bất kỳ trang web hướng dẫn Photoshop nào và vì Web 2.0 là chủ đề nóng nhất hiện nay, hãy thực hiện một nút đơn giản phù hợp với mọi ứng dụng Web 2.0 của các trang web. Hướng dẫn sau khi nhảy.

Tạo một khung vẽ trống ở khoảng 500px (chiều rộng) x 400px (chiều cao) để bắt đầu thiết kế nút. Tạo một cuộc gọi lớp mới 'bg01'. Chọn Công cụ hình chữ nhật tròn, giữ SHIFT và vẽ một hình vuông cạnh tròn ở giữa. Bất kỳ màu nào là tốt ở giai đoạn hiện tại.

Gọi lên Tùy chọn trộn của 'bg01'và điều chỉnh các kiểu sau:

Thả bóng

• Độ mờ đục: 40%
• Khoảng cách: 0px
• Lây lan: 0%
• Kích thước: 6px

Lớp phủ tốt nghiệp

• Điểm dừng màu: 0%, # d00031
• Dừng màu: 100%, # ff2b5d

Giữ CTRL, nhấp chuột trái vào 'bg01'Lớp Thumbnail để chọn hình dạng của nó. Đi Lựa chọn -> Sửa đổi -> Hợp đồng và nhập giá trị '2px'. Điều này sẽ thu nhỏ vùng được chọn thêm 2 pixel.

Tạo một cuộc gọi lớp mới 'bg02'và điền vào vùng được tô sáng (sau khi thu nhỏ) với bất kỳ màu nào. Tôi sử dụng # 000000 màu đen ở đây. Nhấp đúp chuột vào 'bg02' để khởi chạy Lựa chọn hài hòa và chỉnh kiểu.

Lớp phủ tốt nghiệp

• Dừng màu: 0%, # c6002f
• Dừng màu: 100%, # c6002f

Tạo một lớp mới cho văn bản, gọi nó là 'txt'. Chèn văn bản của nút của bạn. Tôi sẽ sử dụng một bảng chữ cái để đại diện. Các kiểu phông chữ tôi đang sử dụng ở đây như sau:

• Arial tròn táo bạo
• 150pt

Tương tự, sau khi quyết định văn bản của bạn, nhấp đúp chuột vào 'txt' để khởi chạy Tùy chọn trộn và điều chỉnh các kiểu sau.

Thả bóng

• Độ mờ đục: 25%
• Khoảng cách: 0px
• Lây lan: 0px
• Kích thước: 5px

Bóng tối bên trong

• Độ mờ đục: 10%
• Khoảng cách: 0px
• Sặc: 0
• Kích thước: 10px

Vát nổi

• Độ sâu: 1px
• Hướng: Xuống
• Kích thước: 0px
• Làm mềm: 0px
• Độ sáng chế độ nổi bật: 32%
• Độ mờ của chế độ bóng: 32%

Lớp phủ tốt nghiệp

• Dừng màu: 0% # d2d2d2
• Dừng màu: 100% # f0efef

Nút gần xong. Hãy cho nó một chút ánh sáng trên phần trên cùng. Giữ CTRL, ấn chuột trái 'bg02'Lớp Thumbnail để làm nổi bật hình dạng bên ngoài; chọn Công cụ Marquee Eclipse. Bây giờ giữ ALT, với Công cụ Marquee Eclipse được chọn, kéo qua để trừ nửa dưới của vùng được tô sáng. Tham khảo hình ảnh trên.

Với phần trên cùng được tô sáng và Công cụ Marquee Eclipse vẫn được chọn, nhấp chuột phải và chọn Lông; đi vào 15px cho bán kính.

Tạo một layer mới, gọi nó là 'phát sáng'và điền vào phần được tô sáng bằng màu trắng [#ffffff]. Điều này sẽ thêm hiệu ứng phát sáng cho phần trên cùng của nút của bạn. Sản phẩm cuối cùng sẽ trông giống như hình ảnh dưới đây.

Một cái gì đó thêm

Tinh chỉnh các tùy chọn trộn của 'bg01'và'bg02'sẽ cung cấp cho bạn các nút thú vị hơn. Đây là một hướng dẫn Photoshop khác về nút tôi đã thực hiện trước đây - Tạo nút Glossy cho Web 2.0