Hey guys back-to-back Photoshop Tutorials. Trong hướng dẫn này tôi sẽ tìm hiểu bạn làm thế nào để tạo ra I-Phone Giống như Button trong Photoshop. Điều này là rất đơn giản và khá hiệu quả hướng dẫn. Tôi hy vọng bạn sẽ thích thú với hướng dẫn này.

Xem thử cuối cùng

Đây là những gì chúng tôi đi làm hôm nay

Bước 1

Mở photoshop và tạo một tài liệu mới, tôi là 550 × 398px với một nền trắng.

Bước 2

Điền vào các màu trong lớp nền, mỏ màu là # 333333.

Bước 3

Tạo một tên lớp mới lớp sọc gradient. Chọn Rectangular Marquee Tool và tạo sọc trắng.

Kiểu dáng các sọc Layer nhấp đúp vào hình nhỏ Layer sọc trong Layer Panel để mở Layer Styles hộp thoại, chúng tôi sẽ áp dụng một hiệu ứng dọc gradiant cho nền của bạn. Sau đó bấm vào gradient Olor c trên bên phải của tùy chọn Gradient để mở ra các màu Gradient Editor.

Double-click trái-màu sắc-stop và nhập giá trị màu aaaaaa #, bấm đúp chuột trái-trung tâm-màu sắc-stop và nhập giá trị màu # cccccc, bấm đúp chuột vào bên phải trung tâm-màu sắc-stop và nhập giá trị màu # dddddd, sau đó bấm đúp chuột vào bên phải màu cửa và nhập giá trị màu FFFFFF #.

Nên giống như thế này.

Bước 4

Chọn Rounded Rectangle Tool và tạo nút, bán kính tôi là 90X40px.

Bây giờ áp dụng một số hiệu lực

Gradient Overlay

Kiểu dáng các nút nhấn đúp vào hình nhỏ Layer Button trong Layer Panel để mở Layer Styles hộp thoại, chúng tôi sẽ áp dụng một hiệu ứng dọc gradiant cho Button của bạn. Rồi nhấn vào gradient màu trên bên phải của tùy chọn Gradient để mở ra các màu Gradient Editor.

Double-click trái-màu sắc-stop và nhập giá trị màu # 000000, bấm đúp chuột trái-trung tâm-màu sắc-stop và nhập giá trị màu # 222222, nhấp đúp chuột vào bên phải trung tâm-màu sắc-stop và nhập giá trị # 444.444 màu, sau đó bấm đúp chuột vào bên phải màu cửa và nhập giá trị màu # 666666.

Bevel và Emboss

Tiếp áp dụng Bevel và phong cách lớp Emboss. Thay đổi phong cách cho Outer Bevel, hơn là thay đổi các giá trị của độ sâu, thước và Soften. Tôi chọn để đặt ở độ sâu 100%, tại thước 1px và Soften tại 10px

Một phần quan trọng hướng dẫn này: Giữ Angle ở -90 ^o, Độ cao ở 40 ^o

Nêu bật chế độ: tôi chọn để đặt Opacity ở 100%.

Shadow mode: tôi chọn để đặt Opacity ở 100%.

Cú đánh

Cuối cùng, chúng tôi sẽ áp dụng những đột quỵ. Đầu tiên thay đổi các giá trị của thước. Tôi chọn để đặt thước ở 1px. Thay đổi vị trí tại Inside

Tôi chọn để đặt Opacity ở 80%.

Thay đổi màu Stroke từ mặc định để # 222222

Nên giống như thế này.

Bước 5

Chọn văn bản và công cụ gõ văn bản về phía trước.

Chúng tôi sẽ áp dụng một số hiệu ứng cho văn bản.

Bevel Emboss

Double-click vào hình nhỏ lớp Text trong Layer Panel để mở Layer Styles hộp thoại. Chúng tôi sẽ áp dụng Bevel Emboss, đầu tiên Thay đổi kiểu để Outer Bevel và Kỹ thuật để Đục Soft, hơn là thay đổi các giá trị của Sâu, Hướng, thước và Soften. Tôi chọn để đặt ở độ sâu 130%, Hướng tại Down thước tại 1px và Soften lúc 0px

Một phần quan trọng hướng dẫn này: Giữ Góc nhìn ở 90 ^o, Độ cao ở 30 ^o

Nêu bật chế độ: tôi chọn để đặt Opacity ở 0%.

Shadow mode: tôi chọn để đặt Opacity 50%.

Xem thử cuối cùng

Cuối cùng, chúng tôi đã làm được hướng dẫn này.

Đây là những gì chúng tôi đi làm hôm nay

Tải tập tin nguồn

Nếu bạn muốn kiểm tra công việc của bạn, bạn có thể tải file PSD cho hướng dẫn này.

iphone-like-buttons.rar (21,3 KB)

Filed under: Photoshop, Tutorials bởi admin