Kennsla: Hvernig á að hanna Chatroom IPhone UI
Í þessari einkatími ætlum við að vera að hanna iPhone notendaviðmót fyrir vettvangsforrit og spjallatengda farsímaforrit.
Forritið inniheldur handfylli af daglegu snerta tengi þætti, svo sem hnappa, inntak sviðum og snerta bendingar.
Við munum ná ýmsum Photoshop verkfæri, lag stíl og auðvitað takast á við hvaða hönnun þvingun; eins og heilbrigður að gera hönnun pixla-fullkominn og fallegur nóg til að vera verðugur af stað á iPhone skjár.
Hönnunin var sett saman með Photoshop CS5.5, en allar nýlegar útgáfur af Photoshop munu vinna frábærlega.
Kröfur um forritaskjá
Við ætlum bara að búa til eina skjá í þessari kennsluefni. Skjárinn er að vera aðal spjallskjár fyrir spjallþráð, líkt og opinber spjallrás, en á símanum þínum. Kröfur þessa skjás eru:
- Höfuð - þetta er spjallrásir sem þú ert núna í.
- A aftur / loka / efni hnappur - til að fara aftur á fyrri skjá.
- Hnappur fólks - þetta sýnir hver er í spjallinu.
- Listi yfir skilaboð - skilaboð verða að hafa avatar og tímastimpill.
- A leið til að skoða notendur snið og tilkynning skilaboð.
- Textareit til að skrifa skilaboðin þín.
- Sendi hnappur til að senda skilaboðin þín.
Skipulagning, skissa og vírframleiðsla
Eins og með hvaða notendaviðmót verkefni, áætlanagerð, skissa og vírframleiðsla er tengingin þín nauðsynleg. Það reglar reglulega út einhverjar kjánalegar hugmyndir (þótt þau gætu ekki verið kjánaleg í höfði þínum!) Áður en þú setur stafrænar hugmyndir og mockups saman. Það sem gæti virst eins og ljómandi lausn til að leysa vandamál í höfðinu gæti á endanum ekki verið í raun í raunverulegum æfingum. Þess vegna er vírframleiðsla áður en verkefnið hefst svo mikilvægt skref.
Takaðu pennann og uppáhalds púðarinn þinn og farðu að skissa.
Eins og sjá má af myndinni hér að framan, eyddi ég aðeins nokkrar mínútur til að setja saman þrjá mismunandi hugtök; Venjulega tekur þetta ferli daga eða stundum vikur, en þar sem við erum aðeins að hanna eina skjá og tilgangur forritsins er einföld, ætti að skissa þetta ekki lengi! Þau eru að mestu mjög svipuð, en hver og einn hefur sína einstaka munur, sem ég mun draga saman hér að neðan.
Skissa A
Innblásin af upprunalegu Twitter UI fyrir iPhone, leyfa þetta notendaviðmót notendur að þurrka á skilaboð til að skoða fleiri valkosti, svo sem "Skoða prófíl" og "Tilkynna notanda" - skemmtileg og rúmgóðu leið til að leyfa meira efni á þessari skjá. Ég týndi hugmyndinni um að hafa stillingarhnappinn í flakkastikunni á þessari skjá, en ákvað að fylgja venjulegum reglu minni "Less Is More" - það er ólíklegt að notandinn hafi aðgang að stillingum í hvert skipti sem þeir nota forritið svo að það sé ekki þörf hér.
Skýring B
Þetta hugtak er svolítið samningur, með "Skoða prófíl" og "Tilkynna notanda" hnappa sem truflanir tákn til hægri við skilaboðin. Ég spilaði með hugmyndina um að hafa ekki "Senda" hnappinn hér og nota staðinn í sendihnappnum á IOS lyklaborðinu. Ég ákvað þetta gegn því að flest forrit (þar á meðal IOS staðalforrit eins og skilaboð) hafa lyklaborðshnappinn og viðbótar sendahnappinn næst innsláttarsvæðinu. Mér finnst gaman að halda samskiptum mínum í samræmi við aðra í App Store.
Skissa C
Skýringin C er skýringin sem ég hef ákveðið að fara á undan með - í staðinn fyrir afturhnappinn höfum við loka hnappinn. Ég held að þetta muni gera það augljósara að þegar þú smellir á loka, verður þú ekki lengur hluti af því samtali (ólíkt skilaboðum forritum, þar sem þú ferð aftur og getur snúið aftur til að sjá öll þau fyrri skilaboð). Fólkið hnappur sýnir lista yfir notendur sem eru í spjallinu og ég hef lesið hugmyndina um að láta renna til að skoða fleiri eiginleikar þáttur (eins og Twitter app) til að leyfa notandanum að skoða notandans snið eða tilkynna þær.
Með þessu gert er kominn tími til að halda áfram að setja eitthvað saman í Photoshop!
Skref 1: Staða og flakk bar
Áður en við förum með þetta skref þurfum við að búa til skjalið okkar. Venjulegur iPhone skjár stærð (við Retina upplausn) er 640px breiður og 960px hár með upplausn 326ppi. Ég hef tilhneigingu til að byrja alltaf með hvítum bakgrunni í hönnun minni.
Fyrsta skrefið er að setja í sjálfgefna IOS stöðustikuna. Stöðustikan er barinn efst á iPhone sem segir þér mikilvægar upplýsingar, svo sem merki, flutningsaðila, tíma og rafhlöðulíf. Það eru þrjár valmöguleikar hér: svartur barur, lítill gagnsæ svartur barur eða silfurbar.
Ef þú vilt gera apphönnun þína líta út eins og raunverulegur samningur, getur þú gríft stöðustikuna frá Retina iPhone GUI PSD Kit fannst hér . Farðu einfaldlega niður og opnaðu PSD, og dragðu barinn sem þú vilt yfir á PSD skjalið þitt. Settu það efst á striga þínum.
Stýrihnappurinn er næst á lista okkar. Stöðluð siglingastikan er 86 px hár og nær yfir alla breiddina á iPhone (640px). Aftur geturðu dregið þennan þátt í ofangreindum PSD-búnaði, eða þú getur búið til þetta handvirkt (valinn kostur minn þar sem engar viðbótarstíll er að finna). Veldu Rectangle Shape Tool og settu 640 x 86px rétthyrningur á striga þínum.
Skref 2: Stýrihnappahnappar
Með tilvísun til vírramma okkar, höfum við tvær hnappar á navbarnum okkar. Veldu rétthyrnd formgerðartólið (Muna að nota alltaf verkfæri til að móta form í UI-hönnun, það gerir það miklu auðveldara að mæla skjalið okkar fyrir lægri upplausn!). Ég hef notað mál 100x50px með hornradíus 6px.
Leggðu þessa lögun á bæði vinstri og hægri hliðir á siglingastikunni og settu þau vel fram.
Skref 3: Stíll val
Það er kominn tími til að byrja að velja hönnunarsnið okkar. Þessi app mun leyfa fólki að spjalla og hitta nýtt fólk og leyfa fólki að hafa gaman að gera það. Af því ástæða finnst mér gaman, quirky litasamsetning og leturfræði hér er mikilvægt að hjálpa að ná því yfir.
Veldu tegundartólið og veldu leturgerð sem passar við myndina sem þú hefur í höfðinu. Ég valdi bubbly Arial Rounded MT Djarfur . Sláðu inn heiti efnisins þíns (ég valdi "UI Design") og stilltu það miðlægur á flipanum þínum.
Halda áfram með skemmtilegt þema sem við höfum valið fyrir forritið, það er kominn tími til að velja nokkur litir. Ég nota persónulega Litur Lovers til að hjálpa til við að hvetja litavalið mitt þegar ég er að hanna. Í þessu tiltekna tilviki leitaði ég að "gaman" og innan nokkurra sekúndna var ég kynntur með fullt af mismunandi valkostum og hvetjandi litatöflum til að nota sem grunn fyrir hönnunina.
Ég endaði með að velja einn sem heitir Leikherbergi . Það er mikilvægt að hugsa um hvaða litir þú þarft þegar þú velur litatöflu; Ég finn að velja eitthvað ljós, eitthvað dökkt og eitthvað bjart er alltaf gott upphafspunkt. Það er mikilvægt að hafa góðan andstæða í hönnun þinni.
Skref 4: Stýrihönnun
Við ætlum nú að fara aftur á flakkastikuna og gefa það litinn sem hann á skilið. Veldu lagalistann (ég vona að þú hafir haldið lagunum þínum skipulagt!), Hægri-smelltu og veldu Blending Options. Þetta er heimili öflugustu Photoshop verkfærin þegar kemur að því að búa til pixla fullkomna hönnun viðmót. Héðan er hægt að bæta við skuggum, stigum, mynstri og stokes, með getu til að afrita og líma þessar stíll á önnur lög.
Fyrst af öllu erum við að fara að bæta við stigi í bar okkar, svo smelltu á Gradient Overlay. Ég hef valið grænblár litinn og sá sem ég vil nota fyrir flakkastikuna. Það er björt og pakkar öflugt bolla og gerir hönnun okkar auðvelt að muna. Beittu 90 gráðu halla halli frá ljósi (efst) til dökkra (neðst).
Smelltu nú á Stroke spjaldið. Breyta stærð högg þinn í 2 í stað sjálfgefið 3. Ábending er að reyna alltaf að koma í veg fyrir skrýtið númer í UI hönnun, sérstaklega á farsímum. Þetta mun aðeins gera meira starf fyrir bæði hönnuður og verktaki þegar kemur að því að stigstærð vinnunnar (þú getur ekki hálft 3 pixlar sem hálf pixel er ekki til!).
Breyttu fyllingartegundinni á höggnum þínum til hallans, og vertu viss um að heilablóðfallið birtist utan á lögun þinni. Veldu dökk grænblár litur fyrir botn höggsins og svartur fyrir ofan. Vegna þess að höggið er utan við stýrihnappinn okkar mun svarta hluti höggsins ekki birtast ofan á stöðustikuna og því er allur notandi að geta séð er höggið neðst.
Veldu Inner Shadow spjaldið og notaðu 15% ógagnsæjan hvíta skugga á barnið þitt. Þetta mun birtast efst á barnum þínum og gefa það yndislegu hápunkti, sem gerir það virðast meira 3D. Ég gaf skuggann minn fjarlægð af 2px og stærð 3px.
Nú er kominn tími til að virkilega gera stýrihnappinn okkar. Með því að nota mynstur, getum við bætt mikið af dýpt í hönnun okkar. Ég er að nota hvítt ristarmynstur á flakkastikunni minni. Ef þú vilt nota þetta mynstur, getur þú hlaðið niður safn af þeim ókeypis á Premium punkta .
Skref 5: Typography skuggi
Til að gefa leturfræði okkar nokkuð dýpt skaltu opna blöndunartakkann og nota dropaskugga. Breyttu horninu til -90 (vertu viss um að Notaðu Global Style er ekki valinn hér annars munu allar skuggarnir í hönnun þinni breytast í -90) og nota sama lit sem þú notaðir neðst á strikunum þínum. Gefðu skugganum fjarlægð 2px og sleppið stærðina til 0px. Þetta gefur hreint skurðaðgerð skugga ofan við textann og gerir það áhugavert meira.
Skref 6: Stýrihnappur hnappastika
Við erum nú að fara að nota nokkrar ógnvekjandi stíll í hnappana okkar til að sigla á vegum. Við viljum að þessi hnappar bindi vel saman við stýrihnappinn okkar, en á sama tíma þurfa þeir að standa nógu vel út fyrir notandann að þegar í stað viðurkenna að þeir séu hnappar. Til að gera þetta, ætlum við að nota fleiri lagsstíl til að gefa þeim 3D, auga-pabbi áhrif.
Opnaðu blandunarvalkosti spjaldið og smelltu á yfirlínur á halli. Gefðu hnappnum ljós (efst) til dökkra (neðst) hallans með því að nota liti úr flipanum þínum. Ljóssliturinn var valinn úr hápunktinum á nafngarninu mínum, og dökk liturinn var valinn úr botni höggi á nafngarninu mínum.
Veldu höggspjaldið og breyttu stærð höggsins í 2px, með utanaðkomandi stöðu. Breyttu fyllingartegundinni til hallans og hornið í 90 gráður. Breyttu lóðréttum litum frá ljósi (toppur) til dökkra (neðst), byggðu liti á litum sem þegar eru notaðar fyrir flakkastikuna þína og hnappa. Strax getur þú séð að þetta högg gefur hnappinn þinn 3D útlit, eins og það sé að koma út úr flakkastikunni í stað þess að sitja ofan á það.
Að grenja hnappinn upp aðeins meira og gera það enn meira sjónrænt aðlaðandi, við ætlum að bæta innri ljóma við hnappinn. Smelltu á innri glóðu spjaldið og breyttu blandunarhaminum við skjáinn. Slepptu ógagnsæi í 20% og vertu viss um að hávaði sé stillt á 0%. Breyttu sjálfgefna gula ljómi í hvítt og vertu viss um að stærðin sé enn stillt á 5px sjálfgefið. Þetta ætti að gefa hnappinn góða innri ljóma, sem gerir hnappinn kleift að vera mjög snerta!
Við ætlum nú að bæta innri skugga til að gera hnappinn okkar örlítið raunsærri. Breyttu ógagnsæi í 15% og veldu svart sem lit. Slepptu fjarlægðinni að 2px og stærðina að 4px. Breyttu nú horninu í -90 gráður (vertu viss um að Notaðu Global Light er ekki valið). Þetta gefur neðst á hnappinn smávægilegan skugga og felur í sér sum innri ljóma sem við sóttum bara. Í raunveruleikanum myndi þetta svæði vera skyggða svo það var mikilvægt að fela innri ljóma hér.
Til að ljúka stíl hnappsins erum við að fara að bæta við dropaskugga. Veldu dropaskugga spjaldið og breyttu litinni í hvítt með ógagnsæi 25%. Þessi skuggi er að fara fram sem hápunktur undir heilablóðfalli okkar, svo breyttu fjarlægðinni að 4px (2px til að ná heilablóðfallinu og 2px sem sjást undir högginu).
Skref 7: Button merki
Hnappur án merkimiða hans er tilgangslaus, svo nú ætlum við að eyða smá tíma til að klára hnappana okkar. Fyrst af öllu skaltu hægrismella á stílhnappinn og velja valkostinn Copy Layer Style. Nú hægri smelltu á un-stíll hnappinn þinn og veldu valkostinn Líma Layer Style.
Við ætlum að halda áfram að vinna á hægri hnappinn okkar fyrst. Þessi hnappur verður merktur "Fólk" og við viljum nota tákn 2+ manna. Fyrir sakir þessarar kennslu er ég að fara að nota tákn sem eru búin til af skapandi stúdíó Yummygum; þú finnur pakkann sem ég notaði á IconSweets.com - Ég mun nota tákn frá þessari pakkningu um námskeiðið.
Notaðu sömu letur sem þú notaðir til titilar á flipanum, sláðu inn lyklaborðið þitt. Breyta stærð og staðsetja það á hnappinn, og veldu síðan valmyndina þína (eða gerðu þitt eigið) í skjalið þitt. Settu þessi tvö lög jafnt yfir hnappinn. Ég hef úthlutað lagunum mínum þannig að það eru 15px hvor megin við þau og hnappinn og 10px á milli táknmyndarinnar og textans. Límdu lagalistann úr efnistönginni þinni með efnistökum á bæði táknið og hnappamerkið. Ef þú þarft að breyta stærð hnappalengdarinnar skaltu nota Direct Selection Tool til að velja 4 akkerapunkta til hægri og draga síðan. Þú getur haldið skipta takkanum niður til að halda þessari breytingu beinni.
Endurtaktu þetta ferli með hnappinum vinstra megin á flakkastikunni þinni, í þetta sinn að nota kross táknið og orðið "Loka". Til að bæta smá stíl við hnappana mína lækkaði ég ógagnsæi tveggja bakgrunnsforma í 95%, þetta leyfir smá ristarmynstri undir því að skína í gegnum.
Skref 8: Textareitarstikur
Nú er kominn tími til að borga eftirtekt til the hvíla af skjánum okkar. Taktu Rectangle Shape Tool og notaðu sömu víddir á siglingarstikunni (640 x 86px) til að búa til form á striga þínum. Settu það neðst á skjánum.
Skref 9: Bakgrunnurinn
Við ætlum nú að vinna í bakgrunni hönnunar okkar. Opnaðu blöndunartakkann fyrir bakgrunnslagið og veldu mynstur til að fylla það upp. Ég notaði dökk mynstur með lóðréttum línum að fara í gegnum það frá Lúmskur mynstur - þú getur sótt fullt mynstur hér sem ég mæli með.
Ef þú vilt bæta við sumum litum þínum við mynnið sem þú hefur valið getur þú gert það með því að nota litlags stíl. Ég lagði brúna (úr litavali sem ég valdi áður) í 35%. Þessi ógagnsæi er nógu lítill til að áferðin þín / mynstrið birtist ennþá nógu hátt til að hreinsa litina eða bakgrunninn þinn.
Núna erum við með dökkan bakgrunn, þú sérð punktinn þar sem stýrihnappurinn okkar uppfyllir bakgrunnsmynd okkar lítur ekki alveg eins vel út. Þú getur auðveldlega lagað þetta með því að beita skuggastíl á flakkastikuna þína, sem mun gera það virðast eins og það sé fyrir ofan bakgrunn þinn.
Opnaðu valkostina til að blanda saman flakk fyrir flakkastikuna þína og veldu dropaskugga spjaldið. Gakktu úr skugga um að svart sé valið og breyttu ógagnsæi í 25%. Auka bæði fjarlægðina til 6px og stærðin að 10px og smelltu á Í lagi. Þú gætir þurft að gera tilraunir með þessum valkostum þar sem niðurstöðurnar eru breytilegar eftir lit og tegund áferð / mynstri sem þú hefur valið fyrir bakgrunn þinn.
Skref 10: Skilaboð
Nú þegar við höfum fengið bakgrunninn og toppur flakkstikum lokið, ætlum við að einbeita þér að því að fá aðalatriði forritsins sem settar eru fram. Veldu Rectangle Shape Tool og settu rétthyrningur á striga þínum. Breiddin sem ég notaði var 600px, sem gerir 20px kleift að sýna á hvorri hlið lögunarinnar. Ég notaði miklu léttari útgáfu af gulu / creme litanum frá litavalinu sem ég tók áður.
Veldu rétthyrnd formgerðartól og breyttu stærðinni í 80 x 80 punkta og radíusinn að 6 px. Setjið formið (sem á að nota sem Avatarformið okkar) á striga og stillið það rétt. Til að halda hönnuninni mínum í samræmi, þá hef ég leyft 20px að sitja á milli brúna bakgrunnsforms míns og avatar formið mitt.
Notaðu textaritið, skrifaðu nafnið þitt og skilaboð; Ég notaði Arial Rounded MT Djarfur fyrir nafnið mitt og venjulegt Arial fyrir skilaboðin mín texti-sniðið texta þína þannig að það passar vel í skilaboðabakgrunninn þinn.
Við ætlum nú að bæta við stíl við skilaboðin okkar með því að nota bara lit; Ég breytt lit nafns míns í dökkblár grænblár (mjög nálægt svörtu) og þvegnuðu grænblár innblásin af flakkastikunni minni.
Ég setti þá mynd af mér með því að fara í File> Place. Einu sinni setti ég upp myndina og setti hana yfir svörtu avatar minn kassann sem við bjuggum til fyrr. Til að vista klippið myndina út og einnig til að gefa þér kost á að færa eða breyta stærð þinni á síðari degi skaltu hægrismella á það og velja Búa til klippa Mask valkost. Þetta mun tengja avatar myndina þína við svarta kassann þinn og mun aðeins sýna hvað er yfir svarta kassann. Þú finnur með því að nota Færa Tólið sem þú getur samt hreyft og breytt stærð þessa myndar.
Með því að nota annan IconSweets táknið skapaði ég fallegt lítið tímaskeið. Ég þurfti að draga úr táknstærðinni minni - þú getur gert þetta með því að fara á Edit> Transform> Free Transform og breyta málum (annaðhvort með punktum eða prósentu). Ég notaði 70% bæði í breidd og hæð til að halda hlutföllum. Ég bætti við nokkrum texta og voila. Vertu viss um að velja lit sem auðvelt er að lesa en hrópar ekki eftir athygli.
Skref 11: Afrita skilaboð
Afritaðu skilaboðaboxana þína undir hver öðrum og skildu 2px bilið á milli hverrar bakgrunni. Þú getur gert þetta með því að smella á og draga lögin þín yfir táknið New Layer, eða þú getur ýtt á Cmd + Shift + Down Arrow á sama tíma til að afrita og nudge lögin niður.
Breytið öllu efninu í skilaboðum, eins og það væri raunverulegt samtal. Ef þú þarft að búa til stærri bakgrunnskassa skaltu nota Direct Selection Tool og breyta þeim með því að nota akkerapunkta. Þetta heldur öllum brúnum vel og skarpur.
Skref 12: Skilaboðastíll
Með því gert getum við nú einbeitt okkur að því að koma með skilaboðum til lífsins. Opnaðu blöndunartakkann og veldu dropaskugga spjaldið. Breyttu blöndunartækinu eðlilega og veldu hvítt sem lit. Auka ógagnsæi í 80% í stað venjulegs 75% og gefðu skugga fjarlægð 2px. Þetta mun fela 2px bilið sem við fórum á milli hverja bakgrunni skilaboða.
Afritaðu og límdu ofangreindan lagastíl á öllum bakgrunni lagalistanna. Þú ættir að enda með eitthvað eins og að ofan.
Skref 13: Bættu við ávölum hornum
Til að gera hönnun okkar áhugaverðari og einnig til að bæta við dýpri, ætlum við að bæta við hringlaga hornum neðst í skilaboðum okkar og gera það virðast eins og það sé pappír hlaðið upp á fleiri pappíra.
Veldu rétthyrnd tól og gefðu það 10 punkta radíus. Breyttu breiddinni að 600px (eða hvaða breidd þú notaðir fyrir bakgrunni skilaboðaboxsins) og hæð sem fer ekki yfir hæð botnskotbakkabakgrunnsins. Ég notaði björt lit hér til að hún sé auðveldlega sýnileg.
Notaðu Direct Selection Tólið, veldu innihald vektorlaga lagsins (hringlaga kassann sem við drekkðum bara) og farðu í Edit> Copy. Smelltu á vektorlaga lagið á botninum á botnskilaboðabakka þínum og farðu í Edit> Paste. Þetta mun líma innihald lögun lagið á annað lagið þitt lag. Þú getur nú eytt formi sem við drógu í fyrra skrefi. Þú ættir samt að sjá lögunina sýnileg.
Opnaðu blandunarvalkostina á botninum á botninum og veldu dropaskugga. Breyttu litinni í svörtu, ógagnsæi í 25%, fjarlægðin til 1px og stærðin að 3px. Þetta mun skapa fallega lúmskur dropaskugga.
Afritaðu þetta lag og hreinsaðu það niður 5px. Skiptu laginu þannig að það setur undir frumrit þitt. Þú ættir að endar með eitthvað sem líkist hér að neðan. Eins og þú sérð er þetta einföld leið til að búa til skarast pappírs útlit.
Endurtaktu skrefið aftur þannig að þú hafir þrjú stykki af pappír í staðinn fyrir aðeins tvö. Þú gætir viljað gefa neðri stykki af pappír örlítið meira áberandi dropaskugga.
Skref 14: Skyggnusýningarglugga
Þú hefur líklega tekið eftir því að við hönnuðum skilaboðaboxana okkar, faldi okkur mest af dropaskuggunni sem stýrisbarnið okkar var að steypa á bakgrunni okkar. Til að skipta um þetta geturðu annaðhvort staðsetið skilaboðin þín undir flakkastikunni (auðveld valkostur en óraunhæf) eða ljúktu eftirfarandi skrefum.
Veldu Rectangular Marquee Tool og taktu lítið línu efst á skilaboðunum þínum eins og hér að ofan. Fylltu það með svörtu á nýtt lag.
Farðu í Sía> Óskýr> Gaussísk óskýr og notaðu óskýran. Þetta mun nú virka sem skuggi - bara skera út nokkrar bitar af óskýrleika sem skarast á brúnir bakgrunni skilaboða þinnar.
Skref 15: Prófunar- og skýrslugluggar
Með tilvísun til vírramma okkar höfðum við ákveðið að leyfa notendum að strjúka skilaboð til vinstri til að sýna fleiri hnappa. Í þessu tilfelli leyfa þessir hnappar notandanum að skoða skilaboðin um veggspjöldin, eða tilkynna skilaboðin.
Veldu lögin sem búa til einn skilaboðin þín (ég er að velja Homer Simpsons skilaboð) og nota skipta takkann og örvatakkana, nudge skilaboðin þín 10px í einu til vinstri. Notaðu textaritið, skrifaðu merkin þín og veldu síðan tákn sem samsvara þeim merkjum. Ég valdi einstaklingsmann fyrir prófíl og markmið fyrir skýrslu (eins og þú ert að skjóta þá niður - ég hélt að þetta væri frekar skemmtilegt!).
Til að bæta þessu dýpi, bætti ég svörtum dropaskugga við bæði táknin og textann.
Skref 16: Textareitabar
Texta reiturinn er einn mikilvægasti þætturinn á þessari skjá. Notendur þurfa að geta skilað skilaboðum sínum með vellíðan og ekkert rugl (það er þess vegna sem ég fjarlægði falinn sendihnappinn í fyrstu hugtökunum).
Til að byrja, finndu bakgrunnslagið og afritaðu lagsstílina. Límdu þessar lagastílar á textareitinn lag sem við búum til áður. Opnaðu blandunarvalkostina fyrir þetta lag og veldu höggspjaldið. Notaðu 2px högg á ytri lögun þinni með solid svartri lit sem lit. Þar sem höggið er úti og lögunin snertir þrjá brúnir striga þinnar birtist aðeins höggið ofan á löguninni.
Veldu nú innri skugga flipann og breyttu blandaðri stillingu í eðlilegt horf, liturinn á hvítu, ógagnsæi í 10% og fjarlægðin að 2px. Gakktu úr skugga um að hornið sé stillt á alþjóðlegt ljós sjálfgefið (90 gráður) og smelltu á Í lagi. Þetta gefur okkur góðan hápunktur undir svörtum höggum okkar. Með þessum tveimur einföldu 2px línum sem beitt er, lítur textareitstikan okkar vel aðskilin frá afganginum af bakgrunni, jafnvel þótt það hafi sömu bakgrunn!
Veldu rétthyrndar tólið. Gefðu tólinu mikla radíus, ég notaði 50px; þetta mun gefa það mjög umferð (hringlaga) endar. Settu lögun á barinn þinn, ég notaði 460x54px sem málin mín. Gakktu úr skugga um að vinstri hlið textasvæðisins sé 20 px í burtu frá vinstri hlið striga til að halda hönnunarsviðinu í samræmi.
Fylltu lögunina með dökkum lit (ég notaði brúnt valið úr dökkum punktum í bakgrunni) og opnaðu síðan lagsstilspjaldið. Notaðu 2 punkta hvíta dropaskugga á textareitinn með 10% ógagnsæi.
Smelltu á innri skugga spjaldið og notaðu innri skugga við textareitinn þinn. Þetta mun gefa það miklu meira dýpt og gera það líta út eins og það sé skorið í barsgrindina. Notaðu svörtu með blandunarstillingu margfalda og ógagnsæi 25%. Ég notaði 5px sem fjarlægð og 10px sem stærð, þó að þú gætir viljað gera tilraunir hér.
Notaðu textatólið og búið til Arial Rounded MT Bold, sláðu inn "Skrifa athugasemd ..." og settu það í textareitinn. Opnaðu blandunarvalkostina fyrir nýja textalagið og notaðu svarta dropaskugga með ógagnsæi 75%, fjarlægð 2px og stærð 3px.
Skref 17: Textareitahnappur
Endurvalið hringlaga rétthyrningsformatið og notaðu sömu radíusstillingar og hæð sem við notuðum áður, settu form á bakgrunni textareiturs. Breyttu lengd hnappsins þannig að hún setur 10 punkta frá textareitnum og 20px frá hægri kantnum á striga.
Hægri smelltu á nýja hnappinn lögun lag og veldu blanda valkosti. Veldu pallborðsskyggni og notaðu lóðrétt frá ljósi (efst) til dökkra (neðst). Ég notaði stórkostlega gula litinn sem var í litavalinu sem ég valdi áður.
Til að halda hönnuninni í samræmi mun ég nota högg á hnappinn okkar sem gerir það að líta út eins og það sé að koma út úr bakgrunni, eins og við gerðum með takkunum í flakkastikunni. Í þetta sinn notaði ég solid svart í stað hallaslags þar sem bakgrunnurinn er mun dekkri og er ekki fylltur með halli. Ég notaði 2px heilablóðfall inni á lögun minni með 100% ógagnsæi.
Veldu textatólið og skrifaðu "Senda" á hnappinn. Opnaðu blandunarvalkostina fyrir nýtt textalag og notaðu brúnt dropaskugga við texta með 1px og 3px fjarlægð.
Og með því lokið erum við öll búin! Okkur langar til að sjá niðurstöðurnar þínar, svo vinsamlegast ekki hika við að senda þær í athugasemdareitinn hér að neðan. Ef þú vilt sjá hönnunina í fullri upplausn geturðu séð það hér .