So entwerfen und animieren von Banner in Figma

1. Einführung: Hallo und willkommen zu meinem neuen Skillshare Kurs, wie man Bannerwerbungen in Figma entwirft. Jetzt verbringe ich viel Zeit als Designer, um Display-Anzeigen zu machen. Es ist genau dort, wo die Industrie jetzt ist. Jeder in jeder Branche, egal ob Sie Schuhe verkaufen, ob Sie Software verkaufen, ob es sich um B2B oder B2C handelt, Sie werden Display-Anzeigen gestalten. Sie werden Ihre Produkte online verkaufen. Und das bedeutet, dass Sie Display benötigen, da Sie digitale Werbung dafür benötigen. Das bedeutet, dass wir als Designer wirklich rationalisieren und wirklich schnell und effektiv bei der Gestaltung dieser Bannerwerbung bekommen müssen. Also habe ich einen Kurs über die Gestaltung dieser und Banner Snack. Ich habe einen Kurs zum Entwerfen dieser in Photoshop. Und jetzt habe ich einen Kurs auf die Gestaltung dieser in Figma ist, ein paar Monaten, habe ich gelernt, dass man tatsächlich beginnen kann, einige ziemlich coole Dinge in Figma zu tun. Ich habe viel Zeit damit verbracht, für ein UI-UX-Zeug zu entwerfen. Aber jetzt hat Figma einige wirklich coole Tools, um Display-Anzeigen als auch zu entwerfen. Also werden wir diese heute durchgehen und einfach ein weiteres Arsenal zu Ihren Fähigkeiten hinzufügen, um Ihre Display-Anzeige-Design-Fähigkeiten. Also lasst uns hineinspringen und loslegen. 2. Statik: Ordnung, also bin ich hier in Figma, jetzt habe ich diese wirklich einfachen Display-Anzeigen. Daher, eine Fallstudie, richtig, sagt lernen, wie Lauras psychische Gesundheit Nutzen verändert Leben oder Genetech. Es ist wirklich einfach Display-Anzeige Design weise. Es ist nicht so kompliziert, oder? Wir haben jetzt nur einen Download und der Kunde wollte zeigen, wie die tatsächliche Fallstudie aussehen würde. Also haben wir die ersten beiden Seiten der Fallstudie. Der Hintergrund beeinflußt diese äußeren Kreise und diese diagonalen Linien hier, das ist von ihrem Markenstil-Guide. So passt es zu dem, was sie auf ihrer Website vor sich haben. So wie dies, ist dies auch ihre Schrift. Es heißt Gilroy. Und die Farben, die wir verwenden, sind auch ihre Markenfarben. Also im Grunde, die Art und Weise, wie Sie dies in Figma tun, ist wirklich einfach, nur für die Gestaltung statischer Anzeigen wie diese. Sie, jeder von ihnen ist im Wesentlichen sein eigener Rahmen. Und so habe ich hier den Stamm der gängigsten Display-Anzeigen obwohl wir hätten. Also geh ich hier rauf und erstelle einen Rahmen, richtig? Und einfach ganz einfach Drag & Drop, richtig, denn jetzt habe ich diesen Rahmen und dann in der oberen rechten Ecke erscheinen. Ich setze meine Größe zwei auf das, was ich suche. Also sagen, es war ein 300 von sagen wir dreihundert, achthundert fünfzig ist eine ziemlich gemeinsame Größe. Aber sagen wir, wir haben 300 mal 500 n. Chr., die wir tun mussten. Also habe ich das hier gesagt. So wie ich es in meinem Photoshop-Kurs mache, in meinem Banner-Snack-Kurs wirklich wichtig, ist es in meinem Banner-Snack-Kurs wirklich wichtig,Ihre Ebenen entsprechend zu beschriften und zu benennen, damit Sie zurückgehen und sie finden können. Ich beschrifte alle meine Boards immer mit der tatsächlichen Größe der Banner-Anzeige, weil esder Person, die ich bereitstelle, einfachmacht der Person, die ich bereitstelle, einfach sie zu exportieren und zu senden, wohin sie es senden müssen. Also hier werde ich im Grunde nur irgendwie meinen Namen kopieren und einfügen. Aber dann würde ich dies auf 300 mal 500 Kern ändern. Und von hier aus ist es im Grunde genau wie Photoshop. Es ist wie Benner-Snack. Es ist genau wie jede andere Design-Software, die Sie verwenden, spielt keine Rolle. Wenn du in Figma bist. Wir machen genau die gleichen Dinge. Ich würde die Füllung ändern. Ich werde das in den Hintergrund ändern, den ich auf alles habe. Jetzt habe ich meine Leinwandfarbe. Und wenn Sie bereits einige Ihrer Assets angelegt haben, können Sie im Grunde einfach kopieren und einfügen. Also könnte ich buchstäblich alles nehmen, was ich auf diesem Banner habe. Kopieren Sie es einfach, bringen Sie es hierher, fügen Sie es ein, skalieren Sie es so, dass es auf die Chemie passt, an der ich arbeite. Und dann einfach einige dieser Elemente neu positionieren, so dass sie an dieser Größe arbeiten. Also darf ich das hier rüber ziehen. Ich mache dies größer oder ändere die Schriftgröße, um etwas kleiner zu sein, so dass es besser in diesen Raum passt. Reparieren Sie die Vermietung hier. Vielleicht sogar noch ein bisschen kleiner. Ich mag es nicht, dass ich nicht mag, wie diese Vorteile hängt von selbst. Also werde ich ziemlich klein auf das gehen müssen. Da gehen wir. Ja, ich werde diese Dinge im Grunde nur irgendwie neu positionieren. Vielleicht skalieren Sie das ein bisschen, oder? Und das ist der grundlegende Kern davon. Jetzt habe ich gerade eine völlig neue Display-Anzeige gemacht. Wenn Sie das von Grund auf neu machen, sagen wir, Sie hatten keines der Elemente selbst. Vielleicht bist du völlig neu in Figma. Wie ich bereits sagte, erstellen Sie zuerst Ihren Rahmen. Und dann, sobald Sie Ihren Rahmen haben, müssen sie anfangen, Elemente hinzuzufügen. So können Sie hineingehen und Text hinzufügen , der eine der ersten Dinge sein wird. Sie können also hier nach oben gehen, auf Text klicken, Ihr Textfeld zeichnen und dann mit der Eingabe beginnen. Wenn Sie wissen, wie man eine Design-Software verwendet, wissen Sie, wie man Figma verwendet, es sagt, es ist im Wesentlichen die exakt gleichen Werkzeuge, die exakt gleiche Art von Layout-Prozess. So können Sie hier gehen Format es links rechtfertigen. Sie wählen Ihre Schriftart, Ihre gesamte Schriftartenbibliothek, die Ihnen auch hier zur Verfügung steht. Also wählen Sie eine Schriftart, die schrecklich ist. Lasst uns bald mit euch sprechen . Ok? Dann würden Sie auch Ihre Schriftgröße ändern. Und dein Zeilenabstand. Sie haben alle diese auch zur Verfügung, Ihre Farbe. Sie können, Sie haben den Schieberegler hier, um irgendwie die Farbe zu finden, die Sie suchen. Sie können hier auch die Transparenz anpassen. Sobald Sie eine Farbe eingerichtet haben, wird sie in der Dokumentfarbe gespeichert, sodass Sie die Farbe wiederverwenden können. Nehmen wir an, ich habe dieses Marineblau, das ich für die meisten meiner Dokumente verwende . Ich ändere das in mein Marineblau, richtig? Und jetzt sind wir alle bereit, einen Button hinzuzufügen. Eine der Möglichkeiten, wie Sie dies tun können, besteht darin, ein Rechteck zu erstellen. Sehr einfach. Du zeichnest einfach dein Rechteck. Wählen Sie Ihre Farbe. Ich gehe rein und bleibe bei meinem Marineblau. Hier drüben. Sie können den Eckenradius ändern. So, wie Sie in meinen Display-Anzeigen hier sehen können, haben wir tatsächlich eine leicht abgerundete Ecke. Also habe ich gesagt, dass wir hier bis zu vier Eckenradius gehen, vielleicht fünf. Da gehst du. Um Text hinzuzufügen, wäre das Gleiche. Machen Sie Ihre Textbox, wo auch immer Ihr CTA ist. In diesem Fall ist es Download Now. Nun, um dies viel kleiner zu machen, ändern Sie die Füllung zu warten, lassen Sie es zentrieren und dann bringen Sie es ein bisschen größer, genau dort. Änderungen in Fettdruck. Ehrfürchtig. Es ist also nicht so anders als jede andere Software, die Sie verwenden, die Sie zuvor verwendet haben. Zum Hinzufügen dieser Bilder. Der einfachste und unkomplizierteste Weg ist buchstäblich, einfach per Drag & Drop zu ziehen. Wenn Sie also diese Bilder auf Ihrem Desktop gespeichert haben, würden Sie auf Ihren Desktop gehen. Und dann ziehen Sie es einfach in Figma und es bringt es automatisch rein. Es gibt keine Notwendigkeit, zu importieren, exportieren oder so etwas. Und dann, wie Sie sehen, sobald Sie tatsächlich das Bild C gezogen und abgelegt haben, können Sie in Ihrer Ebene hier sehen, dass es sich um ein Bild handelt. Und wenn Sie dieses Bild ersetzen müssen, wählen Sie es aus und schreiben Sie dann hier in Ihrer Füllung, Sie würden zu Bild gehen. Wenn Sie es ändern müssen, haben Sie einige, Sie haben einige Bearbeitungsfunktionen hier. Sie könnten die Belichtung anpassen, können Sie den Kontrast wirklich grundlegend einstellen. Es ist nicht so robust wie Photoshop. Es wird für einige Dinge ausreichen. Aber wenn Sie sagen, dass der Kunde entscheidet, dass er das Bild nicht mag, er möchte es ändern, oder er kann Bild wählen. Und dann wählen Sie einfach aus jedem, alles, was Sie wollen. Sagen wir, ich wähle diesen. Und es sollte jetzt automatisch bevölkern. Und so habe ich jetzt auch dieses neue Bild da drin. Es ist also ziemlich unkompliziert, alles in Figma zu entwerfen. Solange Sie Photoshop kennen, solange Sie jede andere Art von Design-Software kennen, wird Dicke wirklich, wirklich intuitiv sein. Und wenn du statische Anzeigen entwerfen würdest, würdest du so weit kommen. Und du bist im Grunde fertig, oder? Hier hört man auf. Und Sie müssten diese nur als statische JPEG-Bilder exportieren. Also würden wir sie alle auswählen. Ich würde hier runter gehen, um meine fünf verschiedenen Ebenen zu exportieren. Nehmen wir an, ich werde sie auf meinem Desktop speichern. Und jetzt ist es erledigt. Also, wenn ich jetzt auf meinen Desktop gehe, lass mich hier aus dem Vollbildmodus raus. Jetzt siehst du alle meine Anzeigen hier schon perfekt so beschriftet, wie sie da sein sollen, mit dem, was ich mein Kunstboard nannte. Und sie sind alle bereit und bereit, richtig? Und so ist es, dass einfach zu Design fügt in Figma. Aber Figma hat auch einige wirklich coole Funktionen und Plugins, die Sie verwenden können , um diese auf ein ganz neues Niveau zu bringen, neben nur machen sie statische Anzeigen. Im nächsten Video gehen wir über, wie das Plugin aussieht und was es mit Ihren Display-Anzeigen tut. Also bleib dran. 3. Animation hinzufügen: Okay, also alles, was ich dir bis zu diesem Punkt gezeigt habe, ist wirklich unkompliziert und es sind nicht gerade die bahnbrechenden Nachrichten hier. Im Wesentlichen nur die Gestaltung von Kunstbrettern innerhalb von Figma, die teilweise wäre sitzen dort wurde entworfen, um zu tun. Aber die wirklich coole Sache, die figma jetzt hat, ist die Fähigkeit, diese Anzeigen tatsächlich zu animieren und sie als Zigeuner zu exportieren und als HTML fügt hinzu, der spannende Teil sind die HTML-Anzeigen. Da zunehmend Display-Anzeigen bewegen sich weg von nur statische JPEG-Anzeigen und müssen diese dynamischen HTML5-Anzeigen, die nur besser über durchgeführtwerden diese dynamischen HTML5-Anzeigen, die nur besser über durchgeführt und nur mehr Return on Investment für diese Art von Anzeigen. Also lasst uns eintauchen, wie man das auf Figma macht. Sie benötigen ein Plugin namens Banner von Phi, um zu tun, was ich bin im Begriff, Ihnen zu zeigen. Aber wenn Sie das Plugin haben, im Wesentlichen, was Sie tun, ist, Sie gehen in Plug-ins, und es heißt Banner von Phi, Banner Studio. Nun, besser, wenn phi nur ein wirklich cooles und einfach zu bedienendes Plugin für Figma ist. So wie es tut, wenn, sobald Sie es installiert haben und sobald Sie es installiert haben und dann laufen lassen und Sie klicken und starten Sie es. Was es tut, ist es im Grunde nimmt jedes Ihrer Elemente auf Ihrer Leinwand, wo all die verschiedenen Dinge, die Sie auf jeder dieser Leinwände haben. Und es können Sie Animationen hinzufügen. Sie müssen keine Art von Codierung durchführen. Du brauchst keine Art von schickem Gimmicky Zeug zu machen. Sie sagen einfach, was Sie animieren möchten und wann. Also sagen wir, lasst uns zu meinem gehen, mal sehen, lasst uns gehen, um das zu gehen. Aber, okay, genau hier bin ich in meinem 336 mal 280 AD. Standardmäßig wird diese Fade-In-Animation auf jeden einzelnen Ebeneneffekt angewendet. Also, wenn ich hier klicke und einfach die Fledermaus abspielen drücken, hat es bereits eine Animation. So konnte ich buchstäblich nur einen Finger heben und einfach sagen HTML exportieren oder nach Jeff und Video exportieren und damit fertig sein. Wenn ich anfangen wollte, damit zu basteln. Nun, das ist, wo es genau wie die Photoshops Heimatanimation, die ich in einem meiner vorherigen Kurse abgedeckt. Und die Banner Snack Timeline Animation, die ich auch einen anderen Kurs auf. Es ist wirklich nur, die Timeline zu verstehen, wie Emotion funktioniert, und dann fügen Sie diese Animationseffekte hinzu. Also lassen Sie uns sagen, das erste, was ich drehen möchte , um zu erscheinen ist der Text, der gelernt hat, wie Lear als psychische Gesundheit Nutzen verändert. Also würde ich es auswählen und dann sagen, ich möchte, dass es, zu , zu füttern und zu sagen, warum es eine Fähigkeit ist und sehen, wie das aussieht. Ja, also gefällt mir die Skala besser. Also möchte ich, dass das eigentlich zuerst kommt. Also werde ich diesen kleinen Block den ganzen Weg nach vorne schieben. Also, wenn ich das nochmal ausspiele, ist es das erste, was auftaucht. Und so gefällt mir das schon irgendwie besser. Das nächste, was ich auftauchen möchte, Mal sehen. Ich möchte, dass der Download jetzt vorbei und das Lyra-Logo zu, um ein bisschen früher zu erscheinen. Also geh ich zu meinem Knopf hier und lass uns sehen. Ich habe es da oben. Ja, es gefällt mir besser und ich mache dasselbe mit dem Logo, will, dass sie zur gleichen Zeit auftauchen. Also sind diese beiden jetzt gleichzeitig ausgerichtet. Und ich will nicht, dass sie reinpassen. Nehmen wir an, Sie haben eine ganze Bibliothek von Dingen, die Sie tun können, Sie können wirklich verrückt damit werden. Diese Rolle von links, rechts, das wird ein wenig verrückt. Wenn ich in C kaufen möchte, um zu flimmern und zu sehen, wie das aussieht. Das ist, weißt du, vielleicht ist das der richtige Schritt für etwas, an dem du arbeitest. Weißt du, du hast eine ganze Menge Dinge, für die du dich entscheiden kannst. Aber mal sehen, was 360 drehen ist. Das ist zu viel. Sagen wir, ich will es tun, ich weiß es nicht. Ich mag die Fähigkeit in Yeah, und ich werde dasselbe mit dem viralen Logo machen. Skalierung. - Ja. Und jetzt will ich die beiden Mäntel Bilder. Also habe ich die Studie Abdeckung und die Studie Seite 2. Aus diesem Grund ist es wirklich wichtig, alle Layer entsprechend zu benennen. Denn wenn du das machst, wenn du, wenn das nur IMG dash 66 5 ist oder es ist, weißt du, ich habe Bild Baba. Es wird verwirrend, worauf Sie sich eigentlich beziehen. So beschriften Sie alles, damit Sie immer genau das finden können, wonach Sie suchen. Aber ich will nicht, dass sie sofort verblassen. Ich möchte, dass sie verblassen und nachdem ich den Text drin habe, also lassen Sie uns sagen, dass wir das hier rüber bewegen. Und das gleiche, was ich will, dass diese Macht, aber zur gleichen Zeit, vielleicht nur ein wenig gestaffelt. Da gehen wir. Also, wenn Sie es noch einmal spielen, das ist ein bisschen, ich mag nicht, wie es zu viel später kommt. Also lasst uns das machen. Lassen Sie uns etwas zu verzögert töten. Und dann ist das Letzte, was ich möchte, dass diese Hintergrunddinge auch am Anfang zur gleichen Zeit erscheinen. Ich will, dass sie reinpassen. Lassen Sie uns ein war Papageientaucher aussehen wie ja, ich mag das. Okay, also ändern wir das in Papageientaucher. Da gehen wir. Schön. Cool. Und jetzt, da ich es mir anschaue, gefällt mir nicht, dass der Download-Button und ein Lügner-Button vor der Fallstudie hereinkommt. Ich denke, es sollte nach der Fallstudie kommen. Also lasst uns weitermachen und das in „Gefällt mir“ ändern, und das kommt gleich hier rein. Ok. Ich glaube, wir sind fertig, das fühlt sich gut für mich an. Also jetzt habe ich hier zwei Optionen, würde ich sagen, und ich muss durchgehen und das für meine ganze Anzeige tun. Und so habe ich das für meine Einheitsgröße gemacht. Und jetzt gehe ich durch und muss das im Grunde nur noch einmal für all meine verschiedenen Größen wiederholen. So wie das. Sie könnten auch einfach tun, tun Sie es global, indem Sie diese Quickselect-Ebenen verwenden. Also lassen Sie uns sagen, ich mache die, den Text, richtig? Also wird es schnell alle meine Ebenen auswählen, alle Textebenen, und ich kann alle von ihnen in das ändern, was ich hatte, in dem war Geschick in danke. Ja, Skalierung. Und so wird es alle von ihnen für mich ändern. All die verschiedenen haben, wenn ich hier reingehe, werden sie alle Skalierung haben. Und wenn ich auch das Timing ändere. Also denke ich in meinem Original, Mal sehen. Kommen Sie früh um 0 Uhr rein. Also ja, es ist, es ist, es ist eine Möglichkeit, dein Ding zu beschleunigen und du könntest es tatsächlich hier unten tun. Sie klicken also darauf, es ist skaliert in 30 Sekunden und es heißt, wenden Sie Animationen auf Ebenen an. Und jetzt macht es es es global. So müssen Sie es nicht einzeln machen. Und ich kann das wieder für jede Schicht tun. Also für den Knopf, tun Sie das Gleiche. Ich denke, ich habe es skaliert und ich hatte es Geschick in seit meiner ursprünglichen eine Fähigkeit und mit 1,1 Sekunden, lassen Sie mich in 0.1 gehen, auf fünf Dinge anwenden. Wenden wir es global an. So können Sie Ihre Abläufe optimieren, so dass, wenn Sie mehr als alle haben, mehr als nur eine Display-Anzeige direkt hier, Ich habe diese 12345. Manchmal arbeiten Sie mit etwa 10, 15, 20 verschiedenen Display-Anzeigengrößen. Sie wollen also nicht einzeln durchgehen und die Zeit neu zuordnen jede einzelne dieser Display-Anzeigen. Also, wenn Sie sah, wenn alle Ihre Layer den gleichen Namen haben, wenn Sie das Kopieren und Einfügen tun. Hier beginnen Sie also mit einer Display-Anzeige und kopieren und fügen Sie alle diese Assets auf die nächste Größe ein. Und dann gehen Sie durch, so dass Sie im Wesentlichen genau die gleichen Elemente auf allen Ihren Leinwänden erstellen . Also, wenn Sie in Banner gehen, wenn ich Studio, können Sie schnell wählen Sie Ihre Ebenen und Sie haben genau die gleichen Ebenen arbeiten, an jeder einzigen Sache, jeder einzelnen dieser, diese Display-Anzeigen. Und Sie können diese globalen Effekte tun. Es spart Ihnen so viel Zeit. Sagen wir mal. Also, jetzt habe ich das in Ton gemacht, jetzt bin ich bereit zu exportieren. In diesem nächsten Video werden wir darüber sprechen, wie Sie diese exportieren, wie Sie Ihre URL-Links hinzufügen. Was der nächste Schritt ist, diese zu nehmen und Art von beenden Sie sie für die Lieferung. 4. Exportieren deiner animierten Anzeigen: Nun, an diesem Punkt haben wir den harten Teil getan. Das Hinzufügen der Animation und das Einstellen Ihres Timings ist am zeitintensivsten und Arbeit als Teil dieses gesamten Prozesses von hier aus, Export ist ein Kinderspiel. Nehmen wir an, dass wir durchgemacht haben und wir lieben, im Gegensatz zu unseren Display-Anzeigen, mögen wir die Animation und wir sind bereit zu exportieren. Unsere erste Option ist es, als GIF oder Video zu exportieren. Und dann, wenn ich darauf klicke und es ist das bringt diesen Dialog. Und im Wesentlichen von hier aus können Sie die Banner als GIF oder Video ausgenutzt werden. Wenn Sie sich für ein GIF entscheiden, können Sie hier Ihre Endlosspielschleife einstellen. Nehmen wir an, Sie möchten, dass die Animation nur einmal durchlädt und dann anhalten soll. Du hast das hier eingestellt. Wenn Sie unendlich losschleifen möchten, müssen Sie dies ausgewählt haben. Das ist also unendlich Schleife, und das ist nicht geloopt. Wenn Sie Video machen, wählen Sie Ihre Frames pro Sekunde aus. Sie können so schneller, so schnell Sie wollen, wie Sie hier sehen können. Es hat einige Einstellungen, je nachdem, was Sie tun. Wenn Sie also empfehlen würden, dass Sie bei Google Ads 40 Frames pro Sekunde haben sollten. Und dann wählen Sie Ihre Bildqualität. Dies ist relevanter für Jeffs, aber auch für jede Art von statischen Videos, die Sie haben. Jederzeit statische Bilder, die Sie in Ihren Videos haben, können Sie die Qualität hier wählen. Und danach würden Sie einfach Jeff exportieren oder MP4 exportieren und Web exportieren. Und ich werde das jetzt nicht tun, weil es eine Weile dauert, es zu tun, alles zu verpacken. Aber im Wesentlichen ist es so einfach, wie es nicht nur Export sein kann und Sie werden, Sie sind bereit zu gehen. Nun, wenn Sie es als HTML-Datei exportieren, ist dies, wo einige der Magie wirklich passiert. Wenn wir nun als HTML exportieren würden, kommt ein anderer Dialog auf. Wie Sie hier sehen können, haben wir die Möglichkeit, alle unsere Banner mit einem Pixel zu versehen. Dies ist für den Fall, dass Sie einen Hintergrund haben, wenn Ihr Hintergrund weiß ist oder Sie in irgendeiner Weise über Ihren Hintergrund besorgt sind, Art der Übereinstimmung mit dem Hintergrund der Website. Und Sie möchten sicherstellen, dass es sich vom Hintergrund unterscheidet. Sie können einen Rahmen mit einem Pixel hinzufügen und es wird nur hinzufügen, wie Sie in dieser Vorschau sehen können, dies eine wirklich einfache Grenze zu all Ihren Display-Anzeigen. Sie können allen Banner eine Vorladung oder Animation hinzufügen. Dies ist im Wesentlichen so, als ob es eine sehr lange und größere Dateigröße ist. Sie fügen dies hinzu und es fügt nur Fass dieses Ding , um die Leute wissen zu lassen, dass etwas an seinem Ende geladen wird. Meine allgemeine Faustregel ist, wenn Sie einen Freeloader benötigen, Ihre Datei ist zu groß und Ihre, wenn Ihr Design zu kompliziert ist, mache ich im Allgemeinen nichts davon. Gleiche wie beim Geoff und dem Video. Sie haben die Möglichkeit, die Better endlos zu schleifen. Also, wenn Sie dies umschalten, werden die Banner durch die Animation wiedergeben, dass es geht zurück zum Anfang und Schleife wieder. Jetzt willst du das manchmal und manchmal nicht. So haben Sie die Möglichkeit, entweder eine Art und Weise, ein Spiel durch einmal und dann bleiben, oder ich werde durch einmal spielen und dann wieder Schleife. Was die eigentliche Verpackung der Datei angeht, hatten Sie die Möglichkeit, ein Backup JPEG für alle Ihre Banner einzufügen. Ich empfehle dies als Safe. Halten Sie für den Fall aus irgendeinem Grund Ihre Anzeige nicht laden kann, haben Sie eine statische Sicherung JPEG als sicherzustellen , dass als eine Möglichkeit, um sicherzustellen, dass Ihre Banner ich kugelsicher und es wird laden, egal was. Sie haben hier die Möglichkeit, zwei Bögen für Retina-Displays umzuschalten. Dies wird immer häufiger als Display, da Kinder mehr und mehr hohe Auflösung bekommen. Es wird also viel häufiger praktiziert, Retina-Displays zu haben. Und dann können Sie Ihre Bilder komprimieren. Sie komprimieren sie in der Regel nicht. Aber wenn Sie wieder Ihre Dateigröße aus irgendeinem Grund reduzieren müssen, ja, die Option, Ihre Bilder hier zu komprimieren und die Qualität für sie umzuschalten. Nun, hier ist die aufregendste Funktion dieses Plugins, die Code-Ausgabe-Einstellungen. Also, wenn Sie in sie klicken, können Sie sehen, hier haben Sie alle diese verschiedenen Optionen wie Sie diese HTML-Anzeigen exportieren möchten. Das ist das Spiel verändernd. Dies ist innerhalb von Figma, dass Sie dies einfach mit einem Klick in Figma tun können. Nehmen wir an, Ihr Arbeitgeber oder Ihr Kunde macht Google-Anzeigen und sie werden, die HTML5-Datei für Google Ads wird anders sein als sagen, dass HTML5 L für DoubleClick, Kampagnenmanager, für seismische, für Yandex, für Admiral. Jeder nutzt eine andere Plattform, daher ist die Möglichkeit, speziell für diese Plattform zu exportieren, von entscheidender Bedeutung. Sagen wir einfach zu diesem Zweck, unsere Kampagnenmanager DoubleClick verwenden. Also haben wir Doppelklick verwendet. Und jetzt würden Sie hier den Link einfügen, zu dem Ihre Anzeigen geschaltet werden sollen. Also lassen Sie uns sagen, meine wäre www.health.com. Ok. Und Einzelpersonen bei Dateien für jedes Banner einschließen? Einige Leute, die wieder abhängig sind, müssten Sie mit Ihrem Kunden oder Ihrem Arbeitgeber bestätigen , wie sie diese tatsächlich in ihre Kampagnenmanager hochladen. Einige von ihnen, was einzelne Dateien für jede einzelne Banner-Anzeige. Einige von ihnen wollen nur eine große Zip-Datei, finden heraus, wie sie bevorzugen. Und dann machst du das hier. Also, jetzt werde ich auf Exportieren fünf Teig klicken. Und dann warten wir, wie es all diese Banner für mich generiert. Großartig. Und jetzt kann ich einfach klicken, die ZIP-Datei herunterladen, wählen, wohin ich sie gehen soll, und klicken Sie auf Speichern. Also jetzt, wenn ich in meinen Download-Ordner gehe, habe ich meine Datei hier mit all meinen individuellen Display-Anzeigen als einzelne fehlschlägt. Wenn ich in diesen HTML-Indexordner klicke, werden alle meine Anzeigen zusammen angezeigt, damit ich sie alle sehen kann. Stellen Sie sicher, dass alles so aussieht, als würde es so spielen , wie es sein soll. Was großartig ist. Lass mich zum Ordner zurückkehren. Nun, wenn wir hier reingehen, wie ich schon sagte, haben wir die einzelnen Ordner. Wir haben den Ordner index.html, dass wir für den einzelnen Banner die Bilder haben. Das sind also im Grunde alle Links, all die verschiedenen Komponenten unserer Display-Anzeigen. Auf diese Weise würden Sie in InDesign ein Paket erstellen , in dem Sie alle Links und Schriftarten und alles haben. Html funktioniert auf die gleiche Weise. Wir mussten einen verpackten Ordner mit all diesen verschiedenen Assets haben. Wir haben etwas JavaScript und CSS für Styling und dann unser Backup JPEG, falls die Dinge nicht richtig geladen werden. Und das ist es. So haben Sie gerade im HTML5-Ordner oder HTML5 erstellt , fügen Sie Figma hinzu, ohne irgendeine Art von Codierung wissen zu müssen.