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

Så här skapar du och add to filmsekvenser i WordPress

Vill du lära dig hur du skapar och add to Cinemagraphs i dina posts i WordPress? Cinemagraphs är images där en del eller ett area rör sig medan resten av imagen står stilla. Dessa images är mycket engagerande och adderar ett berättande element till dina artiklar. I den här artikeln visar vi dig hur du enkelt skapar och add to cinemagraphs i WordPress.

Creating cinemagraphs for your WordPress site

Vad är cinemagraphs?

Cinemagraphs är vanligtvis GIF-bilder där en liten del av bilden rör sig medan resten av den förblir stilla. De ser väldigt filmiska ut, därav namnet cinemagraphs.

Cinemagraph preview

De add to ett berättande element till images vilket gör att de ser mer engagerande ut. De är viss användbara när de ackompanjerar longform content, podcast-avsnitt eller en ljud story.

Att skapa cinemagraphs är lite annorlunda än vanliga GIF-filer. Men om du har rätt tools kommer du med lite ansträngning och lite övning att kunna skapa fantastiska cinemagraphs från dina egna videoklipp.

Med detta sagt, låt oss ta en titt på hur du enkelt kan skapa och add to cinemagraphs i WordPress.

Skapa filmsekvenser från videoklipp

För att komma igång behöver du följande objekt:

  1. Ett litet videoklipp som du vill konvertera till en cinemagraph
  2. Adobe Photoshop
  3. Your time, patience, and creativity

Låt oss komma igång.

Först måste du göra klart ditt videoklipp. Du kan använda ett videoredigeringsverktyg som iMovie för att trimma videoklippet till bara det minimalistiska klipp som du behöver för filmgrafen.

Därefter måste du öppna Photoshop och importera ditt videoklipp till lager genom att clicka på menyn File ” Import ” Video Frames to Layers.

Import your video into layers

Välj ditt videoklipp och klicka sedan på knappen OK för att fortsätta. Beroende på hur stort ditt videoklipp är kan det ta en liten stund innan det är helt importerat.

Video to layers import

När ditt videoklipp har importerats kommer du att se videoramar som lager under panelen Lager.

Layers imported from video

Nu måste du selecta alla lager utom det allra första lagret (Lager 1).

Gå till menyn Lager ” New ” Gruppera från lager eller tryck på Command + G (CTRL+G i Windows) för att lägga till lager i en grupp.

Grouped layers

Därefter måste du välja gruppen och gå till Layer ” Layer Mask ” Reveal All för att add to en mask till gruppen.

Reveal all

När du har lagt till masken trycker du på Command + I (Ctrl + I på Windows) för att invertera maskens färg.

Ställ nu in förgrundsfärgen på vit och klicka sedan på penselverktyget. Du måste använda penselverktyget för att markera det area du vill visa i slingan.

Brush the moving parts to highlight them

Därefter går du till Fönster ” Timeline för att öppna alla dina lager i ett animationsformat.

You will notice all frames appear transparent in the timeline except for the first frame.

Timeline

För att ändra detta väljer du det första lagret (Lager 1) i panelen Lager och klickar på ikonen Unfiy Layer Visibility och trycker sedan på knappen Matcha.

Unify visibility

Klicka sedan på ikonen toggle i Timeline och välj all frames. Därefter klickar du på knappen Toggle igen för att välja Copy Frames.

Copy frames

När du har kopierat ramarna klickar du på knappen toggle och väljer alternativet ”Paste Frames”.

Du kommer att bli ombedd att välja en klistrametod. Select ”Paste After Selection” och tryck på OK-knappen.

Paste after selection

Därefter måste du klicka på Timeline toggle icon en gång till och välja alternativet ”Reverse Frames”.

Reverse frames

Your cinemagraph animation är nästan klar.

För att spara den på din dator, gå till File ” Save for Web alternativ. Detta kommer att visa en popup där du måste välja GIF-format och klicka på knappen save.

Save as GIF

That’s all your Cinematograph är klar.

Du kan lägga till den på din site som du gillar att lägga till andra GIF:ar i WordPress. Du behöver bara editera det post eller den page där du vill add to cinemagrafen och clicka på knappen add media.

Upload your cinemagraph GIF in WordPress

Detta kommer att visa popupen för media uppladdaren, klicka på knappen select files för att uploada GIF-filen från din dator.

När den är uppladdad klickar du på knappen ”Insert into post” för att fortsätta.

Du kommer nu att se imagen i din WordPress post editor.

Glöm inte att save eller updating posten. Du kan nu klicka på knappen Preview för att se filmsekvensen i action. Här är den cinemagraph som vi skapade under denna tutorial.

Cinemagraph example

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar och add to cinemagraphs i WordPress. Du kanske också vill se vår lista över webbplatser som erbjuder gratis royaltyfria images för WordPress användare.

Om du gillade den här artikeln, vänligen prenumerera på vår YouTube-kanal för WordPress video tutorials. Du kan också hitta oss på Twitter och Facebook.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

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.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

2 kommentarerLämna ett svar

  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.

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.