Nóc Nhà - Thiết kế sẵn

Nóc Nhà – Làm sẵn

            Khi tìm thấy một ảnh động đẹp và phù hợp là tôi làm ngay thành ảnh cho Nóc Nhà của Blog. Tôi cứ làm sẵn để thỉnh thoảng thay đổi Nóc nhà của mình, hoặc nếu bạn nào thích mà ngại làm thì có thể lấy về dùng, dùng nguyên như vậy hoặc thích thì đưa vào Photoshop để viết thêm chữ theo ý mình.
            Hôm nay nhân tiện đưa lên đây một số nóc nhà mới làm, tôi ghi lại cách làm để nhớ các bước thực hiện.

1-    Khi tìm được ảnh động. Bạn copy về máy tính của mình. Kể cả ảnh Flash đẹp bạn cũng đưa về máy tính và dùng chương trình biến đổi SWF thành Gif và sau đó xử lý các file này như các file ảnh động bình thường.

2-    Mở chương trình ImageReady, nạp ảnh động vào. Sau đó có thể chỉnh sửa ảnh cho đẹp hơn : Ví dụ thay đổi độ sáng, độ nét..Tiếp theo là thay đổi kích cỡ ảnh động theo yêu cầu của Nóc nhà ( 970 px X 450 px). 3-    Tìm cách  giảm dung lượng của ảnh. Dung lượng của ảnh động thường khá lớn, vài MB. Nếu dùng cho nóc nhà thì rất nặng, nạp rất lâu. Việc giảm dung lượng ảnh phải thực hiện rất triệt để.Dung lượng  chỉ còn chừng vài trăm Kb mới đạt yêu cầu. Quá trình giảm dung lượng sẽ ảnh hưởng rất nhiều đến chất lượng hình ảnh, vì vậy vừa làm vừa quan sát và điều chỉnh sao cho tối ưu nhất.

Các bướcthực hiện như sau: 

-       Giảm số khung hình. Khung hình của ảnh động thường rất nhiều. Cốgắng giảm đi chỉ còn dưới 10 khung thôi, có thể giảm hàng loạt khung liền kề nhau để cắt đi một vài hình ảnh của chuyển động. Nhưng tôi thường dung cách bỏ bớt khung dàn đều để chỉ giảm độ tinh sảo của chuyển động. Tôi chọn tất cả các khung hình số lẻ ( hoặc số chẵn cũng thế) rồi xóa đi. Dung lượng giảm ½. Nếu số khung vẫn còn lớn mà hình ảnh vẫn còn tốt lại làm tiếp lần nừa. Sau mỗi lần giảm khung lại cho Play để kiểm tra hình ảnh để quyết định xem số khung đã giảm đủ chưa. Khi cho trình diễn bạn sẽ thấy hình ảnh lúc này chạy rất nhanh vì số khung đã giảm nhiều, bạn cần tăng số thời gian trình diễn lên sao cho phù hợp.-       Tiếp tục giảm dung lượng cho ảnh bằng cách Dùng phương pháp tối ưu hóa mầu sắc. Trên màn hình của ImageReady bạn nhấn vào 4-up để mở ra đồng thời 4 cửa sổ. Cửa sổ đầu tiên là bản gốc các cửa sổ khác là hình ảnh tối ưu hóa. Bạn hãy chọn lấy một ảnh có mầu sắc đẹp nhất trong số này để làm việc.Tối ưu hóa là giảm mầu sắc để giảm dung lượng, nhưng giảm thế nào để nhìn vào ảnh vẫn không thấy xấu đi. Muốn vậy trước khi giảm số mầu trong bảng mầu sử dụng thì phải giữ lại các mầu cơ bản mà ảnh đang có. Cách làm là bạn dùng công cụ Công tơ gut, chấm vào mầu cần giữ trên bức ảnh rồi nhấn vào biểu tượng ổ khóa phía dưới bảng Color Table ở phía phải màn hình. Nghĩa là bạn đã khóa mầu này không cho thay đổi. Tiếp tục chọn và khóa các mầu khác.Sau đó bạn giảm số mầu của bảng mầu từ 250 về 128 và có thể về 64 nếu mầu ảnh vẫn không kém đi lắm. Dung lượng ảnh nếu còn khoảng 3-400Kb thì tốt rồi.4-    Lưu file ảnh kết quả để sử dụng : Trong ImageReady vào File –Save Optimized As và lưu ảnh dưới dạng file Gif.5-     Mở chương trình Photobucket để tải ảnh lên. Sau đó copy lấy đường Link URL để đưa vào bảng mã.

