1. Design & Illustration
  2. Add-Ons

Quick Tip: Cách tạo một banner đơn giản

Scroll to top
Read Time: 4 min
This post is part of a series called Web and Interface Design With Vector.
Quick Tip: How to Create a Simple Vector Web Ribbon in Adobe Photoshop
How to Create a Set of Rubber Band Corner Banner Treatments in Illustrator

() translation by (you can also view the original English article)

Trong hướng dẫn sau, bạn sẽ được học cách sử dụng hiệu ứng Drop Shadow và các tùy chọn Warp để tạo ra một banner đơn giản. Thiết kế này hoàn hảo cho web và in ấn và có thể được tùy chỉnh với các phông chữ và màu sắc khác nhau. Bắt đầu nào!


Bước 1

Vào File > New. Nhập 510 vào ô chiều rộng và 170 trong hộp chiều dài, sau đó nhấp vào nút Advanced. Chọn RGB từ menu Color Mode thả xuống, rồi nhấp OK. Bây giờ bạn đã tạo tài liệu của bạn, bật Grid (View > Grid) và Snap to Grid (View > Snap to Grid).

Tiếp theo, bạn sẽ cần một lưới mỗi 10 px. Vào Edit > Preferences > Guides & Grid, nhập 10 vào ô Gridline mỗi hộp và 1 trong hộp Subdivisions. Bạn cũng có thể mở bảng Info (Window > Info) để xem trước trực tiếp với kích thước và vị trí của các hình dạng của bạn.

Đừng quên thay thế đơn vị đo thành pixel từ Edit > Preferences > Unit > General. Tất cả các tùy chọn này sẽ làm tăng đáng kể tốc độ làm việc của bạn.


Bước 2

Chọn công cụ Rectangle Tool (M) và tạo ra một hình dạng 350 x 100px. Snap to Grid sẽ giảm bớt công việc của bạn. Tô màu cho hình dạng mới này với R=169 G=124 B=80.


Bước 3

Chọn hình dạng đã tạo trong bước trước đó và thêm một nét stroke đầu tiên. Làm cho nó rộng 8pt và thiết lập màu R=232 G=193 B=155. Chọn nét stroke này (từ bảng Appearance) sau đó mở bảng Stroke (Window > Stroke) và nhấn vào nút Align Stroke to Inside.

Với hình dạng này vẫn được chọn, hãy vào bảng Appearance, mở menu fly-out của nó và nhấp vào Add New Stroke. Thao tác này sẽ thêm nét stroke thứ hai cho hình dạng đã chọn. Chọn nét stroke mới này. Làm cho nó rộng 4pt, căn chỉnh nó với bên trong và đặt màu thành R=60 G=36 B=21.


Bước 4

Chọn công cụ Rectangle Tool (M), tạo ra một hình dạng 100 x 100px và đặt nó như thể hiện trong hình ảnh đầu tiên. Một lần nữa, Snap to Grid sẽ có ích. Tô màu bất kỳ cho hình dạng mới này. Chọn nó và đi đến Object > Path > Add Anchor Points. Chọn công cụ Direct Selection Tool (A), chọn điểm neo được đánh dấu trong hình ảnh thứ hai và di chuyển nó 30px sang trái. Tô màu cho hình dạng kết quả với gradient tuyến tính được hiển thị trong hình ảnh cuối cùng.


Bước 5

Chọn hình dạng đã tạo trong bước trước và thêm hai nét stroke giống nhau được sử dụng cho hình dạng khác.


Bước 6

Lấy công cụ Rectangle Tool (M), tạo ra một hình dạng 50 x 10px và đặt nó như thể hiện trong hình ảnh đầu tiên. Tập trung vào hình dạng này. Chọn công cụ Delete Anchor Point Tool (trừ) và nhấp vào điểm neo bên phải, dưới cùng. Tô màu cho hình dạng kết quả với R=60 G=36 B=21.


Bước 7

Chọn các hình dạng được tạo trong ba bước cuối cùng và vào Effect > Transform > Reflect. Đánh dấu vào nút Vertical, sau đó nhấp vào nút Copy. Điều này sẽ thêm một bản sao lật ngang của các hình dạng đã chọn.


Bước 8

Chọn các bản sao đã tạo trong bước trước và di chuyển chúng như thể hiện trong hình ảnh đầu tiên. Một lần nữa, Snap to Grid sẽ giúp giảm bớt công việc của bạn. Chọn gradient từ hình lớn hơn và đặt góc thành 180 độ.


Bước 9

Chọn Type Tool (T), và thêm vào văn bản của bạn. Bạn có thể sử dụng phông chữ "Batik Regular" với kích thước 60pt và đặt màu R=60 G=36 B=21.


Bước 10

Chọn tất cả các hình dạng được tạo cho đến nay và nhóm chúng lại (Control + G). Chọn nhóm mới này và vào Effect > Stylize > Drop Shadow. Nhập dữ liệu được hiển thị bên dưới và nhấp vào OK.


Bước 11

Cuối cùng, chọn lại nhóm này và thêm hiệu ứng Warp (Effect > Warp). Thử nghiệm cho đến khi bạn có được kết quả ưng ý. Dưới đây là một số ví dụ.


Kết luận

Vậy là bạn đã xong, một cách dễ dàng để tạo một banner đơn giản. Thử nghiệm với các phong cách khác nhau và hoàn thành và thưởng thức ý tưởng của bạn. Tôi hy vọng bạn sẽ thích bài hướng dẫn này.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
One subscription. Unlimited Downloads.
Get unlimited downloads