Icon STYLE, Blend hình size nhỏ

Posted by Admin, on 09/10/2009 09:36 AM in PhotoShop Tutorial with 10,833 views and 1 Comments

Nhiều khi các bạn nhìn thấy những icon hay còn gọi là avatar rất ngộ nghĩnh và màu sắc thật lung linh, và các bạn tự hỏi làm thế nào để có đc những icon như vậy? rất đơn giản! mình sẽ hướng dẫn các bạn làm một số icon với phong cách nhẹ nhàng và lung linh. Chỉ mất 10 phút làm cho 1 icon ^^ bạn sẽ đc 1 bộ icon như thế này

Icon STYLE, Blend hình size nhỏ - Image 1

-

Icon STYLE, Blend hình size nhỏ - Image 2

-

Icon STYLE, Blend hình size nhỏ - Image 3

-

Icon STYLE, Blend hình size nhỏ - Image 4

-

Icon STYLE, Blend hình size nhỏ - Image 5

Icon STYLE, Blend hình size nhỏ - Image 6

Trước tiên bạn phải tìm những tấm ảnh mà bạn muốn lấy làm icon và crop chúng lại với size quy định là 100x100px.Cách crop 1 tấm ảnh lại với size mong muốn như sau:

- Các bạn click vào công cụ Crop tool © sau đó điền thông số crop vào 2 ô Width và Hight các bạn phải nhớ ghi cả đơn vị là px nhé, ở đây mình điền là W: 100 px và H: 100 px.Sau đó các bạn chọn vùng crop một cách thoải mái trên ảnh gốc rồi ấn crop, ảnh sẽ tự crop lại với size mặc định là 100x100px

Các bạn chú ý trong icon việc crop quyết định rất lớn đến kết quả icon có đẹp hay ko, các bạn phải chọn góc crop sao cho phù hợp và tạo đc phong cách riêng đặc biệt, tránh tình trạng crop các đôi tượng trong ảnh quá cân đối sẽ tạo cảm giác nhàm chán, hoặc crop quá hình quá nhỏ,v.v..

nếu bạn định làm 1 series các icon mình khuyên các bạn nên tìm trước hết các stock rồi crop chúng lạị cùng một lúc xong hết rồi mới tiến hành blend từng cái một.như thế lúc crop các bạn có thể chọn các góc crop phong phú, tránh bị tình trạng lặp lại giữa các icon.

-----------------------------------------------------------------

Icon STYLE, Blend hình size nhỏ - Image 6

Icon STYLE, Blend hình size nhỏ - Image 6

Nào chúng ta hãy bắt đầu với icon thứ nhất!

Mình lấy hình gốc là hình này http://www.vietphotoshop.com/modtut//tutor...yle/1/stock.jpg

và crop lại như thế này

Icon STYLE, Blend hình size nhỏ - Image 9

Vì màu của ảnh gốc có gam màu xanh, mình muốn chỉnh lại cho icon có màu trắng trước để khi làm các bước chỉnh màu tiếp theo màu đc chính xác.Các bạn chỉnh theo hướng dẫn, các bước chỉnh màu của mình đều là tạo ra một lớp adjustment layer mình sẽ ko nhắc lại ở mỗi bước nên các bạn phải tự hiểu là tạo một lớp màu mới trong adjustment layer nhé  ,trước tiên là lớp

Color Balance : Midtones -17 / -28 / +7

Tiếp đến là

Selective Color : Black -30% / 0 / 0 / 0

Gradient Fill : Gradient màu từ trắng đến trong suốt / Style : Linear / Angle 90 / Scale 100% / Align with layer

Icon STYLE, Blend hình size nhỏ - Image 10

Levels : 20 / 1.00 / 240

tiếp đến là chèn các textures vào .trong icon này mình dùng 3 textures này

1-1

Icon STYLE, Blend hình size nhỏ - Image 11

1-2

Icon STYLE, Blend hình size nhỏ - Image 12

1-3

Icon STYLE, Blend hình size nhỏ - Image 13

Chọn textures 1-1 để ở chế độ Linear Burn 40%,và tẩy nhè nhẹ một chút chỗ vùng mod

Tiếp đến là Textures 1-2 Để ở chế độ Screen 100%

Cuối cùng là textures 1-3 để dịch sang bên phải để ở chế độ Soft light 100%

Icon STYLE, Blend hình size nhỏ - Image 14

Tạo một khung text, mình tạo khung này bằng cách dùng brush vuông vẽ với mã màu là #b49f90 và #ffffff , để layer đó ở chế độ Exclusion 48%

Icon STYLE, Blend hình size nhỏ - Image 15

Và cuối cùng là thêm text vào.

Text trong icon thường phải có đủ 3 yếu tố đó là text chính, text phụ (các text có size nhỏ hoặc mờ hơn text chính) và các hiệu ứng, hình vẽ hỗ trợ cho text chính. Màu text ko đc quá nổi bật, nhưng vẫn phải đảm bảo tạo đc điểm nhấn riêng.

Để đỡ mất thời gian các bạn có thể dùng Brush text để trang trí cho text chính thay vì việc viết các dòng text rồi để chúng size nhỏ,Các bạn có thể tìm thấy các brush text đó tại trong link down toàn bộ tut ở cuối bài tut này.

Và đây là kết quả của icon thứ nhất

Icon STYLE, Blend hình size nhỏ - Image 16

------------------------------------

Icon STYLE, Blend hình size nhỏ - Image 6

Icon STYLE, Blend hình size nhỏ - Image 6

Icon 2

Đây là stock: http://www.vietphotoshop.com/modtut//tutor...yle/2/stock.jpg

Mở hình bạn crop ra.

Icon STYLE, Blend hình size nhỏ - Image 19

và chỉnh với thông số

Color Balance : shadows +11 / -3 / 12

Selective Color : Black -50% / 0 / 0 / 0

Icon STYLE, Blend hình size nhỏ - Image 20

Ctrl + Shift + Alt + E sau đó chọn Filter/ Blur / Radial blur… chỉnh thông số Amount : 25 / Spin / Good , sau đó tẩy một chút ở vùng khuôn mặt mod

Icon STYLE, Blend hình size nhỏ - Image 21

Trong icon này mình dùng 2 textures này

2-1

Icon STYLE, Blend hình size nhỏ - Image 22

2-2

Icon STYLE, Blend hình size nhỏ - Image 23

Mở textures 2-1 ra để ở chế độ Screen 100%

Tiếp theo chọn Selective color : Reds 0 / 0 / -100 / 20 và Neutrals 0 / 0 / -15 / 0

Mở textures 2-2 ra ở chế độ Screen 100% và cho dịch xuống góc dưới như hình

Icon STYLE, Blend hình size nhỏ - Image 24

Tiếp đến là chỉnh Levels: 20 / 1.00 / 250

Cuối cùng là text mình cho các text nhỏ bên phải như các chấm chấm

Và đây là kết quả

Icon STYLE, Blend hình size nhỏ - Image 25

---------------------------------------------------------------

Icon STYLE, Blend hình size nhỏ - Image 6

Icon STYLE, Blend hình size nhỏ - Image 6

Icon 3

Đây là stock : http://www.vietphotoshop.com/modtut/tutor...asic7386uh5.jpg

mở ảnh đã crop ra

Icon STYLE, Blend hình size nhỏ - Image 28

với bức ảnh có ít chi tiết nền, do đó nếu muốn tạo những hiệu ứng màu và nét nhiều bạn phải sử dụng nhiều đến textures để tạo ra những vùng màu chuyển

Trước tiên hãy chỉnh lại màu một chút

Selective Color : Black +50 / 0 / -20 / 10

Download 2 textures này về

3-1

Icon STYLE, Blend hình size nhỏ - Image 29

3-2

Icon STYLE, Blend hình size nhỏ - Image 30

mở textures 3-1 ra để ở chế Darken 100%

Icon STYLE, Blend hình size nhỏ - Image 31

tạo một lớp Gradient fill màu chuyển từ trắng đến trong suốt , Diamond , 90 độ, scale 100%

để dưới góc trái như thế này

Icon STYLE, Blend hình size nhỏ - Image 32

Thêm text vào, ở đây mình dùng font Arial viết text rồi dau đó dùng tẩy có chọn hình brush lem lem để tẩy dòng text vừa viết ra so cho chúng có cảm giác gồ ghề ăn vào với icon

Sau đó dùng brush vuông có sẵn trong ps để vẽ thêm lên góc phải như hình dưới

Icon STYLE, Blend hình size nhỏ - Image 33

Tiếp đến chọn textures 3-2 đặt vào icon với chế độ hoà trộn Soft light 100%

Cuối cùng các bạn Ctrl + Shift + Alt + E chọn các layer lại và Rectangular Maquee Tool chọn 1/3 vùng bên trái

Icon STYLE, Blend hình size nhỏ - Image 34

và Ctrl + U để mở bảng Hue/Saturation chỉnh thông số 0 / -100 / 0 Và hoàn thành icon

Icon STYLE, Blend hình size nhỏ - Image 35

--------------------------------------------------------------------------

Icon STYLE, Blend hình size nhỏ - Image 6

Icon STYLE, Blend hình size nhỏ - Image 6

Icon 4

Đây là stock : http://www.vietphotoshop.com/modtut/tutor...sc0438hhin8.jpg

Nào chúng ta hãy thử làm 1 icon tiếp. Trong icon này mình chỉ chú trọng đến công đoạn crop, và giựa vào góc crop đó để nói lên nội dung của icon, bản crop của mình đây

Icon STYLE, Blend hình size nhỏ - Image 38

Nên vì thể mình sẽ ko blend nhiều cho icon này.

Trước tiên vẫn như mọi khi, các bạn mở ảnh đã crop ra

