Hönnun Forest Inspired Tumblr Þema í Photoshop
Tumblr er örvabloggandi vettvangur sem gerir notendum kleift að auðveldlega birta sneið af upplýsingum á vefnum, svo sem mynd eða myndatöku, myndskeið, tilvitnun eða aðeins málsgrein.
Það er oft notað sem dagbók á netinu vegna þess að það er auðveldara að nota samanborið við önnur bloggpláss eins og WordPress.
A einhver fjöldi af Tumblr þemum eru þarna úti, bæði frjáls og aukagjald, en hefur þú einhvern tíma furða hvernig þú vilt fara um að hanna þitt eigið?
Í þessari einkatími lærir þú hvernig á að búa til skógarblásið Tumblr þema, nýta tré áferð, lúmskur mynstur og nútíma tækni - gott blanda af náttúrulegum og nútíma þáttum.
Það sem við ætlum að hanna
Þemað sem við munum hanna í Photoshop samanstendur af fjórum sviðum: tré skenkur, aðal innihald svæði, hægri skenkur og haus.
Skref 1
Fyrsta skrefið, sem ætti að vera með allt sem þú hanna, er skissaþrepi. Með því að nota Wacom Bamboo grafíkartöflu mína og autt striga í Photoshop, setti ég fram eftirfarandi hönnun, með nokkrum stærri þáttum, til að fá hugmyndirnar mínar niður á (stafrænt) pappír.
Skref 2
Með hugmyndinni gróft út skaltu búa til nýtt skjal í Photoshop. (Hafðu í huga að þetta er ekki sett í stein. Það er bara eitthvað sem þú getur vísað til baka ef þú lætur þig fastur í hönnuninni. Persónulega hef ég tilhneigingu til að gera tilraunir og breyta mikið af því sem ég gerði upphaflega fyrirhugað.) Ég notaði eftirfarandi stillingar í Photoshop:
Skref 3
Næsta áfangi er að setja leiðsögumenn niður á striga. Þetta mun hjálpa þér að halda uppbyggingu þemunnar snyrtilegur þegar þú hanar það. Ég vil að vinstri skenkur sé 200 pixlar, aðal innihaldssvæði að 600 punkta og hægri skenkur að vera 160 pixlar og gefur okkur 960 punktar breidd.
Ef þú hefur notað sömu stillingar getur þú sett leiðarana þína í 200, 800 og 960 punktar lárétt. Þessi hönnun verður stillt til vinstri, þannig að tréstikan sé alltaf á vinstri hlið notandans.
Ég setti einnig leiðsögumenn 200 punkta undir toppi striga og 200 dílar yfir botninn á striga. Þetta er hvernig skjalið mitt lítur út:
Skref 4
Skulum nú bæta við nokkrum mynstri í bakgrunninn okkar. Farðu í File → New og búðu til nýtt skjal sem er 8 × 8 punktar. Teiknaðu lóðréttar línur með breidd 2 punkta. Striga þín ætti nú að vera 2 pixlar svartur, 2 pixlar hvítar, 2 pixlar svartur, 2 pixlar hvítar. Farðu í Edit → Define Pattern. Vista mynstrið þitt sem "Lóðrétt línur 2px."
Í upprunalegu skjali þínu, farðu í Lag → Nýtt fylla → Mynstur. Veldu mynstur sem þú hefur búið til og smelltu á Í lagi. Slepptu ógagnsæi lagsins þangað til það lítur svona út:
Sameina mynsturið með bakgrunnslaginu og raða því sjálfkrafa í vinnslu. Farðu í Sía → Hljóðlög → Bæta við hávaða. Breyta gildinu í 5% og smelltu á Í lagi. Þetta mun bæta við nokkrum lúmskur áferð í bakgrunni:
Búðu til nýtt lag og fylltu það með hvítu. Settu það undir upprunalegu bakgrunni. Lækkaðu ógagnsænið á lagskiptri lagamynstri í um það bil 40%, og sameinaðu síðan með bakgrunnslaginu með því að fara í Lag → Sameina lög.
Skref 5
Veldu Rectangle tólið og taktu form sem er 200 pixlar á breidd.
Við erum að fara að sneiða niður botn lögun okkar með því að nota Polygonal Lasso tólið, sem gerir það líkt og borði. Búðu til úrval yfir lögun þína, rasterize lögun laginu og smelltu síðan á Delete takkann til að fjarlægja valið svæði.
Leggðu lögunina í vinstri hliðarsvæði sem við merktum með leiðsögumenn okkar.
Búðu til úrval af efstu hluta lögunarinnar og farðu í Edit → Free Transform. Teygðu lögunina þannig að hún skarast við efstu línu striga.
Skref 6
Veldu Ellipse Shape tólið og haltu hringnum, fyllt með hvítu, meðan þú heldur Shift lyklinum til að halda því í kring. Settu það efst á skenkanum og breyttu laginu í "Portrait".
Hægrismelltu á nýja lagið, og veldu "Rasterize layer" valið til að breyta því úr snjallri hlut í punkta. Haltu inni skipunartakkanum og smelltu á forsýningarmynd lagsins á lagaparanum. Þetta mun gera úrval af hringnum þínum.
Finndu mynd af sjálfum þér (eða hvað sem vefsvæðið þitt snýst um) og afritaðu það. Haltu aftur í Photoshop og með hringvalinu enn virk, farðu í Edit → Paste Into. Þetta mun líma hlutinn í hringvalinu þínu.
Þegar þú hefur gert þetta hefur þú sjálfkrafa búið til laggrímu á myndinni (þ.e. á nýtt lag, ekki núverandi hringlaga lag). Farðu í Edit → Free Transform til að breyta stærð og / eða snúa myndinni. Það mun vera hringur; bara vertu viss um að gera það ekki of lítið. Þegar það er lokið skaltu eyða laginu sem heitir "Portrait" og endurnefna nýtt lag.
Skref 7
Veldu tegundartólið og búðu til textareit í höfnarsvæðinu. Ég hef gefið þemað mér alveg handahófi nafn: "Kabooom." Ég notaði leturgerð sem heitir Reklame Script. Þú getur hlaðið niður leturgerð eða keypt það fyrir $ 30 frá MyFonts .
Hægrismelltu á tegund lagið þitt og veldu "Blending Options." Notaðu lit yfirborð í textann. Ég notaði ljós grár sem er svolítið dekkri en bakgrunnurinn, með sexkóðanum # D6D6D6.
Notaðu innri skugga við gerðina með því að nota ógagnsæi 10%, fjarlægð 2 punkta og stærð 1 pixla. Skildu allt annað á 0. Þetta mun gera gerðin líta út eins og það var grafið í bakgrunni.
Til að ljúka grafið áhrifum munum við bæta við dropaskugga við gerðina með því að nota litinn hvítt með venjulegri blandaðri stillingu. Gefðu skugga fjarlægð frá 2 punktum og stærð 1 pixla. Þessar stillingar munu gera skuggann birtast sem hápunktur neðst á gerðinni, bæta dýpt við gerðina og styrkja innri skugga.
Skref 8
Endurvalið tegundartólið og búðu til textareit sem fyllir breidd hægri hægra megin, sem við höfum merkt með leiðbeiningum. Setjið fjölbreyttar flokkar undir vöruliðinu, eins og sést hér að neðan:
Veldu flokkaráskriftina og breyttu leturgerðinni að einum sem þú velur. Ég notaði Minion Pro. Tilraunir með undirritgerðir (feitletrað, skáletrað, osfrv.) Og punktastærðir.
Breyta letrið fyrir flokkana ("News", "Days out", "Ljósmyndun", osfrv.) Ég notaði Myriad Pro. Lækka punktsstærð ferðarinnar og stilla leiðandi (þ.e. bilið á milli textalína), þannig að efsta línan sé lægri en þar sem hún er sjálfgefið.
Afritaðu fyrsta fyrirsögnina og tengdu og límdu þau hér að neðan í sama textareit. Breyta fyrirsögn og flokkum. Ég notaði fyrirsagnirnar "Verkefni mín" og "Vinir mínir." Notaðu það sem skiptir máli fyrir vefsíðuna þína, auðvitað.
Skref 9
Við erum nú að fara að gera texta í hægri hliðarstiku aðeins meira aðlaðandi. Veldu texta fyrir undirflokka (þ.e. ekki fyrirsagnirnar) og breyttu litnum frá svörtu til dökkgráu. Ég notaði # 333333. Smelltu á Í lagi.
Hægrismelltu á gerðarlagið og veldu "Blandunarvalkostir." Notaðu hvíta dropaskugga með venjulegri blandunarham. Breyttu horninu við 120 ° og fjarlægðin og stærðin að 1 pixla. Leyfðu allt annað að vera 0 punkta. Þetta mun bæta hápunktur neðst í textanum, eins og við gerðum með fyrirsögninni.
Skref 10
Veldu línatólið og haltu inni línu undir undirflokknum "Category" með því að halda Shift takkanum til að halda því beint.
Hægrismelltu á línu lagið og veldu "Blending valkostir." Notaðu hvíta dropa skugga með venjulegum blanda ham. Stilltu hornið í 90 ° og fjarlægðin við 1 pixla. Stilltu allt annað í 0 punkta.
Afritaðu línulagið og settu það undir hverja fyrirsögninni.
Skref 11
Ef þú hefur sömu fjölda fyrirsagnir og ég, þá ættir þú að hafa þrjú línulög. Veldu þá alla og afritaðu þau. Með þeim þremur línulögum sem enn eru valdar skaltu losa þá niður 10 punkta með því að halda Shift takkanum og ýta einu sinni á Down takkann. Lækka ógagnsæi nýrra línulaga þinnar í 25% til að enda með eitthvað eins og þetta:
Skref 12
Gripið í Rectangle Shape tólið og taktu rétthyrningur svipað og það sem er að neðan. Gerðu rétthyrninginn nákvæmlega 570 punktar á breidd. Þetta mun gera ráð fyrir 10 punkta bil milli vinstri hliðarstikunnar og brún nýrrar rétthyrningsins og 20 punkta bilið milli hægri hliðarstikunnar og brún nýrrar rétthyrningsins, eins og sést á skýringarmyndinni hér fyrir neðan:
Skref 13
Endurvalið Rectangle Shape tólið og búðu til miklu minni gráa rétthyrningur, eins og sá hér að neðan. Stöðuðu það efst í hægra megin við stóra rétthyrninginn, móti 10 stórum rétthyrningi. Setjið formið 30 punktar í burtu frá toppnum í rétthyrningnum.
Skref 14
Afritaðu tegundarlögin í hægri hliðarstikunni og notaðu Shift-takkann og Cursor-lyklaborðið til að hreinsa tvíhliða gerðarlagið yfir aðal innihaldssvæðið. Gerðu það sama með tveimur lína lögum fyrir "Flokkar" fyrirsögn þína.
Veldu tegundartólið og smelltu á tvíhliða gerðarlagið þitt. Fjarlægðu allan textann í reitnum og breyttu fyrirsögninni í eitthvað meira hentugt. Ég notaði bara nokkrar dummy texta hér: "Þetta er hérna heitir titill."
Skref 15
Fara í Skrá → Staður og staðsetja mynd til að setja í skjalið sem staðgengill. Notkun alvöru mynda hér er alltaf best vegna þess að þeir gera mock-up virðast meira raunveruleg og aðlaðandi. Ég notaði mynd af systrum mínum .
Farðu í Edit → Free Transform til að draga úr stærð myndarinnar og setja hana á réttan stað. Gerðu það samtals 20 punktar styttri bæði í breidd og hæð þannig að það passi vel í svörtu rétthyrningnum, eins og svo:
Skref 16
Opnaðu blandunarvalkostina fyrir stóra svarta rétthyrninginn. Notaðu hvíta litlagningu og dropaskugga með ógagnsæi 10% og stærð 3 punkta.
Skref 17
Veldu rektarhluta Shape tólið aftur og taktu langan form undir hvíta myndar bakgrunnsmyndinni. Gakktu úr skugga um að það sé sama breidd. Fylltu það með ljós grátt.
Opnaðu valkostina Blending fyrir nýja gráa rétthyrninginn og notaðu dropaskugga. Stilltu litinn í hvítt, með eðlilegum blönduham, ógagnsæi í 100% og fjarlægðin við 1 pixla. Leyfðu allt annað að vera 0 punkta.
Notaðu einnig innri skugga með því að nota litinn svartur, með ógagnsæi 10%. Breyttu stærðinni í 13 punkta og láttu allt annað vera 0 punkta. Þessar tvær lagsstíll mun gera nýja lögunin líta út eins og hún var æta í bakgrunni, eins og fyrirsögninni okkar:
Skref 18
Haltu áfram í hliðarstikuna, hlaða niður nokkrum endurteknum viðarbeitum. Ég er með a sett frá GraphicRiver sem felur í sér þrjár mismunandi tréskreytingar: ljós, miðlungs og dökk.
Þegar þú hefur sett upp mynstur í Photoshop (með því að opna hverja mynd og skilgreina hana sem mynstur) skaltu velja skenkur í Photoshop skjalinu þínu. Fara í lag → Nýtt fylla lag → Mynstur. Veldu einn af áferðartréðum þínum (ég valið miðlungsútgáfu) og smelltu á Í lagi. Með því að velja skenkurinn fyrst, ætti mynsturin að fylla aðeins það svæði.
Hægrismelltu á mynsturlagið og veldu "Blandunarvalkostir." Notaðu lóðrétt yfirborð, fara úr svörtum og gagnsæjum í svörtu:
Breyttu ógagnsæi yfirborðs yfirborðsins í 10% og gefðu það horninu 0 °. Þetta mun bæta við lúmskur skugga við hliðarstikuna, sem gerir það lítið svolítið raunsærri og minna flatt.
Notaðu einnig dropaskugga við hliðarstikuna. Lægðu ógagnsæi í 30% og breyttu horninu í 180 °. Breyttu fjarlægðinni í 1 punkta og stærðina að 5 punkta, þannig að allt annað sé stillt á 0 punkta. Þetta mun bæta við litlum og lúmskur skugga við hliðarstikuna.
Skref 19
Opnaðu "Blandunarvalkostir" fyrir hringmyndina sem við bjuggum við í upphafi þessa kennslu. Notaðu hvíta dropaskugga með því að nota stillingarnar hér að neðan:
Notaðu einnig innri skugga með því að nota stillingarnar hér að neðan. Þetta mun gera hringmyndina líta út eins og það var sett í tréð, frekar en að bara sitja á henni.
Skref 20
Afritaðu titillagið í aðal innihaldinu. Settu það á hliðarstikuna og breyttu textanum í "Um mig." Einnig skaltu færa og breyta báðum línum undir fyrirsögninni.
Opnaðu "Blandunarvalkostir" fyrir nýja gerðarlagið þitt og breyttu skyggnuskjástillingunum við þessar:
Bættu við texta við "Um mig" hluta með sama letri og stærð sem við notuðum í hægri skenkurtextanum. Opnaðu "Blandunarvalkostir" fyrir þennan nýja texta og smelltu á flipann "Outer glow" til að nota ytri ljóma. Breyttu ógagnsæi í 30%, liturinn á hvítu og stærðina í 18 punkta.
Þetta mun gera texta okkar læsilegari gagnvart trébakgrunninum.
Leika með leturstærðinni til að auðvelda textann að skanna.
Skref 21
Eftir nokkrar tilraunir ákvað ég að allt skenkurinn leit miklu betur í dekkri af þremur áferðunum sem nefnd eru hér að ofan. Ég breytti hliðarstikunni og litum textans. Notaðu þær aðferðir sem þú hefur þegar lært að gera þetta.
Hér er það sem hönnunin mín lítur út eins og langt:
Skref 22
Hins vegar hefur þú ákveðið að gera breytingar á hönnunarferlinu. Þegar ég horfði á hönnunina í heild (frekar en styttri), komst ég að þeirri niðurstöðu að 10 punkta milli hliðarsláranna og aðal innihaldssvæðisins væri hvergi nærri nóg.
Notaðu Shift-takkann og Cursor-lyklaborðið með því að hníga innihaldið þitt yfir og gera tvær eyður 40 punktar í stað 10. Þetta mun gera hönnunin meira nothæf og aðlaðandi.
Skref 23
Ég ákvað einnig að breyta stíll hátíðarinnar í þema.
Breyttu litnum (með litlagsálagi í glugganum "Blending Options") til einn sem valinn er úr hringmyndinni. Ég tók dökkgrænt blá.
Ég eyddi einnig innri skugganum og breytti skyggslustillingunum, þannig að það lítur út eins og hausinn situr fyrir ofan bakgrunninn frekar en settur inn í hana.
Skref 24
Haltu áfram á aðal innihald borðið (þ.e. rétthyrningurinn sem við búum til fyrr sem situr efst í hægra horninu á myndasvæðinu), veldu rétthyrninginn með því að smella á smámyndarsýninguna á laginu meðan þú heldur inni skipunartakkanum.
Farðu í lag → Nýtt fylla lag → Mynstur og veldu sömu áferð sem þú notaðir fyrir hliðarstikuna.
Hægrismelltu á mynsturfyllingarlagið og veldu "Rasterize layer" valkostinn. Notaðu Dodge og Burn verkfæri, bæta hápunktur til vinstri og toppur af lögun og skuggum til hægri og neðst í lögun.
Þetta mun bæta dýpt og gefa smá þrívítt tilfinningu fyrir lögunina. The Burn tólið mun myrkva myndina, en Dodge tólið mun létta það.
Veldu Polygonal Lasso tólið. Veldu lögun svipað og hér að neðan, og fylltu hana með dökkbrúnu, valin úr áferð þinni.
Notaðu Rectangular Marquee tólið, veldu svæðin í nýju formi sem þú þarft ekki og smelltu á Delete takkann til að fjarlægja þau. Þú ættir að endar með eitthvað sem líkist þessu:
Skref 25
Grípa okkar eigin eingöngu táknmynd sett kallað "Reflection." Við munum nota nokkrar af þessum táknum í hönnun okkar.
Settu inn táknin sem þú þarft í skjalinu með því að fara í File → Place. Ég valdi myndavélin, hjarta, endurhlaða, breyta og klukku táknum, sem mun þjóna sem myndin mín, eins og, reblog, minnismiða og tíma tákn í þemaðinu.
Skref 26
Veldu myndavélartáknið og breyttu það. Stöðuðu það á færsluborðinu sem við höfum búið til. Notaðu innri og sleppa skugga við það með því að nota stillingar svipaðar þeim sem við höfum verið að nota í þessari kennslu.
Bættu við nokkrum leturgerð við gerð póstsins. Ég notaði sama Reklame Script sem við notuðum í fyrirsögninni og sömu blandað valkostum sem við notuðum fyrir vinstri hliðarbendilinn.
Skref 27
Veldu hinar fjóra táknmyndirnar. Hægrismelltu og veldu "Rista lag" til að breyta þeim úr sviði hlutum í pixla hluti.
Notaðu Rectangular Marquee tólið til að velja allar endurskoðanir táknsins.
Hitaðu Delete takkann á hverju táknið til að fjarlægja spegilmyndina.
Skref 28
Veldu alla fjóra táknmyndirnar. Farðu í Edit → Free Transform og með því að halda Shift takkanum til að halda táknunum í réttu hlutfalli skaltu minnka stærð þeirra og setja þær á barinn fyrir neðan aðal innihaldssvæðið sem við búum til áður.
Geymdu táknin jafnt með því að nota bendilinn takkana.
Skref 29
Hægrismelltu á lagið á hjartalistanum og veldu "Blandunarvalkostir" í valmyndinni. Breyttu litinni í ljósgrár með litlagningu og notaðu innri skugga með eftirfarandi stillingum:
Notaðu dropaskugga núna með þessum stillingum:
Þegar stillingar hafa verið stilltar á hjartalíkanið skaltu hægrismella og velja "Afrita lagsstíl". Veldu alla fjóra táknin, hægrismelltu og veldu "Líma lagastika". Öll táknin í þessu stiku skulu nú hafa sömu áhrif.
Skref 30
Veldu tegundartólið og veldu litla textareit við hliðina á hjartatákninu. Sláðu inn "Eins og þessa færslu." Notaðu innri skugga og sleppa skugga með því að nota stillingar svipaðar þeim sem við höfum notað í þessari kennsluefni.
Endurtaktu fyrra skrefið fyrir eftirliggjandi tákn með eftirfarandi orðasambönd: "Reblog this post," "1052 notes" og "Sent þann 19/03/2011." Vertu viss um að afrita og líma sömu lagastíl á hvert gerðarlag.
Þú gætir líka viljað breyta nokkrum táknum með nýju textanum og tryggja að bilið milli textans og táknanna sé í samræmi. Vegna mismunandi lengd texta kann þetta að hafa breyst.
Skref 31
Afritaðu öll lögin á aðal innihaldssvæðinu og settu þau undir upprunalegu. Breyttu titlinum, mynd og eftir gerð rétthyrnings. Eins og nefnt er, því raunsærri að mock-up, því betra.
Skref 32
Afritaðu fyrirsögn og texta í skenkurnum og settu inn tákn. Ég notaði framúrskarandi félagslega fjölmiðla tákn þekkt sem Búddismenn , annað sett einkarétt til Webdesigner Depot.
Endanleg vara
Eftir nokkra fleiri snerta-ups (ég fjarlægði hakkað borði eins og skera neðst á skenkur), ég er búin! Hér er endanleg hönnun okkar, tilbúinn til að vera dulmáli eða sendur til framkvæmdaraðila til að gera það.
Þessi einkatími var settur saman eingöngu fyrir Webdesigner Depot by Callum Chapman , sjálfstæður notendaviðmót hönnuður viðskipti undir nafninu Hringlaga Skapandi . Callum er einnig að vinna á innblástur gallerí verkefni sem heitir Vinspires.
Viltu sjá aðra leiðbeiningar um hvernig á að sneiða og kóða þessa hönnun í fullkomlega virku Tumblr þema?