Efni.
- 01. Byrjaðu með rist
- 02. Skilgreindu mismunandi svæði
- 03. Bættu við smá flakk
- 04. Hringaðu rétthyrninga þína
- 05. Bæta við myndum
- 06. Kynntu lagstíla
- 07. Einangruðu lögin þín
- 08. Búðu til myndeignir
- 09. Afritaðu CSS eiginleika
Nú eru fullt af frumgerðarverkfærum og aðferðum sem hjálpa þér að búa til vefsíðu mockups hratt og auðveldlega. Þú áttar þig kannski ekki á því, en Photoshop CC er frábært tæki til hraðvirkrar frumgerðar. Með hverri endurskoðun hefur hugbúnaðurinn öðlast meiri virkni fyrir hönnuði sem vilja fljótt búa til víramma eða frumgerðir til að deila með viðskiptavini eða byggja hönnun tilbúin fyrir verktaki.
Gagnlegustu snöggu frumgerðaraðgerðirnar í Photoshop CC fela í sér hæfileikana til að einangra lög, klára horn með lifandi Rounded Rectangle tólinu og afrita CSS eiginleika úr einstökum lögum. Og uppsetning Creative Cloud býður einnig upp á gagnlegar samvinnuþættir (gerast áskrifandi að Adobe Creative Cloud hér).
Í þessari grein munum við fara í gegnum hvernig á að búa til skjóta frumgerð í Photoshop með því að nota breidd verkfæranna sem eru í boði til að búa til verktaki og viðskiptavinsvænt síðusnið.
01. Byrjaðu með rist
Settu upp skjal með stærðum skjásins sem þú ert að hanna fyrir (snjallsíma, spjaldtölvu og svo framvegis). Næst skaltu búa til rist sem mun mynda grunnbygginguna - ókeypis viðbót GuideGuide er gagnlegt fyrir þetta. Opnaðu viðbótina, sláðu inn framlegðarbreiddina, fjölda dálka og þakrennu. Ýttu á GG hnappinn og þú ert með netið þitt.
02. Skilgreindu mismunandi svæði
Á þessum tímapunkti er gagnlegt að loka á lykilsvæði síðuskipulags þíns. Búðu til möppu fyrir hausinn, fótinn, innihaldið og allt annað sem þú þarft. Það er góð hugmynd að skilgreina hvaða meginsvið sem er í vefsíðugerðinni - byrjað á ljósgráum reit til að gera grein fyrir þeim. Hér hef ég notað Rectangle tólið til að teikna haus svæði svæðisins (1200 x 240px) og bætt við titlinum.
03. Bættu við smá flakk
Bættu nú við siglingaþáttum. Veldu lagið, haltu inni til að afrita tegundina þína Kjósa/Alt takka og draga. Að halda Vakt takmarkar röðunina. Stilltu textalögin þín nákvæmlega með því að velja allan siglingatextann og ýta á hnappinn Dreifa lóðréttum miðjum á tækjastikustikunni. Þetta stillir lóðrétt saman og rýmir lögin jafnt og gerir það tilvalið fyrir valmyndaratriði eins og sýnt er.
04. Hringaðu rétthyrninga þína
Hér erum við að bæta við á skráningarformi við uppsetningu heimasíðunnar með því að nota Rounded Rectangle tólið. Photoshop CC hefur lifandi Rounded Rectangles aðgerð, sem gerir þér kleift að fínstilla hornradíus lögunar þinnar. Þetta þýðir að þú getur farið til baka og breytt hornum þínum seinna ef hönnun þín kallar á það. Þetta gæti hljómað eins og minni háttar eiginleiki, en það er mjög handhægt.
05. Bæta við myndum
Það er þess virði að breyta myndum í snjalla hluti, þar sem það auðveldar þær að uppfæra eða skipta út. Þú getur notað rétthyrninga frá staðsetningunni sem grímur til að halda myndum. Annað hvort að koma með mynd sem nýtt lag, afrita rétthyrningsgrímuna og tengja hana við það lag, eða velja úr rétthyrningnum þínum og nota Líma sérstakt> Líma í.
06. Kynntu lagstíla
Lagstíll er ágætis leið til að bæta við áhrifum. Til að beita núverandi lagstíl á annað lag í staflinum þínum skaltu ýta á Kjósa/Alt og dragðu FX táknið í nýja lagið þitt. Til að búa til sveima yfir lagi sem hægt er að kveikja eða slökkva á, einfaldlega afritaðu bakgrunnshyrninginn og flokkaðu þetta lag og textalagið þitt í lagahóp.
07. Einangruðu lögin þín
Þetta er annar gagnlegur eiginleiki í Photoshop CC ef þú vilt breyta aðeins nokkrum af lögunum þínum. Veldu lögin sem þú vilt breyta og farðu síðan í Veldu> Einangra lög. Þetta gerir þér kleift að einbeita þér að sérstökum svæðum sem þarfnast vinnu, án þess að rugla saman öðrum lögum sem klúðra hlutunum.
08. Búðu til myndeignir
Adobe Generator er Photoshop CC eiginleiki sem gerir þér kleift að búa til myndaeignir á flugu. Farðu í File> Búa til> Myndareignir. Nú skaltu bæta við lagaskjánum viðskeytinu eins og .png eða .jpeg til að flytja það lag sjálfkrafa út í tiltekna möppu. Við höfum gert það hér með táknmyndaskrá.
09. Afritaðu CSS eiginleika
Frábær eiginleiki í Photoshop CC þegar þú býrð til HTML frumgerð er hæfileikinn til að afrita CSS laga. Til að gera þetta Ctrl + hægri smelltu á tilskildu laginu og ýttu á Copy CSS Style til að bæta kóðanum við klemmuspjaldið. Opnaðu nýtt skjal í Dreamweaver, Muse eða Adobe XD og límdu í CSS kóðann þinn.
Þessi grein birtist upphaflega í Tölvulist, leiðandi tímarit heimsins fyrir grafíska hönnuði. Gerast áskrifandi hér.
