Đúng cách? Đó đơn thuần là một tính từ chỉ sự thoả mãn cho mục đích mà mỗi người đang hướng tới thực hiện, làm cho đúng ý mình thì là đúng cách. Nhưng thôi, đừng nghĩ nhiều về chuyện đó. Khi làm web hay thiết kế bất cứ sản phẩm đồ hoạ nào, "đúng cách" nghĩa là thoả mãn con mắt của người nhìn, chứ không chỉ là bản thân. Web 2.0, đó là một xu hướng lớn hiện nay phải không nào? Tại sao khi ta vào những trang web "đặc sệt" 2.0, ta nhiều khi phải mở to cả mắt lẫn các nơ-ron thần kinh rồi mà tự hỏi: "Tại sao lại đẹp đến vậy? Làm cách nào mà được như vậy?". Câu trả lời đơn giản là: tất cả những thứ đó, những icon, những background, những image đó, chúng đã làm thoả mãn con mắt của ta. Con mắt của ta từ lâu lắm rồi đã mặc nhiên biết khi ánh sáng rọi vào một vật thì sẽ thế nào, khi một vật đổ bóng thì sẽ thế nào... Khi các sản phẩm đồ hoạ tiến gần đến "cách nhìn" của mắt người, với tất cả những transparent (hiệu ứng trong suốt), glossy (hiệu ứng bóng lộn), gradient (hiệu ứng chuyển màu), hay shadow (hiệu ứng đổ bóng) v.v..., ta sẽ thấy nó đẹp một cách rất thật. Đó cũng chính là sự khác nhau của 2D và 3D. Cùng trên một mặt phẳng như một tờ hoạ báo hay màn hình LCD, nhưng hiệu ứng 3D sẽ dẫn dắt ta vào thế giới của hình khối, chiều sâu và những nguồn ánh sáng.

Đây là bài viết chia sẻ cách tạo hiệu ứng Gradient sao cho thật trong Photoshop. ^^ Phải nói một câu như thế để các bạn hiểu là tại sao lại có cái đoạn dài dòng phía trên.

Gradient là hiệu ứng chuyển màu. Trong đồ hoạ 2D, Gradient đơn giản chỉ dùng để trang trí, ta có thể chuyển từ màu này sang màu kia theo ý miễn sao hợp ý đồ làm đẹp của ta. Ví dụ đây là 1 kiểu 2D Gradient:

Nhưng khi sử dụng Gradient để tạo hiệu ứng 3D, hiệu ứng chuyển màu lại được dùng để miêu tả sự tác động của nguồn ánh sáng lên đối tượng, làm cho nó thật hơn, nổi bật hơn trên nền phẳng. Đối tượng ở đây có thể là thanh Navigation, nút nhấn, khu vực footer hoặc banner quảng cáo... Không thể phối màu tuỳ ý như đỏ với xanh được, mà phải giống với nguyên lý chiếu sáng trong cuộc sống thực.

Có thể bạn thấy đây chỉ là những chi tiết rất nhỏ. Tuy nhiên trong mỹ thuật ứng dụng, những nét tinh tế thường là những điểm rất nhỏ mà tác dụng lại không nhỏ chút nào. Sau đây ta sẽ phân tích một cách sâu hơn Gradient như thế nào thì được coi là dễ nhìn và "thật" hơn cả.

1- Ở hình trên, hiệu ứng Gradient số 1 là một lỗi hay gặp. OK, sự chuyển màu khá mịn, tuy nhiên ở vùng "được cho là" hướng ánh sáng chiếu vào (từ trên xuống), màu bị giảm sắc độ một cách rõ rệt. Sắc độ ở đây nghĩa là độ bão hoà của màu (Saturation). Bị mất Saturation thì hình ảnh đương nhiên trông sẽ không thật, vì trên thực tế, ánh sáng không làm giảm sắc độ của vùng bị ảnh hưởng ở sự vật. Gradient số 1 trông rất xám xịt.

2- Hiệu ứng Gradient số 2 thì quả thật là hay gặp nhất. Nó khá hơn Gradient số 1, bảo lưu được Saturation trên vùng ánh sáng tác động lên, tuy nhiên vẫn không phải là hiệu ứng mà ta mong muốn. Kết quả như thế này có được khi ta nôn nóng tạo điểm nhấn bằng ánh sáng quá mạnh, gây nên sự chuyển màu không mượt mà, tạo cảm giác "vấp" của hướng ánh sáng. Ngoài ra, mặt phẳng được chiếu sáng lên trông không còn giống mặt phẳng mà giống như một tờ bìa bị uốn cong một cách cẩu thả vậy.

3- Gradient số 3 chính là ví dụ chuẩn nhất. Nó không chỉ giữ lại sự tươi tắn của màu sắc trên vùng được chiếu sáng, mà còn tinh tế tạo sự khác biệt giữa tối và sáng một cách mượt mà.

Làm cách nào để thực hiện?

---

1. Tạo một Layer mới với một màu tuỳ chọn

Ở đây mình chọn màu tối một chút (di chuyển point chọn màu về gần bên tay phải trong bảng màu), làm như vậy để hiệu ứng ánh sáng tạo nên được cuốn hút hơn.

Rồi dùng Paint Bucket Tool đổ màu lên Layer vừa tạo, được kết quả như sau:

2. Tạo Layer 2 để thực hiện Gradient

Nhấn Ctrl + Shift + N để tạo Layer mới. Tuy nhiên Layer này để nguyên background trong suốt, không cần đổ màu gì.

3. Thực hiện tạo Gradient

Chọn công cụ Gradient. Công cụ Gradient nằm cùng nhóm với công cụ Paint Bucket hoặc có thể ấn Shift + G để chọn.

Sau đó trên thanh công cụ Option, thiết lập các tuỳ chọn như sau:

Giải thích các Option: Gradient type là "Foreground to Transparent", Gradient orientation là "Radial Gradient", Blending Mode: Normal, Opacity: 100% (độ che phủ hoàn toàn), cuối cùng là bật chế độ "Transparency".

Trong đó quan trọng nhất là Option đầu và Option cuối. Chọn type là "Foreground to Transparent" để hiệu ứng mờ dần bắt đầu đi từ màu đã chọn tới điểm kết thúc là hoàn toàn trong suốt.

Tiếp theo là chọn màu cho Gradient. Tất nhiên là không thể trùng với màu của màu đã chọn cho Layer bên dưới. Ở đây mình chọn một màu cùng tone với Layer dưới (tốt nhất là chọn ngay trong vị trí bảng màu đã chọn cho Layer dưới), sáng hơn một chút và chỉ nhạt màu hơn không đáng kể. So sánh về vị trí thì point chọn màu lần này nằm cao hơn màu cũ một đoạn không quá xa và hơi chếch về bên trái. Chú ý nếu chọn quá cao thì ánh sáng sẽ quá mạnh, hiệu ứng sẽ không thật; còn nếu cách quá xa về bên trái thì sẽ giảm Saturation của vùng ánh sáng.

Ok. Việc cuối cùng rất đơn giản. Gradient sẽ được tạo ra bằng cách vẽ một đường thẳng, trong trường hợp này vì chọn điều hướng cho Gradient là Radial nên hiệu ứng chuyển màu sẽ tạo thành một hình tròn lấy điểm bắt đầu của đường thẳng được vẽ ra làm tâm.

Done!

Subscribe
MisoBlog RSS

Hứng thú với những bài viết trên MisoBlog? Hãy thử đăng ký nhận tin mới qua email, hoặc chia sẻ bài viết bằng thanh công cụ dưới đây.