Cách tạo đường răng cưa trong ai

Nếu bạn yêu Illustrator nhiều giống như tôi, thì hướng dẫn này sẽ là hoàn hảo cho bạn, vì bài này sẽ chỉ cho bạn cách tạo một con tem nhỏ tuyệt vời để vinh danh người bạn đồng hành có thể làm mọi thứ thành vector.

Như bạn có thể đoán, quá trình này sẽ chủ yếu dựa vào các hình dạng đơn giản và một chút can thiệp của Pathfinder, vì vậy mọi thứ thực sự rất đơn giản.

1. Thiết lập tài liệu

Giả sử bạn đã mở Adobe Illustrator, hãy tạo một tài liệu mới với các cài đặt sau:

  • Number of Artboards: 1
  • Width: 800 px
  • Height: 600 px
  • Units: Pixels

Và từ tab Advanced:

  • Color Mode: RGB
  • Raster Effects: Screen
  • Align New Objects to Pixel Grid: đánh dấu
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

2. Phân layer tài liệu

Mặc dù hình minh họa của chúng ta khá đơn giản, nhưng chúng ta vẫn sẽ phân layer nó để chúng ta có thể làm việc theo cách của mình mà không phải lo lắng về việc vô tình di chuyển các chi tiết đây đó.

Vì vậy, hãy chuyển đến bảng Layers và tạo ba layer và đặt tên chúng như sau:

  1. background
  2. stamp
  3. interface
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Quick Tip: vì chúng ta sẽ làm việc trên một layer tại một thời điểm, tôi thường gợi ý các bạn nên khóa các layer hiện không sử dụng để bạn có thể tập trung vào layer mà bạn đang làm việc. Để làm như vậy, chỉ cần nhấp vào ô trống gần biểu tượng View của bảng điều khiển Layers. Khi bạn đã khóa một layer xong, một biểu tượng khóa nhỏ sẽ xuất hiện, cho bạn biết rằng layer đó hiện không khả dụng.

3. Tạo bảng màu

Bây giờ tài liệu của chúng ta đã được thiết lập và xếp layer thích hợp, đã đến lúc tạo bảng màu mà chúng ta sẽ sử dụng trong quá trình thiết kế của chúng ta.

Bước 1

Trước tiên, hãy chắc chắn rằng bạn đang ở trên layer nền, và sau đó tạo ra một hình vuông nhỏ (chỉ một vài pixel trên Artboard) bằng cách sử dụng công cụ Rectangle Tool (M), tô màu #E8E3E3. Nhân đôi đối tượng bằng cách chọn nó và sau đó kéo sang phải trong khi giữ phím Alt. Tô màu #474040.

Như bạn có thể thấy, vào thời điểm này, chúng ta có một màu rất sáng và một màu rất đậm, vì vậy chúng ta cần phải lấp đầy khoảng trống đó. Thay vì sử dụng Color Picker của chúng ta và thử các màu sắc khác nhau, chúng ta sẽ tận dụng chức năng Blend. Với cả hai hình chữ nhật đã chọn, vào Object > Blend > Blend Options.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 2

Khi cửa sổ pop-up Blend Options xuất hiện, hãy thay đổi Spacing là Specified Steps và sửa đổi giá trị ở bên phải là 7.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 3

Bởi vì chúng ta sẽ sử dụng Công cụ Eyedropper Tool (I) để áp dụng các màu sắc trực tiếp cho các đối tượng (thay vì nhập các giá trị hex), chúng ta cần đánh số các ô vuông từ trái sang phải để chúng ta biết giá trị nào cần sử dụng.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
  1. #F7F2F2
  2. #E1DCDC
  3. #CBC5C5
  4. #B5AFAF
  5. #9F9999
  6. #898383
  7. #736D6D
  8. #5D5656
  9. #474040

Mặc dù chúng ta có một bảng màu có chín màu, chúng ta sẽ không sử dụng tất cả các màu sắc đó, vì tôi muốn bạn có một khoảng nhỏ để tạo ra giao diện tổng thể đậm hơn hoặc sáng hơn, bạn sẽ thấy rằng giá trị đậm hơn có thể phù hợp với nhu cầu của bạn , chỉ cần thử và xem nó trông như thế nào.

Quick Tip: như bạn có thể thấy, màu sắc pha trộn mà bạn vừa tạo đã được liên kết theo đường thẳng, vì vậy bạn không thể thực sự nhấp vào một trong các ô vuông mà không chọn tất cả chúng. Bạn có thể thay đổi điều này bằng cách nhấp chuột vào pha trộn màu sắc đó, và sau đó mở rộng nó (Object > Expand).

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

4. Tạo hình dạng con tem

Bước 1

Bây giờ chúng ta đã có các màu sắc của chúng ta, đó là thời gian để bắt đầu sử dụng chúng. Điều đầu tiên chúng ta cần tạo là phần nền để chứa thiết kế. Sử dụng công cụ Rectangle Tool (M), tạo ra một hình dạng 800 x 600 px và tô màu nó bằng cách sử dụng giá trị từ ô vuông số năm.

Để làm như vậy, chỉ cần lấy Công cụ Eyedropper Tool (I), nhấp chuột vào màu sắc đó, và sau đó giữ phím Alt và nhấp chuột vào nền để áp dụng màu sắc cho nó.

Tiếp theo, chúng ta cần chắc chắn hình nền của chúng ta đã được căn chỉnh theo cả chiều dọc và chiều ngang với Artboard của chúng ta. Đây là nơi bảng điều khiển Align sẽ hữu ích. Với đối tượng đã được chọn, hãy sử dụng các chức năng Horizontal Align Center và Vertical Align Center để định vị nó ngay ở giữa.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Quick Tip: nếu bạn thấy rằng các chức năng căn chỉnh không hoạt động, đó có thể là do bạn đã thiết lập Align ToAlign to Selection, thay vì Align to Artboard.

Khi bạn đã căn chỉnh nền xong, đó là lúc khóa layer đó lại và đi đến hình con tem, nơi chúng ta sẽ thực sự bắt đầu làm việc trên hình dạng này của hình minh hoạ nhỏ của chúng ta.

Bước 2

Như tôi đã nói ban đầu, toàn bộ bản vẽ sẽ được xây dựng bằng các hình dạng cơ bản. Để tạo con tem, chúng ta sẽ cần một hình chữ nhật, một vài hình tròn, và tất cả chỉ có vậy.

Đầu tiên, lấy công cụ Rectangle Tool (M) và tạo ra một hình dạng 230 x 280 px, tô màu của ô vuông số hai. Như với nền, sử dụng bảng Align để căn giữa nó theo chiều dọc và chiều ngang.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 3

Tiếp theo, chúng ta cần chọn công cụ Ellipse Tool (L) và tạo ra một hình dạng 30 x 30 px. Vì chúng ta có nhiều đường cắt trên mỗi cạnh của tem (bốn đường trên cùng và dưới cùng, và năm đường ở bên trái và bên phải), do đó chúng ta sẽ nhân đôi hình tròn ban đầu và đặt chúng cách nhau 20 px, đảm bảo mỗi cạnh của hình dạng cơ sở của tem đi chính xác qua trung tâm của hình tròn.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 4

Ngay sau khi bạn đã thiết lập mọi thứ, chỉ cần chọn cả hai hình chữ nhật chính và hình tròn và sử dụng chức năng Minus Front trong Pathfinder để tạo ra các đường cắt.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bây giờ bạn sẽ có một hình như thế này.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 5

Tiếp theo, chúng ta cần thêm đường viền dày hơn để minh họa độ dày. Đơn giản chỉ cần nhân đôi hình dạng đã tạo trước đó (Control-C > Control-F), và sau đó sử dụng chức năng Offset Path (Effect > Path > Offset Path).

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 6

Khi hộp thoại pop-up xuất hiện, hãy thay đổi các giá trị như sau:

  • Offset: 8 px
  • Joins: Miter
  • Miter limit: 4 px
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 7

Ngay khi đường cắt đã tạo xong, mở rộng đối tượng (Object > Expand), thay đổi màu của nó là giá trị của ô vuông số 9, và sau đó đặt nó dưới hình dạng có màu sáng hơn bằng cách sử dụng chức năng Arrange (Arrange > Send to Back).

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Tại thời điểm này hình minh hoạ của chúng ta sẽ trông giống như thế này.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 8

Tiếp theo, chúng ta sẽ thêm một số Soft Highlight cho phần phía trên của tem. Nhân đôi đối tượng màu xám (Control-C) và dán nó vào vị trí (Control-F). Vì chúng ta cần loại bỏ một đối tượng khỏi bản sao của nó, do đó, chúng ta sẽ tạo hai bản sao. Khi bạn đã có chúng, chỉ cần di chuyển phần trên cùng xuống khoảng 4 px, chọn nó và hình bên dưới, và sau đó sử dụng chức năng Minus Front của Pathfinder.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 9

Tô màu nhóm các đối tượng kết quả bằng cách sử dụng giá trị từ ô vuông số một.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

5. Thêm các thanh và nút

Bây giờ chúng ta sẽ chuyển sang layer thứ ba và là layer cuối cùng của chúng ta để bắt đầu thêm giao diện tối giản để hoàn thành hình minh họa của chúng ta.

Bước 1

Như chúng ta bố cục xong hình dạng cơ bản của con tem, bây giờ chúng ta sẽ tập trung vào việc tạo ra phần trung tâm, đó là giao diện. Hãy chắc chắn rằng bạn đã khóa hai layer đầu tiên, và sau đó, sử dụng công cụ Rectangle Tool (M), tạo một đối tượng 160 x 210 px và căn chỉnh nó theo chiều dọc và chiều ngang với Artboard bằng cách sử dụng bảng Align. Thay đổi màu của nó bằng cách sử dụng giá trị từ ô vuông số ba.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 2

Tiếp theo, nhân đôi đối tượng đã tạo trước đó, thay đổi màu của nó thành giá trị của ô vuông số chín, sau đó lật màu tô của nó với nét viền của nó (Shift-X). Điều chỉnh Stroke Weight với giá trị dày hơn là 8 px, và sau đó mở rộng hình dạng này (Object > Expand).

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bạn có thể sẽ nhận thấy rằng hình dạng sáng hơn đi xuống dưới đường viền khoảng 4 px, nhưng đó chỉ đơn giản là để đảm bảo rằng không có khoảng trống giữa hai hình đã được hình thành.

Bước 3

Bây giờ chúng ta có nền của giao diện và đường viền để đóng khung với phần còn lại của tem, chúng ta cần tạo thanh trên cùng và thanh bên trái.

Sử dụng công cụ Rectangle Tool (M) yêu thích của chúng ta, tạo ra một đối tượng 152 x 22 px, và đặt nó ngay bên dưới phần trên cùng của khung hình của chúng ta.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Thay đổi màu của nó với màu đậm hơn (ô vuông số bốn) để phân biệt nó với phần còn lại của các yếu tố đó.

Bước 4

Đối với thanh bên, trước tiên hãy tạo hình chữ nhật có kích thước 18 x 180 px và căn trái hình chữ nhật đó với hình dạng đã tạo trước đó, đảm bảo rằng hai chi tiết này chạm vào phía trên cùng. Sau đó, tạo một hình chữ nhật nhỏ hơn 18 x 92 px, tô màu nó bằng cách sử dụng giá trị từ ô vuông số năm, và sau đó căn dưới và căn trái nó với hình dạng lớn hơn.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 5

Bây giờ chúng ta cần thêm một số định giới cho hai phần của giao diện. Để làm như vậy, đầu tiên chúng ta sẽ tạo ra một hình dạng 152 x 4 px, tô màu với ô vuông số chín, và đặt nó ngay phía dướicủa thanh trên cùng của chúng ta.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 6

Đối với thanh bên, chúng ta cần tạo đối tượng 4 x 177 px, sử dụng cùng màu như trước và đặt nó ở phía dưới cùng bên phải của bảng điều khiển giao diện bên trái của chúng ta.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 7

Như bạn có thể thấy chúng ta chỉ cần thêm một đường phân cách ngang, vì vậy hãy sử dụng công cụ Rectangle Tool (M), tạo một phân đoạn nhỏ hơn 18 x 4 px, đặt ngay phía trên phần dưới cùng có màu đậm hơn của thanh bên trái của chúng ta.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 8

Khi chúng ta đã tách hai phần của giao diện của mình, chúng ta cần thêm các nút trên cùng bên phải. Sử dụng công cụ Ellipse Tool tạo ra một hình tròn 10 x 10 px, lật màu tô của nó với nét viền của nó, và sau đó thay đổi độ dày là 4 px.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 9

Mở rộng và sau đó nhân đôi nút để cuối cùng bạn có ba nút. Tiếp theo, sắp xếp theo chiều ngang cách nhau 2 px, đặt chúng trên thanh trên cùng, cách 6 px từ phía bên phải.

Quick Tip: bạn có thể sử dụng Pixel Preview (View > Pixel Preview or Alt-Control-Y) để có chế độ xem tốt hơn về lưới pixel. Xin lưu ý rằng tôi đang sử dụng lưới tùy chỉnh với Gridlines every 1 px và một phân mục. Bạn có thể điều chỉnh phiên bản Illustrator của mình theo các giá trị này bằng cách vào Edit > Preferences > Guides and Grids.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 10

Bây giờ chúng ta hãy thêm một số nút vào thanh bên. Sử dụng Công cụ Rounded Rectangle Tool vẽ một hình dạng 10 x 10 px, với bán kính góc là 1 px. Sử dụng cùng một qui trình lật màu tô với một nét viền 4 px, mở rộng hình dạng này, tô màu nó với màu ô vuông số chín và đặt nó trên thanh bên cách 16 px từ phần trên cùng của nó. Tạo một bản sao và đặt cách 8 px so với hình dạng ban đầu.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 11

Khi chúng ta đã có các nút, đã đến lúc thêm một tập hợp các Soft Highlight khác và một Shadow tinh tế.

Đối với các Highlight, tạo hai hình chữ nhật 152 x 2 px, tô màu chúng với màu của ô vuông số hai và định vị chúng như sau.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 12

Đảm bảo Highlight thứ hai đã được đặt trong phần phân cách của thanh bên, bằng cách nhấp chuột phải vào đối tượng và sử dụng chức năng Arrange > Send to Back.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 13

Chỉ cần thêm một Highlight nữa, dưới khung chứa chính giao diện đó. So với hai Highlight trước mà chúng ta tạo ra, Highlight này sẽ dày hơn một chút, có chiều rộng 168 px và chiều cao là 4 px, và nó cũng sẽ có màu sáng hơn vì nó sẽ sử dụng màu từ ô vuông số một.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 14

Đối với Shadow, chỉ cần tạo một hình chữ nhật 18 x 2 px bằng công cụ Rectangle Tool (M), tô màu nó với màu ô vuông số sáu, và sau đó đặt nó chính xác ở dưới cùng của phần phân cách ngang của thanh bên.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Như bạn có thể thấy, hình minh hoạ của chúng ta gần như đã hoàn tất, tất cả những gì chúng ta cần thêm bây giờ là hình tròn ở giữa với bốn điểm neo của nó.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

6. Thêm hình tròn

Bước 1

Sử dụng công cụ Ellipse Tool (L) tạo ra một hình tròn 100 x 100 px, đặt nó ở giữa hình chữ nhật có khoảng trống mà chúng ta có ở góc dưới bên phải của giao diện của chúng ta, và sử dụng ô vuông số chín để tô màu cho nó.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 2

Một lần nữa, chúng ta sẽ lặp lại quá trình đảo ngược màu tô với nét viền (Shift-X), và thay đổi độ dày cuối cùng là 8 px.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Quick Tip: Bạn có thể mở rộng hình dạng ngay bây giờ hoặc trước tiên để bạn có thể tận dụng các điểm neo của nó để định vị các yếu tố tiếp theo và mở rộng nó sau khi bạn đã tạo xong chúng. Đó là tuỳ thuộc ở bạn.

Bước 3

Bây giờ, để tạo ra các điểm neo hình vuông minh họa của hình tròn, chúng ta cần vẽ một hình dạng 14 x 14 px, tô màu nó là màu của ô vuông số ba, nhưng nhập giá trị hex thủ công (#474040 — ô vuông số chín) cho nét viền của nó. Bạn có thể tự hỏi tại sao chúng ta cần cả hai màu tô và nét viền cho những yếu tố này. Vâng, câu trả lời là để che đậy một số chỗ của hình tròn, để chúng ta sẽ không phải cắt bỏ nó.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 4

Khi chúng ta đã tạo điểm neo đầu tiên, chỉ cần nhân đôi nó cho đến khi bạn có tổng cộng ba bản sao, và sau đó đặt hai hình còn lại ở bên trái và bên phải sao cho ngay ngắn với chiều rộng của hình tròn.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 5

Đối với điểm neo dưới cùng, là điểm neo có hai tay xoay, trước tiên chúng ta cần sao chép đối tượng trên cùng mà chúng ta vừa tạo ra, di chuyển nó xuống dưới, hoán đổi màu tô với nét viền của nó, và cuối cùng loại bỏ hoàn toàn nét viền đó.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 6

Tiếp theo, tạo một hình chữ nhật có kích thước 90 x 6 px và căn giữa nó theo chiều dọc và chiều ngang với hình vuông phía dưới. Sử dụng Công cụ Ellipse Tool (L), tạo một bộ gồm hai đối tượng 12 x 12 px, và đặt từng đối tượng ở cuối thanh ngang mà chúng ta vừa tạo.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 7

Khi chúng ta đã tạo xong điểm neo dưới cùng với hai tay xoay, chúng ta cần thêm vào hình minh họa của chúng ta là một hình phản chiếu nhẹ. Để làm như vậy, tải công cụ Rectangle Tool (M) và tạo ra một hình dạng 160 x 24 px. Tô màu nó bằng cách sử dụng ô vuông số một và sử dụng chức năng Transform, xoay nó một góc 30° (nhấp chuột phải > Transform > Rotate).

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 8

Sau khi bạn xoay đối tượng, giảm Opacity xuống khoảng 50% và thay đổi Blending ModeSoft Light.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 9

Để đặt hình phản chiếu, hãy sử dụng bảng Transform để nhập các tọa độ sau:

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Bước 10

Như bạn có thể thấy, hình phản chiếu thực sự nằm ngoài con tem của chúng ta, vậy có nghĩa là chúng ta cần tạo một Clipping Mask để chỉ hiển thị một phần cụ thể của nó. Để làm điều đó, chỉ cần sao chép nền của giao diện (Control-C), dán nó lên trên (Control-F) và với cả hình nền và hình phản chiếuđã chọn, nhấp chuột phải > Make Clipping Mask.

Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai
Cách tạo đường răng cưa trong ai

Thế là bạn đã xong!

Bây giờ bạn sẽ có một con tem tuyệt vời mà bạn có thể sử dụng cho kỹ thuật số, hoặc thậm chí in ấn (nếu bạn không ngại một chút thay đổi màu sắc do chuyển đổi RGB sang CMYK) để bạn có thể đưa nó cho một trong những người bạn thiết kế của mình.