Niranth; Tafsiri: Slutskaya Svetlana

Kuunda mipangilio ya wavuti inayovutia na inayofanya kazi ni sehemu muhimu ya maisha ya mbuni wa wavuti. Katika somo hili Photoshop tutaunda mpangilio wa wavuti wa kitaalamu kutoka mwanzo. Wakati wa somo utajifunza hila muhimu wakati wa kuunda muundo.

Nyenzo za Somo:

1. Aikoni Seti (wefunction.com)
   Seti ya ikoni mbadala
2. Ikoni ya Twitter (iconeden.com)
3. Font Bebas (dafont.com)

Hatua ya 1. Mockup

Kabla ya kuanza kuunda mpangilio wa tovuti, tunahitaji kuunda mpango wa mchoro wa mpangilio wa baadaye, ambao utaonyesha utendaji wake na kuonekana takriban.

Hatua ya 2. Unda hati.

Tutaunda mpangilio wa tovuti wenye upana wa pikseli 960. Ili kufanya hivyo, tengeneza hati mpya yenye ukubwa wa saizi 1200x1500. Azimio la pikseli 72.

Kwa kuwa mpangilio wa tovuti utakuwa na upana wa saizi 960, tunahitaji kufafanua eneo hili kwa kuongeza miongozo. Chagua hati nzima ( Ctrl+A).

Nenda kwenye menyu Chagua - Badilisha Uteuzi(Chagua > Uteuzi wa Badilisha). Katika upau wa mali ulio juu ya skrini, weka upana hadi pikseli 960. Hii itakuwa eneo la kazi la mpangilio.

Weka miongozo haswa kando ya mipaka ya uteuzi.

Tunahitaji kuunda ukingo kati ya kingo za eneo la kazi la mpangilio na eneo la maudhui ambalo tutaongeza baadaye. Kwa hati iliyochaguliwa kikamilifu, nenda kwenye menyu tena Uteuzi - Uteuzi wa Badilisha(Chagua > Uteuzi wa Badilisha). Punguza upana wa chaguo hadi pikseli 920. Hii inamaanisha kutakuwa na pikseli 20 za pedi kila upande wa mpangilio, kwa jumla ya pikseli 40.

Weka miongozo pamoja na uteuzi mpya:

Hatua ya 3. Unda kichwa cha tovuti.

Wacha tuendelee kuunda kichwa cha tovuti. Unda uteuzi wa juu wa 465px juu ya mpangilio.

Jaza uteuzi na kijivu kisha utumie Mitindo ya Tabaka ili kuweka rangi na gradient.

Ongeza kujaza gradient kwa kichwa kwa kutumia mtindo wa safu Uwekeleaji wa gradient(Uwekeleaji wa Gradient). Unda gradient ya rangi mbili.

Sasa kichwa kitaonekana kama hii:

Sasa unahitaji kuongeza taa kwenye kichwa. Unda safu mpya ( Ctrl + Alt + Shift + N) na uchague brashi laini yenye ukubwa wa saizi 600. Teua rangi #19535a na utumie brashi kubofya mara moja kwenye sehemu ya juu ya kichwa.

Unda uteuzi wa px 110 kwenye kichwa.

Bonyeza kitufe Futa kufuta sehemu iliyochaguliwa.

Geuza safu ya kuangazia wima (Ctrl+T).

Unahitaji kuhakikisha kuwa mahali pa mwanga kwenye kofia iko katikati kabisa. Ili kufanya hivyo, fanya tabaka na kichwa na uangaze kazi na uchague chombo Kusonga(Sogeza Zana) (V). Kwenye sehemu ya juu ya skrini, bofya kitufe cha Pangilia Vituo vya Mlalo.

Unda safu mpya (Shift + Ctrl + N) na kuchora na chombo Penseli(Zana ya Penseli) pointi, saizi ya pikseli 1. Kwa kuchora tumia rangi #01bfd2.

Wacha tupunguze kingo za safu hii kwa kutumia mask ya gradient. Chagua zana Gradient(Zana ya Gradient) na unda gradient kama inavyoonyeshwa hapa chini:

Tumia safu mpya na mask na ujaze na gradient ambayo umeunda hivi punde.

Hatua ya 4. Unda muundo

Sasa hebu tuunda muundo rahisi ambao tutaongeza kwenye kichwa. Zana Penseli(Zana ya Penseli) na saizi ya saizi 2, chora alama mbili, kama inavyoonyeshwa kwenye takwimu. Zima mwonekano wa safu ya nyuma kwa muda (bofya kwenye ikoni ya jicho karibu na safu ya nyuma) na unda muundo. (Kuhariri - Bainisha Muundo)(Hariri > Bainisha Muundo):

Unda safu mpya (Shift + Ctrl + N) na kuiweka chini ya safu ya kuonyesha. Chagua eneo ambalo ungependa kutumia muundo na ufungue dirisha Jaza(Jaza) (Shift + F5). Bofya Sawa.

Baada ya kuongeza muundo, kichwa kinaonekana kama hii:

Fanya mabadiliko ya laini kutoka kwa muundo hadi kichwa: ongeza kinyago kwenye safu ya muundo na utumie brashi nyeupe laini (#ffffff) na uwazi wa 60% ili kuchora juu ya mask.

Matokeo:

Hatua ya 5. Ongeza alama

Wacha tuendelee kuongeza nembo. Chagua brashi laini yenye rangi #19535a na upake rangi.

Andika maandishi:

Ongeza mtindo wa safu kwenye safu ya nembo Kivuli(Acha Kivuli).

Hatua ya 6: Urambazaji

Ongeza maandishi ya kusogeza.

Chora kitufe cha kusogeza kwa kutumia Zana ya Marquee ya Mstatili. Jaza uteuzi na rangi yoyote na upunguze parameter ya Jaza hadi sifuri.

Ongeza mtindo kwenye safu ya kifungo Uwekeleaji wa gradient(Uwekeleaji wa Gradient).

Hatua ya 7: Kitelezi cha Maudhui

Unda uteuzi wa pikseli 580x295.

Jaza uteuzi na kivuli chochote cha kijivu.

Weka picha. Ikate na safu uliyounda hapo awali.

Sasa hebu tuongeze athari kwenye kitelezi. Unda safu mpya (Shift + Ctrl + N), chagua Piga mswaki(Zana ya Brashi) yenye kipenyo cha saizi 400. Fungua palette ya Brashi (F5) na uweke vigezo vilivyoonyeshwa kwenye picha ya skrini:

Chagua rangi nyeusi (#000000) na chora doa:

Tumia kichujio ili kulainisha kingo Ukungu wa Gaussian(Ukungu wa Gaussian).

Chagua nusu ya chini ya kivuli na ufute (Futa).

Weka safu ya kivuli juu ya kitelezi:

Punguza safu ya kivuli kwa kushughulikia katikati (Ctrl + T), na kisha uweke safu ya kivuli tena: chagua tabaka zote mbili na ubofye kitufe kwenye paneli ya mali Kupanga vituo kwa usawa(Pangilia Vituo vya Mlalo).

Rudia safu ya kivuli (Ctrl + J) na uweke nakala kwenye ukingo wa chini wa kitelezi.

Chora vifungo kwenye kitelezi ukitumia zana Marquee ya mstatili(Zana ya Marqee ya Mstatili ) . Jaza vifungo na nyeusi (#000000).

Punguza uwazi wa safu ya kifungo hadi 50%.

Ongeza umbo la mshale kwenye vitufe vyako vya kutelezesha:

Chini ya kitelezi, chora mstari na ujaze na nyeusi (#000000).

Punguza uwazi wa safu ya mstari hadi 50%.

Ongeza maelezo ya mradi wako kwenye upau huu:

Hatua ya 8. Ongeza maandishi ya salamu

Andika maandishi ya salamu:

Hatua ya 9. Kumaliza kichwa cha tovuti

Tunakaribia kumaliza kufanya kazi kwenye kichwa cha tovuti. Ongeza kivuli kidogo kwa kutumia chombo Piga mswaki(Zana ya Brashi).

Acha pengo la pikseli 1 kati ya kivuli na kichwa.

Unda safu mpya chini ya safu ya kichwa (Shift + Ctrl + N) na weka upinde rangi kwake.

Hatua ya 10. Ongeza vifungo kwa slider

Chora vitufe vya kubadilisha slaidi.

Ongeza mtindo wa safu kwenye kitufe kimoja Kivuli cha ndani(Kivuli cha Ndani), na kisha rudia safu ya kitufe nambari inayohitajika ya nyakati (Ctrl + J).

Hatua ya 12. Unda kitenganishi cha maudhui

Tumia Zana ya Penseli na chora rangi ya kijivu isiyokolea (#aaaaaa) yenye upana wa pikseli 1.

Ongeza mask kwenye safu ya mstari na utumie gradient kuunda mpito laini kwenye kingo.

Hatua ya 13. Ongeza Maudhui

Ni wakati wa kuongeza maeneo kwa maudhui. Eneo la maudhui litagawanywa katika safu wima 3 zilizo na nafasi sawa. Kutakuwa na ujongezaji wa pikseli 25 kati ya kila safu.

Kabla ya kuanza kuunda mpangilio wa tovuti, tutahitaji mchoro ambao utaonyesha kuonekana na utendaji wake. Kwa mchoro, nilitumia tani za kijivu tu kwa ujumla kuzingatia "mpangilio" na sijisumbue na rangi bado. Kwa hivyo, unaweza kubadilisha haraka au kufanya upya kitu wakati wowote.

2. Unda hati

Mpangilio wa tovuti utakuwa na upana wa saizi 960, kwa hivyo tunahitaji kuunda hati yenye vipimo vya saizi 1200x1500, na azimio la saizi 72 kwa inchi.

Tumeamua juu ya upana, sasa tunahitaji kuteua eneo hili kwa kutumia. Bonyeza Ctrl + A ili kuchagua hati nzima.

Nenda kwa Chagua na uchague Uteuzi wa Badilisha. Kwenye upau wa chaguzi hapo juu, weka upana hadi 960, hii ndio eneo la kufanya kazi la mpangilio wa siku zijazo.

Weka miongozo kwenye kingo za uteuzi.

Sasa tutaunda ukingo kati ya mpaka wa eneo la kazi na eneo la maudhui ambayo yataongezwa baadaye. Hakikisha kuwa una uteuzi unaotumika, kisha uende tena kwenye menyu Chagua > Badilisha Uteuzi (Uteuzi - Badilisha eneo lililochaguliwa). Punguza ukubwa wa upana hadi pikseli 920. Hii inamaanisha kuwa kutakuwa na indent ya pikseli 20 pande zote za mpangilio, na jumla ya pikseli 40.

Hebu tuongeze miongozo miwili zaidi ya wima kwenye kingo za uteuzi mpya.

3. Kuunda kichwa cha tovuti

Katika sehemu ya juu ya mpangilio, tengeneza uteuzi wa 465px juu.

Jaza eneo lililochaguliwa na tint ya kijivu; baadaye kidogo tutatumia mitindo ya safu ili kubadilisha rangi.

Ongeza upinde rangi kwenye kichwa kwa kutumia mtindo wa Uwekeleaji wa Gradient. Upinde rangi utajumuisha rangi mbili #0f201c na #002931.

Hii ndio unapaswa kupata:

Sasa hebu tuongeze taa kwenye kichwa. Chukua brashi yenye ncha laini yenye kipenyo cha 600px, rangi - #19535a na kwenye safu mpya, bofya brashi iliyo katikati ya sehemu ya juu ya kichwa.

Katika sehemu ya juu ya kichwa, tengeneza uteuzi wa 110px.

Kwa kushinikiza kitufe cha Futa, futa eneo lililochaguliwa.

Kwa kutumia Ubadilishaji Bila Malipo (Ctrl + T), pindua safu ya kuangazia wima.

Hakikisha mwanga wa kichwa umewekwa katikati kikamilifu. Ili kufanya hivyo, washa tabaka kwa kuonyesha na kichwa, chagua Hamisha (V) kutoka kwa upau wa vidhibiti. Katika sehemu ya juu ya upau wa chaguo, chagua Pangilia Vituo vya Mlalo.

Baada ya kuunda safu mpya, tumia Zana ya Penseli (B) kuchora mstari wa px 1 katika upana wa hati nzima. Rangi - #01bfd2.

Kutumia kinyago cha gradient, lainisha kingo za mstari ulioundwa. Chukua Zana ya Gradient (G) na urekebishe kama picha ya skrini iliyo hapa chini:

Jaza safu iliyoundwa na gradient.

4. Kuunda muundo

Tutapamba kichwa cha mpangilio na muundo wa checkered. Ukitumia penseli ya pikseli 2, chora nukta mbili zilizo kwenye mshazari. Zima safu ya usuli kwa muda kwa kubofya jicho karibu na kijipicha cha safu ya usuli. Kisha unda muundo kwa kwenda kwenye menyu ya Hariri na kuchagua Bainisha Muundo.

Chini ya kuangazia unda safu mpya. Chagua eneo ambalo ungependa kutumia muundo. Bonyeza Shift + F5 ili kujaza kichwa.

Matokeo:

Yote iliyobaki ni kufanya mabadiliko ya laini kutoka kwa muundo hadi kofia. Baada ya kuongeza mask kwenye safu ya muundo, fanya mabadiliko ya laini kwa kutumia brashi nyeupe laini na opacity 60%.

Tazama matokeo:

5. Kuongeza nembo

Nembo ni sehemu muhimu ya kila tovuti. Ili kuunda, chukua brashi laini, weka rangi kwa #19535a na upake doa kwenye kona ya juu kushoto.

Kisha andika maandishi ya nembo.

Tumia athari zifuatazo kwake:

Uwekeleaji wa gradient:

6. Urambazaji

Unda kitufe cha aina iliyochaguliwa ya kusogeza kwa kutumia Zana ya Marquee ya Mstatili (M). Jaza eneo lililochaguliwa na rangi yoyote na upunguze thamani ya kujaza hadi 0%.

7. Kitelezi cha Maudhui

Unda eneo la uteuzi la pikseli 580x295.

Jaza eneo lililochaguliwa na kivuli chochote cha kijivu.

Weka picha juu na ushikamishe kwenye safu ya chini.

Unahitaji kuongeza kivuli kwenye slider. Baada ya kuunda safu mpya, chukua Brashi (B) yenye ukubwa wa 400px na ubonyeze kitufe cha F5 ili kufungua dirisha la mipangilio ya burashi. Tazama picha hapa chini kwa mipangilio yote.

Weka rangi nyeusi na uchora doa.

Ili kulainisha kingo, tumia kichujio cha Gaussian Blur.

Unda uteuzi kwa nusu ya chini ya kivuli na uifute.

Weka kivuli juu ya slider.

Kwanza, punguza kivuli kidogo, na kisha uweke katikati kwa kutumia kazi ya Vituo vya Usawazishaji vya Pangilia.

Rudufu kivuli na uweke nakala chini ya kitelezi.

Kutumia Chombo cha Marquee ya Mstatili (M) kwenye kitelezi, tengeneza vifungo viwili na ujaze na nyeusi.

Kwa safu ya kifungo, punguza opacity hadi 50%.

Kwa kutumia maumbo ya kawaida ya Photoshop, ongeza mishale kwenye vifungo.

Unda mstari chini ya slider na ujaze na nyeusi.

Kwa mstari, punguza uwazi hadi 50%.

Hapa unaweza kuongeza maelezo ya mradi wako.

8. Maandishi ya kukaribisha

Upande wa kushoto wa kitelezi, weka maandishi yako ya salamu.

9. Kumaliza kichwa

Tunamaliza kazi kwenye kichwa. Na hatimaye, tumia brashi ili kuongeza kivuli kinachoonekana kidogo.

Acha umbali wa pikseli 1 kati ya kivuli na kichwa.

Unda safu mpya chini ya safu ya kichwa. Weka upinde rangi kwake.

10. Vifungo kwa slider

Ni wakati wa kuongeza vitufe ili kubadilisha slaidi.

Tumia mtindo wa safu ya Kivuli cha Ndani kwenye kitufe cha kwanza ili kuifanya itumike.

11. Kitenganishi cha maudhui

Chini kidogo ya vitufe vya kitelezi, chora mstari wa rangi ya kijivu isiyokolea #aaaaaa, upana wa px 1.

Baada ya kuongeza mask kwenye mstari, fanya mabadiliko ya laini kwenye kando kwa kutumia gradient. Tumeunda mstari wa kugawanya.

12. Kuongeza maudhui

Sasa hebu tuongeze maeneo kwa sehemu ya maudhui. Zitagawanywa katika safu wima 3 zenye ujongezaji wa 25px.

Weka miongozo ya wima kwenye ncha zote mbili za wasemaji.

Kwa kila safu, ongeza kichwa na ikoni inayofaa. Chini ya vichwa, ongeza yaliyomo.

Kwa kutumia Zana ya Mstatili wa Mviringo, unda kitufe cha Soma Zaidi. Hakikisha kuwa hali ya Umbo imechaguliwa kwenye Upau wa Chaguzi.

Tumia Uwekeleaji wa Gradient na mitindo ya Kiharusi kwenye kitufe.

Nakili kitufe cha Soma Zaidi (Ctrl + J) mara mbili zaidi na uziweke katika kila safu chini ya yaliyomo.

Kama hapo awali, unahitaji kuunda mstari wa kugawanya, ukiweka chini ya vifungo. Hapo chini, weka mistatili ya kijivu na uitumie mtindo wa Stroke.

Weka picha kwenye kila mstatili.

Unda vivuli kama hapo awali na uziweke chini ya maeneo ya picha.

Chini ya kila picha, weka kichwa, maudhui, kitufe cha Soma Zaidi, na mstari wa kugawanya.

Weka ikoni ya Twitter hapa chini kwenye safu wima ya kwanza.

Kisha chapisha kwenye Twitter.

Chora kitufe kingine cha Tweets Zaidi.

Tumia Uwekeleaji wa Gradient na mitindo ya Kiharusi kwenye kitufe hiki:

Andika maandishi Zaidi Tweets juu yake.

13. Unda kijachini

Chini kabisa ya mpangilio wa tovuti, tengeneza eneo lililochaguliwa na uijaze na kijivu.

Tumia mtindo wa Uwekeleaji wa Rangi kwenye kijachini.

Hatimaye, weka urambazaji na hakimiliki kwenye kijachini.

Mpangilio wa tovuti uko tayari!

YaliyomoKuunda mipangilio ya tovuti: burudani kwa wasomi Kukuza mpangilio wa tovuti: hatua Mbinu Na. 1. Kukata mpangilio kutoka kwa kiolezo cha tovuti Mbinu Na. 2. Kuunda mpangilio wa tovuti karibu na Njia ya 3 ya Photoshop. Chombo cha kuiga mtandaoni

Kuanza, fikiria kwa nini umeamua kutengeneza mpangilio wa tovuti mwenyewe. Kazi hii inahitaji maarifa mengi kutoka kwa mtu katika IT na kubuni, mawazo ya uchambuzi na ubunifu kwa wakati mmoja. Na pia sehemu ya wakati wako. Sawa, kuna sababu 4 kwa nini unaweza kuhitaji hii. Ikiwa unayo tofauti, andika kwenye maoni, nitaongeza.

Kuunda mipangilio ya tovuti: furaha kwa wasomi

Sababu #1. Nia ya kuendeleza mipangilio ya tovuti

Je, maslahi yako ni maalum sana? Tupo hapa hatumhukumu mtu yeyote. Mara moja ikawa ya kuvutia kwetu, na tukaanza kuifanya! Kwa kuongeza, kiu ya ujuzi ni kipengele chetu cha pekee. Nashukuru udadisi wako.

Sababu #2. Ukuzaji wa mpangilio wa tovuti kama njia ya kupata pesa

Ikiwa unataka kuwa mbuni wa wavuti katika siku zijazo, inabidi uanze mahali fulani, yaani kutoka kwa mpangilio wa msingi wa ukurasa wa tovuti. Matokeo ya haraka ya kazi yako yanatia motisha kama kitu kingine chochote. Kwa bahati nzuri, katika makala hii ninapendekeza tu blitz njia za kuunda mpangilio.

Kwa njia, kazi ya mtengenezaji wa wavuti sio utani. Hapa chini nitaacha ratiba ya mishahara kulingana na urefu wa huduma (kulingana na data ya DOU ya Mei-Juni 2016). sidokezi chochote. Uwindaji wa siri tu.

Sababu #3. Kuchora vipimo vya kiufundi kwa ajili ya maendeleo ya mpangilio wa tovuti kwa mbunifu

Mara nyingi wasio wabunifu wanakabiliwa na haja ya kuonyesha mpangilio wa tovuti - wakati mwingine tu ili kuelezea wazo lako, lakini wakati mwingine ili kuimarisha vipimo vya kiufundi. Bila shaka, hii sio lazima na mtengenezaji mwenye uwezo ataelewa wazo lako na hata kuifanya vizuri zaidi kuliko unavyotarajia. Hata hivyo, ikiwa unajua hasa unachotaka, ni bora kukionyesha badala ya kuwaambia.

Programu pia ni rahisi kutumia Coggle, ambayo unaweza kuunganisha KwaGoogleEndesha.

Ninapenda Coggle kwa sababu ni ramani ya mawazo. daima karibu, ni rahisi kushiriki na wenzake, na rangi ya vipengele vya interface huchaguliwa vizuri. Kwa kuongeza, kifungo cha kulia cha mouse hufanya kazi, ambayo inakuwezesha kubinafsisha ramani kwa urahisi. Nilimaliza na muundo huu kwa ukurasa kuu wa tovuti.

Katika hatua ya kwanza ya kubuni mpangilio, ramani ya mawazo ya tovuti imeundwa

Hatua ya 2: Kuunda mfano wa tovuti

Ifuatayo, unaweza kuanza kuchora mpangilio wa tovuti mara moja katika Photoshop, lakini hata ukitengeneza mpangilio kwa udadisi wa bure, kwanza. unapaswa kuchora mfano wa tovuti. Katika ukuzaji wa hatua kwa hatua, prototyping ni hatua muhimu inayoimarisha afya ya akili ya mbuni wa wavuti. Wakati wa kuunda mfano, imepangwa vitalu muhimu vya tovuti ya baadaye(kichwa, slider, vifungo, mawasiliano, muundo wa nyenzo, nk). Hii inakuwezesha kuokoa muda kwa kiasi kikubwa katika hatua ya kuchora mpangilio kwa sababu unaweza kuona matokeo ya takriban na fanya mabadiliko bila maumivu.

Umechoka? Rahisisha maisha na agiza ukuzaji wa tovuti kutoka KOLORO. Tutazingatia matakwa yako na utapata kile ulichotaka.

Kuunda mfano wa tovuti mkondoni

Kwa kawaida mimi hutumia zana mbili maarufu za mtandaoni kwa prototyping ya tovuti: Moqups na Mockflow. Katika kesi zote mbili kuna fursa ya kuunda prototypes bila malipo, lakini kwa utendakazi mdogo. Ushuru wa tovuti ya kwanza huanzia $13/mwezi. (miradi 10, GB 1), na kwa pili - kutoka $ 14 / mwezi. (idadi isiyo na kikomo ya miradi + 25 GB katika wingu). Kila mtu pia anapendekeza Mockingbird. Nami nitaipendekeza, lakini tu kwa heshima ya Eminem, kwa sababu hapa miradi 3 itagharimu $ 12 / mwezi, na kuna zana chache za bure.

Sasa kuhusu maoni yangu ya kibinafsi. Moqups rahisi zaidi na angavu hata kutoka kwa ziara ya kwanza. Kuna vizuizi vingi na ikoni zilizotengenezwa tayari hapa - unachohitaji ili kupitia hatua ya prototyping haraka. Kwa kuongeza, vipengele vinafaa kituo kuhusiana na katikati ya ukurasa au vipengele vingine. Kusumbua kidogo kizuizi Vitu 300 kwa ukurasa katika hali ya bure - hii inaweza kuwa haitoshi kwa mpangilio wa tovuti wa ukurasa mmoja. Inawezekana kuingiza vipengele kutoka kwa mfumo wa kazi wa Bootstrap. Mockflow hukuruhusu kufanya kidogo kidogo, na unahitaji tu kuihesabu kwa dakika chache na zoea kwake, hata hivyo, zaidi nafasi ya diski inaweza kuvutia mtu.

Prototypes za tovuti katika Moqups na Mockflow

Jinsi ya kuonyesha tovuti ya siku zijazo?

Hebu tuangalie mfano wa Moqups jinsi ya kuunda mfano wa ukurasa na maandishi kwa blogi.

Hatua ya 1. Ongeza kofia(maandishi yanaweza kubadilishwa).

Hatua ya 2. Ongeza kuzuia kwa picha na uandishi (kichwa cha makala). Kwa kutumia mitindo, unaweza kubadilisha kwa urahisi ukubwa, fonti, na umbizo la maandishi mengine.

Hatua ya 3. Ongeza maandishi na kuuliza upana nguzo. Vitalu vyote vimewekwa katikati kwa urahisi ikilinganishwa na katikati ya ukurasa.

Hatua ya 4. Maandishi yanapaswa kuvunjwa picha. Na upana wa safu ni kubwa mno, px 500 itakuwa bora zaidi. Kwa bahati nzuri, unaweza kuibadilisha haraka. Pamoja kubwa: vitu vilivyochaguliwa vimepunguzwa kwa kila mmoja na kizuizi changu na picha pia kimekuwa kidogo.

Hatua ya 5. Ongeza upau wa pembeni(safu ya upande), itakuwa rahisi hapa. Wacha tuweke shamba tafuta na block kwa usajili kwa jarida (na picha ya kuvutia na kifungo mkali).

Hatua ya 6. Hebu sema makala yetu iligeuka kuwa hii ndogo. Unaweza pia kuongeza utafiti Na ukadiriaji makala. Matokeo yalikuwa mfano safi wa ukurasa wa blogu. Ongeza vipengele vingine kwa kupenda kwako.

Prototyping inaruhusu tazama ukubwa wa ukurasa na kufanya maamuzi kuhusu vitalu fulani. Kwa njia, kwa kutumia zana hizi unaweza kufanya prototypes kwa vifaa tofauti. Kwa mfano, ukijaribu, utapata kitu kama hiki. Walakini, mfano huo kawaida ni mdogo kwa muundo mweusi na nyeupe.

Mfano wa programu ya simu mahiri

Hatua ya 3: Kutengeneza mpangilio mzuri wa tovuti: kuchagua rangi

Inategemea uchaguzi wa mafanikio wa rangi mtazamo wa tovuti Na chapa na watumiaji. Siofaa kutegemea nguvu zako mwenyewe - kuchagua kivuli sahihi kinaweza kuchukua masaa. Kwa hiyo, napendekeza kutumia palette za rangi zilizopangwa tayari kwa wavuti. Hivi karibuni Google ilitoa mwongozo wa kina juu ya rangi nzuri kwa muundo wa nyenzo(mwenendo wa muundo wa wavuti). Rangi hizi hufanya kazi kwa usawa na unaweza kuwa na uhakika wa kuvutia kwao. Kutumia Materialpalette, unaweza kuchagua rangi mbili kwa mafanikio - moja kuu na lafudhi, na pia uone jinsi watakavyoonekana kwenye kiolesura. Rangi zaidi kidogo kwenye Rangi za Usanifu Bora.

Je, umewasilisha tovuti? Umetengeneza mfano? Umechagua rangi zako? Sasa unaweza kuendelea na kuunda mpangilio yenyewe. Ninakupa njia kadhaa.

Makini! Hakutakuwa na ushauri hapa juu ya jinsi ya kufanya mpangilio wa tovuti katika Photoshop - hii ni mada ya makala tofauti, hapa kuna njia rahisi zaidi.

Mbinu namba 1. Kukata mpangilio kutoka kwa kiolezo cha tovuti

au tovuti zilizopo

Njia hii inafaa kwako ikiwa unataka:

• fahamu zana za msingi Photoshop;
• kupata tofauti marejeleo kwa tovuti yako ya baadaye na kuziweka pamoja;
• kuhisi designer kwa saa kadhaa;
• onyesha kwa mbunifu wa wavuti au wakala (kwa mfano, sisi:) zaidi maono ya kina ya tovuti;
• kuimarisha TK kwa ukuzaji wa wavuti sio tu "hapa kuna vitufe vya kupiga simu, na hapa kuna kitenganishi na sumaku ya risasi."

Faida za njia hii ya maendeleo ya mpangilio:

• unaweza kuepuka makosa ya kawaida, baada ya kuona maeneo ya kutosha ya ubora;
• utaelewa nini usifanye kuifanya iwe nzuri;
• watendaji wa muundo wa wavuti watakuwa wazi fikiria kile unachotarajia;
• Hii haraka sana- katika masaa machache utafanya mipangilio ya kurasa zote za tovuti.

Minus:

• hutaelewa kikamilifu muundo wa wavuti ni nini;
• Baadhi ya marejeleo unayopata hayawezi kutekelezwa na mbuni wa mpangilio bila kubadilisha sehemu zingine za tovuti.

Jinsi inafanywa

Njia rahisi na ya haraka zaidi ya kufanya mpangilio wa tovuti ni kuchagua template kwa maalumCMS na uifanyie upya. Kwa hiyo, kwanza unahitaji kuamua juu ya CMS, ambayo itarahisisha sana maendeleo ya tovuti. Walakini, tafadhali kumbuka kuwa muundo wa tovuti utakuwa kuwa mdogo vipengele ambavyo viko kwenye kiolezo. Bila shaka, unaweza kubadilisha rangi, lakini vipengele vya interface vya mtu binafsi tayari vimetengenezwa na huwezi kuzibadilisha.

Ukifanya hivyo "kitoweo" kutoka kwa tovuti tofauti, usisahau kuandika mahali fulani kwenye daftari yako na penseli vyanzo. Hii itarahisisha ukuzaji zaidi wa muundo na mpangilio wa mpangilio.

Mipangilio ya tovuti ya Wordpress

CMS maarufu zaidi ni Wordpress. Kwa mfano, utapata violezo vingi vya kisasa vya CMS hii. Kwa ajili ya nini? Tovuti kwenye kiolezo kuongeza kasi ya uzinduzi wa mradi kwa kiasi kikubwa, hata hivyo haitakuwa ya kipekee. Ingawa, ikiwa unatumia vielelezo vya awali, picha na mbinu ya ubunifu - hata mpangilio wa kiolezo unaweza kufanywa upya zaidi ya kutambuliwa. Faida kuu ni kwamba tovuti yako imehakikishiwa kubadilika na kwa ujumla nzuri katika suala la kuonyesha kwenye vifaa tofauti.

Vinjari violezo tofauti na uchague ile unayopenda zaidi. Nilifanya utafutaji zaidi kwenye Soko la Envato na nikapata kiolezo cha Dalton ambacho nilipenda zaidi. Kwa kufikia toleo la onyesho la kiolezo, utaona mara moja dhana ya tovuti ya shirika. Kwa kubofya kwenye menyu unaweza kuona zaidi kwa undani ni utendaji gani wa kiolezo kurasa tofauti zitakuwaje. Ni bora kutumia nusu saa juu ya hili na kuelewa kwa kweli kile kilicho kwenye template.

Nini kinafuata? Kuchagua ukubwa wa mpangilio wa tovuti, kukata na kuunganisha

Wakati tayari umeridhika na kiolezo, unaweza kuanza kukihariri. slicing. Nzuri ikiwa mwonekano wa skrini yako 1920 px au zaidi - hii itakuruhusu kuchukua picha za skrini za sehemu za wavuti na kuzichanganya kwenye kihariri. Kufanya kazi na mpangilio huanza na kichwa, kisha - vitalu mbalimbali (mwili), na mwisho - footer.

Utahitaji:

• starehe chombo cha kuchukua picha ya eneo lililochaguliwa(chombo cha kukamata skrini), ninatumia Lightshot - inatoa kuhifadhi picha kwenye faili tofauti au kuinakili kwenye ubao wa kunakili;
• Photoshop- kwa gluing kata sehemu za picha.

Hatua za kuunda mpangilio wa tovuti kulingana na kiolezo

Hatua ya 1. Chagua upana wa mpangilio wa tovuti

Amua ni ukurasa gani utafanya kwanza. Usianze na kuu - ni bora kuiacha kwa mwisho, kwa sababu ... huu ndio ukurasa muhimu zaidi wa wavuti na kwanza ni bora jaza mkono wako. Katika mfano, nitaunda ukurasa wa "Kuhusu Sisi" - kutakuwa na habari ya kupendeza kuhusu kampuni na wafanyikazi wake. Tayari ninayo mfano wa tovuti, kwa hivyo najua ninachofanya. Kwa njia, mfano wako unaendeleaje?

Fungua Photoshop na weka upana wa mpangilio wa tovuti 1920 px. Hii itatosha kuona jinsi tovuti itaonekana kwenye kivinjari. Ikiwa azimio lako ni la chini, liweke kwa upana ambao kifuatiliaji chako kinaruhusu. Usijali kuhusu urefu bado - ni ngumu kukisia na bado utalazimika kunyoosha/kuweka kandarasi eneo hilo.

Hatua ya 2. Tunaendelea kuunda mpangilio wa tovuti katika Photoshop

Chagua moja kutoka kwa kiolezo kofia, ambayo unapenda. Kata nje kwa kutumia zana inayofaa, fungua hati katika Photoshop na ingiza hapo (Ctrl+V). Tumia Zana ya Kusogeza (V) kuweka kichwa juu. Ninapenda kichwa kilicho na upau wa juu, ambapo kuna maelezo ya mawasiliano kuhusu kampuni.

Hatua ya 2.A. Tengeneza mpangilio sahihi wa tovuti mara moja

Sasa una njia mbili - kubadilisha maandishi kwenye picha au kuandika maandishi yanayoambatana katika faili ya maandishi. Ambayo ni rahisi zaidi? Yote inategemea malengo yako. Kutokana na uzoefu wa kibinafsi naweza kusema kuwa ni bora kufanya hivyo katika mpangilio, mara moja kuchagua font na ukubwa. Hii itakuwa salama na itakuwa WYSIWYG kwa vitendo (Unachokiona ndicho unachopata, "unachokiona ndicho unachopata").

Hatua ya 3. Hebu tuende kwenye mafanikio

Jaza yangu mpangilio vitalu tofauti na hariri yao kulingana na mahitaji yako. Sio lazima kucheza na rangi katika hatua hii ikiwa huna ujuzi wa Photoshop. Ili kuongeza urefu wa mpangilio, tumia chombo "Fremu"(NA).

Nini kimetokea

Baada ya dakika kadhaa za kufikiri, kukata na kuunganisha vipande ambavyo nilipenda zaidi, nilipata mpangilio wa ukurasa uliopangwa"Kuhusu sisi"

Nini hupaswi kusahau

1. Wito kila safu na block vya kutosha, kulingana na kile kilichopo. Vinginevyo, utapotea kabisa.
2. Wakati wa kuchagua font unahitaji kuchagua ukubwa tofauti kwa vichwa na mwili maandishi. Katika kesi hii, ni bora kuongozwa na maktaba ya fonti ya wavuti ya Google Fonti. Usisahau kuchuja fonti za Kisirili.

Njia namba 2. Kuunda mpangilio wa tovuti katika Photoshop ni karibu

Njia ya 2 inafaa kwako ikiwa:

• wewe HapanaPhotoshop(dhamiri hairuhusu au hakuna nafasi ya diski) au bado haujajifunza jinsi ya kuitumia;
• Unataka kufahamuHTML code naMitindo ya CSS bila kuingiliwa na alama;
• unahitaji mpangilio wa tovuti unaoingiliana.

Ninapendekeza zana ya kushangaza ya mpangilio wa bure Macaw. Ili kufanya kazi na programu unayohitaji pakua na usakinishe- ni suala la dakika chache. Katika programu unaweza hali ya kuona kwa vitendo mpangilio mpangilio, kwa sababu unaweza kuchapisha mara moja na kuona msimbo wa HTML na CSS. Maelezo kidogo zaidi juu ya jinsi programu inavyofanya kazi. Macaw ina drawback muhimu - inajenga ukurasa wa wavuti usio na majibu. Jinsi ya kukabiliana na hili? Ujuzi utahitajika hapa mbunifu wa mpangilio kuunganisha mfumo (kwa mfano, ikiwa unatengeneza mpangilio wa tovuti kwa Bootstrap). Walakini, ikiwa unahitaji tu kuonyesha mpangilio wa kazi kwa wenzake - Macaw ni kamili.

Hivi ndivyo kiolezo kisichojibu kinavyoonekana kwenye vifaa tofauti. Nataka kulia

Ili kuanza, fungua programu kwenye kompyuta yako. Tunawasilisha kwa mawazo yako hati tupu yenye upana wa ukurasa wa 1200 px na mpangilio wa tovuti ya gridi ya taifa. Kwa chaguo-msingi, kuna kati ya safu wima kujipenyeza(padding), kwa hivyo kutakuwa na nafasi kati ya vitu vilivyoundwa. Unachohitajika kufanya ni kuchora ndani ya nguzo, kwa sababu ikiwa unakwenda zaidi yao, vitalu vitaonekana chini ya kila mmoja. Kwa hiyo endelea kuwaangalia.

Unaweza kujitegemea kuweka upana wa nguzo, idadi yao na umbali kati yao. Ukitaka vipengele kukwama kwa kila mmoja, weka upana wa safu hadi 100% na uondoe pedi kati yao. Kwa nini unahitaji mesh hii? Kwa mpangilio wa HTML wa mpangilio wa tovuti kutakuwa na Ni rahisi kutengeneza kiolezo kinachojibu, kwa sababu mifumo ya kisasa hutumia gridi ya safu 12.

Unaweza kubadilisha upana wa eneo la kazi kwa kuivuta kulia, au kwa kuweka ukubwa mwenyewe

Nini kinafuata? Mpangilio

Sanidi nafasi yako ya kazi jinsi unavyotaka na tuanze kufanya kazi. Nitakuwa nikiunda ukurasa ule ule ambao nilikata kutoka kwa kiolezo cha Dalton.

Hatua ya 1.

Kwanza unahitaji kuunda kofia. Itakuwa chombo yenye urefu wa px 100 na mpaka wa chini wa unene wa px 1.

Ndani ya mwingine chombo kutakuwa na nembo, na ndani ya inayofuata kutakuwa na menyu. Hakuna haja ya kuunda menyu kwa vitu vya menyu ya kibinafsi vitalu tofauti, inatosha kuweka umbali unaokubalika kati ya maneno (nafasi ya maneno).

Hatua ya 2

Kwa kichwa kilichomalizika, unaweza kuendelea na vitalu vilivyobaki. Katika block inayofuata nitakuwa nayo usuli ambayo ni muhimu pakua tofauti.

Hatua ya 3. Unda mpangilio wa tovuti unaoingiliana

Ninaendelea kuburuta vizuizi na kuingiza maandishi ndani yake. Ninaunda kitufe kwa kutumia zana maalum " Kitufe"(mantiki!). Macaw inakuwezesha kuunda mpangilio unaoingiliana na hali tofauti za kifungo na uwezo wa kubadili kati ya kurasa.

Tafadhali kumbuka vipengee vifuatavyo vilivyoangaziwa. Wanakusaidia kubadili kati ya vizuizi tofauti na kuvipanga. Kwa mfano, maandishi lazima yawe kwenye chombo maalum, na sio kuzunguka tu.

Ukibonyeza Faili ->Kuchapisha, utapokea ukurasa uliotengenezwa tayari ambao unaweza kutazama msimbo wa HTML na CSS katika vichupo tofauti. Hii ni rahisi sana ikiwa unataka kuona markup inaonekanaje.

Nini kimetokea

Iliibuka kitu kama hiki. Hapa kwa kulinganisha, kushoto vipande vya glued vya template iliyohaririwa, kulia- mpangilio iliyoundwa katika Macaw. Pamoja kubwa ya programu ni kwamba unaweza kuingiza vifungo, kuongeza viungo kwao, kuunda kurasa tofauti na kuzunguka kati yao. Tu usisahau kuhusu uongozi wa chombo na usipotee ndani yao.

Vipengele vya njia hii ya kuunda mpangilio wa tovuti:

• kuelewa hila za kazi mipango, unahitaji kutumia muda wa ziada;
• hata wakati tayari umeingia kwenye programu, bado wakati mwingine haijulikani kwa nini inafanya hivi na si vinginevyo;
• unaweza kusahau kuhusu kubadilika ikiwa hutaimaliza mwenyewe;
• kweli rahisi kuunda mpangilio na hata kuelewa mpangilio kidogo - unaweza kuona jinsi vipengele vinavyoingiliana na ni muundo gani kwa ujumla;
• vitu kama "upana: 16.6666666666%" vinaweza kuonekana katika mitindo, ambayo itabidi kurekebishwa; unahitaji tu kuelewa kuwa hii ni WYSIWG, na hakuna zaidi.

Njia nambari 3. Chombo cha kuiga mtandaoni

Ikiwa unatafuta chaguo la jinsi ya kuunda mpangilio wa tovuti katika maombi na kiolesura rahisi zaidi na angavu, nilitayarisha njia hii hasa kwa ajili yako.

Chombo rahisi cha kuunda infographics, ambayo nimekuwa nikitumia kwa muda mrefu - huduma ya Creately. Kuna kadhaa na mamia ya vipengele vya kuunda Usanifu wa UI kwa vifaa tofauti (zaidi kwa vifaa vya rununu). Hakika utaipenda, nitakuonyesha baadhi yao.

Bado hapa rahisi kuhariri vipengele, ongeza maandishi (na hata ufanye vifungo vyenye viungo!). Kwa ujumla, katika dakika chache tu tayari nimepata kitu sawa na katika Macaw, tu makini zaidi. Hata hivyo, mpangilio huo hauwezi kufanywa mwingiliano mkubwa. Hakutakuwa na hatua kwa njia hii kwa sababu ... Huduma ni angavu. Kwenye skrini nilijaribu kuonyesha iwezekanavyo uwezo wa huduma.

Vipengele vya huduma ya Creately

Ni hayo tu. Hizi ndizo njia ambazo nilikuja katika hatua moja au nyingine ya maendeleo ya ubunifu. Ikiwa unapata nyenzo hii muhimu, tunafurahi.

P.S. Makala haya ni kwa madhumuni ya habari pekee na hayatakuruhusu kuwa mbunifu wa wavuti. Ili kupata maarifa mazito, italazimika kuchimba mengi zaidi kwenye mtandao.

Katika somo hili, tutajifunza jinsi ya kuunda muundo wa blogu wa mtindo wa chini kabisa kwa kutumia teknolojia mpya za Photoshop. Chaguzi mpya za kuunda na kuokoa mitindo zitatusaidia na hili. Mitindo ya Wahusika na Mitindo ya Aya.

Wacha tuone ni nini tutaunda katika somo hili.

Ili kukamilisha somo hili, utahitaji nyenzo zifuatazo:

• Fonti ya Bure Usio na herufi.
• Mchoro wa Pixel wa muundo 26 unaorudiwa
• Icons za Kijamii Huweka Icons za Mitandao ya Kijamii Huru
• Aikoni ya Mshale wa Mkono
• Picha ya hisa Picha ya hisa: Mavuno 1
• Picha ya hisa Picha ya hisa: New York Streets 3
• Picha ya hisa Picha ya hisa: Daisy Age
• Picha ya hisa Picha ya hisa: Mti kwenye upeo wa macho
• Picha ya hisa: Takwimu za mauzo
• Picha ya hisa Picha ya hisa: Muda ni Pesa!

Kuandaa Canvas

Hatua ya 1

Katika somo hili tutatumia mfumo 960GS . Inahitajika na pakua kiolezo kutoka kwa ukurasa wake mkuu na upate faili ndani ya kumbukumbu"Gridi ya safu wima 12".

Bofya kwenye ikoni ya jicho karibu na safu ya Gridi ya 12 ili kuficha mwonekano wake - hadi tutakapoihitaji.

Hatua ya 2

Kwa sasa, saizi ya turubai yetu ni ndogo sana. Bofya Picha>Ukubwa wa turubai(au Ctrl + Alt + C) kufanya saizi kuwa kubwa kidogo na kuweka sehemu ya nanga katikati.

Hatua ya 3

Bofya Ctrl + Rkuonyesha mtawala. BofyaTazama> Mpya Mwongozo (Tazama - Mwongozo Mpya) kuunda mwongozo mpya.Chagua Wima na Nafasi: 185px ili kuunda mwongozo wima ambao utarekebishwa kwa pikseli 185 kutoka ukingo wa kushoto.

Hatua ya 4

Unda miongozo wima zaidi kwa umbali wa150 , 1095 Na saizi 1130 .

Kuandaa Mandhari ya Rangi

Hatua ya 5

Katika muundo wetu tutatumia mchanganyiko wa rangi zifuatazo - Colorlouver . Bofya kwenye picha ili kufungua mchanganyiko wa rangi na uhifadhi kama JPEG.

Weka mpango wa rangi ndani ya faili ya Photoshop.Kwa kuweka picha moja kwa moja ndani ya kiolezo chetu, kuipata itakuwa haraka na rahisi zaidi.

Kuandaa usuli

Hatua ya 6

Chagua safu ya Mandharinyuma na ubofye kwenye ikoni ya kufuli ili kufungua safu hii. Bofya mara mbili kwenye picha ili kubadilisha rangi ya usuli.

Tumia eyedropper kuchagua rangi ya pili ya mpango wetu wa rangi (# 948371) .

Hatua ya 7

Chora umbo la mstatili juu ya turubai.Hii itakuwa msingi wa pili.

Hatua ya 8

Chagua fomu iliyoundwa na uende kwenye Upau wa Chaguo. wazi Jaza Rangi na ubofye ikoni ya kichagua rangi. Wakati sanduku la mazungumzo la Kichagua Rangi linapoonekana, chagua rangi ya kwanza. Katika shamba Kiharusi chagua Hakuna

Hatua ya 9

Unda safu mpya na utumie Zana ya Marquee ya Mstatili kuchagua mstatili wa juu. Washa Zana ya Kujaza Gradient na ujaze eneo lililochaguliwa na upinde rangi wa radial kutoka nyeupe hadi nyeusi.

BADILISHA hali Mchanganyiko hali juu Skrini na kupunguza uwazi Uwazi kabla 37% .

Hatua ya 10

Unda safu mpya na uipe jina "kivuli".

Chora uteuzi wa mstatili chini ya usuli wa pili kama inavyoonyeshwa kwenye picha hapa chini. Bofya Hariri: Jaza . Sakinisha Tumia - Nyeusi . Bofya sawakujaza uteuzi na nyeusi.

Hatua ya 11

Itie ukungu kwa Ukungu wa Gaussian. BofyaKichujio> Ukungu> Ukungu wa Gaussian .

Hatua ya 12

Shikilia Alt, weka kielekezi kati kivuli Na safu yenye mandharinyuma ya pili. Ukiwa umeshikilia Al, bofya ili kubadilisha safu kuwa kinyago cha kukata. Kuibadilisha kuwa Mask ya Kupunguza, vivuli sasa vimewekwa ndani ya mandharinyuma ya juu.

Hatua ya 13

Badilisha uwazi wa kivuliUwazi kabla 50% . Hapo chini unaweza kuona matokeo kwa ukuzaji wa 100%.

Hatua ya 14

Ni wakati wa kuweka tabaka zote katika kundi moja. Ili kufanya hivyo, chagua tabaka zote na ubonyeze Ctrl + G.

Kijajuu

Hatua ya 15

Chora mstatili juu ya turubai kama inavyoonyeshwa kwenye picha.

Hatua ya 16

Katika jopo Upau wa Chaguo, kuweka rangi Kiharusi- #af9f8e .

Hatua ya 17

Kwa kujaza chagua rangi zifuatazo za gradient ya mstari - kutoka#d0c4b9 Kwa #a89c91.

Jina la tovuti

Hatua ya 18

Kwenye upande wa kushoto wa template tunaongeza jina la tovuti yetu. Tafadhali kumbuka kuwa uwekaji unalingana na picha hapa chini. Bofya mara mbili maandishi na uongezeKudondosha Kivuli. Fonti iliyotumika katika somo Sansation.

Menyu

Hatua ya 19

Kwa kutumia fonti ya Sansation 14 pt, tunaunda menyu. Tena, makini na uwekaji.

Hatua ya 20

Kwa kitufe cha menyu amilifu, weka aina ya fonti kwa herufi nzito.

Hatua ya 21

Washa zana ya Polygon na uweke nambari ya pande hadi 3 . Chora pembetatu na rangi ya kujazaJaza: #3d3123na thamani ya kiharusiKiharusi: Hakuna. Ongeza kivuli kwenye safu -Mtindo wa Tabaka> Achia Kivuli .

Hatua ya 22

Wacha tuangazie kitufe cha menyu inayotumika. Washa Chombo cha mstari na kuweka ukubwa wake uzito -saizi 5. Chagua rangi#f76b6a na mstari unapaswa kuwa bila kiharusi.

Weka mstari chini ya menyu inayotumika na uongeze umbali wa px 1 kati ya mstari na umbo la mstatili.

Kutumia Mitindo ya Tabia

Hatua ya 23

Hebu tuhifadhi mipangilio ya mtindo kwa maandishi. Hili ni jambo kama toleo lililorahisishwa la mitindo ya wahusika katika InDesign. Ili kuwaokoa, unahitaji kuamsha maandishi, na kisha bofya kwenye ikoni ya "Mtindo Mpya wa Tabia".

Bonyeza mara mbili kwenye mtindo mpya na uchague mipangilio ifuatayo.

Hatua ya 24

Chagua kipengee cha menyu kinachofuata kisha ubofye kitufe cha Sinema ya Tabia ili kutumia mipangilio ya mtindo.Ikiwa unapata ishara ya kuongezea karibu na mitindo, inamaanisha kuwa wana mipangilio tofauti.

Hatua ya 25

Rudia hatua ya awali ili kutumia mtindo ulioundwa kwenye menyu inayotumika.

Hatua ya 26

Kwa hivyo ni faida gani ya kutumia mitindo ya wahusika? Watatusaidia kuweka mipangilio ya maandishi katikati. Tunaweza tu kubadilisha mtindo wa herufi ili kuhariri maandishi yoyote. Kwa mfano, ukibadilisha mtindo Menyu ya Juu - Kawaida juu Corbel, vitu vyote vya menyu vitabadilika kiotomatiki kuwa Corbel.

Hatua ya 27

Unda safu mpya na kuiweka chini ya vitu vya menyu. BofyaCtrl na ubonyezemenyu kufanya uteuzi unaofuata. Ijaze nyeusi.

Hatua ya 28

Ondoa uteuzi kwa kubofyaCtrl + D.Waa eneo jeusi kwa kutumia kichujioKichujio> Ukungu> Ukungu wa Gaussian .

Kitelezi

Hatua ya 29

Chora umbo la mstatili lenye upana wa safu wima (tazama hapa chini).

Kwa rangi ya kujaza, chagua #dfd1c2. Rangi Kiharusi #c8baac, ukubwa 10 pt. Bofya kwenye mshale mdogo karibu na mstari ili kuhakikisha kuwa chaguo limechaguliwa Panga Ndani.

Hatua ya 30

Ingiza picha kama inavyoonyeshwa kwenye takwimu hapa chini. Igeuze iwe Clipping Mask kwa kubofya Ctrl + Alt + G . Picha itawekwa kiotomatiki ndani ya kizuizi cha slaidi. Ikiwa ni lazima, unaweza kurekebisha ukubwa na kusonga bila kuathiri sura yake kwa njia yoyote.

Hatua ya 31

Chora umbo lingine la mstatili karibu na kitelezi chenye rangi sawa.Hakikisha umbo litaingia kwenye mwongozo wa nje. Kuongeza mitindoMtindo wa Tabaka > Uwekeleaji wa Muundo, kwa kutumia texture

Photoshop ni programu maarufu sana kati ya wabuni wa wavuti, hata kiwango cha wengi. Na linapokuja suala la mpangilio wa tovuti, mara nyingi humaanisha faili ya .PSD.

Kabla ya kuunda mpangilio moja kwa moja, unahitaji kuamua juu ya muundo wa tovuti, fikiria kupitia urambazaji, na ufikirie ni wapi vitalu na vipengele vitapatikana.

Mpangilio unajumuisha nini?

Idadi kubwa ya kurasa za wavuti zinajumuisha:

• Sehemu ya juu (kichwa), ambayo alama, kauli mbiu, orodha ya urambazaji, nk.
• kizuizi kikuu ambacho maudhui yanawekwa;
• ubao wa pembeni (upau wa kando);
• sehemu ya chini (chini), ambayo kwa kawaida huhifadhi habari inayounga mkono, habari ya hakimiliki, viungo muhimu, nk.

Jinsi ya kuunda?

Njoo na ufikirie kupitia muundo. Haitakuwa na madhara kuteka kwenye kipande cha karatasi au katika Photoshop yenyewe.

Jihadharini na mpango wa rangi - tani lazima ziwe pamoja na zinahusiana na mandhari na mwelekeo wa tovuti. Maandishi yanapaswa kuwa rahisi kusoma na kurasa zinapaswa kupakiwa haraka. Usipitie juu ya mapambo, vipengee vya kuingiliana na fonti za kupendeza - urahisishaji ni muhimu zaidi kuliko muundo wa kuvutia, kwa sababu watumiaji hutembelea tovuti sio kuziangalia, lakini kwa kusudi lililoamuliwa mapema, na kadri rasilimali yako inavyoweza kuitatua, ndivyo inavyozidi kuongezeka. inathaminiwa.

Amua ikiwa muundo wako utakuwa wa kunyoosha au wa kudumu. Template ya ukubwa usiobadilika inaonekana sawa kwenye skrini zote, wakati template ya "mpira", kubadilisha ukubwa, kukabiliana na kifaa. Ikiwa muundo ni "mpira", basi unahitaji kuamua ni nini kitakachojaza asili ya tovuti.

Hata hivyo, tuliunda mpangilio wa rasilimali hii ya mtandao, ambayo ni sehemu (ninapendekeza sana), na unaweza kupata mfano mgumu ndani yake.

Hapa, ili usifadhaike na maelezo na matumizi ya zana zilizojifunza tayari, nitazingatia mfano wa masharti ya mpangilio, mchoro wa template, lakini kwa kutumia algorithm iliyoelezwa unaweza kufanya kazi kwa urahisi na mpangilio wako mwenyewe.

1. Unda hati kwa mpangilio wa siku zijazo. Usisahau ukubwa.
2. Weka mipaka ya mpangilio kwa kutumia miongozo iliyochorwa kutoka kwa watawala.

Ili kuwezesha watawala, ama bonyeza mchanganyiko muhimu Ctrl+R, au tekeleza amri Tazama -> Watawala wa menyu kuu ya programu.

Ili kuburuta mwongozo wa mlalo, bofya kwenye mtawala wa juu na kifungo cha mouse na, bila kuiachilia, songa pointer chini hadi mwongozo uwe katika nafasi inayohitajika. Ili kupanua mstari wa wima, fanya vivyo hivyo, songa tu pointer upande wa kulia wa mtawala upande wa kushoto.

Kwa hivyo, kiolezo chako kinapaswa kuwekewa mipaka.

1. Chora mpangilio. Ongeza michoro, mistari, vifungo na vipengele vingine. Kila kitu hapa ni cha mtu binafsi, na tuliangalia zana za kufanya kazi kote.

1. Ongeza rangi ikiwa bado hujafanya hivyo. Kumbuka maelewano na upole wa tani. Ujuzi wa mwingiliano wa mashine ya binadamu na shule ya sanaa utakuwa tu faida.

Jinsi ya kukata

Mpangilio wa kumaliza unahitaji kukatwa "vipande" ili kutumia vipengele vyake katika muundo wa tovuti, sehemu ambayo itatekelezwa kwa njia ya HTML, sehemu kupitia CSS, na sehemu kupitia picha ambazo mpangilio utakatwa. Kumbuka hili unapotaka kuacha picha kadhaa na historia nyeupe, maandishi ya ukurasa au majina ya kiungo - unahitaji kuondoka tu kile kitachukuliwa kutoka kwa faili za graphic na haitatekelezwa kwa njia nyingine.

Kwa hiyo, mpangilio uko tayari na wazi. Tutaukata.

1. Zima tabaka na vipengele vya mpangilio visivyohitajika - maandishi, vifungo, fomu, nk Ili kuficha safu, bofya jicho kwenye mstari wake.

1. Kurekebisha miongozo inayotolewa kutoka kwa watawala hadi vipengele vya kimuundo vya tovuti. Kimsingi, mpangilio unaweza kukatwa kando yao, lakini katika kesi hii inaweza isigeuke kama inavyohitajika, kwa hivyo tutatumia zana nyingine.
2. Chagua zana ya Nesting. Iko kwenye palette katika kikundi cha Frame.

1. Ili kukata kipande cha muundo wako, sogeza kielekezi chako mahali unapotaka kuanzia na ufanye kana kwamba unachagua eneo la mstatili. Sehemu iliyokatwa itahesabiwa. Rangi ya bluu ya nambari inamaanisha kuwa kipande kinafanya kazi na kinaweza kuhaririwa. Sehemu ambazo programu inatarajia kukata zimehesabiwa kwenye mandharinyuma ya kijivu. Kipande kilichokatwa kinasisitizwa na kina alama, shukrani ambayo ukubwa na nafasi yake inaweza kubadilishwa.

1. Fanya kata inayofuata kwa njia ile ile, na kadhalika mpaka kazi imekamilika.
2. Wakati kila kitu kimefanywa, kuokoa matokeo. Ili kufanya hivyo, endesha amri Faili -> Export -> Hifadhi kwa Wavuti (toleo la zamani), angalia mipangilio (chagua umbizo, ubora, nk), bofya Hifadhi na ueleze folda ambayo orodha ya faili za picha itaundwa. .

1. Ndani ya saraka iliyochaguliwa, folda ya picha ilionekana na faili za picha, ambayo kila moja ilikuwa na sehemu ya mpangilio.
2. Sasa unaweza kuhifadhi vifungo, icons na vipengele vingine vilivyofichwa hapo awali.

Mpangilio umeundwa, kata na tayari kabisa.