Verkkosuunnittelun perusteet: Painikeelementtien lisääminen kehykseen

/2019-09-28 18:05:27/
Eider
/Kehittäjä/

Photoshop CS2: n avulla esitän painikeelementtien luomisen kehysrakenteellesi ja lisään ne lopulta myös lopulliseen verkkosivustoosi. Luomme kaksi png-kuvatiedostoa ja tallennamme ne sitten muuntamalla ne gif-tiedostotyyppeiksi, kun se on valmis. Huomaa: Olen lähentänyt aktiivista ikkunaa useimpien näyttökuvien katselua varten. Tämä opetusohjelma on jatkoa viestille "Perusteet: Suunnittele verkkosivuston kehys Photoshopissa".

Luo tyhjä kangas, jonka koko on 75 kuvapistettä (leveys) x 25 kuvapistettä (korkeus) aloittaaksesi painikkeen suunnittelun. Luo uusi kerros ja kutsu sitä B ackground_01 . Valitse pyöristetty suorakulmainen työkalu, pidä painettuna vaihto-näppäintä ja piirrä pyöreä sivuputki keskelle. Mikä tahansa väri on hieno nykyisessä vaiheessa, valitsen harmaasävyn.

Kaksoisnapsauta Taso_01-tasoa tasojen lavalta avataksesi sekoitusasetukset ja säädä sitten seuraavia tyylejä: Pudota varjo

Läpinäkyvyys: 40%
Etäisyys: 0px
Levitys: 0%
Koko: 6px

Gradient Overlay

Väripysähdys: 0%, #cccccc
Väripysäytys: 100%, # 333333

Sulje alue kuvassa A esitetyllä tavalla suorakulmaisen teltan avulla; napsauta sitten valikkorivillä Valitse, Värialue ja napsauta OK . Napsauta sitten Valitse, Muokkaa, Sopimus, ja 1 pikseli kuvan B mukaisesti . Napsauta sitten OK .

Kuvio A

Kuvio B

Luo uusi taso ja nimeä se tausta_02. Täytä korostettu alue millä tahansa värillä. Tässä esimerkissä, kuten voit nähdä kuvasta C, käytän # 000000 mustaa.

Kuvio C

Kaksoisnapsauta Tausta_02 -painiketta käynnistääksesi sekoitusasetukset ja säätääksesi seuraavaa tyyliä. Valitse tämän oppaan tarkoituksiin seuraavat värit ja tyylit:

Gradient overlay

Väripysäytys: 0%, # cccc99
Väripysäytys: 100%, # 666633

Kuvio D näyttää valmiin painikkeen 10%: n näkymässä. Tallenna tämä painikkeena_02.psd. Tallenna sitten painike gif-muodossa (Button_02.gif). Tuloksena on kuvassa E esitetty painikekuva.

Kuvio D

Kuvio E

Nyt luomme käänteisen napin ja siitä tulee hiiren osoittimen painike.

Kun Button_02.psd-tiedosto on auki, kaksoisnapsauta Background_02-tasoa avataksesi sekoitusasetukset ja valitse sitten Gradient Overlay. Muuta kulma -90 °: seen kuvan G mukaisesti .

Kuvio F

Napsauta nyt OK. Painike näyttää nyt alkuperäisen kääntökuvana, kuten voit nähdä kuvasta G.

Kuvio G

Tallenna tämä uusi painike gifiksi nimeämällä se Button_Over_02.gif.

Voimme käyttää tätä painiketta sellaisenaan, lisätä tekstikerroksen jokaiselle nimetylle painikkeelle tai käyttää CSS-koodia CSS-koodin avulla lisätäksesi tekstiä sivun toteuttamisen aikana.

Tekstin lisääminen

Kun Button_02.psd-kuva on auki, ensimmäinen askel on lisätä vaakasuuntainen tekstikerros valitsemalla T-tekstityökalu ja vetämällä sitten vaakasuuntainen ruutu kuvan mitoissa kuvan H osoittamalla tavalla.

Kuvio H

Seuraavaksi voimme lisätä tekstiä, kuten sanan Koti tässä tapauksessa kuvan I mukaisesti . Koska tekstin pituus voi vaihdella, voit säätää painikkeen leveyttä pidempien nimikkeiden sopimiseksi. Tallennamme tämän tiedoston nimellä Button_02_home.psd ja tallennamme sen sitten verkkoon gif-kuvana. Luo uusi Koti-painike Button_Over_02.psd-kuvan avulla ja tallenna samalla tavalla kuin yllä.

Kuvio I

Rautalangan vuoksi voimme sijoittaa nämä manuaaliset tekstipainikkeet malleihimme. Jatkamme tämän sarjan ensimmäisessä kappaleessa keskusteltuamme Juniper Wood Company -lankakehystä luomalla jäljellä olevat painikkeet mallille. Kaikissa painikkeissa sekä Button_02.psd että Button_Over_02.psd käytetään ja tallennetaan nimikkeen kanssa jokaiselle nimetylle painikkeelle. Kaikki painikkeet pysyvät samalla leveydellä kaikille nimetyille nimikkeille.

Jatka yllä olevaa menettelyä, kun haluat käyttää muita tekstipainikkeita Blogi, Luettelo, Suositellut, Galleria ja Videot . Koska kukin otsikko vaatii kaksi kuvaa, painikkeen ja yläpainikkeen, pääset kahteentoista erilliseen gif-kuvatiedostoon.

Muokkaa leveyttä niin, että se sopii pidempiin nimikkeisiin

Painikkeen leveyden pidentäminen on melko yksinkertaista. Avaa alkuperäinen tiedosto, kuten Button_02.psd, ja muuta sitten kuvan kokoa. Tässä tapauksessa laajennat leveyden 125 pikseliin. Avaa Kuvakoko-valintaikkuna napsauttamalla Valikkorivin Kuva ja Kuvakoko -vaihtoehtoa kuvan J mukaisesti . Muuta leveysasetukseksi 125, varmista, että Rajoitettujen osuuksien valinta ei ole valittuna, ja napsauta sitten OK. Muokattu leveyspainike näkyy kuvassa K.

Kuvio J

Kuvio K

Painikkeiden asettaminen kehyskehykseen

Lisää painikekuviin ne vain olemassa olevaan kehyskuvakuvatiedoston navigointialueeseen ja aseta sitten jokainen painikekuva kyseiseen kerrokseen kuvan L mukaisessa kuvakaappauksessa esitetyllä tavalla. Avaa jokaisen painikkeen kuvatiedosto ja valitse sitten valikkoriviltä Kaikki, Kaikki. Kopioi kuva, tee kehysmalli aktiiviseksi ikkunaksi, valitse sitten liitä ja siirrä-työkalulla aseta jokainen painikekuva kehysmalli halutulle alueelle.

Kuvio L

Eikö olisi kiva tehdä vain muutama painiketausta ja tehdä se sen kanssa? Siksi haluan luoda viipaleita taustapainikkeille ja hyödyntää CSS: n voimaa tekstiä näyttää. Esitän viipalointi taustat ja CSS-sijoittelu tulevassa viestissä.