Tài liệu Photoshop: Thiết Kế Button Kỹ Thuật Cao (phần 6) pot

Tài liệu Photoshop: Thiết Kế Button Kỹ Thuật Cao phần 6 Bước 55 Với vùng chọn đã bị đảo ngược, chúng ta tạo một Mask để đạt được hình dạng cuối và và kích thước của Led xung quanh Butto

Tài liệu Photoshop: Thiết Kế Button Kỹ Thuật Cao

(phần 6)

Bước 55

Với vùng chọn đã bị đảo ngược, chúng ta tạo một Mask để đạt được hình dạng cuối và và kích thước của Led xung quanh Button

Bước 56

Với một Stroke có màu sắc tương tự như bề mặt của Button (sử dụng màu bảng chọn màu) chúng ta tạo ra một Bevel nhỏ xung quanh các tia sáng

Bước 57

Với Bevel và Emboss, chúng ta sẽ tạo ra một Shadow phía trên và một ánh sáng phía dưới cho Stroke (nếu ánh sáng từ phía trên tác động lên các Beveled Edge)

Bước 58

Với một Inner Shadow và Multiply đảo ngược, chúng ta tạo ra một tia phản chiếu Acrylic bên trên vùng phía trên các Led này

Chúng ta hoàn thành việc chỉnh sửa các Object này với Drop Shadow cho phép chúng ta mang lại ý tưởng cho các chi tiết này trong phần thiết kế Button, thay đổi bề mặt background, nhấn nó xuống và tạo ra các vùng đã tạo shadow xung quanh

Bước 60

Đây là button của chúng ta đã tạo ra cho đến bây giờ, vẫn còn thiếu một

số hiệu ứng

Chúng ta sẽ sao chép layer của LED trong bước trước và tô màu Shape Layer mới này bằng màu trắng Chúng ta bắt đầu tạo ra hiệu ứng ánh sáng với Outer Glow và các giá trị này

Bước 62

Chúng ta thêm ánh sáng của các khu vực gần LED sử dụng Drop Shadow trên Screen Blend mode

Rollover state của Button đã được thực hiện Bây giờ, bằng cách sử dụng một vùng chọn có kích thước Feather 20px bên trong một layer mới, chúng ta làm cho background có một bề mặt lồi đằng sau button, nếu background lồi ra tại chính giữa của nó, tạo ra một quả bóng 3D mềm mại phản ứng với ánh sáng bên trên

Bước 64

Chúng ta tô màu vùng chọn này bằng màu trắng, đã được làm mềm từ trước với Feather 20px Bạn có thể sử dụng Paint tool hoặc phím tắt Alt+Backspace để tô màu layer với màu sắc bạn đang sử dụng trên

Foreground

Bước 65

Chúng ta thiết lập Opacity của hình cầu xuống (0%) trong cửa sổ chỉnh sửa Layer Styles

Bây giờ, với một gradient bán trong suốt (50%) và Blend Overlay (sử dụng màu trắng-đen được thiết lập mặc định trong trình soạn thảo gradi-ents), chúng ta tiếp cận hình cầu này trên Button của background

Bước 67

Bây giờ, chúng ta đã hoàn thành Button và toàn bộ chi tiết của nó Chúng

ta chỉ cần tạo ra một số beveled edges trên background bằng cách sử dụng vector đối xứng được tạo trong Illustrator

Bước 68

Vì chúng ta luôn sử dụng Opacity ở 0%

Với Stroke và các Value này, chúng tạo ra một bức phù điêu của Bevel này trên Background

Bước 70

Với Drop Shadow và Blend Screen, chúng tạo ra vùng ánh sáng phía trên các beveled edges

Bước 71

Cuối cùng, chúng ta ẩn một phần beveled edges này với một mask mềm

có 20px Ý tưởng đó là merge tất cả chúng với background và làm biến mất về phía các góc

Đây là một hướng dẫn dài, nhưng kết quả mà chúng ta nhận được rất có giá trị Kết quả cuối cùng có một ống kính nhỏ trên vùng ánh sáng bên trên Edge Crôm Và luôn phải lưu dưới File.PSD với các nguồn tài liệu cung cấp một hiệu ứng thực tế và ảnh chụp để phản chiếu các Object Bạn

có thể xem hình ảnh cuối cùng bên dưới hoặc xemmột phiên bản lớn hơn

ở đây