Leer verschillende objecten ordenen, beheren en transformeren in Adobe Muse. Lees verder hoe u afbeeldingen voor Adobe Muse kunt optimaliseren.
Adobe Muse voegt geen nieuwe functies meer toe en stopt op donderdag 26 maart 2020 met de ondersteuning. Zie de pagina Einde van levensduur voor Adobe Muse voor meer informatie en assistentie.
Tot de objecten in Adobe Muse behoren ontwerpelementen die zijn gemaakt in of geïmporteerd uit externe bronnen. Afbeeldingen, tekst, afbeeldingskaders en meer kunnen aan de webpagina worden toegevoegd en met verschillende tools worden gemanipuleerd in Adobe Muse.
Een van de meest gebruikte workflows is het maken en importeren van een knop uit Adobe Photoshop. Met het oog hierop herkent Adobe Muse lagen en laagsamenstellingen die in Photoshop zijn gemaakt. In Adobe Muse kunt u deze lagen instellen als staten van de knop op uw website.
Voor objecten die op het canvas van de webpagina worden geplaatst, kunt u transformaties toevoegen als aanvulling op ontwerpvereisten voor de website. U kunt een object ook isoleren om geschikte opvullings- en tussenruimte-eigenschappen toe te voegen ten behoeve van de ruimte tussen geneste elementen.
U kunt afbeeldingskaders rechtstreeks in uw Adobe Muse-projecten plaatsen door op de tool Afbeeldingskader te klikken. Klik in het deelvenster Tools op de tool Afbeeldingskader en klik vervolgens op de gewenste locatie in het project.
U kunt desgewenst blijven klikken en meerdere afbeeldingskaders in uw project plaatsen. U kunt ook de grootte van afbeeldingskaders wijzigen en deze verplaatsen als dat beter bij uw ontwerp past.
U kunt het kader vullen met kleur of u kunt een afbeelding in het kader plaatsen. Als u een afbeelding wilt plaatsen, sleept u een afbeelding naar het kader. Het formaat van de afbeelding wordt aan het kader aangepast.
De werkruimte van Muse werkt net als die in Illustrator en InDesign: u laadt de geplaatste afbeelding eerst en klikt vervolgens op de pagina waar u de afbeelding wilt weergeven. Ga als volgt te werk als u een afbeeldingsbestand direct op de pagina wilt plaatsen:
Kies Bestand > Plaatsen of gebruik de sneltoets Command-D (Mac) of Control-D (Windows) om het dialoogvenster Importeren te openen.
Blader naar het bestand met de naam made-with-muse.png in de map met voorbeeldbestanden en selecteer dit bestand. Klik op Openen om het bestand te kiezen en sluit het dialoogvenster Importeren.
Klik eenmaal aan de onderkant van de pagina om de afbeelding te plaatsen. In dit geval wilt u de afbeelding op volledige grootte plaatsen, dus klikt u slechts één keer. Als u de geplaatste afbeelding echter wilt vergroten of verkleinen, kunt u op de afbeelding klikken en deze slepen om de afbeelding naar een specifieke grootte te schalen.
Sleep de afbeelding met de tool Selecteren naar het verticale middelpunt van de herhaalde rechthoek voor voettekst. Er worden kort rode hulplijnen en blauwgroene meetvakken weergegeven om u te helpen de rechthoek te centreren.
De voettekst bestaat uit één rechthoek met een zich herhalende achtergrondafbeelding en een gecentreerde afbeelding die ervoor is geplaatst.
U kunt ook drukklare afbeeldingen in Adobe Muse plaatsen, waar ze in een webvriendelijke indeling worden omgezet. Het maken van webvriendelijke afbeeldingen betekent echter vaak dat de afbeelding gecomprimeerd moet worden en dat de beeldkwaliteit enigszins afneemt. Als u niet-webvriendelijke afbeeldingen in Muse plaatst, worden deze automatisch gecomprimeerd. Als u een site publiceert of exporteert en niet tevreden bent met de geautomatiseerde resultaten, kunt u experimenteren door handmatig webvriendelijke afbeeldingen te maken en te optimaliseren in Adobe Fireworks® of Photoshop. Verwijder de oorspronkelijke afbeeldingen en plaats de nieuwe geoptimaliseerde afbeeldingen op de pagina's. Daarna publiceert of exporteert u uw site opnieuw.
Houd er rekening mee dat andere wijzigingen die u in Muse aanbrengt in een afbeelding, zoals uitsnijden, vergroten, verkleinen of het toevoegen van schuine kanten, schaduwen en gloed, ertoe leiden dat Muse de afbeelding opnieuw maakt en automatisch comprimeert. Als u meer controle over het optimalisatieproces wilt, kunt u effecten aan een afbeelding toevoegen met Photoshop of Fireworks, het bestand optimaliseren in een beeldbewerkingsprogramma en de afbeelding vervolgens in Muse plaatsen om zelf de mate van compressie te bepalen. U kunt PSD-bestanden rechtstreeks uit Photoshop in Muse plaatsen, in plaats van JPG-, PNG- of GIF-bestanden te exporteren, maar ook dan maakt Muse automatisch een nieuw afbeeldingsbestand aan de hand van interne automatische compressiealgoritmen.
Er kunnen exportfouten optreden en het exporteren kan langer duren als een gekoppeld bestand bij een zeer hoge resolutie wordt geplaatst en daarna veel kleiner wordt geschaald op de pagina. Deze workflow wordt niet aanbevolen. Deze problemen nemen alleen maar toe wanneer u meerdere malen afbeeldingen van volledige grootte (meer dan 2.000 pixels) plaatst en deze vervolgens schaalt om ze aan te passen aan een ontwerp.
Als u een zeer groot afbeeldingsbestand plaatst, beperkt Muse automatisch de grootte en wordt de schaal van de afbeeldingsbreedte gewijzigd in 2048. Als u de muisaanwijzer boven de naam van een middel in het deelvenster Middelen houdt, wordt knopinfo weergegeven met de oorspronkelijke grootte van het geplaatste bestand en het nieuwe formaat van de afbeelding (geschaald om in de maximale grootte te passen).
Het wordt aanbevolen om webafbeeldingen voor een site in een programma voor beeldbewerking te vergroten of te verkleinen en te optimaliseren voordat u deze op pagina's plaatst. Het plaatsen van bijzonder grote afbeeldingen kan leiden tot een onnodig groot .muse-bestand. Het .muse-bestand moet dan extra pixelgegevens verwerken die niet nodig zijn om de afbeelding op het web weer te geven. Het exporteren en publiceren van sites duurt dan veel langer. Soms kan er een time-out optreden als het .muse-bestand bijzonder groot is en alle bestanden tijdens het exporteren of publiceren moeten worden vergroot of verkleind en geoptimaliseerd. Er kunnen time-outfouten optreden.
U kunt dit oplossen door met de rechtermuisknop op de namen van de middelen te klikken en Middelformaat optimaliseren te kiezen. De onnodige gegevens die nodig zijn om de geschaalde afbeelding weer te geven, worden dan verwijderd.
Als u een geoptimaliseerde afbeelding schaalt, zodat deze groter wordt weergegeven in een ontwerp, wordt wellicht de fout Geüpsampled plus middel weergegeven. U lost dit probleem door Groter formaat importeren te kiezen om de extra afbeeldingsgegevens op te halen die nodig zijn om de geschaalde afbeelding op acceptabele wijze weer te geven.
Een vorm voor een plaatsaanduiding kan een ovaal, rechthoek of veelhoek zijn die u met een afbeelding, tekst of een kleur kunt vullen.
Als u de eigenschappen voor objectaanpassing wilt instellen, selecteert u de rechthoek of ovaal en klikt u op Object > Aanpassen.
Inhoud proportioneel aanpassen: hiermee past u de grootte van de inhoud aan in overeenstemming met een kader en behoudt u de verhoudingen van de inhoud. De afmetingen van het kader worden niet gewijzigd. Als de inhoud en het kader verschillende afmetingen hebben, ontstaat op deze manier wat lege ruimte.
Kader proportioneel aanpassen: hiermee wijzigt u de inhoud, zodat het hele kader wordt gevuld terwijl de verhoudingen van de inhoud behouden blijven. De afmetingen van het kader worden niet gewijzigd. Als de inhoud en het kader verschillende verhoudingen hebben, wordt bepaalde inhoud bijgesneden door het selectiekader van het kader.
Kies Bestand > Photoshop-knop plaatsen. Zoek het PSD-bestand in het dialoogvenster Photoshop importeren dat wordt weergegeven. Klik op Selecteren (Mac) of Openen (Windows) om het bestand te kiezen.
Het dialoogvenster Importopties Photoshop wordt weergegeven. Neem even de tijd om te bekijken hoe de instellingen worden toegepast. Gebruik de menu's om op te geven welke laag in het Photoshop-bestand wordt gebruikt voor de Normale staat (de weergave van de knop als een pagina wordt geladen), de Rolloverstaat (de weergave van de knop als de bezoeker de muis erboven houdt) en de Staat muisknop ingedrukt (de weergave van de knop wanneer bezoekers erop klikken). De drie staatmenu's geven de namen van de Photoshop-lagen weer en de miniatuurafbeeldingen geven visueel weer hoe elke geselecteerde laag wordt weergegeven.
In dit voorbeeld zijn de Photoshop-lagen al op de goede manier geordend om de knopstaten weer te geven. Het is niet nodig om de menu-instellingen te wijzigen. Klik op OK om de staten te accepteren zoals ze standaard worden gerangschikt.
In het dialoogvenster Importopties Photoshop kunt u bestaande Photoshop-lagen aan de gewenste knopstaten koppelen.
Klik eenmaal in de rechterbovenhoek van de koptekst van de pagina A-stramien om het Photoshop-bestand in de oorspronkelijke grootte te plaatsen.
Klik op de koppeling Voorvertonen om de op WebKit gebaseerde renderingemulator te gebruiken. Bekijk de weergave van de pagina A-stramien. Wanneer u de pagina opent, ziet u eerst de staat Normaal van de knop. Als u de cursor boven de knop houdt, verandert de weergave enigszins (de bruine druppelkleur wordt lichter). En als u op de knop klikt, wordt de witte tekst lichtbruin zolang u de muisknop ingedrukt houdt.
De knop Share geeft de staten naar behoren weer. In de volgende sectie leert u hoe u de knop Share kunt uitlijnen met de druppelafbeelding rechts in de sitenavigatie.
Wanneer u een afbeelding plaatst of andere methoden gebruikt om illustraties aan een pagina toe te voegen, gebruikt u de tool Selecteren en de pijltoetsen om de positie te wijzigen. Terwijl u de afbeelding verplaatst, beweegt deze ten opzichte van de andere elementen (afbeeldingen, tekst en media) die ook op de pagina aanwezig zijn. U hebt de mogelijkheid om de andere elementen eveneens te verplaatsen, maar de hele pagina gedraagt zich als een brochure of een poster. De items op de pagina bestaan op één vlak. Als een pagina lang is (veel verticale inhoud bevat) en de bezoeker naar beneden schuift, ziet hij of zij niet langer de afbeeldingen boven aan de pagina.
Waarschijnlijk hebt u wel eens vastgezette objecten gezien bij het bekijken van websites. Dit zijn de "vaste" items die altijd op dezelfde plek worden weergegeven. Ze lijken boven de rest van de pagina-inhoud te zweven.
Wanneer u de tool Vastzetten gebruikt, verwijdert u in wezen een afbeelding uit de paginastroom. In plaats van de afbeelding te positioneren ten opzichte van de andere pagina-elementen, plaatst u deze op een vaste locatie ten opzichte van de browser. Vastgezette afbeeldingen lijken te "plakken": ze blijven altijd op dezelfde plek (zoals de rechterbovenhoek of ergens onderaan) staan, ongeacht of andere pagina-elementen verschuiven. Als de bezoeker de grootte van het browservenster wijzigt, blijven de vastgezette afbeeldingen altijd op hun vastgezette locatie ten opzichte van het browservenster staan.
U kunt vastzetten beschouwen als een manier om de afbeelding "los te maken" van het ontwerp van de pagina en deze vervolgens aan de browser te koppelen, zoals het vastprikken van een notitie op een kurkbord. Het vastgezette element wordt verplaatst om de vastgezette positie ten opzichte van de browser te behouden als de bezoeker de grootte van het browservenster wijzigt, maar het vastgezette element wordt niet verplaatst als de bezoeker horizontaal of verticaal door de pagina-inhoud schuift.
Selecteer, terwijl de pagina A-stramien is geopend in de ontwerpweergave, het Facebook-pictogram met de tool Selecteren.
Klik op de vastzetpositie rechtsboven in de interface Vastzetten in het regelpaneel. Via deze instelling wordt het element op de huidige locatie in de rechterbovenhoek vastgezet.
Herhaal stap 1 en 2 om de pictogramknoppen voor Google+ en Twitter rechtsboven op het scherm vast te zetten, zodat ze niet worden verplaatst binnen het browservenster als de rest van de pagina opschuift.
Klik op Overzicht om de paginaminiaturen te bekijken. U ziet dat alle pagina's nu de drie pictogrammen voor sociale media bevatten, omdat u deze aan de stramienpagina hebt toegevoegd.
Dubbelklik in de overzichtsweergave op de pagina "food" om deze in de ontwerpweergave te openen. Of klik, als deze al is geopend, op het tabblad van de pagina "food" om de pagina actief te maken. Kies Bestand > Voorvertoning van pagina weergeven in browser om de pagina in een browser weer te geven.
Klik op de menuoptie Dessert om langs de pagina omlaag naar de sectie voor het menu Dessert te gaan. U ziet dat de overige pagina-elementen verschuiven, terwijl de drie pictogrammen voor de sociale media op hun plaats blijven staan aan de rechterkant van de pagina omdat ze zijn vastgezet.
Ga verder met Uw eerste website maken met Muse, hoofdstuk 6, waar u leert hoe u sets objecten kunt groeperen, zodat deze zich gedragen als één element. U gaat tevens de pagina "visit" voltooien door een ingesloten Google-kaart toe te voegen waarop de locaties van Katie's Cafe worden weergegeven voor bezoekers. En na het voltooien van de site, leert u hoe u deze gemakkelijk kunt uploaden op een server (met behulp van Business Catalyst) om deze online te publiceren, zodat u het werk in uitvoering kunt delen met uw klanten en collega's.
In hoofdstuk 4 van Uw eigen website maken met Muse hebt u geleerd hoe u ankerlabels toevoegt en deze koppelt aan menu-items in de handmatige widget voor een horizontaal menu. U hebt ook geleerd hoe u elementen op de pagina vastzet om te voorkomen dat ze schuiven. En u hebt geleerd hoe u koppelingen naar bestanden toevoegt zodat bezoekers ze kunnen downloaden.
U leert hoe u objecten groepeert en met groepen werkt, zodat u sets met inhoud op pagina's kunt plakken. U werkt ook met meer ingesloten HTML en voegt nu ook een interactieve Google-kaart aan de pagina Visit toe. Tot slot leert u hoe u uw site de finishing touch geeft door een favicon toe te voegen en de proefversie vervolgens te publiceren op de beschikbare hostingservers.
Net zoals in InDesign en andere ontwerpprogramma's kunt u verschillende objecten tot een groep samenvoegen, zodat ze als één geheel worden behandeld. In deze sectie maakt u een ontwerp dat uit verschillende elementen (geplaatste afbeeldingen en tekstkaders) is samengesteld en leert u vervolgens hoe u ze groepeert om ze gemakkelijk als één geheel te plaatsen of te kopiëren. Voer de volgende stappen uit:
Dubbelklik in de overzichtsweergave op de miniatuur van de startpagina om deze in de ontwerpweergave te openen.
Kies Bestand > Plaatsen. Selecteer in de map met voorbeeldbestanden het bestand panel-open-bottom.png. Klik op Openen om het dialoogvenster Importeren te sluiten en klik vervolgens onder aan de startpagina (onder de lichtbakcompositiewidget en boven de voettekst) om de afbeelding op volledige grootte te plaatsen.
Het PNG-bestand is ingesteld op een lagere dekking, zodat de achtergrondafbeelding door het semitransparante bloemontwerp heen te zien is.
Kies opnieuw Bestand > Plaatsen. Selecteer nu de afbeelding met de naam spoon-map.png. Klik op Openen en klik vervolgens één keer op het bovenste bloemblaadje in het midden om de afbeelding te plaatsen.
Houd Option (Mac) of Alt (Windows) ingedrukt terwijl de afbeelding van de lepel is geselecteerd om de afbeelding te dupliceren en sleep de afbeelding naar het bloemblaadje direct rechts van het midden. Herhaal deze handeling om de middelste afbeelding van de lepel te dupliceren en sleep de kopie naar het bloemblaadje links van het midden. Gebruik de tool Selecteren om de drie lepels te plaatsen, zoals in de volgende afbeelding.
Selecteer vervolgens alleen de laatste twee regels (die beginnen met de dagen van de week) en stel de tekstkleur in op rood (#A6342A).
Gebruik de tool Selecteren om het tekstkader te selecteren. Houd Option (Mac) of Alt (Windows) ingedrukt om het tekstkader te dupliceren en sleep het kader naar het bloemblaadje rechts, boven de afbeelding van de lepel. Herhaal deze handeling om het middelste tekstkader te dupliceren en sleep de kopie naar het bloemblaadje links. Gebruik de tool Selecteren om de drie tekstkaders op de juiste plaats te zetten, zodat ze zijn uitgelijnd boven de drie lepels, zoals in de volgende afbeelding.
Wijzig de positie van de drie adressen om ze boven de drie lepels in de bovenste drie bloemblaadjes van het ontwerp weer te geven.
Gebruik de tool Selecteren om het volledige bloemontwerp te selecteren en te slepen. Let er hierbij op dat u zowel de afbeelding van de bloem, de drie afbeeldingen van de lepel als de drie tekstkaders selecteert. Klik met de rechtermuisknop en kies Groeperen in het menu dat wordt weergegeven. U kunt ook Object > Groeperen kiezen.
Na het groeperen van de reeks objecten wordt in de selectieweergave in de linkerbovenhoek van het regelpaneel het woord Groeperen weergegeven.
Kopieer de geselecteerde groep. Klik op Overzicht om terug te keren naar de overzichtsweergave en dubbelklik vervolgens op de miniatuur van de pagina Visit om de pagina te openen in de ontwerpweergave. Kies Bewerken > Op plaats plakken om de hele groep elementen op dezelfde locatie te plaatsen.
Zoals u in dit korte voorbeeld kunt zien, zijn groepen erg handig wanneer u een ontwerp af hebt en u met het ontwerp als één element wilt werken om het element op een pagina te verplaatsen of om het element te kopiëren en het op een andere pagina te plakken.
Naast groeperen kunt u ook de vergrendelfuncties gebruiken als u een ontwerp eenmaal hebt voltooid. Klik met de rechtermuisknop op een groep of een geselecteerde reeks elementen en kies Vergrendelen in het contextmenu dat wordt weergegeven. (U kunt ook Object > Vergrendelen kiezen.) Door objecten te vergrendelen, voorkomt u dat u per ongeluk voltooide elementen op een pagina verplaatst of verwijdert, omdat ze niet meer kunnen worden geselecteerd. Als u de vergrendelde elementen later moet bijwerken, kiest u Object > Alles op pagina ontgrendelen.
Na het plakken van het bloemontwerp onder aan de pagina Visit, is de pagina-inhoud gedeeltelijk voltooid. In de volgende sectie gaat u verder met het bewerken van de pagina Visit en voegt u een interactieve kaart toe om klanten te helpen bij het zoeken naar het dichtstbijzijnde café.
In de overzichtsweergave dubbelklikt u op de miniatuur MasterFlash om deze in de ontwerpweergave te openen voor bewerking. Als u de pagina A-stramien eerder hebt gedupliceerd, staat de statische afbeelding van het logo er nog steeds. Het is handig om de statische afbeelding te gebruiken om de plaatsing voor de animatierechthoek aan te passen, maar vergeet niet om de statische logoafbeelding te verwijderen nadat u het rich-media-element hebt ingesloten.
Kies Bestand > Plaatsen. In het dialoogvenster Importeren navigeert u naar de map Kevins_Koffee_Kart en selecteert u het bestand logo.swf.
Plaats het SWF-bestand in de linkerbovenhoek, in overeenstemming met de locatie van het bestaande logoafbeeldingsbestand.
Als u het nieuwe SWF-venster dat u zojuist hebt geplaatst, eenmaal met het oudere statische logo hebt uitgelijnd, verwijdert u het statische logo door dit te selecteren en op de toets Delete te drukken.
Als u wilt zien hoe de hele site eruitziet met de nieuwe wijzigingen aan de startpagina, kiest u Bestand > Voorvertoning van site weergeven in browser om de weergave van het logo op verschillende pagina's te testen. Zonder de site te publiceren, kunt u op uw computer werken en vervolgens de site in een browser voorvertonen om door de pagina's in de sitenavigatie te klikken. De animatie (SWF-bestand) wordt één keer weergegeven en stopt dan op de startpagina. Als u op andere pagina's klikt, wordt alleen het statische logo weergegeven.
Als u Bestand > Voorvertoning van pagina weergeven in browser kiest, wordt het nieuwe browservenster sneller geladen om de startpagina weer te geven, maar wordt alleen een voorvertoning van de actieve (start)pagina weergegeven. Kies deze optie als u één pagina van de site wilt controleren, in plaats van de hele website.
Met het deelvenster Tussenruimte kunt u gebruikmaken van de CSS-eigenschappen voor opvulling en tussenruimte. De opvulling maakt een gebied om de inhoud (binnen de rand) van een element leeg. De opvulling wordt beïnvloed door de achtergrondkleur van het element.
De opvullingen aan de bovenkant, rechterkant, onderkant en linkerkant kunnen onafhankelijk van elkaar worden gewijzigd met afzonderlijke eigenschappen. U kunt alle opvullingseigenschappen ook dezelfde waarde geven door ze uniform te bewerken.
Geef waarden op voor de opvullingseigenschappen voor links, rechts, boven en onder. Als u andere waarden wilt invoeren, heft u de selectie van de knop op.
In Adobe Muse kunt u 2D-transformatie op objecten toepassen. U kunt objecten plaatsen, schalen en roteren om de X- en Y- as.
Met de schakeloptie 100% breedte in het deelvenster Transformeren kunt u objecten instellen op een breedte van 100%. U kunt bovendien schaalbare objecten de breedte van de browser laten beslaan en op uw computerscherm laten passen.
Schaal: voer waarden in voor de breedte en hoogte van het object. U kunt het object desgewenst ook schalen met een uniforme breedte en hoogte door op de knop te klikken.
100% breedte ( ): u kunt het object instellen op een breedte van 100% en het zo schalen dat het de breedte van de browser beslaat.