Werken met objecten in Adobe Muse

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.

Afbeeldingskaders plaatsen in Adobe Muse-projecten

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.

Eén afbeelding op de pagina plaatsen

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:

1. Kies Bestand > Plaatsen of gebruik de sneltoets Command-D (Mac) of Control-D (Windows) om het dialoogvenster Importeren te openen.
2. 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.

Nadat u deze wijzigingen hebt aangebracht, is het voettekstgedeelte bijna voltooid.

Hoe worden in Muse afbeeldingen geoptimaliseerd bij het publiceren of exporteren van een site?

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.

Afbeeldingen optimaliseren voor weergave op het web

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.

Vormen voor een plaatsaanduiding tekenen

Een vorm voor een plaatsaanduiding kan een ovaal, rechthoek of veelhoek zijn die u met een afbeelding, tekst of een kleur kunt vullen.

Een Photoshop-bestand plaatsen als rolloverknop

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.

In het volgende gedeelte leert u de kop- en voettekstgebieden van de stramienpagina definiëren.

Objecten vastzetten in het browservenster

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.

Ga als volgt te werk om de tool Vastzetten te gebruiken:

1. Selecteer, terwijl de pagina A-stramien is geopend in de ontwerpweergave, het Facebook-pictogram met de tool Selecteren.
2. 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.

3. 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.
4. 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.
5. 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.
6. 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.

Objecten groeperen en groepen plakken als een eenheid

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:

1. Dubbelklik in de overzichtsweergave op de miniatuur van de startpagina om deze in de ontwerpweergave te openen.
2. 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.

3. 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.
4. 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.

5. Maak met de tool Tekst een tekstkader in het middelste bloemblaadje en typ de volgende tekst:

Katie's Cafe

Noe Valley

123 Elizabeth Street

MON–FRI 6AM–10PM

SAT–SUN 7AM–10PM

6. Pas in het deelvenster Tekst de volgende instellingen toe om de tekst op te maken:
   • Lettertype: Droid Serif (of een willekeurig ander serif-lettertype)
   • Lettergrootte: 14
   • Tekstkleur: #222222& nbsp; (in deel 5 hebt u de naam van deze kleur gewijzigd in katieblack)
   • Tekstuitlijning: Centreren
   • Regelafstand: 120%

7. Selecteer vervolgens alleen de laatste twee regels (die beginnen met de dagen van de week) en stel de tekstkleur in op rood (#A6342A).
8. 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.

9. Selecteer nu de tool Tekst. Selecteer de tekst in het linkeradres en wijzig het adres in:

Katie's Cafe

Laurel Heights

800 Spruce Street

MON–FRI 5AM–12AM

SAT–SUN 9AM–1AM

10. Selecteer met de tool Tekst de tekst in het rechteradres en wijzig het adres in:

Katie's Cafe

Cole Valley

301 Carmel Street

MON–FRI 7AM–10PM

SAT–SUN 9AM–10PM

Nu het ontwerp gereed is, selecteert u de elementen en groepeert u deze.

11. 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.

12. 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é.

Veelzijdige media-inhoud insluiten om animatie toe te voegen

Het deelvenster Tussenruimte gebruiken

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.

1. Selecteer in Adobe Muse Venster > Tussenruimte om het deelvenster Tussenruimte te openen.

2. 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.

3. U kunt desgewenst ook eigenschappen voor de horizontale en verticale tussenruimte opgeven.

Objecten schalen en roteren met het deelvenster Transformeren

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.

U kunt als volgt transformaties toepassen op een geselecteerd object:

1. Selecteer in Adobe Muse Venster > Transformeren.

2. Selecteer het object en pas een of meer van de volgende transformaties toe:
   • Positie: voer X- en Y-waarden in om het object op een gewenste locatie op de webpagina te plaatsen.
   • 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.
   • Rotatie (): voer de rotatiehoek voor het object in.
   • 100% breedte (): u kunt het object instellen op een breedte van 100% en het zo schalen dat het de breedte van de browser beslaat.