Photoshop Online Tạo Gradient Liên hệ
Quảng cáo

Hướng Dẫn Chi Tiết: Cách Tạo Gradient Không Gian (Space Gradient) Tuyệt Đẹp Trong Figma

Bạn có muốn thêm chút chiều sâu huyền bí, tương lai vào các thiết kế UI hoặc minh họa của mình không? Hôm nay, tôi sẽ hướng dẫn các bạn quy trình từng bước để tạo ra hiệu ứng Space Gradient (Gradient không gian) lung linh, mang phong cách "vũ trụ" ngay trong Figma mà không cần dùng đến các phần mềm đồ họa phức tạp khác.

Kỹ thuật này chủ yếu dựa trên việc chồng các lớp hình dạng khác nhau, kết hợp với các kiểu gradient và hiệu ứng làm mờ (blur). Chúng ta hãy cùng bắt đầu nhé!

design.webp

Yêu cầu sơ bộ:​

  • Bạn cần có tài khoản Figma (miễn phí hoặc trả phí).
  • Kiến thức cơ bản về giao diện Figma.

Bước 1: Vẽ Hình Dạng Cơ Bản Bằng Pen Tool​

Để tạo cảm giác tự nhiên và bất quy tắc của một đám mây tinh vân hoặc luồng sáng, chúng ta sẽ không dùng hình tròn hoàn hảo.
  1. Chọn công cụ Pen tool (phím tắt P) trên thanh công cụ phía trên.
  2. Vẽ một hình dạng khép kín có đường cong mềm mại, gần giống một hình tròn nhưng hơi méo mó một chút.
Mẹo: Bạn có thể điều chỉnh các điểm neo (vector points) sau khi vẽ xong để đạt được hình dạng ưng ý.

1.webp

Bước 2: Tô Màu Bằng Linear Gradient​

Bây giờ là lúc thêm màu sắc đầu tiên cho luồng sáng của chúng ta.
  1. Chọn hình dạng bạn vừa vẽ.
  2. Trong bảng Fill ở thanh bên phải, chuyển kiểu tô màu từ Solid sang Linear gradient.
  3. Tạo một gradient chuyển từ màu bão hòa trung bình (ví dụ: tím bão hòa trung bình) sang màu trắng (hoặc trong suốt tùy ý).
Lưu ý quan trọng: Hãy sử dụng các màu bão hòa trung bình (middle saturated colors) ở bước này để tạo nền tảng màu sắc mềm mại, không bị quá gắt.

2.webp


Bước 3: Thêm Hiệu Ứng Layer Blur​

Để biến hình dạng cứng nhắc thành một luồng sáng mềm mại, chúng ta cần hiệu ứng làm mờ.
  1. Vẫn chọn hình dạng đó, điều hướng đến bảng Effects ở thanh bên phải.
  2. Nhấn dấu + và chọn hiệu ứng Layer blur.
  3. Nhấp vào biểu tượng hiệu ứng (hình mặt trời) và nhập một giá trị B (Blur) đủ cao để làm mờ hoàn toàn các cạnh sắc nhọn của hình dạng.
3.webp


Bước 4: Nhân Bản Và Tạo Điểm Nhấn Màu Trắng (Highlight)​

Để tạo chiều sâu và độ sáng rực cho trung tâm luồng sáng, chúng ta sẽ thêm một lớp highlight.
  1. Nhân bản hình dạng mờ hiện tại của bạn (Ctrl+D hoặc Cmd+D).
  2. Trong bảng Fill của hình dạng mới (nằm trên cùng), hãy thay đổi gradient. Thay thế màu tím bão hòa bằng màu trắng (hoặc một màu rất nhạt gần trắng).
  3. Đặt nó lên trên hình dạng ban đầu. Việc này sẽ tạo ra một điểm nhấn màu trắng sáng ở trung tâm.

4.webp

Bước 5: Thêm Chiều Sâu Với Lớp Nền Phía Sau​

Chúng ta cần mở rộng đám mây màu sắc ra xa hơn để tạo cảm giác không gian bao la.
  1. Nhân bản hình dạng ban đầu (hình màu tím) một lần nữa.
  2. Làm cho hình dạng mới này lớn hơn hình dạng ban đầu đáng kể.
  3. Trong bảng Fill, thay đổi gradient sang một màu bão hòa khác (ví dụ: xanh dương đậm) để tạo sự đa dạng màu sắc cho đám mây.
  4. Đặt nó ra sau hai hình dạng trước đó.
5.webp

Bước 6: Tăng Hiệu Ứng Làm Mờ Để Tạo Không Khí (Ambience)​

Để đám mây màu xanh vừa tạo lan tỏa mềm mại hơn nữa vào không gian đen, chúng ta cần tăng độ mờ.
  1. Chọn hình dạng lớn nhất (màu xanh dương nằm sau cùng).
  2. Nhân bản nó thêm một lần nữa và làm cho nó lớn hơn.
  3. Vào bảng Effects, tăng giá trị Layer blur của hình dạng lớn nhất này lên rất cao. Điều này tạo ra một lớp "không khí" màu sắc bao quanh cốt lõi luồng sáng.
6.webp


Bước 7: Vẽ Các Hình Dạng Bổ Sung Và Sử Dụng Radial Gradient​

Để tạo các chi tiết phức tạp hơn, như các nhánh sáng hoặc các phần cốt lõi rực rỡ nhỏ hơn, chúng ta sẽ dùng một kỹ thuật khác.
  1. Dùng Pen tool vẽ thêm một số hình dạng vector bổ sung, có thể phức tạp hoặc góc cạnh hơn một chút tùy ý.
  2. Trong bảng Fill, chuyển kiểu tô màu sang Radial gradient.
  3. Đặt chúng lên trên tất cả các hình dạng đã tạo và thêm hiệu ứng blur (độ mờ) cho chúng. radial gradient giúp tạo ra các điểm sáng tập trung rực rỡ.
7.webp

Bước Final: Chúc Vui Vẻ & Tinh Chỉnh!​

Bạn đã tạo xong cốt lõi của Space Gradient! Giờ là lúc để sự sáng tạo của bạn bay xa.
  1. Chơi đùa với độ mờ (Opacity): Chọn từng lớp và điều chỉnh độ mờ của nó để đạt được sự cân bằng màu sắc hoàn hảo.
  2. Chỉnh sửa các hình dạng: Bạn có thể vào lại chế độ Vector của bất kỳ hình dạng nào và di chuyển các điểm neo để thay đổi luồng sáng.
  3. Thêm sao: Thêm một số hình ellipse nhỏ, màu trắng, với độ mờ và kích thước khác nhau để mô phỏng các ngôi sao xa xôi trong không gian.

8.webp


Hy vọng hướng dẫn này hữu ích cho bạn trong việc tạo ra những thiết kế đầy mê hoặc. Đừng ngần ngại chia sẻ tác phẩm của bạn và tag tôi nếu bạn đăng nó lên mạng xã hội nhé! Chúc các bạn thiết kế vui vẻ!
 

Đính kèm

  • 0.webp
    0.webp
    106 KB · Lượt xem: 0
Thẻ Thẻ
figma tutorial
Back
Bên trên