Arbejd med objekter i Adobe Muse

Objekter i Adobe Muse omfatter designelementer, der oprettes i eller importeres fra eksterne kilder. Billeder, tekst, billedrammer og meget mere kan tilføjes til websiden og tilpasses ved hjælp af forskellige værktøjer i Adobe Muse.

Et af de mest almindelige arbejdsforløb er at oprette og importere en knap fra Adobe PhotoShop. I Adobe Muse genkendes lag og lagkomponenter, som er oprettet i Photoshop. Adobe Muse giver dig mulighed for at indstille disse lag som tilstande for den knap på dit website.

Du kan tilføje transformationer til objekter, der er anbragt på websidelærredet, så de passer til webdesignet. Du kan også isolere et objekt for at tilføje passende egenskaber for indre og ydre margen til at håndtere afstanden mellem indlejrede elementer.

Placering af billedrammer i Adobe Muse-projekter

Du kan placere billedrammer direkte i dine Adobe Muse-projekter ved at klikke på billedrammeværktøjet. På panelet Værktøjer skal du klikke på billedrammeværktøjet og derefter til den ønskede placering i projektet.

Placering af et enkelt billede på siden

Muse-arbejdsrummet fungerer på samme måde som i Illustrator og InDesign, hvor du indlæser det placerede billede først og derefter klikker på den side, hvor billedet skal indsættes. Hvis du vil tilføje en billedfil ved at placere den direkte på siden, skal du gøre følgende:

1. Vælg Filer > Placer, eller brug tastaturgenvejen: Kommando-D (Mac) eller Ctrl-D (Windows) for at åbne dialogboksen Importer.
2. Find filen made-with-muse.png, som findes i mappen med eksempelfiler. Klik på Åbn for at åbne filen og lukke dialogboksen Importer.

Klik én gang forneden på siden for at indsætte billedet. I dette tilfælde skal du indsætte billedet i fuld størrelse, så du skal kun klikke én gang. Men hvis du vil tilpasse størrelsen på det placerede billede, kan du klikke og trække for at skalere billedet til en bestemt størrelse. 

Brug markeringsværktøjet til at trække billedet ind mod det lodrette midtpunkt for det fliseinddelte sidefodsrektangel, og læg mærke til, hvordan der kortvarigt fremkommer røde hjælpelinjer og turkisfarvede målebokse, som hjælper dig med at justere ind mod midtpunktet.

Når du har foretaget disse ændringer, er sidefodsafsnittet næsten færdigt.

Hvordan optimerer Muse billeder, når du udgiver eller eksporterer et website

Du kan også bruge udskrivningsklare billeder, som konverteres til et webunderstøttet format i Adobe Muse. Konvertering af billeder til et webunderstøttet format betyder dog ofte, at det er nødvendigt at komprimere billedet og gå på kompromis med billedkvaliteten. Når du placerer billeder i et ikke-webunderstøttet format i Muse, komprimeres de automatisk. Hvis du udgiver eller eksporterer et website og er utilfreds med resultatet af den automatiske komprimering, kan du prøve at oprette og optimere dine egne webunderstøttede billeder manuelt i Photoshop eller Adobe Fireworks®. Slet de oprindelige billeder, og anbring de nye optimerede billeder på siden. Udgiv eller eksporter derefter websitet igen.

Vær opmærksom på, at andre billedændringer, du foretager i Muse, f.eks. beskæring, tilpasning eller tilføjelse af facetter, skygger og glød, medfører, at billedet oprettes igen og automatisk komprimeres i Muse. Hvis du ønsker mere kontrol med optimeringsprocessen, kan du føje effekter til et billede med Photoshop eller Fireworks, optimere filen i et billedredigeringsprogram og derefter placere billedet i Muse, så du selv kan angive komprimeringsniveauet. Du kan placere PSD-filer fra Photoshop direkte i Muse i stedet for at eksportere PNG-, JPG- eller GIF-filer, men dette medfører også, at der automatisk oprettes en ny billedfil i Muse med programmets automatiske komprimeringsalgoritmer.

Optimer billeder til visning på internettet

Der opstår muligvis eksportfejl, og eksporthandlingen bliver langsommere, hvis en sammenkædet fil placeres i en meget høj opløsning og efterfølgende skaleres til en meget mindre størrelse på siden. Denne fremgangsmåde anbefales ikke. Problemet bliver endnu mere fremtrædende, hvis der placeres flere billeder i fuld størrelse (over 2.000 pixels), som derefter skaleres, så de passer til et bestemt design.

Hvis du placerer en meget stor billedfil, begrænses størrelsen automatisk i Muse, og billedbredden skaleres til 2048. Hvis du peger på navnet på et aktiv i panelet Aktiver, får du vist et værktøjstip med den oprindelige størrelse på det placerede billede sammen med størrelsen på billedet med de nye billeddata (skaleret til at overholde den maksimale størrelse).

En bedste fremgangsmåde er at ændre størrelsen på webgrafikelementer til et website og optimere dem i et billedredigeringsprogram, før de placeres på sider. Placering af sider med meget store dimensioner kan medføre, at .muse-filen bliver unødvendigt stor. .muse-filen skal behandle de ekstra pixeldata, som ikke skal bruge til visning af billedet på internettet. Det kan resultere i en forlænget behandlingstid i forbindelse med eksport og udgivelse af websites. I nogle tilfælde opstår der muligvis timeout for en meget stor .muse-fil, hvis du forsøger at ændre størrelsen og optimere alle filerne i forbindelse med eksport- eller udgivelsesprocessen. Der opstår muligvis timeoutfejl.

Du kan løse problemet ved at højreklikke på aktivet og vælge Optimer størrelse af aktiv for at fjerne de data, der er overflødige til visning af det skalerede billede.

Hvis du skalerer et optimeret billede, så det vises i en større størrelse i et design, får du muligvis vist en fejlen Upsamplet plus aktiv. Du kan løse problemet ved at vælge Importer større størrelse for at hente de ekstra billeddata, der skal bruges til at vise det skalerede billede i en acceptabel kvalitet.

Tegn pladsholderformer

En pladsholderform kan være en ellipse, rektangel eller en polygon, som du kan udfylde med et billede, tekst eller farve.

Placer en Photoshop-fil som en overgangsknap

Knappen Del viser tilstandene som forventet. I dette afsnit lærer du at justere knappen Del med dråbebilledet til højre i website-navigationen.

I næste del lærer du, hvordan du definerer områderne for sidehoved og sidefod på mastersiden.

Fastgør objekter til browservinduet

Når du placerer et billede eller bruger andre metoder til at føje billeder til en side, bruger du markeringsværktøjet og piletasterne til at flytte det. Når du flytter billedet rundt, flyttes det i forhold til de øvrige elementer på siden (billeder, tekst og medier). Du kan også flytte de andre elementer, men den samlede side opfører sig som en brochure eller en plakat. Elementerne på siden findes i et enkelt plan. Hvis en side er lang (indeholder en masse lodret indhold), og den besøgende ruller ned, så kan man ikke længere se billederne øverst på siden.

Du har sikkert set fastgjorte objekter, når du har besøgt websites: Det er de "faste" elementer, der altid vises på én placering. Det virker, som om de svæver over resten af sidens indhold.

Når du bruger værktøjet Fastgør, fjerner du reelt et billede fra sidestrømmen. I stedet for at lægge det i forhold til de andre sideelementer, anbringer du det på et bestemt sted i forhold til browseren. Fastgjorte billeder ser ud til at "klæbe" – de bliver altid på ét sted (f.eks. det øverste højre hjørne eller nær bunden), uanset andre rullende sideelementer. Hvis den besøgende tilpasser størrelsen på browservinduet, bliver de fastgjorte billeder altid på deres fastgjorte placering i forhold til browservinduet.

Du kan opfatte fastgørelse som at "trække billedet ud" af sidens design og anbringe det i browseren i stedet, som at sætte et opslag på en opslagstavle. Det fastgjorte element vil bevæge sig for at fastholde sin fastgjorte position i forhold til browseren, hvis den besøgende tilpasser størrelsen på browservinduet, men det fastgjorte element vil ikke bevæge sig, hvis den besøgende ruller sidens indhold vandret eller lodret.

Benyt denne fremgangsmåde til at bruge værktøjet Fastgørelse:

1. Vælg Facebook-ikonet med markeringsværktøjet, mens siden A-Master er åben i visningen Design.
2. Klik på fastgørelsesplaceringen øverst til højre i grænsefladen for fastgørelse i kontrolpanelet. Denne indstilling "fastgør" elementet på den aktuelle placering af dets øverste højre hjørne.

3. Gentag trin 1 og 2 for at fastgøre ikonknapperne for Google+ og Twitter til deres placeringer øverst til højre, så de ikke flyttes inden for browservinduet, når resten af siden rulles.
4. Klik på Plan for at se sideminiaturebillederne. Bemærk, at alle siderne nu indeholder de tre sociale medieikoner, fordi du har føjet dem til mastersiden.
5. Dobbeltklik på siden Mad i visningen Plan for at åbne den i visningen Design. Hvis den allerede er åben, skal du klikke på fanen for siden Mad for at gøre den aktiv. Vælg Filer > Forhåndsvisning af side i browser for at vise siden i en browser.
6. Klik på menupunktet Dessert for at springe ned gennem den lange side til afsnittet med dessertmenuen. Bemærk, at mens resten af sideelementerne rulles, forbliver de tre sociale medieikoner på deres placering til højre på siden, fordi de er fastgjort.

Fortsæt til Opbygning af dit første website med Muse, kapitel 6, hvor du lærer at gruppere sæt af objekter, så de opfører sig som ét element. Du kommer også til at færdiggøre siden Besøg ved at tilføje et indlejret Google-kort, der viser beliggenheden for Katie's Cafe til de besøgende. Når websitet er færdigt, vil du se, hvor nemt det er at overføre det til en hosting-server (drevet af Business Catalyst) for at udgive det online, så du kan dele dit arbejde med kunder og kolleger.

I kapitel 4 af Opbygning af dit første website med Muse lærte du, hvordan du tilføjer ankermærker og linker dem til menupunkter i en manuel vandret menu-widget. Du lærte også at fastgøre elementer til siden for at forhindre dem i at rulle. Og du så, hvordan man tilføjer links til filer, så besøgende kan hente dem.

Du kan også tage et kig på gruppering af objekter og arbejde med grupper, så du kan indsætte sæt af indhold på siderne. Du kommer også til at arbejde med mere indlejret HTML – denne gang ved at tilføje et interaktivt Google-kort til siden Besøg. Og endelig ser vi på, hvordan du kan lægge sidste hånd på websitet ved at tilføje et favoritikon og derefter udgive prøve-websitet til de inkluderede hosting-servere.

Gruppér objekter og indsæt grupper som en enkelt enhed

Akkurat som i InDesign og andre designprogrammer kan du kombinere flere objekter i en gruppe, så de behandles som en enkelt enhed. I dette afsnit skal du lave et design, der består af flere elementer (placerede billeder og tekstrammer), og derefter gruppere dem for at gøre det nemt at placere dem eller kopiere dem som ét element. Følg denne fremgangsmåde:

1. Dobbeltklik i visningen Plan på miniaturebilledet for startsiden for at åbne i visningen Design.
2. Vælg Filer > Placer. Gennemse for at vælge filen i mappen med eksempelfiler med navnet panel-open-bottom.png. Klik på Åbn for at lukke dialogboksen Importer, og klik derefter én gang nær bunden af startsiden (under Lightbox-kompositionswidgeten og over sidefoden) for at placere grafikken i fuld størrelse.

PNG-filen var indsat til lavere opacitet, så det er muligt at se det fliseinddelte baggrundsbillede gennem det halvgennemsigtige blomsterdesign.

3. Vælg Filer > Placer igen. Denne gang skal du gennemse for at vælge billedet med navnet spoon-map.png. Klik på Åbn, og klik derefter én gang på det øverste kronblad i midten for at placere det.
4. Mens billedet af skeen er valgt, skal du trykke på og holde Alternativ (Mac) eller Alt (Windows) for at dublere skebilledet og trække det til kronbladet lige til højre for midten. Gentag dette én gang for at dublere det midterste skebillede, og træk den dublerede kopi til kronbladet til venstre. Brug markeringsværktøjet til at placere de tre skeer som vist i følgende billede.

5. Brug tekstværktøjet til at tegne en tekstramme i det midterste kronblad, og indtast følgende:

Katie's Cafe

Noe Valley

123 Elizabeth Street

MON–FRI 6AM–10PM

SAT–SUN 7AM–10PM

6. I tekstpanelet skal du anvende følgende indstillinger for at formatere teksten:
   • Skrifttype: Droid Serif (eller en vilkårlig serif-skrifttype)
   • Skriftstørrelse: 14
   • Skrifttypefarve: #222222  (i Del 5 omdøbte du denne til katiesort)
   • Skrifttypejustering: Center
   • Skydning: 120%

7. Vælg derefter blot de sidste to linjer (der begynder med ugedagene), og indstille skrifttypefarven til rød (#A6342A).
8. Vælg tekstrammen med markeringsværktøjet. Tryk på og hold Alternativ (Mac) eller Alt (Windows) for at dublere tekstrammen, og træk den til kronbladet lige til højre for midten, over skebilledet. Gentag dette én gang for at dublere den midterste tekstramme, og træk den dublerede kopi til kronbladet til venstre. Brug markeringsværktøjet til at placere de tre tekstrammer, så de flugter med de tre skeer som vist i følgende billede.

9. Skift til tekstværktøjet. Marker teksten i den venstre adresse, rediger den til:

Katie's Cafe

Laurel Heights

800 Spruce Street

MON–FRI 5AM–12AM

SAT–SUN 9AM–1AM

10. Marker teksten i den højre adresse med tekstværktøjet, og rediger den til:

Katie's Cafe

Cole Valley

301 Carmel Street

MON–FRI 7AM–10PM

SAT–SUN 9AM–10PM

Nu, hvor designet er færdigt, skal du vælge elementerne og gruppere dem.

11. Brug markeringsværktøjet til at klikke og trække hen over hele blomsterdesignet, og sørg for at markere både det placerede blomsterbillede, de tre skebilleder og de tre tekstrammer. Højreklik, og vælg Gruppe i den viste menu. Du kan også vælge Objekt > Gruppe.

Når du har grupperet objekterne, ordet: Gruppe i markeringsindikatoren øverst til venstre i kontrolpanelet.

12. Kopier den valgte gruppe. Klik på Plan for at vende tilbage til visningen Plan, og dobbeltklik derefter på miniaturebilledet for siden Besøg for at åbne den i visningen Design. Vælg Rediger > Indsæt samme sted for at placere hele gruppen af elementer på det samme sted.

Som du kan se i dette korte eksempel, er grupper altid meget nyttige, når man laver et design og gerne vil arbejde med flere objekter som ét element, for at placere dem på en side eller kopiere dem og indsætte dem på en anden side.

Ud over gruppering vil du måske også finde låsefunktionerne nyttige, når du har færdiggjort et design. Højreklik på en gruppe eller et markeret sæt af elementer, og vælg Lås fra den viste genvejsmenu for at låse dem. (Du kan også vælge Objekt > Lås). Låsning sikrer, at du ikke kommer til at flytte eller slette færdige elementer på en side, fordi de ikke længere kan markeres. Hvis du senere har brug for at opdatere de låste elementer, skal du vælge Objekt > Lås alt på siden op.

Når du har indsat blomsterdesignet nederst på siden Besøg, er sidens indhold delvist færdig. I næste afsnit skal vi fortsætte med at redigere siden Besøg for at tilføje en interaktiv kortgrænseflade, som kan hjælpe kunderne med at finde den nærmeste cafe.

Integrer multimedieindhold for at tilføje animation

Brug af panelet Placer

Panelet Mellemrum giver dig mulighed for at udnytte CSS-egenskaberne for indre margen og ydre margen. Den indre margen holder et område ryddet omkring indholdet (inden for grænsen) af et element. Den indre margen er påvirket af elementets baggrundsfarve.

Den øverste, højre, nederste og venstre indre margen kan ændres uafhængigt ved brug af forskellige egenskaber. Du kan også regulere alle egenskaber for indre margen ved at vælge at redigere dem ensartet.

1. Brug Adobe Muse til at vælge Vindue > Mellemrum for at få vist panelet Mellemrum.

2. Angiv værdier for egenskaber for indre margen for Venstre, Højre, Top og Bund. Hvis du vil indtaste forskellige værdier, skal du fjerne markeringen af -knappen.

3. Du kan også vælge at angive vandrette og lodrette margenegenskaber.

Skaler og roter objekter med panelet Transformer

Adobe Muse giver mulighed for at anvende 2D-transformation på objekter. Du kan flytte, skalere og rotere objekter på X- og Y-akserne.

Funktionen for 100 % bredde, som du kan slå til og fra på panelet Transformer, gør det muligt at indstille bredden til 100 %. Du kan også indstille skalerbare objekter til at spænde over hele bredden af browseren og passe til din computer.

For at anvende transformationer på et markeret objekt skal du gøre følgende:

1. I Adobe Muse skal du vælge Vindue > Transformer.

2. Med det valgte objekt kan du anvende en af følgende transformationer:
   • Position: Indtast X- og Y-værdier til objektet på en ønsket placering på websitet.
   • Skalering: Indtast Bredde og Højde for objektet. Du kan også vælge at skalere objektet med ensartet bredde og højde ved at klikke på -knappen.
   • Rotation (): Indtast rotationsvinklen for objektet.
   • 100 % bredde (): Du kan angive objektet til 100 % bredde og gøre det muligt at skalere på tværs og tilpasse bredde af browseren.