Đây là những kĩ thuật thường được dùng trong design Signature, viết bởi Team Design Signature, tổng hợp bởi Shun.
1. Biết các mode trong Blend, bạn nên thử qua tất cả các mode để hiểu rõ hơn, tùy từng background và style của sign mà design cho phù hợp
Các trong những Blend Mode hay dùng : Multiply, Color Burn, Screen, Overlay, Soft Light, Hue, và Luminosity
2. Biết sử dụng các bảng cơ bản trong PTS, đó là Curve, Color Balance, Hue/ Saturation, Brightness/ Contrast …
Trước đây khi design, Lúc Blend, Shun hay chỉnh màu cho cả layer, thường chọn layer đó rồi ấn Ctrl+B (Color Balance) hoặc Ctrl + U (Hue/Saturation), lúc đó hiệu ứng sẽ effect lên toàn layer, bây giờ nên chuyển sang theo hướng này.
 |
Nên select vùng chọn sau khi brush và và làm như hình, chỉ là để các adjustment layer chỉ có tác dụng trên những layer mà bạn chọn. Điều này có lợi cho việc thay đổi lại các thông số về sau, vì trong design Sign, số layer tăng lên rất nhiều.
Việc sử dụng Layer Adjustment ở từng công đoạn sẽ làm cho số Layer nhiều lên gấp 2, gấp 3, nên sửa lại tên của layer Adjustment nào edit cho layer nào, chứ đừng để như thế này =.=”, có khi lên đến vài chục layer, lúc đó bạn sẽ mất thời gian ngồi mò lại >”< !
Sơ nét về sử dụng các bảng :
Sử dụng như sau bảng Curve (Ctrl + M) như sau : tác dụng làm tối 1 tông màu (R,G,B) hoặc cả 3 cùng 1 lúc (RGB)
 |
Sử dụng bảng Color Balance (Ctrl + B), bảng này thông dụng nên bỏ qua nhớ >”<.
Sử dụng Bảng Hue/Saturation như sau : Làm 1 VD để sử dụng Hue/Saturation :
Hue/ Saturation thường dùng với những người mới học PTS là chỉnh 1 lúc cả 3 màu Red – Green – Blue ( RGB). Đó là level 1 dành cho người mới biết. Và đây là level 2 của Hue/ Saturation, vì nó chỉnh từng “tông” màu 1 thay vì chỉnh combo 6 “tông” một lúc.
1. Sử dụng Lasso Tool để chọn vùng chọn trên mặt nhân vật , Sau đó vào layer-> New Adjustment Layer Chọn Hue/Saturation
2. Chọn tùy ý 1 màu từ Hộp Edit, sau đó Click vào
 |
 |
 |
Chỉnh màu từ thanh trượt,nhớ test 2 tool mình đã đánh dấu, tin rằng các bạn làm thử rùi sẽ thấy. Ở đây Shun lấy hình Anime là vì nó dễ cho VD, nhưng đôi khi Hue có hiệu quả hay ko còn tùy thuộc vào Selection của bạn nữa.
Tips : Bạn có thể thay đổi màu cho render rất dễ dàng, đặc biệt là các nhân vật anime với mức độ Tolerance trong hình ko cao.
Sử dụng Bảng Brightness/Contrast : Thông dụng và dễ nên … @^^@!
Sử dụng Bảng Levels : Cách dùng cũng chọn tông màu trong Channel và Edit lại, chỉnh ở mức level 2 giống như trên bảng Hue/Saturation.
Trước khi sử dụng Levels
 |
Sau khi dùng Levels
 |
Bonus Tips : Ở trên cùng của mỗi Sign bạn nên lập ra 5 layer chính là các Layer Adjustment ở trên (Color Balance, Hue …. ) để chỉnh tổng thể Sign lại lần cuối trước khi export, nó ko thừa đâu .
=========================
Cách sử dụng Mask và kĩ thuật Clipping Mask
1. Mask.
Đầu tiên bạn có hình như sau :
Duplicate và resize nó về 1 góc, dễ phải không ?
 |
Click vào nút Add Layer Mask
 |
Chọn Brush Tool, ấn D để mặc định Black/White cho Foreground và Background
 |
Tiến hành Soft Brush, bạn sẽ thấy Brush đến đâu, hình nhỏ sẽ mất đến đấy.
 |
Nghịch đảo màu của Foreground và Background (Tức Foreground thành Trắng) và Brush, bạn sẽ thấy hình nhỏ xuất hiện lại
 |
Đó là kĩ thuật sử dụng Layer mask
2. Kĩ Thuật Clipping Mask
Bạn có các layer như hình :
Có 1 layer nằm trên text nhưng đang ẩn.
 |
Vào Layer -> Create Clipping Mask, sau đó move Mask để xem hiệu ứng.
 |
