Home > Photoshop > Hướng Dẫn Photoshop: Thiết Kế Button Kỹ Thuật Cao

Hướng Dẫn Photoshop: Thiết Kế Button Kỹ Thuật Cao

Hình ảnh của sản phẩm chúng ta sẽ tạo ra

Với hướng dẫn này, chúng ta sẽ tạo một Button kỹ thuật cao, có thể được sử dụng trong các trang Splash, ứng dụng hoặc những bài thuyết trình Powerpoint.Chúng ta sẽ sử dụng Illustrator để tạo ra các vectơ phức tạp và Photoshop để phát triển các hiệu ứng thực tế.

Bước 1

Sử dụng Illustrator, chúng ta tạo ra một hình chữ nhật với kích thước như hiển thị. Với Rectangle Tool, chúng ta nhấp chuột lên vùng làm việc và một cửa sổ sẽ xuất hiện cho phép chúng ta xác định kích thước chính xác cho Object. Tôi khuyên bạn nên thiết lập kích thước kích Illustrator bằng cách sử dụng Px là đơn vị đo.

Bước 2

Chúng ta đặt một Guide như tài liệu tham khảo cho sự căn chỉnh theo chiều ngang. Sử dụng Plus Pen Tool (để thêm Anchor Point cho một vector đang tồn tại), chúng ta thêm một Anchor Point phụ nữa ở cạnh dưới hình chữ nhật.

Bước 3

Bây giờ, chúng ta chọn Anchor Point mới và đưa nó lên cao hơn so với Line và chúng ta tách biệt Anchor Point này thấp hơn Anchor Point kia để đạt được một Object gần bằng với hình dạng này.

Bước 4

Với Anchor Point đã được xử lý, chúng ta sử dụng điểm bên dưới như trục của một đường cong mềm mại.

Bước 5

Bây giờ, chúng ta phải có hơn 2 Object, chúng sẽ tích hợp với một Object 3 điểm. Chúng ta xoay vector này bằng cách sử dụng phần trung tâm bên dưới của nó như là trục xoay. Để bắt đầu, chúng ta chọn Rotation tool và chúng ta nhấp chuột lên phần dưới. Sau đó, chúng ta sẽ thấy con trỏ thay đổi thành một mũi tên nhỏ màu đen.

Bước 6

Nhấn phím Alt (nó được sử dụng để sao chép – bạn sẽ thấy mũi tên màu đen xuất hiện cùng với mũi tên màu trắng), chúng ta sẽ Drag Object. Chúng ta sử dụng cửa sổ thông tin để xoay Object đã sao chép lên một vài độ. Xem xét Object này là Object có 3 điểm, chúng ta phải chia 360 ° cho con số (3) này, do đó, vector của chúng ta đã sao chép phải xoay một góc 120 °. Drag nó cho đến khi bạn thấy con số này xấp xỉ bằng con số trong cửa sổ thông tin.

Bước 7

Nhấn Ctrl + D (Windows), chúng ta sao chép những gì chúng ta đã làm một cách tự động. Vì vậy, vector này sẽ được sao chép ở góc 120 ° một lần nữa.

Bước 8

Chúng ta tập hợp các Object này thành một. Trong cửa sổ Pathfinder, chúng ta tập hợp các vector: nhấp chuột lên Unite Opiton và nhấp chuột lên Expand Button để chuyển đổi nhóm này vào trong một Object rắn.

Bước 9

Bây giờ, chúng ta sẽ làm trong các góc của Object này. Vào Effect > Stylize > Round Corners.

Bước 10

Thiết lập Radius 10px và xem trước kết quả bằng cách kiểm tra Preview option box. Radius phụ thuộc vào biên độ các Curve mà bạn đã vẽ trong Object chính. Với Preview option, bạn sẽ nhận ra nếu Radius làm mềm các góc một cách chính xác: nếu số lượng px quá nhiều, object sẽ trông méo mó và không được làm tròn một cách nhẹ nhàng.

Bước 11

Bây giờ, chúng ta sẽ thấy sự xuất hiện riêng biệt (hiệu ứng đã được tạo ra) từ vector ban đầu. Vào Object > Expand Appearance và chúng ta sẽ có vector cuối cùng.

