mu marquee 1440x660

Af Michael Vogelius, 23. april 2017

Byg dit eget website til dit filmprojekt

Mange bruger en standard skabelon fra Wordpress til de mindre salgsites - Det er en nem løsning, hvis man kan nøjes med en standard webside. Men der er en anden løsning som ikke kræver en programmør eller at man er superbruger i et CMS system.

Adobe Muse CC er en del af Adobe Creative Cloud pakken. Muse CC er et webprogram, som minder mere om det gamle Image Ready og Golive end om Dreamweaver. I Muse kan man komme langt uden at kode i HTML. Her kan man sætte billeder og tekst ind og så vælge, hvordan det skal opføre sig på websiden, når den bliver set på en iPad eller på en større computerskærm. Man kan bestemme, at billedet altid skal blive i højre side eller skal stå stille i toppen. Der er et utal af muligheder for at vise indholdet klart og overskueligt på alle skærme. Det kan eksempelvis være, at menuen skal være vandret på en stor skærm og på tablets, men skal være et ikon som folder sig ud på en iPhone.

Mens man opbygger websiden, kan man hele tiden teste, hvordan den vil se ud på flere enheder.

I det følgende vil jeg derfor beskrive, hvordan du selv kan komme i gang med at opbygge mindre websites til f.eks. en kampagne eller et nyt arrangement.

Adobe Muse kan godt opbygge og håndtere større websites med Master Pages og navigation, men for ikke at starte med en for stor opgave, vil jeg vise, hvordan I kan opbygge en webside med en forside, der indeholder en videoplayer, som fylder hele siden i bredden. Navigation og mindre billeder der kan give en stemning fra filmen.

Det bliver også muligt at bestille eller skrive til Jer om projektet.

Alt sammen opbygget uden brug af HTML koder og anden web viden end jeres egen erfaring som bruger af nettet.

Til at starte med skal du checke, om der er kommet en opdatering af programmet. Muse udvikler sig meget hurtigt, og det er ofte nyttige emner, som bliver tilført og rettet.

Det skal også siges, at alt ikke er indbygget fra starten, men det er nemt at udvide programmet med ekstra funktioner, kaldet Widgets, og det bliver også nævnt senere.

Resultatet kan man se på denne adresse www.aftereffects.dk.

Når programmet er opdateret, kan man åbne en ny webside og vælge en standard bredde på mellem 1200 og 320 pixels. Så passer det til almindelige computere og de mindste smartphones. Det kan også justeres senere.

Du er nu i Plan View, og her kan man se en Master Page og den første webside. Når du har oprettet flere sider, kan du se dem alle her. Den orden, du har på siderne, kommer til at matche den rækkefølge, du får i menuen. Placerer man en side som en underside under en anden, kommer der en dropdown menu frem automatisk i menuen på siden.

Du kan give siderne en titel, og det er den titel, der kommer til at stå i menuen.

På Master siden placerer man top elementerne som logo og navigation, og i bunden kan man placere adresse felt, kontakt og mere navigation. Herefter kaldet Footer.

Nu vil vi indsætte elementerne i top og bund. Dobbeltklik på Master siden og vælg tekst værktøjet og træk en mindre kasse i Header sektionen. Klik derefter på Resize/Tilpas, hvis du ligesom undertegnede har installeret programmet på dansk.

Her skal du Stræk til Browser bredde/Browser Width. Så vil feltet altid have samme bredde som dit browser vindue. Den egenskab skal vi også bruge senere, når filmvinduet skal fylde hele skærmen ud på din webside. Vælg nu en farve til feltet, og mens feltet er aktivt, kan du indsætte dit logo. De bedste formater til grafik har tidligere være GIF eller PNG. Men de kan ikke tilpasse sig browser størrelsen uden at blive uskarpe, Så nu vælger man ofte SVG formatet, som også er et Vektor format som Illustrator AI og EPS. SVG er et smart format, som altid står skarpt og kan bruges til mange avancerede interaktive funktioner. Her vil vi kun bruge, at det kan tilpasse sig skærmstørrelsen.

Den nemmeste måde at få SVG filer ind på siden er at åbne jeres logo i Illustrator som også er en del af Cloud pakken. Hvis du har jeres logo som en PDF, så kan du stadig åbne det i Illustrator. Marker nu logoet og kopier det med CMD + C/CTRL + C.

Gå over i Muse og sæt billedet ind med CMD + V/CTRL + V. Nu er grafikken gemt som SVG og lagt ind på siden. Tilpas størrelsen og placering som du ønsker.

Menuen, som viser alle de aktive sider, man har oprettet i Muse, kan man finde under: Windows/Widget Library. Åben paletten og find Menus Horizontal og træk den ind i top feltet. Den viser lige nu kun en knap, og det vil ændre sig, når vi opretter flere sider. Der er en Roll over funktion indbygget i menuen, så den ændrer farve, når man kører musen over på nettet. Hvis du vil ændre baggrundsfarven, skal du klikke, indtil du ser Fyld/fill knappen i vise den nuværende grå farve. Her vælger jeg det hvide felt med en rød streg over, så baggrunden bliver gennemsigtig.

Placeringen af elementer som menu, logo og tekstfelter kan bl.a. styre, ved at pin’ feltet, så det står på et fast sted på siden.

Marker objektet og vælg om den skal følge browseren eller sidde på et fast sted på siden

Gør det samme med Footer feltet i bunden af Master siden. Indsæt et tekstfelt med en farve. Kopier logoet og indsæt det, hvor du ønsker det.

Brug tekstværktøjet til at skrive din adresse og kontakt mulighed.

Du kan vælge en af de standard teksttyper, der findes på alle maskiner. Men listen er kort, og der er kommet en ny mulighed for at bruge fonte, der minder om de fonte, I har brugt i filmen, så stemningen bevares. De hedder Webfonte, og fordelen er, at de hentes fra en fælles server og skal derfor ikke ligge på modtagerens maskine. Der kan gå lidt længere tid, før websiden bliver åbnet, men fordelen er, at det ser godt ud, og at Google stadig nemt kan læse og indeksere indholdet på websiden.

Du vælger webfonte ved at gå op i font menuen og vælg Tilføj Webskrifttyper/webfonts.

 

Vaelg Vebfonte

Klik på ‘Kom Godt igang’ og vælg en Typekit font, der i udseende minder mest om den font, I bruger til jeres markedsføring. Fontdesign er lidt speciel, man kan ikke mønsterbeskytte et udseende på en font, kun et navn. Derfor er der mange fonte, som ligner hinanden men hedder forskelligt som f.eks. Helvetica, Verdana og Arial, som er i samme familie.

Gem siden i den mappe, du har alt dit indhold til websitet. Så er det nemt at finde frem, når du skal rette i websitet senere.

Gå over i Plan vinduet, hvor mastersiden er og træk den ind ved siden af forsiden. Kald den Medvirkende og træk en ny ind og kald den Kontakt. Åben forsiden igen og se, at menuen er opdateret og aktiv.

Nu skal vi indsætte en Widget, som kan afspille jeres trailer på filmen. Der skal vi bruge en gratis Widget, som er et ekstraprogram, der giver flere funktioner, end der følger med i programmet som standard. Du kan henteLightning YouTube Embedder her: http://museresources.com/lightning-youtube-embedder.html

Hvis du har dine film på Vimeo eller din egen film server findes der også en Widget til dem.

Når den er hentet, skal du bare dobbeltklikke på filen, og den bliver automatisk lagt det rigtige sted, og Muse giver dig automatisk besked om, når den er installeret.

Den nye Widget er nu i Library/Bibliotek fanen og kan trækkes ind på siden. Gå op i Adjust/Tilpas menuen og vælg ‘Stræk Til Browserbredden’. Juster størrelsen så den går op til topmenuen og ned til bundmenuen.

For at vise filmen på siden skal du kopiere den sidste af URL’en fra Youtube adressen.

 

Videokode

Klik på den lille blå pil, og dette vindue kommer frem.

 

bla pil

I toppen af skærmen til højre kan du se en knap til Plan view. Her kan du oprette en ny side ved at trække en A-master side op ved siden af den første side og kalde den holdet.

Åbn den nye side og sæt en tekstboks ind ved at trække med tekstværktøjet. Skriv eller kopier din tekst ind og marker overskriften. Den skal fremhæves og gøres tydelig overfor Google, at den er vigtig, så din side bliver fundet. Marker teksten og gå over i Paragraf/Afsnitsformater. Klik på ikonet for nyt afsnit

Kald den f.eks. overskrift. Vælg H1 i stedet for afsnit/Paragraph.

Mellemrubrikkerne kan du bruge H2 til. Så ved Google, at H1 er vigtigst og H2 er næstvigtigst.

Tekstfelter står næsten altid til at tilpasse sig den skærm, man ser siden på. Ellers tjek i toppen af skærmen, at den står til Responsiv Width.

Webdesign til flere skærme

Nu kommer vi til en af de største fordele ved Adobe Muse. Man kan nemt bestemme, hvordan websiden skal se ud på en Tablet eller en smartphone.

Her opretter man flere breakpoints, der bestemmer, hvornår siden skal brydes om. Den nemme metode er, at alle elementerne trykkes sammen på mindre skærme. Men det er ikke til at læse eller overskue; derfor bruger man en kombination af at billede- og tekstfelter skaleres op eller ned i størrelse, alt efter hvilken skærm den vises på, og hvornår siden skal brydes om til tablet og smartphone. Gå op i sidens top og fin denne grå bjælke.

 

Breakpoints

 

Træk i denne skyder til siden ser forkert ud, ofte omkring 960 pixels. Klik så på plus tegnet, og flyt billeder og tekstfelter rundt, så de står pænt. Træk yderligere ind til 800 og sidst 320 pixels og opret nye break punkter. Når du er tilfreds, kan du se din side i en browser og se, om din HTML5 kode og Javascript kode virker. Det gøres i Fil/Forhåndsvisning af side i browseren. 

Når du er tilfreds med resultatet, kan du udgive din side på nettet. Du skal bruge dine koder til dit webhotel FTP server, Brugernavn og adgangskode. Du kan oprette en mappe på webhotellet, så dit projekt har en underadresse som f.eks. www.firmanavn.dk/filmprojekt

Håber du nu er inspireret til at installere Adobe Muse.

 

Artiklen er fra Monitor Pro Marts 2017

ProAV Digital

ProAV7 20 forsideNET

Nyt nummer ude nu!

Læs bl.a. om:

  • Shure SLX-D
  • Lys til streaming
  • Ung selvstændig
  • Frihedsmuseet
  • Redigering på iPad

Læs alt lige HER

Annoncering

Få kontakt til en købestærk målgruppe i Danmarks eneste PRO AV magasin

Se mere her

Typisk ProAV læser

74,5% er meget tilfreds med det redaktionelle indhold

Se mere her