Share
In deze zelfstudie laat ik je snel zien hoe je een website kunt bouwen met Adobe Muse CC. We zullen onder andere:
Download video of abonneer je op Tuts + Web Design op YouTube
Hallo daar! Mijn naam is Michael Chaize. Ik ben een Creative Cloud-evangelist voor Adobe en in deze tutorial laat ik je zien hoe je snel een website kunt maken met Adobe Muse CC.
De eerste keer dat u Adobe Muse start, krijgen we dit opstartscherm en kunt u zeggen dat ik het wil maak een nieuwe site.
En dan definieert u de afmetingen van uw pagina's. Als u wilt, als een eerste lay-out, om uw desktopgebruikers, tabletgebruikers of telefoongebruikers te targeten en de marges van de pagina in te stellen. Dus ik zal klikken OK, en ik zal de werkruimte van het plan met al mijn pagina's ontdekken.
Voorlopig heb ik gewoon een startpagina, maar hier kan ik zeggen dat ik ook een productenpagina nodig heb en misschien een pagina. En in de producten krijg ik product A en op hetzelfde niveau product B. Dus dit is hoe je heel snel de structuur van je website kunt maken.
Je hebt ook basispagina's. Dus elke keer dat u een ontwerpelement toevoegt in de koptekst, of in de voettekst van de hoofdpagina, staat deze op al uw pagina's. Voor mijn kop zal ik gewoon een rechthoek op de achtergrond maken. Misschien vul het met een donkere kleur.
En ik wil een logo toevoegen. Dit is dus een afbeelding, u kunt afbeeldingen rechtstreeks vanaf uw schijf slepen en neerzetten. Oké, dus laat me een PNG-bestand slepen en neerzetten en plaatsen. Je ziet dat je slimme hulplijnen krijgt om automatisch je elementen te laten klikken naar de andere elementen op het podium.
Als ik nu terugga naar het algemene plan van mijn website, zie ik dat de koptekst op alle pagina's wordt weergegeven, omdat deze deel uitmaakt van de hoofdpagina. Oké, nu wil ik misschien een navigatiemenu toevoegen om door de pagina's te bladeren.
Dus dit is waar je de widgets bibliotheek. Dit is een bibliotheek met interactieve widgets. Je krijgt knoppen, componenten zoals het lichtbakenscherm, formulieren, menu's, panelen, lichtshows, in dit geval zullen we een horizontaal menu gebruiken en het misschien in de header plaatsen.
Het krijgt automatisch de structuur die in het plan is gedefinieerd. Dus ik heb al drie pagina's in het navigatiemenu. Huis, producten, en Wat betreft. Eigenlijk is dit een dynamische widget, dus als ik een nieuwe pagina toevoeg die ik Contact noem en als ik terugga naar mijn hoofdpagina, heb ik al de contactknop.
Als u op het blauwe pictogram klikt, krijgt u de instellingen voor de widgets. Misschien wilt u ook de pagina's op subniveau weergeven. Dus ik zou zeggen, alle pagina's en dan kun je stylen.
Om een webset-lettertype te selecteren, beschikt u hier over de klassieke, maar u kunt ook beslissen om weblettertypen toe te voegen die afkomstig zijn van lettertypekits. Het bladert automatisch door de catalogus van gratis lettertypen die beschikbaar zijn op typekit. En je kunt bijvoorbeeld zeggen dat je de wilt gebruiken acteur lettertype, klikt u op OK en wordt het toegevoegd aan de lijst met lettertypen.
En je kunt het hier direct selecteren. Dit is de manier waarop u uw menu maakt en vervolgens of u een alinea met tekst wilt toevoegen. Het mag niet op de hoofdpagina staan, maar laten we zeggen op de startpagina. Je hoeft alleen maar een blok te definiëren en te zeggen welkom op mijn website.
Nogmaals, ik selecteer gewoon de acteur lettertype, misschien de tekst vergroten, en hier gaan we.
Aan de rechterkant zal ik een andere interactieve widget toevoegen. Misschien een diavoorstelling. Dus je hebt een andere diashow, de standaard, overvloeien naar een volledig scherm, de lichtbak.
Laten we spelen met een eenvoudige diavoorstelling die hier een standaardfoto zal weergeven. Maar elke keer dat je een widget toevoegt, heb je dit blauwe pictogram en dit is waar je de instellingen hebt en je kunt zeggen Ik wil mijn eigen afbeeldingen toevoegen.
Het formaat van de afbeeldingen wordt automatisch aangepast. En dan kun je de legenda instellen, je kunt navigeren om alle foto's te bekijken en je hebt ook verschillende overgangen. Standaard wordt het dus in- en uitfaden, maar u kunt ook kiezen voor horizontale dia's.
Dus dit is mijn startpagina, misschien kunnen we iets toevoegen op de About-pagina, natuurlijk kunt u plakken elementen van de ene pagina naar de andere kopiëren. Dus als ik ervoor kies om al mijn pagina's met de tegelindeling weer te geven, kan ik wat elementen kopiëren.
En je kunt ook animaties toevoegen, dus laat me een afbeelding toevoegen. En je hebt deze scroll-beweging. Dit is dus een zeer krachtig paneel waarin je kunt zeggen dat je het parallax-crawlingeffect wilt toevoegen. Dus als ik Motion hier controleer, heb ik hier de sleutelpositie, wat betekent dat wanneer je naar beneden scrolt en deze sleutelpositie bereikt voordat ik een specifiek gedrag wil krijgen.
Dus misschien komt er iets met deze snelheid van rechts. En daarna laat ik zeggen dat ik niet wil dat het beweegt, dus ik wil dat het met dezelfde snelheid van de pagina beweegt. Dus, slechts één. Je kunt ook met de dekking spelen om een aantal sleutelposities toe te voegen, als je wilt dat je object verschijnt en dan verdwijnt.
Ik zal nog een tekstblok toevoegen. Voeg de knop toe. Gewoon om de dimensie van mijn pagina te vergroten om de effecten te laten zien. Dus als ik deze pagina in de browser wil bekijken, kan ik kiezen om Bestand opslaan, Pagina Voorbeeld in browser te openen of direct op de nieuwe Voorbeeld knop die we direct in Adobe Muse hebben gelanceerd en terwijl ik naar beneden scrol, zie ik mijn gebouw.
Het verschijnt van rechts. Het stopt en dan verdwijnt het. Dit is dus precies het effect dat ik wilde definiëren in mijn ontwerp dankzij het deelvenster Scrolleffecten.
Als ik deze website nu met mijn klant wil delen om feedback te krijgen, dan heb je de Publiceren knop.
Je moet gewoon Publiceren zeggen, dan typ je een naam. Ik klik op OK, en het gebruikt Adobe Business Catalyst, een hostingplatform dat beschikbaar is voor alle Creative Cloud-leden, en publiceert uw website op deze URL zodat u deze met uw klant kunt delen.
Hier is het. Ik heb mijn eerste pagina. Product A, product B. Als ik op de pagina Over klik en als ik naar beneden scrol, heb ik het effect direct in mijn browser. En ik kan deze URL plakken en delen met mijn klanten of mijn collega's.
Adobe Muse CC is bedoeld voor ontwerpers die webpagina's willen ontwerpen zonder te coderen.
Iedereen kan het gebruiken en heel creatief worden. U kunt muse.adobe.com bezoeken om Adobe Muse te downloaden en uit te proberen. Ik raad u ook aan de sectie Site of the Day te bezoeken om prachtige websites te bekijken die zijn gepubliceerd met Adobe Muse. Ter informatie, vorig jaar 2013, zijn er meer dan 500.000 websites gemaakt en gepubliceerd met Adobe Muse.
Als je meer wilt weten over Adobe Muse, houd dan ook op tutsplus.com en controleer de categorie Adobe Muse voor nieuwe, nieuwe handleidingen en video's om te leren hoe je geweldige websites kunt maken.
Kunstwerk door Črtomir Just
Accentsconagua