Bước 12

Đây là kết quả của công việc chúng ta đã làm trong Illustrator, với các vector. Có một object phức tạp đã được làm bằng tay và điều này là lý do tại sao chúng ta sử dụng một số kỹ thuật để đạt được một vector đối xứng và ergonomic.

Bước 13

Vì Button của chúng ta sẽ có vật chèn bên trong – một số loại object theo kiểu lắp ráp ở phần trước- chúng ta sẽ lặp lại các bước trước nhưng lần này chúng ta sẽ có một object nhỏ và ngắn hơn.

Bước 14

Làm theo các bước tương tự từ bước 1 đến bước 12, chúng ta sẽ tạo ra object mới này. Phần còn lại của vector có thể được tạo ra bằng tay hoặc theo một cách tự động mà không quá phức tạp.

Bước 15

Chúng ta chỉ tạo ra một nửa của một object mới và sau đó, chúng ta phản chiếu nó để làm nó đối xứng. Hãy làm theo các bước mà bạn nhìn thấy trên đồ họa một cách cẩn thận.

Bước 16

Sử dụng Reflect tool, chúng ta sao chép Object bằng cách giữ các phím Shift+Alt.

Bước 17

Bây giờ, chúng ta tập hợp cả hai nửa này bằng cách sử dụng Pathfinder tool. Bạn có thể xóa Anchor Point còn lại của tập hợp này với Minus Pen tool.

Bước 18

Chúng ta sử dụng phương pháp sao chép tương tự như trước, xoay Object một góc 120 ° để có 3 Object giống nhau và phẩn bổ đều nhau.

Bước 19

Cuối cùng, chúng ta tạo ra một vòng tròn đơn giản, một vector mà sẽ được sử dụng như là LEDs nó sẽ sáng lên khi chúng ta di chuột qua đó. Chúng ta sẽ hoàn thành việc chỉnh sửa trong Photoshop để bổ sung các kỹ thuật layer mask.

Bước 20

Bây giờ, chúng ta chonk toàn bộ vector và nhấn Ctrl + C (Windows), chúng ta sao chép chúng vào hệ thống clipboard.

Bước 21

Chúng ta đóng Illustrator và mở Photoshop. Chúng ta tạo ra một .PSD có kích thước 1024 × 768 px và cấu hình này ban đầu.

Bước 22

Chúng ta tô màu layer ban đầu bằng màu đen. Sau đó, chúng ta gắn một layer style để tạo ra một Background Gradient.

Bước 23

Sử dụng màu sắc màu xám và màu đen, chúng ta sẽ tạo một Radial gradient và Scale với kích thước tối đa (130-150%). Hãy nhớ rằng trong cửa sổ layer style, bạn có thể Drag Gradient để đưa phần trung tâm của nó tới vị trí trên màn hình mà bạn muốn.

Bước 24

Bây giờ, chúng ta sẽ paste vector như Shape Layers. Ctrl + V hoặc Edit> Paste.

Bước 25

Chúng ta có các vector trong một Shape Layer và chúng ta phải tách chúng thành các layer khác nhau. Chúng ta hãy sao chép các layer nhiều như các phần chúng ta đã có – trong trường hợp này là 4- và loại bỏ những object không cần thiết, chỉ để lại hình dạng mà chúng ta đang quan tâm.

Bước 26

Thứ tự của các lớp là một trong những bạn nhìn thấy trong hình và không quên tên mỗi lớp để tổ chức công việc của bạn tốt hơn. Một số lớp sẽ được thêm vào những cái mà sẽ được tạo ra hoàn toàn trong Photoshop. Chúng tôi sẽ bổ sung thêm lớp phong cách nút chính của chúng tôi.

Bước 27

Nhấp đúp lên layer trên cửa sổ Button chính, chúng ta mở cửa sổ Edit của layer style này. Trên “Blending Options: Default”, chúng ta chỉnh Opacity của layer này xuống 0 để chúng ta chỉ nhìn thấy các hiệu ứng của layer. Chúng ta bắt đầu bằng việc thêm một Gradient tròn bằng cách sử dụng các màu sắc của background tương tự #333333 (màu xám đậm) và #000000 (màu đen). Hãy chắc Gradient này sẽ mềm mại từ trung tâm tới Edge, tăng kích thước của nó lên 120%.

