Vienas iš "karščiausių" būdų žiniatinklyje šiandien yra paralakso slinkimas. Mes visi esame tame pačiose svetainėse, kuriose pelyte pasukite slinkties ratuką, o puslapio turinys juda aukštyn ir žemyn arba per visą puslapį, kai sukite pelės ratuką.
Šioms technologijoms gali būti nepaprastai sunku pasiekti dėl naujų dizaino ir grafinio dizaino, nes reikalingas CSS kiekis.
Jei tai apibūdina jus, yra keletas programų, kurios gali tiesiog kreiptis į grafikus atlikėjus. Jie iš esmės naudoja pažįstamą puslapių išdėstymo metodą tinklalapiuose, o tai reiškia, kad nėra daug (jei yra) kodavimo. Viena iš programų, kurios tikrai išryškėjo, yra "Adobe Muse".
Darbas, kurį atlieka grafikos profesionalai naudodamiesi "Muse", yra gana nustebinantis, o jūs galite pamatyti mėginių, kuriuos galite padaryti apsilankę "Muse" Dienų svetainė . Nors žiniatinklio profesionalai mano, kad "Muse" yra tam tikros rūšies "žaislas", dizaineriai taip pat juos naudoja kurdami mobiliuosius ir internetinius prototipus, kurie bus galutinai pristatyti savo komandos kūrėjams.
Vienas būdas, kurį neįtikėtinai lengva atlikti su "Muse", yra paralakso slinkimas ir, jei norite pamatyti užbaigtą pratybų versiją. Kai rodomi pelės slinkties ratukai, tekstas, atrodo, perkelia puslapio aukštyn arba žemyn, o vaizdai keičiasi.
Pradėkime.
01 iš 07Sukurkite tinklalapį
Kai paleisite "Muse", spustelėkite " Nauja svetainė nuoroda Tai atidarys Naujos svetainės ypatybės. Šis projektas bus sukurtas darbalaukio programai ir galėsite jį pasirinkti Pradinis maketas išskleidžiamasis meniu. Taip pat galite nustatyti stulpelių skaičių, latakų pločio, maržų ir užpildų skaičių. Tokiu atveju mes to nepakankamai susirūpinome ir tiesiog spustelėjome Gerai.
Formatas puslapis
Kai nustatote svetainės ypatybes ir spustelėjote Gerai tu buvo paimtas į tai, kas vadinama Suplanuoti vaizdas Čia yra Namai puslapio viršuje ir a Pagrindinis puslapis lango apačioje. Mums reikėjo tik vieno puslapio. Jei norite pasiekti "Design View", mes dukart spustelėjome pagrindinį puslapį, kuriame atidaryta sąsaja.
Kairėje yra keletas pagrindinių įrankių, o dešinėje yra daugybė skydų, naudojamų manipuliuoti puslapio turiniu. Viršuje yra savybės, kurias galima pritaikyti prie puslapio ar ką nors pasirinktą puslapyje. Šiuo atveju norėjome turėti juodą foną. Norėdami tai padaryti, spragtelėkite ant Naršyklės užpildymas spalvų lustą ir pasirinkę juodą iš "Color Picker".
03 iš 07Pridėti tekstą į puslapį
Kitas žingsnis yra įtraukti tam tikrą tekstą į puslapį. Mes pasirinkome Teksto įrankis ir išvedė teksto laukelį. Mes įvedėme žodį "Sveiki atvykę", o "Ypatybės" nustatė tekstą Arial, 120 pikselių balta. Centras suderintas.
Tada mes persijungėme į "Pasirinkimo" įrankį, spustelėjome Teksto laukelį ir nustatėme jo Y padėtis 168 pikseliai iš viršaus. Pasirinkus teksto laukelį, atidarėme Suderinti skydelį ir suderino teksto lauką su centru.
Galiausiai, pasirinkę teksto lauką, mes pastumėme žemyn Pasirinkimas / Alt ir Shift raktus ir padariau keturias teksto laukelio kopijas. Mes pakeitė kiekvienos kopijos tekstą ir Y padėtį į:
- To, 871
- Grafika, 1621
- Programinė įranga, 2371
Pastebėsite, kad, nustatydami kiekvieno teksto laukelio vietą, puslapis keičiasi, kad atitiktų teksto vietą.
04 iš 07Pridėti vaizdų savininkus
Kitas žingsnis - rodyti vaizdus tarp teksto blokų.
Pirmasis žingsnis yra pasirinkti Stačiakampis įrankis ir pagaminsime dėžutę, kuri tęsiasi iš vienos pusės puslapio į kitą. Pasirinkus stačiakampį, nustatome jo aukštis iki 250 pikselių ir tai Y padėtis iki 425 pikselių. Planuojama, kad jie visada tęsiasi arba sutampa su puslapio pločiu, kad atitiktų vartotojo naršyklės peržiūros sritį. Norėdami tai padaryti, mes spustelėjome 100% plotis mygtuką savybes. Tai reiškia, kad "X" reikšmė yra pilka ir užtikrinama, kad naršyklėje vaizdas visada būtų 100% matomo pločio.
05 iš 07Pridėkite vaizdų į vaizdo įrašų savybes
Pasirinkus stačiakampį, mes spustelėjome Užpildyti nuorodą - ne "Color chip" ir spustelėjo "Aš"Mage rašalas pridėti vaizdą į stačiakampį. Viduje konors Montavimas sritis, mes pasirinkome Sumažinti, kad tilptų ir spustelėjo centrinė rankena viduje konors Pozicija kad vaizdas būtų matomas nuo vaizdo centro.
Toliau mes naudojome Option / Alt-Shift-drag technika, sukurianti vaizdo kopiją tarp pirmųjų dviejų teksto blokų, atidarė užpildymo skydą ir pakeitė vaizdą kitam. Tai padarėme ir likusiems dviems vaizdams.
Su vaizdais vietoje, laikas pridėti judesį.
06 iš 07Pridėti Paralakso slinkimą
"Adobe Muse" yra keletas būdų, kaip pridėti į paralaksą przewijanie. Mes jums parodysime paprastą būdą tai padaryti.
Kai atidarytas laukelis Fill, spustelėkite mygtuką Slinkties skirtukas ir, kai jis atsidaro, spustelėkite mygtuką Varnelė "Motion".
Jūs pamatysite vertes Pradinis ir Galutinis judėjimas. Tai nustato, kiek greitai vaizdas judinamas, palyginti su slinkties ratuku. Pavyzdžiui, 1,5 vertė perkelia vaizdą 1,5 karto greičiau nei ratas. Mes panaudojome 0 reikšmę, kad vietoje užfiksuotų vaizdų.
The Horizontalios ir vertikalios strėlės nustatyti judesio kryptį.Jei vertės yra 0, vaizdai nebus judėti, nesvarbu, kurią rodyklę spustelėsite.
Vidutinė vertė – Pagrindinė pozicija - rodo vietą, kurioje vaizdai pradeda judėti. Už paveikslėlio virš šio paveikslėlio prasideda 325 pikseliai puslapio viršuje. Kai slinktis pasiekia tą vertę, vaizdas pradeda judėti. Šią vertę galite pakeisti pakeisdami ją dialogo lange arba spustelėdami ir vilkdami tašką, esantį linijos viršuje, aukštyn arba žemyn.
Pakartokite tai su kitais puslapyje esančiais vaizdais.
07 iš 07Naršyklės testas
Tuo metu mes buvome baigti. Pirmas dalykas, kurį mes padarėme dėl akivaizdžių priežasčių, buvo pasirinkti Failas> Išsaugoti svetainę. Tik naršyklės testui mes tiesiog pasirinkome Failas> Peržiūros puslapis naršyklėje. Tai atidarė kompiuterio numatytąją naršyklę ir, kai atidarėme puslapį, pradėjome naršyti.
