Thủ thuật

Hướng dẫn chèn Font Awesome Icons vào Photoshop

Cập nhật lần cuối: 21:52, 24 tháng 11, 2022

Chắc hẳn bạn từng một lần gặp khó khăn khi chèn icon vào Photoshop. Tìm mãi nhưng vẫn chưa có icon nào vừa ý, icon vừa ý thì màu sắc lại không hài hoà với hình ảnh, phóng to icon lên cho cân với hình thì lại bị vỡ nét. Quên những ngày vật vã với icon đi, Puramu sẽ bật mí cho bạn Font Awesome Icons, giúp bạn tiết kiệm thời gian chèn icon vào Photoshop rất nhiều lại còn có thể tuỳ chỉnh mọi thứ theo ý bạn muốn một cách dễ dàng nữa.

Font Awesome Icons là gì?

Font Awesome Icons là một thư viện chứa font chữ ký hiệu (icon), với hơn 16.000 icon đa dạng, phong phú phục vụ cho các designer, lập trình viên, người sáng tạo nội dung.

Font Awesome chứa nhiều định dạng file font khác nhau như: svg, otf, ttf, eot, woff… Chính vì thế mà Font Awesome có thể hoạt động trơn tru trên hầu hết các hệ điều hành máy tính, các phần mềm và cả trang web. Hơn thế nữa, thư viện Font Awesome cũng cho phép người dùng dễ dàng thay đổi kích thước và màu sắc của icon.

Font Awesome
Font Awesome

Tại sao lại chọn Font Awesome? 

Trước đây, muốn chèn icon vào hình, chúng ta sẽ lên google tìm icon vừa ý sau đó cắt và chỉnh sửa icon đó rồi chèn vào hình. Cách này rất mất thời gian và gặp phải một số bất tiện như hình của bạn sẽ bị vỡ nét, kém chất lượng khi muốn phóng to icon đó lên hoặc màu sắc của icon không hài hoà với tổng thể hình ảnh bạn muốn thiết kế cho khách hàng. Với Font Awesome Icons, bạn có thể chèn icon vào một tấm hình photoshop thật nét, có thể tuỳ chỉnh tuỳ ý hết tất cả mọi thứ như màu sắc, kích thước,..

Mọi người thường sử dụng icon trong hình ảnh
Mọi người thường sử dụng icon trong hình ảnh

Hướng dẫn

Trong bài này, Puramu sẽ hướng dẫn bạn cách chèn Font Awesome Icons vào file Photoshop của mình. Chúng ta sẽ làm việc với Font Awesome bản Free và sử dụng nó với Photoshop CC 2022 được cài đặt trên Windows 10.

Bước 1: Tải Font Awesome Free

  • Truy cập trang web Font Awesome, sau đó lướt xuống bạn sẽ thấy mục Download (như trong hình). Nhấp vào Download để tải về máy.
Download Font Awesome
Download Font Awesome

Nhấp vào download sẽ hiện ra một loạt các phiên bản của Font Awesome bản Pro và Free trên Desktop và Web. Trong hướng dẫn này chúng ta sẽ sử dụng Font Awesome trong Photoshop nên Puramu chọn tải bản Free trên Desktop. Tại thời điểm viết bài này phiên bản mới nhất của Font Awesome là 6.2.0.

Font Awesome 6 là phiên bản mới nhất tại thời điểm Puramu viết bài
Font Awesome 6 là phiên bản mới nhất tại thời điểm Puramu viết bài
  • Sau khi tải về máy bạn giải nén tệp đã tải xuống trên ổ cứng. Bạn sẽ thấy các thư mục như hình dưới.
Thư mục chứa phông chữ Font Awesome sau khi được giải nén
Thư mục chứa phông chữ Font Awesome sau khi được giải nén
  • Mở thư mục otfs. Bây giờ bạn sẽ thấy các tệp phông chữ Font Awesome:
Các tệp phông chữ Font Awesome
Các tệp phông chữ Font Awesome
  • Chọn một hay nhiều phông chữ mà bạn muốn cài vào máy hoặc nhấn tổ hợp phím Ctrl + A để chọn tất cả. Sau đó nhấp chuột phải chọn Install. Phông chữ sẽ được cài đặt ngay lập tức.

