Tạp Chí CNTT

Trong hướng dẫn này chúng ta sẽ tạo ra ứng dụng giao diện Clean Twitter trong Photoshop bằng cách sử dụng các Layer Style, các vector Shape cơ bản. Hãy bắt đầu!

Bước 1: Tạo file mới

Bắt đầu bằng cách tạo file mới với size là 1,050 x 700 pixel, Resolution là 72 ppi.

Bước 2: Chuẩn bị Canvas

Click vào View > Ruler hoặc nhấn Ctrl + R để bật Ruler. Click chuột phải vào Ruler và chọn Pixels để thay đổi đơn vị hiện hành là pixels.

Bước 3

Kéo ruler vào canvas để tạo một guide có chiều rộng và chiều ngang như hướng dẫn. Chúng ta cần có 1 vùng khoảng 362 px rộng và 589 px cao. Ở phía bên trái và bên phải bên trong là 7px.

Bước 4

Thiết kế của chúng ta cần có pixel hoàn hảo. Để làm được điều này, chúng ta sẽ kích hoạt Snap to Pixels như hình bên dưới. Kích hoạt các công cụ và chọn tùy chọn này trên thanh công cụ.

Bước 5

Vẽ một hình chữ nhật bo tròn với radius 5 px và màu là #e2e4e7.

Bước 6

Add thêm Drop Shadow và Stroke như các thiết lập bên dưới.

Bước 7: Tiêu đề của thanh

Kích hoạt công cụ Rounded Rectangle với radius 5 px. Vẽ một hình chữ nhật tròn màu đen ở trên hình chữ nhật vừa vẽ như bên dưới. Thêm Path hình chữ nhật và thiết lập chế độ Intersect.

Bước 8

Click đúp vào layer này và thiết lập Layer Style Inner Glow, Gradient Overlay, và Stroke như bên dưới:

Bước 9

Vẽ một hình tròn nhỏ với màu #e43c22. Chúng ta sẽ tạo một button Close.

Bước 10

Thêm Inner Glow, Gradient Overlay, và Stroke.

Bước 11

Kích hoạt công cụ Move tool, sau đó Alt-drag (kéo) để nhân đôi các button. Thay đổi màu sắc của chúng là màu vàng và màu xanh. Và nhớ rằng chúng ta cũng cần phải thay đổi màu Stroke sao cho phù hợp.

Bước 12

Chúng ta cần tạo thêm độ tương phản cho button Close. Chúng ta cần cho người dùng hiểu rằng button này có thể nguy hiểm nếu chúng ta bấm vào và Close toàn bộ giao diện. Để làm được điều này, chúng ta chỉ cần vẽ một hình tròn nhỏ với màu tối hơn.

Bước 13

Vẽ một hình chữ nhật bo tròn với chiều rộng và radius giống với hình chữ nhật trước. Đặt nó ở dưới thanh tiêu đề với màu #d2d8df.

Bước 14

Add thêm một Path hình chữ nhật (rectangle path) và thiết lập chế độ Intersect.

Bước 15

Add thêm Layer Style Inner Glow và Gradient Overlay.

Bước 16

Kích hoạt công cụ Line tool và từ thanh tùy chọn thiết lập Width là 1 px. Vẽ một Line (dòng) với màu #808f9e ngay dưới cùng của hình.

Bước 17

Add hiệu ứng Letterpress bằng cách chọn Drop Shadow với 1 px, bóng (Shadow) màu trắng.

Bước 18: User Profile

Add thêm một hình chữ nhật chứa hồ sơ của người dùng. Vẽ một hình chữ nhật màu trắng với radius 5 px giống như hình thể hiện bên dưới.

Bước 19

Double click vào layer và thiết lập Gradient Overlay và Stroke.

Bước 20

Vẽ một hình chữ nhật nhỏ hơn với radius 3 px ở trong hình chữ nhật đã vẽ ở bước 18. Và bạn có thể chọn bất kỳ màu nào.

Bước 21

Thiết lập Inner Shadow và Stroke như bên dưới.

Bước 22

Paste hình ảnh cá nhân của bạn lên trên hình chữ nhật vừa vẽ. Nhấn Ctrl + Alt + G để chuyển đổi layer sang Clipping Mask. Bằng cách này hình ảnh của chúng ta sẽ nằm trong hình chữ nhật nhỏ. Bạn có thể thay đổi kích thước bằng cách sử dụng Ctrl + T và thay đổi vị trí của nó bằng cách sử dụng công cụ Move Tool.

Bước 23

Thêm tên người sử dụng Twitter. Add hiệu ứng Letterpress bằng cách thiết lập một Drop Shadow với kích thước là 1 px và màu trắng.

Bước 24

Thêm dòng giới thiệu ngắn, sau đó thiết lập hiệu ứng Letterpress cho nó.

Bước 25

Vẽ một Line (dòng) 1px với màu #afbac4, add thêm Layer Style Drop Shadow để có được hiệu ứng Letterpress.

Bước 26

Add các Tweets bằng cách sử dụng Armata font. Thiết lập hiệu ứng Letterpress cho text.

