Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Icon Design

Cách tạo bộ biểu tượng điện thoại di động trong Adobe Illustrator

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Communication Week.
35 Best Calligraphy Fonts
How to Create a Surreal TV Head Photo Manipulation With Adobe Photoshop

Vietnamese (Tiếng Việt) translation by Caitlyn Cat Tien (you can also view the original English article)

Final product image
What You'll Be Creating

Trong hướng dẫn hôm nay, chúng ta sẽ quay ngược thời gian và xem xét quá trình tạo ra ba trong số các thiết bị giao tiếp mang tính biểu tượng nhất từng đã tạo ra, không sử dụng nhiều hơn một số hình dạng và công cụ hình học đơn giản từ Adobe Illustrator.

Như mọi khi, đừng quên bạn luôn có thể mở rộng bộ biểu tượng này bằng cách truy cập vào GraphicRiver, nơi bạn sẽ tìm thấy một sự lựa chọn tuyệt vời cho các biểu tượng theo chủ đề giao tiếp.

Để thực hiện, hãy lấy một cốc cà phê latte và bắt đầu!

1. Cách thiết lập tập tin dự án mới

Giả sử bạn đã có Illustrator và chạy ở chế độ nền, hãy mở nó lên và thiết lập một New Document (File > New hoặc Control-N) bằng 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 (72ppi)
  • Preview Mode: Default
setting up a new document

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

Vì chúng ta sẽ tạo các biểu tượng bằng cách sử dụng luồng công việc pixel hoàn hảo, nên chúng ta sẽ muốn thiết lập một Lưới Grid nhỏ để chúng ta 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 Edit > Preferences > Guides & Grid và điều chỉnh các cài đặt sau:

  • Gridline every: 1 px
  • Subdivisions: 1
setting up a custom grid

Mẹo nhỏ: 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 thức hoạt động của hệ thống Lưới Grid của Illustrator.

Bước 2

Khi chúng ta đã thiết lập lưới tùy chỉnh của mình, tất cả những gì chúng ta 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 GridSnap to Pixel được tìm thấy trong menu View, sẽ chuyển thành Snap to Pixel mỗi lần bạn vào chế độ Pixel Preview (nếu bạn đang sử dụng phiên bản phần mềm cũ hơn).

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 xem hướng dẫn Cách tạo Pixel-Perfect Artwork của tôi, điều này sẽ 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 layer

Với New Document đã tạo, sẽ là một ý tưởng tốt khi cấu trúc dự án của chúng ta bằng cách sử dụng một vài layer, vì cách này chúng ta 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.

Để thực hiện, mở bảng Layers và tạo tổng cộng bốn layer, chúng ta sẽ đổi tên như sau:

  • layer 1: reference grids
  • layer 2: motorola dynatac
  • layer 3: nokia communicator
  • layer 4: iphone
setting up the layers

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

Các lưới tham chiếu (Reference Grids) (or lưới cơ sở (Base Grids) 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ạn 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 ta, chúng ta 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ừ layer tham chiếu trên mạng, và sau đó dùng Rectangle Tool (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 ta.

creating the main shape for the first reference grid

Bước 2

Thêm một hình 120 x 120 px nhỏ hơn nữa (#FFFFFF) mà chúng ta sẽ đặt lên trên hình dạng trước đó, vì nó sẽ đóng vai trò là vùng vẽ hoạt động của chúng ta, do đó cung cấp cho chúng ta một layer đệm 4 px xung quanh để làm việc.

creating the main shape for the first active drawing area

Bước 3

Chọn và nhóm hai hình vuông lại với nhau bằng phím tắt Control-G, căn giữa chúng thẳng hàng với Artboard bên dưới sau đó. Tạo các lưới còn lại bằng hai bản sao (Control-C > Control-F) cách một khoảng ngang 40 px so với hình ban đầu, khóa layer hiện tại trước khi chuyển sang phần tiếp theo.

adding the remaining reference grids

5. Cách tạo điện thoại Motorola DynaTAC

Giả sử bạn đã thực hiện thành công để tạo ra các lưới tham chiếu nhỏ, chuyển sang layer tiếp theo (đó sẽ là layer thứ hai), và hãy khởi động dự án bằng cách tạo ra điện thoại di động thương mại đầu tiên được Motorola tạo ra vào năm 1983.

Bước 1

Bắt đầu bằng cách tạo biểu tượng nền hình tròn bằng cách sử dụng hình tròn 104 x 104 px, tô màu #7DDBCD và sau đó căn giữa vào vùng vẽ đang hoạt động bên dưới, đặt nó cách một khoảng 26 px từ cạnh trên của nó.

creating and positioning the main shape for the first icons background

Bước 2

Vì chúng ta muốn hình tròn vẫn bị giới hạn ở bề mặt của vùng vẽ đang hoạt động, chúng ta sẽ phải che nó bằng hình vuông 120 x 120 px (được tô sáng màu đỏ), chúng ta sẽ căn giữa vào lưới tham chiếu lớn hơn. Khi bạn đã có Mask, chọn cả hai hình và sau đó nhấp chuột phải > Make Clipping Mask.

masking the first icons background

Bước 3

Vẽ nền trước bằng cách sử dụng nét Stroke dày 106 px rộng 4 px (#3F3330) mà chúng ta sẽ căn chỉnh với góc dưới bên trái của vùng vẽ đang hoạt động, tiếp theo là một đường rộng 2 px nhỏ hơn (#3F3330) mà chúng ta sẽ đặt vào đáy của nó - ở góc phải. Sau khi thực hiện xong, hãy chọn và nhóm hai hình lại với nhau bằng phím tắt Control-G, thực hiện tương tự cho toàn bộ hình nền sau đó.

drawing the first icons foreground

Bước 4

Bắt đầu làm việc trên phần trước của thiết bị bằng cách tạo hình chữ nhật 24 x 22 px, tô màu #E6E8EF và sau đó đặt trên nền, cách một khoảng 38 px từ cạnh trái của vùng vẽ hoạt động và 24 px từ cạnh trên của nó.

creating and positioning the main shape for the first phones earpiece section

Bước 5

Tạo hình dạng phác thảo bằng phương pháp Stroke, bằng cách tạo một bản sao của nó (Control-C), mà chúng ta sẽ dán ở phía trước (Control-F) và sau đó điều chỉnh bằng cách trước tiên thay đổi màu của nó thành #3F3330 và sau đó lật Fill với Stroke của nó (Shift-X). Đặt Weight của nét viền kết quả lên 4 pxCorner thành Round Join, chọn và nhóm hai hình dạng lại với nhau sau đó bằng phím tắt Control-G.

adding the outline to the first phones earpiece section

Bước 6

Thêm đường chèn ở giữa Tai nghe bằng cách sử dụng hình chữ nhật tròn 12 x 2 px (#3F3330) với Corner Radius 1 px, chúng ta sẽ căn giữa theo hai hình mà chúng ta vừa nhóm.

adding the center insertion line to the first phones earpiece section

Bước 7

Thêm các đường chèn nhỏ hơn bằng cách sử dụng hai hình chữ nhật tròn 8 x 2 px (#3F3330) với Corner Radius 1 px, chúng ta sẽ đặt cách một khoảng 2 px theo chiều dọc từ tâm lớn hơn. Sau khi thực hiện xong, hãy chọn và nhóm (Control-G) cả ba hình chèn lại với nhau nhau, thực hiện tương tự cho toàn bộ tai nghe sau đó.

adding the smaller insertion lines to the first phones earpiece section

Bước 8

Bắt đầu làm việc trên phần hiển thị bằng cách tạo hình chữ nhật 24 x 12 px (#565560), chúng ta sẽ đặt bên dưới các hình trước đó và sau đó điều chỉnh bằng cách chọn các điểm neo dưới cùng của nó bằng Direct Selection Tool (A), mà chúng ta sẽ đẩy qua phía bên phải một khoảng 6 px bằng Move Tool (nhấp chuột phải > Transform > Move > Horizontal > 6 px).

creating and adjusting the main shape for the first phones screen section

Bước 9

Tạo cho hình dạng kết quả một nét phác thảo dày 4 px (#3F3330) với Round Join, chọn và nhóm hai hình lại với nhau sau đó bằng phím tắt bàn phím Control-G.

adding the outline to the first phones screen section

Bước 10

Tạo một hình chữ nhật 14 x 4 px nhỏ hơn (#3F3330), chúng ta sẽ điều chỉnh bằng cách chọn và đẩy các điểm neo dưới cùng của nó sang bên phải một khoảng 2 px (nhấp chuột phải Transform > Move > Horizontal > 2 px). Đặt hình dạng kết quả vào ở giữa của các hình dạng đã tạo trước đó, chọn và nhóm (Control-G) cả ba hình dạng đó với nhau sau đó.

adding the smaller rectangle to the first phones screen section

Bước 11

Tạo phần quay số điện thoại bằng cách sử dụng hình chữ nhật 24 x 36 px (#828293) với viền ngoài dày 4 px (#3F3330), chúng ta sẽ nhóm chúng lại (Control-G) và sau đó đặt bên dưới phần hiển thị nhỏ hơn.

creating and positioning the main shapes for the first phones dial section

Bước 12

Thêm bốn hàng nút trên cùng, sử dụng ba hình chữ nhật 4 x 2 px (#3F3330) xếp chồng lên nhau 2 px theo chiều ngang, chúng ta sẽ nhóm chúng lại (Control-G) và sau đó xếp theo chiều dọc cách một khoảng 2 px, đặt chúng cách một khoảng 4 px từ cạnh trên của phần hiện tại.

adding the top four button rows to the first phones dial section

Bước 13

Tạo các hàng nút dưới cùng bằng năm hình chữ nhật 4 x 2 px (#3F3330), chúng ta sẽ nhóm chúng lại (Control-G) và sau đó đặt cách 4 px từ các hàng trên cùng, như trong hình ảnh tham chiếu.

adding the bottom button rows to the first phones dial section

Bước 14

Thêm phần chèn nhỏ, sử dụng hình chữ nhật 8 x 4 px (#3F3330), chúng ta sẽ điều chỉnh bằng cách chọn riêng lẻ và đẩy các điểm neo trên cùng của nó vào bên trong thêm 2 px (nhấp chuột phải > Transform > Move > Horizontal > + / - 2 px tùy thuộc vào phía bạn bắt đầu). Căn giữa hình dạng kết quả với cạnh dưới cùng của phần hiện tại, chọn và nhóm (Control-G) tất cả các hình dạng kết hợp của nó với nhau trước khi chuyển sang bước tiếp theo.

adding the small insertion to the bottom of the first phones dial section

Bước 15

Tạo phần dưới cùng của điện thoại, sử dụng hình chữ nhật 24 x 16 px (#565560), chúng ta sẽ điều chỉnh bằng cách chọn và đẩy các điểm neo dưới cùng của nó sang bên trái 12 px bằng Move Tool (nhấp chuột phải > Transform > Move > Horizontal > - 12 px). Đưa ra hình dạng kết quả là một phác thảo dày 4 px (#3F3330), nhóm chúng lại (Control-G) và sau đó đặt hai hình bên dưới phần trước đó.

creating and positioning the main shapes for the first phones bottom section

Bước 16

Thêm phần chèn micrô của thiết bị bằng hình chữ nhật bo tròn 8 x 2 px (#3F3330) với Corner Radius 1 px, chúng ta sẽ đặt cách 2 px từ cạnh dưới của phần hiện tại, đảm bảo chọn và nhóm (Control-G) các hình dạng tạo thành của nó với nhau sau đó.

adding the microphone insertion to the first phones bottom section

Bước 17

Tạo "cằm" của điện thoại, sử dụng hình chữ nhật 24 x 8 px nhỏ hơn (#E6E8EF) với đường viền dày 4 px (#3F3330), chúng ta sẽ nhóm (Control-G) chúng lại, sau đó đặt bên dưới phần dưới cùng lớn hơn.

creating and positioning the main shapes for the first phones chin section

Bước 18

Thêm phần chèn dưới cùng bằng hình chữ nhật 8 x 4 px (#3F3330), chúng ta sẽ điều chỉnh bằng cách chọn riêng lẻ và đẩy các điểm neo trên cùng của nó vào bên trong 2 px bằng Move Tool (nhấp chuột phải > Transform > Move > Horizontal > + / - 2 px tùy thuộc vào phía bạn bắt đầu). Đặt hình dạng kết quả ở giữa của cạnh dưới cùng, chọn và nhóm (Control-G) tất cả các hình dạng tạo thành của phần hiện tại lại với nhau, làm tương tự cho tất cả các phần khác sau đó.

adding the bottom insertion to the first phones chin section

Bước 19

Tạo phần bên của điện thoại bằng hình chữ nhật 32 x 94 px (#7C8ADD) với đường viền dày 4 px (#3F3330), chúng ta sẽ nhóm chúng lại (Control-G) và sau đó đặt ở bên phải của thiết bị, đảm bảo đặt chúng bên dưới các phần phía trước của nó (nhấp chuột phải > Arrange > Send Backward) như trong hình ảnh tham chiếu.

creating and positioning the main shapes for the first phones side section

Bước 20

Thêm đường phân chia dọc bằng hình chữ nhật 2 x 94 px (#3F3330), chúng ta sẽ đặt cách một khoảng 4 px từ phần quay số mặt trước của thiết bị. Sau khi hoàn tất, chọn và nhóm (Control-G) tất cả các phần lại với nhau bằng phím tắt Control-G.

adding the vertical divider line to the first phones side section

Bước 21

Bắt đầu làm việc với ăng-ten (vâng, điện thoại đã có ăng-ten bên ngoài tại một số thời điểm), bằng cách tạo hình cơ sở của nó bằng hình chữ nhật 8 x 6 px (#565560) với đường viền dày 4 px (#3F3330), chúng ta sẽ nhóm chúng lại (Control -G) và sau đó đặt trên đỉnh của điện thoại, cách một khoảng 10 px so với cạnh phải của nó.

creating and positioning the main shapes for the base section of the first phones antenna

Bước 22

Thêm phần thân chính bằng hình chữ nhật 4 x 18 px (#3F3330), chúng ta sẽ điều chỉnh bằng cách đặt Radius của các góc trên cùng của nó thành 2 px từ bên trong Rectangle Properties của bảng Transform, đặt hình dạng kết quả lên trên cùng của đế.

creating and positioning the main shape for the body of the first phones antenna

Bước 23

Tạo phần ở giữa của ăng-ten bằng hình chữ nhật 8 x 6 px (#3F3330), chúng ta sẽ điều chỉnh bằng cách chọn riêng lẻ và đẩy các điểm neo trên cùng của nó vào bên trong 2 px bằng Move Tool (nhấp chuột phải > Transform > Move > Horizontal > + / - 2 px tùy thuộc vào phía bạn bắt đầu). Khi bạn thực hiện xong, đặt hình dạng kết quả lên trên cùng của đế, chọn và nhóm (Control-G) tất cả các ăng-ten kết hợp các hình dạng lại với nhau.

adding the center section to the first phones antenna

Bước 24

Kết thúc biểu tượng bằng cách vẽ các đường chi tiết hai bên bằng cách sử dụng nét Stroke cao 4 px dày 2 px (#3F3330), tiếp theo là đường kẻ lớn hơn cao 16 px dày 2 px (#3F3330), mà chúng ta sẽ xếp theo chiều dọc cách một khoảng 4 px với nhau, nhóm chúng lại (Control-G) và sau đó đặt hai hình ở bên trái của điện thoại. Sau khi bạn đã hoàn thành, donel quên chọn và nhóm (Control-G) tất cả các phần soạn thảo trước khi chuyển sang phần tiếp theo.

finishing off the first icon

6. Cách tạo điện thoại Nokia Communicator

Giả sử bạn đã hoàn thành công việc với biểu tượng đầu tiên, hãy chuyển sang layer tiếp theo (đó sẽ là layer thứ ba), nơi chúng ta sẽ bắt đầu làm việc với Nokia Communicator mang tính biểu tượng.

Bước 1

Tạo nền bằng cách sử dụng một bản sao (Control-C) của biểu tượng từ biểu tượng trước đó, chúng ta sẽ dán vào layer hiện tại (Control-F) và sau đó căn giữa với vùng vẽ hoạt động thứ hai của chúng ta. Khi bạn đã hoàn tất, hãy đảm bảo khóa layer biểu tượng đầu tiên trước khi chuyển sang bước tiếp theo.

creating and positioning the second icons background

Bước 2

Tạo phần bên của nửa dưới của điện thoại, sử dụng một hình chữ nhật tròn 80 x 40 px (#7C8ADD) với Corner Radius 8 px và nét viền ngoài dày 4 px (#3F3330), sau đó chúng ta sẽ nhóm (Control-G) vị trí trên nền trước, cách một khoảng 14 px từ cạnh phải của vùng vẽ đang hoạt động.

creating and positioning the main shapes for the side section of the second phones bottom half

Bước 3

Thêm phần chèn hình chữ nhật bằng hình chữ nhật 4 x 12 px, tô màu #3F3330 và sau đó căn giữa cho cạnh phải của phần lớn hơn.

adding the rectangular insertion to the side section of the second phones bottom half

Bước 4

Tạo phần trước bằng cách sử dụng một bản sao (Control-C) của phần mà chúng ta vừa hoàn thành, chúng ta sẽ dán ở phía trước (Control-F) và sau đó điều chỉnh bằng cách đặt màu của hình dạng màu tô của nó thành #828293, đẩy hai hình sang trái 8 px bằng Move Tool (nhấp chuột phải > transform > Move > Horizontal > -8 px).

creating and positioning the main shapes for the front section of the second phones bottom half

Bước 5

Bắt đầu làm việc với các nút bằng cách tạo hàng đầu tiên bằng năm hình chữ nhật tròn 8 x 4 px (#3F3330) với Corner Radius 2 px, chúng ta sẽ đặt cách một khoảng 2 px theo chiều ngang với nhau, nhóm chúng lại (Control-G) và sau đó đặt chúng cách một khoảng 6 px từ cạnh trái của phần trước và 4 px từ cạnh trên của nó.

adding the first button row to the second phones bottom half

Bước 6

Tạo hàng thứ hai bằng sáu hình chữ nhật tròn 8 x 4 px (#3F3330) với Corner Radius 2 px, chúng ta sẽ nhóm chúng lại (Control-G) và sau đó đặt cách một khoảng 4 px từ cạnh trái của vùng vẽ đang hoạt động và 2 px từ hàng đã tạo trước đó.

adding the second button row to the second phones bottom half

Bước 7

Thêm hàng thứ ba, sử dụng một bản sao (Control-C > Control-F) của hàng đầu tiên, chúng ta sẽ đặt bên dưới hàng thứ hai, duy trì khoảng cách 2 px giống nhau.

adding the third button row to the second phones bottom half

Bước 8

Tạo hàng nút thứ tư, sử dụng một bản sao (Control-C > Control-F) của hàng thứ hai, chúng ta sẽ đặt cách một khoảng 2 px từ hình dưới cùng, đảm bảo loại bỏ nút cuối cùng của nó bằng cách chọn nó bằng Direct Selection Tool (A) và sau đó nhấn Delete.

adding the fourth button row to the second phones bottom half

Bước 9

Thêm hàng nút thứ năm và là hàng cuối cùng, sử dụng ba hình chữ nhật bo tròn 8 x 4 px (#3F3330) với Corner Radius 2 px, tiếp theo là một hình 14 x 4 px (#3F3330), mà chúng ta sẽ đặt như trong hình ảnh tham chiếu .

adding the fifth button row to the second phones bottom half

Bước 10

Thêm nút tròn bằng hình tròn 4 x 4 px (#3F3330), chúng ta sẽ đặt cách 2 px từ cạnh phải của hàng đầu tiên.

adding the circular button to the second phones bottom half

Bước 11

Tạo nút lớn hơn, sử dụng hình chữ nhật bo tròn 8 x 10 px (#3F3330), với Corner Radius 2 px, chúng ta sẽ điều chỉnh bằng cách đặt Radius của góc trên cùng bên trái của nó thành 4 px từ trong Rectangle Properties của bảng Transform. Khi bạn thực hiện xong, căn dưới hình dạng kết quả cho hàng thứ hai, đặt nó cách 2 px từ cạnh phải của nó.

adding the larger button to the second phones bottom half

Bước 12

Bắt đầu làm việc trên D-pad của điện thoại, bằng cách tạo một hình tròn 16 x 16 px (#3F3330), chúng ta sẽ đặt cách một khoảng 2 px từ cạnh dưới của phần trước và 4 px từ cạnh phải của nó.

creating and positioning the main shape for the second phones d-pad

Bước 13

Tạo một hình tròn 8 x 8 px nhỏ hơn (#828293), chúng ta sẽ đặt lên trên hình tròn từ bước trước.

adding the smaller grey circle to the second phones d-pad

Bước 14

Tách các nút D-pad, sử dụng hai nét Stroke chéo dày 2 px (#828293), chúng ta sẽ đặt vào hình tròn nhỏ hơn như trong hình tham chiếu.

separating the second phones d-pad buttons

Bước 15

Hoàn thành D-pad bằng cách thêm phần ở giữa của nó bằng hình tròn 4 x 4 px (#3F3330), đảm bảo chọn và nhóm (Control-G) tất cả các hình dạng tạo thành của nó với nhau, làm tương tự cho tất cả các nút khác sau đó.

adding the center section to the second phones d-pad

Bước 16

Kết thúc phần hiện tại bằng cách thêm phần chèn dưới bằng hình chữ nhật 16 x 4 px (#3F3330), chúng ta sẽ căn giữa thẳng hàng với cạnh dưới 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 tạo thành của phần phía trước, làm tương tự cho toàn bộ nửa dưới của điện thoại.

adding the bottom rectangular insertion to the second phones front bottom half

Bước 17

Tạo phần bên của nửa trên, sử dụng hình chữ nhật tròn 80 x 40 px (#7C8ADD), với Corner Radius 8 px và đường viền dày 4 px (#3F3330), sau đó chúng ta sẽ nhóm (Control-G) lại và sau đó đặt lên trên cùng của nửa dưới của điện thoại, cách một khoảng 16 px so với cạnh phải của vùng vẽ đang hoạt động.

creating and positioning the main shapes for the side section of the second phones upper half

Bước 18

Tạo phần mặt trước của điện thoại, sử dụng một hình chữ nhật tròn 80 x 40 px khác (#A3A3AD) với Corner Radius 8 px và đường viền dày 4 px (#3F3330), chúng ta sẽ nhóm chúng lại (Control-G) và sau đó căn trái với nửa dưới bên dưới.

adding the front section to the second phones upper half

Bước 19

Thêm phần màn hình điện thoại bằng cách sử dụng hình chữ nhật 48 x 24 px (#565560) với đường viền dày 4 px (#3F3330), chúng ta sẽ nhóm chúng lại (Control-G) và sau đó căn giữa với phần trước của nửa trên của nó.

adding the screen section to the second phones front upper half

Bước 20

Tạo các phím mũi tên lên và xuống bằng hai hình chữ nhật 8 x 6 px (#3F3330), chúng ta sẽ điều chỉnh bằng cách đặt Radius của các góc ngoài của nó thành 4 px và các mặt đối diện bên trong của nó thành 2 px từ trong Rectangle Properties của bảng Transform. Sắp xếp theo chiều dọc các hình dạng thu được cách một khoảng 4 px với nhau, nhóm chúng lại (Control-G) và sau đó đặt chúng ở phía bên trái màn hình.

adding the up and down arrow buttons to the front section of the second phones upper half

Bước 21

Tạo các nút bên phải bằng ba hình elip 8 x 4 px (#3F3330), chúng ta sẽ xếp chồng theo chiều dọc cách một khoảng 2 px với nhau, sau đó chúng ta sẽ nhóm chúng lại (Control-G) và đặt vào phía đối diện của màn hình .

adding the three elliptical buttons to the front section of the second phones upper half

Bước 22

Kết thúc phần hiện tại bằng cách thêm phần chèn nhỏ bằng hình chữ nhật 12 x 4 px (#3F3330), chúng ta sẽ căn giữa thẳng hàng với cạnh trên của nó. Sau khi bạn đã hoàn thành, hãy chọn và nhóm (Control-G) tất cả các hình dạng tạo thành của nó, thực hiện tương tự cho toàn bộ nửa trên.

adding the rectangular insertion to the front of the second phones upper half

Bước 23

Thêm phần kết nối ở giữa bằng hình chữ nhật tròn 44 x 8 px (#3F3330) với Corner Radius 4 px, chúng ta sẽ đặt ở giữa của điểm giao nhau của nửa trên và dưới.

adding the center connecting piece to the second phones front

Bước 24

Bắt đầu làm việc với ăng-ten của thiết bị bằng cách tạo phần thân dưới của nó bằng hình chữ nhật 6 x 24 px (#565560) với Corner Radius 3 px và viền ngoài dày 4 px (#3F3330) với Round Join, chúng ta sẽ nhóm chúng lại (Control-G) và sau đó đặt cách một khoảng 14 px từ cạnh phải của vùng vẽ đang hoạt động và 22 px từ vị trí trên cùng của nó.

creating and positioning the main shapes for the lower body of the second phones antenna

Bước 25

Thêm đường phân chia ngang ăng-ten, sử dụng hình chữ nhật 6 x 4 px (#3F3330), chúng ta sẽ định vị ở khoảng cách 2 px từ cạnh trên của thân dưới.

adding the horizontal divider line to the lower body of the second phones antenna

Bước 26

Tạo thân trên của ăng-ten bằng cách sử dụng hình chữ nhật 6 x 24 px (#3F3330) với Corner Radius 3 px trên đỉnh, chúng ta sẽ đặt lên trên thân dưới của nó. Khi bạn đã hoàn tất, hãy đảm bảo chọn và nhóm (Control-G) tất cả các hình dạng tạo thành của nó lại với nhau, thực hiện tương tự cho toàn bộ điện thoại sau đó.

adding the upper body to the second phones antenna

Bước 27

Như chúng ta đã làm với biểu tượng đầu tiên, chúng ta sẽ hoàn thành biểu tượng hiện tại bằng cách thêm hai dườngd chi tiết dọc vào bên phải của thân điện thoại, đảm bảo chọn và nhóm (Control-G) tất cả các phần tạo thành trước khi chuyển sang hình tiếp theo

finishing off the second icon

7. Cách tạo iPhone

Bây giờ chúng tôi đang xuống biểu tượng thứ ba và cuối cùng của chúng tôi, vì vậy không lãng phí thêm thời gian, hãy đảm bảo bạn đang ở đúng lớp (đó sẽ là lớp thứ tư) và hãy bắt đầu làm việc với một trong những lần lặp của thiết bị đã thay đổi toàn ngành điện thoại!

Bước 1

Bắt đầu mọi thứ bằng cách tạo nền lặp lại bằng cách sử dụng một bản sao (Control-C) của một trong những biểu tượng khác, chúng ta sẽ dán (Control-F) lên layer hiện tại và sau đó căn giữa vào lưới tham chiếu thứ ba.

creating and positioning the third icons background

Bước 2

Tạo phần bên của điện thoại, sử dụng hình chữ nhật bo tròn 60 x 114 px (#7C8ADD) với Corner Radius 8 px và đường viền dày 4 px (#3F3330), chúng ta sẽ nhóm chúng lại (Control-G) và sau đó đặt trên nền trước cách một khoảng 26 px từ cạnh phải của vùng vẽ đang hoạt động và 2 px từ cạnh trên của nó.

creating and positioning the main shapes for the third phones side section

Bước 3

Thêm nút trên cùng bằng hình chữ nhật 16 x 4 px (#3F3330), chúng ta sẽ đặt trên cùng của phần bên lớn hơn, cách một khoảng 12 px từ cạnh phải của nó.

adding the top button to the third phones side section

Bước 4

Thêm các đường ăng ten nhỏ bằng hai hình chữ nhật 6 x 4 px (#3F3330), chúng ta sẽ căn chỉnh cho phần bên cạnh góc bên phải, đặt chúng cách một khoảng 8 px từ cạnh trên và dưới của nó.

adding the antenna lines to the third phones side section

Bước 5

Tạo nút bên bằng hình chữ nhật tròn 7 x 12 px (#3F3330) với Corner Radius 2 px, chúng ta sẽ đặt cách một khoảng 12 px từ đường ăng ten trên cùng và 24 px từ cạnh bên của vùng vẽ hoạt động. Khi bạn đã hoàn thành, hãy chọn và nhóm (Control-G) tất cả các phần hiện tại, soạn thảo các hình dạng trước khi chuyển sang bước tiếp theo.

adding the side button to the third phones side section

Bước 6

Thêm phần mặt trước của điện thoại bằng hình chữ nhật tròn 60 x 114 px (#E6E8EF) với Corner Radius 8 px và đường viền dày 4 px (#3F3330), chúng ta sẽ nhóm chúng lại (Control-G), sau đó đặt cách một khoảng 24 px từ cạnh trái của vùng vẽ đang hoạt động.

creating and positioning the main shapes for the third phones front section

Bước 7

Tạo màn hình bằng hình chữ nhật 48 x 82 px (#565560) với viền ngoài dày 4 px (#3F3330), chúng ta sẽ nhóm chúng lại (Control-G) và sau đó căn giữa với phần trước của thiết bị.

adding the screen to the third phones front section

Bước 8

Thêm máy ảnh mặt trước bằng hình tròn 2 x 2 px (#3F3330), chúng ta sẽ căn giữa với phần mặt trước của điện thoại, đặt nó 2 px từ cạnh trên cùng của nó.

adding the front facing camera to the third phones front section

Bước 9

Tạo phần chèn tai nghe bằng hình chữ nhật tròn 12 x 2 px (#3F3330) với Corner Radius 1 px, chúng ta sẽ đặt bên dưới camera phía trước, cách một khoảng chỉ 2 px.

adding the earpiece insertion to the third phones front section

Bước 10

Thêm cảm biến ánh sáng bằng cách sử dụng hình tròn 2 x 2 px khác (#3F3330), chúng ta sẽ đặt vào bên trái của tai nghe, cách một khoảng chỉ 2 px, chọn và nhóm (Control-G) cả ba hình dạng chi tiết với nhau sau đó .

adding the light sensor to the third phones front section

Bước 11

Tạo nút tròn trên điện thoại bằng cách sử dụng hình tròn 8 x 8 px, tô màu #3F3330 và sau đó căn giữa. Sau khi bạn đã hoàn thành, hãy chọn và nhóm (Control-G) tất cả các hình dạng tạo thành của phần phía trước lại với nhau, thực hiện tương tự cho toàn bộ điện thoại sau đó.

adding the circular button to the third phones front section

Bước 12

Kết thúc biểu tượng bằng cách thêm hai đường chi tiết dọc, đảm bảo chọn và nhóm (Control-G) tất cả các phần soạn thảo của nó trước khi lưu tập tin dự án.

finishing off the third icon

Thế là xong!

Bạn đã có nó - một hướng dẫn nhỏ tuyệt vời về cách tạo các biểu tượng theo chủ đề giao tiếp rất riêng của bạn, không sử dụng gì nhiều hơn các hình dạng và công cụ cơ bản có trong Illustrator. Như mọi khi, tôi hy vọng bạn đã theo kịp từng bước và học được điều gì đó mới trong suốt quá trình thực hiện.

finished project preview
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.