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.
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.
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 Stroke4 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!