Bước 27: Update Button

Vẽ một hình chữ nhật bo tròn nhỏ với radius 2 px và màu là #eef1f4. Đặt nó ở vị trí trên cùng ở góc bên phải như hình dưới. Add Layer Styles cho nó.

Bước 28

Vẽ một hình chữ nhật màu đen ở giữa hình chữ nhật ở bước trên. Sau đó, chúng ta tiếp tục vẽ một hình chữ nhật nhỏ hơn. Nhớ rằng cả hai hình chữ nhật đều nằm bên trong một layer.

Bước 29

Vẽ hình dạng bút chì được tạo ra bởi những hình chữ nhật đơn giản. Đầu tiên, chúng ta vẽ một hình chữ nhật lớn với chế độ Subtract từ Path. Thứ hai, vẽ một hình chữ nhật cao hơn tựa như thân của bút chì. Thứ 3, chúng ta vẽ 1 hình chữ nhật nhỏ và xoay nó với một góc 45°. Cuối cùng, vẽ một hình chữ nhật với chế độ Subtract từ Shape để cut phần thân của bút chì.

Bước 30

Xoay icon bút chì mà chúng ta đã tạo và đặt nó ở trên các hình chữ nhật như bên dưới.

Bước 31

Vẽ một hình chữ nhật dưới khu vực hồ sơ cá nhân với màu #e2e4e7.

Bước 32

Add thêm Inner Glow và Gradient Overlay như bên dưới.

Bước 33

Vẽ một Line 1px ở dưới hình dạng đã vẽ trước đó với màu #a8b1ba. Sau đó thiết lập một Drop Shadow có kích thước là 1 px, màu trắng.

Bước 34: Icons

Sử dụng công cụ Pen Tool để vẽ một Shape hình bong bóng. Thiết lập màu sắc của nó là #adb9c. Add Layer Style Inner Shadow, Outer Glow, và Gradient Overlay.

Bước 35

Chúng ta cần tạo một button khác để khi di chuột vào chúng sẽ chuyển màu. Để làm được điều này, nhân đôi layer icon bong bóng và thiết lập nó với màu #3c8cf8.

Bước 36

Thiết lập Drop Shadow, Outer Glow, Inner Glow, và Gradient Overlay.

Bước 37

Vẽ một hình chữ nhật màu đen và đặt phía sau icon bong bóng. Sau đó thêm Gradient Overlay vào.

Bước 38

Giảm Fill xuống còn 27%.

Bước 39

Thêm layer mask và vẽ trên nó với một Shape màu đen.

Bước 40

Lặp lại các bước trên để tạo ra các icon khác.

Bước 41

Thêm một Line dọc để ngăn cách giữa 2 icon với nhau như hình bên dưới với màu #aab6c2. Thiết lập Drop Shadow để có được hiệu ứng Letterpress. Add một Layer mask và làm mờ các baground xung quanh chúng.

Bước 42

Alt-drag (kéo) để nhân đôi Line và đặt chúng ở giữa các icon.

Bước 43: Box tìm kiếm

Vẽ một hình chữ nhật bo tròn với radius rất lớn. Vẽ box tìm kiếm bên cạnh icon cuối cùng và thiết lập Drop Shadow, Inner Shadow, Outer Glow, và Stroke.

Bước 44

Ở bên trong box tìm kiếm, chúng ta vẽ một hình trò và một hình chữ nhật để tạo ra icon kính lúp giống như hình bên dưới với mã màu #8696a8.

Bước 45: Danh sách Tweets

Vẽ một hình chữ nhật với màu #e2e4e7. Thiết lập Inner Glow và Gradient Overlay.

Bước 46

Vẽ một Line ở dưới của Shape vừa vẽ với màu #a8b1ba. Sau đó, chúng ta thêm hiệu ứng Letterpress vào.

Bước 47

Vẽ một hình chữ nhật bo tròn màu trắng có radius là 3 px. Thiết lập các giá trị của Gradient Overlay và Stroke như bên dưới.

Bước 48

Vẽ bên trong hình chữ nhật vừa vẽ một hình màu đen với radius 1 px và màu là #202020. Add thêm Drop Shadow và Stroke.

Bước 49

Paste hình cá nhân lên trên hình chữ nhật vừa tạo. Nhấn Ctrl + Alt + G để chuyển đổi sang Clipping Mask.

Bước 50

Sử dụng công cụ Type tool để add thêm user name, nội dụng tweet, thông tin thời gian. Nhớ rằng thêm link đến contrast và truy cập đến tài khoản Twitter.

Bước 51

Ở góc dưới bên phải của khu vực tweet, vẽ một hình tròn màu #aab7c3. Sau đó vẽ một ngôi sao bằng cách sử dụng công cụ Polygon tool và thiết lập nó chế độ Subtract. Chúng ta sẽ làm nó thành một buton Like.

Bước 52

Sử dụng kỹ thuật tương tự để vẽ button trả lời.

Bước 53

