Trong hướng dẫn ngày hôm nay chúng ta sẽ tạo ra một số thay đổi nhỏ cho chương trình bình thường của chúng ta, và giải quyết một chủ đề mà tôi đã muốn làm trong một thời gian dài. Nếu bạn vẫn chưa hiểu ra từ tiêu đề, tốt thôi, chúng ta sẽ tạo ra 5 biểu tượng đơn giản mà bạn có thể biến thành các biểu tượng cho bất kỳ ứng dụng Android trong tương lai mà bạn có thể tạo ra hoặc được tham gia vào việc tạo ra chúng.
Đố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.
1. Cách 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:
Mẹo nhỏ: 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 Illustratorxử 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:
Mẹo nhỏ: bạn có thể tìm hiểu thêm về Grid bằng cách đọc bài nghiên cứu sâu về cách hệ thống Grid trong Illustrator hoạt động.
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.
Bây giờ, nếu bạn là người mới đối với "quy trình pixel-perfect", thì tôi đề nghị bạn tìm hiểu bài hướng dẫn cách tạo ra tác phẩm nghệ thuật pixel-perfect, nó sẽ giúp bạn mở rộng kỹ năng của bạn một cách nhanh chóng.
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:
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.
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.
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.
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ẽ.
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ó.
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 px và Corner của nó thành Round Join, tất cả đều ở trong bảng Stroke.
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 pxxung quanh nó.
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).
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.
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.
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ó.
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ó.
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.
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ó.
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ó.
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.
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.
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ẽ.
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ẽ.
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.
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).
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 px và Corner của nó thành Round Join.
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ó.
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.
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ẽ.
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.
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.
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ó.
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.
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.
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.
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.
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.
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.
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ó.
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 px và Corner của nó thành Round Join từ bên trong bảng Stroke.
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ó.
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.
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.
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.
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.
Tóm tắt lại!
Tôi hy vọng rằng bạn đã xoay sở để theo kịp từng bước làm, và quan trọng nhất là học được cái gì đó mới và hữu ích trong quá trình đó. Như đã nói, hẹn gặp bạn trong phần kế tiếp!
Đố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.
1. Cách 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
- Color Mode: RGB
- Raster Effects: Screen (72ppi)
- Preview Mode: Default
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
Mẹo nhỏ: bạn có thể tìm hiểu thêm về Grid bằng cách đọc bài nghiên cứu sâu về cách hệ thống Grid trong Illustrator hoạt động.
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.
Bây giờ, nếu bạn là người mới đối với "quy trình pixel-perfect", thì tôi đề nghị bạn tìm hiểu bài hướng dẫn cách tạo ra tác phẩm nghệ thuật pixel-perfect, nó sẽ giúp bạn mở rộng kỹ năng của bạn một cách nhanh chóng.
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
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.
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.
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.
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ẽ.
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ó.
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 px và Corner của nó thành Round Join, tất cả đều ở trong bảng Stroke.
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 pxxung quanh nó.
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).
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.
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.
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ó.
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ó.
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.
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ó.
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ó.
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.
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.
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ẽ.
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ẽ.
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.
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).
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 px và Corner của nó thành Round Join.
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ó.
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.
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ẽ.
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.
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.
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ó.
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.
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.
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.
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.
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.
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.
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ó.
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 px và Corner của nó thành Round Join từ bên trong bảng Stroke.
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ó.
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.
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.
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.
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.
Tôi hy vọng rằng bạn đã xoay sở để theo kịp từng bước làm, và quan trọng nhất là học được cái gì đó mới và hữu ích trong quá trình đó. Như đã nói, hẹn gặp bạn trong phần kế tiếp!
Người dịch: Dai Phong
NGUỒN: TUTSPLUS.COM
NGUỒN: TUTSPLUS.COM
