• Dizaino ir programavimo pamokos

  •  
    Thread Rating:
    • 0 Votes - 0 Average
    • 1
    • 2
    • 3
    • 4
    • 5
    Profesinis Blizgus "Duomenų perkėlimo" Mygtukas

    Member


    ***
    113

    0
    Post: #1
    RE: Profesinis Blizgus "Duomenų perkėlimo" Mygtukas
    [notice=nt_info]1. Jūsų Mygtuko kūrimas[/notice]


    Pradžia, kurdama naują dokumentą, kad padarytų jūsų mygtuką, kitaip atidarykite žiniatinklio svetainės projektą, kad jūs dirbote toliau. Aš sukūriau mažą dokumentą, surūšiuotą pagal dydį 400 x 110, tik kad padaryčiau mano mygtuką (ą).

    Dabar jūs turite padaryti savo mygtuko formą, jūs galite padaryti tai prie kiekvieno Apvalinto Stačiakampio Įrankio naudojimo (kuris labiausiai yra paplitęs), ar jūs galėjote panaudoti kanalus, kad sukurtumėte gražią, vienodą apvalintą dėžę. Bus geriausia, jei jūs tik panaudosite Apvalintą Stačiakampio Įrankį nors.

    [Image: pro-glossy-02.gif]

    Nustatymams, panaudokite spindulį apytiksliai 10-15px, jūs galite pamatyti kitus nustatymus, kuriuos aš panaudojau apačioje:

    [Image: pro-glossy-03.gif]

    Dabar, ilginkite savo mygtuką ant drobės bet kokioje spalvoje, kurios jūs norite. (neturi reikšmės, kas dažo jus naudojimas),

    [Image: pro-glossy-04.gif]


    [notice=nt_info]2. Pritaikykite Sluoksnio Stilius[/notice]


    Teisingas spragtelėjimas jūsų mygtuko sluoksnis jūsų sluoksnio paletėje tada įeina į Susimaišantį Pasirinkimą, spragtelėjimą ir taiko kitus nustatymus:

    Inner Shadow
    Gradient Overlay


    Jūs galite panaudoti bet kokias spalvas, kurių jūs norite anksčiau minėtų sluoksnio stilių, bet jūsų mygtukas turi dabar pažiūrėti kažkas kaip tai bet kokiu būdu:

    [Image: pro-glossy-07.gif]


    [notice=nt_info]3. Įsimintiniausia vieta / Švytėjimo Padarinys[/notice]


    Dabar atėjo laikas pridėti gražų, blizgų švytėjimą prie mygtuko. Pradžia, darydamas pasirinkimą aplink jūsų mygtuką (Select > Load Selection) vištos kontraktas jūsų pasirinkimas maždaug iki 5 vaizdo elementų (Select > Modify > Contract) dabar jus turi palikti su pasirinkimu kaip tai:

    [Image: pro-glossy-08.gif]

    Sukurkite naują sluoksnį, tada tempia baltą į vaiskų gradientą nuo viršūnės pasirinkimo į pagrindą, kaip rodytas žemiau atvaizdo:

    [Image: pro-glossy-09.gif]

    Dabar jūs turite padaryti gundantį kelią, naudodamas Rašiklio Įrankį, pavirsti, jūsų kelias į pasirinkimą tada pašalina pagrindo pusę gradiento, kažko kaip tai:

    [Image: pro-glossy-10.gif]

    Aš taip pat panaudojau didelį, minkštą šepetį, kad ištrinčiau toli apatinius kraštus, tai duoda tam labai gražų, lygų jausmą.


    [notice=nt_info]4. Tekstas & Detalės[/notice]


    Dabar atėjo laikas pridėti jūsų tekstą prie mygtuko! Pradžia, išimdama Horizontalų Tipo Įrankį (T) tada išrašo jūsų tekstą.

    [Image: pro-glossy-11.gif]

    Šriftą kurį aš panaudojau virš pavadina Nesuskaitomu Pro-, aukščiausiai linijai teksto, kurį aš panaudojau: Juodas Kursyvinis, 24 pt, Aštrūs, #fff.

    Teksto galutiniam rezultatui aš panaudojau: Pusiau drąsus Kursyvinis, 12 pt, Aštrūs, #fff. Aš užbaigiau, pridėdamas šį Lašo Šešėlį prie teksto sluoksnio.

    [Image: pro-glossy-13.gif]

    Galiausiai, gražiam prisilietimui, aš prisidėjau atspindyje prie mygtuko ir išblukusio sraigtelio pagrinde, kurį paliekama kampą. Pridėkite, kad šešėlis/atspindys, kopijuodamas jūsų svarbiausią mygtuką vėliau, perkeldamas tai žemiau jūsų mygtuko sluoksnio tada ištrina visus išskyrus viršūne.

    [Image: pro-glossy-14.gif]

    Jūs galite perkelti sraigtelio formą, nuo kurios aš panaudojau: http://www.photoshopstar.com/tutorials/66/cog.csh

    [Image: pro-glossy-15.gif]


    [notice=nt_info]5. Baigtas[/notice]


    Ir tai yra beveik tai. Aš taip pat sukūriau raudoną mygtuko versiją nors.

    [Image: pro-glossy-16.gif]

    Ačiū už skaitymą, aš tikiuosi, kad jūs gėrėjotės mokymo programa.


    [notice=nt_info]6. HTML & CSS Markup[/notice]


    Aš taip pat padariau koduotą versiją šio kredito termino pratęsimo mygtuko, tiems, kurie galėtų domėtis.
    CSS Kodas:

    Code:
    #button { margin: 0; padding: 0; }
    #button a { display: block; background: url(./button_off.gif) no-repeat; width: 200px; height: 0px !important; height /**/:72px; padding: 72px 0 0 0; overflow: hidden; }
    #button a:hover { background: url(./button_on.gif) no-repeat; width: 200px; height: 0px !important; height /**/:72px; padding: 72px 0 0 0; overflow: hidden; }

    HTML Code:

    <h1 id=”button”><a href=”#” title=”">Button</a></h1>


    [notice=nt_impo]Pamoka versta: .Thoofx, Kopijuoti be leidimo yra griežtai draudžiama![/notice]
    2012-08-13 22:23
    Find Quote


    Possibly Related Threads...
    Thread: Author Replies Views: Last Post
      Paprasti Blizgūs Navigaciniai Mygtukai Thoofx 0 1180 2012-08-18 23:12
    Last Post: Thoofx
      Projektavimas Blizgus (Tinklas 2.0) Ženkleliai Thoofx 0 1922 2012-08-13 22:36
    Last Post: Thoofx


    About DESCO

    Mes esame ne komercinis projektas, norime, jog Lietuvos jaunimas vis sparčiau brautųsi į technologijų amžių. Negalima sėdėti vietoje, reikia kažką veikt, todėl mūsų projektas tam puikiai tinka. Galima pas mus išmokt kažko naujo, taip pat nepamirškite, kad ir jūs galite mokyti kitus! Žinių dalinimasis geriną lietuvių mentalitetą, todėl nesmerk kito, o pamokyk!