Home > Photoshop > Thiết Kế Thiết Bị Chơi MP3 Thời Trang trong Photoshop

Thiết Kế Thiết Bị Chơi MP3 Thời Trang trong Photoshop


Một trong những cách tốt nhất để tìm hiểu cách tạo các giao diện tuyệt vời là thực hành theo cách tạo các thiết bị điện tử trong Photoshop. Hiện này, chúng ta có một số loại thiết bị MP3 để nghe nhạc. Trong hướng dẫn này, chúng ta sẽ thể hiện cách làm thế nào để tạo một giao diện MP3 đơn giản, kiểu dáng đẹp và phong cách trong Photoshop để mở các file âm thanh trong các dự án Flash của bạn.

Bước 1

Bước đầu tiên là tạo ra một background trong đó chúng ta có thể gắn một Radient Gradient đậm vào. Tô layer này bằng bất cứ màu nào và thêm Layer Style vào Gradient như bên dưới.


Bước 2

Với Rounded Rectangle Tool (thiết lập bán kính 20 pixels), tạo ra thành phần chính của thiết bị này bằng cách sử dụng một Shape Layer (nhấp chuột vào lựa chọn đầu tiên của menu phía trên).


Bước 3

Nhấp đúp chuột vào các Vector của Layer này, Color Editor của nó sẽ được mở ra. Chúng ta chọn một màu xám nhạt # E1E0E0, màu sắc này sẽ làm cho bề mặt của Layer sáng hơn một chút. Mỗi lần bạn muốn tạo ra các Object màu trắng, bạn sẽ phải thêm một chút màu xám vào, như vậy bạn có thể làm cho các nguồn sáng nhìn thấy rõ hơn.


Bước 4

Bây giờ, chúng ta sẽ tạo ra một góc xiên chung quang thiết bị này. Để thực hiện điều này, chúng ta cần tạo một số Reference Guides, sử dụng các thước kẽ trong Photoshop. Nhấp chuột vào góc hội tụ của cả 2 thước kẻ. Bằng việc Drag chuột, bạn có khả năng hình dung ra các đường nhiều chấm mà con trỏ sẽ định vị một cách chính xác các chấm nhỏ này. Như vây, chúng ta sẽ dễ dàng tạo ra một góc xiên cách đều xung quanh chu vi của thiết bị.


Bước 5

Bây giờ, chúng ta có một shape layer mới cho góc xiên, chúng ta cần chỉnh Opacity của layer này về 0, nếu chúng ta muốn thấy góc xiên này có kích thước là 2px trên bề mặt.


Bước 6

Gắn một Stroke có kích thước 1px vào vị trí bên trong, sử dụng màu sắc đậm hơn so với mặt trước của thiết bị. Trong bưc[s này, chúng ta sẽ tạo một đường ngăn cách giữa phần thân và phần trước của Player (máy nghe nhạc).


Bước 7

Gắn Inner Glow với một đường vẽ có kích thước 2px, sử dụng các tiêu chuẩn như bên dưới.


Bước 8

Thêm một Soft Gradient, làm cho mặt trước của thiết bị lồi ra.


Bước 9

Bây giờ, chúng ta sẽ quan tâm đến cạnh của Player. Để thực hiện điều này, chúng ta thêm một đường vào và hoạt động như một vòi phun, tạo một ảnh minh họa của 3d Object. Thêm vào một Stroke màu xám, có kích thước 2px ở vị trí bên ngoài.


Bước 10

Sử dụng Bevel & Emboss Style, chúng ta thêm ánh sáng vào vùng phía trên của dòng này. Bây giờ, Object này dường như có vòi phun trở lại tiếp nhận ánh sáng từ bên trên và trở nên sẫm màu hơn.


Bước 11

Thêm một Inner Shadow mềm, nhỏ vào Layer này để làm nổi bật phần trước của Player hơn nữa


Bước 12

Bằng cách sao chép và chỉnh sửa Bevel Layer của mặt trước, chúng ta đã tạo ra nhiều Bevel (góc xiên) hơn, những góc xiên này sẽ biểu trưng cho các Control Button của thiết bị khác nhau.


Bước 13

Bây giờ, chỉnh sửa Shape Layer để tạo button Play / Pause chính của Player. Sao chép Bevel đầu tiên và tạo các border bên trong để tạo một Object hình tròn. Sau đó, phóng nó lên 10%, chúng ta chỉ cần các Belvel theo chiều ngang.


Bước 14

Gắn một hình chắn (Mask) mềm có kích thước 3px vào Shape mà chúng ta đã tạo ra trong bước 13 giống như hình bên dưới.


Bước 15

Tạo hình chắn để ẩn Object và Layer Style của nó, nhấp chuột vào lựa chọn “Layer Mask Hides Effects” trên các kiểu dáng cửa sổ. Nếu chúng ta không chọn lựa chọn này, hình chắn sẽ chỉ ẩn Object nhưng hiệu ứng sẽ thể hiện bên ngoài hình chắn và chúng ta muốn ẩn nó.


Bước 16

Hình chắn như thế này cũng sẽ rất hữu ích đối với các Bevel khác; chúng ta cần tách nó từ layer mà chúng ta đã ẩn lúc trước. Bằng cách nhấp chuột phải lên Mask Icon bên trong Layer, chúng ta chọn “Subtract Layer Mask từ Seclection”. Làm như vậy chúng ta đã tạo ra một vùng chọn giống với vùng chọn trước đó.


Bước 17

Với vùng chọn này, chúng ta lặp lại Mask Selection trong bước chuyển đổi.


Bước 18

Chúng tôi đã có các bevels tách biệt của button chính. Bây giờ, chúng ta cần tạo ra một Shape Layer cho phần Display của Player: một màn hình acrylic màu đen hiển thị tên và thời gian của bài hát.


Bước 19

Trước tiên, chúng tôi sử dụng hiệu ứng bóng đổ (Drop Shadow) để tạo ra một góc xiên dưới bottom nơi ánh sáng xuất phát từ phía trên sẽ chạm vào. Sử dụng các nguyên tắc hiển thị trên bức để thiết lập cấu hình Style này, làm cho nó sắc nét và rõ ràng, không bị tối và mờ.


Bước 20

Bây giờ, chúng ta cần tạo ra một Radial Gradient. Sử dụng cả màu trắng và màu đen gần trung tâm nhất có thể, như vậy, sẽ không quá mềm giữa 2 màu sắc này. Location của màu đen là 49% và của màu trắng là 50%.


Bước 21

Unclick lựa chọn Align với Layer. Nếu chúng ta không làm như vậy, Gradient sẽ chỉ có từ trung tâm của Object tới các cạnh và chúng ta muốn Gradient này thật rộng và lớn.


Bước 22

Sau khi, tạo ra được hiệu ứng Glossy, hoàn thành Style này với một cặp Bevel tương tự như Bevel mà chúng ta đã tạo ra trong bước Button. Sử dụng một Stroke màu đen có kích thước 1px với Stroke đã được căn chỉnh bên trong. Sử dụng Inner Glow có kích thước 2px với Blending Mode thiết lập trên màn hình.


Bước 23

Chúng ta đã hoàn thành mặt trước của máy nghe nhạc MP3. Bây giờ, chúng ta sẽ cần phải thêm một số icon cho các button và text bên trong màn hình hiển thị.


Bước 24

Bây giờ, chúng ta hãy mô phỏng text theo dạng cuộn trên màn hình hiển thị. Sử dụng một phông chữ pixelated mà chúng ta cần thêm tên người trình bày và tên bài hát sẽ được mở. Bạn cần sử dụng phông chữ miễn phí này. Hãy nhớ loại bỏ phần răng cưa trong Character Window trong Menu phía trên của Text Tool để giữ cho Text thật sắc nét.


Bước 25

Với phông chữ bitmap khác, chúng ta tạo chronometer cho biết thời gian trôi qua. Phông chữ này cũng miễn phí và bạn có thể tìm thấy nó ở đây.


Bước 26

Bây giờ, sử dụng phông chữ có các Icon thông thường và các Symbol của một Player audio hay video. Bạn cần sử dụng cài này. Khi bạn đã cài đặt xong, sử dụng nó để tạo ra các button của Player khác nhau, trong trường hợp này, là các button Play/ Pause Control (bạn sẽ phải tạo 2 trạng thái cho button khi bạn phát triển Player này, giống như button Play trở thành button Pause khi nó được nhấn vào và ngược lại).


Bước 27

Đối với biểu tượng này chúng ta sử dụng màu sắc tương tự như biểu tượng mà chúng ta đã chọn cho bề mặt phía trước của Object. Với Color Selection Tool, chúng ta có thể tô màu cho Text.


Bước 28

Bây giờ, chúng tôi có thể có các Stles khác nhau làm cho Symbol này trông giống như hình khắc nổi (bas-relief). Sử dụng các nguyên tắc phù hợp bên dưới đối với Inner Shadow.


Bước 29

Làm nhạt bevel của bottom, sử dụng các nguyên tắc này.


Bước 30

Sử dụng một Gradient mềm và có chiều rông nhỏ lên trên bể mặt lõm như vậy sẽ không quá nhàm chán.


Bước 31

v


Bước 32

Sử dụng Drop Shadow (hiệu ứng bóng đổ) để tạo ra ảo giác về một vòi phun lớn.


Bước 33

Với một Gradient trong Angle Mode và một vài sọc trắng, xám, chúng ta có thể mô phỏng hình tròn của loại button được đánh bóng này. Hãy chắc rằng, màu sắc của sọc đầu tiên là màu xám nằm bên tay trái và tương tự sọc cuối cùng nằm bên phía phải cũng là màu xám.


Bước 34

Cuối cùng, thêm một Stroke vào một Gradient đã được làm đầy. Làm như vậy là chúng ta đã thêm bevel vao trên chu vi này. Làm theo các nguyên tắc với một gradient điền. Điều nàybức tranh một cách cẩn thận.


Bước 35

Chúng tôi đã hoàn thành button Volume Control. Nhưng chúng ta còn muốn thêm button mute vào. Bạn có thể thực hiện bằng cách sử dụng Layer Styles.


Bước 36

Sơn Shadow của Player trong Layer mới, sử dụng một vùng chọn tròn, mềm với kích thước 2 px (xem nguyên tắc trên menu của công cụ phía trên).


Bước 37

Ẩn vùng chonk với Ctrl + H và sử dụng một brush với kích thước 100 pixel và 10% Pain Flow, sơn Shadow một cách mềm mại. Như vậy, phần trung tâm của Object sẽ nổi bật hơn.


Bước 38

Bây giờ, chúng ta hãy thêm một chút ánh sáng rực rỡ trên cạnh màn hình hiển thị của Player. Trước tiên, sơn một vùng sáng cường độ cao ở trung tâm của một vùng chọn hình chữ nhật có kích thước chiều cao là 1px. Sau đó, với bút vẽ tương tự nhưng không có bất kỳ vùng chọn nào, nhấp chuột vài lần để làm nổi bật phần trung tâm.


Bước 39

Tạo hiệu ứng rollover vào nút chính để tạo cửa sổ pop trên bề mặt phía trước Object khi con chuột di qua. Chúng ta bắt đầu bằng cách tạo ra một shape tròn phía sau icon Pause.


Bước 40

Hiệu ứng lõm có thể được thực hiện với: Drop Shadow để làm cho các cạnh của object đậm và mềm mại hơn, và một Gradient để mô phỏng hiệu ứng lõm này có một vùng phía trên nằm trong các Shades, như button đã được nhấn xuống.


Bước 41

Chúng ta cũng ẩn rollover này với một hình chắn như chúng ta đã làm với các bevel của button chính. Hãy nhớ lựa chọn của hiệu ứng layer ẩn này phải thực hiện cùng lúc.


Bước 42

Lặp lại các bước trước đó, chúng ta che rollover này.


Bước 43

Chúng tôi sẽ bổ sung thêm hai hiệu ứng ánh sáng để tăng cường tái đầu tư. Bằng cách vẽ tranh với 2 màu (# 00CCFF cho các cạnh của ảnh hưởng và trắng cho trung tâm của nó), chúng tôi tạo ra một cạnh sáng mà chúng tôi sẽ mask. Nhân đôi layer và phản ánh nó theo chiều dọc để làm cho nó trông như là nếu nó sáng lên ở phía trên và phía dưới như là con chuột đi qua. lớp này phải được đặt để “Screen” để tích hợp các ánh sáng tốt hơn.


Bước 44

Cuối cùng, chúng ta hãy thêm một dây mỏng, nó sẽ làm cho Player hiện thực hơn. Để thực hiện điều này, chúng ta vẽ một curved shape layer, sử dụng Pen Tool.


Bước 45

Thiết lập Opacity của nó lên 0% và thêm một Stroke vào, sử dụng tông màu xám tương tự như của bề mặt Player.


Bước 46

Phân biệt Stoke từ Shape layer mà chúng ta đã tạo ra, vì vậy, chúng ta cần tăng thêm độ bóng cho sợi dây này. Nhấp chuột phải lên Fx icon bên cạnh layer và chọn Create Layer.


Bước 47

Hành động tách Stroke trong layer mới không phá hủy shape mà chúng ta đã vẽ lúc trước. Sử dụng Inner Shadow để đưa ý tưởng của Hành động này phân cách đột quỵ trong một lớp mới mà không phá hủy hình dạng trước đây là rút ra. Sử dụng bóng tối bên trong để cung cấp ý tưởng cho hình trụ nổi.


Kết luận

Bây giờ, máy nghe nhạc MP3 của chúng ta đã sẵn sàng xuất khẩu như một PNG trong suốt và đã được mã hóa trong Flash để sử dụng trên các website. Bạn có thể xem hình ảnh cuối cùng bên dưới hoặc xem mộ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: