Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
  1. Design & Illustration
  2. UI Design

Chuyển đổi thanh menu của bạn thành xứ sở mùa đông trong Illustrator

by
Read Time:14 minsLanguages:

Vietnamese (Tiếng Việt) translation by Na Dang (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Thực hiện theo hướng dẫn này và tìm hiểu cách biến một trang web thành một xứ sở mùa đông. Bạn có thể tạo các thanh menu và các nút từ con số không, hoặc bạn có thể thực hiện các kỹ thuật này và trang trí các vật phẩm của riêng bạn. Ban đầu, bạn sẽ tạo một thanh menu cơ bản, và sau đó bạn sẽ học cách thêm tuyết và các cột băng, hoa tuyết, hạt lấp lánh và trang trí thêm theo chủ đề mùa đông. Cuối cùng, chúng ta sẽ thử nghiệm thêm nhiều màu sắc và thiết kế hơn, hãy bắt đầu nhé!

1. Bắt đầu một dự án mới

Khởi chạy Adobe Illustrator và vào File > New để mở một tài liệu trống. Nhập tên cho tập tin của bạn và thiết lập kích thước, sau đó chọn Pixels làm Units RGB làm Color Mode. Tiếp theo, vào Edit > Preferences > General và đặt Keyboard Increment thành 1 px và sau đó, hãy chuyển đến Units & Display Performance để đảm bảo rằng các Units như trong hình ảnh sau. Tôi thường làm việc với các cài đặt này và chúng sẽ giúp bạn trong suốt quá trình vẽ.

New document settingsNew document settingsNew document settings

2. Tạo một thanh menu cơ bản

Bước 1

Chọn Rounded Rectangle Tool và vẽ hình đầu tiên với kích thước được hiển thị. Chọn màu tím làm màu tô.

Create menu bar 1Create menu bar 1Create menu bar 1

Bước 2

Với hình chữ nhật vẫn được chọn, hãy chuyển đến bảng Appearance và với thuộc tính Fill màu tím được chọn, nhấn biểu tượng Duplicate Selected Item trùng lặp ở phía dưới. Kết quả là bạn sẽ nhận được một thuộc tính Fill thứ hai ở trên. Sử dụng linear gradient màu trắng sang đen với Angle -90 độ và đặt Blending Mode thành Soft Light.

Create menu bar 2Create menu bar 2Create menu bar 2

Bước 3

Với hình chữ nhật vẫn được chọn, nhân đôi thuộc tính Fill màu tím. Chọn thuộc tính Fill mới từ dưới cùng, giữ nguyên màu tô, rồi vào Effect > Stylize > Drop Shadow và áp dụng hiệu ứng này bốn lần. Đặt tên cho hình dạng này là "bar‑base".

Add shadow to menu barAdd shadow to menu barAdd shadow to menu bar

Đây là các cài đặt cho hiệu ứng Drop Shadow:

Drop Shadow effect settingsDrop Shadow effect settingsDrop Shadow effect settings

Bước 4

Tiếp theo, CopyPaste in Front (Control-F) "bar-base" và sau đó xóa tất cả các sự xuất hiện hiện có bằng cách nhấn biểu tượng Clear Appearance ở dưới cùng của bảng Appearance. Chọn màu đen làm màu tô, sau đó chuyển đến Object > Create Gradient Mesh, chọn 3 Rows6 Column và nhấn OK. Kết quả là bạn sẽ có được một lưới mesh như trong hình ảnh sau đây.

Create gradient meshCreate gradient meshCreate gradient mesh

Bước 5

Bây giờ, lấy Direct Selection Tool (A) và sử dụng nó để chỉ chọn ba điểm lưới mesh được chỉ ra bên dưới và thay đổi màu tô của chúng từ màu đen sang màu tương ứng. Sau khi hoàn tất, hãy đặt hình dạng này thành Blending Mode Soft Light. Hãy đặt tên cho hình dạng này là "bar-mesh"..

Color gradient meshColor gradient meshColor gradient mesh

Bước 6

Sử dụng Rectangle Tool (M) và vẽ một hình chữ nhật có cùng chiều cao với thanh menu của bạn và đặt nó ở giữa. Chọn màu xanh nhạt làm màu tô.

Create menu bar 3Create menu bar 3Create menu bar 3

Bước 7

Với hình chữ nhật màu xanh vẫn được chọn, vào Object > Path > Add Anchor Points để thêm bốn điểm phụ ở hai bên (1). Sử dụng Direct Selection Tool (A) để chỉ chọn các điểm bên trái và phải từ ở giữa và di chuyển chúng 10 px vào trong bằng cách nhấn các phím mũi tên tráiphải trên bàn phím của bạn (2).

Tiếp theo, vào bảng Appearance và sao chép thuộc tính Fill màu xanh hiện có. Đối với Fill mới ở trên cùng, chọn linear gradient từ trắng sang đen ở góc -90 độ và đặt Blending Mode thành Soft Light (3).

Create menu bar 4Create menu bar 4Create menu bar 4

Bước 8

Phóng to vào phía bên phải của hình màu xanh. Sử dụng Pen Tool (P), vẽ đường path chữ V theo các điểm neo của hình dạng màu xanh và tạo cho nó một nét Stroke màu trắng 1 pt. Copy Paste in Front (Control-F) đường path này, sau đó di chuyển bản sao này 1 px sang phải bằng cách nhấn phím mũi tên phải một lần. Chọn nét Stroke màu đen 1 pt cho đường path thứ hai. Bây giờ, Group (Control-G) hai đường path này và đặt nhóm thành Blending Mode Soft Light.

Đừng quên làm tương tự với cạnh bên trái của hình màu xanh hoặc đơn giản là phản chiếu nhóm hiện có.

Create menu bar 5Create menu bar 5Create menu bar 5

3. Tạo tuyết ở trên cùng của thanh menu

Bước 1

Bây giờ thanh menu đơn giản của chúng ta đã sẵn sàng, chúng ta có thể tiến hành với tuyết và các trang trí khác. Để thêm tuyết, tôi khuyên bạn nên sử dụng Pencil Tool (N) thay vì Pen Tool (P) vì nó dễ dàng hơn và chúng ta cũng sẽ có được giao diện tự nhiên/tự do, trông rất đẹp. Nhấp đúp vào Pencil Tool (N) để mở cửa sổ Preferences và thay đổi các cài đặt. Bạn có thể thấy bên dưới những cài đặt mà tôi đã sử dụng, nhưng hãy thoải mái điều chỉnh Fidelity Smoothness theo ý thích của bạn.

Sau khi thiết lập, phóng to ở bên phải của thanh menu của bạn và vẽ một đường path tương tự như bên dưới. Bạn không cần phải quá chính xác: càng ngẫu nhiên càng tốt.

Create snow 1Create snow 1Create snow 1

Bước 2

Vẫn đang sử dụng Pencil Tool (N), vẽ một đường path ngẫu nhiên khác bên dưới đường path đầu tiên và đảm bảo rằng bạn chỉ che một chút ở thanh menu. Nếu điểm cuối của hai đường path không trùng nhau, bạn có thể sử dụng Direct Selection Tool (A) để di chuyển lên trên với nhau như được hiển thị trong cận cảnh.

Tiếp theo, đã đến lúc kết hợp hai đường path thành một. Kéo một lựa chọn bằng Direct Selection Tool (A) qua hai điểm cuối từ bên phải (chỉ cần đảm bảo khóa thanh menu trước tiên) và nhấn Control-J để Join chúng lại. Đánh dấu tùy chọn Corner và nhấn OK. Sau đó, kéo một lựa chọn qua hai điểm cuối từ bên trái và Join chúng với nhau. Tô màu cho hình dạng kết quả với màu trắng.

Create snow 2Create snow 2Create snow 2

Bước 3

Vẫn sử dụng Pencil Tool (N), vẽ một đường path mới bên dưới hình dạng màu trắng nhưng rất gần với nó. Độ dài của đường path này phải bằng với hình dạng màu trắng (1). Tại thời điểm này, chuyển sang Pen Tool (P) và đóng hai điểm cuối ở trên cùng để có được hình dạng (2). CopyPaste in Front (Control-F) hình dạng màu trắng, sau đó nhấn Shift-Control-] để đưa nó ra phía trước mọi thứ. Chọn bản sao trắng mới này cùng với hình dạng màu xanh và nhấn Subtract trong bảng Pathfinder. Bạn sẽ có được một đường path phức hợp (3) nhưng vào Object > Compound Path > Release và xóa các hình dạng nhỏ hơn ở trên cùng (4).

Create snow 3Create snow 3Create snow 3

Bước 4

Tô màu cho hình dạng mà bạn đã thu được ở bước trước với màu sắc được chỉ định và tại thời điểm này, "mảnh" tuyết đầu tiên của tuyết đã sẵn sàng.

Create snow 4Create snow 4Create snow 4

Bước 5

Dùng công cụ Pencil Tool (N) một lần nữa và vẽ một hình nhỏ hơn ở phía bên phải của thanh menu chứa đầy màu trắng (1). Vẽ một đường path khác bên dưới nó và đảm bảo rằng các điểm cuối bên phải và bên trái trùng nhau (2), sau đó đóng đường path ở trên cùng như bạn đã làm trước đó, bằng cách sử dụng chức năng Join hoặc Pen Tool (P) (3). Copy Paste in Front (Control-F) hình dạng nhỏ màu trắng và nhấn Shift-Control-] để đưa nó ra trước mọi thứ. Chọn bản sao màu trắng này cùng với hình dạng màu xanh và nhấn Subtract trong bảng Pathfinder. Tô màu cho hình dạng kết quả với cùng màu (4). Đây là "mảnh" tuyết thứ hai.

Create snow 5Create snow 5Create snow 5

Bước 6

Hãy thêm tuyết vào bên trái của thanh này bằng kỹ thuật tương tự. Đầu tiên, vẽ hình dạng màu trắng bằng Pencil Tool (N) (1), sau đó tạo hình dạng bên dưới bằng cách trừ (2) và tô nó với cùng màu xanh nhạt (3).

