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, ir jūs galite pamatyti, kaip galite padaryti tai, ką galite padaryti apsilankę "Muse Site of the Day" . 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ą versijos versiją, mes vaikštome, nukreipdami naršyklę į šį puslapį. Kai rodomi pelės slinkties ratukai, tekstas, atrodo, perkelia puslapio aukštyn arba žemyn, o vaizdai keičiasi.
Pradėkime.
01 iš 07
Sukurkite tinklalapį
Kai paleisite "Muse", spustelėkite nuorodą " Nauja svetainė" . Tai atidarys naujos svetainės ypatybes . Šis projektas bus sukurtas darbalaukio programai, kurį galite pasirinkti išskleidžiamajame meniu Pradinis išdėstymas . Taip pat galite nustatyti stulpelių skaičių, latakų pločio, maržų ir užpildų skaičių. Šiuo atveju mes nesidomėjome šiuo klausimu ir tiesiog spustelėjome Gerai .
02 iš 07
Formatas puslapis
Kai nustatote svetainės ypatybes ir spustelėjote "Gerai", jums buvo imamas tas, kuris vadinamas plano rodiniu. Viršuje yra pagrindinis puslapis ir lango apačioje pagrindinis puslapis . 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, spustelėkite " Browser Fill" spalvų lustą ir pasirinkę "Color Picker" juodą spalvą.
03 iš 07
Pridėti tekstą į puslapį
Kitas žingsnis yra įtraukti tam tikrą tekstą į puslapį. Mes pasirinkome Teksto įrankį ir išskyrėme teksto laukelį. Mes įvedėme žodį "Sveiki atvykę", o "Properties" nustatėme tekstą Arial, 120 pikselių balta. Centras suderintas.
Tada mes persijungėme į įrankį "Pasirinkimas", spustelėjome "Teksto laukelį" ir nustatėme jo Y padėtį 168 pikseliais iš viršaus. Pasirinkus teksto lauką, atidarėme " Align" skydelį ir išdėstė teksto lauką į centrą.
Galiausiai pasirinkę teksto lauką, laikėme klavišus " Option" / "Alt" ir " Shift" ir padarėme keturias teksto laukelio kopijas. Mes pakeitė kiekvienos kopijos tekstą ir Y padėtį į:
- To, 871
- Grafika, 1621
- Programinė įranga, 2371
- @ About.com, 3181
Pastebėsite, kad, nustatydami kiekvieno teksto laukelio vietą, puslapis keičiasi, kad atitiktų teksto vietą.
04 iš 07
Pridėti vaizdų savininkus
Kitas žingsnis - rodyti vaizdus tarp teksto blokų.
Pirmasis žingsnis yra pasirinkti stačiakampio įrankį ir parengti dėžutę, kuri tęsiasi iš vienos pusės į kitą. Pasirinkus stačiakampį, mes nustatome jo aukštį iki 250 pikselių ir Y padėtį 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% pločio mygtuką ypatybėse. 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š 07
Pridėkite vaizdų į vaizdo įrašų savybes
Pasirinkus stačiakampį, mes spustelėjome nuorodą "Fill" - ne "Color Chip" - ir spustelėjome "I magge" rašalą, kad pridėtumėte vaizdą stačiakampyje. Fitingo srityje pasirinkome Scale To Fit ir spustelėjome centrinę rankenėlę pozicijos srityje, kad įsitikintumėte, kad vaizdas yra nukreiptas nuo vaizdo centro.
Toliau mes panaudojome Option / Alt-Shift vilkdami techniką, kad sukurtumėte vaizdo kopiją tarp pirmųjų dviejų teksto blokų, atidarytumėte užpildymo skydą ir pakeitėte vaizdą kitam. Tai padarėme ir likusiems dviems vaizdams.
Su vaizdais vietoje, laikas pridėti judesį.
06 iš 07
Pridėti Paralakso slinkimą
"Adobe Muse" yra keletas būdų, kaip pridėti į paralaksą przewijanie. Mes jums parodysime paprastą būdą tai padaryti.
Kai atidarytas "Fill" skydas, spustelėkite skirtuką "Slinkti" ir, kai jis atsidaro, spustelėkite žymimąjį laukelį "Motion" .
Pamatysite pradinio ir galutinio judėjimo vertes. 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ų.
Horizontalios ir vertikalios rodyklės nustato 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š 07
Naršyklės testas
Tuo metu mes buvome baigti. Dėl akivaizdžių priežasčių pirmas dalykas buvo tai, kad pasirinkote " Failas"> "Išsaugoti svetainę" . Naršyklės testui mes tiesiog pasirinkę " Failas"> "Peržiūros puslapis naršyklėje" . Tai atidarė kompiuterio numatytąją naršyklę ir, kai atidarėme puslapį, pradėjome naršyti.