Läs om hur du ordnar, hanterar och omformar olika objekt i Adobe Muse. Läs om hur du optimerar bilder för Adobe Muse.

Obs!

Inga nya funktioner läggs till i Adobe Muse och supporten för Adobe Muse kommer att upphöra den 26 mars 2020. Mer information finns på sidan med information om när Adobe Muse inte längre kommer att vara tillgängligt.

Objekt i Adobe Muse innehåller designelement som skapats i eller importerats från externa källor. Bilder, text, bildramar och mer kan läggas till på webbsidan och ändras med hjälp av olika verktyg i Adobe Muse.

Ett av de vanligaste arbetsflödena är att skapa och importera en knapp från Adobe Photoshop. Därför känner Adobe Muse igen lager och lagerkompositioner som skapats i Photoshop. Med Adobe Muse kan du ange dessa lager som tillstånd för knappen på din webbsida.

Du kan omforma objekt på webbsidearbetsytan så att de passar webbplatsens designbehov. Du kan även isolera ett objekt för att lägga till lämplig fyllnad och spaltmellanrum för att hantera avstånd för kapslade element.

Använda bilder i Adobe Muse-projekt

Placera bildramar i Adobe Muse-projekt

Du kan montera bildramar direkt i Adobe Muse-projekt genom att klicka på verktyget Bildram. Klicka på verktyget Bildram i panelen Verktyg och sedan på önskad plats i projektet.

  1. Klicka på verktyget Rektangelram eller Ovalram i panelen Verktyg.

    Verktyget Bildram i Adobe Muse
    Dra och släpp rektangulära och ovala bildramar i Adobe Muse.

  2. Klicka på verktyget Bildram och dra för att montera bildramen i projektet.

    Du kan fortsätta att klicka och montera flera bildramar i projektet. Du kan även ändra storlek på och flytta bildramarna, om det behövs.

    Du kan fylla bildramen med färg eller montera en bild i ramen. Om du vill montera en bild drar och släpper du den till ramen. Storleken på bilden ändras så att den får plats i ramen.

    Rektangulära och ovala bildramar
    Rektangulära och ovala bildramar

Montera en bild på sidan

Arbetsytan i Muse fungerar ungefär på samma sätt som i Illustrator och InDesign. Det innebär att du först läser in den bild du vill montera och sedan klickar du på den sida där du vill att den ska visas. Så här lägger du till en bildfil genom att montera den direkt på sidan:

  1. Öppna dialogrutan Importera genom att välja Arkiv > Montera, eller använd kortkommandot Kommando+D (OS X) eller Ctrl+D (Windows).
  2. Bläddra efter och välj filen made-with-muse.png, som finns i mappen med exempelfilerna. Klicka på Öppna för att välja bilden och stänga dialogrutan Importera.

Klicka en gång i sidans nedre del för att placera bilden. I det här fallet ska du montera bilden i full storlek, så klicka bara en gång. Om du hade velat ändra den monterade bildens storlek hade du kunnat klicka och dra för att skala upp bilden till en viss storlek. 

Använd markeringsverktyget och dra bilden mot mitten av sidfoten med passning. Nu ser du att röda stödlinjer och turkosa mätningsrutor visas för att hjälpa dig justera bilden mot mitten.

När du har gjort de här ändringarna är sidfotsdelen nästan färdig.

Placera en bild i Adobe Muse
Sidfoten består av en rektangel med en anpassad bakgrundsbild, med en centrerad bild placerad ovanpå.

Hur bilder optimeras i Muse när du publicerar och exporterar en webbplats

Du kan också montera tryckfärdiga bilder i Adobe Muse. När du gör det konverteras de till ett webbanpassat format. Emellertid kan webbanpassning av bilderna innebära att de komprimeras på bekostnad av bildkvaliteten. Om du placerar bilder, som inte är webbanpassade i Muse, kommer de automatiskt att komprimeras. Om du publicerar eller exporterar en webbplats, och inte känner dig nöjd med det automatiserade resultaten, ska du prova med att skapa och optimera egna webbanpassade bilder manuellt i Photoshop eller Adobe Fireworks®. Ta bort de ursprungliga bilderna och placera de nya optimerade bilderna på sidorna och publicera eller exportera sedan webbplatsen på nytt.

Observera att andra förändringar som du gör med en bild i Muse - till exempel beskär, storleksändrar eller lägger till avfasningar, skuggor och glöd - innebär alla att bilden görs om och att den automatiskt komprimeras. Om du vill ha större kontroll över optimeringen kan du lägga till effekter i bilden med Photoshop eller Fireworks, optimera filen i ett bildredigeringsprogram och sedan ersätta bilden i Muse och ställa in en egen komprimeringsnivå. Du kan placera PSD-filer från Photoshop direkt i Muse i stället för att exportera PNG-, JPG- eller GIF-filer, men detta medför att Muse automatiskt kommer att skapa en ny bildfil med hjälp av interna automatiska komprimeringsalgoritmer.

Optimera bilder för visning på webben

Om en länkad fil med mycket hög upplösning senare skalas om och visas mycket mindre på sidan kan det leda till exportfel och långsam export. Det här är inte ett rekommenderat arbetsflöde. Problemet blir ännu tydligare om du upprepade gånger placerar ut bilder i fullstorlek (över 2 000 bildpunkter) och sedan skalar ned dem för att passa en design.

Om du placerar ut en mycket stor bildfil begränsar Muse automatiskt storleken på den, och skalar om bildens bredd till 2 048 punkter. Om du hovrar över ett resursnamn i panelen Resurser visas ett verktygstips med bildens ursprungliga storlek och den omskalade storleken (som bilden är ändrad för att få plats inom storleksgränsen).

Du bör ändra storlek på och optimera webbgrafik i ett bildredigeringsprogram innan du placerar ut den på sidor. När du placerar ut bilder med mycket stora mått kan .muse-filen bli mycket större än nödvändigt. .muse-filen måste då bearbeta extra data som inte behövs när bilden ska visas på webben. Detta kan göra att det tar längre tid att exportera och publicera webbplatser. I en del fall kan mycket stora .muse-filer göra att tidsgränser överskrids när du försöker ändra storlek på och optimera alla filer vid export eller publicering. Tidsgränser kan överskridas.

Du kan lösa det här problemet genom att högerklicka på resursnamnet och välja Optimera objektstorlek. När du gör det tas de data som inte behövs för att visa bilden bort.

Om du skalar om en optimerad bild så att den visas större i designen kan ett fel om uppskalad resurs visas. Du kan lösa problemet genom att välja Importera större storlek, så att du hämtar de extra bilddata som behövs för att visa bilden på rätt sätt.

Rita platshållarformer

En platshållarform är en oval, rektangel eller polygon som du kan fylla med bild, text eller färg.

  1. Välj verktyget Rektangel eller Oval i panelen Verktyg.

    Rita platshållarformer i Adobe Muse
    Välj antingen verktyget Rektangel eller Oval i verktygsfältet

  2. Montera den rektangulära eller ovala formen i ditt Adobe Muse-projekt genom att dra den dit. 

    • Om du vill skapa fyrkanter håller du ned Skift och klickar på verktyget Rektangel.
    • Om du vill skapa cirklar håller du ned Skift och klickar på verktyget Oval.

    Du kan fylla formerna med bilder, text eller färg.

  3. Om du vill ange passningsegenskaper för objektet klickar du på Objekt > Passning.

    Du kan välja ett av följande passningsalternativ:

    • Anpassa innehållet proportionellt: storleken på innehållet anpassas efter en ram och proportionerna på innehållet bevaras. Dimensionerna på ramen ändras inte. Om innehållet och ramen har olika proportioner skapas tomt utrymme.
    • Anpassa ramen proportionellt: storleken på innehållet anpassas efter hela ramen och proportionerna på innehållet bevaras. Ramens dimensioner ändras inte. Om innehållet och ramen har olika proportioner, kommer en del av innehållet att beskäras av ramens begränsningsram.
    Anpassa innehållet proportionellt för objekt i Adobe Muse
    Anpassa innehållet proportionellt i objekt

    Anpassa ramen proportionellt i objekt (Adobe Muse)
    Anpassa ramen proportionellt i objekt

Montera en Photoshop-fil som en över-knapp

  1. Välj Arkiv > Montera Photoshop-knapp. Dialogrutan Photoshop-import visas. Leta rätt på PSD-filen. Välj filen genom att klicka på Välj (Mac) eller Öppna (Windows).

  2. Dialogrutan med importalternativ till Photoshop visas. Lägg en stund på att utforska hur inställningarna används. Du kan använda menyerna till att ange vilket lager i Photoshop-filen som ska visas som knappens normalläge (hur knappen visas när sidan först läses in), läget Över (hur knappen visas när besökare håller pekaren över den) och Musknapp nedtryckt (hur knappen visas när besökare klickar på den). I de tre menyerna visas namnen på Photoshop-lagren och miniatyrbilder illustrerar hur varje valt lager visas.

  3. I det här exemplet har Photoshop-lagren redan lagts till rätt för att visa knapplägena. Du behöver inte ändra menyinställningarna. Klicka på OK om du vill godkänna lägena som de är ordnade som standard.

    Använd dialogrutan med importalternativ till Photoshop och koppla samman befintliga Photoshop-lager med de önskade knapplägena.
    Använd dialogrutan med importalternativ till Photoshop och koppla samman befintliga Photoshop-lager med de önskade knapplägena.

  4. Klicka en gång i den övre högra delen av sidhuvudet på A-mallsidan och placera ut Photoshop-filen i originalstorlek.

  5. Klicka på länken Förhandsvisa för att använda den WebKit-baserade återgivningsmålsemulatorn. Kontrollera hur A-mallsidan visas. När du visar sidan första gången visas knappens normaltillstånd. Om du håller pekaren över knappen ändras utseendet en aning (den bruna droppande färgen blir ljusare) och om du klickar på knappen blir den vita texten ljusbrun, förutsatt att du trycker och håller ned musknappen.

  6. Klicka på Design för att återgå till att redigera A-mallssidan i vyn Design.

Knappen Dela uppvisar förväntade statusar. I nästa avsnitt får du lära dig att justera knappen Dela mot droppbilden till höger i webbplatsnavigeringen.

I nästa avsnitt får du lära dig att definiera mallsidans sidhuvuds- och sidfotsområde.

Fästa objekt i webbläsarfönstret

När du placerar en bild, eller använder andra metoder för att lägga till bilder på en sida, använder du markeringsverktyget och piltangenterna för att flytta den. När du flyttar runt bilden flyttas den i förhållande till andra element (bilder, text och media) som också finns på sidan. Det är möjligt att flytta andra element också, men sidan som helhet har samma beteende som en broschyr eller poster, vilket innebär att objekt på sidan finns på samma plan. Om sidan är lång (det vill säga att den innehåller mycket innehåll vertikalt) och besökare rullar nedåt, kommer de inte längre att se bilderna överst på sidan.

Du har förmodligen sett fasta objekt tidigare på olika webbplatser. Objekten är "konstanta" och visas alltid på samma plats. Det verkar som om de flyter ovanpå resten av sidinnehållet.

När du använder fästverktyget tar du helt enkelt bort en bild från sidans flöde. I stället för att placera den i relation till andra sidelement placerar du den på en viss plats i relation till webbläsaren. Fasta bilder visas som "fastnålade" objekt och är alltid på samma plats (t.ex. i det övre högra hörnet eller längs ned på sidan) oberoende av andra rullande sidelement. Om besökaren storleksändrar webbläsaren kommer ett fast objekt alltid att finnas kvar på sin plats i relation till webbläsarfönstret.

Tänk på fastsättning som ett sätt att "ta ut" bilden från en siddesign och fästa den i webbläsaren istället, ungefär som att nåla fast ett meddelande på en anslagstavla. Det fasta elementet flyttas för att upprätthålla sin fasta position i förhållande till webbläsaren om besökaren ändrar storleken på webbläsarfönstret men flyttas inte om besökaren bläddrar horisontellt eller vertikalt i sidinnehållet.

Gör så här för att använda fästverktyget:

  1. Samtidigt som A-mallsidan är öppen i vyn Design väljer du Facebook-ikonen med markeringsverktyget.
  2. Klicka på den övre högra nålpositionen i nålgränssnittet på Kontrollpanelen. Den här inställningen "nålar fast" elementet där dess övre högra hörn befinner sig.
  1. Upprepa steg 1 och 2 för att fästa ikonknapparna för Google+ och Twitter vid deras övre högra positioner, så att de inte flyttas i webbläsarfönstret när den övriga sidan rullas.
  2. Klicka på planera för att se sidminiatyrbilderna. Observera att alla sidor nu innehåller de tre ikonerna för sociala medier eftersom du lade till dem på mallsidan.
  3. I vyn Planera dubbelklickar du på matsidan för att öppna den i vyn Design. Om den redan är öppen klickar du på fliken för matsidan så att den blir aktiv. Välj Arkiv > Förhandsvisa sidan i webbläsare för att visa sidan i en webbläsare.
  4. Klicka på menyobjektet Dessert för att gå nedåt på sidan till menyavsnittet Dessert. När resten av sidelementen rullas förblir de tre ikonerna för sociala medier på plats längs sidans högra del eftersom de är fästa.
Fästa objekt i webbläsarfönstret på Adobe Muse-webbplatser
Fästa objekt i webbläsarfönstret

Fortsätt till Skapa din första webbplats med Muse - del 6, där du får lära dig hur du grupperar uppsättningar med objekt så att de uppför sig som ett enda element. Du kommer också att slutföra sidan Besök oss genom att lägga till en inbäddad Google-karta där besökarna kan se på vilka platser Katie's Cafe finns. När du är klar med webbplatsen kommer du att se hur lätt det är att överföra den till en värdserver (som kör Business Catalyst) för publicering online så att du kan dela det pågående arbetet med dina kunder och kollegor.

I del 4 av Skapa din första webbplats med Muse fick du lära dig hur du lägger till ankarpunktstaggar och länkar dem till menyobjekt i en manuell horisontell menywidget. Du lärde dig också att fästa element på sidan så att de inte rullar. Du har också lärt dig skapa länkar till filer så att besökare kan hämta dem.

Du får även lära dig hur du grupperar objekt och arbetar med grupper så att du kan klistra in uppsättningar av innehåll på sidor. Du kommer också att få arbeta med mera inbäddad HTML-kod, och den här gången lägger du till en interaktiv Google-karta på sidan Besök oss. Slutligen får du se hur du lägger sista handen vid webbplatsen genom att lägga till en favoritikonbild och publicera testwebbplatsen till de värdtjänstservrar som ingår.

Gruppera objekt och klistra in grupper som en enhet

På samma sätt som med InDesign och andra designprogram kan du kombinera flera objekt i en grupp så att de behandlas som en enhet. I det här avsnittet skapar du en design som består av flera element (placerade bilder och textramar) som du sedan grupperar så att det blir enklare att placera eller kopiera dem som ett objekt. Gör så här:

  1. I vyn Planera dubbelklickar du på startsideminiatyrbilden för att öppna den i vyn Design.
  2. Välj Arkiv > Montera. Bläddra efter filen panel-open-bottom.png. i exempelfilmappen och markera den. Klicka på Öppna för att stänga importdialogrutan och klicka sedan en gång i närheten av startsidans nedre del (under kompositionswidgeten Ljuslådevisning och ovanför sidfoten) för att placera bilden med full storlek.

PNG-filen ställdes in på en lägre opacitet, vilket gör att den halvgenomskinliga blomdesignen släpper igenom den passade bakgrundsbilden.

  1. Välj Arkiv > Placera. Bläddra efter bilden spoon-map.png. Klicka på Öppna och klicka sedan en gång på det mittersta blombladet högst upp för att placera den.
  2. Samtidigt som skedbilden är vald, tryck och håll ned Alt för att duplicera skedbilden och dra den till blombladet omedelbart till höger om mitten. Upprepa den här åtgärden en gång till för att duplicera den mittersta skedbilden och dra kopian till blombladet till vänster. Använd markeringsverktyget till att placera de tre skedarna, enligt bilden nedan.
Placera de tre skedbilderna i designens tre översta blomblad.
Placera de tre skedbilderna i designens tre översta blomblad.

  1. Använd textverktyget för att rita en textram i det mittersta blombladet och skriv in följande:

Katie's Cafe

Noe Valley

123 Elizabeth Street

MÅN-FRE 6:00-22:00

LÖR-SÖN 7:00-22:00

  1. I textpanelen använder du följande inställningar för att formatera texten:
    • Teckensnitt: Droid Serif (eller annat serif-teckensnitt)
    • Teckenstorlek: 14
    • Teckensnittsfärg: #222222 (i del 5 ändrade du namnet på den här färgen till "katieblack")
    • Justering: Centrera
    • Radavstånd: 120 %
  1. Sedan markerar du de två sista raderna (som börjar med veckodagarna) och ändrar teckenfärgen till röd (#A6342A).
  2. Markera textramen med markeringsverktyget. Håll ned Alt för att duplicera textramen och dra den till blombladet direkt till höger, ovanför skedbilden. Upprepa den här åtgärden en gång till för att duplicera den centrala textramen och dra kopian till blombladet till vänster. Använd markeringsverktyget till att placera de tre textramarna rakt ovanför de tre skedarna, enligt bilden nedan.
Gruppera objekt i Adobe Muse
Placera om de tre adresserna så att de visas ovanför de tre skedarna i designens tre övre blomblad.

  1. Växla till textverktyget. Markera texten i den vänstra adressen och ändra den till:

Katie's Cafe

Laurel Heights

800 Spruce Street

MÅN-FRE 05:00-12:00

LÖR-SÖN 9:00-13:00

  1. Använd textverktyget för att markera texten i den högra adressen och ändra den till:

Katie's Cafe

Cole Valley

301 Carmel Street

MÅN-FRE 7:00-22:00

LÖR-SÖN 9:00-22:00

Nu när designen är klar väljer du elementen och grupperar dem.

  1. Använd markeringsverktyget för att klicka och dra över hela blomdesignen. Se till att den placerade blombilden, de tre skedbilderna och de tre textramarna är markerade. Högerklicka och välj Grupp på menyn som visas. Du kan också välja Objekt > Grupp om du föredrar det.

När du har grupperat innehållsuppsättningen, notera att valindikatorn i kontrollpanelens övre vänstra hörn visar ordet Grupp.

  1. Kopiera den valda gruppen. Klicka på Planera för att återgå till planeringsvyn. Dubbelklicka sedan på miniatyrbilden för besökssidan så att den öppnas i vyn Design. Välj Redigera > Klistra in på plats för att placera hela gruppen av element på samma plats.

Som du kan se på det här korta exemplet är grupper praktiska när du har avslutat en design och vill arbeta med den som ett enskilt element, för att flytta den på en sida eller kopiera och klistra in den på en annan sida.

Utöver grupperingar kan även låsningsfunktionerna vara användbara när du har avslutat en design. Högerklicka på en grupp eller markerad (Du kan också välja Objekt > Lås). Låsning gör att du inte oavsiktligt flyttar eller tar bort några av de avslutade elementen på en sida, eftersom de då inte kan markeras. Om du senare behöver uppdatera de låsta elementen väljer du Objekt > Lås upp alla på sidan.

När du har klistrat in blomdesignen på besökssidans nedre del är sidinnehållet delvis färdigt. I nästa avsnitt fortsätter du att redigera besökssidan och lägger till ett interaktivt kartgränssnitt som hjälper kunderna att lokalisera närmaste kafé.

Bädda in medieinnehåll för att lägga till en animering

  1. Dubbelklicka på MasterFlash-miniatyren i vyn Planera när du vill öppna den för redigering i vyn Design. Observera att den statiska logotypen fortfarande är kvar eftersom du tidigare kopierade A-mall-sidan. Det är lättare att använda den statiska bilden till att matcha placeringen av animeringsrektangeln, men glöm inte att radera den statiska placerade logotypbilden när du har bäddat in de avancerade medieelementen.

  2. Välj Arkiv > Montera. I dialogrutan Importera navigerar du till mappen Kevins_Koffee_Kart och väljer filen med namnet logo.swf.

  3. Placera SWF-filen i det övre vänstra hörnet, så att placeringen stämmer överens med placeringen av den befintliga logotypbildfilen.

  4. När du har passat in det nya SWF-fönstret som du just placerade på den gamla, statiska logotypen raderar du den statiska logotypen genom att markera den och trycka på tangenten Delete.

  5. Om du vill granska hur hela webbplatsen ser ut med de nya ändringarna på startsidan ska du välja Arkiv > Förhandsvisa sidan i webbläsare för att testa hur logotypen visas på de olika sidorna. Utan att publicera webbplatsen kan du arbeta lokalt på datorn och förhandsvisa webbplatsen i en webbläsare genom att klicka dig igenom sidorna med webbplatsnavigeringen. Observera att animeringen (SWF-filen) visas en gång och sedan stoppar på startsidan. Om du klickar på andra sidor kommer endast den statiska logotypen att visas.

    Obs!

    Om du väljer Arkiv > Förhandsvisa sidan i webbläsare kommer det nya webbläsarfönstret att läsas in snabbare för att visa startsidan, men endast den aktiva sidan (startsidan) kommer att förhandsvisas. Välj det här alternativet om du bara vill kontrollera en sida på webbplatsen, i stället för hela webbplatsen.

Använda panelen Mellanrum

Med panelen Mellanrum kan du dra nytta av utfyllnad och spaltmellanrum i CSS. Utfyllnaden rensar ett område runt innehållet (inom ramen) i ett element. Utfyllnaden påverkas av bakgrundsfärgen i elementet.

Den övre, högra, nedre och vänstra utfyllnaden kan ändras oberoende genom att använda separata egenskaper. Du kan också utjämna alla utfyllnadsegenskaper genom att välja att redigera dem tillsammans.

  1. Välj Fönster > Mellanrum i Adobe Muse för att visa mellanrumspanelen.
Öppna panelen Mellanrum i Adobe Muse
Öppna panelen Mellanrum i Adobe Muse

  1. Ange värden för vänster, höger, övre och nedre utfyllnadsegenskaper. Om du vill ange olika värden så avmarkerar du knappen.
Konfigurera utfyllnads- och spaltmellanrumsinställningar från panelen Mellanrum.
Konfigurera utfyllnads- och spaltmellanrumsinställningar från panelen Mellanrum.

  1. Du kan också välja att ange vågräta och lodräta mellanrumsegenskaper.

Skalförändra och rotera objekt med hjälp av panelen Omforma

Med Adobe Muse kan du använda tvådimensionell omformning på objekt. Du kan flytta, skalförändra och rotera objekt på X- och Y-axlar.

Med 100 % breddväxling på omformningspanelen kan du ange 100 % bredd för objekt. Du kan också ange att skalbara objekt ska sträcka sig över hela webbläsarens bredd och anpassas efter din datorskärm.

Gör följande om du vill omforma ett markerat objekt:

  1. Välj Fönster > Omforma i Adobe Muse.
Öppna panelen Omforma i Adobe Muse.
Öppna panelen Omforma i Adobe Muse.

  1. Använd någon av följande omformningar med objektet markerat:
    • Placering: Ange X - och Y-värden för att placera objektet där du vill på webbsidan.
    • Skala: Ange värden för höjd och bredd för objektet. Du kan också välja att skala objektet med enhetlig bredd och höjd genom att klicka på .
    • Rotation (): Ange rotationsvinkeln för objektet.
    • 100 % bredd (): Du kan ange 100 % bredd för objektet så att det anpassas efter bredden på webbläsaren.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy