Dành cho người yêu Blog "Yahoo 360° và Customize your theme"

“CÁ TÍNH RẠNG NGỜI MỖI SẮC MÀU BLOG”

Kỷ niệm sinh nhật lần thứ nhất (theo cách nói người Việt thì “thôi nôi” đúng hơn) của mình hôm 16-6, Yahoo 360° Teams đã bổ sung nhiều tính năng độc đáo mà được quan tâm hơn cả là khả năng tự thiết kế giao diện cho riêng mình (Customize your theme). Yahoo đã chạy một câu tít thật “khiêu khích”: Show Your inner Piccaso.

Thực ra, đây là động thái “không sớm thì muộn” của Yahoo 360° Teams bởi lẽ, với hàng vạn thành viên thì việc “mời sẵn” vài ba chục theme là rất dễ…đụng hàng và không thể đáp ứng được nhu cầu “là tôi – riêng tôi –tự tôi”. Có thể bạn sẽ phản ứng rằng “Cần gì màu mè hình thức, chủ yếu là nội dung của blog chứ?”

Ồ tôi không tin là như thế, bạn hãy thử ghé qua trang 360° của thành viên này xem sao. Để tôi kể bạn nghe cảm giác đầu tiên khi tình cờ bắt gặp trang đó. “Ấn tượng” ; “Sang trọng” ; “Cá tính”: Đấy là 3 tính từ mà tôi có thể thốt ra khi chạm gặp giao diện trang này.

Chủ nhân của nó đã khá tinh tế khi “pha màu” hài hòa như thể luồng sáng màu hổ phách đi tự nhiên từ khu vực Avatar đổ ra xung quanh và từ nàng mỹ nhân chân gác vắt vẻo phía trên. Của đáng tội, đọc một hồi Profile của người đó tôi mới biết họ là…Web Designer bạn ạ, chả trách!

Thế nhưng, tôi tin bạn có thể làm được hơn thế! Trước tiên, tôi hiểu bạn rất háo hức khi bạn bè tới tấp mời bạn làm “giám khảo” cho theme của họ và bạn cũng đang rất muốn “thể hiện mình”, phải không? Có lẽ, việc quá háo hức như thế đã khiến một vài bạn trở nên vội vàng trong việc tìm background và phối màu. Kết quả dẫn đến là có khá nhiều theme nhìn khá “chói”; “phản cảm” và cả…”phản chủ”!

Thế nên, thay vì theme (tượng trưng cho hình thức) đề tôn cái nội dung của blog (tức là đề tôn cá tính của bạn) thì nó lại khiến bạn bị người ta cười thầm là “vụng về” và “không có khiếu thẩm mỹ”. Liệu sự thể có nặng nề như lời phàn nàn đó không?

Tôi cho rằng, bạn hoàn toàn có thể làm hài lòng những đôi mắt “kỹ tính” như thế nếu bạn dành chút thời gian nghĩ về những điều sau:

- Bạn có tâm trạng thường trực ra sao? Nói cách khác, tâm trạng bạn nhìn chung thường là vui nhiều hơn hay buồn nhiều hơn?

- Màu yêu thích của bạn là màu gì? Và bạn có biết gam màu nóng và gam màu lạnh phục vụ cho những cảm xúc khác nhau không?

- Nội dung blog của bạn thiên về gì? Có đi đôi với tâm trạng của bạn không? Và bạn thử hình dung blog của bạn “khoác” một chiếc theme như thế nào thì…đỏm (hợp) nhất?

Tôi tin bạn đã đọc kỹ 3 điều trên, và bạn đã có một chút hình dung về mối quan hệ giữa theme và blog (xin tránh dùng từ blog để chỉ toàn thể trang 360° dù cho nó là nội dung chính yếu). Cơ bản, bạn cũng bắt đầu “pha” được một màu chủ đạo cho trang 360° của mình trong tưởng tượng.

 

Bây giờ, chúng ta cần gì để trở thành một Piccaso thứ thiệt? Tôi lại mời bạn trả lời tiếp một số câu hỏi gợi ý như sau:

- Bạn cần một cái nền web (background) như thế nào? Sẽ là một ca sỹ, diễn viên, cầu thủ yêu thích hay là hình ảnh của chính bạn tràn ngập “mọi góc độ”; hoặc đơn giản chỉ “treo” ở đỉnh trang như của anh chàng chúng ta xem hồi nãy? Nếu không thích“treo” trên đỉnh nữa mà bạn muốn để “chàng, nàng” của bạn nằm ưỡn ẹo phía dưới đáy web, để khi nào kéo thanh trượt xuống lại phải…xuýt xoa, liệu có được chăng?

- Bạn có khả năng xử lý ảnh bằng một chương trình đồ họa như Photoshop không?

- Bạn đã có sẵn một cái hình nào đó làm background chưa, hay là vẫn còn chạy đi kiếm?

- Bạn đã có sẵn chương trình lấy màu chưa?

- Bạn đã cài chương trình resize ảnh nào chưa?

Theo cảm quan của riêng tôi, có một lượng khá lớn thành viên chuộng “treo” nền phía trên và phía dưới trang web, bởi đó là hai khu vực dễ nhận thấy nhất mà không bị các “modules” (các bảng thành phần của 360°) che đi mất. Thêm nữa, tôi rất có cảm tình với những theme “treo” kiểu này. Vì sao? Chính tại đây cá tính mới được khẳng định. Bạn thử vào lại trang chọn theme của 360° đi nào, sẽ thấy hơn 2/3 theme của họ là dạng “treo” đỉnh và đáy web đấy nhé!

Nhưng cái khó của dạng background này là hai hình làm top và bottom không phải lúc nào cũng sẵn có, nó buộc bạn phải tự design lấy nếu không sẽ khá thất vọng vì quanh quanh trên web chẳng có cái hình nào vừa ý để “copy” hết (lại copy, chả thích tẹo nào!).

Cho tôi nhắc bạn một điều về yêu cầu hình ảnh của yahoo nhé: Họ bảo là JPEG only, tức là chỉ chấp nhận file ảnh với đuôi “*.jpeg” hoặc “*.jpg” (Nếu bạn up file “*.bmp”, “*.png” hoặc “*.gif” thì sẽ chẳng bao giờ thấy nó được treo lên đâu!)

Và dung lượng tối đa của file ảnh up lên chỉ được giới hạn ≤ 250kb (chất lượng sẽ khá tệ nếu là hình background toàn bộ trang). Họ chẳng nói gì về cái dimensions (kích cỡ) của cái hình cả. Do đó, nhiều bạn dở khóc dở cười không hiểu sao mình đem treo hình lên thì nó bị hở đầu hở đuôi. Sao nó không tự điều chỉnh cho khớp nhỉ?

Là họ đánh đố mình đấy bạn ạ, nhưng nếu bạn tinh ý một chút, sẽ nhận ra màn hình bạn đang dùng là ở chế độ 1024x786 pixels (một số màn hình cũ 14, 15 inches có thể sẽ là 800x600 pixels). Do vậy, cái hình đem làm nền trang web dứt khoát phải là ở kích cỡ đó. Như bạn thấy ở trang 360° của tôi, hình mặt trăng có khổ 1024x500pixels, và hình hoa cúc có khổ 1024x700pixels.

Tại sao có sự xê dịch con số phía sau? Đó là bởi tôi đã giới hạn lại chiều cao (height) của cái ảnh, vì tôi muốn dành phần giữa trang web để phối màu đen ưa thích. Nếu bạn nhạy cảm sẽ nhận ra rằng toàn cảnh trang 360° là một đêm mưa trăng rất buồn và lạnh, do vậy khúc giữa tôi không thể phối màu khác đi được.

Vậy làm sao cái ảnh thiết kế của bạn có được kích cỡ này? Nếu bạn là người “vọc” được photoshop thì rất đơn giản. Còn nếu không? Bạn cần có một chú nhóc tí hon hỗ trợ đó là Powertoys Resize Picture(*) của Microsoft. Tôi rất khuyến khích bạn sử dụng cậu bé này, bởi cậu tuy nhỏ nhưng lại rất hữu ích.

Sau khi cài đặt xong, bạn chỉ việc trỏ chuột phải vào cái hình bạn muốn resize (xin bạn nhớ là cái hình gốc phải có kích cỡ tương đối lớn, chứ nếu nó nhỏ và độ phân giải thấp quá thì khi tăng khổ ảnh chỉ làm thêm… khổ chủ!) và chọn ngay vào cái box large (1024x780).

Lúc bấy giờ bạn đã có đủ “vật liệu” để làm nền nhà rồi đó. Đã bắt tay vào được chưa? Tôi e rằng vẫn chưa chắc chắn lắm, bởi lẽ nếu đơn giản bạn chỉ muốn treo hình lên để trang trí thì không cần bàn thêm, nhưng nếu bạn muốn cái hình nó phải như hòa vào màu nền web thì làm sao? Chà gay nhỉ!

 

Tôi phải thưa ngay với bạn rằng, một trong những điểm để phân biệt sự tinh tế của người thiết kế là nằm ở chỗ hài hòa này đấy. Và nói vậy thì những theme designer của yahoo há chẳng phải là tinh tế nhất sao? Hãy xem một mẫu về sự hòa quyện:

Rất tiếc là nếu chỉ dùng những chương trình thông thường như paint thì không thể tạo được sự hòa quyện như thế bạn ạ. Phải dùng đến photoshop để thao tác với chức năng “hòa màu vùng lân cận” thì mới ra như thế. Nhưng nó khá phức tạp và mất thời gian, do vậy bạn có thể dùng mẹo như sau:

Hãy kiếm một hình nào đó mà ở dưới phần đáy hình hoặc đỉnh hình là một vùng thẳng màu đơn (đen, trắng, xanh, vàng, đỏ v.v.) trùng với màu bạn định chọn làm nền 360°. Chính vùng màu đơn này sẽ giúp bạn “ăn gian” rất khéo. Tôi để ý thấy khá nhiều bạn chọn hình có nền là màu đen, do vậy khi “treo” hình lên người ta cứ ngỡ toàn nền là một hình chứ không phải là phối với màu.

Nếu không thể kiếm ra cái hình như thế thì sao? Lúc này đây bạn cần đến “thằng bé chỉ màu” Anry Color Picker để lấy được màu vùng giáp biên của bức ảnh, và như thế bắt buộc bạn phải chọn màu giáp biên đó làm màu nền 360° (tôi xin nhắc lại phải cầu kỳ thế này vì bạn muốn đạt đến sự hài hòa của nền web).

Cách thức lấy màu ra sao? Sau khi bạn up cái hình lên để “treo” đỉnh và (hoặc) đáy rồi, hãy mới mở “thằng bé chỉ màu” ra, lúc này nếu bạn di chuyển con chuột đến vùng có màu trên màn hình, lập tức ô màu của thằng bé cũng…sáng theo y chang là cái màu đó. Nhưng làm sao biết được mã HTML của màu?

Hihi, thằng bé này nó giấu sẵn trong người nó phím tắt “Alt X”, nên bạn chỉ cần dừng con trỏ tại vị trí màu ưng ý và bấm nhanh tổ hợp phím “Alt X” thì lập tức màu kia sẽ được thằng bé lưu lại với một cái tên bắt đầu bằng “#.....”, bạn chỉ việc bấm vào cái nút Copy Value của nó rồi qua paste vào ô “*Page Background” là xong. Tương tự cho các màu khác của các modules thành phần khác.

Tôi rất vui nếu các bạn tham khảo một số điểm khi phối màu cho các modules như sau:

- Nếu hình “treo” trên đỉnh là một hình nhiều ánh sáng, hãy phối màu sao cho các modules như “Bar name, Profile, Photo Background” chịu sự ảnh hưởng của nguồn sáng này, như vậy bạn cần trỏ chuột để lấy màu vùng sáng lân cận của cái hình rồi phối.

