Adobe Musen objekteihin sisältyvät joko sisäisesti luodut tai ulkoisista lähteistä tuodut suunnitteluelementit. Verkkosivulle voidaan lisätä kuvia, tekstiä, kuvakehyksiä ja muuta sisältöä, ja niitä voidaan muokata Adobe Musen erilaisilla työkaluilla.

Eräs yleisimmistä työnkuluista on painikkeen luominen Adobe Photoshopissa ja sen tuonti Adobe Museen. Adobe Muse tunnistaa osaltaan Photoshopissa luodut tasot ja tasovedokset. Adobe Musessa voit määrittää nämä tasot painikkeen tiloiksi omassa verkkosivustossasi.

Voit lisätä verkkosivun piirtoalueelle lisättyihin objekteihin muunnoksia sivuston suunnittelutarpeiden mukaisesti. Voit myös määrittää sisäkkäisten elementtien välistykset eristämällä objektin ja lisäämällä siihen sopivat täyte- ja sarakevälit.

Kuvakehysten lisääminen Adobe Muse -projekteihin

Voit sijoittaa kuvakehyksiä suoraan Adobe Muse -projekteihin Kuvakehys-työkalulla. Napsauta Työkalut-paneelissa Kuvakehys-työkalua ja napsauta sitten haluamaasi kohtaa projektissasi.

Yksittäisen kuvan sijoittaminen sivulle

Musen työtila toimii samalla tavoin kuin Illustratorissa ja InDesignissa, joissa sijoitettava kuva ladataan ensin ja sen jälkeen napsautetaan sivua, jolla sen halutaan näkyvän. Jos haluat lisätä kuvatiedoston sijoittamalla sen suoraan sivulle, toimi seuraavasti:

1. Valitse Tiedosto > Sijoita tai käytä pikanäppäintä komento-D (Mac) tai Ctrl-D (Windows), jotta Tuo-valintaikkuna avautuu.
2. Valitse selaamalla esimerkkitiedostojen kansiossa oleva tiedosto made-with-muse.png. Valitse se ja sulje Tuo-valintaikkuna valitsemalla Avaa.

Sijoita kuva napsauttamalla kerran lähellä sivun alareunaa. Tässä tapauksessa haluat sijoittaa kuvan täydessä koossa, joten napsauta vain kerran. Jos kuitenkin haluaisit muuttaa sijoitetun kuvan kokoa, voisit skaalata kuvan tiettyyn kokoon napsauttamalla ja vetämällä. 

Vedä kuvaa valintatyökalulla kohti alatunnisteen ruudukon suorakulmion pystysuuntaista keskikohtaa. Punaiset apuviivat ja turkoosit mittaruudut näkyvät hetken ajan, jotta tasaaminen keskelle on helpompaa.

Kun nämä muutokset on tehty, alatunnistealue on lähes valmis.

Musen suorittama kuvien optimointi sivuston julkaisun tai viennin yhteydessä

Voit sijoittaa Adobe Musessa myös painokelpoisia kuvia, jotka muunnetaan verkkoon sopivaan muotoon. Kuvien sovittaminen verkkokäyttöön tarkoittaa kuitenkin usein, että kuvaa pakataan ja sen laatu heikkenee. Jos Museen asetetaan kuvia, joita ei ole valmisteltu verkossa käytettäväksi, ne pakkautuvat automaattisesti. Jos julkaiset tai viet sivuston etkä ole tyytyväinen automaattisiin tuloksiin, voit kokeilla luoda ja optimoida omat verkkoon sopivat kuvasi manuaalisesti Photoshopissa tai Adobe Fireworks® -ohjelmistossa. Poista alkuperäiset kuvat ja sijoita uudet optimoidut kuvat niiden tilalle, ja julkaise tai vie sivusto sitten uudelleen.

Huomaa, että muut Musessa tekemäsi muutokset, kuten rajaus, koon muutto tai viisteiden, varjojen tai hehkujen lisääminen saavat Musen luomaan kuvan uudelleen ja pakkaamaan sen automaattisesti. Jos haluat säätää optimointiprosessia tarkemmin, voit lisätä tehosteita kuvaan Photoshopissa tai Fireworksissa, optimoida tiedoston kuvanmuokkausohjelmistossa ja asettaa sitten kuvan Museen, jolloin saat säädettyä pakkauksen tasoa itse. Voit asettaa Photoshopin PSD-tiedostoja suoraan Museen sen sijaan, että veisit PNG-, JPG- tai GIF-tiedostoja, mutta myös tällöin Muse luo uuden kuvatiedoston automaattisilla pakkausalgoritmeillaan.

Kuvien optimointi verkossa näyttämistä varten

Jos linkitetty tiedosto on sijoitettu erittäin korkeatarkkuuksisena versiona ja skaalattu pienemmäksi sivua varten, seurauksena voi olla vientivirheitä ja viennin hitautta. Tätä työnkulkua ei suositella. Ongelmat esiintyvät selvemmin, jos sivulle asetetaan useita täyskokoisia (yli 2 000 kuvapisteen) kuvia, jotka skaalataan asetteluun sopiviksi.

Jos sijoitat erittäin suuren kuvatiedoston, Muse rajoittaa automaattisesti sen kokoa ja skaalaa tiedoston 2 048 kuvapisteen levyiseksi. Jos viet hiiren osoittimen kohteen nimen päälle Kohteet-paneelissa, työkaluvihjeessä näkyy sijoitetun kuvan alkuperäinen koko verrattuna kooltaan muutetun (enimmäiskokoon skaalatun) kohteen kokoon.

Paras käytäntö on käyttää kuvanmuokkausohjelmaa verkkoon tarkoitettujen grafiikkatiedostojen koon muuttamiseen ja optimointiin ennen niiden sijoittamista sivuille. Mitoiltaan erittäin suurten kuvatiedostojen sijoittaminen voi tehdä .muse-tiedostosta huomattavasti tarvittavaa suuremman. Tällöin .muse-tiedostossa joudutaan käsittelemään kuvapistetieto, jota ei tarvita kuvan näyttämiseen verkossa. Seurauksena voi olla pitempi käsittelyaika vietäessä ja julkaistaessa sivustoja. Joissakin tapauksissa erittäin suuri .muse-tiedosto voi aiheuttaa aikakatkaisun, kun kaikkien sen tiedostojen kokoa yritetään muuttaa ja optimoida vienti- tai julkaisuprosessin aikana. Seurauksena voi olla aikakatkaisuvirheitä.

Ongelman ratkaisemiseksi voit napsauttaa kohteiden nimiä hiiren kakkospainikkeella ja valita Optimoi kohteen koko, jolloin skaalatun kuvan näyttämisen kannalta tarpeeton tieto poistetaan.

Jos skaalaat optimoidun kuvan suuremmaksi sivulla, näyttöön saattaa tulla kohteen pikselimäärän suurentamista koskeva virhe. Voit ratkaista tämän ongelman valitsemalla Tuo suurempi koko, jolloin kuvadataa noudetaan lisää, jotta skaalattu kuva voidaan näyttää riittävällä tarkkuudella.

Paikkamerkkimuotojen piirtäminen

Paikkamerkkimuoto voi olla soikio, suorakulmio tai monikulmio, jonka voit täyttää kuvalla, tekstillä tai värillä.

Photoshop-tiedoston asettaminen päälle siirryttäväksi painikkeeksi

Jaa-painike näyttää oikeat tilat. Seuraavassa osiossa opit kohdistamaan Jaa-painikkeen sivuston navigointiosion oikealla puolella näkyvän pisaran kuvan kanssa.

Seuraavassa osassa opit määrittämään sivupohjan ylä- ja alatunnistealueet.

Objektien kiinnittäminen selainikkunaan

Kun sijoitat kuvan tai lisäät grafiikkaa sivulle muulla tavoin, määrität sijainnin valintatyökalulla ja nuolinäppäimillä. Kun liikutat kuvaa, se liikkuu suhteessa sivun muihin elementteihin (kuviin, tekstiin ja mediaan). Voit liikuttaa myös muita elementtejä, mutta koko sivu toimii esitteen tai julisteen tavoin. Kaikki sivun kohteet sijaitsevat samalla tasolla. Jos sivu on pitkä (sisältää runsaasti sisältöä pystysuunnassa) ja vierailija vierittää sitä alaspäin, hän ei enää näe sivun yläreunassa olevia kuvia.

Olet todennäköisesti nähnyt kiinnitettyjä objekteja eri verkkosivuilla. Ne näkyvät aina samassa paikassa. Ne näyttävät kelluvan sivun muun sisällön päällä.

Kiinnitystyökalulla estät kohteiden siirtymisen muun sivun mukana. Sen sijaan, että asettaisit sen suhteessa muihin sivun elementteihin, määrität sille tietyn paikan selaimessa. Kiinnitetyt kuvat eivät liiku. Ne näkyvät aina samassa paikassa (esimerkiksi oikeassa yläkulmassa tai lähellä alareunaa) riippumatta muista vieritettävistä sivuelementeistä. Jos vierailija muuttaa selainikkunansa kokoa, kiinnitetyt kuvat näkyvät aina kiinnitetyssä sijainnissaan suhteessa selainikkunaan.

Kun kohde kiinnitetään, se ikään kuin irrotetaan sivun asettelusta ja liitetään selaimeen, vähän samaan tapaan kuin muistilappu kiinnitetään taululle. Kiinnitetty elementti liikkuu ja säilyttää paikkansa suhteessa selainikkunaan, jos vierailija muuttaa selainikkunan kokoa, mutta se ei liiku, jos vierailija vierittää sivun sisältöä vaaka- tai pystysuunnassa.

Kiinnitystyökalua käytetään seuraavasti:

1. Kun A-sivupohja on avoinna Muoto-näkymässä, valitse Facebook-kuvake valintatyökalulla.
2. Napsauta hallintapaneelin Kiinnitys-valinnassa oikean yläkulman kiinnityssijaintia. Tämä asetus kiinnittää elementin sen oikean yläkulman nykyisen sijainnin perusteella.

3. Kiinnitä toistamalla vaiheet 1 ja 2 Google+- ja Twitter-kuvakepainikkeet oikean yläkulman sijaintiinsa siten, että ne eivät liiku selainikkunassa, kun muuta sisältöä vieritetään.
4. Tuo sivun miniatyyrit näkyviin valitsemalla Suunnittele. Kaikilla sivuilla näkyy nyt kolme sosiaalisen median kuvaketta, koska lisäsit ne sivupohjaan.
5. Avaa food-sivu Muoto-näkymässä kaksoisnapsauttamalla sitä Suunnittele-näkymässä. Tai jos se on jo avoinna, aktivoi se napsauttamalla food-sivun välilehteä. Avaa sivu selaimessa valitsemalla Tiedosto > Esikatsele sivu selaimessa.
6. Siirry pitkällä sivulla jälkiruokalistaan napsauttamalla Dessert-valikkokohdetta. Huomaa, että vaikka muita sivuelementtejä vieritetään, yhteisöpalvelujen painikkeet näkyvät samassa paikassa sivun oikeassa reunassa, koska ne on kiinnitetty.

Siirry osioon Ensimmäisen verkkosivustosi luominen Musella, luku 6, jossa opit ryhmittämään objektijoukkoja siten, että ne käyttäytyvät yhtenä elementtinä. Viimeistelet myös Visit-sivun lisäämällä upotetun Google-kartan, josta vierailijat näkevät Katie's Cafen sijainnin. Kun olet viimeistellyt sivuston, huomaat, kuinka helposti sen pystyy lataamaan hosting-palvelimeen (Business Catalystiin) ja julkaisemaan verkossa. Voit kätevästi esitellä keskeneräistä työtäsi asiakkaille ja työtovereille.

Ensimmäisen verkkosivustosi luominen Musella -ohjeen luvussa 4 opit lisäämään ankkurinimiöitä ja linkittämään ne manuaalisen Vaakasuuntainen valikko -widgetin valikkokohteisiin. Opit myös estämään elementtien vierittämisen kiinnittämällä ne sivulle. Lisäksi opit lisäämään linkkejä tiedostoihin, jotta vierailijat voivat ladata niitä.

Lisäksi perehdyt objektien ryhmittämiseen ja ryhmien käyttöön. Tällä tavoin voit lisätä sivuille erilaisia sisältöjoukkoja. Jatkat myös upotetun HTML-koodin käyttöä. Tällä kertaa lisäät vuorovaikutteisen Google-kartan Visit-sivulle. Lopuksi näet, kuinka luot viimeistellyn vaikutelman lisäämällä suosikkikuvakkeen ja julkaisemalla kokeilusivuston Musen hosting-palvelimiin.

Objektien ryhmittäminen ja ryhmien liittäminen yhtenä yksikkönä

Kuten InDesignissa ja muissa suunnitteluohjelmissa, voit yhdistää useita objekteja ryhmäksi, minkä jälkeen niitä kohdellaan yhtenä yksikkönä. Tässä osiossa luot useista elementeistä (sijoitetuista kuvista ja tekstikehyksistä) koostuvan asettelun ja opit sitten, kuinka voit ryhmittää niitä. Tällöin niiden sijoittaminen tai kopiointi yhtenä yksikkönä on helppoa. Noudata seuraavia ohjeita:

1. Avaa home-sivu Muoto-näkymässä kaksoisnapsauttamalla sitä Suunnittele-näkymässä.
2. Valitse Tiedosto > Sijoita. Valitse esimerkkitiedostojen kansiosta tiedosto panel-open-bottom.png. Sulje Tuo-valintaikkuna valitsemalla Avaa, ja sijoita sitten grafiikka täysikokoisena napsauttamalla kerran etusivun alareunaa (Valolaatikko-koostewidgetin alapuolella ja alatunnisteen yläpuolella).

PNG-tiedoston peittävyys on pienempi, joten toistuva taustakuvio näkyy osittain läpinäkyvän kukkagrafiikan läpi.

3. Valitse uudelleen Tiedosto > Sijoita. Valitse tällä kertaa tiedosto spoon-map.png. Sijoita se valitsemalla Avaa ja napsauttamalla sitten kerran ylhäällä keskellä olevaa terälehteä.
4. Kun lusikkakuva on valittuna, kopioi se pitämällä optionäppäintä (Mac) tai Alt-näppäintä (Windows) painettuna ja vetämällä se sen terälehden kohdalle, joka on oikealla puolella lähimpänä keskustaa. Toista tämä vaihe uudelleen: kopioi keskimmäinen lusikkakuva ja vedä kopio vasemmalla olevan terälehden kohdalle. Määritä valintatyökalulla kolmen lusikan paikka kuten alla olevassa kuvassa.

5. Vedä tekstityökalulla tekstikehys keskimmäiseen terälehteen ja kirjoita seuraavat tiedot:

Katie's Cafe

Noe Valley

123 Elizabeth Street

MON–FRI 6AM–10PM

SAT–SUN 7AM–10PM

6. Määritä tekstille seuraavat muotoiluasetukset Teksti-paneelissa:
   • Kirjasin: Droid Serif (tai mikä tahansa pääteviivallinen kirjasin)
   • Kirjasinkoko: 14
   • Kirjasinväri: #222222 (osassa 5 annoit tälle värille nimeksi katieblack)
   • Kirjasimen tasaus: Keskitetty
   • Rivivälistys: 120 %

7. Valitse sitten viimeiset kaksi riviä (jotka alkavat viikonpäivillä) ja määritä kirjasinväriksi punainen (#A6342A).
8. Valitse tekstikehys valintatyökalulla. Kopioi tekstikehys pitämällä optionäppäintä (Mac) tai Alt-näppäintä (Windows) painettuna ja vetämällä se oikealla puolella lähimpänä olevan terälehden kohdalle lusikkakuvan yläpuolelle. Toista tämä vaihe uudelleen: kopioi keskimmäinen tekstikehys ja vedä kopio vasemmalla olevan terälehden kohdalle. Sijoita valintatyökalulla kolme tekstikehystä siten, että ne on kohdistettu kolmen lusikan yläpuolelle kuvan tavoin.

9. Vaihda tekstityökaluun. Valitse vasemman osoitteen teksti ja kirjoita seuraavat tiedot:

Katie's Cafe

Laurel Heights

800 Spruce Street

MON–FRI 5AM–12AM

SAT–SUN 9AM–1AM

10. Valitse tekstityökalulla oikeanpuoleisen osoitteen teksti ja kirjoita seuraavat tiedot:

Katie's Cafe

Cole Valley

301 Carmel Street

MON–FRI 7AM–10PM

SAT–SUN 9AM–10PM

Nyt, kun suunnittelu on valmis, valitset elementit ja ryhmität ne.

11. Napsauta ja vedä valintatyökalulla koko kukkagrafiikan yli. Varmista, että valitset sijoitetun kukkakuvan, kolme lusikkakuvaa sekä kolme tekstikehystä. Napsauta hiiren kakkospainiketta ja valitse pikavalikosta Ryhmä. Halutessasi voit myös valita Objekti > Ryhmä.

Huomaa, että kun olet ryhmittänyt objektien joukon, hallintapaneelin vasemmassa yläkulmassa näkyvässä valintaosoittimessa näkyy sana Ryhmä.

12. Kopioi valittu ryhmä. Palaa Suunnittele-näkymään napsauttamalla Suunnittele-painiketta, ja avaa sitten Visit-sivu Muoto-näkymään kaksoisnapsauttamalla sen miniatyyria. Sijoita koko elementtiryhmä samaan paikkaan valitsemalla Muokkaa > Liitä sijaintiin.

Kuten saatat havaita tästä lyhyestä esimerkistä, ryhmät ovat hyödyllisiä, kun olet saanut suunnittelun valmiiksi ja haluat käyttää sitä yhtenä elementtinä: muuttaa sen paikkaa sivulla tai liittää sen toiselle sivulle.

Ryhmityksen ohella saatat hyötyä myös lukitustoiminnoista, kun olet saanut suunnittelun valmiiksi. Napsauta hiiren kakkospainikkeella ryhmää tai valittua elementtijoukkoa ja lukitse se valitsemalla pikavalikosta Lukitse. (Vaihtoehtoisesti voit valita Objekti > Lukitus). Lukitus varmistaa, ettet vahingossa liikuta tai poista sivun valmiita elementtejä, koska tällöin ne eivät enää ole valittavissa. Jos sinun on myöhemmin muokattava lukittuja elementtejä, valitse Objekti > Poista kaikkien lukitus sivulla.

Kun olet liittänyt kukkagrafiikan Visit-sivuston alareunaan, sivun sisältö on osittain valmis. Seuraavassa osiossa jatkat Visit-sivun muokkaamista lisäämällä vuorovaikutteisen karttaliittymän, jonka avulla vierailijat löytävät lähimmän kahvilan.

Animaation lisääminen upottamalla multimediasisältöä

Tilapaneelin käyttäminen

Välit-paneelissa voit hyödyntää CSS:n täyte (padding)- ja palstaväli (gutter) -ominaisuuksia. Täyte määrittää tyhjän alueen elementin sisällön ympärillä (reunusten sisäpuolella). Elementin taustaväri vaikuttaa täytteeseen.

Täyte voidaan määrittää, ylös, oikealle, alas ja vasemmalle erillisillä arvoilla. Voit myös yhtenäistää kaikki täytearvot ja muokata niitä samanaikaisesti.

1. Avaa Välit-paneeli valitsemalla Adobe Musessa Ikkuna > Välit.

2. Määritä täytearvot vasemmalle, oikealle, ylös ja alas. Jos haluat syöttää eri arvot, poista valinta -painikkeesta.

3. Voit halutessasi määrittää myös vaaka- ja pystysuuntaisen sarakevälin.

Objektien skaalaaminen ja kiertäminen Muunnos-paneelissa

Adobe Musessa voit soveltaa objekteihin 2D-muunnoksia. Voit sijoittaa, skaalata ja pyörittää objekteja X- ja Y-akselilla.

Muunnos-paneelin 100 % leveys -vaihtopainikkeella voit määrittää objekteille 100 % leveyden. Voit myös määrittää skaalautuvat objektit ulottumaan selaimen koko leveydelle ja sovittaa ne tietokoneen näyttöön.

Sovella muunnoksia valittuun objektiin seuraavasti:

1. Valitse Adobe Musessa Ikkuna > Muunnos.

2. Kun objekti on valittuna, voit käyttää mitä tahansa seuraavista muunnoksista:
   • Sijainti: Sijoita objekti haluamaasi paikkaan sivulla X- ja Y-arvojen avulla.
   • Skaalaus: Syötä objektin leveys- ja korkeusarvo. Voit myös skaalata objektin leveyttä ja korkeutta toisiinsa suhteutettuina napsauttamalla -painiketta.
   • Pyöritys (: syötä objektin pyörityskulma.
   • 100 % leveys (): voit määrittää objektin leveydeksi 100 %, jotta objekti skaalautuu ja se mukautuu selaimen koko leveyteen.