Share
I denne opplæringen vil jeg raskt vise deg hvordan du kan bygge et nettsted ved hjelp av Adobe Muse CC. Blant annet vil vi:
Last ned video eller abonnere på Tuts + Webdesign på YouTube
Hei der! Jeg heter Michael Chaize. Jeg er en Creative Cloud-evangelist for Adobe, og i denne veiledningen vil jeg vise deg hvordan du raskt kan lage et nettsted med Adobe Muse CC.
Første gang du starter Adobe Muse, får vi denne splash-skjermen, og du kan si at jeg vil opprett et nytt nettsted.
Og så definerer du dimensjonene på sidene dine. Hvis du vil, som et innledende layout, målrette dine desktop-brukere, nettbrettbrukere eller telefonbrukere, og angi kantene på siden. Så jeg vil klikke på OK, og jeg vil finne planen arbeidsområdet med alle mine sider.
For øyeblikket har jeg bare en hjemmeside, men her kan jeg si at jeg også trenger en produktside og kanskje en om side. Og i produktene vil jeg få produkt A, og på samme nivå produkt B. Så dette kan du raskt lage strukturen på nettstedet ditt.
Du har også mastersider. Så hver gang du legger til et designelement i toppteksten, eller bunnteksten på hovedsiden, vil den være på alle sidene dine. For min overskrift vil jeg bare lage et rektangel i bakgrunnen. Kanskje fyll det med en mørk farge.
Og jeg vil legge til en logo. Så dette er et bilde, du kan direkte dra og slippe bilder fra disken din. Ok, så la meg dra og slippe en PNG-fil og plasser den. Du ser at du får Smart Guides til å automatisk knipse elementene dine til de andre elementene på scenen.
Nå, hvis jeg går tilbake til den overordnede planen på nettstedet mitt, ser jeg at overskriften vises på alle sider, fordi det er en del av hovedsiden. Ok, nå vil jeg kanskje legge til en navigasjonsmeny for å navigere gjennom sidene.
Så dette er hvor du vil bruke widgets bibliotek. Dette er et bibliotek med interaktive widgets. Du får knapper, komponenter som lysboksen skjerm, skjemaer, menyer, paneler, lys viser i dette tilfellet vi vil bruke en horisontal meny og kanskje plassere den inne i toppteksten.
Det blir automatisk den strukturen som er definert i planen. Så jeg har allerede tre sider i navigasjonsmenyen. Hjem, Produkter, og Handle om. Egentlig er dette en dynamisk widget, så hvis jeg legger til en annen side som jeg vil nevne Kontakt, og hvis jeg går tilbake til min hovedside, har jeg allerede fått kontaktknappen.
Hvis du klikker på det blå ikonet, får du innstillingene for widgets. Kanskje du også vil vise sidene på undernivået. Så jeg vil si, alle sider og så kan du stile.
For å velge en web-sett skrift vil du ha de klassiske her, men du kan også bestemme å legge til webfonter som kommer fra type-sett. Den vil automatisk bla gjennom katalogen av gratis skrifttyper som er tilgjengelige på typekit. Og du kan for eksempel si at du vil bruke skuespiller font, klikker du på OK, og det blir lagt til i listen over skrifter.
Og du kan direkte velge den her. Så dette er hvordan du lager din meny, og deretter hvis du vil legge til et avsnitt med tekst. Det burde ikke være på hovedsiden, men la oss si på hjemmesiden. Du må bare definere en blokk og si velkommen til min hjemmeside.
Igjen, vil jeg bare velge skuespiller font, kanskje øke størrelsen på teksten, og her går vi.
Deretter til høyre, vil jeg legge til en annen interaktiv widget. Kanskje en lysbildefremvisning. Så du har forskjellig slags lysbildefremvisning, den grunnleggende, blander seg til full skjerm, lysboksen.
La oss spille med grunnleggende lysbildeserie som vil vise et standardbilde her. Men hver gang du legger til en widget, vil du ha dette blåikonet, og det er her du har innstillingene og du kan si Jeg vil legge til mine egne bilder.
Det vil automatisk endre størrelse på bildene. Og så kan du sette legenden, du kan navigere for å sjekke alle bildene, og du har også forskjellige overganger. Så som standard vil det falme inn og falme ut, men du kan også velge å ha de horisontale lysbildene.
Så dette er min hjemmeside, kanskje vi kan legge til noe på Omsiden, selvfølgelig kan du kopiere limelementer fra en side til en annen. Så hvis jeg velger å vise alle sidene mine med flisearrangementet, kan jeg kopiere lime inn noen elementer.
Og du kan også legge til animasjon, så la meg legge til et bilde. Og du har denne rullebevegelsen. Så dette er et veldig kraftig panel der du kan si at du vil legge til parallax-gjennomsøkingseffekten. Så hvis jeg sjekker bevegelse her, har jeg her nøkkelposisjonen som betyr at når du ruller nedover siden og når denne nøkkelposisjonen før det vil jeg få en bestemt oppførsel.
Så kanskje noe kommer fra høyre ved denne hastigheten. Og etter det vil jeg si at jeg ikke vil at den skal bevege seg, så jeg vil at den skal bevege seg i samme hastighet på siden. Så, bare en. Du kan også spille med opasiteten for å legge til noen nøkkelposisjoner, hvis du vil at objektet skal vises og deretter forsvinne.
Jeg vil legge til en annen tekstblokk. Legg til knappen. Bare for å øke dimensjonen på siden min for å vise effektene. Så hvis jeg vil forhåndsvise denne siden i nettleseren, kan jeg enten velge å lagre fil, forhåndsvise side i nettleser eller direkte klikke på den nye Forhåndsvisning knappen som vi lanserte direkte i Adobe Muse, og mens jeg ruller ned, ser jeg min bygning.
Det ser ut fra høyre. Den stopper, og så forsvinner den. Så, dette er akkurat den effekten jeg ønsket å definere i mitt design takket være Scroll Effects-panelet.
Nå, hvis jeg vil dele dette nettstedet med kunden min for å få tilbakemelding, har du publisere knapp.
Du må bare si Publiser, så skriver du et navn. Jeg klikker på OK, og det vil bruke Adobe Business Catalyst, som er en hostingplattform tilgjengelig for alle Creative Cloud Members, og publiserer nettstedet ditt på denne nettadressen, slik at du kan dele den med kunden din.
Her er det. Jeg har min første side. Produkt A, produkt B. Hvis jeg klikker på Omsiden, og hvis jeg ruller ned, har jeg effekten direkte i nettleseren min. Og jeg kan kopiere lim inn denne nettadressen, og dele den med mine kunder eller mine medarbeidere.
Adobe Muse CC målretter designere som ønsker å designe nettsider uten koding.
Alle kan bruke den og bli veldig kreative. Du kan besøke muse.adobe.com for å laste ned og prøve Adobe Muse. Jeg oppfordrer deg også til å besøke delen av dagen for å sjekke vakre nettsteder publisert med Adobe Muse. For informasjonen, i fjor i 2013 ble mer enn 500 000 nettsteder opprettet og publisert med Adobe Muse.
Også, hvis du vil vite mer om Adobe Muse, hold deg innstilt på tutsplus.com og sjekk Adobe Muse-kategorien for å få friske, nye opplæringsprogrammer og videoer for å lære å lage fantastiske nettsteder.
Kunstverk av Črtomir Just
Accentsconagua