Muse en koppelingen

Net als bij InDesign en Lightroom werkt Muse met koppelingen naar een bestand. Ook bij Photoshop is het tegenwoordig trouwens mogelijk gelinkte bestanden te plaatsen.

Het verschil is de benaming. Bij InDesign en Photoshop praten we over een link. In Muse heet het paneel waarin je kunt zien over welke bestanden het gaat "assets" (in de Nederlandse vertaling elementen).

Hieronder zie je een afbeelding van een InDesign paneel naast dat van Muse.

Links InDesign Links paneel, rechts Muse assets/elementen paneel

In beide panelen staat een vraagteken. Dit betekent dat de link naar het bestand weg is en dat je dus alleen een preview van het bestand hebt. Dit is niet erg als je aan het werk bent maar in het eindresultaat zorgt dit voor een slechte kwaliteit weergave waardoor je onscherpe of geblokte afbeeldingen zult krijgen.

Voor mensen die InDesign of Photoshop panelen gewend zijn is een Muse paneel behoorlijk wennen. Alle gereedschappen die je onderin een paneel ziet om bijvoorbeeld (in het links paneel) opnieuw te linken missen bij het Muse paneel. Ook is het submenu rechts bovenin niet aanwezig: wat nu?

Als je op de regel met het vraagteken met de rechtermuisknop klikt zie je een paar opties:

• Opnieuw koppelen: als je hierop klikt ga je naar de finder en de map zoeken waar het bestand nu instaat. Je klikt op het bestand en dit wordt dan gekoppeld.
• Naar gebruikte elementen: je gaat naar de pagina waarop het bestand gebruikt is.
• Koppeling insluiten: het bestand wordt opgeslagen in het muse bestand dat daardoor groter wordt.
• Volledige pad kopiëren: Je kopieert het hele pad waar het bestand te vinden was toen je het in het bestand plaatste. In mijn geval was dat /Users/Maassen/Downloads/AdobeMuseIcon.png

Als een afbeelding geplaatst is in een diapresentatie / slideshow dan kan de melding er net iets anders uitzien zoals hieronder te zien is. Het bestand is dan vaker op een pagina geplaatst (als miniatuur en groter). 

Moet je ieder bestand één voor één opnieuw koppelen als je een hele map verplaatst hebt? gelukkig niet. Als je eenmaal één afbeelding terug gevonden hebt zal Muse de rest opnieuw koppelen en erbij vertellen hoeveel koppelingen dat waren. (zie afbeelding hieronder)

Als een element/asset al goed gelinkt is zijn de hoeveelheid keuzes iets groter. Zo kun je het bestand opnieuw koppelen of het origineel rechtstreeks bewerken.

Andere iconen/waarschuwingen in het elementen / assets paneel:

Als een bestand ingesloten is in het bestand dan krijg je een zwart wit icoontje met een vierkant en driehoekje.

Als het bestand te klein is (te groot op een pagina geplaatst) krijg je een geel driehoekje met uitroepteken.

Het bestand is bewerkt en de koppeling niet meer up-to-date.

De site wordt gemaakt om op HiDPI en  het bestand is groot genoeg daarvoor.

Muse HD kwaliteit

In Muse is het mogelijk om de website in 2 verschillende kwaliteiten/ resoluties te bouwen.
Dit is bedoeld voor hoge kwaliteit beeldschermen zoals de retina maar geeft, bij gewone beeldschermen de mogelijkheid in te zoomen op foto's met behoud van kwaliteit.

1. Hoe te beginnen? 

In het scherm 'nieuwe site' kies je links onderaan voor de resolutie HiDPI (2x).
Je krijgt nu de waarschuwing dat daardoor de laadtijd langer wordt want de foto's worden groter.
Gelukkig kun je een (standaard) knop inbouwen die dat probleem verhelpt. (later meer daarover).

2. Hoe groot plaatsen? 

Op het moment dat je een foto plaatst kun je in het assist / elementen paneel zien of deze geschikt is voor het gebruik van HiDPI. Achter de foto staat dan: 2x. Als je de foto te groot op de pagina plaatst dan verdwijnt deze '2x'. Als je een foto 500 pixels breed op de pagina wilt plaatsen moet je hem opslaan met een breedte van 1000 pixels.

foto met HiDPI geplaatst

foto te groot op de pagina geplaatst

3. Normaal / HiDPI knop

In de widgets bibliotheek bij 'knoppen' zie je een HiDPI button. Deze kun je op de pagina slepen. In principe zal de website op een hoge kwaliteit beeldscherm automatisch de beste kwaliteit laten zien. Met deze knop kun je dat uitzetten waardoor de laadtijd versnelt wordt. Als je op een gewoon beeldscherm aan het kijken bent en je zet de knop aan dan kun je de foto vergroten met behoud van kwaliteit zoals op de afbeeldingen beneden duidelijk te zien is (bijv. bij de snorharen links onder).

 4. Hoe werkt dit?

Als je de website exporteert naar HTML dan zie je wat er gebeurd; de foto wordt op 3 verschillende formaten opgeslagen. De ene groter als de andere. Als je vervolgens ook nog een versie voor de tablet en telefoon maakt waarbij de foto aanpast aan het apparaat dan heb je in de map 4 bestanden staan met verschillende afmetingen. 

presentatie DPS en beelden

Vandaag een presentatie gehouden over DPS en beelden.
Deze is na te kijken via onderstaande link. (begint na 35 seconde)

http://www.livestream.com/glrviewpoint/video?clipId=pla_5f5c9927-2ee5-45f8-be73-08cecf6ece76&utm_source=lslibrary&utm_medium=ui-thumb

Een eerdere presentatie over Muse
http://www.livestream.com/glrviewpoint/video?clipId=pla_65bc40eb-eb46-4e1e-bd89-b279a48178af&utm_source=lslibrary&utm_medium=ui-thumb

HTML embedden in WEB, MUSE

Hoe kun je in je eigen website diensten aanbieden zoals google maps, verkoop van foto's via Oypo of je Blurb boek

A. Tegenwoordig zie je op iedere website wel een google maps kaartje. Hoe kun je deze zelf in Muse inbouwen in je site?

1. Je gaat naar Google maps https://maps.google.com
2. Je typt daar het gewenste adres in

3. Je klikt op het link icoontje 

4. Dan kies je voor paste html to embed in website: selecteer de hele tekst (ctrl/cmd+A)
en kopieer dan de tekst (ctrl/cmd+C) Formaten zijn eventueel te veranderen in via customize and preview embedded map (blauw linkje onderaan).



5. In muse plak je dan de tekst in de gewenste pagina (ctrl/cmd+V)
Dat is alles: je google maps kaartje staat in je website.

B. Datzelfde kun je doen met OYPO. Oypo is een plek waar je je foto's kunt verkopen.
Ook zij hebben een plaats waar de HTML code gegenereerd kan worden. Deze kopieer en plak je weer. Nu heeft je website een OYPO winkel.

http://www.oypo.nl/content.asp?path=oamzcdn1

 C. Blurb boek. Als je via blurb een boek gemaakt hebt kun je dit boek helemaal of een zelf te kiezen aantal pagina's op je website tonen. Ook zij hebben een code generator daarvoor. Ook hier kies je weer voor <> Embed. Op je eigen website kunnen mensen dan direct het boek bestellen bij blurb: COOL.

http://www.blurb.com/my/book/widgets

Lagen opslaan als losse bestanden

Ik heb voor een muse presentatie vandaag wat icoontjes nodig als afbeelding: getllen in een rondje en een menu-icoontje. Ik weet dat deze in fonts > wingdings te vinden zijn.

Ik ga naar photoshop en maak daar een document aan met transparante achtergrond.
Ik kies font > wingdings 2 en stel het goed formaat in. Ik ga tekst namelijk als afbeelding opslaan en als ik daarna nog moet vergroten of verkleinen dan behoud ik geen strakke lijnen meer.

Ik maak voor ieder getal een losse laag aan.

 

Nu kan ik alle lagen automatisch opslaan als aparte bestandjes door te kiezen voor: file > automate > export layers to files.

- Je kiest de plaats waar het heen moet: destination
- En je bepaald hoe de bestanden opgeslagen moeten worden > run




Het resultaat: ik heb nadien de bestanden nog wel even een nieuwe naam gegeven.

i-phone site met muse; het menu maken

http://hildemaassen.businesscatalyst.com/index.html

Vandaag mijn eerste I-phone site gemaakt met Muse. Ook te zien met andere smartphones hoor.
Hij staat op bovenstaande linkje gepubliceerd.

Het probleem van een i-phone site is dat je grote knoppen moet hebben en minder tekst.
Ik heb hem nu heel eenvoudig gehouden.

1. Open een nieuwe i-phone site. Ik maak een aantal pagina's in mijn plan-modus zoals: portret, info en experiment.

2. Open de masterpage in design modus (Dubbel klikken op de master)

3. Maak de ruimte voor de header groter: dat is het 2de blauwe pijltje vanaf boven gezien.

.

3. Plaats in het header-vlak een accordeon panel. (in widget library, slepen naar juiste plaats)

 

4. Dit accordion paneel heeft 3 vensters, ik houdt er 1 over. Bovendien pas ik de breedte aan.

In het titel-gedeelte plaats ik een banner (een plaatje gemaakt in Photoshop met mijn naam en een "menu-verwijzer".

5. In het tekstgedeelte delete ik de tekst en plaats ik een verticaal menu. Deze vind ik in de widget library en sleep ik weer. De menu's die erin komen zijn de pagina's die ik bij stap 1 in het plan gemaakt heb. Ik pas de kleuren aan en haal de stroke (omlijning) overal weg.

 

6. In het accordion panelen submenu zet ik alle 3 de opties aan. Daardoor zal het menu uitklappen als ik op de banjer druk.

7. In de footer zet ik mijn mailadres en telefoonnummer (moet nog even uitzoeken hoe ik ook alweer deze kan laten werken)

8. Nu ga ik naar de afzonderlijke pagina's om daar foto's toe te voegen.

 

Plaatsen van bestanden in Muse

Muse kan JPEG, Gif en PNG bestanden plaatsen. In die gevallen wordt er een link gemaakt naar het originele bestand. Op het moment dat je een PSD bestand plaatst wordt dan maakt muse er een ander samengevoegd bestand van wat zonder link geplaatst wordt; embedded.

Een bestand wordt altijd, ook als je het in muse verkleind bewaard en geüpload in het originele formaat. Daarom is het aan te raden bestanden zelf vooraf de goede formaten mee te geven.


In het "assets" menu kun je problemen zien m.b.t. geplaatste bestanden. De 9 kleurtjes (bovenste 2 icoontjes) geven aan dat het origineel te klein / te groot is.
Het icoontje met vierkantje en driehoekje geeft aan dat een bestand "embed" is.

De bestanden waar geen icoontje bij staat zijn gelinkt. Als de originele afbeelding veranderd wordt krijg je een uitroepteken te zien in het assets paneel. Klik je met de rechtermuisknop op dit uitroepteken dan krijg je de mogelijkheid het bestand te updaten en verdwijnt het uitroepteken.

Plaats je een .PSD bestand dat uit meerdere lagen bestaat dan kun krijg je een keuzescherm tijdens het plaatsen: iedere laag apart kun je nu kiezen (import layer) of het eindresultaat (import composite image).

Als je voor een aantal lagen kiest en daarna op OK dan zie je een klein getal bovenin verschijnen. In dit geval 3. Ik heb dus 3 afbeeldingen die ik één voor één kan gaan plaatsen. De afbeelding die als eerst geplaatst wordt is bovendien klein te zien. Met pijltjes toetsen kun je hierdoor navigeren. Met de escape kun je er één verwijderen. Als je in het venster  "Clip to Layer Content" aangezet hebt dan worden de kaders aangepast aan de inhoud. Als je het origineel bewerkt dan wordt het ook gewijzigd in Muse.

Kleurcodes op het web.

Ik ben wel benieuwd hoe dat eigenlijk zit met die codes voor kleuren die gebruikt worden op het web.

#000 of #000000 (zwart) zijn dezelfde kleur, #FFF of #FFFFF (wit) ook

Ik kom letters tegen en cijfers. Bovendien weet ik dat het een hexadecimaal stelsel is;
het getal 16 hoort daarbij.

2. Uitgaand van de 6 cijfers/letters (bijv. #F0305C)
    De eerste 2 zijn Rood (03), dan 2 voor Groen (05) en dan 2 voor Blauw (5C)
3. Zijn de groepjes van 2 cijfers hetzelfde dan kan het een code met drie cijfers worden.

Welke letters kom ik tegen?
Er zijn 6 letters te weten A, B, C, D, E en F.
Er zijn 10 getallen te weten 0, 1, 2, 3, 4, 5, 6, 7, 8 en 9
Als ik 6 + 10 doe kom ik op 16.
Bij 17 verwacht ik dus een verandering.
Als ik dat uit probeer blijkt dat ook te kloppen.

Menu mogelijkheden in Muse

Het maken van een menu is in Muse gaat behoorlijk automatisch. Als je in je plan de pagina's goed benoemd hebt dan komen ze automatisch in je menu te staan.

Wil je ze, om wat voor reden dan ook, niet in het menu hebben staan of je wil ervoor zorgen dat je er niet op kunt klikken (geen hyperlink dus) dan is dat mogelijk.

Exclude Page From Menu: dan komt de pagina niet in het menu te staan. Dit kan bijvoorbeeld gebruikt worden voor een pagina waaraan je aan het werken bent terwijl de rest online staat.

Met Include Page without Hyperlink is het mogelijk de pagina wel in het menu te hebben staan zonder dat je daar naar toe kunt. (Als de pagina's bijvoorbeeld "childs"heeft).



Een menu zet je natuurlijk in je master pagina zodat het op alle pagina's hetzelfde is. Zorg dat het altijd op dezelfde plaats staat zodat mensen niet hoeven te gaan zoeken. (maar dat gebeurd ook automatisch als je hem in de master hebt staan.

Een menu maken is erg gemakkelijk. Ga naar het widgets library paneel en kies voor horizontal of verticaal. Daarna is het een kwestie van slepen naar de gewenste plaats.

Het menu maakt gebruik van de pagina's zoals deze in je plan staan. De knoppen worden automatisch gemaakt, en werken ook meteen.

Als je een extra button wil, zoals ik naar dit blog dan kun je een tweede menubalk aanmaken die dan "manueel"ingevuld wordt.
Aan deze knop kun je dan een hyperlink toevoegen.

Op zich spreekt het menu maken voor zich. Je kunt alle buttons zelf veranderen van kleur, er ook een ander icoontje op plakken, rollover states maken e.d. De teksten kun je ook zelf aanpassen.

 Je kunt bepalen of je alleen de toplevel pagina's ziet (parents) of ook de andere pagina's (children) en ook die submenu's zijn naar eigen smaak aan te passen.

Je kunt het vlak vullen met een kleur of een gradiënt of het transparant maken. Of een afbeelding in de button plaatsen.




 


Het kleine driehoekje dat aangeeft dat er een submenu is kun je van plaats veranderen door een andere parts positioning te kiezen. Als je het driehoekje selecteert en vervolgens weggooit dan zal het menu er uitgeklapt uitzien (zoals hieronder)

De breedte van het submenu moet per submenu veranderd worden.













Bovendien kun je ook nog een effect meegeven aan het menu of aan de tekst. In het voorbeeld hieronder is overal schaduw toegevoegd.