- Màu các modules không nên nhợt nhạt vì nó sẽ bị background “ăn thịt”!

- Màu của viền các modules cũng đừng quá rực rỡ (có khá nhiều đường viền đấy bạn ạ, và màu của chúng làm ảnh hưởng không ít).

- Màu chữ của các thành phần cũng là rất quan trọng, đừng để nó bị “chìm nghỉm” vào màu của module mà cũng đừng quá “chói chang mùa hè”.

- Blast nên chọn chế độ Whisper (tôi rất mến chế độ này) vì nó được transparent (trong suốt) một ít, không làm che đi phần nền phía sau. Màu của nó cũng tùy nền phía sau mà chọn cho hợp.

- Blog comment background nên chọn khác màu với page background nhưng cũng không nên quá nổi bật.

Hình như tôi đã nói quá nhiều về phần dành cho ảnh nền “treo” đỉnh và đáy. Vì tôi nghĩ nếu bạn thực sự yêu mến trang 360° của mình, xem như đó là “mái nhà” hay là “một lối phục sức tinh thần” thì bạn sẽ kỳ công phối cảnh cho nó. Và tôi nghĩ đây cũng chính là niềm tin của Yahoo 360° Teams khi họ “hào phóng” tặng cho bạn quyền làm chủ này. Có lẽ, có một câu như sau được “cover” lại mà cũng rất đáng suy ngẫm:

“Hãy cho tôi biết link blog của bạn, tôi sẽ nói bạn là người như thế nào”

 

Bây giờ, tôi xin được chuyển qua phần tạo nền toàn trang. Đây là phần mà khá nhiều bạn đang gặp lỗi và không thể hài lòng với kết quả mà 360° hiện ra mỗi lần họ bấm nút “review”.

Đầu tiên là một câu hỏi to đùng mà nhiều người sẽ đặt ra sau khi nhìn thấy “kết quả sáng tạo”: “Oa oa Tại sao cái hình nó lại bị nhân lên nhiều vậy, nhìn nham nhở quá đi mất!” Ô hay này bạn! Thế một cái nền to thật là to mà bạn chỉ cho một cái hình bé tí thật ti thì làm sao mà người ta trát cho khít nền nhà được? Vậy mà làm phúc “nhân đôi giải thưởng” cho bạn thì lại “ứ chịu đâu” thì biết làm thế nào? :P

Đó là nguyên tắc “lấp nền” khi bạn chọn chế độ page background là một cái hình toàn thể. Lúc bấy giờ, muốn cho cái hình không bị “nhân đôi giải thưởng”, chỉ có mỗi một cách là bạn làm sao cho cái hình nó…vừa khít với cái nền của 360°. Nhưng làm sao mà biết? Thú thật với bạn là tôi cũng chẳng biết cái kích cỡ đó bao nhiêu thì vừa!

Mà tôi e rằng chẳng thể vừa vì như bạn thấy blog sẽ phát triển theo chiều hướng “dài – dài nữa – rồi – next page”, do vậy cái hình của bạn làm sao mà chạy theo cho kịp? Cũng xin bạn nhớ cho cái nguyên tắc “lấp nền” được thực hiện rất triệt để và…hoàn toàn tự động! Chúng ta chẳng thể cưỡng lại được rồi

Cho nên, 99,9% bạn chỉ có thể miễn cưỡng đồng ý với Yahoo 360° và cho phép nó “nhân triệu giải thưởng” cũng được, nhưng đau lòng mong bạn bỏ cái hình cũ đó đi, bởi vì quả thật chính bạn cũng không thể chịu nổi cảnh “nhân bản vô tính” thần tượng của mình một cách nham nhở kia mà!

Vậy bó tay ư? Tệ thật! Phải có cách khác chứ. Tôi biết bạn sẽ khá thất vọng, nên xin mời bạn lại vào trang trưng bày theme của yahoo xem họ có ý tưởng gì hay ho hơn chăng? Ồ, hóa ra những cái theme nhân đôi nhân ba của họ đều là những hình ảnh nhỏ nhắn xinh xắn và ít màu sắc, ví dụ như mấy chiếc tàu bay giấy phóng đầy trời, rồi những con mèo ngố lí lắc. Chắc chắn những thứ này “nhân bản” lên thì chỉ đem thêm niềm vui.

