Cách tạo bộ biểu tượng theo chủ đề DJ trong Adobe Illustrator

Vietnamese (Tiếng Việt) translation by Thai An (you can also view the original English article)

Final product image — What You'll Be Creating

Trong hôm nay, hướng dẫn của chúng tôi, chúng tôi sẽ tiếp tục phát triển bằng cách tạo ra một bộ biểu tượng DJ nhỏ, mà tôi nghĩ rằng đó sẽ là một sự thay đổi tốt đẹp từ các chủ đề mà chúng tôi đã đề cập gần đây.

Chúng tôi sẽ chủ yếu dựa vào các công cụ mà chúng ta thường sử dụng hàng ngày, do đó, chúng tôi sẽ sử dụng Công cụ Hình chữ nhật và Hình elip rất nhiều, vì hầu hết các biểu tượng được tạo thành từ các hình dạng hình học cơ bản.

Vì vậy, không lãng phí thêm thời gian, hãy để nhóm bắt đầu bữa tiệc.

Ngoài ra, bạn luôn có thể mở rộng gói bằng cách kiểm tra Envato Market, nơi bạn sẽ tìm thấy hàng tấn biểu tượng lấy cảm hứng từ DJ sẵn sàng để được chọn.

1. Cách thiết lập tài liệu mới

Giả sử bạn đã có Illustrator và đang chạy, hãy để khởi động dự án bằng cách vào File> New (hoặc Control-N) và thiết lập tài liệu của chúng tôi như sau:

Số lượng Artboards: 1
Chiều rộng: 800 px
Chiều cao: 600 px
Đơn vị: Pixels

Và từ tab Nâng cao:

Chế độ màu: RGB
Hiệu ứng raster: Màn hình (72ppi)
Căn chỉnh các đối tượng mới vào lưới Pixel: đã chọn

2. Cách thiết lập lưới tùy chỉnh

Vì chúng tôi sẽ tạo các biểu tượng bằng cách sử dụng luồng công việc hoàn hảo pixel, nên chúng tôi sẽ muốn thiết lập một Lưới tùy chỉnh nhỏ xinh để chúng tôi có thể kiểm soát hoàn toàn các hình dạng của mình.

Bước 1

Chuyển đến menu con Chỉnh sửa> Tùy chọn> Hướng dẫn & Lưới và điều chỉnh các cài đặt sau:

Đường lưới mỗi: 1 px
Phân khu: 1

Mẹo nhanh: bạn có thể tìm hiểu thêm về lưới bằng cách đọc phần chuyên sâu này về cách hoạt động của Illustrator Lưới Grid System.

Bước 2

Khi chúng tôi đã thiết lập lưới tùy chỉnh của mình, tất cả những gì chúng tôi cần làm để đảm bảo hình dạng của chúng trông rõ nét là bật tùy chọn Snap to Grid được tìm thấy trong menu View, sẽ chuyển thành Snap thành Pixel mỗi khi bạn vào Pixel Preview chế độ.

Bây giờ, nếu bạn mới làm quen với toàn bộ quy trình làm việc hoàn hảo pixel, thì tôi khuyên bạn nên tìm hiểu cách tạo hướng dẫn tác phẩm nghệ thuật hoàn hảo pixel, giúp bạn mở rộng các kỹ năng kỹ thuật của mình ngay lập tức.

3. Cách thiết lập các lớp

Với Tài liệu mới được tạo, sẽ là một ý tưởng tốt khi cấu trúc dự án của chúng tôi bằng cách sử dụng một vài lớp, vì cách này chúng tôi có thể duy trì quy trình làm việc ổn định bằng cách tập trung vào một biểu tượng mỗi lần.

Điều đó đang được nói, đưa lên bảng điều khiển Lớp và tạo tổng cộng bốn lớp, chúng tôi sẽ đổi tên như sau:

lớp 1: lưới tham chiếu
lớp 2: cdj
lớp 3: tai nghe
lớp 4: mpc

4. Cách tạo lưới tham chiếu

Các lưới tham chiếu (hoặc lưới cơ sở) là một tập hợp các bề mặt tham chiếu được phân tách chính xác, cho phép chúng ta xây dựng các biểu tượng của mình bằng cách tập trung vào kích thước và tính nhất quán.

Thông thường, kích thước của các lưới xác định kích thước của các biểu tượng thực tế và chúng phải luôn là quyết định đầu tiên bạn đưa ra khi bắt đầu một dự án mới, vì bạn sẽ luôn muốn bắt đầu từ kích thước nhỏ nhất có thể và dựa vào đó.

Bây giờ, trong trường hợp của chúng tôi, chúng tôi sẽ tạo ra gói biểu tượng chỉ bằng một kích thước, chính xác hơn là 128 x 128 px, một kích thước khá lớn.

Bước 1

Bắt đầu bằng cách khóa tất cả trừ lớp lưới tham chiếu, sau đó lấy Công cụ hình chữ nhật (M) và tạo một hình vuông 128 x 128 px màu cam (# F15A24), sẽ giúp xác định kích thước tổng thể của các biểu tượng của chúng tôi.

creating the main shape for the reference grid

Bước 2

Thêm một 120 x 120 px nhỏ hơn (#FFFFFF) sẽ đóng vai trò là khu vực vẽ hoạt động của chúng tôi, do đó cung cấp cho chúng tôi phần đệm 4 px toàn diện.

creating the main shape for the active drawing area

Bước 3

Nhóm hai hình vuông tạo lưới tham chiếu bằng phím tắt Control-G, sau đó tạo hai bản sao ở khoảng cách 40 px với nhau, đảm bảo căn chỉnh chúng vào trung tâm của Artboard.

Khi bạn đã hoàn tất, hãy khóa lớp hiện tại và chuyển sang lớp tiếp theo nơi chúng tôi sẽ bắt đầu làm việc với biểu tượng đầu tiên của mình.

creating and positioning all three reference grids

5. Cách tạo CDJ

Chúng tôi sẽ khởi động dự án bằng cách tạo CDJ, đây là một công cụ thiết yếu mà hầu hết các DJ sử dụng, vì vậy hãy chắc chắn rằng bạn đang ở đúng lớp (đó sẽ là lớp thứ hai) và sau đó phóng to tham chiếu đầu tiên lưới và hãy bắt đầu.

Bước 1

Tạo hình dạng chính của thân thiết bị, sử dụng hình chữ nhật 96 x 108 px mà chúng ta sẽ tô màu bằng cách sử dụng # BFB6B6, sau đó đặt vào phần dưới của lưới bên dưới, để lại một khoảng trống 4 px cho đường viền.

creating and positioning the main shape for the cdjs body

Bước 2

Đưa ra hình dạng mà chúng tôi vừa tạo ra một phác thảo bằng phương pháp Đường dẫn bù bằng cách chọn nó và sau đó đi đến Object> Đường dẫn> Đường dẫn offset và nhập 4 px vào trường giá trị Offset.

Bước 3

Thay đổi màu tô của phác thảo mà chúng tôi đã tạo thành # 494343 để nó nổi bật so với hình dạng điền.

adjusting the color of the cdjs main outline

Bước 4

Tạo phần trên của CDJ bằng cách thêm hình chữ nhật 96 x 36 px (# 787171) vào mặt trên của nó, căn chỉnh nó với cạnh của hình dạng điền bên dưới.

adding the darker section to the cdjs upper body

Bước 5

Tách phần trên của thiết bị khỏi phần dưới cùng của nó bằng cách thêm hình chữ nhật 96 x 4 px ngay bên dưới thiết bị, tô màu bằng cách sử dụng # 494343.

adding the horizontal divider to the upper section of the cdjs body

Bước 6

Sử dụng Công cụ hình chữ nhật (M), tạo một hình dạng 80 x 4 px mà chúng ta sẽ tô màu bằng cách sử dụng # 494343 và sau đó đặt vào giữa không gian trống được tạo bởi phác thảo của thiết bị và cạnh trên của vùng vẽ.

creating and positioning the outline section onto the top of the cdjs body

Bước 7

Thêm một hình chữ nhật 40 x 4 px (# 494343) bên dưới phần trên cùng của đường phân chia ngang ngang dọc, đảm bảo căn giữa hình dạng nhỏ hơn với hình lớn hơn bằng cách sử dụng tùy chọn Align panel Align Center Align Center.

creating and positioning the top insertion onto the cdjs body

Bước 8

Với Công cụ hình chữ nhật (M) vẫn được chọn, hãy thêm hình chữ nhật 32 x 4 px nhỏ hơn (# 494343) vào dưới cùng của thiết bị, căn giữa nó vào hình dạng bên dưới.

Khi bạn đã thêm nó, hãy chọn tất cả các hình dạng mà chúng tôi đã xây dựng cho đến nay và nhóm chúng bằng phím tắt Control-G.

creating and positioning the bottom insertion onto the cdjs body

Bước 9

Vì chúng tôi đã thực hiện khá nhiều công việc trên cơ thể CDJ, giờ đây chúng tôi có thể tập trung vào việc thêm chi tiết vào nó. Chúng ta sẽ bắt đầu bằng cách tạo màn hình nhỏ bằng hình chữ nhật 40 x 20 px (# 615A5A) với viền ngoài dày 4 px (# 494343) mà chúng ta sẽ nhóm (Control-G) và sau đó đặt ở giữa phần trên của thiết bị .

creating and positioning the cdjs display

Bước 10

Sử dụng Công cụ hình chữ nhật (M) tạo ra các sóng âm thanh nhỏ bằng cách sử dụng tám hình chữ nhật cao 2 x 16 px (# F97762) đặt 2 px với nhau, chúng tôi sẽ nhóm (Control-G) và đặt vào màn hình, để lại 2 px khoảng cách từ cạnh trái của nó.

creating and positioning the main shapes for the cdjs sound bars

Bước 11

Nhấp đúp chuột vào các sóng âm thanh mà chúng tôi vừa tạo để cô lập chúng, sau đó điều chỉnh một số Độ cao của chúng như sau:

thanh thứ nhất: 12 px
thanh thứ hai: 16 px
thanh thứ ba: 12 px
thanh thứ tư: 8 px
thanh thứ năm: 4 px
thanh thứ sáu: 12 px
thanh thứ bảy: 8 px
thanh thứ tám: 12 px

Khi bạn đã hoàn tất, donith quên thoát khỏi Chế độ cách ly bằng cách nhấn Escape.

adjusting the height of the cdjs sound bars

Bước 12

Sử dụng Công cụ hình chữ nhật (M) tạo hai hình vuông 4 x 4 px (# 494343) mà chúng ta sẽ xếp chồng theo chiều dọc ở khoảng cách 4 px với nhau, đặt chúng vào giữa không gian trống được tạo bởi sóng âm và cạnh phải của màn hình.

creating and positioning the main shapes for the cdjs digital up and down buttons

Bước 13

Biến hai hình vuông thành một mũi tên của Up lên và một mũi tên xuống bằng cách thêm một Điểm neo mới về phía trên cùng của đầu tiên và dưới cùng của cái thứ hai, sử dụng Công cụ Thêm điểm neo (+) và loại bỏ các góc sau đó bằng cách sử dụng Xóa Neo Công cụ điểm (-).

Khi bạn đã hoàn tất, hãy nhóm chúng (Control-G) và sau đó thực hiện tương tự cho tất cả các hình dạng soạn thảo hiển thị.

turning the two arrows into the cdjs up and down arrow buttons

Bước 14

Khi chúng tôi hoàn thành công việc trên màn hình, chúng tôi có thể tạo nút đầu tiên bằng hình chữ nhật 4 x 2 px (# F9AE7A), với đường viền dày 4 px (# 494343) mà chúng tôi sẽ nhóm (Control-G) và đặt vào vị trí góc trên bên trái của thiết bị, ở khoảng cách 6 px từ cạnh trái của nó và 4 px từ góc trên cùng của thiết bị.

creating and positioning the main shapes for the cdjs top-left button

Bước 15

Sử dụng Công cụ Ellipse (L), tạo một vòng tròn 4 x 4 px (# E8DĐD) với đường viền 4 px (# 494343) mà chúng ta sẽ chuyển thành quay số bằng cách thêm hình chữ nhật 4 x 2 px trên nửa trên của nó. Khi bạn đã hoàn tất, hãy chọn và nhóm (Control-G) tất cả các hình dạng soạn thảo Quay số, định vị nó bên dưới nút mà chúng tôi vừa tạo, ở khoảng cách 6 px.

creating and positioning the main shapes for the cdjs top left dial

Bước 16

Di chuyển sang bên phải của thiết bị và tạo hai vòng tròn 6 x 6 px (# 494343) đặt 4 px với nhau, chúng ta sẽ nhóm (Control-G) và sau đó đặt vào giữa không gian trống được tạo bởi màn hình và cạnh phải của phần trên.

creating and positioning the main shapes for the cdjs top right buttons

Bước 17

Tạo mặt số bên phải bằng vòng tròn 8 x 8 px lớn hơn (# E8DĐD) với đường viền 4 px (# 494343) mà chúng tôi sẽ nhóm (Control-G) và sau đó căn chỉnh theo cạnh dưới của viền ngoài màn hình, đảm bảo Trung tâm ngang Căn chỉnh nó với các nút mà chúng ta đã tạo ở bước trước.

creating and positioning the main shapes for the cdjs top right dial

Bước 18

Lấy một bản sao (Control-C> Control-F) của mặt số mà chúng ta vừa tạo và đặt nó vào góc trên bên trái của phần dưới của thiết bị, để bạn kết thúc với khoảng cách 4 px so với mặt số của nó bên trái và trên cùng.

Khi bạn đã khóa nó tại chỗ, hãy xoay nó ở góc 90 (nhấp chuột phải> Biến đổi> Xoay> 90), để nó giành chiến thắng cuối cùng trông giống hệt với bản gốc.

creating and positioning the main shapes for the cdjs bottom left dial

Bước 19

Bắt đầu làm việc trên bánh xe chạy bộ trung tâm bằng cách tạo vòng tròn 44 x 44 px (# 615A5A) với đường viền dày 4 px (# 494343) mà chúng tôi sẽ nhóm (Control-G) và sau đó đặt ở giữa thân dưới của thiết bị .

creating and positioning the main shapes for the cdjs scratch jog wheel

Bước 20

Tạo phần trước của bánh xe bằng vòng tròn 28 x 28 px (# 9B9494) với đường viền dày 4 px (# 494343) mà chúng ta sẽ nhóm (Control-G) và vị trí trên đầu của đế mà chúng ta đã tạo trước đó bậc thang.

creating and positioning the main shapes for the cdjs scratch jog wheels front

Bước 21

Thêm một vòng tròn 4 x 4 px (# 494343) về phía góc dưới bên phải của bánh xe trước, sau đó chọn và nhóm tất cả các hình dạng sáng tác của nó lại với nhau bằng phím tắt bàn phím Control-G.

Bước 22

Sử dụng Công cụ Ellipse (L) tạo ra một vòng tròn 4 x 4 px mà chúng ta sẽ tô màu bằng cách sử dụng # F97762, tạo cho nó một phác thảo 4 px (# 494343), nhóm (Control-G) và sau đó định vị hai cái ở phía dưới bên trái của thiết bị góc, để lại một khoảng cách 4 px từ phác thảo lớn hơn.

creating and positioning the main shapes for the cdjs bottom-left button

Bước 23

Tạo nút dưới cùng thứ hai, sử dụng một bản sao (Control-C> Control-F) của nút từ bước trước, chúng ta sẽ điều chỉnh bằng cách thay đổi màu của nó thành # F9AE7A và sau đó đặt lên trên nó, ở khoảng cách 4 px.

creating and positioning the main shapes for the cdjs second bottom-left button

Bước 24

Bắt đầu làm việc với fader bằng cách chọn Công cụ hình chữ nhật (M) và tạo hình 6 x 52 px mà chúng ta sẽ tô màu bằng cách sử dụng # 787171, tạo cho nó một đường viền dày 4 px (# 494343) đẹp mắt (Control-G) và định vị hai ở khoảng cách 4 px từ cạnh phải của thiết bị.

creating and positioning the main shapes for the cdjs fader

Bước 25

Nhấp đúp chuột vào các hình dạng mà chúng tôi vừa tạo để vào Chế độ cách ly và sau đó thêm hình chữ nhật 2 x 48 px (# 494343) lên trên chúng, đảm bảo đặt chúng ở giữa chúng.

Khi bạn đã hoàn tất, nhấn Escape để thoát khỏi sự cô lập.

adding the little slider line to the cdjs fader

Bước 26

Kết thúc biểu tượng bằng cách tạo công tắc fader, sử dụng hình chữ nhật 10 x 4 px (# E8DĐD) với đường viền 4 px (# 494343), trên đó chúng ta sẽ thêm hình chữ nhật 8 x 2 px nhỏ hơn (# 494343) , nhóm (Control-G) và sau đó định vị chúng về phía dưới của thanh trượt sau đó.

Ngoài ra, don lồng quên chọn và nhóm (Control-G) tất cả các biểu tượng soạn thảo hình dạng trước khi chuyển sang hình tiếp theo.

creating and positioning the main shapes for the cdjs fader switch

6. Cách tạo tai nghe

Giả sử bạn đã khóa lớp thứ hai, chuyển sang lớp thứ ba, nơi chúng ta sẽ dành thời gian và tạo một cặp tai nghe đóng lại, vì vậy hãy đảm bảo bạn phóng to lưới tham chiếu đó và bắt đầu .

Bước 1

Bắt đầu bằng cách tạo một hình chữ nhật tròn 104 x 114 (# 615A5A) với Bán kính góc 52 px, từ đó chúng tôi sẽ cắt ra một hình nhỏ hơn 96 x 106 px với Bán kính góc 48 px (được tô sáng bằng màu cam) định vị hình dạng kết quả về phía trung tâm của khu vực vẽ hoạt động cơ bản, ở khoảng cách 4 px từ cạnh trên của nó.

creating and positioning the main shape for the headphones head band

Bước 2

Điều chỉnh hình dạng chính của dải băng bằng cách loại bỏ phần dưới của nó chứa hai điểm neo dưới cùng, sử dụng hình chữ nhật 120 x 54 px (được tô sáng bằng màu cam) mà chúng ta sẽ căn giữa với cạnh dưới của vùng vẽ đang hoạt động.

adjusting the headphones head band using a rectangle

Bước 3

Đưa ra hình dạng kết quả là một phác thảo dày 4 px bằng phương pháp Offset Path, chúng ta sẽ tô màu bằng cách sử dụng # 494343.

adding the outline to the headphones band

Bước 4

Sử dụng Công cụ hình chữ nhật (M), thêm hình dạng 4 x 6 px (# E8DĐD) vào phía dưới bên trái của dải và một hình vuông 4 x 4 px nhỏ hơn (# 494343) trên đầu của nó, chúng tôi sẽ nhóm ( Control-G) và sau đó sử dụng để tạo một bản sao (Control-C> Control-F) mà chúng tôi sẽ đặt ở phía bên kia của dải.

adding the little metal sections to the bottom of the headphones head band

Bước 5

Thêm hình chữ nhật 2 x 6 px (# 494343) vào mỗi cạnh bên ngoài của dải, đảm bảo đặt chính giữa chúng vào các phần màu xám nhạt mà chúng ta đã tạo ở bước trước.

adding the plastic side sections to the headphoness head band

Bước 6

Sử dụng Công cụ hình chữ nhật (M) để tạo hình dạng 4 x 6 px (# 494343) mà chúng ta sẽ định vị bên dưới cạnh dưới của phác thảo dải băng, đặt nó vào hình chữ nhật màu xám nhạt bên trái. Thêm một hình chữ nhật nhỏ 1 x 2 px (# 494343) vào bên trái của nó, sau đó nhóm (Control-G) và tạo một bản sao (Control-C> Control-F) của chúng, chúng sẽ đặt vào bên phải của băng tần, đảm bảo lật nó theo chiều dọc (nhấp chuột phải> Biến đổi> Phản xạ> Dọc).

Bạn cũng có thể chọn tất cả các hình dạng và nhóm soạn nhạc của nhóm Band (Control-G) vì chúng tôi đã thực hiện khá nhiều công việc trên nó.

adding the adjustment steps to the lower section of the headphones band

Bước 7

Bắt đầu làm việc với cốc tai trái bằng cách tạo các hình dạng chính cho trình điều khiển của nó bằng cách sử dụng hình chữ nhật 8 x 20 px (# 787171) với đường viền 4 px (# 494343), chúng tôi sẽ định vị bên dưới phần có thể điều chỉnh của dải mà chúng tôi được tạo ở bước trước.

creating and positioning the main shapes for the headphones left driver enclosure

Bước 8

Tiếp theo, thêm hình chữ nhật dọc 2 x 20 px (# 494343) vào bên trái của bao (2 px từ cạnh của nó) và hình tròn 4 x 4 px (# 494343) trên nó (được đặt theo cách mà nửa bên trái của nó hoàn toàn chồng lên hình chữ nhật), chọn và nhóm (Control-G) tất cả các hình dạng sáng tác của nó sau đó.

adding details to the headphones left driver enclosure

Bước 9

Sử dụng Công cụ hình chữ nhật (M) để thêm hình dạng 2 x 12 px (# 494343) vào bên trái của phác thảo trình điều khiển, đảm bảo căn giữa theo chiều dọc căn chỉnh hai cái bằng bảng Align.

adding the side section to the headphones left driver enclosure

Bước 10

Chuyển sang Công cụ Hình chữ nhật Tròn và sử dụng nó để tạo hình dạng 8 x 44 px (# A79F9F) với đường viền 4 px (# 494343), trên đó chúng tôi sẽ thêm hình chữ nhật dọc 4 x 44 px (# 494343) . Chọn và sau đó nhóm (Control-G) cả ba hình dạng lại với nhau, định vị chúng ở phía bên phải của trình điều khiển sau đó, đảm bảo các đường viền kết thúc chồng chéo.

creating and positioning the main shapes for the headphones left cup

Bước 11

Bắt đầu làm việc trên miếng đệm tai bằng cách tạo một hình chữ nhật 8 x 36 px (# 615A5A) mà chúng ta sẽ điều chỉnh bằng cách đặt Bán kính góc trái của nó thành 2 px. Tạo cho hình dạng kết quả một phác thảo 4 px (# 494343) và sau đó thêm hình chữ nhật dọc 2 x 36 px (# 494343) 2 px từ phía bên phải của nó, nhóm (Control-G) và sau đó định vị tất cả các hình dạng ghép của pad vào bên phải bên cốc

creating and positioning the main shapes for the headphones left ear pad

Bước 12

Tạo phần dưới của dải bằng hình chữ nhật 4 x 16 px (# 494343), chúng tôi sẽ điều chỉnh bằng cách đặt Bán kính của các góc dưới cùng của nó thành 2 px và sau đó đặt vị trí bên dưới trình điều khiển. Thêm ba hình chữ nhật 1 x 2 px (# 494343) vào bên trái của nó, xếp chồng lên nhau 2 px theo chiều dọc, chọn và nhóm (Control-G) tất cả các hình dạng của nó và các hình dạng của cốc sau đó.

creating and positioning the main shapes for the headphones left adjustment extension

Bước 13

Tạo cốc tai phải bằng cách sử dụng một bản sao (Control-C> Control-F) của cái mà chúng ta vừa hoàn thành, chúng ta sẽ đặt vào phía đối diện của khu vực vẽ đang hoạt động, đảm bảo lật nó theo chiều dọc (đảm bảo lật nó theo chiều dọc (đảm bảo lật nó theo chiều dọc ( nhấp chuột phải> Biến đổi> Phản xạ> Dọc).

Khi bạn đã hoàn thành, donith quên chọn và nhóm (Control-G) tất cả các biểu tượng mà cộng lại các hình dạng lại với nhau để chúng giành được cách ly một cách tình cờ.

7. Cách tạo MPC

Vì vậy, hãy thành thật, không có bộ live nào được hoàn thành mà không có MPC (Bộ điều khiển sản xuất âm nhạc), đó là lý do tại sao Iithve bao gồm một bộ trong gói hiện tại. Điều đó đang được nói, tôi hy vọng bạn đã đặt mình vào lớp thứ tư và lớp cuối cùng để chúng ta có thể bắt đầu làm việc với nó.

Bước 1

Tạo phần thân chính của thiết bị bằng hình chữ nhật 96 x 108 px (# BFB6B6) với đường viền 4 px (# 494343) mà chúng ta sẽ nhóm (Control-G) và căn giữa với cạnh trên của khu vực vẽ hoạt động bên dưới.

creating and positioning the main shapes for the mpcs body

Bước 2

Điền vào chỗ trống còn lại của phần thân thiết bị bằng cách sử dụng hình chữ nhật 92 x 4 px (# 494343), chúng ta sẽ đặt trung tâm ngang thẳng hàng với đường viền lớn hơn.

adding the bottom outline section to the mpcs body

Bước 3

Tạo hình dạng chính cho phần trên bằng cách sử dụng hình chữ nhật 96 x 8 px mà chúng ta sẽ tô màu bằng cách sử dụng # 787171 và sau đó căn chỉnh vào cạnh trên của hình dạng điền vào thân hình chữ nhật (hình chữ nhật màu xám nhạt).

creating and positioning the main shape for the mpcs upper section

Bước 4

Cô lập hình dạng mà chúng ta vừa tạo ra từ phần dưới của cơ thể, bằng cách thêm một dải phân cách ngang 96 x 4 px ngay bên dưới nó, chúng ta sẽ tô màu bằng cách sử dụng # 494343.

adding the horizontal divider line to the upper section of the mpcs body

Bước 5

Tạo các bu lông bên nhỏ bằng hai vòng tròn 4 x 4 px, chúng ta sẽ tô màu bằng cách sử dụng # 494343, sau đó định vị ở khoảng cách 2 px từ các cạnh bên ngoài của hình bên dưới.

creating and positioning the little bolts onto the upper section of the mpcs body

Bước 6

Thêm một dòng văn bản giả, sử dụng hình chữ nhật 24 x 4 px (# 494343) theo sau là một 14 x 4 px nhỏ hơn khác (# 494343) ở khoảng cách 4 px, chúng tôi sẽ điều chỉnh bằng cách chọn Điểm neo dưới cùng bên trong của chúng và di chuyển chúng về bên trái 2 px (nhấp chuột phải> Biến đổi> Di chuyển> Ngang> -2 px). Sau đó, chỉ cần nhóm (Control-G) các hình dạng kết quả và căn giữa chúng trong phần trên của thiết bị, nhóm (Control-G) cũng là hình dạng sáng tác của nó.

adding the dummy text lines to the upper section of the mpcs body

Bước 7

Tạo phần bên trái bằng cách thêm hình chữ nhật 2 x 96 px (# 787171), tiếp theo là hình 4 x 96 px rộng hơn (# 494343), trên đó chúng tôi sẽ đặt hai hình chữ nhật 2 x 4 px (# 494343) 4 px từ các cạnh trên và dưới, nhóm tất cả các hình dạng sáng tác của nó sau đó.

creating and positioning the left side section onto the mpcs body

Bước 8

Thêm phần bên phải bằng bản sao (Control-C> Control-F) của phần chúng tôi vừa tạo, chúng tôi sẽ lật theo chiều dọc (nhấp chuột phải> Biến đổi> Phản chiếu> Dọc) và sau đó căn chỉnh theo cạnh phải của hình dạng màu xám bên dưới.

creating and positioning the right side section onto the mpcs body

Bước 9

Sử dụng Công cụ hình chữ nhật (M), tạo hình dạng 60 x 4 px, chúng ta sẽ tô màu bằng cách sử dụng # 494343 và sau đó căn giữa vào cạnh dưới của thân máy Thiết bị.

creating and positioning the bottom insertion onto the mpcs body

Bước 10

Thêm các bu lông bên bằng hai vòng tròn 4 x 4 px (# 494343) mà chúng ta sẽ đặt vào các cạnh của hình mà chúng ta vừa tạo, để lại một khoảng cách 2 px xung quanh chúng.

Ngoài ra, tại thời điểm này, bạn nên chọn tất cả các biểu tượng soạn thảo hình dạng và nhóm chúng bằng phím tắt Control-G.

adding the lower side bolts onto the mpcs body

Bước 11

Vì chúng tôi đã hoàn thành công việc trên cơ thể thực tế của thiết bị, giờ đây chúng tôi có thể bắt đầu thêm các thành phần giao diện nhỏ và chúng tôi sẽ bắt đầu với các nút bấm.

Sử dụng Công cụ Ellipse (L) tạo vòng tròn 8 x 8 px (# 494343), tạo cho nó một phác thảo 4 px (# 494343), tạo chỉ báo tăng 2 x 6 px (# 494343), sau đó nhóm (Control-G ) và định vị các hình dạng bên dưới phần trên cùng của thiết bị, chừa lại khoảng cách 4 px xung quanh chúng.

creating and positioning the first knob onto the mpcs body

Bước 12

Thêm các núm còn lại bằng cách sử dụng các bản sao (Control-C> Control-F) của nút mà chúng ta vừa tạo, xếp chúng theo chiều dọc ở khoảng cách 2 px với nhau, đảm bảo điều chỉnh vị trí của chỉ báo khuếch đại thứ hai thành thêm một số biến thể cho nó.

creating and positioning the remaining knobs onto the mpcs body

Bước 13

Tạo nút từ bên dưới núm cuối cùng bằng hình chữ nhật 8 x 2 px (# E8DĐD) với đường viền 4 px (# 494343) và chèn 4 x 1 px (# 494343) được căn chỉnh về cạnh trên, chúng tôi sẽ nhóm ( Control-G) và căn giữa ở khoảng cách 2 px.

creating and positioning the button from underneath the mpcs knobs

Bước 14

Thêm các miếng áp suất nhỏ, sử dụng tám ô vuông 8 x 8 px (# F97762) với đường viền 4 px (# 494343) xếp thành hai hàng với khoảng cách 2 px theo chiều ngang và chiều dọc.

adding the little pressure pads to the mpcs body

Bước 15

Tiếp theo, tạo các nút màu cam nhỏ bằng hai hình chữ nhật 8 x 2 px (# F9AE7A) với đường viền 4 px (# 494343) nhóm riêng lẻ (Control-G) và định vị chúng 2 px từ hai miếng đệm dưới cùng.

creating and positioning the two orange buttons onto the mpcs body

Bước 16

Tạo thanh trượt điều chế nhỏ bằng hình chữ nhật 8 x 74 px (# 787171) với đường viền 4 px (# 494343) mà chúng ta sẽ đặt ở phía bên phải của thiết bị, ở khoảng cách 4 px từ hàng miếng thứ hai.

creating and positioning the main shapes for the mpcs modulation slider

Bước 17

Thêm các dòng chỉ báo nhỏ bằng cách sử dụng mười tám hình chữ nhật 6 x 2 px (# 494343) xếp chồng lên nhau theo chiều dọc 2 px với nhau, chúng ta sẽ nhóm (Control-G) và sau đó định vị ở giữa hình dạng điền vào thanh trượt.

adding the little indicator lines to the mpcs modulation slider

Bước 18

Hoàn thành thanh trượt và với biểu tượng đó, bằng cách thêm hình chữ nhật 6 x 10 px (# 494343) trên các đường chỉ báo thứ tư, thứ năm và thứ sáu, chọn và nhóm (Control-G) tất cả các hình dạng kết hợp của nó sau đó.

Như mọi khi, don không quên chọn tất cả các hình dạng và nhóm biểu tượng (Control-G).

Hiển thị trên!

Bạn đã có nó: một hướng dẫn thực sự dễ dàng về cách xây dựng bộ biểu tượng theo chủ đề DJ của riêng bạn bằng cách sử dụng một số công cụ và hình dạng đơn giản nhất mà bạn có thể đã làm việc hàng ngày.

Tôi hy vọng bạn tìm thấy các bước dễ thực hiện và quan trọng nhất là học được điều gì đó mới và hữu ích trên đường đi.