BREAKING NEWS

Blogger templates

Thứ Năm, 26 tháng 3, 2015

25 Font miễn phí cho in ấn và Web

Việc tìm kiếm những font chữ thích hợp để áp dụng vào web không dễ chút nào, nhất là những font chữ miễn phí thường không thỏa mãn được những yêu cầu của các designer. Vô tình tìm kiếm trên mạng những font chữ đẹp, mình xin sưu tập lại những font chữ này để chia sẻ cùng các bạn.
free-fonts-for-print-and-web

Bold Fonts

Những font chữ này rất thích hợp cho các dòng tiêu đề, subheading và logo.
Cubano
cubano-free-fonts-for-print-and-web
Chunk Five
chunk-five-free-fonts-for-print-and-web
Lot
lot-free-fonts-for-print-and-web
Bemio
bemino-free-fonts-for-print-and-web
Commando
commando-free-fonts-for-print-and-web

Elegant Fonts

Font là một công cụ rất quan trọng trong việc nhận dạng thương hiệu và các Elegant fonts rất thích hợp cho việc đó.
Caviar Dreams
caviar-dreams
Vevey
vevey
Raleway
raleway
Alex Brush
alex-brush
Sofia
sofia

Sans Serif Fonts

Với những font này, các bạn có thể dùng cho cả trong in ấn và thiết kế web.
Governor
governor
Sansation
sansation
Days
days
Coolvetica
coolvetica
Code
code

Retro Fonts

Airstream
airstream
Ranger
ranger
Hamburger Heaven
hamburger-heaven
Highlands
highlands
Saniretro
saniretro

Modern Fonts

Nếu các thiết kế của bạn muốn hướng tới những người trẻ trung và hiện đại, thì những font chữ sau đây sẽ rất thích hợp để sử dụng.
Pricedown
pricedown
Blackout
blackout
Furore
furore
Homestead
homestead
Franchise
franchise
Hy vọng với những font mà mình chia sẻ trong bài viết này, sẽ giúp các bạn tìm được font ưng ý nhất cho các thiết kế của mình.

Tạo viền nhiều lớp quanh chữ với Smart Objects trong Photoshop

Hôm nay mình sẽ chia sẻ cho các bạn một kinh nghiệm trong việc tạo đường viền bên ngoài chữ với việc sử dụng tính năng Smart Objects có trong Photoshop. Để có thể thực hiện được hiệu ứng chữ này, các bạn cần phải cài đặt phiên bản Photoshop CS2 trở nên.
Đây là kết quả mà các bạn sẽ có được khi thực hiện xong bài viết này.
photoshop-multiple-text-strokes
Bước 1 : Tạo văn bản mới với kích thước tùy ý, sau đó chọn công cụ Type Tool (phím tắt T) gõ chữ “style” với bất kì font tùy ý trên nền đen.
original-document
Lúc này nếu các bạn quay qua nhìn tại  Layers panel, các bạn sẽ thấy layer chữ được chọn như hình bên dưới.
photoshop-layers-panel
Để tạo đường viền đầu tiên, các bạn click vào icon  Layer Effects nằm ở phía dưới Layers panel:
layer-styles-icon
Sau đó, chọn Stroke từ danh sách xổ xuống.
stroke-layer-effect
Lúc này , một hộp thoại sẽ xuất hiện, các bạn nhấp  chọn vào bảng màu như hình dưới.
photoshop-layer-style-dialog-box
Màu mà chúng ta chọn sẽ có thông số như sau :
photoshop-color-picker
Sau khi chọn màu xong, nhấn Ok để đóng hộp thoại, đồng thời các bạn tăng đường viền với giá trị Size là 21 px.
stroke-size-21px
Lúc này, kết quả mà chúng ta nhận được sẽ là :
text-initial-stroke
Bước 2 : Bây giờ chúng ta sẽ tạo thêm một đường viền thứ 2 quanh chữ, nhưng ngặt một nỗi, mặc định thì Photoshop chỉ cho phép chúng ta chèn Stroke effect một lần cho một layer. Do đó chúng ta không thể tạo đường viền như đã làm ở bước 1, mà lúc này chúng ta sẽ chuyển layer chữ sang chế độ Smart Objects. Để làm điều này, thì các bạn chọn vào biểu tượng nằm ở bên góc phải của Layers panel như hình bên dưới :
layer-menu-icon
Sau đó nhấp vào dòng chữ Convert to Smart Object trong danh sách menu.
convert-to-smart-object
Không có gì thay đổi cho hiệu ứng chữ lúc này, tuy nhiên, các bạn sẽ thấy một icon nằm bên góc phải của layer chữ , điều này cho thấy layer đã được chuyển sang Smart Object.
smart-object-icon
Bước 3 : Bây giờ thì chúng ta lại có thể thêm đường viền cho chữ với hiệu ứng Stroke. Click vào icon Layer Effects nằm tại vị trí cuối của Layers panel và chọn Stroke từ menu xuất hiện.
adding-second-stroke
Lúc này, các bạn sẽ chỉnh thông số cho hộp thoại mới xuất hiện như sau :
layer-style-stroke-options
Khi các bạn làm xong, click Ok để đóng hộp thoại, và kết quả mà chúng ta nhận được sẽ thế này :
multiple-stroke-text
Bước 4 : lặp lại từ bước 2 đến bước 3 cho các đường viền khác. Lần này , các bạn chỉ cần quay lại màu viền như bước 1 là xong.
stroke-options-3
Và kết quả cuối cùng :
photoshop-multiple-text-strokes
Bài viết này rất đơn giản và dễ thực hiện, mục đích chính chỉ là giới thiệu cho các bạn quen và biết cách sử dụng Smart Objects có trong Photoshop. Mình hy vọng là các bạn sẽ có thể học được nhiều từ bài viết này.
Chúc các bạn thành công !

Tổng hợp 13 font chữ đẹp dùng để làm icons

Hầu hết trong các website, chúng ta đều sử dụng icons , và những icons này thường được làm bằng hình ảnh. Nhưng bây giờ thì có lẽ mọi chuyện đã khác, chúng ta vẫn sử dụng icons nhưng không phải là bằng các hình ảnh, mà là bằng các font chữ. Và như vậy, chúng ta sẽ dễ dàng thay đổi kích thước cũng như màu sắc các icon mà không cần phải đụng chạm gì đến các phần mềm chỉnh sửa ảnh như Photoshop.
Trước tiên , các bạn cần tham khảo qua bài viết Tạo icon từ bộ Font Awesome bằng CSS để có thể hiểu và sử dụng những font chữ mà mình giới thiệu bên dưới.
13-beautiful-fonts-you-can-use-as-icons-01
2 Entypo
13-beautiful-fonts-you-can-use-as-icons-02
13-beautiful-fonts-you-can-use-as-icons-03
13-beautiful-fonts-you-can-use-as-icons-04
13-beautiful-fonts-you-can-use-as-icons-05
13-beautiful-fonts-you-can-use-as-icons-06
13-beautiful-fonts-you-can-use-as-icons-07
13-beautiful-fonts-you-can-use-as-icons-08
13-beautiful-fonts-you-can-use-as-icons-09
13-beautiful-fonts-you-can-use-as-icons-10
13-beautiful-fonts-you-can-use-as-icons-11
13-beautiful-fonts-you-can-use-as-icons-12
13-beautiful-fonts-you-can-use-as-icons-13
Các bạn đã từng sử dụng những icon này chưa ? Hãy chia sẻ những font tạo icon khác cho mọi người nếu bạn biết nhá.
 
Designed By OddThemes & Distributd By Blogger Templates