Create snow 6Create snow 6Create snow 6

Bước 7

Tiếp tục thêm nhiều "mảnh" khác vào tuyết, một số lớn hơn, một số nhỏ hơn cho đến khi bạn hoàn toàn bao phủ trên đỉnh của thanh menu. Bạn có thể thấy kết quả cuối cùng trong hình ảnh tiếp theo.

Create snow 7Create snow 7Create snow 7

Bước 8

Sử dụng Pencil Tool (N) hoặc Pen Tool (P) để vẽ một hình dạng như hình bên dưới và tô nó với linear gradient như được hiển thị. Bạn cũng có thể vẽ một vài hình dạng nhỏ hơn bên cạnh nó được tô màu cùng một gradient và sau đó chọn tất cả các hình dạng và Group (Control-G) chúng lại với nhau.

Add details on snow 1Add details on snow 1Add details on snow 1

Bước 9

Sử dụng nhóm các hình dạng mà bạn vừa tạo để thêm chi tiết về tuyết. Tạo nhiều bản sao của nhóm và tỷ lệ kích thước, xoay và sắp xếp chúng trên đỉnh tuyết.

Add details on snow 2Add details on snow 2Add details on snow 2

4. Tạo băng đá dưới thanh Menu

Bước 1

Sử dụng Pencil Tool (N) để vẽ một hình dạng ngẫu nhiên ở góc dưới bên phải của thanh menu và chọn màu trắng làm màu tô. Bây giờ, lấy Add Anchor Point Tool (+) và sử dụng nó để thêm một vài điểm bổ sung ở dưới cùng của hình này (1). Sau đó chuyển sang Direct Selection Tool (A) và chỉ kéo ba điểm này xuống dưới để tạo các băng đá đầu tiên (2). Thêm nhiều điểm hơn bằng cách sử dụng Add Anchor Point Tool (+) dọc theo chiều dài của các cột băng và chơi với các tay cầm của chúng để tạo giao diện lượn sóng (3).

Create icicles 1Create icicles 1Create icicles 1

Bước 2

Vẽ một hình dạng ngẫu nhiên mới bên cạnh hình đầu tiên, sau đó thêm nhiều điểm ở phía dưới bằng Add Anchor Point Tool (+) (1). Sử dụng Direct Selection Tool (A) để kéo hai điểm này xuống dưới để tạo hai cột băng mới (2). Thêm nhiều điểm neo dọc theo chiều dài của các cột băng và di chuyển các tay cầm của chúng để tạo ra hình lượn sóng (3).

Create icicles 2Create icicles 2Create icicles 2

Bước 3

Tôi đã thêm một hình dạng màu trắng bên cạnh hình thứ hai, nhưng bạn có thể thêm bao nhiêu tùy ý. Trong hướng dẫn này, thiết kế là tùy thuộc vào bạn.

Create icicles 3Create icicles 3Create icicles 3

Bước 4

Bây giờ, chọn ba hình dạng màu trắng từ phía dưới bên phải của thanh menu và Copy Paste in Back (Control-B). Di chuyển ba bản sao này xuống một chút bằng cách nhấn phím mũi tên xuống trên bàn phím của bạn một hoặc hai lần và chọn màu xanh nhạt làm màu tô.

Create icicles 4Create icicles 4Create icicles 4

Bước 5

Để thêm chiều sâu, vẽ bằng Pencil Tool (N) hoặc Pen Tool (P) một hình dạng mỏng hơn trên đầu mỗi cột băng và tô màu cho tất cả chúng bằng gradient đã hiển thị.

Create icicle 5Create icicle 5Create icicle 5

Bước 6

Để thêm chi tiết, hãy vẽ một vài hình nhỏ hơn nơi bạn có không gian trống và tô chúng với màu được chỉ định.

Create icicles 6Create icicles 6Create icicles 6

Bước 7

Phía dưới bên phải của thanh đã sẵn sàng, nhưng bạn có thể thêm nhiều cột băng ở phía bên trái. Những hình này nhỏ hơn nên chúng sẽ không mất nhiều thời gian để thực hiện. Sử dụng kỹ thuật tương tự như mô tả ở trên. Đầu tiên, vẽ hình dạng màu trắng (1), sau đó CopyPaste in Back (Control-B) hình dạng này, di chuyển nó xuống một chút và thay đổi màu tô (2). Cuối cùng, sử dụng các hình dạng nhỏ hơn được tô màu cùng một gradient để thêm số lượng chi tiết theo ý bạn muốn (3).

Create icicles 7Create icicles 7Create icicles 7

Bước 8

Sử dụng kỹ thuật tương tự, thêm nhiều cột băng ở góc dưới bên trái của thanh menu và tại thời điểm này, bạn đã hoàn thành với tuyết và các cột băng.

Create icicles 8Create icicles 8Create icicles 8

5. Tạo và áp dụng cọ Snowflake Scatter Brush

Bước 1

Vào Snowflake và tải xuống bộ hoa tuyết bằng vector được tạo bởi All-Siladows. Sau đó mở tập tin Illustrator từ kho lưu trữ và sao chép hoa tuyết được tô màu xanh vào tài liệu của bạn. Chọn màu trắng làm màu tô và kéo hoa tuyết vào bảng Brush để lưu nó dưới dạng New Scatter Brush. Trong cửa sổ Scatter Brush Options, đặt Rotation Relative to Path và để phần còn lại của các cài đặt như hiện tại. Nhập tên cho cọ và nhấn OK.

Create Snowflake Scatter BrushCreate Snowflake Scatter BrushCreate Snowflake Scatter Brush

Bước 2

Bây giờ, lấy Pencil Tool (N) một lần nữa và vẽ một số đường path phía trên hoa tuyết như trong hình ảnh tiếp theo. Tạo nét Stroke cho những đường path này với Snowdrops Scatter Brush đã lưu trước đó và mở cửa sổ Stroke Options từ bảng điều Appearance. Thay đổi cài đặt như hiển thị và nhấn OK. Đặt Stroke weight cho các đường path này ở mức 0,25 pt, 0,3 pt, 0,35 pt0,5 pt để có được những hoa tuyết có kích cỡ khác nhau.

Apply Snowflake Scatter BrushApply Snowflake Scatter BrushApply Snowflake Scatter Brush

6. Thêm các món đồ trang trí mùa đông khác nhau

Bước 1

Sao chép những hoa tuyết được đánh dấu với màu xanh dương và xanh lá từ những hoa tuyết đã được đặt vào tài liệu của bạn. Sau đó tô màu chúng với màu trắng, chia tỷ lệ và sắp xếp chúng ở phía bên trái của thanh menu.

Add snowflakes decorationsAdd snowflakes decorationsAdd snowflakes decorations

Bước 2

Tiếp theo, từ bảng Symbols mở Symbol Libraries Menu và trong danh mục Nature, tìm “Trees 1”. Kéo biểu tượng này vào bảng vẽ của bạn và nhấn vào biểu tượng Break Link to Symbol ở dưới cùng của bảng Symbols để mở rộng nó. Tỷ lệ kích cỡ và sắp xếp những cái cây trên cùng của tuyết và gia tăng số lượng nếu bạn muốn thêm nhiều hơn.

Add trees on the barAdd trees on the barAdd trees on the bar

Bước 3

Bây giờ, hãy phóng to vào những cái cây. Lấy công cụ Pencil Tool (N) và vẽ một số đường path ngắn theo các nhánh của cây lớn hơn. Tạo nét Stroke cho các đường path này bằng Charcoal-Thin Art Brush mà bạn có thể tìm thấy trong Brush Libraries Menu > Artistic > Artistic_ChalkCharcoalPencil. Đặt Stroke weight thành 0,5 pt và màu trắng cho tất cả chúng.

Add snow on trees 1Add snow on trees 1Add snow on trees 1

Bước 4

Lặp lại quy trình tương tự cho các cây khác nhưng giảm Stroke weight hơn nữa vì các cây đó nhỏ hơn.

Add snow on trees 2Add snow on trees 2Add snow on trees 2

Bước 5

Tăng số lượng các cây được phủ tuyết mà bạn đã tạo và sắp xếp thêm chúng ở phía bên kia của thanh menu.

Add snow on trees 3Add snow on trees 3Add snow on trees 3

Bước 6

Để tạo ra ngôi nhà nhỏ, hãy bắt đầu bằng cách vẽ một hình dạng ngôi nhà đơn giản được tô màu trắng. Đối với mái nhà, vẽ một đường path với nét Stroke màu đỏ 1 pt và thêm một hình nhỏ màu đỏ làm ống khói. Đối với cửa và cửa sổ, sử dụng Rectangle Tool (M) và gradient đã hiển thị. Để tạo tuyết trên mái nhà, chỉ cần vẽ hai đường path lên trên mái nhà và tạo nét Stroke cho chúng bằng Charcoal-Thin Art Brush như bạn đã làm trước đó cho những cái cây.

Draw a small houseDraw a small houseDraw a small house

Bước 7

Tiếp theo, lấy Ellipse Tool (L) và vẽ ba hình elip để tạo người tuyết. Tô chúng với gradient xuyên tâm được hiển thị, sau đó thêm các hình tròn nhỏ màu đen làm mắt và các nút. Sử dụng Pen Tool (P) để vẽ mũi và khăn quàng cổ, và bạn đã hoàn thành.

Draw a small snowmanDraw a small snowmanDraw a small snowman

Bước 8

Lúc này, bạn có thể sắp xếp ngôi nhà nhỏ và người tuyết nơi bạn muốn.

Add house and snowmanAdd house and snowmanAdd house and snowman

Bước 9

Có vẻ như chúng ta cần phải thêm rất nhiều hạt lấp lánh, phải không nào? Tôi đã giải thích cách tạo hình này trong hướng dẫn Glitter Text Art Effect. Tăng số lượng các hạt lấp lánh và sắp xếp theo ý bạn muốn để nâng cao thiết kế của bạn.

Add sparkles Add sparkles Add sparkles

7. Tạo và trang trí các nút Web

Bước 1

Nếu bạn đã biết thực hiện đến thời điểm này, thì bạn sẽ có thể tạo và trang trí một nút đơn giản thay vì một thanh menu. Bắt đầu bằng cách vẽ một hình chữ nhật tròn nhỏ hơn (1), sau đó tạo lưới mesh như đã giải thích ở đầu hướng dẫn này (2). Thêm các "mảnh" tuyết ở phía trên và các cột băng ở phía dưới (3) và sử dụng Snowflake Scatter Brush để thêm tuyết (4). Sắp xếp các món trang trí mà bạn đã tạo ra (5) và cuối cùng thêm một vài hạt lấp lánh (6). Tất cả các kỹ thuật vẫn như cũ.

Create winter buttons 1Create winter buttons 1Create winter buttons 1

Bước 2

Nhân đôi hoặc tăng số lượng nút đầu tiên và chỉ cần sắp xếp lại các trang trí hiện có để có được nhiều nút hơn.

Create winter buttons 2Create winter buttons 2Create winter buttons 2

8. Tạo thêm các thanh menu

Bước 1

Nhân đôi thanh menu màu tím với tuyết ở trên cùng, những hoa tuyết và cột băng, nhưng không có các món trang trí khác. Chọn “bar-base” và thay thế màu tím bằng màu xanh lá được chỉ định. Giữ phần còn lại của cài đặt như bình thường.

Create green menu bar 1Create green menu bar 1Create green menu bar 1

Bước 2

Tiếp theo, chọn hình từ giữa và thay thế màu xanh dương nhạt bằng màu xanh lá nhạt. Sắp xếp tất cả các món trang trí theo một cách khác và bạn sẽ có được một thanh menu mới.

Create green menu bar 2Create green menu bar 2Create green menu bar 2

Bước 3

Để tạo thanh menu màu xám, nhân đôi thanh màu tím một lần nữa. Chọn “bar-base” và thay thế màu tím bằng màu xám được chỉ định. Sau đó, chọn hình từ giữa và lần này thay thế màu xanh nhạt bằng màu hồng. Phần còn lại của các cài đặt vẫn giữ nguyên. Cuối cùng, sắp xếp tất cả các món trang trí như bạn muốn.

Create gray menu barCreate gray menu barCreate gray menu bar

Xứ sở mùa đông của bạn đã sẵn sàng!

Các thanh và nút menu này khá cơ bản và chúng hồ trợ cho trình diễn, nhưng hãy tự do sử dụng bất kỳ yếu tố trang web nào khác để tạo ra diện mạo xứ sở mùa đông này. Bạn có thể bắt đầu từ đầu hoặc bạn có thể sử dụng một vài vật phẩm để trang trí các menu và nút của riêng bạn. Chắc chắn sẽ có nhiều thú vị trong khi làm như vậy, và nếu bạn muốn chia sẻ bài sáng tạo xứ sở mùa đông của mình, tôi rất mong muốn được nhìn thấy nó.

Final ResultFinal ResultFinal Result
One subscription.
Unlimited Downloads.
Get unlimited downloads