Vậy là chúng ta đã cài đặt xong tệp phông chữ Font Awesome rồi. Khi phông chữ được cài vào máy thì mặc định nó sẽ tự động được thêm vào Photoshop. Chúng ta có thể vào trình quản lí font của Windows kiểm tra để chắc chắn rằng Font Awesome đã được cài đặt thành công

  • Trong Windows, khởi chạy trình quản lý phông chữ. Bạn sẽ thấy (các) phông chữ vừa cài đặt.
Font Awesome hiển thị trong Windows
Font Awesome hiển thị trong Windows
  • Khởi chạy Photoshop. Mở danh sách các phông chữ có sẵn của bạn. Bạn sẽ thấy các phông chữ của Font Awesome được liệt kê như hình.
Font Awesome đã hiển thị trong Photoshop
Font Awesome đã hiển thị trong Photoshop

Bước 2: Tìm icon trong Font Awesome Free

Sau khi cài đặt xong các phông chữ trong Font Awesome, bạn có thể sử dụng các icon của Font Awesome trong Photoshop dưới dạng các loại phông chữ. Bạn cần tìm icon để có thể sử dụng nó trong Photoshop.

Truy cập vào Thư viện Icons trong Font Awesome, nhấp vào thanh tìm kiếm để nhập tên icon cần sử dụng. Lưu ý là bạn phải gõ tên icon bằng tiếng anh nhé. Ví dụ trong hình là Puramu đang tìm icon Car (xe hơi).

Icon xe hơi của Font Awesome
Icon xe hơi của Font Awesome

Sau đó nhấp chuột vào icon bạn thích, một cửa sổ nhỏ mới sẽ được bật lên. Bạn nhấp chuột vào icon nhỏ khoanh tròn trong hình dưới, icon sẽ tự động được sao chép.

Sao chép Icon
Sao chép Icon

Hoặc nếu bạn chưa xác định được icon nào mình cần, bạn có thể lướt xuống và khám phá các icon trong thư viện Font Awesome.

Thư viện Icons của Font Awesome
Thư viện Icons của Font Awesome

Ví dụ, Puramu sẽ thử nhấp vào mục Humanitarian Icons nhé. Chúng ta sẽ thấy rất nhiều icon hiện ra.

Humanitarian Icons của Font Awesome
Humanitarian Icons của Font Awesome

Khi bạn đã ưng ý được icon nào thì bạn nhấp vào icon đó, một cửa sổ nhỏ mới sẽ được bật lên. Sau đó bạn tiết hành copy icon giống như hướng dẫn bên trên.

Bước 3: Chèn icon vào hình ảnh Photoshop của bạn

Sau khi đã tìm được icon ưng ý, chúng ta tiến hành chèn icon trong Font Awesome vào hình ảnh Photoshop của mình. Trong ví dụ này, Puramu sẽ chèn icon vào một file mới.

  • Khởi chạy Photoshop CC trên máy tính, chọn File -> New trên thanh menu để tạo file PSD mới. Nhấp vào công cụ Type Tool (phím tắt T) trong hộp công cụ.
  • Kéo và thả chuột để tạo một khung hình chữ nhật.
  • Chọn phông chữ Font Awesome mà bạn có trong Photoshop và dán icon vừa copy vào.
Chèn icon vào hình ảnh Photoshop
Chèn icon vào hình ảnh Photoshop

Bạn có thể phóng to hoặc thu nhỏ icon bằng cách nhấp vào icon kéo ra hoặc kéo vào, đổi màu cho icon bằng cách chọn Color Picker trên thanh công cụ và chọn màu bạn muốn như hình dưới.

Tuỳ chỉnh Font Awesome Icons
Tuỳ chỉnh Font Awesome Icons

Vậy là Puramu đã hướng dẫn xong cách chèn Font Awesome Icons vào Photoshop rồi. Mong rằng bạn có thể sử dụng icon dễ dàng hơn khi thao tác với Photoshop.