[Hướng dẫn] Cắt và tối ưu hình ảnh cho banner trên web

16:45 |
Việc tối ưu hình ảnh rất quan trọng khi các bạn tạo banner flash. Nếu bạn để một hình gốc kích thước lớn và dung lượng quá lớn thì xảy ra 2 vấn đề sau:

1. Banner flash mất rất nhiều thời gian tải hình lên vì dung lượng quá lớn.
2. Hình quá to không sử dụng hết diện tích, phải co hình nhỏ gây lãng phí và mất thẩm mỹ.
Dung lựong cho hình sử dụng nên dứoi 100KB, đảm bảo banner sẽ load hình nhanh.
Đối với các bạn đã biết chưong trình photoshop hoặc một chưong trình xử lý ảnh khác thì việc crop và xuất ảnh dưới 100kb không có gì khó. Mình xin hướng dẫn những bạn chưa từng sử dụng qua bất kỳ công cụ chỉnh ảnh nào.

HƯỚNG DẪN SỬ DỤNG TRANG WWW.PICRESIZE.COM

1. Các bạn vào trang www.picresize.com, sẽ có giao diện như sau. Các bạn nhấn nút duyệt, chọn hình cần xử lý, sau đó nhấn continue


2. Giao diện cắt ảnh sẽ hiện ra. Lưu ý ở đây bạn chỉ đựoc chọn 1 trong 2 cách.
*** Cách 1 dùng chuột rê và kéo vào phần hình cần cắt. Sau đó nhấn crop selection


*** Cách 2: kéo xuống bên dứoi, ở phần make my pictue nhấn vào sẽ ra các tuỳ chọn sau, nhấn vào custom size


Bạn đổi đơn vị thành pixel. Ví dụ bạn cần làm banner có kích thứoc rộng 300 cao 250 thì nhập vào 300 trong ô width và 250 trong ô height


3. Kéo tiếp xuống bên dưới các bạn sẽ thấy các tuỳ chọn chỉnh sửa ảnh, chất lựong xuất ảnh v.v.


Sau khi xong các bạn nhấn "I'm done, Resize my picture"

4. Chọn "preview image" để xem ảnh đã cắt, "save to disk" để lưu hình về.


Thế là xong. Các bạn có thể thực hành nhiều lần để có thể tự tay xử lý bức ảnh làm banner tốt nhất. Chúc các bạn thành công

Video hướng dẫn: 


Cắt xén (crop,resize) hình ảnh cực dễ tại http://www.resizeyourimage.com/

16:39 |
Việc cắt (crop,resize) ảnh vô cùng quan trọng khi bạn làm banner. Ví dụ banner bạn định làm ra có kích thước 300x250 px, bạn không thể nào up một tấm ảnh 3Mb hơn với kích thước 1028x768 px chẳng hạn. Việc không cắt ảnh vừa làm banner load lâu, đồng thời cũng gây lãng phí vì bạn không sử dụng hết diện tích dư của hình to.

Mình xin giới thiệu một trang web cắt xén ảnh tuyệt vời, cực dễ xài đó là trang: http://www.resizeyourimage.com/

Sau khi bạn vào trang web, bạn sẽ thấy trang web có giao diện đơn giản như sau:

Bạn chọn tấm ảnh của mình và up lên ở phần "select your image". Như các bạn thấy trang web này có những công cụ giúp bạn cắt xén hình ảnh rất tốt:
1. Xoay hình
2. Phóng lớn hình
3. Thu nhỏ hình
4. Chiều rộng của hình. Nhấn vào nút này để nhập kích thứơc
5. Chiều cao của hình. Nhấn vào nút này để nhập kích thứơc
6. Hoàn tất và xuất hình ra các định dạng khác.

Khi bạn up hình lên, hình của bạn sẽ hiện ra bên dưới trong một hình chữ nhật với 4 mũi tên. Phần hình rõ là phần bạn cắt ra, phần mờ là phần hình bạn bỏ đi. Bạn có thể di duyển phần muốn cắt bằng cách nhấn giữ chuột và kéo di chuyển phần hình rõ. 
Lưu ý là khi di chuyển 4 mũi tên thì phần Width và Height ở trên cũng thay đổi.


Sau khi ưng ý. Bạn nhấn nút 6 hình chiếc đĩa cam. Bạn sẽ được chuyển đến trang lưu hình. Tại đây bạn chọn lưu 1 trong 3 loại đuôi hình. Bạn nên chọn hình JPG để có chất lựơng tốt và nhẹ. Nhấn nút "save this image" để lưu hình.


Thế là xong, bạn đã có một tấm hình vừa đẹp, nhẹ, thích hợp cho việc làm banner tại bannertudong.com. Chúc các bạn thành công!)

Hướng dẫn làm Flash Online và Banner Flash đẹp cho Blogger bằng hình ảnh đầy đủ và chi tiết nhất

16:30 |

* Làm Flash online:

Bước 1:
Truy cập vào website:

Các bạn sẽ thấy giao diện như sau:


Bước 2:Click vào Cái nút màu xanh dương đã đánh dấu đỏ để
bắt đầu làm flash:


lúc các bạn click thì nó sẽ hiện ra một cửa sổ mới, ở cửa sổ
này có hai ô trống, là hai dùng để xác định kích thước cho flash của bạn! Sau
khi điền xong hai thông số về chiều rộng và chiều cao thì các bạn nhấp tiếp vào
nút màu vàng để tiếp tục qua bước tiếp theo.


Ở ví dụ mẫu của mình Phú sẽ lấy kích cỡ là 600x500
Bước 3:Ở bước tiếp theo bạn sẽ thấy giao diện của web như thế
này:


1. Phần điều chỉnh chính ( bao gồm các thông tin như chiều cao, chiều rộng, độ tròn của bo 4 góc, link khi click vào flash của bạn )
2. Phần chữ ( bao gồm chữ, kiểu chữ, và các hiệu ứng dành cho chữ )
3. Phần hình ảnh ( thêm các flash riêng lẻ có sẵn, kèm theo đó là các hiệu ứng về nút và hình ảnh nữa)
4. Phần thêm ( thêm hình ảnh riêng của bạn mà không có trong thư viện cho sẵn vào flash của bạn )
5. Phần xuất ( click vào đây nếu bạn đã hoàn thành flash của mình )
Nói chung là rất đơn giản, khi đến bước thứ 2 này rồi thì bạn cứ việc click bừa đi vài lần là sẽ hiểu được hết các chức năng và xem được hết thư viện flash đồ sộ ở website này, nên ko viết ra thêm nữa cho nó dài dòng! Để các bạn rõ hơn thì xin làm ví dụ nhỏ như sau:

Đầu tiên sẽ lấy link hình của mình


Các bạn có thể upload hình ảnh này lên một host bất kì nào đó để lấy link trực tiếp, có thể là Upanh.com, Timnhanh.com, Photobucket.com
Sau đó quay trở lại bước 2, các bạn chọn vào nút số 4 như sau:


Phần 1bạn điền link ảnh của bạn vào.
Phần 2bạn điền link mà bạn muốn hiện thị khi click vào ảnh.


Tương tự các bạn làm như thế với phần chữ (có hình chữ A) và phần hình ảnh trong thư viện (có hình trái tim)
Bước 4:Sau khi đã có được một flash như mong muốn, tiếp theo các bạn sẽ xuất file flash của mình để chèn vào blog bằng cách, click vào menu Số 5

Click tiếp vào khu vực đánh dấu đỏ...


Một cửa sổ mới hiện ra, bạn chỉ cần copy phần mã html vào entry của mình nữa là ok!


Đã thử coppy code nhưng chưa đượcNên tốt nhất các bạn down Flash về rồi up lên một host khác.


Thế nào, đơn giản phải không!?

==>Hướng Dẫn Cách Tự Tạo Banner Flash Đẹp Cho Blogger


Để thiết kế một Banner thật đẹp cho mình thì chúng ta phải có 1 ít kiến thức về mã code,Photoshop v..v và nếu thêm Flash nữa thì lại càng khó ... Nhưng bây giờ , để có được một Banner Flash thật chuyên nghiệp thì ko còn là vấn đề nữa ,ko cần Photoshop hay phần mềm gì cả , mà chúng ta vẫn có 1 banner thật chuyên nghiệp dành cho blog của mình.


Bước 1
Các bạn vào trang này:
Bước 2 :Bước tiếp theo lick vào banner nào bạn muốn thiết kế :
Chờ nó Load xong là vào giao điện như sau:


Bước 3 :Để chèn ảnh mới vào banner bạn làm như sau:
Chọn hình cái cây, trong hình cái cây lại chia ra 4 tab, 3 tab đầu chứa rất nhiều hoạt họa động đẹp mắt có thể sử dụng ngay, tab cuối cùng có hình đầu người dành cho phần upload ảnh của bạn. Bạn cần đăng nhập để upload


Sau khi up ảnh bạn có thể thay đổi vị trí các lớp đối tượng để ảnh nằm trên và dưới đối tượng mong muốn.
Bước 4. Thiết kế:
- Khi vào bên trong trên cùng phia bên phải màn hình là bảng menu điều khiển và chúng ta sẽ mổ xẻ từng phần một


♥ Chỉnh kích cỡ, giao diện chung ♥


♥ Chèn nội dung, chữ viết lên Flash ♥ Trong phần chữ này sẽ có 2 kiểu chữ động và chữ tĩnh.
+ Đầu tiên là chữ động.


+ Nhược điểm của phần này là bạn sẽ không thể nào viết tiếng việt có dấu trong 1 lần gõ nhưng trên các logo mà mình thiết kế luôn là những chữ tiếng việt có dấu, không ít blogger đã đặt câu hỏi này ra. Vậy bạn xem mình làm thế nào nhé.
VD: Bây giờ bạn muốn thêm dòng chữ "Tình nghĩa giang hồ" chẳng hạn.
- Trước hết bạn viết và chèn thêm nội dung văn bản "Tinh nghia giang ho" không có dấu


- Hoàn chỉnh xong bạn để đó, tiếp tục Add text dấu " _ " với hiệu ứng và kiểu chữ tương tự như với "Tinh nghia giang ho" không dấu ở trên, và căn chỉnh hợp lý để chúng ta sẽ hoàn thiện được chữ "Tình"


- Các bạn hiểu rồi đúng không? Các phần còn lại làm tương tự....
+ Chữ tĩnh (không hiệu ứng động)
- Ưu điểm của phần này là bạn có thể viết chữ tiếng việt 1 cách vô tư thoải mái


♥ Chèn hiệu ứng, hình ảnh, cây cối... ♥


♥ Thêm 1 hay nhiều hình ảnh tùy chọn vào flash thiết kế ♥



Dưới đây là bảng điều khiển toàn bộ hoạt động của bạn


Bạn có thể click vào bảng điều khiển đó để sửa đổi 1 hiệu ứng nào đó, ô màu xanh chính là hiệu ứng được chọn, đồng thời bạn cũng có thể di chuyển lên xuống nghĩa là bạn sẽ điều chỉnh cho hiệu ứng này ở trên (ở dưới) hiệu ứng kia.
♥ Tạo 1 sile ảnh ♥
- Ưu điểm: Có rất nhiều hiệu ứng chuyển ảnh để bạn chọn lựa
-Nhược điểm: Bạn chỉ có thể làm được slide tối đa là 5 ảnh (hơi ít nhỉ )


Hoàn thành sản phẩm
- Bạn click vào để xem thử sản phẩm của mình


- Download và lấy link

Nếu các bạn muốn down về thì phải upload lên 1 website nào đó thì mới sử dụng được nhé.
Còn đối với Blogger thì coppy đoạn code JavaScrip. Tiếp theo quay lại Blogger tạo widget HTML/javascript rồi paste nó vào là xong
Chú ý : widget phải nằm trên thanh tiều đề nha.
Chúc các bạn thành công.

Tham khảo thêm: Công cụ Macromedia flash:


Xem thêm:


Một số thủ thuật khi chèn video từ Youtube có thể bạn chưa biết

01:06 |
Có 1 vài bạn tìm về cách ẩn tất cả các link trỏ đến youtube khi chèn video từ youtube vào blog để người dùng chỉ có thể xem video trên blog mà không tìm thấy link video trên youtube. Mình nhiều lần trả lời trên facebook nhưng hôm nay có thời gian rảnh ngồi viết ngoài lề 1 bài tại đây để chia sẻ 
đôi khi có bạn cần đến.

Ẩn link trỏ đến Youtube trong video chèn vào website

Tiện đây mình cũng khuyên các bạn nên up video của mình lên youtube sau đó chèn vào bài viết thay vì up thẳng video lên host. Đơn giản là video chạy trên youtube thường có tốc độ load nhanh hơn so với host của bạn, bạn tiết kiệm được băng thông và nếu video của bạn công khai trên youtube thì bạn đương nhiên hưởng thêm traffic từ youtube vì những video trên youtube được index rất nhanh và dễ dàng đứng top. Ưu điểm của việc sử dụng video trên youtube cho blog làm affiliate bạn có thể đọc thêm ở bài viết này.

1. Ẩn link trỏ đến Youtube trong video chèn vào website

Khi chèn video vào website hay blog, thay vì chèn Url của video 1 cách đơn giản vào blog wordpress hoặc copy mã nhúng tại mục chia sẻ của Youtube để chèn vào bài đăng thì bạn có thể dùng đoạn code sau để chèn video từ youtube, logo youtube và link trỏ đến youtube sẽ được ẩn hoàn toàn cho dù người dùng có click chuột phải để tìm Url.
<iframe src="//www.youtube.com/embed/xxxxxx? theme=light&autoplay=0&vq=hd720&wmode=opaque&rel=0&showinfo=0&modestbranding=1&version=3&ps=docs&nologo=1&color=white&iv_load_policy=0&cc_load_policy=1" height="400" width="100%" allowfullscreen="" frameborder="0"></iframe>

Đơn giản bạn chỉ cần thay đổi xxxxxx thành ID video mà bạn muốn chèn, ngoài ra có 1 số tùy chỉnh có thể bạn muốn thay đổi như sau:

autoplay=0 // đặt giá trị = 0 – không tự động chạy video, giá trị = 1 – bật autoplay

vq=hd720 // chất lượng video mà bạn muốn để mặc định, có thể 360, 480,…

rel=0 // tắt video liên quan sau khi chạy hết video, để giá trị =1 nếu bật video liên quan

nologo=1 // bật chế độ không hiển thị logo, để = 0 nếu muốn hiển thị logo

color=white // màu đỏ nếu là mặc định của youtube, màu trắng giống như video mà mình dùng

Ngoài ra bạn còn có thể tùy chình chiểu rộng, chiều cao của video,…

Ưu điểm: Sử dụng cách này bạn đương nhiên biến video trên youtube thành của riêng mình mà những độc giả bình thường khó tìm đến video trên youtube để xem, giữ chân được độc giả ở lại lâu trên blog cũng như video có tốc độ load nhanh, tiết kiệm băng thông,…

Nhược điểm: Youtube hay đúng hơn là Google không cho phép bạn giấu hoàn toàn link trỏ ngược về youtube khi chèn video vào website và nếu trang web của bạn là trang chỉ gồm có video thì hãy dè chừng nếu Google sờ đến rằng bạn vi phạm bản quyền. Tuy nhiên có vẻ như Google khó quản lý hết được điều này hoặc giờ họ chưa muốn quản lý do vậy mà ở Việt Nam vẫn tràn lan những trang làm như vậy, tiêu biểu là Suong.vn.

2. Tắt video liên quan (Related YouTube Videos)

Nếu bạn muốn sau khi video chạy xong mà không muốn cho độc giả nhìn thấy và xem những video của người khác có phần thú vị và bỏ website của bạn thì bạn có thể tắt video liên quan.

Nếu bạn dùng code như ở mục 1 bên trên thì chỉ cần để rel=0 như mình đã viết ở phân giải thích code nhưng nếu bạn không dùng đoạn code như mình dùng ở trên thì bạn có thể đơn giản thêm ?rel=0 vào cuối link video bạn muốn chèn. Ví dụ:http://www.youtube.com/watch?v=qzOOy1tWBCg?rel=0


Nếu bạn muốn tự động tắt video liên quan cho tất cả video của bạn thì bạn có thể dụng plugin sau Hide YouTube Related Videos.

3. Lấy Video Thumbnail từ Youtube

Khi theme bạn dùng không hỗ trợ lấy thumbnail video, bạn có thể lấy thumbnail bằng cách download hình ảnh theo các 
link:http://img.youtube.com/vi/<id-cua-video>/0.jpg 
http://img.youtube.com/vi/<id-cua-video>/1.jpg 
http://img.youtube.com/vi/<id-cua-video>/2.jpg 
http://img.youtube.com/vi/<id-cua-video>/3.jpg

Trên đây là 1 vài mẹo nhỏ, hi vọng có thể giúp được 1 số bạn, nếu các bạn có câu hỏi hãy comment bên dưới hoặc hãy đóng góp những cách làm hay hơn nhé!