Sisältö
- 01. Määritä uusi asiakirja
- 02. Oletuspainike
- 03. Lisää tiedot
- 04. Lisää lisätietoja
- 05. Lisää tekstiä
- 06. Järjestä kerrokset
- 07. Vie hiiren painike
- 08. Aktiivinen painike
- 09. Tunnisteet
- 10. Tagin yksityiskohdat
- 11. ON-kytkin
- 12. ON-kytkimen tiedot 1
- 13. ON-kytkimen tiedot 2
- 14. ON-kytkimen tiedot 3
- 15. OFF-kytkin
- 16. Profiililaatikko
- 17. Profiililaatikon yksityiskohdat
- 18. Profiililaatikon tiedot 2
- 19. Profiililaatikon kuva
- 20. Kohdistukset-paneeli
- 21. Profiililaatikon bioteksti
- 22. Luokitustähdet
- 23. Järjestä!
- 24. Lisää sivutus
- 25. Kopioi ryhmä
- 26. Kopioi uudelleen
- 27. Sosiaaliset painikkeet
- 28. Tee viimeinen järjestely!
- Piditkö tästä? Lue nämä!
Visuaalisesti houkutteleva käyttöliittymä on erittäin tärkeä osa mitä tahansa verkkosivustoa tai sovellusta. Ilman sitä käyttäjä todennäköisesti tuntee olevansa irti, eikä siksi ole vuorovaikutuksessa tuotteen tai verkkosivuston kanssa mahdollisimman täydellisesti.
Tyylioppaan tai käyttöliittymäsarjan kehittäminen viitteeksi on erittäin tehokas tapa ylläpitää yhtenäistä lähestymistapaa koko suunnittelussa. Suunnittelijalle on myös erittäin hyödyllistä tarjota kehittäjälle referenssi tai yksinkertaisesti käyttää spriteinä projektin myöhemmissä kehitysvaiheissa.
Tässä opetusohjelmassa opastan sinut läpi vaiheet, jotka ovat tarpeen hyödyllisen käyttöliittymäsarjan suunnittelemiseksi Adobe Fireworks -sovelluksessa - ja käyn läpi joitain perusominaisuuksia ja paneeleja, joita kohtaat käyttäessäsi ilotulitusta.
Vaikka tämä käyttöliittymäsarja ei luultavasti ole täydellinen kaikille suunnitelluille malleille, joille sitä ikinä haluat, se näyttää sinulle menetelmän kokoonpanoa varten, jonka voit mukauttaa ja mukauttaa tulevia projekteja tai käyttötarkoituksia varten.
Koska aiot työskennellä vektorimuodossa ilotulitusvälineissä, sinun on myös erittäin helppo mukauttaa tämä käyttöliittymäsarja kaikkiin muotoihin ja kokoihin jatkuvaa käyttöä varten - mukaan lukien Retina-mallit. Tämä on yksi tärkeimmistä syistä, miksi rakastan ehdottomasti työskentelyä Adobe Fireworksissa - yksinkertaisesti siksi, että se on niin monipuolinen.
- Lataa tämän opetusohjelman tukitiedostot
01. Määritä uusi asiakirja
Avaa Ilotulitus, siirry kohtaan Tiedosto> Uusi, aseta korkeudeksi 280 kuvapistettä ja leveydeksi 600 kuvapistettä. Jätä tarkkuus 72 dpi: n tarkkuudella. Sinun pitäisi nähdä uusi asiakirjasi. Lehdistö U muoto-työkalulle; piirtää 600 kuvapisteen neliö; aseta väri asetukseksi #EDEDED Asetukset-paneelissa (PP).
02. Oletuspainike
Painikkeet ovat avainasemassa, joten aloitetaan siitä määrittelemällä tyylimme. Lehdistö U ja piirrä 150x45 kuvapisteen suorakaide. Siirry PP: ssä kohtaan Gradient> Linear ja lisää kolme väripistettä: # 2685C9, # 268EDE ja # 1F6EA7 (vasemmalta oikealle). Aseta pyöreydeksi 35% ja reunuksen väriksi 1px # 14466B.
03. Lisää tiedot
Siirry Suodattimet-kohtaan +, siirry kohtaan Kohina> Lisää kohinaa> Määrä: 2, poista valinta ja paina OK. Valitse sitten Suodattimet> Photoshop Live Effects, valitse Sisäinen varjo ja määritä ominaisuuksiksi: opasiteetti: 43, etäisyys: 3, kulma: -90 °, koko: 5 ja kaikki muut arvoon 0.
04. Lisää lisätietoja
Kopioi juuri piirtämäsi suorakulmio ja liitä se toisen päälle. Muuta suorakulmion leveydeksi 148x43px ja siirrä se 1px vasemmalle ja 1px alas. Poista kaikki täytevärit ja tehosteet ja lisää vain 1 kuvapisteen reunaväri # 2B93E3.
05. Lisää tekstiä
Nyt meidän on lisättävä tekstiä. Kirjoita tekstisi mukana toimitetulla Arvo-fontilla ja kohdista painikkeen keskelle. Aseta kirjasimen väriksi #FFFFFF ja kooksi 20 kuvapistettä. Kopioi ja liitä sitten teksti, valitse alla oleva teksti ja siirrä se 1xx ylöspäin. Aseta väriksi # 0D2C42.
06. Järjestä kerrokset
Tiedostojen järjestäminen on tärkeä näkökohta, ja tiedostojen järjestäminen on helpompaa suunnitellessamme. Valitse kaikki tämän painikkeen tasot ja paina Ctrl + G: tämä ryhmittelee tasosi. Nimeä tämä kerros Oletuspainike.
07. Vie hiiren painike
Meidän on luotava leijutila. Kopioi ja liitä tekemämme ryhmä, nimeä se uudelleen Hover Button ja siirry toisen painikkeen alle. Osuma A Alivalintatyökalulle; valitse suorakulmio, jossa on kaltevuus. Vaihda oikeanpuoleisen kolmannen värin väriksi # 1A6196.
08. Aktiivinen painike
Tarvitsemme nyt aktiivisen painikkeen. Kopioi ja liitä hiiren painikkeen ryhmä, siirry toisen painikkeen alle ja nimeä se uudelleen Aktiiviseksi painikkeeksi. Käytä alavalintatyökalua kaltevuuden valitsemiseen ja napsauta sitten pientä Käänteiset kaltevuudet -painiketta kääntääksesi kaltevuuden.
09. Tunnisteet
Nyt olemme asettaneet tyylin ja luoneet painikkeita, teemme joitain tunnisteita. Piirrä 55x28px suorakulmio. Lehdistö P kynätyökalulle ja piirrä suorakulmion vasemmalle puolelle kolmio. Pidä Shift-näppäintä painettuna ja valitse molemmat muodot ja napsauta sitten Lisää / Union-painiketta PP: ssä muodostaaksesi yhdistetyn muodon.
10. Tagin yksityiskohdat
Valitse muoto ja aseta väriksi #FFFFFF ja reunuksen väriksi 1px #BFBFBF. Napauta U kahdesti Ellipse-työkalua varten ja pidä Shift-painiketta painettuna samalla, kun piirrät 8x8px-ympyrän tunnisteen vasemmalle puolelle. Valitse kaksi muotoa ja paina Subtract / Punch. Lisää teksti # 666666 koko 16 Arvo-fontilla.
11. ON-kytkin
Teemme ON / OFF-kytkimen ON-tilan. Piirrä 72x23px-suorakulmio ja aseta pyöristys 100%: iin. Aseta kiinteä täyttö arvoksi #FFFFFF ja reunukseksi # C8C8C8 vastaamaan tunnisteita. Lisää kytkimen vasemmalle puolelle 16px-kokoinen teksti, jossa lukee ON ja aseta väriksi # 666666.
12. ON-kytkimen tiedot 1
Meidän on lisättävä vähän yksityiskohtia, joten kytkimemme ei näytä tasaiselta, kun lisätään viimeiset yksityiskohdat. Valitse Suodattimet> Photoshop Live Effects> Sisäinen varjo ja määritä seuraavat ominaisuudet - opasiteetti: 31, etäisyys: 3, kulma: 90 °, koko: 5. Paina OK.
13. ON-kytkimen tiedot 2
Piirrä 23x23 kuvapisteen ympyrä ja aseta se kytkimen oikealle puolelle. Lisää 1px # B6B6B6 -reuna. Siirry nyt kohtaan Liukuvärit> Kartio ja lisää kuusi tasaisesti väripistettä, jotka vaihtelevat #FFFFFF: n ja #DDDDDD: n välillä metallitehosteeksi.
14. ON-kytkimen tiedot 3
Kopioi juuri tekemäsi piiri ja liitä se alle. Muuta täyteväriksi # 000000 ja poista kaikki tyylit. Siirry nyt Suodattimet> Hämärtää> Gaussin hämärtää ja aseta hämärtämisen säde arvoon 2.1. Paina OK ja siirrä ympyrää 2px alas ja 2px vasemmalle. Aseta opasiteetti 50%: iin.
15. OFF-kytkin
Ryhmittele virtakytkin ja kopioi sitten tämä ryhmä ja siirrä se edellisen ryhmän oikealle puolelle. Muuta teksti, jossa lukee PÄÄLLÄ, asentoon POIS ja siirrä se kytkimen oikealle puolelle. Siirrä nyt kaksi ympyrää kytkimen vasemmalle puolelle ja siirrä varjo 4px oikealle.
16. Profiililaatikko
Piirrä 200x170 kuvapisteen suorakulmio varmistaen, että se on linjassa muun sarjan kanssa, jotta tiedosto pysyy siistinä. Täytä väri #FFFFFF: llä ja aseta 1 kuvapisteen reunukseksi # 999999. Piirrä tämän ruudun yläosaan 200x82 kuvapisteen suorakaide, jonka 1 kuvapisteen reunus on # 0F3756.
17. Profiililaatikon yksityiskohdat
Siirry PP: ssä kohtaan Gradientti> Lineaarinen ja lisää kolme väripistettä: # 2685C9, # 268EDE, # 1F6EA7, eriteltyinä kuten kuvaruudussa. Kopioi suorakulmio ja liitä se toisen päälle. Pienennä leveyttä ja korkeutta 2 kuvapistettä ja lisää 1 kuvapisteen reunaväri # 2B93E3.
18. Profiililaatikon tiedot 2
Kirjoita Arvo-kirjasimeen, koko 20, väri # 0D2C42, profiilin nimi, jonka haluat näkyvän profiiliruutuun, ja keskitä se sitten sinisen laatikon yläosaan. Kopioi ja liitä tämä teksti, vaihda väriksi #FFFFFF ja siirrä se 1px alaspäin.
19. Profiililaatikon kuva
Liitä profiilikuvasi ja muuta sen kokoa 60x60px. Piirrä ympyrä kuvan päälle, varmista, että siinä ei ole täyttöä eikä reunusta. Valitse sitten ympyrä ja kuva, siirry kohtaan Muokkaa> Peite> Ryhmä maskina. Kopioi tämä ympyrä uudelleen ja lisää 2px #FFFFFF -reuna.
20. Kohdistukset-paneeli
Helpoin tapa keskittää profiilikuva laatikon keskelle on käyttää Tasauspaneelia. Näytä ikkuna valitsemalla Ikkuna> Kohdista. Napsauta nyt profiilikuvaa ja napsauta ruutua, johon haluat keskittää kuvan, ja napsauta sitten Kohdista vaaka keskelle.
21. Profiililaatikon bioteksti
Meidän on lisättävä bioteksti profiiliruutuun, jotta käyttäjät voivat saada lisätietoja henkilöstä. Aiomme käyttää Arialia tekstissä 13px # 666666. Lehdistö T kirjoita teksti -työkalulle ja kohdista teksti yksinkertaisesti laatikon keskelle.
22. Luokitustähdet
Pidä Muodot-painiketta painettuna ja näet tähden. Piirrä yksi 28x26px-tähti ja kopioi viisi kertaa, joka kerta siirtämällä sitä edellisen vieressä. Ensimmäisellä tähdellä, käytä samaa tyyliä, jota käytimme vaiheessa 2, ja jätä loput #FFFFFF-täytteellä ja #BFBFBF-reunuksella.
23. Järjestä!
Jos et ole vielä järjestänyt tiedostoa, kun olet seurannut tätä opetusohjelmaa, muista tehdä se nyt. Käyttää Ctrl + G ryhmitellä kukin elementti ja nimetä sen mukaan. Tämä on tärkeää, varsinkin jos aiot muokata tätä käyttöliittymäsarjaa tulevaa käyttöä varten.
24. Lisää sivutus
Kopioi aiemmin tekemämme Normaali painike -ryhmä ja siirrä se kankaan toiseen osaan. Käytä Suora valinta -työkalua ja muuta kummankin suorakulmion koko 30x30 kuvapisteeksi ja muuta teksti niin, että se on nuoli ja keskitä se neliöön.
25. Kopioi ryhmä
Kopioi juuri luomasi ryhmä ja siirrä se oikealle. Jätä kaikki ennalleen, mutta vaihda tekstiksi 1. Tee sitten sama uudelleen, mutta siirrä ryhmää edelleen oikealle ja vaihda tekstiksi>.
26. Kopioi uudelleen
Kopioi yksi näistä sivutusryhmistä uudelleen. Täytä välissä oleva tila vielä kuudella kaksoiskappaleella. Muuta numerot niin, että ne ovat välillä 2-7. Valitse sitten jokin näistä ruuduista Suora valinta -työkalulla, vaihda täyteväriksi #FFFFFF ja reunaväriksi #BFBFBF
27. Sosiaaliset painikkeet
Sosiaalisten painikkeiden saaminen käyttöliittymäpakettiin on aina kätevää. Lataa mukana olevat sosiaaliset kuvakkeet ja lisää ne käyttöliittymäsarjaan, jotta niitä on helppo käyttää, kun niitä tarvitaan. Jos tunnet itsesi taitavaksi, voit aina mukauttaa ne ja tehdä niistä mielenkiintoisempia.
28. Tee viimeinen järjestely!
Tärkein asia tarkistaa suunnittelun lopussa on, että olet järjestänyt tiedoston oikein. Jos et ole, palaat tulevaisuudessa ja ihmettelet, missä asiat ovat. Joten, tee viimeinen tarkistus ja varmista, että kaikki on ryhmitelty ja nimetty vastaavasti.
Sanat: Alex Brooke
Piditkö tästä? Lue nämä!
- Kuinka rakentaa sovellus: kokeile näitä upeita opetusohjelmia
- Lopullinen opas logon suunnitteluun
- Photoshop-vinkkejä, temppuja ja korjauksia, joita voit kokeilla tänään
Kysymyksiä? Kysy kommenteissa!