Do vậy, nếu bạn là người yêu hoạt hình, hoặc yêu những textures (vân gỗ, thảm dệt), hãy chọn một tấm hình bé bé (cỡ như avatar 160x160 pixels) trong đó có một nhân vật dễ thương và một cái nền màu đơn (xanh, đỏ, tím, vàng, đen) rồi đem lên “lấp nền nhà 360°”. Chắc chắn kết quả sẽ đẹp không ngờ!

Nếu bạn muốn thử trước cho chắc ăn, khỏi phải bò lên 360° và mở nhiều trang mắc công. Hãy mở Word lên, vào Format, chọn Background và chọn Fill Effects, khi box Fill Effects hiện ra bạn có thể chọn tab Picture để lấy cái hình của bạn làm nền coi thử ra sao?

Nhân đây, tôi sẽ rất vui mừng nếu bạn cũng chợt nhận ra như tôi sự trợ giúp tuyệt vời của phần Fill Effects này của Word. Đã lỡ nói nhiều rồi tôi xin nói cho luôn, trong cái box Fill Effects này của Word có khá nhiều hiệu ứng rất đẹp như phối hai ba màu lại với nhau và các màu phối sẵn. Bên cạnh đó là một đống textures thật xinh đẹp mà bạn có thể đem ra để “lấp nền nhà 360°” của mình mà không ai có thể chê vào đâu được!

Bạn hỏi tôi làm thế nào đem những thứ nền đẹp trong word ra ư? Khá dễ bạn ạ, hãy chọn background là cái Fill Effects xong, rồi bạn sẽ có một trang Word đầy màu sắc, lúc này bạn hãy Save as trang Word lại dưới dạng một trang web, tức là đuôi *.html. Sau đó bạn tìm đến thư mục lưu file này trong máy, nó sẽ có kèm một folder cùng tên và mở nó ra: Ồ, là cái file hình nền nằm trong đó!

Và xin lưu ý một chút bạn hãy dùng chương trình gì đó bất kỳ như Picassa, Microsoft Office Picture Manager để chỉnh cho ánh sáng (bright) và độ tương phản (contrast) của tấm hình giảm xuống một chút để nó không quá rực rỡ khi đưa lên web (Ai biết dùng Photoshop thì làm transparent (trong suốt) nó một chút càng hay!)

Tôi còn nhớ cách đây vài năm khi sử dụng Yahoo Mail Plus của Yahoo, nó có chế độ cho chèn nền là những hình ảnh dễ thương vô cùng. Tiếc là giờ chẳng biết tìm đâu nữa. Nhưng, Net mênh mông thì google cũng thần thông mà, phải không bạn? Search – Search – Search. Đó là tất cả những gì bạn phải làm để có được một thông tin ưng ý.

Giờ đây, bạn đã xong về cơ bản “hình hài” của 360° nhà bạn. Tôi rất mong bạn thực sự “thả hồn” vào công việc sáng tạo này, bạn sẽ thấy tính cách mình hiện lên rất rõ trong từng màu sắc, hình nét.

Cũng xin mạn phép nhắc bạn thêm một điều nữa thôi (huhu), đó là trong mục Main Text Font bạn hãy chọn 1 trong 3 font :Arial, Times, Verdana để những người vào thăm blog của bạn có thể Comment khen ngợi bằng tiếng Việt có dấu. Rất tiếc là Yahoo 360° Teams đã quên mất Font cho Blast nên chúng ta vẫn chưa thể “thầm thì” bằng tiếng mẹ đẻ đủ dấu. Tôi sẽ Feedback để cầu cho một sự thay đổi sắp tới.

****

Rất mong bài viết của tôi phần nào giúp thêm một tay cho “công cuộc xây nhà” của các bạn. Tôi sẽ đi quanh quanh và nhìn ngắm mọi người, nhìn: