Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak tworzyć i dodawać kinografiki w WordPress

Uwaga redakcyjna: Otrzymujemy prowizję z linków partnerskich na WPBeginner. Prowizje nie mają wpływu na opinie i oceny naszych redaktorów. Dowiedz się więcej o Proces redakcyjny.

Czy chcesz dowiedzieć się, jak tworzyć i dodawać kinografiki do twoich wpisów w WordPressie? Kinografiki to obrazki, których jedna część lub obszar porusza się, podczas gdy reszta obrazu pozostaje nieruchoma. Obrazki te są bardzo wciągające i dodają element fabularny do twoich artykułów. W tym artykule pokażemy, jak łatwo tworzyć i dodawać kinografiki w WordPress.

Creating cinemagraphs for your WordPress site

Czym są kinografiki?

Kinografiki to zazwyczaj obrazy GIF, w których niewielka część obrazka porusza się, podczas gdy reszta pozostaje nieruchoma. Wyglądają bardzo filmowo, stąd nazwa cinemagraphs.

Cinemagraph preview

Dodają one do obrazków element opowiadania historii, dzięki czemu wyglądają bardziej angażująco. Są szczególnie przydatne, gdy towarzyszą długim treściom, odcinkom podcastów lub relacjom audio.

Tworzenie kinografik różni się nieco od tworzenia zwykłych GIF-ów. Jeśli jednak posiadasz odpowiednie narzędzia, to przy niewielkim wysiłku i odrobinie praktyki będziesz w stanie tworzyć oszałamiające kinografiki z twoich własnych filmów.

Biorąc to pod uwagę, przyjrzyjmy się, jak łatwo tworzyć i dodawać kinografiki w WordPress.

Tworzenie kinografiki z filmów

Aby rozpocząć, będziesz potrzebować następujących elementów:

  1. Mały film, który chcesz przekształcić w kinografikę
  2. Adobe Photoshop
  3. Twój czas, cierpliwość i kreatywność

Zaczynajmy.

Najpierw musisz przygotować swój film. Możesz użyć narzędzia do edycji wideo, takiego jak iMovie, aby przyciąć film do minimalnego klipu potrzebnego do kinografiki.

Następnie należy otworzyć program Photoshop i importować twój film do warstw, klikając menu Plik ” Importuj ” Klatki filmu do warstw.

Import your video into layers

Wybierz twój film, a następnie kliknij przycisk OK, aby kontynuować. W zależności od rozmiaru twojego filmu, jego pełne importowanie może trochę potrwać.

Video to layers import

Gdy twój film zostanie zaimportowany, klatki wideo będą widoczne jako warstwy w panelu warstw.

Layers imported from video

Teraz musisz zaznaczyć wszystkie warstwy z wyjątkiem pierwszej (Layer 1).

Przejdź do menu Warstwa ” Nowy ” Grupa z warstw lub naciśnij Command + G (CTRL + G w systemie Windows), aby utworzyć grupę warstw.

Grouped layers

Następnie należy zaznaczyć grupę i przejść do Warstwa ” Maska warstwy ” Ujawnij wszystko, aby dodać maskę do grupy.

Reveal all

Po dodaniu maski naciśnij klawisze Command + I (Ctrl + I w systemie Windows), aby odwrócić kolor maski.

Teraz ustaw kolor pierwszego planu na biały, a następnie kliknij narzędzie pędzla. Musisz użyć narzędzia pędzla, aby podświetlić obszar, który chcesz pokazać w pętli.

Brush the moving parts to highlight them

Następnie przejdź do Okno ” Oś czasu, aby otworzyć wszystkie twoje warstwy w formacie animacji.

Zauważysz, że wszystkie klatki na osi czasu są przezroczyste, z wyjątkiem pierwszej.

Timeline

Aby to zmienić, zaznacz pierwszą warstwę (Warstwa 1) w panelu warstw i kliknij ikonkę Unfiy Layer Visibility, a następnie naciśnij przycisk Match.

Unify visibility

Następnie kliknij ikonkę przełącznika na osi czasu i zaznacz wszystkie klatki. Następnie ponownie kliknij przycisk przełączania, aby wybrać opcję Kopiuj klatki.

Copy frames

Po skopiowaniu klatek kliknij przycisk przełączania i wybierz opcję „Wklej klatki”.

Zostaniesz poproszony o wybranie metody wklejania. Wybierz „Wklej po zaznaczeniu” i naciśnij przycisk OK.

Paste after selection

Następnie należy ponownie kliknąć ikonkę przełączania osi czasu i wybrać opcję „Odwróć klatki”.

Reverse frames

Twoja animacja kinograficzna jest już prawie gotowa.

Aby zapisać ją na twoim komputerze, przejdź do opcji Plik ” Zapisz dla Internetu. Spowoduje to wyświetlenie wyskakującego okienka, w którym należy wybrać format GIF i kliknąć przycisk Zapisz.

Save as GIF

To wszystko, twój Cinematograph jest gotowy.

Możesz dodać go do swojej witryny tak, jak dodałbyś każdy inny GIF w WordPress. Po prostu edytuj wpis lub stronę, na której chcesz dodać cinemagraph i kliknij przycisk dodawania multimediów.

Upload your cinemagraph GIF in WordPress

Spowoduje to wyświetlenie wyskakującego okienka przesyłania multimediów, kliknij przycisk wyboru plików, aby przesłać plik GIF z twojego komputera.

Po załadowaniu kliknij przycisk „Wstaw do wpisu”, aby kontynuować.

Teraz zobaczysz obrazek w edytorze wpisów WordPress.

Nie zapomnij zapisać lub zaktualizować wpisu. Możesz teraz kliknąć przycisk podglądu, aby zobaczyć cinemagraph w działaniu. Oto kinografika, którą stworzyliśmy podczas tego poradnika.

Cinemagraph example

Mamy nadzieję, że ten artykuł pomógł ci nauczyć się tworzyć i dodawać kinografiki w WordPress. Warto również zapoznać się z naszą listą witryn internetowych oferujących darmowe obrazki royalty free dla użytkowników WordPressa.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube, aby zobaczyć poradniki dotyczące filmów WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

2 komentarzeZostaw odpowiedź

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Gary Stenzel says

    I have been making cinemagraphs with a free editor from Microsoft called „Cliplets”. It works really good and is easy to use.
    It’s a whole lot less complicated than using Photoshop.
    You should give it a try.

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.