Oppitunti: Miten suunnitella Chatroom IPhone UI
Tässä opetusohjelmassa aiomme suunnitella iPhone-käyttöliittymän foorumiin ja chat-pohjaiseen mobiilisovellukseen.
Sovellukseen kuuluu kourallinen jokapäiväisiä kosketusnäyttöelementtejä, kuten painikkeita, syöttökenttiä ja kosketustoimintoja.
Käsittelemme erilaisia Photoshop-työkaluja, kerrostuotteita ja tietysti kaikkia suunnittelua koskevia rajoituksia. samoin kuin mallipikselin täydellinen ja kauniin tarpeeksi, jotta se olisi arvokas paikka iPhonen näytöllä.
Suunnittelu koottiin Photoshop CS5.5: n avulla, mutta kaikki Photoshopin viimeisimmät versiot toimivat ihanan.
Sovellusnäyttövaatimukset
Aiomme vain luoda yhden näytön tässä opetusohjelmassa. Näyttö tulee olemaan chat-sovelluksen pääasiallinen chat-näyttö, aivan kuten julkinen keskusteluhuone, mutta puhelimessa. Tämän näytön vaatimukset ovat:
- Otsikko - tämä on chat-huone, johon olet tällä hetkellä.
- Takaisin / sulje / aiheet -painike - palataan edelliseen näyttöön.
- Ihmispainike - tämä näyttää kuka on tällä hetkellä chat-huoneessa.
- Viestien luettelo - viestien on oltava avatar ja aikaleima.
- Tapa katsella käyttäjien profiileja ja raportoida viestejä.
- Tekstikenttä, jolla voit kirjoittaa viestejäsi.
- Lähetä-painike viestien lähettämiseen.
Suunnittelu, luonnos ja langankirjoitus
Kuten minkä tahansa käyttöliittymäprojektin kanssa, käyttöliittymän suunnittelu, luonnos ja rajapinta on välttämätön. Se sulkee usein outoja ideoita (vaikka ne eivät ehkä näytä typerältä päässään!) Ennen digitaalisten konseptien ja mokkojen asettamista yhteen. Mikä voisi tuntua loistavalta ratkaisulta ongelman ratkaisemiseen päässään, ei lopulta voi toimia lainkaan käytännössä, minkä vuoksi johdonseuranta ennen hankkeen käynnistämistä on niin tärkeä askel.
Tartu kynään ja suosikki-tyynysiisi ja aloita luonnostelu.
Kuten yllä olevasta kuvastosta näet, vietin vain muutaman minuutin yhdistämällä kolme erilaista konseptia; yleensä tämä prosessi kestää päiviä tai joskus viikkoja, mutta kun suunnittelemme vain yhden näytön ja sovelluksen tarkoitus on yksinkertainen, niiden luonnos ei kestä kauan! Ne ovat useimmiten hyvin samankaltaisia, mutta jokaisella on ainutlaatuiset erimielisyytensä, joista kerrotaan alla.
Sketch A
Alkuperäisen Twitter-käyttöliittymän innoittamana iPhonelle tämä käyttöliittymä antaa käyttäjille mahdollisuuden pyyhkäistä viestin nähdäksesi lisää vaihtoehtoja, kuten "Näytä profiili" ja "Raportoi käyttäjä" - hauska ja tilaa säästävä tapa sallia lisää sisältöä tällä näytöllä. Aloitin idean asetuspainikkeen näyttäminen navigointipalkissa tällä näytöllä, mutta päätin noudattaa normaalia sääntöä "Vähemmän enemmän" - epätodennäköistä, että käyttäjä käyttää asetuksia aina, kun he käyttävät sovellusta, joten sitä ei tarvita tässä.
Luonnos B
Tämä käsite on hieman kompakti ja "Näytä profiili" ja "Raportoi käyttäjä" painikkeet ovat staattisia kuvakkeita viestien oikealla puolella. Pelasin ajatusta siitä, ettei tässä ole Send-painiketta, vaan käyttää iOS-näppäimistön lähetyspainiketta. Päätin tämän, koska useimmat sovellukset (mukaan lukien iOS-standardin sovellukset, kuten viestit) sisältävät näppäimistön lähetyspainikkeen sekä tekstinsyöttökentän vieressä olevan ylimääräisen lähetyspainikkeen. Haluan pitää liitännät yhteensopivana App Storeen muiden kanssa.
Luonnos C
Sketch C on luonnos, jonka olen päättänyt käydä eteenpäin - selkäpainikkeen sijaan on suljinpainike. Mielestäni tämä tekee siitä selvemmäksi, että kun napsautat sulkeutumista, et enää ole osa tätä keskustelua (toisin kuin viestintäohjelmat, joissa voit palata, ja voi palata nähdäksesi kaikki aiemmat viestit). Ihmiset -painike näyttää luettelon chat-huoneessa olevista käyttäjistä, ja olen lukenut idean, jonka mukaan dia näkyy lisää ominaisuuksia (kuten Twitter-sovellusta), jotta käyttäjä voi tarkastella käyttäjän profiilia tai ilmoittaa niistä.
Kun tämä on tehty, on aika siirtyä tekemään jotain Photoshopissa!
Vaihe 1: Tila ja navigointipalkki
Ennen kuin jatkamme tätä vaihetta, meidän on luotava asiakirjaamme. Normaali iPhone -näytön koko (Retina-tarkkuudella) on 640px leveä ja 960px korkea ja resoluutio 326ppi. Minulla on taipumus aina alkaa valkoisella taustalla omissa kuvissa.
Ensimmäinen askel on laittaa iOS-tilapalkkiin. Tilapalkki on iPhone-laitteen yläosassa oleva palkki, joka kertoo tärkeitä tietoja, kuten signaalia, operaattoria, aikaa ja akun käyttöikää. Tässä on kolme vaihtoehtoa: musta palkki, matala läpinäkyvä musta palkki tai hopea-palkki.
Jos haluat, että sovelluksen suunnittelu näyttää todelliselta, voit napata tilarivin Retina iPhone GUI PSD -tuotteesta löytyy täältä . Lataa ja avaa PSD ja vedä haluamasi palkki PSD-dokumentille. Aseta se kankaasi yläosaan.
Navigointipalkki on seuraava tehtäväluettelossamme. Normaali navigointipalkki on 86px korkea ja kattaa koko iPhone-leveyden (640px). Jälleen voit vetää tämän elementin edellä mainitusta PSD-paketista tai voit luoda tämän manuaalisesti (ensisijaisena vaihtoehtona, koska siihen ei ole liitettyjä tyylejä). Valitse suorakulmion muotoinen työkalu ja aseta 640 x 86 pikselin suorakulmiota kangaspuhelimeen.
Vaihe 2: Navigointipalkin painikkeet
Viitaten takaisin langankorkeisiin, meillä on kaksi nappia nav-palkissamme. Valitse pyöristetty suorakulmion muoto -työkalu (muistaa aina käyttää muototyökaluja muotoihin käyttöliittymän suunnittelussa, joten asiakirjan skannaaminen on helpompaa pienemmillä tarkkuuksilla!). Olen käyttänyt mitat 100 x 50px ja 6px: n kulmareuna.
Aseta tämä muoto navigointipalkin vasemmalle ja oikealle puolelle ja aseta ne kauniisti.
Vaihe 3: Tyylien valinta
On aika alkaa valita muotoilutyyli. Tämä sovellus antaa ihmisille mahdollisuuden keskustella ja tavata uusia ihmisiä ja antaa ihmisille mahdollisuuden pitää hauskaa. Tästä syystä minusta tuntuu hauska, omituinen värimalli ja typografia täällä on tärkeää auttaa saamaan tämä kohta läpi.
Valitse Tyyppi -työkalu ja valitse kirjasintyyppi, joka vastaa pääosi kuvaa. Valitsin kuplan Arial pyöristetty MT lihavoitu . Kirjoita aiheesi nimi (valitsin "UI Design") ja kohdistan sen keskeisellä tavalla navigointipalkkiisi.
Jatketaan hauska teemaa, joka on valittu app, on aika valita joitakin värejä. Käytän henkilökohtaisesti Värin ystävät auttamaan inspiroimaan värivalintoja suunnitellessani. Tässä nimenomaisessa tapauksessa etsin "hauskaa" ja muutamassa sekunnissa minulle esiteltiin paljon erilaisia vaihtoehtoja ja inspiroivia paletteja, joita voin käyttää mallina suunnittelun perustana.
Päätin noutamaan yhden kutsutun Leikkihuone . On tärkeää miettiä, mitä värejä tarvitset palettien valitsemiseen; Minusta valitaan jotain valoa, jotain pimeää, ja jokin kirkas on aina hyvä lähtökohta. Suunnittelussa on tärkeää olla hyvä kontrasti.
Vaihe 4: Navigointipalkin muotoilu
Aiomme nyt siirtyä takaisin navigointipalkkiimme ja antaa sille sen ansaitseman värin. Valitse navigointipalkin kerros (toivottavasti pidät tasosi järjestyksessä!), Napsauta hiiren kakkospainiketta ja valitse Sekoitusasetukset. Tämä on koti tehokkaimmista Photoshop-työkaluista, kun kyseessä on pikselin täydellinen käyttöliittymä. Tästä voit lisätä varjoja, kaltevuuksia, kuvioita ja varastoja, joiden avulla voit kopioida ja liittää nämä tyylit muihin tasoihin.
Ensinnäkin aiomme lisätä kaltevuuden palkkiimme, niin klikkaa Gradient Overlay. Olen valinnut turkoosi värin, jota haluan käyttää navigointipalkillani. Se on kirkas ja se sisältää voimakkaan lävistysmomentin, joka tekee suunnittelusta helppoa muistaa. Käytä 90 asteen kulman gradienttia, joka menee valolta (ylhäältä) tummaksi (pohja).
Napsauta sitten ajauspaneelia. Muuta aivosi koko 2 oletusarvon sijasta 2. Tipi on aina yrittää välttää parittomia numeroita käyttöliittymän suunnittelussa, erityisesti mobiililaitteissa. Tämä tekee vain enemmän työtä sekä suunnittelija että kehittäjä, kun kyseessä on työn skaalaaminen (ei voi olla puolet 3 pikseliä, koska puolipistettä ei ole olemassa!).
Vaihda aivosi tyyppityyppi gradientiksi ja varmista, että aivohalvaus tulee näkyviin muodon ulkopuolelle. Valitse tumma turkoosi väri aivohalvauksen alareunaan ja musta yläosaan. Koska aivohalvaus on navigointipalkin ulkopuolelta, iskun musta osa ei näy tilapalkin yläpuolella, ja siksi kaikki käyttäjä voi nähdä, onko aivohalva alhaalla.
Valitse Sisäpohja-paneeli ja käytä 15%: n läpikuultamatonta valkoista varjoa palkkiisi. Tämä näkyy palkin yläosassa ja antaa sille hienon korostuksen, jolloin se näyttää enemmän 3D: stä. Annoin varjoni etäisyyden 2px ja koko 3px.
Nyt on aika todella tehdä navigointipalkin pop. Käyttämällä kuvioita voimme lisätä paljon syvyyttä suunnitteluomme. Käytän valkoisen ruudukon kuvaketta navigointipalkissani. Jos haluat käyttää tätä mallia, voit ladata sen kokoelman ilmaiseksi osoitteessa Premium-pikselit .
Vaihe 5: Typografia varjostettu
Jotta typografia olisi syvyys, avaa sulatusasetukset-paneeli ja pudota varjo. Muuta kulma -90: een (varmista, että Käytä yleistä tyyliä ei ole tarkastettu tässä muussa tapauksessa kaikki mallin varjot muuttuvat -90: ksi) ja käyttävät samaa väriä, jota käytit navigointipalkkien alareunan alareunaan. Anna varjolle etäisyys 2px ja pudota koko 0px. Tämä antaa puhtaan leikkauksen varjostuksen tekstin yläpuolelle heti, mikä tekee siitä mielenkiintoisemman.
Vaihe 6: Navigointipalkin muotoilu
Aiomme nyt soveltaa hienoja tyylejä navigointipalkkeihin. Haluamme, että nämä painikkeet sitovat hyvin navigointipalkkiimme, mutta samaan aikaan heidän on erottua tarpeeksi hyvin, jotta käyttäjä voi heti tunnistaa, että ne ovat painikkeita. Tätä varten aiomme käyttää useampia kerrostyyliä antamaan heille 3D-näkökulma, silmiinpistävä vaikutus.
Avaa sekoitusasetukset-paneeli ja napsauta kaltevuuspeitettä. Anna painallesi valo (ylhäältä) tummalle (alhaalla) gradientille käyttämällä värejä navigointipalkista. Valon väri valittiin nav-palkin kohokohdasta, ja tumma väri valittiin nav-palkin alareunasta.
Valitse lyöntipaneeli ja muuta lyönnin koko 2px: ksi, jossa on ulkopuolinen sijainti. Vaihda täyttötyyppi gradientiksi ja kulmaksi 90 astetta. Vaihda kaltevuustestit valolta (ylhäältä) tummemmaksi (alhaalta), joka perustuu väreihin, jotka ovat jo käytössä navigointipalkissa ja painikkeissa. Välittömästi näet, että tämä aivohalva antaa painallukselle 3D-ilmeen, aivan kuin se tulee ulos navigointipalkista sen sijaan, että se istuisi sen päälle.
Jos haluat kuopata painiketta hieman enemmän ja tehdä siitä vieläkin visuaalisesti houkuttelevammaksi, lisäämme painikkeen sisäisen hehkun. Napsauta sisäistä hehkulamppua ja muuta sekoitustilaa näytölle. Pudota peittävyys 20%: iin ja varmista, että kohina on 0%. Muuta keltaisen hehkun oletusarvoiseksi valkoiseksi ja varmista, että koko on edelleen asetettu 5px-oletusarvoksi. Tämän pitäisi antaa painallukselle mukava sisäinen hehku, jolloin painike näyttää todella kosketeltavalta!
Aiomme nyt lisätä sisäisen varjon, jotta nappamme on hieman realistisempi. Vaihda peittävyys 15 prosenttiin ja valitse musta väriseksi. Pudota etäisyys 2px ja koon 4px. Nyt vaihda kulma -90 asteeseen (varmista, että Käytä yleistä valoa ei ole valittu). Tämä antaa nappimenne pohjalle hieman varjoa, piilottamalla osaa pohjasta, jota juuri käytimme. Todellisessa elämässä tämä alue olisi varjostettu, joten oli tärkeää piilottaa sisäinen hehku täällä.
Lopettamalla painikkeen muotoilu aiomme lisätä pudotusvarjon. Valitse pudota varjopaneeli ja muuta väri valkoiseksi, jonka peittävyys on 25%. Tämä varjo tulee toimimaan korostuksen alla aivohalvauksen alapuolelle, joten vaihda etäisyys 4px: een (2px kattavuuden alueelle ja 2px, joka näkyy aivohalvauksen alapuolella).
Vaihe 7: Painikkeen etiketit
Painike, jolla ei ole tarraa, on hyödytön, joten nyt aiomme viettää vähän aikaa lopettamalla painikkeet. Ensinnäkin napsauta hiiren kakkospainiketta tyylikäs painike ja valitse Kopioi tasotyyli -vaihtoehto. Napsauta hiiren kakkospainikkeella un-styled -painiketta ja valitse Liitä tasatyyli -vaihtoehto.
Aiomme jatkaa työtä meidän oikealla painikkeella ensin. Tämä painike on merkitty "Ihmiset" ja haluamme käyttää 2+ ihmistä. Tämän opetusohjelman vuoksi aion käyttää luovia studio Yummygum-kuvakkeita; löydät pakkauksen, jota käytin IconSweets.com - Käytän kuvakkeita tästä pakkauksesta koko opetusohjelmassa.
Käytä samaa kirjasinta, jota käytit navigointipalkin otsikkoon, kirjoita painikkeet etikettiin. Muuta kokoa ja aseta se painikkeeseesi ja aseta haluamasi kuvake (tai tee oma) asiakirjallesi. Aseta nämä kaksi kerrosta yhtäpitävästi painallasi. Olen asettanut kerroksen välille niin, että ne ovat 15px kummallakin puolella ja painikkeella ja 10px kuvakkeen ja tekstin välissä. Liitä kerroksen tyyli navbar-aiheen tekstistä sekä kuvakkeeseen että painikkeen etikettiin. Jos haluat muuttaa painikkeen pituutta, valitse oikean valintatyökalun avulla 4 ankkurointipistettä ja vedä sitten. Pidä shift-näppäintä alhaalla pitämään tämä muutos suorana.
Toista tämä prosessi napauttamalla navigointipalkin vasemmalla puolella olevaa painiketta tällä kertaa käyttämällä ristikuvaketta ja sanaa "Sulje". Jotta voisit lisätä hieman enemmän muotoilua painoihin, alensin kaksi taustan muotoa 95%: iin, tämä mahdollistaa sen, että sen alapuolella oleva grid-kuvio loistaa.
Vaihe 8: Tekstikentän palkki
Nyt on aika kiinnittää huomiota muuhun näytöksiimme. Tartu suorakulmionmuotoiseen työkaluun ja käytä samaa ulottuvuutta navigointipalkin (640 x 86 pikseliä) muotoilemalla kankaaseesi. Aseta se näytön alareunaan.
Vaihe 9: Tausta
Suunnittelemme nyt taustalla. Avaa sekoitustekniikka-paneeli taustakerrokseen ja valitse kuvio, joka täyttää sen. Käytin tumma kuvio, jossa pystysuorat viivat kulkivat sen läpi Hienot mallit - voit ladata täyden kuvion, joka on erittäin suositeltava.
Jos haluat lisätä joitain omia värejä valittuun kuvioon, voit tehdä sen käyttämällä värin peittotyyliä. Sovelin ruskeaa (minun valintani värivalikoimasta) 35%. Tämä opasiteetti on riittävän alhainen, jotta tekstuurisi / kuvasi voi näkyä vielä riittävän korkeana sävyttääksesi väriä tai taustaasi.
Nyt meillä on tumma tausta, näet sen kohdan, jossa navigointipalkki täyttää taustakuvan, ei näytä kovin hyvältä. Voit helposti korjata tämän käyttämällä varjostityylisi navigointipalkillesi, mikä tekee siitä siltä kuin se on taustan yläpuolella.
Avaa uudelleen navigointipalkin sekoitusasetukset-paneeli ja valitse varjostuspaneeli. Varmista, että musta on valittu ja muuta läpikuultavuus 25%: iin. Lisää etäisyyttä 6px ja koon 10px ja valitse OK. Saatat joutua kokeilemaan näitä vaihtoehtoja, sillä tulokset vaihtelevat taustasi valitseman tekstuurin / kuvion värin ja tyypin mukaan.
Vaihe 10: Viestit
Nyt kun olemme saaneet taustavalikon ja ylimmäisen navigointipalkin loppuun, keskitymme päästäkseen sovelluksen pääsisältöön. Valitse suorakulmion muotoinen työkalu ja aseta suorakulmio kankaaseesi. Käytetty leveys oli 600px, mikä mahdollisti 20px: n muodon molemmilla puolilla. Käytin paljon kevyempää versiota keltaisen / creme-värin väripaletista, jonka otin aiemmin.
Valitse Pyöristetty suorakulmion muoto -työkalu ja muuta mitat 80 x 80px ja säde 6px. Aseta muoto (jota käytetään avatar-muodoksi) kankaaseesi ja aseta se oikein. Jotta suunnitteluni pysyisivät johdonmukaisina, olen antanut 20px: n istua viestin taustakuvani ja avatarin muodon reunoille.
Kirjoita tekstityökalulla nimi ja viesti; Käytin Arial Pyöristetty MT lihavoitu nimeni ja normaali Arial viestini tekstimuodossa tekstiasi niin, että se sopii hienosti viestisi taustakuvioon.
Aiomme nyt lisätä tyylin viestiimme vain väreillä; Muutin nimeni värejä tummaiseen turkoosiin (hyvin lähellä mustaa) ja turkoosiin, joka oli innoitettu navigointipalkillani.
Sitten lisäsin kuvan itsestäni siirtymällä Tiedosto> Paikka. Kun olet lisännyt kuvan, muokkasin kuvan ja asetin sen aiemmin luomaani mustaan avatarlaatikkoon. Voit säästää kuvan leikkaamista ja antaa myös mahdollisuuden siirtää tai muuttaa avatarasi myöhempänä ajankohtana napsauttamalla sitä hiiren kakkospainikkeella ja valitsemalla Luo leikkausmaskit -vaihtoehto. Tämä linkittää avatarisi kuvan avatar-mustaan ruutuun ja näyttää vain sen, mikä on mustan laatikon yläpuolella. Löydät Move Tool -työkalun avulla, jota voit edelleen siirtää ja muuttaa tätä kuvaa.
Käyttämällä toista IconSweets-kuvaketta luotiin kiva pieni aikaleima. Minun piti pienentää kuvakekokoa - voit tehdä sen siirtymällä Muokkaa> Muunna> Vapaa muunnos ja muuttamalla ulottuvuuksia (pikseleillä tai prosentteina). Käytin 70% leveydestä ja korkeudesta pitämään mittasuhteet. Lisäsin tekstiä ja voilaa. Muista valita väri, joka on helppo lukea, mutta ei huutaa huomiota.
Vaihe 11: Kopioi viestit
Kopioi viestilaatikot toistensa alle jättäen 2px-kuilu jokaisen taustakuvion väliin. Voit tehdä tämän joko napsauttamalla ja vetämällä tasoja New Layer -kuvakkeen päälle tai vaihtoehtoisesti voit painaa Cmd + Shift + alas -näppäintä samanaikaisesti, kun haluat kopioida ja nudistaa kerrokset alaspäin.
Muuta kaikki viestilaatikoiden sisältö, aivan kuin se olisi todellinen keskustelu. Jos haluat muuttaa taustakuvioidesi kokoa, käytä suoraa valintatyökalua ja muuta ne ankkurointipisteiden avulla. Tämä pitää kaikki reunat mukavina ja terävinä.
Vaihe 12: Viesti muotoilu
Tällä tavoin voimme nyt keskittyä viestikenttien tuomiseen elämään. Avaa sekoitusasetukset-paneeli ja valitse pudota varjopaneeli. Vaihda sekoitustila normaaliksi ja valitse väri väriksi. Lisää opasiteetti 80% standardin 75% sijasta ja anna varjolle etäisyys 2px. Tämä piilottaa 2px-ero, joka jätettiin viestikentän taustakuvan väliin.
Kopioi ja liitä yllä oleva tasotyyli kaikkiin viestikentän taustakerroksiin. Sinun pitäisi päätyä jotain edellä.
Vaihe 13: Pyöristettyjen kulmien lisääminen
Suunnittelun tekemiseksi mielenkiintoisemmaksi ja syvemmälle lisäämme viestejämme alareunaan pyöristettyjä kulmia ja näyttävät siltä, että se on paperia, johon on lisätty enemmän paperia.
Valitse pyöristetty suorakulmion työkalu ja anna sille säde 10px. Muuta leveyttä arvoon 600px (tai mitä tahansa leveyttä, jota käytät viestilaatikkosi taustalla) ja korkeus, joka ei ylitä pohjan viestikentän taustan korkeutta. Käytin kirkkaan värin täällä niin, että se on helposti näkyvissä.
Käytä Direct Selection Tool -työkalua valitsemalla vektorimuodon kerroksen sisältö (pyöristetty ruutu, jonka olemme juuri piirtäneet) ja siirry kohtaan Muokkaa> Kopioi. Napsauta pohjan viestikentän taustakuvan vektorin muotoista kerrosta ja siirry kohtaan Muokkaa> Liitä. Tämä liittää muodon kerroksen sisältö toiseen muotokerrokseen. Nyt voit poistaa edellisen vaiheen mukaisen muodon. Sinun pitäisi silti nähdä muoto näkyväksi.
Avaa sekoitusvaihtoehdot alaviestin laatikon taustasta ja käytä pudota varjoa. Vaihda väri mustaksi, peittävyys 25%, etäisyys 1px ja koko 3px. Tämä luo mukavan hienovarren pudotusvarjon.
Kopioi tämä kerros ja siirrä se alaspäin 5px. Aseta kerros uudelleen siten, että se istuu alkuperäisen alapuolella. Sinun pitäisi päätyä jotain vastaavaa alla. Kuten näette, tämä on yksinkertainen tapa luoda päällekkäinen paperiarkki.
Toista vaihe uudelleen niin, että sinulla on kolme kappaletta paperia vain kahden sijasta. Haluat ehkä antaa alhaiselle paperille hieman huomaamatta pudotusvarjon.
Vaihe 14: Navigointipalkin varjo
Olet todennäköisesti huomannut, että vaikka suunnittelemme sanomakenttiä, me kätketimme suurimman osan pudotuksesta, jonka navigointipalkki valaisi taustallemme. Voit korvata tämän joko sijoittamalla viestejä navigointipalkin alle (helppokäyttöinen vaihtoehto, mutta epärealistinen) tai suorita seuraava vaihe.
Valitse Suorakulmainen Marquee -työkalu ja piirrä laiha viiva viestejäsi yläreunaan edellä. Täytä se mustalla uudella kerroksella.
Siirry Suodatin> Epätarkkuus> Gaussian Blur ja käytä hämärtymistä. Tämä toimii nyt varjona - vain leikkaat kaikki hämärtymän bittiä, jotka ovat päällekkäisiä viestikentän taustan reunojen kanssa.
Vaihe 15: Profiilin ja raportin painikkeet
Viitaten takaisin langankorkeisiin, olimme päättäneet antaa käyttäjille pyyhkäisemällä viestejä vasemmalle paljastaakseen lisää painikkeita. Tällöin kyseiset painikkeet antavat käyttäjälle mahdollisuuden tarkastella viestin julisteprofiilia tai ilmoittaa viestin julisteen.
Valitse kerrokset, jotka muodostavat jonkin viestisi (valitsemme Homer Simpsons -viestin) ja siirrä -näppäintä ja nuolinäppäimiä, siirrä viestisi 10px kerralla vasemmalle. Kirjoita tekstityökalulla merkintöjäsi ja valitse sitten jotkin kuvakkeet vastaamaan kyseisiä tarroja. Valitsin yksittäisen henkilön profiilille ja raportin tavoite (ikään kuin ampuisit niitä - mielestäni tämä oli varsin hauskaa!).
Jotta saisit tämän alueen syvemmälle, lisäsin mustan pudotusvarjon sekä kuvakkeisiin että tekstiin.
Vaihe 16: Tekstikentän palkki
Tekstikenttäpalkki on yksi tämän näytön tärkeimmistä elementeistä. Käyttäjien on voitava syöttää viestejään helposti ja epäselvyyksien vuoksi (siksi poistin piilotettu lähetyspainikkeen alkuperäisissä luonnoksissa).
Aloita etsimällä taustakerros ja kopioit tasotyypit. Liitä nämä kerrointatyypit aiemmin luotuun tekstikentän palkkikerrokseen. Avaa tämän kerroksen sekoitusasetukset ja valitse lyöntipaneeli. Käytä 2p-iskun muotoilun ulkopuolelle kiinteällä mustalla värillesi. Kun aivohalvaus on ulkona, ja muoto koskettaa kolmea reunaa kangasta, vain aivohalvaus yläosassa tulee näkyviin.
Valitse nyt sisäinen varjo-välilehti ja muuta sekoitustilaa normaaliksi, väri valkoinen, opasiteetti 10% ja etäisyys 2px. Varmista, että kulma on asetettu globaalin valon oletusasetukseksi (90 astetta) ja napsauta OK. Tämä antaa meille mukavan korostuksen alla mustan aivohalvauksen alapuolelle. Näiden kahden yksinkertaisen 2px-viivan avulla tekstikenttäpalkki näyttää jo hyvin erilliseltä muusta taustasta, vaikka sillä on sama tausta!
Valitse pyöristetty suorakulmio -työkalu. Anna työkalulle suuri säde, käytin 50px; tämä antaa sille erittäin pyöreät (pyöreät) päät. Aseta muotosi baarille, käytin 460x54px mitattuna. Varmista, että tekstikentän muoto vasemmalla puolella on 20px päässä kangastasi vasemmalta puolelta, jotta suunnittelun välitilanne pysyy samana.
Täytä muoto tummalla värillä (käytin ruskeaa valittua taustalla olevasta tummasta pikselistä) ja avaa sitten tasomuodot-paneeli. Käytä 2px valkoinen pudotusvarjon tekstikenttään, jonka läpinäkymättömyys on 10%.
Napsauta sisäistä varjopaneelia ja käytä sisäistä varjoa tekstikentän muotoon. Tämä antaa sille paljon syvyyttä ja tekee siitä näyttävän, että se leikattiin baarien taustalle. Käytä mustaa sekoitusmoodissa, joka on kerrottu ja peittävyys on 25%. Käytin 5px etäisyytenä ja 10px kokoisena, vaikka haluat kokeilla täällä.
Kirjoita tekstityökalun avulla Arial Pyöristetty MT lihavoitu, kirjoita "Kirjoita kommentti ..." ja aseta se tekstikentän kenttään. Avaa uuden tekstikerroksen sekoitusvaihtoehdot ja käytä musta pudotusvarjon, jonka peittävyys on 75%, etäisyys 2px ja koko 3px.
Vaihe 17: Tekstikentän painike
Valitse uudelleen pyöristetty suorakulmion muotoinen työkalu ja käytä samaa sädeasetusta ja korkeutta, jota aiemmin käytimme ja aseta muoto tekstikentän palkin taustalle. Muuta painikkeen pituutta siten, että se istuu 10 kenttään tekstikentältä ja 20 kiloa kangasta oikealta reunalta.
Napsauta hiiren kakkospainikkeella uudella painikkeen muodon kerroksella ja valitse sekoitustyökalut. Valitse kaltevuuden peittopaneeli ja käytä kaltevuutta valolta (ylhäältä) tummaksi (pohja). Käytin upeaa keltaista väriä, joka oli aiemmin valinnut väripaletti.
Suunnittelun johdonmukaisuuden säilyttämiseksi aion käyttää napin painallusta, joka näyttää siltä, että se tulee ulos taustasta, aivan kuin meillä oli navigointipalkin painikkeilla. Tällä kertaa käytin kiinteää mustaa kaltevuuskulman sijaan, koska tausta on paljon tummempi eikä se ole täynnä kaltevuutta. Käytin 2px aivoverenkierron muotoiluni sisälle 100%: n läpikuultamisella.
Valitse tekstityökalu ja kirjoita "Lähetä" painikkeeseesi. Avaa uuden tekstikerroksen sekoitusvaihtoehdot ja anna tekstillesi ruskea pudotus varjosta, jonka etäisyys on 1px ja koko 3px.
Ja kun se on valmis, olemme kaikki valmiit! Haluamme nähdä tuloksesi, joten ole hyvä ja lähetä ne alla olevaan kommenttiin. Jos haluat nähdä suunnittelun täydellä tarkkuudella, näet sen tässä .