Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 17++ Năm (Từ 2006 đến Nay)

Cách Thêm Cinemagraphs (ảnh động-tĩnh) trong WordPress

5/5 - (2 bình chọn)

Giống như hầu hết các ảnh động GIF, Cinemagraph chứa những vùng hình ảnh có yếu tố chuyển động. Cụ thể hơn, Cinemagraphs là những hình ảnh có một phần hoặc một khu vực ảnh có sự di chuyển, trong khi những vùng khác trên ảnh vẫn giữ nguyên. Những hình ảnh này rất thu hút người đọc và là cách để tăng sự tương tác với người dùng. Bạn cũng có thêm một công cụ để làm mới cho những bài viết của mình. Trong bài này, chúng tôi sẽ giới thiệu cho các bạn cách để tạo và thêm cinemagraph trong WordPress.

Cách Thêm Cinemagraphs (ảnh động-tĩnh) trong WordPress Cinemagraph-in-wordpress

Cinemagraphs là gì?

Để tôi nhắc lại, Cinemagraphs là một dạng của hình ảnh GIF, nơi một phần nhỏ của hình ảnh đang di chuyển trong khi phần còn lại của nó vẫn là hình ảnh tĩnh bình thường. Chúng nhìn rất cinematic (điện ảnh) do đó, nó có tên là cinemagraphs.

Cách Thêm Cinemagraphs (ảnh động-tĩnh) trong WordPress cinemagraph-example

Chúng thêm một yếu tố kể chuyện vào hình ảnh khiến chúng trông hấp dẫn hơn. Chúng đặc biệt hữu ích khi đi kèm với bài viết có nội dung dài, các tập podcast hoặc câu chuyện audio.

Tạo cinemagraph khác so với việc tạo ảnh GIF thông thường. Tuy nhiên, nếu bạn có các công cụ phù hợp thì chỉ với một chút nỗ lực, bạn đã có thể tạo những bức ảnh cinemagraph tuyệt đỉnh.

Vậy chúng ta hãy xem làm thế nào để tạo và thêm cinemagraphs trong WordPress nhé.

Tạo Cinemagraphs từ Video

Để bắt đầu, bạn sẽ cần các thứ sau:

  1. Một video clip nhỏ mà bạn muốn chuyển thành một cinemagraph.
  2. Adobe Photoshop
  3. Thời gian, sự kiên nhẫn và sự sáng tạo của bạn

Giờ thì bắt đầu nào.

Xem thêm: 

55+ Mẹo và thủ thuật cực hay trong WordPress

Cách loại bỏ chuỗi v=xxx trong URL WordPress

Đầu tiên bạn cần chuẩn bị sẵn video. Bạn có thể sử dụng công cụ chỉnh sửa video như iMovie để cắt video thành một đoạn phim ngắn mà bạn cần cho cinemagraph.

Xem thêm: TOP 10 Phần mềm Chỉnh sửa Video Free tốt nhất

Tiếp theo, bạn cần mở Photoshop và nhập video của bạn vào các Layer bằng cách vào File> Import> Video Frames to Layers.

Cách Thêm Cinemagraphs (ảnh động-tĩnh) trong WordPress cinemagraph-2

Chọn video của bạn và sau đó nhấp vào nút OK để tiếp tục. Tùy thuộc vào kích thước video, có thể sẽ mất một thời gian để nhập đầy đủ.

Cách Thêm Cinemagraphs (ảnh động-tĩnh) trong WordPress cinemagraph-3

Khi video của bạn được nhập, bạn sẽ thấy khung video dưới dạng các Layer bên dưới bảng điều khiển Layer.

Cách Thêm Cinemagraphs (ảnh động-tĩnh) trong WordPress cinemagraph-4

Bây giờ bạn cần phải chọn tất cả các layer trừ layer đầu tiên (Layer 1).

Vào Layer »New» Group From Layers hoặc nhấn CTRL + G trên Windows để thêm các Layer vào một nhóm.

Cách Thêm Cinemagraphs (ảnh động-tĩnh) trong WordPress cinemagraph-5

Tiếp theo, bạn cần phải chọn nhóm và vào Layer »Mask Layer» Reveal All để thêm một mặt nạ mash vào nhóm.

Cách Thêm Cinemagraphs (ảnh động-tĩnh) trong WordPress cinemagraph-6

Sau khi thêm mặt nạ, nhấn phím Ctrl + I trên Windows để đảo màu của mặt nạ.

Bây giờ đặt màu nền trước thành màu trắng và sau đó nhấp vào công cụ Brush. Bạn cần sử dụng công cụ Brush để đánh dấu vùng bạn muốn hiển thị trong vòng lặp.

Cách Thêm Cinemagraphs (ảnh động-tĩnh) trong WordPress cinemagraph-7

Sau đó, vào Window »Timeline để mở tất cả các layer của bạn dưới dạng animation.

Bạn sẽ nhận thấy tất cả các khung hình xuất hiện rõ ràng trong dòng thời gian trừ khung hình đầu tiên.

Cách Thêm Cinemagraphs (ảnh động-tĩnh) trong WordPress cinemagraph-8

Để thay đổi điều đó, hãy chọn Layer đầu tiên (Layer 1) trong bảng điều khiển Layer và nhấp vào biểu tượng Ẩn Layer và sau đó nhấn nút Match.

Cách Thêm Cinemagraphs (ảnh động-tĩnh) trong WordPress cinemagraph-9

Tiếp theo, nhấp vào biểu tượng ẩn/hiện của Timeline và chọn tất cả các khung hình. Sau đó nhấp vào nút chuyển đổi một lần nữa để chọn Sao chép Khung hình.

Cách Thêm Cinemagraphs (ảnh động-tĩnh) trong WordPress cinemagraph-10

Sau khi sao chép các khung hình này, bạn hãy nhấp vào nút ẩn/hiện và chọn tùy chọn “Paste Frames”.

Bạn sẽ được yêu cầu chọn một phương pháp dán. Chọn “Paste After Selection” và nhấn nút OK.

Cách Thêm Cinemagraphs (ảnh động-tĩnh) trong WordPress cinemagraph-11

Kế tiếp, bạn cần phải nhấp vào biểu tượng ẩn/hiện một lần nữa và chọn tùy chọn” Reverse Frames’”.

Cách Thêm Cinemagraphs (ảnh động-tĩnh) trong WordPress cinemagraph-12

Cinemagraph của bạn gần như đã xong.

Để lưu vào máy tính, hãy vào File » Save for Web . Thao tác này sẽ hiển thị cửa sổ popup nơi bạn cần chọn định dạng GIF và nhấp vào nút lưu.

Cách Thêm Cinemagraphs (ảnh động-tĩnh) trong WordPress cinemagraph-13

Đó là tất cả về việc tạo ra các Cinematograph.

Bạn có thể thêm nó vào trang web của bạn như bạn thêm bất kỳ ảnh GIF nào khác trong WordPress. Chỉ cần chỉnh sửa bài đăng hoặc trang mà bạn muốn thêm cinemagraph và nhấp vào nút “Add media”.

Cách Thêm Cinemagraphs (ảnh động-tĩnh) trong WordPress cinemagraph-14

Thao tác này sẽ hiển thị cửa sổ tải media lên, nhấp vào nút chọn tệp để tải tệp tin GIF từ máy tính của bạn lên.

Sau khi tải lên, nhấp vào nút “Chèn vào bài viết” để tiếp tục.

Bây giờ, bạn sẽ thấy hình ảnh trong trình soạn thảo bài viết của WordPress.

Đừng quên lưu hoặc cập nhật bài đăng. Bây giờ bạn có thể nhấp vào nút xem trước để xem cinemagraph đang hoạt động. Dưới đây là cinemagraph chúng tôi đã tạo ra trong hướng dẫn này.

Cách Thêm Cinemagraphs (ảnh động-tĩnh) trong WordPress cinemagraph15

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách tạo và thêm cinemagraph trong WordPress. Tôi chắc rằng bạn sẽ thấy vô cùng thú vị với hình ảnh dạng cinemagraph. Hãy thử đi nhé.

Xem thêm: 55+ Mẹo và thủ thuật cực hay trong WordPress

Tin mới nhất

Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Cao Sao vàng giá 300 ngàn, bạn có tin không? Việt Nam thì ghẻ lạnh với giá vài ngàn đồng...
    19 giây trước
  2. Gần đây, bạn có nhận thấy sự sụt giảm nhỏ hoặc lớn trong tổng số đánh giá của mình trên...
    16 giây trước
  3. Thách thức hàng đầu đối với hầu hết các nhà tiếp thị là tạo ra lưu lượng truy cập và...
    12 giây trước
  4. Nếu bạn đang kinh doanh, quản trị website hoặc hoạt động trong lĩnh vực Marketing vậy thì bài viết này...
    28 giây trước
  5. Bất kể ai đang sử dụng nền tảng WordPress cho blog hoặc trang web của họ thì đều đã sử...
    27 giây trước
  6. Tạo nguồn lưu lượng truy cập trang web nhất quán là nền tảng của mọi doanh nghiệp trực tuyến. Nếu bạn...
    28 giây trước
  7. Bài viết này là cập nhật mới nhất vào tháng 9/2017. Bao gồm rất nhiều blog mới và đặc biệt...
    15 giây trước
  8. Group Facebook là gì? Fanpage là gì? Hiện nay, Facebook (FB) đang là mạng xã hội đứng đầu thế giới...
    24 giây trước
  9. Dotard là một từ tiếng Anh cổ mà Nhà lãnh đạo Triều Tiên Kim Jong Un dùng để đáp trả...
    3 giây trước
  10. Bạn có phải là chủ doanh nghiệp, nhà tiếp thị trực tuyến hoặc người sáng tạo nội dung không? Nếu...
    25 giây trước