Logoanimasjon er prosessen med å introdusere bevegelse eller endringer i de visuelle elementene i en logo for å gjøre den mer dynamisk og attraktiv. Den kan brukes på forskjellige deler av en logo, for eksempel tekst, bilder, farger og former, og den kan ha varierende grad av kompleksitet, alt fra enkle animasjoner som tekst som blinker eller falmer farger, til komplekse animasjoner som involverer objekter som beveger seg eller interaktive. effekter.

Анимация логотипа становится все более распространенной. Между смартфонами и общим развитием интернет-технологий логотипы теперь гораздо чаще встречаются в цифровых пространствах, и это открывает двери для визуальных эффектов, таких как анимация, которые невозможны с физическими продуктами. Конечно, растущая популярность анимации логотипов означает, что все больше и больше merker будут нуждаться в ней, чтобы оставаться конкурентоспособными. Так что научиться анимировать логотип может быть ценным навыком, который выведет ваш логотип на новый уровень.

Hvordan velge riktig farge for logoen din?

Samtidig har animasjonsprogramvare også blitt mer allestedsnærværende, strømlinjeformet og intuitiv for å støtte denne voksende brukerbasen. Så uansett hvor teknisk og kompleks logoanimasjon kan høres ut, kan til og med nybegynnere nå lage enkle, men effektive animasjoner.

 

Logoanimasjon i After Effects -

Trinn 1. Klargjør logofilen.

Vi starter faktisk opplæringen vår om hvordan du animerer en logo i Adobe Illustrator (eller lignende logodesignprogramvare). Dette er nødvendig for å sikre at filen vår logo satt opp for animasjon.

Logo registrering

Selv om selve animasjonsprogramvaren er raster, må de originale logofilene være i vektorformat. Dette lar deg endre dem uten skader for bildekvalitet (for eksempel zooming inn på en rasterlogo resulterer i pikselering), og dette vil være nyttig senere når du arbeider med formlag.

Adobe Illustrator-skjermbilde med logo inni Logo-animasjon.

Sørg for at logoen din er delt inn i lag ved hjelp av lagpanelet.

Logoen bør også være flerlags i stedet for gruppert i ett objekt. Dette gjør det enkelt å lage mer komplekse animasjoner ved å animere individuelle deler av logoen. Du kan opprette nye lag ved å bruke "  Legg til nytt lag" nederst i lagpanelet, og kopier og lim deretter inn deler av logoen din i dem.

Til slutt, siden animasjon er digital i naturen, jobber vi også med RGB-farger. Hvis Illustrator-filen er satt til CMYK, kan du endre dette ved å velge logoen din og navigere til Rediger > Rediger farger > Konverter til RGB.

Når du er klar, eksporterer du logoen din som en fullt lagdelt vektorfil. Siden After Effects-filtyper er en del av Adobe-programvarefamilien, skal jeg lagre logoen jeg opprettet som en AI-fil (Adobe Illustrator), men det er flere forskjellige typer vektorfiler å velge mellom hvis du bruker annen programvare.

Trinn 2: Importer logoen din til After Effects. Logo animasjon

Åpne After Effects. Grensesnittet kan virke komplisert ved første øyekast, så la oss bryte ned det grunnleggende:

Adobe After Effects-logoanimasjon

 

 
  1. Verktøylinje : her kan du få tilgang til hovedsiden grafiske verktøyfor eksempel pennverktøyet, skriveverktøyet osv.
  2. Prosjektpanel : Det er her du administrerer og organiserer mediefiler for hele prosjektet.
  3. Komposisjonsvindu : Dette er et videoforhåndsvisningsvindu der du kan forhåndsvise animasjonen for gjeldende komposisjon (ofte kalt en komposisjon) du jobber med. Komposisjoner er i hovedsak scener, hver med sine egne separate animasjonstidslinjer. Vi vil diskutere komposisjoner mer detaljert i neste avsnitt.
  4. Tidslinje : Det er her du skal lage animasjonen din. Den består av både en bokstavelig tidslinje til høyre (hvor du skal sette opp animasjonshendelser som skal kjøres på tidslinjen) og et layoutområde til venstre (hvor du legger over og redigerer attributtene til mediemidlene).
  5. Kontrollpanelet : Her kan du få tilgang til ulike støttefunksjoner som medieinformasjon, paragraf- og justeringsalternativer, og forhåndsbygde animasjons- og visuelle effektbiblioteker innebygd i After Effects.

Hvis du er usikker på et verktøy eller en knapp, vil du få en beskrivelse ved å holde musen over den.

For å importere en logofil, dra den inn i prosjektpanelet eller velg  Fil"  > "  Import"  > "  Fil" . I den neste dialogboksen velger du Importer media som  opptak og sammenslåtte lag .

Trinn 3: Sett opp komposisjonen din. Logo animasjon.

En komposisjon (komp) er en beholder som lar deg komponere, redigere og bruke animasjon på mediefiler. En større produksjon, for eksempel en film, vil inneholde flere spor organisert i et prosjektpanel. Så du kan tenke på sporene som en enkelt scene i den filmen, og hvert spor vil ha sin egen separate tidslinje. I vårt tilfelle krever en logoanimasjon som varer mindre enn fem sekunder svært få komposisjoner.

After Effects med den opprettede komposisjonen. Logo animasjon

For å tilpasse komposisjonen din, dra mediefiler til venstre side av tidslinjepanelet.

La oss starte med en enkel bakgrunn. Høyreklikk på layoutpanelet og velg " Skape"  > "  Fast" . Siden logoen min er hvit, valgte jeg solid svart farge, men du kan velge hvilken som helst farge. I det neste vinduet, navngi det faste (i mitt tilfelle "BG"), klikk på "  Lag størrelse  datamaskin" og velg "  OK " . Dra nå logofilen fra prosjektpanelet til tidslinjepanelet, og du skal se logoen forhåndsvist i komposisjonsvinduet. Hvis ikke, sørg for å omorganisere lagene ved å dra den solide bakgrunnen under logofilen.

Høyreklikk på logofilen i layoutpanelet og velg Skape" > " Konverter til en flerlags komposisjon" . Это превратит ваш файл с логотипом в другую композицию (вы увидите, что значок изменился). Двойной щелчок по файлу логотипа теперь откроет новую вкладку и перенесет вас в эту новую композицию, содержащую все отдельные слои, которые вы настроили в Illustrator. Теперь вы можете видеть, как работают comps: они по сути похожи на вложенные mapper.

Logo animasjon

Hvis du ønsker det, kan du konvertere hvert av disse lagene til separate komposisjoner ved å høyreklikke og velge  Foreløpig sammensetning" . Dette vil gi dette laget sin egen animasjonstidslinje, nestet i den forrige komposisjonen. Og hvis du vil animere hele logoen på en gang, bør du bruke en tidslinje knyttet til hovedkomposisjonen.

Med det ute av veien, la oss forstå hvordan disse tidslinjene fungerer for animasjon.

Trinn 4: Animer logoen ved hjelp av nøkkelbilder

After Effects (og det meste av animasjonsprogramvare) fungerer med nøkkelbilder. Nøkkelbilder er i hovedsak markører som du kan sette på tidslinjen for å bestemme når start- og slutttilstander for animasjonen din skal inntreffe.

La oss for eksempel starte med en veldig enkel animasjon: fading inn. Et objekt har forskjellige attributter knyttet til seg, og attributter som endres over en gitt tidsperiode er i hovedsak animasjon. For å se disse attributtene, klikk på Utvid-ikonet ved siden av logoen etterfulgt av egenskapen "Konverter" .

Adobe After Effects Timeline Panels Logo Animation

Opprett nøkkelbilder ved å klikke på stoppeklokkeikonet ved siden av Egenskaper i tidslinjepanelet.

For en falmende animasjon vil du jobbe med attributtet som måler synligheten til et objekt: opasitet. Opasiteten er satt til 100 % fordi logoen som standard er helt synlig.

Klikk på stoppeklokkeikonet ved siden av Opacity-alternativet, og du vil se en diamant der spillehodemarkøren er satt (den svake blå linjen som krysser tidslinjen). Dette er en nøkkelramme, i utgangspunktet et øyeblikksbilde av gjeldende verdi av et spesifisert attributt. Flytt nøkkelbildet ved å klikke og dra det til 2-sekundersmerket på tidslinjen. Dra glidebryteren tilbake til 0-sekundersmerket, lag deretter en annen nøkkelramme og sett opasiteten til 0 %. Trykk mellomromstasten for å se animasjonen i komposisjonsvinduet.

Etter effekter

Вы увидите, что создали плавную анимацию нарастания, изменив непрозрачность с 0% до 100% в течение 2 секунд всего с двумя ключевыми кадрами. Именно так и выполняется вся анимация в After Effects. Вы можете создать стартовый ключевой кадр и конечный ключевой кадр на разных интервалах вдоль временной шкалы и After Effects автоматически вычисляет необходимые кадра переходов добраться из точки А в точку В (традиционно называют  промежуточные кадры  в анимации virksomhet).

Animert gif av en stigende animasjon i After Effects

En enkel jevn animasjon lages ved å bruke to nøkkelbilder for Opacity-egenskapen.

Du kan se at det er en rekke attributter du kan jobbe med i Forvandle eiendom, som vi kort skal forklare her. Eksperimenter gjerne med nøkkelbilder og modifiser hver enkelt for å få en følelse av animasjonsevnene deres:

  • Stilling : Dette attributtet beskriver posisjonen til logoen i X-, Y-rom på layoutskjermen og lar lineære bevegelser animeres.
  • Skala : Dette attributtet beskriver størrelsen på logoen (som en prosentandel av den fulle størrelsen på originalfilen) og lar deg lage zoom-inn- eller krympe-animasjoner.
  • Rotasjon : Dette attributtet beskriver orienteringen i grader og lar deg lage rotasjonsanimasjoner.

Råd fra en profesjonell :

Når det gjelder å animere en logo, er det fornuftig å jobbe bakover (som vi gjorde med fade-in) siden animasjonen skal ende på den ferdige, komplette logoen. Dette betyr at du må lage nøkkelbilder før du endrer noe slik at du har øyeblikksbilder av attributtverdiene i standardtilstanden. Du kan deretter flytte disse nøkkelbildene til ønsket sluttpunkt på tidslinjen (uansett hvor lenge du vil at animasjonen skal vare) og lage nye nøkkelbilder for endringene i begynnelsen av tidslinjen.

Trinn 5. Animer logoen ved hjelp av formlag.

La oss nå gå videre til mer interessante animasjonsteknikker ved å bruke formlag. Formlag er objekter som inneholder baneinformasjon som ankerpunkter og koblingslinjer (ligner de i vektorprogrammer), og manipulering av dem åpner døren til en hel rekke animasjonsmuligheter utover Forvandle egenskaper .

Hvordan velge riktig farge for logoen din?

Først skal vi konvertere logoen til et formlag. I Layered Composition-panelet (lagene opprettet i trinn 3), velg alle lagene dine, høyreklikk og velg "  Skape"  > "  Lag former fra vektorlag" . Du vil se at hvert lag er duplisert med en stjerne ved siden av - dette er et formlag. Nestet under formlaget finner du Innholdseiendom i tillegg til Forvandle eiendom . Til høyre for Innholdsegenskaper du vil også se en knapp " Legge til" , som lar deg velge enda flere attributter å animere.

Adobe After Effects tidslinjepaneler

Formlag inneholder en Legg til-knapp (til høyre for innholdsegenskapen) som lar deg legge til alle slags animerte egenskaper, for eksempel klippebaner.

Skalere et objekt i Adobe Illustrator

Trim baner

For logoen min brukte jeg en ganske vanlig og nyttig animasjon ved å bruke Trim Paths-egenskapen. For å gjøre dette la jeg til "Crop Paths" ved å bruke knappen " Legge til" til formlagene for hver bokstav, sett End-attributt nøkkelbilde til 0 % ved starten av tidslinjen og 100 % etter omtrent 1 sekund. Som du kan se, ser omrisset av bokstavene ut til å være tegnet av en usynlig hånd i sanntid.

Trim Paths lar deg animere linjer. Logo animasjon

Ved å bruke egenskapen Trim Paths kan du animere linjer slik at de tegner seg selv i sanntid.

Вдобавок я хотел добавить к фону акцентную анимацию. Поскольку я работаю в черно-белом цвете, я выбрал эффект зацикленного туннеля, напоминающий сумеречную зону. Для этого я использовал инструмент многоугольника на панели инструментов, чтобы нарисовать фигуру в центре моей композиции, создав новый слой-фигуру.

Deretter la jeg til en Repeater-egenskap, sentrerte posisjonen og økte antall kopier. Dette dupliserer formen, og skaper en tilsynelatende endeløs tunnel. Justering av skalaen øker avstanden mellom hver kopi, og endring av rotasjonen orienterer kopiene i forskjellige retninger for visuell interesse.

Til slutt, for å krydre det, satte jeg en forskyvning på 0 i begynnelsen av tidslinjen og satte den senere til en negativ verdi på tidslinjen.

Skjermbilde av Adobe After Effect

Ved å bruke et polygonal formlag og Repeater-egenskapen, var jeg i stand til å lage en animert bakgrunn.

Du har sikkert gjettet at det er mange alternativer for formlag. Det er sant: det finnes komplette nettkurs om emnet dedikert til emnet, og du bør ta deg tid til å eksperimentere, øve og lære.

Jeg kan heller ikke fortelle deg hvilken animasjonsstil som passer for deg logo eller hvilke spesifikke verktøy animasjoner du trenger for å oppnå denne stilen. Jeg kan imidlertid gi deg råd om hvordan du kan oppdage det selv. Se etter inspirasjon fra andre animerte logoer, som konkurrentene dine, merker du beundrer og/eller nettsteder som Pinterest eller Dribbble – akkurat som du gjorde da du opprinnelig opprettet logoen.

Du vil oppdage at når du begynner å analysere dem ved å bruke din nye kunnskap om hvordan du animerer en logo, er mange av dem basert på enkle manipulasjoner med former og transformasjoner (selv de som er tydelig lagdelt med avanserte stiliserte effekter). Når du har funnet noen du liker, kan du jobbe bakover i After Effects for å prøve å reversere disse animasjonene for å øve.

Trinn 6: Still inn tiden.

La oss snakke om tid, som beskriver tempoet til animasjonsrammer gjennom hele animasjonen. Du kan se en visuell representasjon av tid ved å gå til Graph Editor. For å gjøre dette, klikk på grafikonet (merket Graph Editor når du holder musepekeren over det) øverst i tidslinjepanelet, og dette vil endre tidslinjen til en linjegraf.

Hvis du klikker på en av keyframe-attributtene, vil du se en rett linje fra en keyframe til den neste. Akkurat nå, siden vi bare keyframe start- og sluttpunktene, forlot vi After Effects for å gjøre timingen. Uten retning flytter After Effects hvert bilde av animasjonen jevnt, noe som resulterer i en perfekt rett linje.

Graf editor. Logo animasjon

Grafeditoren viser timing for nøkkelbilder som vist i linjegrafen.

Den målrettede endringen i tid er imidlertid det som gir animasjonen en følelse av realisme. For eksempel, i en sprettball-animasjon, beveger ballen seg langsommere i høyden av sprett og raskere når den nærmer seg bakken på grunn av momentum og tyngdekraft. Han beveger seg med andre ord ikke i samme hastighet gjennom hele animasjonen, og hvis han gjorde det, ville han stått frem som en robot.

Bezier Tools Logo Animasjon

Bezier-verktøyene, som ligger nederst i grafeditoren, lar deg justere kurvaturen til graflinjen.

Konverter nøkkelbilder til Auto Bezier

Редактор графиков позволяет вам настраивать время для вашей собственной анимации с помощью так называемых маркеров Безье для преобразования линии графика в кривую. В правом нижнем углу редактора графиков вы увидите несколько ikoner квадратных точек, прикрепленных к линиям — это инструменты Безье.

Klikk på en av nøkkelbildene og hold musepekeren over Bezier-verktøyene til du finner den merket "  Konverter nøkkelbilder til Auto Bezier" . Når du klikker på denne vil du se en gul markør vises på grafen. Hvis du drar dette håndtaket, vil linjen bøye seg, og dette vil endre tidspunktet for animasjonen. Der kurven er mer uttalt, spilles bildene av raskere, og der kurven er jevnere, spilles bildene av langsommere.

Skjermbilde av Bezier-verktøy i Adobe After Effects

En skarpere kurve tilsvarer raskere synkronisering, og en jevnere kurve tilsvarer langsommere synkronisering.

For å virkelig forstå nyansene ved å justere din egen timing krever animasjonserfaring, og det er derfor det er et mer avansert tema å justere Bezier-kurver manuelt. I denne nybegynnerveiledningen anbefaler jeg å bruke Bezier-verktøyet Enkel letthet (som bruker en automatisk kurve på nøkkelbildet du velger) for alle animasjonstidsintervaller. Du kan søke  Enkel letthet  til en nøkkelramme utenfor diagramredigeringsprogrammet ved å velge nøkkelrammen og høyreklikke.

Trinn 7: Eksporter logoen din.

Når du er klar til å eksportere den ferdige animerte logoen, velger du " Fil" > "  Eksport"  > "  Legg til Adobe Media Encoder i køen" . After Effects eksporterer som standard fil i formatet mp4, som er egnet for video. Siden vi ønsker å lage en delbar bildefil av logoen vår, eksporterer vi den som en animert GIF. I Media Encoder-vinduet klikker du på pilen ved siden av den uthevede blå tekstlinjen under ordet "Format" og velger "  Animert GIF" . Вы также можете установить mappe назначения для вашего готового файла, щелкнув синий текст под словами «Выходной файл».

Adobe Media Encoder

For å eksportere en fil, gå til Fil > Eksporter > Legg til i Adobe Media Encoder Queue og velg Animated Gif fra rullegardinlisten i Format-kolonnen.

Dobbeltklikk på den uthevede blå teksten under forhåndsinnstillingen for å åpne vinduet Eksportalternativer. Det er noen få alternativer du bør se på for å redusere filstørrelsen: Kvalitet (jeg setter den til 20), bildefrekvens (jeg setter den til 10, selv om høyere bildefrekvenser (fps) anbefales for video), og Varighet, som er den blå linjen under forhåndsvisning (jeg trimmet min til 4 sekunder). Plukke ut  OK,  for å lukke dette vinduet.

Når du er ferdig, velg det grønne Spill-ikonet i øverste høyre hjørne av Media Encoder og filen din vil vises i den valgte destinasjonsmappen. Det var det: ferdig logoanimasjon!

Gjør merkevaren din til live med logo-animasjon.
-

Logoanimasjon er mer enn bare en populær trend som merkevarer blir tvunget til å følge. Det er også en ubestridelig magi til logo-animasjon, og det er en fin måte å skape et øyeblikk med visuell nytelse for alle som samhandler med merkevaren din. Og heldigvis har animasjonsprogramvare utviklet seg slik at nesten alle, uavhengig av ferdigheter, kan legge til litt av den magien til sin egen logo.

Med det sagt, mens denne opplæringen er ment å komme i gang med det grunnleggende om logo-animasjon, krever det mye prøving og feiling, øvelse og eksperimentering for å få noe utover grunnleggende animasjon. Hvis du vil ha en virkelig spesiell logo-animasjon, er en profesjonell logo-animator verdt investeringen.

 АЗБУКА

 

Часто задаваемые вопросы. Анимация логотипа .

1. Что такое анимация логотипа?

Анимация логотипа – это процесс добавления движения или визуальных эффектов к логотипу, чтобы сделать его более динамичным и привлекающим внимание.

2. Зачем нужна анимация логотипа?

Анимация логотипа помогает выделиться среди конкурентов, улучшает восприятие бренда, привлекает внимание и может сделать логотип запоминающимся.

3. Какие программы используются для создания анимации логотипов?

  • Adobe After Effects: Профессиональная программа для создания сложной анимации и визуальных эффектов.
  • Blender: Бесплатное и мощное ПО для 3D-анимации.
  • Cinema 4D: Популярное среди профессионалов ПО для 3D-моделирования и анимации.
  • Adobe Animate: Программа для создания 2D-анимации.
  • Motion: ПО для анимации от Apple, используемое в основном для видеопроизводства.

4. Какие типы анимации логотипов существуют?

  • 2D-анимация: Простые движения и эффекты для двухмерных логотипов.
  • 3D-анимация: Более сложные и реалистичные движения для трехмерных логотипов.
  • Морфинг: Плавное изменение формы или logo farger.
  • Секвенционная анимация: Логотип собирается или распадается по частям.
  • Типографическая анимация: Анимация текста логотипа.

5. Как долго должна длиться анимация логотипа?

Анимация логотипа обычно длится от 3 до 10 секунд. Важно, чтобы она не была слишком длинной и не отвлекала от основного контента.

6. Где можно использовать анимацию логотипа?

  • Nettsteder: På hjemmesiden или в качестве загрузочного экрана.
  • Video: В начальных и конечных титрах видеороликов.
  • Sosiale nettverk: В коротких видеопостах или сторис.
  • presentasjoner: В корпоративных и маркетинговых презентациях.
  • annonse: В цифровой и телевизионной reklame.

7. Каковы лучшие практики при создании анимации логотипа?

  • Merkeoverholdelse: Анимация должна отражать стиль и ценности бренда.
  • lette: Слишком сложная анимация может отвлекать и перегружать зрителя.
  • Kvalitet: Высокое качество анимации помогает создать профессиональный образ.
  • Korthet: Краткая анимация более эффективна и запоминается лучше.

8. Сколько времени занимает создание анимации логотипа?

Время создания зависит от сложности анимации и навыков дизайнера. Простая анимация может занять несколько часов, тогда как сложные проекты могут требовать нескольких недель работы.

9. Каковы затраты на создание анимации логотипа?

Стоимость варьируется в зависимости от сложности работы и опыта дизайнера. Простая анимация может стоить от $100 до $500, а более сложная и профессиональная работа – от $1000 и выше.

10. Можно ли анимировать существующий логотип?

Да, существующий логотип можно анимировать, добавив к нему движение и эффекты. Важно сохранить оригинальный стиль и элементы логотипа.

11. Какие элементы логотипа можно анимировать?

  • Tekst: Появление, исчезновение, изменение размеров и цвета текста.
  • Grafiske elementer: Повороты, масштабирование, перемещение, изменение цвета и формы.
  • bakgrunn: Переходы, градиенты и другие визуальные эффекты.

12. Какие тренды в анимации логотипов актуальны на сегодняшний день?

  • minimalisme: Простые и чистые анимации.
  • Ручная работа: Эффекты, создающие ощущение нарисованных вручную элементов.
  • 3D-анимация: Использование трехмерных эффектов и моделей.
  • Градиенты и цветные переходы: Плавные изменения цветов и оттенков.
  • Interaktive elementer: Анимация, реагирующая на действия пользователя.