[Ai_Tuts] Cách tạo bộ icon ứng dụng cho Android bằng Illustrator

Cách tạo bộ icon ứng dụng cho android bằng illustrator

cách tạo bộ icon ứng dụng cho android bằng illustrator

 

Trong hướng dẫn này, chúng ta sẽ xem cách tạo bộ incon ứng dụng cho android bằng illustrator. chúng ta sẽ tạo ra 5 icon đơn giản mà bạn có thể biến thành các icon cho bất kỳ ứng dụng Android nào.

Đối với quá trình này, chúng ta sẽ sử dụng các hình dạng hình học cơ bản được kết hợp nhau nhờ bảng Align và một số công cụ khác mà bạn có thể đã làm việc với chúng hàng ngày.

Bạn có thể truy cập vào Graphic.com.vn, nơi bạn sẽ tìm thấy rất nhiều các gói Icons Android.

Cách tạo bộ icon ứng dụng cho android bằng illustrator:

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

Tôi đoán là bạn đã bật Illustrator, vậy hãy thiết lập một tài liệu mới (File > New hoặc Control-N) sử dụng các thiết lập sau đây:

  • 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
cách tạo bộ icon ứng dụng cho android bằng illustrator

Tip: một số bạn có thể thấy rằng tuỳ chọn Align New Objects to Pixel Grid bị thiếu, đó là vì tôi đang chạy phiên bản phần mềm CC năm 2017 mới, nơi những thay đổi lớn đã được thực hiện với cách Illustrator xử lý cách các shape snap vào Pixel Grid nằm bên dưới.

2. Cách thiết lập một Grid tuỳ biến

Vì chúng ta sẽ tạo ra các biểu tượng bằng cách sử dụng một quy trình pixel-perfect, nên chúng ta sẽ cần thiết lập một Grid nhỏ để chúng ta có thể kiểm soát đầy đủ các shape của chúng ta—đó là nếu chúng ta đang chạy phiên bản phần mềm cũ hơn của.

Bước 1

Vào Edit > Preferences > Guides & Grid, và tinh chỉnh các thiết lập sau:

  • Gridline every: 1 px
  • Subdivisions: 1
cách tạo bộ icon ứng dụng cho android bằng illustrator

Bước 2

Một khi chúng ta đã thiết lập Grid tùy biến của chúng ta, tất cả những gì chúng ta cần phải làm để đảm bảo rằng shape của chúng ta trông rõ nét là kích hoạt tuỳ chọn Snap to Grid có thể được tìm thấy ở dưới menu View, nó sẽ biến thành Snap to Pixel mỗi khi bạn vào chế độ Pixel Preview.

3. Cách thiết lập Layer

Với việc tài liệu mới đã được tạo ra, đây là lúc để cấu trúc dự án của chúng ta bằng cách sử dụng một vài layer, từ đây chúng ta có thể duy trì một tiến trình công việc ổn định bằng cách tập trung vào một biểu tượng tại một thời điểm.

Như đã nói, hãy bật bảng Layers lên, và tạo ra tổng cộng là sáu layer, chúng ta sẽ đổi tên như sau:

  • layer 1: reference grids
  • layer 2: battery
  • layer 3: settings
  • layer 4: messaging
  • layer 5: alarm
  • layer 6: photos
cách tạo bộ icon ứng dụng cho android bằng illustrator

4. Cách tạo Grid tham chiếu (Reference Grids)

Grid tham chiếu (hoặc Grid cơ bản) là một bề mặt phân cách tham chiếu chính xác, cho phép chúng ta xây dựng các biểu tượng của chúng ta 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 Grid sẽ xác định kích thước thật sự của các biểu tượng, và chúng luôn luôn là quyết định đầu tiên mà bạn thực hiện 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 cỡ nhỏ nhất có thể và xây dựng trên đó.

Bây giờ, vì chúng ta tạo ra các biểu tượng với ý định chúng sẽ được sử dụng trong hệ điều hành Android thật sự, nên chúng ta sẽ phải làm theo hướng dẫn kích thước và định dạng được khuyến nghị, và thiết lập một Grid tùy chỉnh 96 x 96 px với một khoảng cách xung quanh (padding) là 4 px.

Bước 1

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

cách tạo bộ icon ứng dụng cho android bằng illustrator

Bước 2

Thêm một hình vuông nhỏ hơn 88 x 88 px (#FFFFFF) sẽ đóng vai trò như khu vực bản vẽ của chúng ta, từ đó nó cho chúng ta khoảng cách xung quanh 4 px.

creating the main shape for the active drawing area

Bước 3

Nhóm hai hình vuông tạo nên Grid tham chiếu sử dụng phím tắt Control-G, và sau đó tạo ra bốn bản sao ở khoảng cách 24 px so với cái khác, đảm bảo sắp xếp chúng vào giữa của Artboard.

Một khi bạn đã hoàn tất, khóa layer hiện tại và chuyển sang cái tiếp theo nơi chúng ta sẽ bắt đầu làm việc trên biểu tượng đầu tiên của chúng ta.

creating and positioning all the reference grids

5. Cách tạo biểu tượng viên pin

Chúng ta sẽ bắt đầu dự án bằng cách tạo ra biểu tượng viên pin, có thể được sử dụng cho một ứng dụng tiết kiệm pin, hoặc thậm chí một chỉ báo tình trạng vì nó khá cơ bản.

Như đã nói, hãy chắc chắn rằng bạn đang ở trên đúng layer (sẽ là cái thứ hai) và sau đó phóng to Grid tham chiếu đầu tiên để chúng ta có thể bắt đầu.

Bước 1

Bắt đầu bằng việc tạo ra nền của biểu tượng bằng cách sử dụng một vòng tròn 88 x 88 px, chúng ta sẽ sử dụng màu #00C853, canh giữa nó với khu vực bản vẽ.

creating and positioning the main shape for the battery icons background

Mẹo nhỏ: vì Google đã đưa ra hướng dẫn thiết kế Material Design cho màu sắc, tôi đã pha trộn và kết hợp với một cặp giá trị mà tôi đã sử dụng cho nền.

Bước 2

Tạo phần thân của viên pin bằng cách sử dụng hình chữ nhật 24 x 40 px, chúng ta sẽ sử dụng màu trắng (#FFFFFF) và sau đó canh giữa với vòng tròn lớn hơn, ở khoảng cách 20 px từ cạnh đáy của nó.

creating and positioning the main shape for the battery icons body

Bước 3

Chuyển shape mà chúng ta vừa mới tạo ra thành một outline, bằng cách hoán đổi Fill với Stroke (Shift-X), và sau đó thiết lập Weight của nó thành 4 pxCorner của nó thành Round Join, tất cả đều ở trong bảng Stroke.

turning the battery icons body into an outline using the stroke panel

Bước 4

Tạo thanh trạng thái đầu tiên, sử dụng một hình chữ nhật 12 x 4 px (#FFFFFF) hoặc một Stroke dài 12 px (#FFFFFF) với Weight 4 px, chúng ta sẽ canh giữa với phần thân của viên pin, để lại một khoảng cách 4 px xung quanh nó.

creating and positioning the battery icons first state indicator bar

Bước 5

Thêm hai thanh trạng thái, chúng ta sẽ đặt xếp chồng lên nhau với cách khoảng 4 px, nhóm chúng lại với nhau (Control-G).

adding the remaining state indicator bar to the battery icon

Bước 6

Hoàn tất biểu tượng bằng cách thêm nắp ở trên đầu, chúng ta sẽ tạo ra bằng cách sử dụng một hình chữ nhật nhỏ 8 x 4 px (#FFFFFF) mà chúng ta sẽ canh giữa với phần thân của viên pin, ở khoảng cách 6 px (4 px cho padding + 2 px cho nửa đầu của Stroke).

Một khi bạn đã hoàn tất, đừng quên chọn và nhóm (Control-G) tất cả các shape của viên pin, làm điều tương tự cho tất cả các thành phần tạo nên biểu tượng.

finishing off the battery icon

6. Cách tạo biểu tượng cài đặt

Giả sử bạn đã xoay sở để hoàn thành biểu tượng đầu tiên, hãy khóa các layer lại và sau đó di chuyển đến một cái kế tiếp (đó sẽ là cái thứ ba) và chúng ta hãy bắt đầu làm việc trên biểu tượng cài đặt.

Bước 1

Như chúng ta đã thực hiện với biểu tượng trước đó, bắt đầu bằng việc tạo ra nền của nó bằng cách sử dụng một vòng tròn 88 x 88 px, chúng ta sẽ sử dụng màu #2196F3, canh giữa nó với khu vực bản vẽ ở bên dưới.

creating and positioning the main shape for the settings icons background

Bước 2

Bắt đầu làm việc trên thanh trượt ở giữa bằng cách tạo ra một hình chữ nhật 4 x 32 px hoặc Stroke cao 32 px Weight 4 px, chúng ta sẽ màu sử dụng màu trắng (#FFFFFF) và sau đó canh giữa nó với vòng tròn lớn hơn, ở khoảng cách 18 px từ cạnh trên của nó.

creating and positionign the main shape for the settings icons center slider

Bước 3

Tạo ra chỉ báo trạng thái của thanh trượt bằng cách sử dụng một hình chữ nhật 12 x 4 px (#FFFFFF), chúng ta sẽ canh giữa nó với hình dạng tạo ra trước đó, cách khoảng 4 px từ cạnh đáy của nó.

creating and positioning the main shape for the center sliders state indicator

Bước 4

Thêm phần thanh trượt thấp hơn sử dụng hình chữ nhật 4 x 12 px (#FFFFFF), chúng ta sẽ đặt nó ngay dưới thanh chỉ báo trạng thái, chọn và nhóm (Control-G) tất cả ba hình dạng với nhau.

creating and positioning the main shape for the center sliders lower section

Bước 5

Tạo phần bên trên cho thanh trượt bên trái bằng cách sử dụng một hình chữ nhật nhỏ hơn 4 x 12 px (#FFFFFF), chúng ta sẽ canh nó vào phần trên của thanh trượt ở giữa, đặt nó ở khoảng cách 12 px từ nó.

creating and positioning the main shape for the left sliders upper section

Bước 6

Thêm chỉ báo trạng thái của thanh trượt bằng cách tạo ra một hình chữ nhật 12 x 4 px (#FFFFFF), chúng ta sẽ xếp chồng theo chiều dọc với shape tạo ra trước đó, ở khoảng cách 4 px so với cạnh đáy của nó.

creating and positioning the main shape for the left sliders state indicator

Bước 7

Hoàn tất thanh trượt bên trái bằng cách thêm phần dưới mà chúng ta sẽ tạo ra bằng cách sử dụng một  hình chữ nhật 4 x 32 px (#FFFFFF), chúng ta sẽ đặt nó bên dưới chỉ báo.

Một khi bạn đã hoàn tất, chọn tất cả các shape và nhóm chúng lại với nhau (Control-G) như chúng ta đã làm với thanh trượt ở giữa.

finishing off the settings icons left slider

Bước 8

Hoàn tất biểu tượng bằng cách tạo ra một bản sao (Control-C > Control-F) của thanh trượt bên trái, chúng ta sẽ đặt nó vào bên trong vòng tròn, bên phải và cách khoảng 4 px so với thanh trượt ở giữa.

Một khi bạn đã hoàn tất, đừng quên chọn và nhóm (Control-G) tất cả các phần tạo nên nó, do đó chúng sẽ không bị tách ra do bất cẩn.

finishing off the settings icon

7. Cách tạo biểu tượng tin nhắn

Giả sử bạn đã đã chuyển đến layer tiếp theo (đó sẽ là cái thứ tư), hãy phóng to Grid tham chiếu thứ ba và hãy bắt đầu.

Bước 1

Tạo nền của biểu tượng bằng cách sử dụng một vòng tròn 88 x 88 px, chúng ta sẽ tô màu bằng cách sử dụng #7C4DFF và sau đó canh giữa với khu vực bản vẽ.

creating and positioning the main shape for the messaging icons background

Bước 2

Tạo shape chính cho hộp tin nhắn bên trái bằng cách sử dụng một hình chữ nhật 32 x 24 px, chúng ta sẽ tô màu sử dụng màu trắng (#FFFFFF) và sau đó đặt nó ở khoảng cách 20 px từ cạnh trái và cạnh trên của bản vẽ.

creating and positioning the main shape for the messaging icons left text box

Bước 3

Bắt đầu điều chỉnh shape mà chúng ta vừa tạo, đầu tiên bật chế độ Pixel Preview (Alt-Control-Y) và sau đó thêm một cái neo mới vào cạnh dưới cùng của nó, ở khoảng cách 10 px từ cái bên trái bằng cách nhấp chuột trái với sự giúp đỡ của công cụ Add Anchor Point Tool.

Một khi bạn đã hoàn tất, đừng quên để thoát khỏi chế độ Pixel Preview bằng cách sử dụng phím tắt Alt-Control-Y.

adding a new anchor point to the bottom edge of the messaging icons left text box

Bước 4

Tiếp tục tinh chỉnh hình chữ nhật bằng cách chọn điểm neo dưới cùng bên trái của nó với công cụ lựa Direct Selection Tool (A), sau đó đẩy nó xuống dưới 8 px với sự giúp đỡ của các công cụ Move (click chuột phải > Transform > Move > Vertical > 8 px).

adjusting the shape of the messaging icons left text box

Bước 5

Biến shape được tạo ra thành một outline, bằng cách hoán đổi Fill vào với Stroke của nó (Shift-X) và sau đó thiết lập Weight của nó thành 4 pxCorner của nó thành Round Join.

turning the messaging icons left text box into an outline

Bước 6

Thêm dòng văn bản nhỏ hơn bằng cách tạo ra một hình chữ nhật 10 x 4 px, chúng ta sẽ tô màu sử dụng màu trắng (#FFFFFF) và sau đó đặt nó bên trong của hộp thư nhỏ, canh nó thẳng nó về phía góc trên bên trái của nó, đảm bảo để lại một khoảng cách 4 px xung quanh nó.

creating and positioning the first text line onto the messaging icons left text box

Bước 7

Thêm một dòng văn bản dài hơn bằng cách sử dụng một hình chữ nhật 20 x 4 px (#FFFFFF), chúng ta sẽ canh nó về bên trái với cái được tạo ra trước đó, ở khoảng cách 4 px từ cạnh dưới của nó.

Một khi bạn đã hoàn tất, đừng quên chọn và nhóm tất cả các shape văn bản lại với nhau bằng cách sử dụng phím tắt Control-G.

creating and positioning the second text line onto the messaging icons left text box

Bước 8

Tạo một bản sao (Control-C > Control-F) của hộp văn bản nhỏ, và sau đó tạo ánh xạ (nhấp chuột phải > Transform > Reflect > Vertical) và đặt nó lên bên trong vòng tròn ở khoảng cách 18 px từ cạnh phải và cạnh dưới của bản vẽ.

creating and positioning the messaging icons second text box

Bước 9

Hoàn tất biểu tượng, bằng cách loại bỏ phần chồng chéo của các hộp văn bản (được đánh dấu màu đỏ) như vậy bạn sẽ chỉ có một khoảng cách 4 px giữa nó và cạnh bên trái của phác thảo. Để làm điều này, chỉ cần thêm một điểm neo mới vào cạnh trái và cạnh trên của nó, và sau đó loại bỏ tất cả những cái khác.

Một khi bạn đã hoàn tất, chọn tất cả các phần tạo nên biểu tượng và nhóm chúng với nhau bằng cách sử dụng phím tắt Control-G.

finishing off the messaging icon

8. Cách tạo biểu tượng chuông báo

Vì bây giờ bạn có thể đã quen với cách làm, hãy khóa layer và di chuyển đến layer tiếp theo (đó sẽ là cái thứ năm) và chúng ta hãy bắt đầu làm việc trên biểu tượng đồng hồ báo thức của chúng ta.

Bước 1

Tạo ra một vòng tròn 88 x 88 px, chúng ta sau đó sẽ tô màu bằng cách sử dụng #FFC107, canh giữa nó với bản vẽ ở bên dưới.

creating and positioning the main shape for the alarm icons background

Bước 2

Tạo phần thân của chuông báo bằng cách sử dụng một vòng tròn 40 x 40 px, chúng ta sẽ sử dụng màu trắng (#FFFFFF) và sau đó canh giữa nó với bản vẽ, ở khoảng cách 20 px từ cạnh đáy của nó.

creating and positioning the main shape for the alarm icons body

Bước 3

Chuyển shape mà chúng ta vừa mới tạo ra thành outline, bằng cách hoán đổi Fill vào với Stroke của nó, và sau đó thiết lập Weight của nó thành 4 px từ bên trong bảng Stroke.

turning the alarm icons main body into an outline

Bước 4

Chọn công cụ Pen Tool (P) và vẽ tay cầm đồng hồ bằng cách sử dụng một Stroke dày 4 px với màu trắng (#FFFFFF) và Corner thành Round Join, đảm bảo để lại một khoảng cách 4 px giữa điểm neo cuối và vòng tròn lớn hơn.

drawing in the little hands inside the alarm clocks main body

Bước 5

Di chuyển một vài điểm ảnh hướng về phía trên, và tạo ra một hình chữ nhật 8 x 6 px (#FFFFFF), chúng ta sẽ canh giữa với phần trên của vòng tròn lớn, đặt nó ở vị trí để nó chồng lấn nửa trên của Stroke.

creating and positioning the main shape for the alarm clocks upper section

Bước 6

Thêm một hình chữ nhật 16 x 4 px (#FFFFFF) ở trên đầu của cái shape mà chúng ta vừa mới tạo, chọn và nhóm (Control-G) chúng với nhau.

finishing off the alarm clocks top section

Bước 7

Hoàn tất biểu tượng bằng cách vẽ hai đường chéo nhỏ bằng cách sử dụng một Stroke 4 px với các màu sắc được thiết lập thành trắng (#FFFFFF). Một khi bạn đã hoàn tất hãy chọn và nhóm (Control-G) tất cả các shape tạo nên chiếc đồng hồ báo thức lại với nhau, thực hiện tương tự với toàn bộ biểu tượng.

finishing off the alarm clock icon

9. Cách tạo biểu tượng ứng dụng hình ảnh

Hãy tiến đến layer thứ sáu và là layer cuối cùng, và chúng ta hãy kết thúc dự án bằng cách tạo ra biểu tượng cho ứng dụng hình ảnh.

Bước 1

Sử dụng một vòng tròn 88 x 88 px (#FF6F00) tạo ra nền của biểu tượng, chúng ta sẽ canh giữa nó với bản vẽ bên dưới.

creating and positioning the main shape for the photos icons background

Bước 2

Tạo ra phần thân của hình bằng cách sử dụng một hình chữ nhật 36 x 36 px, chúng ta sẽ sử dụng màu trắng (#FFFFFF) và sau đó canh giữa nó với bản vẽ ở bên dưới, ở khoảng cách 20 px từ cạnh trên của nó.

creating and positioning the main shape for the photos icons body

Bước 3

Biến shape mà chúng ta vừa mới tạo ra thành outline, bằng cách hoán đổi Fill với Stroke của nó (Shift-X), và sau đó thiết lập Weight của nó thành 4 pxCorner của nó thành Round Join từ bên trong bảng Stroke.

turning the photos icons main body into an outline

Bước 4

Sử dụng công cụ Pen Tool (P) vẽ dải phân cách nằm ngang bằng cách sử dụng một Stroke dày 4 px (#FFFFFF), chúng ta sẽ đặt nó bên trong shape được tạo ra trước đó, khoảng cách 4 px từ cạnh dưới của nó.

adding the horizontal divider line to the lower body of the photos icon

Bước 5

Sử dụng Stroke 4 px tương tự (#FFFFFF) với một Round Join, bắt đầu vẽ ngọn núi đầu tiên bằng cách đặt điểm neo đầu tiên của bạn vào cạnh trái của hình ảnh, ở khoảng cách 10 px từ đường phân cách ngang mà chúng ta vừa mới tạo ra.

Thêm điểm neo thứ 2 ở khoảng cách 10 px ngang và dọc so với cái đầu tiên. Hoàn tất ngọn núi bằng cách thêm điểm neo thứ ba và cuối cùng lên dải phân cách ngang, đồng thời giữ phím Shift để vẽ một đường chéo thẳng.

drawing the photos icons first mountain

Bước 6

Vẽ ngọn núi thứ hai nhỏ hơn, sử dụng Stroke dày 4 px (#FFFFFF), và sau đó một khi bạn đã hoàn tất, chọn và nhóm tất cả các shape tạo nên biểu tượng lại với nhau bằng cách sử dụng phím tắt Control-G.

drawing the photos icons second mountain

Bước 7

Tạo phần dưới của biểu tượng bằng cách sử dụng hình chữ nhật 28 x 6 px, chúng ta sẽ sử dụng màu trắng (#FFFFFF) và sau đó canh giữa nó với phần thấp hơn của khung ảnh, ở khoảng cách 4 px.

creating and positioning the main shape for the lower section of the photos icon

Bước 8

Hoàn tất biểu tượng bằng cách chuyển shape mà chúng ta vừa mới tạo ra thành outline dày 4 px dày (#FFFFFF) với một Round Join, và sau đó điều chỉnh bằng cách thêm một điểm neo mới vào giữa cạnh trên của nó, sau đó chúng ta sẽ loại bỏ để mở path (đánh dấu với màu đỏ).

Chọn shape được tạọ ra và phần còn lại của các thành phần tạo nên biểu tượng và nhóm chúng (Control-G), làm tương tự cho các phần tạo nên biểu tượng.

finishing off the photos icon

 

Final Design

[Tuts]!!

Trên đây là bài hướng dẫn cách tạo bộ icon ứng dụng cho android bằng illustrator trên Secret. Chúng tôi sẽ giới thiệu một loạt các chủ đề (Photoshop – Ps; inDesign – iD; Illustrator – Ai; Lightroom – Lr..) với mong muốn kích thích sự sáng tạo của bạn.

 

Source Tutplus
Via Secret Team Tutquick Team
Comments
Loading...