Đó là kĩ thuật Clipping Mask.
Tối ưu hóa hình ảnh trong thiết kế Web
Bạn chọn File > Save for web, như hình 1
Bạn có thể thay đổi để chọn 2-up hay 4-up, hình 3 là FF chọn 4-up.
và bạn có thể so sánh kết quả trước và sau trong hình 6.
Chọn Select > Save Selection (hình 10)
và đặt tên, FF đặt là Optimize1. Như hình 11.
Chọn Chanel là cái bạn mới lưu hồi nãy (hình 14), Optimize1.
Thời gian load bây giờ là 16s và kích thước file là 45kb.
—–
Bạn để ý màu bạn chọn trong bảng màu. Hình 24.
Vậy là màu đã khóa, hình 26.
Bây giờ, hãy chọn lại 4 màu. Bạn sẽ thấy màu sắc đó được giữ nguyên như trong hình 27.
Bây giờ, hãy xem trước sản phẩm của bạn trong trình duyệt hiển thị thế nào. Từ File > Outphut settings > HTML. Như hình 31.
Của sổ của tùy chọn Output xuất hiện.
Hình 32
Và kết quả bạn thấy trong hình 34
Đừng lo gì cả nếu bạn nhìn cái logo của bạn như thế, giờ hãy xem kết quả trong trình duyệt
Hình 42:
Blend 1
Người đăng: Final Fantasy
Gửi ngày 5 Tháng 5, 2009
In
Gửi mail
Introduction: Blending là kĩ năng cơ bản để hòa trộn hình với nhau. Một số bạn vẫn dùng Blend Mode cho mỗi tác phẩm như Overlay, Screen, Saturation … nhưng không nắm rõ thực chất mỗi option đó có chức năng như thế nào. Với những kiến thức trên lớp và chút kinh nghiệm ít ỏi mình xin chia sẽ cùng mọi người về vấn đề này.
Blend option gồm cái nhiều mục, mình chỉ đi vào chi tiết những mục phổ biến nhất, còn lại mấy bạn tự mò ra nhé. Mình sẽ nói về 3 mục chính (Mỗi group đều có chức năng giống nhau):
Group 1: Darken, Multiply, Color Burn, Linear Burn, Darken Color.
Group 2: Lighten, Screen, Color Dodged, Lighter Color.
Group 3: Overlay, Soft Light, Hard Light, Vivid Light, Linear Light, Pin Light, Hard Mix.
* Group 1: (Option chuẩn và thông dụng nhất: Multiply)
Chức năng: Layer được chọn mode multiply sẽ được giữ lại những phần mang màu tối, và bỏ đi những phần mang màu sáng. Còn ở những chỗ chuyển tiếp từ tối sang sáng chức năng này giúp layer đang blend nhìn trong suốt nhưng vẫn giữ màu nguyên thủy.
Stock 1: http://www.vietphotoshop.com/modtut/tutori..._7897.jpg (hình cá nhân)
Texture: http://www.vietphotoshop.com/modtut/tutori...y_ArtOfDeca.png (Stock đã xin dùng)
Bạn nhìn kĩ 2 tấm hình trước và sau khi dùng Option Multiply. Những phần màu tối sẽ được giữ lại và những phần màu sáng sẽ bị mất đi dần.
Một ứng dụng nhỏ của mode này là dùng làm ảnh cũ, bạn chọn layer hình nền và bấm ctrl + U để chỉnh hue/saturation, chọn colorize và có thể chỉnh như hình sau:
Để dễ hiểu hơn về mode này mình tạo 1 layer mới và dùng Gradient Tool (G) vẽ theo hình:
Và chuyển sang chế độ hòa trộn Multiply, chức năng này sẽ xóa đi những phần sáng trên layer vừa chọn và giữ lại những phần tối, còn khúc giữa thì trông mờ mờ.
roup 2: (Option chuẩn và thông dụng là Screen)
Texture : http://www.vietphotoshop.com/modtut/tutori...tures99_6-1.png
Chức năng: ngược hoàn toàn với group 1, Group này giúp ta giữ lại những phần màu sáng (trắng) và xóa đi những phần màu tối (đen)
Một ứng dụng nhỏ là dùng chức năng này cùng với texture nhìn cũ cũ, chuyển texture thành screen, chọn Hue/Saturation cho hình gốc như group 1 nhưng chuyển màu về đen và tối tối ta sẽ có 1 bức ảnh cũ, trong giống 1 cảnh phim ngày xưa.
* Group 3: (Option chuẩn và thông dụng là Overlay)
Chức năng: Layer được chọn Overlay thì những phần sáng (trắng) sẽ được làm cho sáng hơn (brighter) và những phần tối (đen) sẽ được làm cho đậm hơn (darker), giống như chỉnh contrast cho hình. Những phần nằm giữa sẽ được giữ nguyên và chuyển thành trong suốt.
Ứng dụng phổ biến của chức năng là ta nhân đôi layer gốc lên và chọn overlay nó. Để hình đẹp hơn thì ở layer vừa nhân đôi ta vào filter/blur/Gaussian blur và chọn khoảng 2,3 pixel. Lưu ý là hình có thông số kĩ thuật thấp đừng làm bước này vì 1 là cháy màu, 2 bể hình, 3 hình cực kì xấu.
* Một vài Blending Option khác:
- Dissolve: dùng làm bể hình (noise), ứng dụng làm noise, ngôi sao hoặc ảnh vẽ.
- Difference và Exclusion: chuyển sang chế độ âm bản.
- Hue/Saturation/Color/Luminosity: Không thường dùng vì đã có những chức năng khác tương tự.
Chỉ đơn giản là vậy ^^
Review: Ok bây giờ là 1 ví dụ nho nhỏ để ôn lại kiến thức, cũng là bài tập ở lớp của mình.
Chúng ta có 3 hình sau: (web này là free stock nên khỏi credit nha)
Stock 1: http://www.sxc.hu/browse.phtml?f=view&...08913&rnd=1
Stock 2: http://www.sxc.hu/browse.phtml?f=download&id=1176629
Logo: http://www.vietphotoshop.com/modtut/tutori...d_mode/logo2.jpg
Công việc của bạn là không được cắt, không type lại hoặc làm bất cứ gì khác ngoài việc dùng blending mode để :
1. Loại bỏ background trắng và giữ lại “My Company Logo” để vào stock 1.
2. Tương tự câu 1 nhưng chữ “My Company Logo” phải màu trắng để vào stock 2. Được phép dùng 1 bước căn bản trước khi blend.
(suy nghĩ trước khi xem câu trả lời nhé)
(Câu trả lời ở trang sau)
Trả lời:
1. Blend mode nào dùng để giữ lại màu tối và xóa đi màu sáng -> Multiply.
2. Muốn chữ chuyển từ màu đen sang trắng chúng ta có 1 chức năng gọi là Inverse (Ctrl + I )
- Trước tiên Ctrl + I cho tấm hình logo để chuyển màu ngược lại. Nhưng background sẽ chuyển sang màu đen.
Blend mode nào dùng để xóa đi màu đen và giữ lại màu sáng -> screen.
Tổng kết part 1: Đó chỉ là 2 ví dụ cơ bản về blending trong thực thế khi bạn muốn thêm logo hoặc chữ kí của bạn hay công ty vào 1 bức ảnh quảng cáom giới thiệu hay buôn bán nào đấy. Nhưng cuộc sống không đơn giản thế ^^, bạn sẽ gặp nhiều rắc rối và trở ngại khác.
Trong Tut này, các bạn sẽ theo dõi cách tối ưu hóa hình ảnh dạng .gif và .JPEG cho xuất bản web. Việc tối ưu có thể sử dụng ImageReady và trong Photoshop
Phần 1: Tối ưu hóa hình ảnh định dạng JPEG trong Photoshop
FF mở bức ảnh này
FF mở bức ảnh này
 |
 |
Bạn thấy là hình ảnh của bạn trông rất xấu vì mặc định của PTS là tối ưu định dạng .gif. Bạn hãy đổi thành jpeg như hình 2
 |
 |
Bạn hãy để ý một chút về các thông số bao gồm: ở hình gốc chỉ có kích thước file, các hình còn lại có: định dạng ảnh, kích thước file, thời gian tải (mặc định cho tốc độ 28.8kbps) và bên góc phải là chất lượng file sau khi tối ưu (Optimize). Bạn cũng sẽ có vài cách để optimize, bạn sẽ theo dõi sau đây 2 phương pháp. Tùy từng loại ảnh, bạn sẽ chọn phương pháp phù hợp.
Phương pháp 1:
Việc tối ưu là làm giảm thời gian load, và đảm bảo chất lượng ảnh như bạn mong muốn. Bây giờ, trong hình 4, bạn sẽ để ý thấy một số thông số như Quality: bạn sẽ thay đổi được từ 0 – 100 và quality càng thấp, kích thước file càng nhỏ, load càng nhanh nhưng chất lượng càng kém, thông số thứ 2 là Blur, Blur càng lớn, ảnh càng mờ nhưng thoài gian load càng nhanh.
Việc tối ưu là làm giảm thời gian load, và đảm bảo chất lượng ảnh như bạn mong muốn. Bây giờ, trong hình 4, bạn sẽ để ý thấy một số thông số như Quality: bạn sẽ thay đổi được từ 0 – 100 và quality càng thấp, kích thước file càng nhỏ, load càng nhanh nhưng chất lượng càng kém, thông số thứ 2 là Blur, Blur càng lớn, ảnh càng mờ nhưng thoài gian load càng nhanh.
 |
Công việc của bạn là điều chỉnh Quality và Blur để đạt chất lượng ảnh Jpeg như mong muốn với thời gian tải là nhỏ nhất.
Với tấm hình này, FF chọn các thông số như hình 5,
Với tấm hình này, FF chọn các thông số như hình 5,
 |
và bạn có thể so sánh kết quả trước và sau trong hình 6.
 |
Như vậy là tạm chấp nhận được, khi so sánh một bức hình 829Kb còn lại 39Kb.
Nếu bạn đã hài long, click vào nút Done.
Tuy nhiên, nếu bạn không hài long vì thời gian load còn cao, hãy giảm chất lượng đi chút ít của ảnh gốc, ví dụ chỉnh lại Brighness/Contrast và Hue/Satuation.
Ví dụ sau khi FF chỉnh lại một vài thông số của ảnh gốc. FF giảm Satuation và giảm Contrast. (Cái này là để giảm chất lượng ảnh gốc thôi). Các công cụ này nằm trong Image > Adjustment.
Kết quả là FF giảm thời gian load còn 13s. Như trong hình 7. Click Done nếu bạn thấy hài lòng. Hoặc Save lại nếu bạn muốn sử dụng sau.
Nếu bạn đã hài long, click vào nút Done.
Tuy nhiên, nếu bạn không hài long vì thời gian load còn cao, hãy giảm chất lượng đi chút ít của ảnh gốc, ví dụ chỉnh lại Brighness/Contrast và Hue/Satuation.
Ví dụ sau khi FF chỉnh lại một vài thông số của ảnh gốc. FF giảm Satuation và giảm Contrast. (Cái này là để giảm chất lượng ảnh gốc thôi). Các công cụ này nằm trong Image > Adjustment.
Kết quả là FF giảm thời gian load còn 13s. Như trong hình 7. Click Done nếu bạn thấy hài lòng. Hoặc Save lại nếu bạn muốn sử dụng sau.
 |
Chú ý: Hình mà FF mở là hình có màu sắc tươi sáng nên kích thước file khó giảm nhiều, tuy nhiên với các hình ảnh màu sắc thấp độ tương phản, bạn có thể tăng hơn thời gian load mà vẫn đảm bảo chất lượng, bạn hãy nhìn vào những quả nho xanh, sẽ thấy gần như chất lượng không thay đổi nhiều, trong khi các quả nho tím, lại giảm hẳn chất lượng hình ảnh.
Phương pháp 2:
Bạn mở hình mẫu 2, đây là một hình có màu nền có một mảng màu tối, do đó sẽ thích hợp cho bạn sử dụng Alpha Chanel để tối ưu.
Bạn mở hình mẫu 2, đây là một hình có màu nền có một mảng màu tối, do đó sẽ thích hợp cho bạn sử dụng Alpha Chanel để tối ưu.
 |
Các bạn xem hình FF đã tạo, có 2 vùng rõ ràng như trong hình 8.
 |
Bây giờ, hãy giữ Ctrl và click chuột trái vào Layer dưới, có chứa hình hoa và con bướm. Một vùng chọn hình thành như hình 9.
 |
Chọn Select > Save Selection (hình 10)
 |
 |
Hãy kiểm tra trong Chanel Pallet, đã có thêm một chanel mới có tên Optimize1 (hình 12).
 |
Ấn Ctrl + D để bỏ vùng chọn, chọn File > Save for web.
Bạn thấy là các thông số đã được lưu như lần trước. Giờ hãy tăng Quality lên làm cho ảnh đẹp hơn tý. FF chọn Quality là 50, Blur là 0.1 và chất lượng thu được khá tốt, nhìn đôi cánh con bướm là biết, thời gian load là 21s và kích thước file là 57kb.
Bây giờ, bạn click vào cái ô nhỏ tròn bên cạnh Quality, như hình 13,
Bạn thấy là các thông số đã được lưu như lần trước. Giờ hãy tăng Quality lên làm cho ảnh đẹp hơn tý. FF chọn Quality là 50, Blur là 0.1 và chất lượng thu được khá tốt, nhìn đôi cánh con bướm là biết, thời gian load là 21s và kích thước file là 57kb.
Bây giờ, bạn click vào cái ô nhỏ tròn bên cạnh Quality, như hình 13,
 |
Chọn Chanel là cái bạn mới lưu hồi nãy (hình 14), Optimize1.
 |
Bạn sẽ thấy có 2 con trượt để bạn điều chỉnh Quality, như hình 15.
 |
Hãy điều chỉnh một cách khéo léo, sau khi đã hài long, click OK và theme chút Blur nữa và kết quả của FF như hình 16.
 |
Thời gian load bây giờ là 16s và kích thước file là 45kb.
—–
Phần 2: Tiếp theo cho .GIF
Chúng ta sẽ bắt đầu với việc bạn tạo ra một Logo, và FF sẽ sử dụng Logo Vietphotoshop.com Car cho Tut của mình. Việc design logo sẽ không nói cách làm thế nào vì phụ thuộc vào bạn. Việc tối ưu hình .gif sẽ dễ hơn trong ImageReady (IR), vì vậy FF sẽ thực hiện trong IR.
Ấn Ctrl + Shift + M để chuyển sang IR. Logo của FF như hình 17.
Chúng ta sẽ bắt đầu với việc bạn tạo ra một Logo, và FF sẽ sử dụng Logo Vietphotoshop.com Car cho Tut của mình. Việc design logo sẽ không nói cách làm thế nào vì phụ thuộc vào bạn. Việc tối ưu hình .gif sẽ dễ hơn trong ImageReady (IR), vì vậy FF sẽ thực hiện trong IR.
Ấn Ctrl + Shift + M để chuyển sang IR. Logo của FF như hình 17.
 |
Bạn cũng chọn Optimize, cũng có các tùy chọn như bạn đã làm hồi nãy với ảnh jpeg. Bạn chú ý vài thứ ở đây như trong hình 18. Gồm: Format: gif (chỉ có nhiều nhất 256 màu thôi), Reduction (để chọn phương pháp tối ưu cho bạn), color (chọn số lượng màu), Dither (phương pháp dither), Transparency (bảo toàn trong suốt hay không), Matter (chọn một màu nền, tý nữa bạn sẽ thấy nó hiệu quả thế nào với hình gif có transparency), ngoài ra còn có Lossy, …
 |
Bạn chọn 2-Up để xem và so sánh kết quả cho dễ.
Ở đây, FF chọn Reduction là Selective (Bạn tùy chọn loại Reduction miễn là bạn thấy chất lượng ảnh và file size nhỏ là được) vì nhìn nó có vẻ “ngon” nhất. Bạn sẽ lần lượt thay đổi các thông số khác cho file size là nhỏ nhất. Trong tut này, FF sẽ tập trung vào vụ số lượng màu sao cho thời gian load là nhanh nhất.
Hiện tại như trong hình 19, bạn thấy là thời gian laod là 3s, kích thước file là 6.5Kb. Vậy là lâu cho một logo có kích thước 300x200pixels.
Ở đây, FF chọn Reduction là Selective (Bạn tùy chọn loại Reduction miễn là bạn thấy chất lượng ảnh và file size nhỏ là được) vì nhìn nó có vẻ “ngon” nhất. Bạn sẽ lần lượt thay đổi các thông số khác cho file size là nhỏ nhất. Trong tut này, FF sẽ tập trung vào vụ số lượng màu sao cho thời gian load là nhanh nhất.
Hiện tại như trong hình 19, bạn thấy là thời gian laod là 3s, kích thước file là 6.5Kb. Vậy là lâu cho một logo có kích thước 300x200pixels.
 |
Trong ô Color, bạn hãy lần lượt giảm số màu bằng cách chọn số màu sao cho nhỏ nhất mà logo của bạn nhìn vẫn đẹp. Ở đây FF chọn số màu là 16 và kích thước file là 4kb. Tuy nhiên bạn có thể chọn 8 màu với thời gian load là 2s và file size là 3.2Kb.
Hình 20.
Hình 20.
 |
Bạn cũng có thể thay đổi các giá trị trng Dither để có file size là nhỏ nhất. Những cái này phụ thuộc vào bạn.
Hãy để ý về các màu trong bảng màu, các màu bạn nhìn thấy trong đó là các màu trình duyệt có thể hiển thị. (hình 21). Nếu màu không thể hiện thị bởi trình duyệt, bạn sẽ thấy có một ô nhỏ trong tâm của ô màu.
Hãy để ý về các màu trong bảng màu, các màu bạn nhìn thấy trong đó là các màu trình duyệt có thể hiển thị. (hình 21). Nếu màu không thể hiện thị bởi trình duyệt, bạn sẽ thấy có một ô nhỏ trong tâm của ô màu.
 |
Trong một số trường hợp, bạn cần phải giữ một số màu nào đó. Ví dụ trong hình, khi FF chọn số màu là 4. Màu ở hình chiếc xe đã biến mất, thay vào đó là một hình đậm hơn. FF cần phải giữ màu sắc này. Như hình 22
 |
Chọn lại 16 màu, sử dụng công cụ EyeDrop Tool, và click vào màu bạn cần giữ. Như hình 23.
 |
Bạn để ý màu bạn chọn trong bảng màu. Hình 24.
 |
Bạn hãy click vào hình cái ổ khóa, như hình 25.
 |
 |
Bây giờ, hãy chọn lại 4 màu. Bạn sẽ thấy màu sắc đó được giữ nguyên như trong hình 27.
 |
Bạn hãy so sánh nó với hình 22.
|
Bạn có thể khóa với các màu bị mất trong quá trình bạn chọn ít màu.
Vậy là xong nhé, với các hình .gif lớn mà không có Transparency.
————————
Tiếp theo, chúng ta sẽ tối ưu hóa một hình gif với nền transparency.
———
Phần 3:
Tiếp theo, chúng ta sẽ tối ưu hóa một hình gif với nền transparency.
Trở lại với cái Logo, FF tạo ra cái logo với nền trong suốt (transparent background).
Bạn hãy xem trong hình 28.
Vậy là xong nhé, với các hình .gif lớn mà không có Transparency.
————————
Tiếp theo, chúng ta sẽ tối ưu hóa một hình gif với nền transparency.
———
Phần 3:
Tiếp theo, chúng ta sẽ tối ưu hóa một hình gif với nền transparency.
Trở lại với cái Logo, FF tạo ra cái logo với nền trong suốt (transparent background).
Bạn hãy xem trong hình 28.
 |
Ấn Ctrl + Shift + M để chuyển sang IR.
Trong IR, chọn 2-Up bạn sẽ thấy là cái hình được Optimize có nhiều vết răng cưa. Như hình 29 bạn thấy.
Trong IR, chọn 2-Up bạn sẽ thấy là cái hình được Optimize có nhiều vết răng cưa. Như hình 29 bạn thấy.
 |
Nhiệm vụ của chúng ta là làm giảm răng cưa đi để cái logo nhìn trong trình duyệt được đẹp nhất.
Công việc của bạn như trong phần 2 là lựa chọn các thông số trong bảng Optimize để có kích thước file nhỏ nhất và thời gian load nhanh nhất với chất lượng ảnh như bạn mong muốn.
HÌnh 30
Công việc của bạn như trong phần 2 là lựa chọn các thông số trong bảng Optimize để có kích thước file nhỏ nhất và thời gian load nhanh nhất với chất lượng ảnh như bạn mong muốn.
HÌnh 30
 |
 |
Của sổ của tùy chọn Output xuất hiện.
Hình 32
 |
Bạn chú ý vào các điểm, như sau:
1. Bạn tích chọn Image, nghĩa là Logo sẽ là một hình ảnh của web.
2. Bạn tích chọn Background, nghĩa là logo của bạn sẽ là hình nền của web, background.
3. BG color là màu nền, FF chọn màu nền là màu xanh nhạt sang như bạn thấy.
4. Bạn cũng có thể chọn hình nền theo ý bạn trong phần background Image. Ở đây FF không chọn, mà chỉ chọn logo FF tạo là một đối tượng trên trang web.
Sau khi đã xong, bạn click Ok.
Click vào cái hình IE như hình 33 để xem trước hình của bạn hiển thị như thế nào.
Hình 33
1. Bạn tích chọn Image, nghĩa là Logo sẽ là một hình ảnh của web.
2. Bạn tích chọn Background, nghĩa là logo của bạn sẽ là hình nền của web, background.
3. BG color là màu nền, FF chọn màu nền là màu xanh nhạt sang như bạn thấy.
4. Bạn cũng có thể chọn hình nền theo ý bạn trong phần background Image. Ở đây FF không chọn, mà chỉ chọn logo FF tạo là một đối tượng trên trang web.
Sau khi đã xong, bạn click Ok.
Click vào cái hình IE như hình 33 để xem trước hình của bạn hiển thị như thế nào.
Hình 33
 |
Và kết quả bạn thấy trong hình 34
 |
Nó có thêm các thông tin, đoạn code, … như bạn thấy.
Nhưng hình ảnh thì xấu quá. Quá tệ phải không.
Chúng ta sẽ cải thiện nó, như lúc trước FF nói, chúng ta sẽ cần “Matte” trong Optimize Pallete.
Bây giờ, bạn hãy chọn cho bạn màu của Foreground là màu của màu nền trong khi bạn chọn màu nền cho trang web. Ở đây, FF chọn màu nền là màu xanh sang nhạt, CCFFCC. Bạn có nhiều cách chọn màu, cái đó phụ thuộc vào bạn, FF chọn cách đổi màu foreground cho hợp với màu nền của trang web.
Trong Optimize palette, di chuột đến Matte và chọn Foreground.
Hình 35
Nhưng hình ảnh thì xấu quá. Quá tệ phải không.
Chúng ta sẽ cải thiện nó, như lúc trước FF nói, chúng ta sẽ cần “Matte” trong Optimize Pallete.
Bây giờ, bạn hãy chọn cho bạn màu của Foreground là màu của màu nền trong khi bạn chọn màu nền cho trang web. Ở đây, FF chọn màu nền là màu xanh sang nhạt, CCFFCC. Bạn có nhiều cách chọn màu, cái đó phụ thuộc vào bạn, FF chọn cách đổi màu foreground cho hợp với màu nền của trang web.
Trong Optimize palette, di chuột đến Matte và chọn Foreground.
Hình 35
 |
Bạn nhìn thấy logo trở nên mịn hơn rất nhiều ở viền.
FF phóng to để bạn nhìn cho rõ, hãy để ý là xung quanh viền chi tiết có màu foreground bao phủ. Hình 36
FF phóng to để bạn nhìn cho rõ, hãy để ý là xung quanh viền chi tiết có màu foreground bao phủ. Hình 36
 |
So sánh với nó khi không qua bước “Matte”, ở hình 37
 |
Và hãy xem thử kết quả của bạn trong trình duyệt xem bây giờ logo của bạn hiển thị thế nào.
Hình 38
Hình 38
 |
So sánh với hình ban nãy không qua Matte xem nhé,
Hình 34
Hình 34
|
Bạn đã có một kết quả rất tuyệt.
Nhưng, hãy thử cải thiện thêm chút xíu bằng cách bổ sung thêm một màu đệm trước cho các chi tiết của Logo, bạn sẽ còn thu được kết quả ấn tượng hơn. Cái này phụ thuộc vào bạn.
Bây giờ, FF sử dụng Outer Glow trong Layer Style, hình 39
Nhưng, hãy thử cải thiện thêm chút xíu bằng cách bổ sung thêm một màu đệm trước cho các chi tiết của Logo, bạn sẽ còn thu được kết quả ấn tượng hơn. Cái này phụ thuộc vào bạn.
Bây giờ, FF sử dụng Outer Glow trong Layer Style, hình 39
 |
Nhưng trước khi thao tác với nó, hãy trả lại tùy chọn Matte là None
Mục đích của Outer Glow là tạo ra một lớp phủ ngoài các chi tiết ở rìa của Logo nhằm tạo ra sử chuyển tiếp nhẹ nhàng hơn cho logo.
Kết quả của FF sau khi thao tác với Outer Glow, hình 40
Mục đích của Outer Glow là tạo ra một lớp phủ ngoài các chi tiết ở rìa của Logo nhằm tạo ra sử chuyển tiếp nhẹ nhàng hơn cho logo.
Kết quả của FF sau khi thao tác với Outer Glow, hình 40
 |
Bạn sẽ thấy có một lớp màu xanh bao bọc ngoài.
Công việc tiếp thao là chọn lại Matte với màu là màu hồi nãy, nếu bạn không thay đổi gì, đó là màu Foreground. Màu FF đã chọn là CCFFCC
Kết quả bạn thấy sau khi Matte là:
Hình 41
Công việc tiếp thao là chọn lại Matte với màu là màu hồi nãy, nếu bạn không thay đổi gì, đó là màu Foreground. Màu FF đã chọn là CCFFCC
Kết quả bạn thấy sau khi Matte là:
Hình 41
 |
Đừng lo gì cả nếu bạn nhìn cái logo của bạn như thế, giờ hãy xem kết quả trong trình duyệt
Hình 42:
 |
Quá tuyệt, bạn đã có một logo cực đẹp.
——-
Bây giờ hãy xem FF thao tác lại chút xíu với bước Outer Glow nhé. Chọn lại màu và tăng size trong Outer Glow. Bạn thấy Logo có thêm một màu vàng nhạt khá đẹp. Hình 43.
——-
Bây giờ hãy xem FF thao tác lại chút xíu với bước Outer Glow nhé. Chọn lại màu và tăng size trong Outer Glow. Bạn thấy Logo có thêm một màu vàng nhạt khá đẹp. Hình 43.
 |
——-
Công việc cuối cùng là save nó lại, hãy chọn Save optimized As, và chọn html and Image (HTML). Như hình 44
Công việc cuối cùng là save nó lại, hãy chọn Save optimized As, và chọn html and Image (HTML). Như hình 44
 |
Và bạn hãy xem là có một folder với một trang web đã xuất hien
Blend 1
| Từ khóa | Tìm theo | |
Gửi ngày 5 Tháng 5, 2009
Introduction: Blending là kĩ năng cơ bản để hòa trộn hình với nhau. Một số bạn vẫn dùng Blend Mode cho mỗi tác phẩm như Overlay, Screen, Saturation … nhưng không nắm rõ thực chất mỗi option đó có chức năng như thế nào. Với những kiến thức trên lớp và chút kinh nghiệm ít ỏi mình xin chia sẽ cùng mọi người về vấn đề này.
Blend option gồm cái nhiều mục, mình chỉ đi vào chi tiết những mục phổ biến nhất, còn lại mấy bạn tự mò ra nhé. Mình sẽ nói về 3 mục chính (Mỗi group đều có chức năng giống nhau):
Group 1: Darken, Multiply, Color Burn, Linear Burn, Darken Color.
Group 2: Lighten, Screen, Color Dodged, Lighter Color.
Group 3: Overlay, Soft Light, Hard Light, Vivid Light, Linear Light, Pin Light, Hard Mix.
* Group 1: (Option chuẩn và thông dụng nhất: Multiply)
Chức năng: Layer được chọn mode multiply sẽ được giữ lại những phần mang màu tối, và bỏ đi những phần mang màu sáng. Còn ở những chỗ chuyển tiếp từ tối sang sáng chức năng này giúp layer đang blend nhìn trong suốt nhưng vẫn giữ màu nguyên thủy.
Stock 1: http://www.vietphotoshop.com/modtut/tutori..._7897.jpg (hình cá nhân)
Texture: http://www.vietphotoshop.com/modtut/tutori...y_ArtOfDeca.png (Stock đã xin dùng)
Bạn nhìn kĩ 2 tấm hình trước và sau khi dùng Option Multiply. Những phần màu tối sẽ được giữ lại và những phần màu sáng sẽ bị mất đi dần.
Một ứng dụng nhỏ của mode này là dùng làm ảnh cũ, bạn chọn layer hình nền và bấm ctrl + U để chỉnh hue/saturation, chọn colorize và có thể chỉnh như hình sau:
Để dễ hiểu hơn về mode này mình tạo 1 layer mới và dùng Gradient Tool (G) vẽ theo hình:
Và chuyển sang chế độ hòa trộn Multiply, chức năng này sẽ xóa đi những phần sáng trên layer vừa chọn và giữ lại những phần tối, còn khúc giữa thì trông mờ mờ.
roup 2: (Option chuẩn và thông dụng là Screen)
Texture : http://www.vietphotoshop.com/modtut/tutori...tures99_6-1.png
Chức năng: ngược hoàn toàn với group 1, Group này giúp ta giữ lại những phần màu sáng (trắng) và xóa đi những phần màu tối (đen)
Một ứng dụng nhỏ là dùng chức năng này cùng với texture nhìn cũ cũ, chuyển texture thành screen, chọn Hue/Saturation cho hình gốc như group 1 nhưng chuyển màu về đen và tối tối ta sẽ có 1 bức ảnh cũ, trong giống 1 cảnh phim ngày xưa.
* Group 3: (Option chuẩn và thông dụng là Overlay)
Chức năng: Layer được chọn Overlay thì những phần sáng (trắng) sẽ được làm cho sáng hơn (brighter) và những phần tối (đen) sẽ được làm cho đậm hơn (darker), giống như chỉnh contrast cho hình. Những phần nằm giữa sẽ được giữ nguyên và chuyển thành trong suốt.
Ứng dụng phổ biến của chức năng là ta nhân đôi layer gốc lên và chọn overlay nó. Để hình đẹp hơn thì ở layer vừa nhân đôi ta vào filter/blur/Gaussian blur và chọn khoảng 2,3 pixel. Lưu ý là hình có thông số kĩ thuật thấp đừng làm bước này vì 1 là cháy màu, 2 bể hình, 3 hình cực kì xấu.
* Một vài Blending Option khác:
- Dissolve: dùng làm bể hình (noise), ứng dụng làm noise, ngôi sao hoặc ảnh vẽ.
- Difference và Exclusion: chuyển sang chế độ âm bản.
- Hue/Saturation/Color/Luminosity: Không thường dùng vì đã có những chức năng khác tương tự.
Chỉ đơn giản là vậy ^^
Review: Ok bây giờ là 1 ví dụ nho nhỏ để ôn lại kiến thức, cũng là bài tập ở lớp của mình.
Chúng ta có 3 hình sau: (web này là free stock nên khỏi credit nha)
Stock 1: http://www.sxc.hu/browse.phtml?f=view&...08913&rnd=1
Stock 2: http://www.sxc.hu/browse.phtml?f=download&id=1176629
Logo: http://www.vietphotoshop.com/modtut/tutori...d_mode/logo2.jpg
Công việc của bạn là không được cắt, không type lại hoặc làm bất cứ gì khác ngoài việc dùng blending mode để :
1. Loại bỏ background trắng và giữ lại “My Company Logo” để vào stock 1.
2. Tương tự câu 1 nhưng chữ “My Company Logo” phải màu trắng để vào stock 2. Được phép dùng 1 bước căn bản trước khi blend.
(suy nghĩ trước khi xem câu trả lời nhé)
(Câu trả lời ở trang sau)
Trả lời:
1. Blend mode nào dùng để giữ lại màu tối và xóa đi màu sáng -> Multiply.
2. Muốn chữ chuyển từ màu đen sang trắng chúng ta có 1 chức năng gọi là Inverse (Ctrl + I )
- Trước tiên Ctrl + I cho tấm hình logo để chuyển màu ngược lại. Nhưng background sẽ chuyển sang màu đen.
Blend mode nào dùng để xóa đi màu đen và giữ lại màu sáng -> screen.
Tổng kết part 1: Đó chỉ là 2 ví dụ cơ bản về blending trong thực thế khi bạn muốn thêm logo hoặc chữ kí của bạn hay công ty vào 1 bức ảnh quảng cáom giới thiệu hay buôn bán nào đấy. Nhưng cuộc sống không đơn giản thế ^^, bạn sẽ gặp nhiều rắc rối và trở ngại khác.
© NPPLoveyou - VietPhotoshop.com
Không có nhận xét nào:
Đăng nhận xét