Đặt tất cả các tweets bên trong một group bằng cách chọn chúng và nhấn Ctrl + G. Nhân đôi nó bằng cách nhấn Alt-drag (kéo) layer group. Chỉnh sửa hình ảnh cá nhân và text để thay đổi chúng.

Bước 54

Duplicate (nhân đôi) Shape ứng dụng cơ bản và thay đổi nó thành màu đen. Add thêm một hình chữ nhật trên nó và thiết lập chế độ Intersect. Add Inner Glow, Gradient Overlay, và Stroke.

Bước 55

Thêm thông tin API ở thanh bên dưới. Thiết lập hiệu ứng Letterpress bằng cách sử dụng Drop Shadow.

Bước 56

Vẽ 12 hình chữ nhật bo tròn có kích thước khác nhau. Sau đó sắp xếp và xoay chúng như hình bên dưới. Thiết lập hiệu ứng Letterpress cho chúng.

Bước 57: Thanh trượt

Vẽ một hình chữ nhật bo tròn cao, màu trắng radius 1 px. Đặt nó ở vị trí như trong hướng dẫn. Sau đó thêm Stroke.

Bước 58

Vẽ một hình chữ nhật nhỏ hơn cùng radius và tô nó với màu #8b9eb3, sau đó add Layer Style Inner Glow và Stroke.

Bước 59: Add thêm Guides

Chúng ta đã hoàn thành giao diện chính. Bước tiếp theo, chúng ta tạo update status và upload photo lên cửa sổ giao diện. Trước tiên, chúng ta cần phải thêm nhiều Guides để có thể giúp chúng ta thiết kế tốt hơn. Xem hình bên dưới.

Bước 60: Update Status Window

Vẽ một hình chữ nhật bo tròn với kích thước radius là 5 px và màu là #e2e4e7.

Bước 61

Thêm một Path hình chữ nhật ở bên trái cửa sổ và sau đó nhấn Ctrl + T để xoay nó một góc 45 độ. Nhớ rằng Path được thiết lập để thêm Shape. Add Layer Style Drop Shadow và Stroke.

Bước 62

Duplicate (nhân đôi) Shape cơ bản và thay đổi sang màu đen. Vẽ một hình chữ nhật ở trên và thiết lập chế độ Intersect. Add Inner Glow, Gradient Overlay, và Stroke.

Bước 63

Vẽ một Shape tròn nhỏ ở góc bên phải của thanh tiêu đề. Thiết lập màu là #707070. Thêm vào giữa nó 2 hình chữ nhật và xoay nó như hình bên dưới một hóc 45 độ. Đây chính là Button Close.

Bước 64

Nhân đôi button Close và thay đổi màu sắc của nó thành #a4a4a4. Điều này sẽ làm cho button thay đổi màu khi rê chuột vào.

Bước 65

Duplicate (nhân đôi) Shape cơ bản và thay đổi màu sắc của nó sang đen. Thêm một path hình chữ nhật ở bên dưới và thiết lập Intersect. Add Inner Glow, Gradient Overlay, và Stroke.

Bước 66

Vẽ một hình chữ nhật bo góc tròn màu xanh với radius 3 px ở góc phải của giao diện. Add Inner Glow, Gradient Overlay, và Stroke.

Bước 67

Add thêm text Post trên button. Thiết lập hiệu ứng Letterpress với Drop Shadow, màu tối và 1px.

Bước 68

Duplicate (nhân đôi) button và text của nó. Chúng ta sẽ tạo 1 cái mới khi rê chuột vào. Tăng opacity của Gradient Overlay là 40%.

Bước 69

Chúng ta nên đặt mỗi button vào mỗi group khác nhau để cho chúng có tổ chức và rõ ràng hơn.

Bước 72

Vẽ ký từ | và thêm ký tự còn lại ở góc trái của giao diện.

Bước 71: Image Upload Window

Lặp lại các bước trước đó để vẽ giao diện upload hình ảnh.

Bước 72

Tiếp theo, chúng ta vẽ một hình chữ nhật bo góc tròn ở trung tâm giao diện với radius 3 px và #d9dde1. Sau đó chúng ta vẽ một Path hình chữ nhật ở trong Shape vừa tạo. Thiết lập chế độ Subtract.

Bước 73

Add thêm một số hình chữ nhật nằm ngang và thiết lập chế độ Subtract. Chọn tất cả hình chữ nhật và click vào icon Distribute Vertical Center và Distribute Horizontal Center.

Bước 74

Lặp lại thao tác này cho các hình chữ nhật dọc.

Bước 75

Add hiệu ứng Letterpress.

Bước 76

Vẽ một hình chữ nhật ở giữa giao diện với radius 3 px và màu #cdd2d8. Thêm một hình chữ nhật bên trong nó và thiết lập chế độ Subtract.

Bước 77

Sử dụng công cụ Pen Tool để vẽ hình dạng như bên dưới.

Bước 78

Add thêm Drop Shadow.

Bước 79

Thêm hướng dẫn ngắn và thiết lập hiệu ứng Letterpress.

Hình ảnh cuối cùng

Dịch từ: psd.tutsplus.com