<style> #hd{border-bottom:0px;}#asb-uh{border:0px;height:350px;background-color:#086996;}#asb-nav {height:430px;background:url(LINK ẢNH)no-repeat center;}</style>

                        Chúý : Chiều cao ảnh 430px có thể thay đổi khi thấy ảnh chưa vừa khít.

6-    Trên Blog của bạn, nhấn vào Bảng Điều khiển – Tiện ích WiDGet –Nhấn vào cài đặt của ô Nguồn bên ngoài chứa mã làm nóc nhà để dán mã mới vào. Rồi nhấn Cập nhật -  confirm – OK. Rồi nhấnLUU sau đó mở Blog của tôi để xem kết quả.

Dưới đây là một số Nóc nhà đã làm sẵn.

1-  Ngôi nhà nhỏ

Mã đưa vào nguồn bên ngoài:

<style>

#hd{border-bottom:0px;}
#asb-uh{border:0px;height:350px;background-color:#086996;}#asb-nav {height:430px;background:url(http://i1118.photobucket.com/albums/k615/anhnguyet43/ngonhanho2.gif)
no-repeat center;}</style>    

 Bảng mã :

    <style>

     #hd{border-bottom:0px;}
#asb-uh{border:0px;height:350px;background-color:#086996;}#asb-nav {height:430px;background:url(http://i1118.photobucket.com/albums/k615/anhnguyet43/2thacnuoc.gif)
no-repeat center;}</style>         

3-  Rừng xanh Bảng mã:

    <style>

     #hd{border-bottom:0px;}
#asb-uh{border:0px;height:350px;background-color:#086996;}#asb-nav {height:430px;background:url(http://i1118.photobucket.com/albums/k615/anhnguyet43/runganhs.gif)
no-repeat center;}</style>   

4-  Quạt gió Bảng mã:

<style>

#hd{border-bottom:0px;}
#asb-uh{border:0px;height:350px;background-color:#086996;}#asb-nav {height:430px;background:url(http://i1118.photobucket.com/albums/k615/anhnguyet43/quatgio.gif)
no-repeat center;}</style>     

5-  Sóng vỗ Bảng mã:

<style>#hd{border-bottom:0px;}
#asb-uh{border:0px;height:350px;background-color:#086996;}#asb-nav {height:430px;background:url(http://i1118.photobucket.com/albums/k615/anhnguyet43/songvos.gif)
no-repeat center;}</style>     

6-  Bữa Sáng trên Biển Bảng mã :

    <style>

     #hd{border-bottom:0px;}
#asb-uh{border:0px;height:350px;background-color:#086996;}#asb-nav {height:430px;background:url(http://i1118.photobucket.com/albums/k615/anhnguyet43/buoisangtrenbiens.gif)
no-repeat center;}</style>   

7-  Đường Mưa Bảng Mã:

     <style>

     #hd{border-bottom:0px;}
#asb-uh{border:0px;height:350px;background-color:#086996;}#asb-nav {height:430px;background:url(http://i1118.photobucket.com/albums/k615/anhnguyet43/duongmuas.gif)
no-repeat center;}</style>   

8-  Hoa dưới mưa Bảng mã:

    <style>

    #hd{border-bottom:0px;}
#asb-uh{border:0px;height:350px;background-color:#086996;}#asb-nav {height:430px;background:url(http://i1118.photobucket.com/albums/k615/anhnguyet43/hoaduoimua.gif)
no-repeat center;}</style>   

9-  Mưa Thu Bảng mã :

<style>#hd{border-bottom:0px;}
#asb-uh{border:0px;height:350px;background-color:#086996;}#asb-nav {height:430px;background:url(http://i1118.photobucket.com/albums/k615/anhnguyet43/muathus.gif)
no-repeat center;}</style>