Bước 28

Với Inner Shadow và chọn Use Global Light (chúng ta sẽ luôn luôn sử dụng 90 °), chúng ta đảo ngược shadow này, drag Angle Editor của shadow xuống -90 °. Điều này sẽ giúp chúng ta củng cố khu vực phía dưới của các shadow.

Bước 29

Chúng ta đã hoàn thành xong phần 1 của việc chỉnh sửa Botton. Bây giờ, chúng ta chuyển sang phần trước của nó, hiện đang có một bề mặt mờ đục, chúng ta sẽ phải tăng thêm sự sáng bóng và 3D Extrusion giả.

Bước 30

Bây giờ, chúng ta tạo ra một Stroke Crôm xung quanh Button. Chúng ta thêm một Stroke 3px với Gradient Type Fille. Chúng ta thêm một số chi tiết cho Gradient này bên trong Stroke. Chúng ta tạo một bề mặt kim loại Crôm phản chiếu, nơi đó chúng ta sử dụng nguồn ánh sáng phản chiếu chân trời và bầu trời bên ngoài cửa sổ.

Bước 31

Chúng ta gắn Reflected style cho gradient để mở rộng số lượng tia phản xạ Crôm. Bằng cách chuyển Angle của Gradient, chúng ta sẽ đặt những vùng sáng hơn ở những nơi chúng ta muốn. Trong trường hợp này, ánh sáng tối đa phải được nhìn thấy ở phía trên khu vực của Stroke.

Bước 32

Bây giờ, chúng ta tạo một bề mặt Crôm phức tạp hơn bằng cách thêm một số chi tiết sáng và Shadow cho kim loại. Với Bevel & Emboss và Gloss Contour, bạn thấy trong bức tranh, chúng ta sẽ thêm một số chi tiết nhỏ cho bề mặt.

Bước 33

Với Inner Glow, chúng ta thêm một Inner Beveled Edge cho Button, vì nếu nó là 3D, hãy thử làm sắc nét bằng cách Merge với background của Object.

Bước 34

Bây giờ, chúng ta cần một vùng chọn để vẽ một số chi tiết bằng tay trên Button. Bước đầu tiên là sử dụng hình dạng layer của button và vùng chọn sẽ được sử dụng như một mask vì nó đã được vẽ. Vào Paths window và chọn Button layer để tạo một vùng chọn với hình dạng tương tự.

Bước 35

Bây giờ, chúng ta thu nhỏ kích thước của vùng chọn này bằng cách vào Select > Modify > Contract. Chúng ta giảm vùng chọn xuống 10px so với kích thước gốc.

Bước 36

Bây giờ, chúng ta sẽ làm mềm vùng chọn. Vào Select > Modify > Feather hoặc Alt+Ctrl+D (Windows). Chúng ta gắn một Feather 1px và nhấn OK.

Bước 37

Chúng ta ẩn vùng chọn bằng cách sử dụng Ctrl+H để nhìn thấy rõ hơn những gì chúng ta làm. Với Brush tool, sử dụng một Brush có kích thước 35px và Flow 10%, chúng ta vẽ bên trong layer mới một số tia phản chiếu ánh sáng trên Button, sử dụng màu trắng. Vì ánh sáng của khung cảnh xuất phát trừ phía trên, chúng ta sẽ gắn nhiều ánh sáng lên vùng phía trên của Button và chúng ta sẽ tăng cường một số điểm sáng nhỏ cho các vùng tối ở phần dưới của Object.

Bước 38

Vẫn giữ chuột trên vùng chọn (vùng chọn sẽ được nhìn thấy lại bằng Ctrl+H), chúng ta sẽ giảm kích thước của nó xuống một vài px để xóa một chút tác phẩm chúng ta đã làm với Brush và đạt được một hiệu ứng phức tạp hơn. Lần này, chúng ta sẽ giảm vùng chọn xuống 3px.

Bước 39

Chúng ta ẩn vùng chọn này một lần nữa bằng cách sử dụng Ctrl+H và nhấn phím Delete, chúng ta xóa một vài phần của các vết Brush trước. Điều này cho phép chúng ta để vẽ bằng tay và sau đó, hoàn thiện tác phẩm bằng cách tạo một vùng Edge Bevel củng cố khía cạnh 3D của button và tạo ra một texture bằng nhựa trên bề mặt của nó.

Bước 40

Chúng ta hoàn thành cấu trúc của button. Bây giờ, chúng ta phải tạo ra một Insertion trên vùng trung tâm của nó. Bước đầu tiên, đó là chuyển Opacity của hình dạng layer xuống (0%).

Bước 41

Chúng ta tạo một Inner Shadow mới trong Angle ngược giống như chúng ta đã làm từ trước cho Button chính. Hãy chắc bạn đã thêm một số Value mà bạn thấy trong hình ảnh này.

Bước 42

Bây giờ, một Stroke nhỏ sẽ đại diện cho một Bevel giữa 2 Object.

Bước 43

Bước tiếp theo, là sử dụng Drop Shadow như một bề mặt sáng bởi Blend Mode Screen và màu trắng. Kích thước của ánh sáng phải là 2px để làm cho nó thật sắc nét, vì nếu nó đã có một Edge Beveled sẽ nhận một số ánh sáng từ phía trên.

Bước 44

Cuối cùng, với một Inner Glow, chúng ta tái tạo Beveled Edge của Inner Button. Điều này làm cho người quan sát giải thích đối tượng này như một Beveled Edge Panel đã ăn khớp với nhau bên trong Button chính.

Bước 45

Chúng ta đã thực hiện với Button chính. Trên thực tế, không có một Button được đặt trên background: thông qua một số hiệu ứng bổ sung, nó sẽ được nhìn thấy như một vật được gán vào bề mặt của background, có một Stroke kim loại xung quanh và có chứa một Button bên trong để có thể nhấn xuống được.

Bước 46

Bây giờ, chúng ta sẽ tạo Power icon của Button. Download font miễn phí này: http://www.dafont.com/guifx-v2-transports.font. Bạn sẽ có thể tạo ra Object bằng cách sử dụng phím “q” và font này có kích thước 48.

Bước 47

Trong hình ảnh này, bạn thấy chúng ta có thể thêm beveled edge bên ngoài cho icon, sử dụng một Stroke có kích thước 3px với màu sắc tương tự với bề mặt của button và gắn hiệu ứng Stroke Emboss với các giá trị này.

Bước 48

Hiệu ứng Stroke Emboss như là một lựa chọn để tạo ra beveled edge , sẽ cho phép chúng ta tạo ra hiệu ứng beveled của icon trên background.

Bước 49

Cuối cùng, chúng ta sẽ thêm một texture kim loại cho icon bằng cách sử dụng một gradient như bạn có thể thấy trong bức tranh này.

Bước 50

Bây giờ, chúng ta sẽ tạo ra 3 Led, tăng thêm ánh sáng cho button khi chúng ta di chuột lên đó. Bước đầu tiên, đó là chọn màu #06B9FB cho Shape Layer, nhấp chuột đôi lên nó để chỉnh sửa màu sắc.

Bước 51

Sử dụng Shape Layer của button chính, chúng ta tạo ra một vùng chọn.

Bước 52

Chúng ta mở rộng kích thước của vùng chọn này bằng cách vào Select > Modify > Expand.

Bước 53

Chúng ta thiết lập phần mở rộng lên 8px và nhấn OK.

Bước 54

Chúng ta đảo ngược vùng chọn bằng cách sử dụng Select> Inverse.

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 này. Điều này sẽ cho phép chúng ta đưa ra ý tưởng của một Object đươc chèn vào trên bề mặt của background.

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.

Bước 59

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.

Bước 61

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.

Bước 63

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ước 66

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 gradients), 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%.

Bước 69

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.

Kết luận

Đâ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.

Dịch và biên tập từ: Psd.TutsPlus

Xem bài viết gốc

Categories: Photoshop
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: