Browsed by
Month: January 2014

Xử lý nhanh hình ảnh trong thiết kế giao diện Windows Phone

Xử lý nhanh hình ảnh trong thiết kế giao diện Windows Phone

Giao diện ngon nghẻ luôn mang lại những thành công nhất định cho một ứng dụng Windows Phone (WP).

Trong thiết kế giao diện, ngoài bố cục, màu sắc hợp lý, việc trang trí linh tinh như chèn hình nền,… cũng có tác dụng không nhỏ.

XAML mặc định có hỗ trợ Path, Path là một công cụ vô cùng hữu hiệu để làm việc với các đối tượng vector. Tuy nhiên, việc dùng Path không phải dễ, nếu không thành thạo, ngay cả việc vẽ những hình khối đơn giản cũng sẽ tốn của bạn một đống thời gian.

Quay lại với vấn đề, giả dụ mình muốn chèn một hình như sau vào ứng dụng, khổ cái là hình mình muốn chèn chỉ có độ phân giải rất nhỏ, nếu zoom lên 1 tí là vỡ tè le, như thế này

Vì ở đây, hình ảnh mình muốn chèn khá đơn giản, không quá cầu kì phức tạp nên mình quyết định sẽ sử dụng các tool có sẵn, vector hóa nó rồi sau đó import vào XAML. Hiện có rất nhiều công cụ hỗ trợ vector hóa hình ảnh, để cho tiện, mình sử dụng luôn một tool online có sẵn là Vector Magic. Việc sử dụng rất đơn giản, bạn lên side đó, upload ảnh cần xử lý lên, nó sẽ xử lý cho bạn, sau đó bạn lưu file về. (Lưu ý là mỗi tài khoản ở site này chỉ được phép tải free 2 lần, cho nên các bạn cứ clone acc mà làm). Lúc lưu file nhớ chọn định dạng PDF. Nếu công cụ mà bạn sử dụng có hỗ trợ định dạng AI thì cứ dùng AI, vì ở đây nó không hỗ trợ AI nên mình dùng tạm file PDF.

Việc tiếp theo là đổi đuôi .PDF của file vừa tải về thành đuôi .AI, lí do đơn giản là Blend nó chỉ hỗ trợ định dạng này thôi.

Sau đó các bạn vào Blend, tiến hành import file .AI vừa mới đổi đuôi ở trên.

Thế là xong, Blend nó sẽ import file .AI đó vào và convert nó thành một cái Path cho bạn tùy ý đổi màu đổi size cấu xé nhai nuốt và còn có thể xử lý trực tiếp bằng code :v Ở đây mình chỉ đổi màu, xếp cho đúng chỗ, chỉnh lại opacity tí xíu. Rõ ràng là nó sẽ làm giao diện sinh động hơn nhiều.

Chỉ đơn giản thế thôi. Chúc các bạn có những ứng dụng không những chạy tốt mà còn đẹp nữa :v

YOLO \m/