Hướng dẫn thiết kế icon thủy tinh 3D trong suốt trong Photoshop (Glassmorphism)

Glassmorphism là một biến thể mới của UI trend từ Neumorphism, bản thân nó là một biến thể của Skeuomorphism. Glassmorphism kết hợp xu hướng chiều sâu và cảm giác xúc giác được tìm thấy trong các hình thái khác với tính thẩm mỹ giống như thủy tinh trong suốt. Hướng dẫn này sẽ dạy bạn cách tạo biểu tượng đám mây theo kiểu Glassmorphism bằng cách sử dụng các hình dạng đơn giản, kiểu lớp, đối tượng thông minh và bộ lọc trong Photoshop.

Bước 1

Khởi chạy Photoshop và tạo một tài liệu mới (File > New…)

  • Chiều rộng: 512 px
  • Chiều cao: 512 px
  • Độ phân giải: 72 px

Bước 2

Đi tới Layer> New Fill Layer> Solid Color … và nhấp vào OK

Trong cửa sổ tiếp theo, nhập #E9FFFC và nhấp vào OK

Đặt tên cho lớp là ‘Background Color’ (Tùy ý)

Bước 3

Sử dụng công cụ Rounded Rectangle Tool (U) để vẽ một hình vuông trên canvas

  • X: 88 pixel
  • Y: 133 px
  • Chiều rộng: 306 px
  • Chiều cao: 306 px
  • Bán kính góc: 50 px

Bước 4

Nhấp đúp vào lớp hình chữ nhật tròn để hiển thị bảng Layer Styles. 

Trong Blending Options:

  • Opacity: 50%
  • Fill Opacity: 0%

Bước 5

Nhấp vào dấu kiểm bên cạnh Bevel and Emboss và sử dụng các cài đặt sau:

  • Style: Inner Bevel
  • Technique: Smooth
  • Depth: 100%
  • Angle: 90º
  • Altitude: 30º
  • Size: 6 px
  • Soften: 0 px
  • Highlight Mode: Linear Burn (Black)
  • Highlight Opacity: 15%
  • Shadow Mode: Linear Burn (Black)
  • Shadow Opacity: 15%

Bước 6

Nhấp vào dấu kiểm bên cạnh Shadow bên trong và sử dụng các cài đặt sau:

  • Blend Mode: Normal
  • Color: White
  • Opacity: 100%
  • Angle: 90º
  • Distance: 0 px
  • Choke: 25%
  • Size: 5 px

Bước 7

Nhấp vào nút dấu cộng bên cạnh Inner Shadow để thêm một phiên bản khác và sử dụng các cài đặt sau:

  • Blend Mode: Soft Light
  • Color: Black
  • Opacity: 100%
  • Angle: 90º
  • Distance: 0 px
  • Choke: 0%
  • Size: 10 px

Bước 8

Nhấp vào dấu kiểm bên cạnh Inner Glow và sử dụng các cài đặt sau:

  • Blend Mode: Overlay
  • Opacity: 100%
  • Noise: 0%
  • Color: White
  • Technique: Softer
  • Source: Center
  • Size 161 px

Bước 9

Nhấp vào dấu kiểm bên cạnh Lớp phủ Gradient và sử dụng các cài đặt sau:

  • Blend Mode: Normal
  • Opacity: 80%
  • Gradient: #1F9EFF to 67DFD0
  • Style: Linear
  • Angle: 90º

Lớp hình chữ nhật được làm tròn bây giờ sẽ trông giống như hình dưới đây:

Bước 10

Nhấn CMD + J hoặc CTRL + J để nhân đôi lớp hình chữ nhật tròn

Bước 11

Nhấp đúp vào lớp hình chữ nhật tròn được nhân đôi để hiển thị bảng Kiểu lớp. 

Trong Blending Options, thay đổi Opacity thành 100%

Bước 12

Trong phần Gradient Overlay, thay đổi Opacity thành 100%.

Bước 13

Bây giờ nhấp chuột phải vào lớp hình chữ nhật tròn được nhân đôi và chọn Convert to Smart Object.

Bước 14

Di chuyển bản sao được nhân đôi của hình chữ nhật tròn theo thứ tự lớp, sao cho nó ở dưới bản gốc.

Xoay bản sao được nhân đôi 15º và đặt nó ở:

  • X: 121 pixel
  • Y: 58 px

Bước 15

Với hình chữ nhật làm tròn nền được chọn, giữ phím CMD hoặc ALT và nhấp vào lớp hình chữ nhật làm tròn nền trước để thực hiện lựa chọn.

Bước 16

Nhấp vào Add layer mask ở cuối cửa sổ Lớp.

Bước 17

Nhân đôi hình chữ nhật nền để tạo một bản sao khác của nó. Nhấp vào hình thu nhỏ layer mask của layer  mới được nhân đôi trong Layers window.

Nhấn CMD + I hoặc CTRL + I để đảo mask.

Bước 18

Nhấp vào biểu tượng liên kết chuỗi trên cả hai lớp hình chữ nhật bo tròn nền để hủy liên kết các mặt nạ khỏi các lớp đối tượng thông minh.

Bước 19

Chọn lớp hình chữ nhật tròn dưới cùng và sau đó đi tới Filter> Blur> Gaussian Blur …

Nhập các cài đặt này:

  • Radius: 12,5 px

Bây giờ nó sẽ xuất hiện như thể hình chữ nhật làm tròn nền bị mờ khi nó nằm sau lớp hình chữ nhật tròn ban đầu.

Bước 20

Chọn lớp hình dạng vectơ hình chữ nhật bo tròn ban đầu và nhấn CMD + J hoặc CTRL + J để tạo bản sao.

  • Fill Color: Black
  • Opacity: 50%

Di chuyển lớp mới xuống theo thứ tự lớp bên dưới lớp hình chữ nhật bo tròn trên cùng (ban đầu). Nhấn CMD + T hoặc CTRL + T để vào chế độ transform mode.

Thay đổi kích thước và định vị lại lớp mới:

  • Width: 291 px
  • Height: 291 px
  • X: 95 px
  • Y: 154 px

Bước 21

Đi tới Window> Properties và nhấp vào biểu tượng Masks ở góc trên bên trái. Đặt giá trị Feather thành 5,0 px để tạo hiệu ứng bóng mờ.

Bước 22

Với lớp hình chữ nhật làm tròn bóng vẫn được chọn, giữ phím CMD hoặc ALT và nhấp vào lớp hình chữ nhật làm tròn ở nền trước để tạo vùng chọn. Sau đó, nhấp vào Add layer mask ở cuối Layers window.

Nhấn CMD + I hoặc CTRL + I để đảo ngược mask sao cho chỉ hiển thị bên ngoài hay bên dưới hình chữ nhật tròn ban đầu.

Bước 23

Bây giờ chúng ta sẽ tạo một biểu tượng đám mây đơn giản. Sử dụng công cụ Ellipse Tool (U) giữ phím shift để vẽ một vòng tròn phía trên tất cả các lớp khác.

  • Color: White
  • Width: 83 px
  • Height: 83 px
  • X: 123 px
  • Y: 271 px

Bước 24

Lưu ý: trong vài bước tiếp theo, hãy giữ cho công cụ Direct Selection Tool để chúng ta đang tạo một hình dạng vectơ duy nhất, hoặc bạn có thể tạo các lớp riêng biệt, nhưng bạn phải nhóm chúng lại hoặc hợp nhất chúng lại với nhau sau này .

Trên cùng một lớp, nhấn CMD + J hoặc CTRL + J để nhân đôi vectơ hình tròn

  • Width: 83 px
  • Height: 83 px
  • X: 165 px
  • Y: 229 px

Bước 25

Trên cùng một lớp, nhấn CMD + J hoặc CTRL + J để nhân đôi vectơ hình tròn

  • Width: 112 px
  • Height: 112 px
  • X: 206 px
  • Y: 201 px

Bước 26

Trên cùng một lớp, nhấn CMD + J hoặc CTRL + J để nhân đôi vectơ hình tròn

  • Width: 83 px
  • Height: 83 px
  • X: 275 px
  • Y: 271 px

Bước 27

Trên cùng một lớp và sử dụng Rectangle Tool (U), thêm một hình chữ nhật vào hình dạng để hoàn thành biểu tượng đám mây:

  • Width: 152 px
  • Height: 70 px
  • X: 165 px
  • Y: 284 px

Bước 28

Nhấp đúp vào lớp hình dạng vector biểu tượng đám mây để hiển thị bảng điều khiển Layer Styles. 

Trong tùy chọn Blending :

  • Opacity: 100%
  • Fill Opacity: 0%

Bước 29

Nhấp vào dấu kiểm bên cạnh Gradient Overlay và sử dụng các cài đặt sau:

  • Blend Mode: Normal
  • Opacity: 100%
  • Gradient: #FFFFFF (0% Opacity) to #FFFFFF (100% Opacity)
  • Style: Linear
  • Angle: 90º
  • Scale: 100%

Bước 30

Nhấp vào dấu kiểm bên cạnh Drop Shadow và sử dụng các cài đặt sau:

  • Blend Mode: Soft Light
  • Color: Black
  • Opacity: 60%
  • Distance: 0 px
  • Spread: 0 px
  • Size: 1 px

Kết luận

Hy vọng rằng bạn thích làm theo hướng dẫn này và đã học cách tạo biểu tượng đám mây theo kiểu Glassmorphism bằng cách sử dụng các hình dạng đơn giản, layer styles, đối tượng thông minh và bộ lọc trong Photoshop.

Glassmorphism là một biến thể mới của xu hướng giao diện người dùng gần đây Neumorphism, bản thân nó là một biến thể của Skeuomorphism. 

Xem thêm về:

Chia sẻ suy nghĩ, quan điểm của bạn

Leave a reply

Tìm kiếm
Sao Hải Vương
Logo