Chỉnh Brightness/Contrast..: -150 / 0

Dùng tẩy biên cứng tẩy hết thân mod như thế này

Icon STYLE, Blend hình size nhỏ - Image 39

Tiếp theo đó là một chút Color Balance : Midtons : -22 / -29 / -10

Selective Color : Blacks -21 / 0 / 20 / 0

Icon STYLE, Blend hình size nhỏ - Image 40

Và cuối cùng chỉ là thêm text và dùng textures này

Icon STYLE, Blend hình size nhỏ - Image 41

để trang trí vùng text các bạn đặt textures này vào xoay lại sang bên phải và để ở chế độ Screen 100% sau đó dùng tẩy biên mềm tẩy các phần còn lại đi chỉ để lại phần gần text bạn mới viết. và mình còn dùng thêm các kí tự “ + “ để tạo góc bo cho icon.Và kết quả đây

Icon STYLE, Blend hình size nhỏ - Image 42

--------------------------------------------------------------------------------------------

Icon 5

Đây là stock: http://www.vietphotoshop.com/modtut/tutor...yle/5/stock.jpg

Các bạn làm icon theo các cách trên có thấy nhàm ko ?mình cũng thấy hơi nhàm

Icon STYLE, Blend hình size nhỏ - Image 43

chúng ta hãy thử làm icon theo một cách mới nhé ^^, cách này theo mình thì nó thủ công hơn các cách làm trước

Các bạn hãy mở hình đã crop

Icon STYLE, Blend hình size nhỏ - Image 44

sau đó cắt mod ra. Các bạn có thể dùng bất kì cách nào để cắt mod,miễn sao cho hiệu quả là đc. ở đây mình dùng Extract (Ctrl + Alt + X) các bạn ko cần thiết phải quá nắn nót trong việc cắt vì icon tỉ lện mod rất nhỏ nên nếu các bạn cắt có vụng về một chút thì nó cũng ko ảnh hưởng lớn đến kết quả của cả icon đâu

Và đây là pic đã đc mình cắt xong

Icon STYLE, Blend hình size nhỏ - Image 45

Sau đó các bạn hãy mở một textures này ra

Icon STYLE, Blend hình size nhỏ - Image 46

Các bạn có thể tự làm texture nền hoặc lấy bất kì stock nào các bạn muốn cũng đc (nhưng các bạn phải chú ý là size của nó phải là 100x100px nhé)

Sau đó copy ảnh các bạn vừa cắt lúc nãy vào,như thế này

Icon STYLE, Blend hình size nhỏ - Image 47

(các bạn nhớ chọn textures phù hợp với màu của mod nhé)

Tiếp theo các bạn vẽ một đường viền ngoài mod như thế này, các bạn có thể vẽ bằng brush hay pen tool đều đc. Ở đây mình dùng pen tool để vẽ

Icon STYLE, Blend hình size nhỏ - Image 48

Sau đó tạo một lớp layer Selective color :chọn color : Blacks -10 / -15 / +10 / 0

Tiếp đến các bạn tạo một layer mới, và dùng công cụ Gradient tool với 6 nấc màu chuyển cách đều nhau lần lượt với mã màu từ trái qua phải là

#f0eefc

#e1d7f9

#bfb9e7

#c078a0

#ef818a

#f26683

Tô như hình dưới

Icon STYLE, Blend hình size nhỏ - Image 49

(các bạn có thể save gradient trên đây lại và chỉ việc copy paste vào icon cũng đc)

Sau đó để layer đó ở chế độ Pin light 100%

Tiếp theo các bạn dùng brush text mình đã giới thiệu với các bạn ở đầu tiên, tạo một dòng text nhỏ nhỏ chạy dọc bên phải của icon như thế này.

Icon STYLE, Blend hình size nhỏ - Image 50

Thêm text chính vào nữa vậy là xong một icon khác bằng cách làm thủ công ^^

Icon STYLE, Blend hình size nhỏ - Image 51

---------------------------------------

Vậy là chúng ta đã kết thúc 1 bộ 5 icon đơn giản với màu và phong cách tự nhiên.Các bạn thấy làm icon thế nào? Vô cùng đơn giản phải ko? Đúng như thế đấy! nếu ko đơn giản thì đó ko phải là icon

Icon STYLE, Blend hình size nhỏ - Image 43

hãy thử làm các icon khác theo phong cách của bạn thử xem 

Đây là link down toàn bộ Tut gồm : stock, file psd, Brush và textures [3Mb]

QUOTE

http://www.mediafire.com/?gjnmav4iimx

Icon STYLE, Blend hình size nhỏ - Image 53

Các textures các bạn có thể tìm thấy tại kho của VPTS

Chúc các bạn thành công!

Icon STYLE, Blend hình size nhỏ - Image 54

Icon STYLE, Blend hình size nhỏIcon STYLE, Blend hình size nhỏ
61010833
Nhận xét
Bạn còn ký tự