Tạo minh họa Isometric - Hướng dẫn đơn giản với kỹ thuật hình học

Member · 29/7/18

Nếu bạn là một Designer hoặc một Illustrator, có thể ít hoặc nhiều thời gian bạn đang làm với các hình minh họa. Các hình minh họa không chỉ làm cho thiết kế của sản phẩm mang tính thẩm mỹ mà còn giúp người dùng hiểu rõ hơn về chức năng và hành vi của sản phẩm.

Trong thế giới của Minh họa, có rất nhiều phong cách khác nhau và chúng vẫn đang tiếp tục phát triển. Minh họa mang phong cách Isometric là một trong những xu hướng mới đang được ưa thích nhất trong những năm gần đây.

Lưới Isometric truyền thống

Bắt đầu

Bài viết này dành cho những người mới làm quen và cần có kiến thức cơ bản về Adobe Photoshop.

Kỹ thuật hình học

Plane là một bề mặt có hai chiều có thể mở rộng đến vô cùng.

Minh họa Isometric được tạo ra bằng cách sử dụng hình học 3D có 3 cấu trúc Plane riêng biệt.

XY Plane - Object của bạn sẽ nằm trong mặt phẳng X và Y. Kích thước của đối tượng được điều chỉnh trong mặt trục X và Y Plane trong khi chiều sâu, độ cao hoặc khoảng cách thay đổi trong mặt phẳng Z.

Bề mặt XY trong hình học 3D

YZ Plane - Object nằm trong mặt phẳng Y và Z. Kích thước của vật thể được điều khiển trong trục Y và Z Plane trong khi chiều sâu, độ cao hoặc khoảng cách thay đổi trong mặt phẳng X.

Bề mặt YZ trong hình học 3D

ZX Plane - Object nằm trong mặt phẳng Z và X. Kích thước của đối tượng được điều khiển trong trục Z và X trong khi chiều sâu, độ cao hoặc khoảng cách thay đổi trong mặt phẳng Y.

Bề mặt ZX trong hình học 3D

Các bước để tạo một đối tượng Isometric trong bề mặt XY

Mở Photoshop và tạo một tài liệu mới.
Tạo một hình vuông có cạnh rộng ≈ 400px bằng cách sử dụng Rectangle Shape Tool ( U )

Chọn hình vuông bằng cách sử dụng Move Tool ( V ) và thiết lập Height là 90% từ thanh Option.

Chọn hình vuông bằng cách sử dụng Move Tool ( V ) và thiết lập Horizontal Skew là -30 degrees từ thanh Option.

Bây giờ Rotation Angle là +30 degrees từ thanh Option sẽ tạo ra một hình vuông nằm trên bề mặt XY.

Hãy xem lại các hình học mà bạn đã tạo ra.

Bây giờ chiều sâu của hình vuông có thể được tạo ra trong mặt phẳng Z bằng cách sao chép layer hình vuông bằng cách bấm phím tắt "Alt + Phím mủi tên đi xuống" nhiều lần (khoảng 75 lần). Kết quả sẽ giống như hình bên dưới.

Bây giờ bạn có thể sử dụng Clipping Masks để thêm các màu sắc khác nhau cho hình học và kết quả cuối cùng sẽ trông giống như hình bên dưới.

Bây giờ, hãy tạo một đối tượng Isometric trong bề mặt XZ

Tạo một Photoshop Document mới.
Tạo một hình vuông có cạnh rộng ≈400px bằng cách sử dụng Rectangle Shape Tool ( U )

Chọn hình vuông bằng cách sử dụng Move Tool (V) và thiết lập các Rotation Angle là -45 degrees từ thanh Option.

Bây giờ đặt Height thành 56% từ thanh Option.

Bây giờ đặt Rotation Angle thành +60 degrees từ thanh Option sẽ tạo ra một hình vuông nằm trên bề mặt XZ.

Bây giờ chiều sâu của hình vuông có thể được tạo ra trong mặt phẳng Y bằng cách nhân bản cùng một layer hình vuông với phím tắt "Alt + Phím mủi tên trái" và "Alt + Phím mủi tên phải" nhiều lần ( khoảng 75 lần). Kết quả sẽ giống như hình bên dưới -

Hãy biên dịch tất cả các bước này và xem tất cả cùng nhau một lần.

Bây giờ bạn có thể sử dụng Clipping Masks để thêm các màu sắc khác nhau cho các mặt phẳng và hình ảnh cuối cùng sẽ trông giống như hình bên dưới.

Cuối cùng nhưng không kém phần quan trọng, hãy tạo một đối tượng Isometric trong bề mặt YZ

Tạo một Photoshop Document mới.
Tạo một hình vuông có cạnh rộng ≈400px bằng cách sử dụng Rectangle Shape Tool ( U )

Chọn hình vuông bằng cách sử dụng Move Tool ( V ) và thiết lập các Rotation Angle là 45 degrees từ thanh Option.

Bây giờ đặt Height thành 56%.

Bây giờ đặt Rotation Angle thành -60 degrees.

Bây giờ chiều sâu của hình vuông có thể được tạo ra trong mặt phẳng X bằng cách nhân bản cùng một layer hình vuông với các phím tắt "Alt + Phím mủi tên di chuyển lên" và "Alt + Phím mủi tên di chuyển qua trái" lặp lại khoảng (≈75 lần). Kết quả sẽ giống như được vẽ bên dưới -