Dù cho ngày nay mọi người thường sử dụng điện thoại thông minh của mình để xem giờ thì chiếc đồng hồ vẫn là một trong những đồ vật trang trí thông dụng nhất. Những chiếc đồng hồ xung quanh chúng ta có vô vàn kiểu dáng, màu sắc và công dụng: đồng hồ đếm thời gian nhà bếp, đồng hồ báo thức, đồng hồ lật số, đồng hồ treo tường, đồng hồ tủ đứng và nhiều loại khác nữa. Show Trong bài hướng dẫn này, chúng ta sẽ cùng tạo ba loại đồng hồ khác nhau theo xu hướng thiết kế dạng phẳng, sử dụng các màu sắc đồng nhất và các hình học cơ bản. Chúng ta sẽ học cách thiết kế mặt đồng hồ bằng Rotate Tool cũng như sử dụng các công cụ và các chức năng tiện dụng khác của phần mềm Adobe Illustrator. Sau khi kết thúc bài hướng dẫn này, bạn sẽ có thể tạo ra hình các đồ vật dạng phẳng bất kì, ví dụ các icon đồng hồ dạng phẳng hoặc các icon đồ dùng nấu bếp hoặc bất kì đồ vật gì. Hãy chắc chắn là bạn xem qua phần hình vector trên trang GraphicRiver để lấy thêm cảm hứng. Và hãy cùng bắt đầu thôi nào! 1. Cách Thiết kế một Đồng hồ đếm giờ Nhà bếpBước 1Chúng ta sẽ bắt đầu tạo ra phần mặt đồng hồ. Sử dụng Ellipse Tool (phím tắt L) để tạo một hình tròn màu be nhạt có kích thước 95 x 95 pixel. Copy hình tròn và dán một hình mới phía sau hình ban đầu bằng lệnh Paste in Back (tổ hợp phím Control-C > Control-B). Tăng kích thước của hình copy lên 175 x 175 pixel, thay đổi kích thước bằng bảng điều khiển phía trên hoặc trong bảng Transform. Để màu Fill đậm hơn một chút.  Bước 2Hãy cùng tạo các vạch đánh dấu phút và giây trên mặt đồng hồ, bắt đầu từ phía trên. Chọn Line Segment Tool (phím tắt \) hoặc Pen Tool (phím tắt P), nhấn giữ phím Shift và tạo một đường thẳng ngắn với đường viền (Stroke) màu đỏ. Tại bảng điều chỉnh đường viền (Stroke), đặt độ dày đường viền (Weight) là 2 pt và chọn phần Cap là Round Cap, để cho đoạn thẳng đủ dày và hơi cong ở các phần đầu. Bước 3Chọn phần viền bằng công cụ Selection Tool (phím tắt V), nhấn giữ tổ hợp phím Alt-Shift và kéo xuống để copy hình mới tại phía dưới mặt đồng hồ. Nhóm các đoạn đường viền ban đầu và mới copy lại với nhau bằng tổ hợp phím Control-G. Hãy chắc chắn là cả hai đoạn đường viền được căn giữa chính xác. Để làm điều này, chọn nhóm hai đoạn đường viền cùng với hình tròn và chọn lại hình tròn một lần nữa để nó trở thành Key Object. Mở bảng Align và bấm chọn Horizontal Align Center. Nhân đôi nhóm các đoạn đường viền (Tổ hợp phím (Control-C > Control-F) và quay hình mới một góc 90 độ. Bước 4Bây giờ chúng ta sẽ thêm các vạch nhỏ hơn thể hiện 60 giây. Nhân đôi (Duplicate) các đoạn đường viền màu đỏ mà chúng ta đa tạo ra trước đó, chuyển màu đường viền (Stroke) sang màu nâu và đặt độ dày đường viền (Weight) là 1 pt. Bạn có thể ẩn các đường viền màu đỏ bằng cách bấm vào biểu tượng con mắt trong bảng Layers để không bị chúng làm mất tập trung. Bước 5Vẫn giữ chọn nhóm các đoạn đường viền, nhấp đôi chuột (double-click) vào Rotate Tool (R) và đặt góc (Angle) là 360/60 để tự động tính các giá trị. Bấm Copy để tạo hai đoạn đường viền mới. Bấm Control-D để lặp lại thao tác gần nhất trước đó và cứ tiếp tục bấm Control-D để thêm 30 cặp đoạn đường viền. Bây giờ chúng ta có thể làm cho các đoạn đường viền màu đỏ hiện trở lại và đưa chúng nằm trên các đoạn đường viền màu nâu bằng tổ hợp phím Shift-Control-]. Bước 6Bây giờ chúng ta sẽ làm tiếp phần thân hoặc vỏ của đồng hồ đếm giờ. Chọn công cụ Rectangle Tool (M) và tạo hình chữ nhật màu đỏ kích thước 140 x 145 pixel. Chuyển hình này nằm phía sau phần mặt đồng hồ bằng lệnh Send to Back (Tổ hợp phím Shift-Control-[). Chọn các điểm neo (anchor point) bên trái và bên phải của hình chữ nhật bằng công cụ Direct Selection Tool (A) và kéo các điểm đánh dấu đoạn uốn tròn của Live Corners để uốn cho phần trên thành một đoạn cong hoàn toàn. Bước 7Chúng ta cũng có thể đặt bán kính cong (Corner Radius) của các góc trên là 15 pt tại bảng điều khiển phía trên trong khi chọn chúng bằng Direct Selection Tool (A). Bây giờ chúng ta sẽ tạo chiều sâu cho hình, tạo một hình tròn bao quanh thân đồng hồ. Chọn hình thân đồng hồ và chọn mục Object > Path > Offset Path và đặt giá trị Offset là 5 pixel, các phần khác để giá trị mặc định. Làm cho hình tròn mới tạo có màu đậm hơn một chút. Bước 8Chọn công cụ Rounded Rectangle Tool và hãy cùng thêm một hình đế nhỏ ở phía dưới phần thân đồng hồ. Tạo một hình màu đỏ sẫm có kích thước 115 x 15 pixel có giá trị bo góc (Conner) là 7.5 pixel. Bước 9Hãy cùng thêm một kim cho đồng hồ đếm giờ của chúng ta. Chọn công cụ Ellipse Tool (L) và tạo một hình oval đỏ kích thước 25 x 90 pixel. Chọn màu từ thân đồng hồ sử dụng công cụ Eyedropper Tool (I). Nhân đôi hình oval và đặt nó thành kích thước 9 x 88 pixel, tạo cho phần hình phía trên có màu nhạt hơn một chút. Bước 10Chuyển sang công cụ Rectangle Tool (M) và tạo một hình màu đổ sẫm có kích thước 33 x 55 pixel. Đưa hình này ra phía sau chiếc kim đồng hồ bằng cách bấm hai lần tổ hợp phím Control-[. Làm cho các cạnh phía trên của hình hơi cong một chút, đặt bán kính cong Radius là 9 pixel. Bước 11Chúng ta cần làm cho phần đáy của hình hơi cong để khít với mặt đồng hồ. Chọn công cụ Curvature Tool (phím tắt Shift-') và kéo phần cạnh dưới xuống để tạo độ cong. Bước 12Hãy cùng thêm các chi tiết cuối cùng cho chiếc đồng hồ đếm giờ: một chút sáng trên phần thân bằng nhựa. Sử dụng công cụ Rectangle Tool (M) để tạo một hình kích thước 55 x 190 pixel với màu đỏ nhạt hơn màu của phần thân. Chọn cả phần thân và hình chữ nhật mới tạo, sau đó chọn công cụ Shape Builder Tool (Shift-M). Giữ phím Alt và bấm vào phần phía trên của hình chữ nhật để xóa phần đó đi. Bước 13Xóa phần cuối của hình chữ nhật bằng cách sử dụng phương thức tương tự - và chúng ta đã xong! Chiếc đồng hồ đếm giờ nhà bếp của chúng ta đã được hoàn thiện. Hãy cùng chuyển sang phần thiết kế chiếc đồng hồ tiếp theo. 2. Cách tao một chiếc Đồng hồ lật sốBước 1Chúng ta sẽ bắt đầu thiết kế chiếc đồng hồ lật số từ phần màn hình của nó. Sử dụng công cụ Rounded Rectangle Tool để tạo một hình màu vàng nhạt có kích thước 170 x 85 pixel có bán kính cong góc (Corner Radius) là 8 pixel. Vẫn chọn hình đó, tới phần Object > Path > Offset Path và chọn giá trị Offset là 10 pixel. Tô màu xanh sẫm cho hình mới. Bước 2Lần này tiếp tục sử dụng Offset Path hoặc chỉ cần tạo một hình chữ nhật kích thước 210 x 130 pixel ở phía trong hai hình trước. Tô màu ngọc (vivid turquoise) và đặt bán kính cong góc (Corner Radius) là 25 pixel là chúng ta đã có phần thân đồng hồ bằng nhựa. Thêm một phần vành có màu đậm hơn cho hình màu xanh bằng cách thêm một Offset Path có giá trị 3 pixel hoặc tạo một hình chữ nhật kích thước 220 x 140 pixel có bo góc. Bước 3Tạo một hình chữ nhật bo góc màu xanh ngọc sẫm có kích thước 170 x 10 pixel cho phần đế và chuyển hình này ra phía sau (tổ hợp phím Shift-Control-[). Cùng tạo thêm một số nút bấm. Thêm một hình chữ nhật bo góc có kích thước 120 x 25 pixel phía trên của đồng hồ và tô nó màu xanh đậm giống với màu cạnh viền của màn hình. Đưa nút bấm nằm phía sau phần thân đồng hồ. Thêm một nút bấm khác ở phần bên phải của đồng hồ với màu xanh ngọc sẫm. Bước 4Bây giờ là lúc thêm phần số! Tôi sử dụng công cụ gõ chữ Type Tool (T) và font chữ Bebas để tạo thời gian là 19:30. Chọn Object > Expand cho phần chữ, biến nó thành các đường có thể điều chỉnh được. Bước 5Di chuyển từng chữ số riêng rẽ (nếu cần thiết), sao cho khoảng cách giữa số 9 và số 3 rộng hơn một chút so với khoảng cách của các chữ số còn lại. Chọn công cụ Rounded Rectangle Tool và thêm các hình màu xanh sẫm có kích thước 37 x 76 pixel để tạo các phần nền phía sau mỗi con số. Bạn có thể tạo một hình chữ nhật ở phía bên trái và sau đó kéo nó sang bên phải trong khi nhấn giữ tổ hợp phím Alt-Shift để copy thành một hình mới. Sau đó nhấn tổ hợp phím Control-D hai lần để lặp lại thao tác gần nhất. Sử dụng bảng điều khiển căn chỉnh (Align panel) để chỉnh cho hình chữ nhật nằm ngang giữa (Horizontal Center) của phần chữ số. Bước 6Sử dụng công cụ Line Segment Tool (\) hoặc Pen Tool (P) để thêm một đường ngăn giữa số hiển thị giờ và số hiển thị phút. Nhấn giữ Shift và tạo một đường màu xanh đậm dọc theo phần chính giữa của mặt đồng hồ. Đặt giá trị độ dày (weight) đường viền là 2 pt tại bảng điều khiển đường viền (Stroke panel) Và bây giờ tiếp tục cắt ngang phần chữ số. Chọn công cụ tạo hình chữ nhật Rectangle Tool (M) và tạo một đường ngang hẹp chạy dọc theo phần hiển thị thời gian (Tôi tô màu đỏ cho dễ nhìn). Bây giờ chọn nguyên phần chữ số và vào mục Object > Compound Path > Make (Control-8), làm cho các phần số trở thành một đối tượng duy nhất. Bước 7Chọn hình kết hợp của các chữ số mới tạo ra cùng với đường màu đỏ và áp dụng chức năng Minus Front tại bảng Pathfinder để cắt một đường ngang, tạo ra một khoảng trống ngang ở giữa các con số. Bước 8Xong rồi! Chiếc đồng hồ lật số của chúng ta đã hoàn thành. Bây giờ chúng ta tiếp tục làm phần tiếp theo! 3. Cách tạo một chiếc Đồng hồ treo tường hiện đạiBước 1Giống như các lần trước, chúng ta bắt đầu với phần mặt đồng hồ. Chọn công cụ Rounded Rectangle Tool để tạo một hình vuông kích thước 120 x 120 pixel màu be nhạt. Áp dụng Object > Path > Offset Path với giá trị Offset là 5 pixel và chọn màu của hình mới hơi đậm hơn một chút. Bước 2Bây giờ tiếp tục sử dụng Offset Path hoặc tạo một hình chữ nhật mới có kích thước 150 x 150 pixel và bán kính bo góc là 13 pixel. Tô màu cho hình này với màu cam tươi và căn chỉnh nó nằm chính giữa mặt đồng hồ (chọn hình chữ nhật và phần mặt đồng hồ (với phần mặt đồng hồ là Key Object), bấm chọn Horizontal Align Center và Vertical Align Center tại bảng điều khiển căn chỉnh Align). Áp dụng Offset Path là 5 pixel cho hình màu cam và làm cho phần rìa đậm hơn một chút để tạo chiều sâu cho chiếc đồng hồ. Bước 3Chúng ta cùng bắt đầu tạo phần hiển thị thời gian trên mặt đồng hồ. Sử dụng công cụ Ellipse Tool (L) và nhấn giữ Shift để tạo một hình tròn màu cam kích thước 12 x 12 pixel ở phần phía trên của mặt đồng hồ. Nhấn giữ tổ hợp phím Alt-Shift và kéo hình tròn xuống dưới để copy thành một hình mới ở phần dưới của mặt đồng hồ. Nhóm (tổ hợp phím Control-G) cả hai hình tròn và căn chỉnh (Align) chúng tạo thành mặt đồng hồ. Bước 4Nhân đôi (tổ hợp phím Control-C > Control-F) nhóm các hình tròn và xoay chúng một góc 90 độ. Nhân đôi nhóm các hình dọc một lần nữa và tiếp tục thêm các phần hiển thị thời gian khác. Chọn màu của hình mới copy là None và màu viền (Stroke) là xanh lơ đậm. Đặt độ dày (weight) đường viền là 2 pt tại bảng điều khiển đường viền (Stroke panel). Bước 5Bấm đúp vào công cụ xoay Rotate Tool (R) và đặt giá trị góc xoay (Angle) là 30 độ. Chọn Copy và tiếp tục bằng cách nhấn tổ hợp phím Control-D nhiều lần để thêm 12 vòng tròn trên mặt đồng hồ. Bước 6Đưa các vòng tròn màu cam lên phía trước (dùng tổ hợp phím Contrl-]) để che lên các vòng tròn màu xanh đậm có cùng vị trí. Bây giờ hãy cùng thêm các kim đồng hồ! Bắt đầu bằng cách tạo một vòng tròn màu đỏ và căn chỉnh nó ở chính giữa mặt đồng hồ (sử dụng bảng điều khiển căn chỉnh Align). Tạo một hình ngắn thẳng đứng màu xanh đậm sử dụng Line Segment Tool (\) và đặt độ dày (weight) đường viền là 7 pt và chọn mục Cap là Round Cap, đây chính là kim giờ. Đưa hình này ra phía sau đường tròn màu đỏ, sử dụng phím tắt Control-[. Bước 7Thêm kim phút bằng cách tương tự, làm cho nó dài hơn và giảm đô dày đường viền (Stroke Weight) còn 4 pt. Cuối cùng, tạo kim giây với màu đường viền là màu đỏ và độ dày đường viền là 3 pt. Bước 8Hãy cùng thêm một số chi tiết nhỏ cho mặt đồng hồ. Sử dụng công cụ Ellipse Tool (L) để tạo một hình oval lớn bao trùm lên phần dưới của mặt đồng hồ. Bây giờ chọn cả mặt đồng hồ và hình oval, chuyển sang công cụ Shape Builder Tool (Shift-M) và bấm chọn vào phần trên của mặt đồng hồ để chia nó ra làm hai nửa. Chọn màu của nửa phía trên đậm hơn một chút để tạo ra phần bóng. Bước 9Thế là chúng ta đã hoàn thành thiết kế hình chiếc đồng hồ treo tường! Chiếc đồng hồ kêu Tích-Tắc! Như vậy là bộ Icon Đồng hồ của chúng ta đã được hoàn thành!Rất tốt! Tôi hi vọng các bạn thấy hứng thú khi theo dõi bài hướng dẫn này và khám phá thêm được một số thủ thuật hữu ích mới. Các bạn có thể tiếp tục mở rộng bộ icon này và tạo ra thêm nhiều icon đồng hồ khác, giống như hình dưới đây. |
