Basics za Graphics Design - Layout, Blocking, Typography na Colour

Kainetics

Senior Member
Jun 20, 2022
131
259
Kainetics Basics za Graphics Design.jpg

Habari wana JamiiForums, na wadau wa humu kwenye Tech & Gadgets Forum nimeona sio mbaya leo kushare basics za Graphics Design kwa wale ambao wanafanya hii kitu tayari au wale ambao wana interest ya kutaka kuanza.

Nitaongelea mambo matano, Basics za Layout Design, Blocking, Typography na Colour, ambazo ukizicombine design zako zitakuwa level nyingine.

Hizi ideas zinaweza kuwa applied kwenye aina yoyote ya Graphics Design, uwe unategeneza logo, posters, banners, UI/UX Design, mabango, nk.

Kufikia mwisho wa makala hii nadhani utakuwa unaweza fahamu nini kinafanya design baadhi ya designs kuonekana ziko well thought na nyingine za kawaida mno.

Utangulizi

Kwenye swala zima la kufanya Graphics Design, zipo software za muhimu ambazo itabidi ujizoeze nazo. Kama utakuwa unafanya Layout Design ya Vitabu, Majarida na Magazeti, nashauri kuchukua Adobe InDesign. Kwa Designs nyingine kama Logo, Vector Graphics, nk. hapa itatumika Adobe Illustrator. Designs nyingine karibia zote zilizobaki utatumia Adobe Photoshop.

Japo, kwenye makala hii sitoenda kwenye kuongelea workflow ya hizo software, bali kuelezea theory inayotumika kwenye kufanya designs zilizotulia. Tuanze na Layout Design.

Layout Design.

Hii ni moja ya aina za Graphics Design ambayo ni ya msingi kabisa, na yenyewe inajihusisha na swala zima la mpangilio la vitu kwenye canvas yako.

Canvas ni design nzima inapokuwa empty. Kwa mfano, ungekuwa mchoraji, zipo size mbali mbali ambazo unapasww ujizoeze nazo ambazo ni A1, A2(ambayo ni nusu ya A1), A3(Ambayo ni nusu ya hio A2), A4(nusu ya hio A3) na B5(nusu ya hio A4)

Kainetics A4-Template.jpg


Ila likija swala zima la kutengeneza Designs kwa ajili ya matumizi digitally; Size za Canvas huwa Determined kutokana na Ratio ya Urefu na Upana na sio Vinginevyo. Hizi ni baadhi ya size za mhimu ambazo uta consider.

1:1 / Square

Kainetics Square.jpg


Hii humaanisha kuwa urefu na upana huwa ni sawa, hivyo kupelekea canvas kuwa sawa na mraba. Hutumika sana sana kwenye logo, na kutengeneza mabango, au cropping ya zile picha za Instagtam.

Sana sana banners na posters ambazo zitatumika kwenye Instagram, kama zinazoongelea Events, Taarifa fupi(Kama za MillardAyo) na mini-infographics hutumia size hii. Cover Arts za Album zinazowekwa Spotify, BoomPlay na huko lwingine huwa kwenye size hii.

3:4 / Potrait

Kainetics Potrait.jpg


Kama kuna vitu vitakuwa vinapungua kwenye hio layout ya kwanza, basi layout hii ipo kuongeza nafasi kidogo ambapo Designer anaweza kuwa creative. Hii pia ndo most common na used maana inaweza tumika karibia kwenye kila platform.

Ratio yake inamaanisha kua urefu unazidi upana kwa difference ya numerator 1.

3:2 / Banner

Kainetics Banner.jpg


Kama Design husika ulitaka itumike ndani ya post , au kitabu, na hukutaka ile nafasi Kubwa kwenye ukurasa, basi hii layout bdio hutumika. Mfano kibanner cha hii thread kiko kwenye size hii. Na matangazo mengi utakayokutana nayo kwenye blogs, au hata zile picha za kwenye vitabu huwa katika size hii...kwa kuwa huo urefu wake ni mdogo kuliko upana.

16:9 / Landscape

Kainetics Landscape.jpg


Kama utakuwa na intention ya kutengeneza design itakayojaza screen yoyote ile ya computer au TV, basi ni 16:9. Hii nayo ni familia kwa kuwa ndio size ya videos zilizoko HD, au screen yako ya simu ukii rotate into Landscape mode.

Hii haitumiki sana sana , labda ukiwa Web Designer na utakuwa ukitengeneza sliders, na responsive cta's basi ndipo itatumika. Pia Thumbanail za Video za Miziki,nk. Huwa designed kwenye hii size.


9:16/ Story

Kainetics Story.jpg


Hii hapa ni kinyume cha Landscape na unaweza ilinganisha na screenyako ya simu . Sana sana hii unaweza iconsider kama graphics zako zitaenda tumika kwenye handset ambapo ungependa zijaze kioo kizima, mfano wallpaper za simu, video za Tiktok, WhatSapp Statuses, nk.

Nyinginezo

Kainetics Social Media Sizes.png


Zipo designs nyinginezo pia ambazo ni custom constants kwendana na platform ambako zitatumika. Mfano Facebook Banner, Post na Reel zina size zake. Hivyo hivyo kwa Twitter na hata Pinterest. Hata Channel Art ya Youtube ina size yake constant.

Kama utakuwa unafanya layout design ya vitabu, hardcopy, pia navyo vina size zake tofauti kabisa. Majarida yana size zake tofauti nanhata magazeti pia. Hivyo ni mhimu kuchagua Layout ambayo itaendana na design unayotaka ku accomplish.


Vipimo

Kama utakuwa unatumia software kwenye computer au Apps kwenye simu kufanya hizo Graphics zako, unapaswa uwe familiar na sizes mbali mbali. Ikiwemo. Inches, Pixels na Centimetres. Hii itakusaidia kama designs zako zinapaswa kuwa na vipimo maalumu.

Margins, Aligning, Dents na Spacing

Design yoyote ile ili ipendeze, lazima ifanyiwe layout considerations ya hayo mambo manne hapo juu, haijalishi kama ni Presentation ya PowerPoint, Cheti au Banner ya Show nami ntavielezea kwa lugha isiyo rasmi.

🏷Margins - Hizi hudetermine space kutoka mwisho wa karatasi na sehemu mambo yote yanayopaswa kuwa kwenye design yatakapoishia.

Kama uliwahi soma kurasa ya kitabu chochote kile, huwa kuna uwazi unaachwa kuizunguka karatasi nzima. Hii ni muhimu kuhakikisha mambo yote ya msingi yanaonekana kati kati ya canvas husika.

Kainetics Margin.jpg


Mfano, kwenye hii design ya ukurasa kwenye guide ya HESLB, huo mstari wa kijani niliozungushia ndio Margin, hii ikimaanisha hakuna element yeyote iliyoongezeka nje ya mstari husika.


🏷 Alignment - Hii hapa sana sana hudeal na maneno na huwepo kudeal na mpangilio wa yatakvyoonekana kwenye design husika. Zipo aina nne kuu za Alignments; Centered, Left , Right na Full Scope. Hizi, kila moja kwa nafasi yake hutumika kupangilia kila kitu kwenye canvas kwendana na umhimu wake.

Mfano, Centered alignment hutumika sana sana kwenye kuandikwa vichwa vya habari, nk. Na sana sana hii ni kumaanisha kwamba maneno utayakuta kati lati kabisa ya design husika. Left humaanisha, maneno huanzia kwenye kituo sawa upande wakushoto wa canvas na right ni kinyume chake. Fullscope alignment ni pale maneno yatakapoanzia na kuishia kwenye kituo saawa kwenye design husika.

Kainetics Centered Alignment .jpg


Kwenye hio picha, unaweza kuona ni Centered Alignment maana maneno yote yako kati kati.

Kainetics Left Alignment.jpg


Kwenye hii hapa unawez kuona ni left alignment, maana maneno yote yanaanzia sehemu moja upande wa kushoto(huo mstari wa orange)

Hivyo, right alignment kitakuwa kinyume cha hio . Na Fullscope, ni pale ambapo kituo cha kuanzia na kuishia kwa mstari kwenye aya au paragraph yoyote ile ni contant.

🏷 Dents - Hizi ni pale unapokuta haya mbali mbali hazianzii kwenye kituo kimoja ndani ya layout, na hii huwa ipo kuelezea vipengele au sub categories.

Zipo InDents na Exdents. Na maana zake ni kama majina yake yanavyosema. Indents ni zile haya ambazo utazikuta ndani sana ya margin sana sana kama kuna lists, au bullet points. Huwa indentend. Exdents ni kinyume cha Indents. Hizi huwa karibu na Margins husika.

Kainetics Dents.jpg


Mfano, kwenye huu huu ukurasa mmoja wapo kwenye hio Guide ya kuomba mikopo, HESLB, mstari wa kijani unaonesha Exdent na mwekundu unaonesha Indent.

Nitaendelea na Blocking.

Blocking

View attachment 2322732

Hii kwa jina jingine hutambulika kama Frame Composition. Tunaweza ni yale maamuzi ambayo Designer anapitia kuamua nini kikae wapi , kwenye canvas husika ili kufikisha ujumbe takiwa.

Hii Blocking, haipo kwenye Graphic Design peke ake, Film Directors huitumia kuonesha nini kinaendelea kwenye scene husika, visually kwa kuwapangilia actors, props na sets zinavyoonekana kwenye shot husika -yaani kukwambia nini ni cha kupuuza, na nini itabidi ukipe attention yako.

View attachment 2322735

Kwa wachoraji pia, blocking huitumia kama sehemu ya kuipa picha husika upekee na ukamilifu. Mchoro wa mwanamke anaecheka , sio painting kamili kama mchoraji hatoamua huyo mwanamke atamuweka kati kati ya picha, kushoto au kulia, na ukubwa wake kulinganisha na mazingira yanayomzunguka. Na nyuma yake nini kitakuwepo, au mbele pia. Maamuzi kama hayo ndio yatafanya wewe ukienda kuitazama picha husika baadae ugundue ni picha ya mwanamke anae cheka bila mtu kukwambia.

Mfano rahisi, ukipiga selfie na rafiki zako watatu, na mtu mwingine picha husika akiiangalia, atajua mhusika mkuu kwenye picha ni nani. Maana huonekana kuliko wale wengine.

View attachment 2322736

Mchoro wa mwanamke anaecheka ni mgumu kuuelewa kama mwanamke husika kachorwa kushoto mwa canvas, na kwa mbali huku mambo mengine yakichukua nafasi kubwa. Hivyo ni mhimu, kuzingatia taarifa gani ni za mhimu na zipi, hata zikipuuzwa bado maana husika haitopotea.

Kwa haraka haraka, Blocking inahusisha mambo matatu ambayo itabidi kuyafanyia consideration.

View attachment 2322738

Background, Mid-Ground na Foreground. Ntatumia Banner nliyotengeneza kwa ajili ya Thread hii kama mfano.

Background- Hii ndo layer ya kwanza kabisa kwenye design yeyote ile na ikafanywa vizuri hupuuzwa, ila ukiifanya ovyo, kila mtu atakuwa anahisi design husika ina kasoro.

Umuhimu wa Background ni kusetup tone ya design nzima, na kukupa starting point kwenye kutengeneza design yako. Sifahamu tafsiri yake sahihi kwa kiswahili, ila kile kitambaa cha blue bahari unapo piga Passport, ndio Background.

Kwenye Banner ya makala hii, Background nimefanya ya Brown huku ikiwa na Gradients mbili zinazovaana. Haina mambo mengi, na haipo kukudistract kuhusu ujumbe husika.

View attachment 2322740

Kwenye graphics design, rangi nyingi utakazokuja tumia kwenye design yako zinapaswa ziendane au ziwe direct opposites za background husika. Brown na Kijani au Nyekundu haviendani kabisa, ila Nyeusi na nyeupe vinaenda sawa. Njano na Blue vinaenda sawa pia, nk lakini kitakacho determine feel nzima ya design yako ni Background.

Kwenye picha nyingi, au filamu, kama background haina umhimu kama kielelezi, huwekwa out of focus na kuwa blurry. Maana ikiachwa kawaida inaweza kuku distract.


Mid-Ground

Hapa ni kile kinachofuata kwenye design husika, kabla ya taarifa kuu, na ndio sehemu unakoweza weka manjonjo yako yote.

Karibia kila kitu ambacho ki kwenye mid ground, hata kikipotezewa, picha haiwezi poteza maana yake kwa 100% lakini vitu vitakavyoongezwa, husaidia kuipa maana zaidi picha husika.

Mfano, rahisi; Unaweza piga picha nzuri tu, lakini uzuri wa picha yako unaweza ongezeka mfano, ukipiga picha mbele ya gari lako, nk. Uwepo wa lile gari kwenye frame, huipa picha vibe tofauti ambayo ingepotea endapo ukiamua lisiwepo.

View attachment 2322741

Kwenye design ya hio Banner, sijaweka chochote kwenye Mid-Ground mbali na logo ya Kainetics, upande wa kulia ambayo haionekani vizuri, ila inaonekana ukiiamua kuitazama. Inachokwambia ni kuwa Bango ni langu, basi, lakini hata ningeitoa, ujumbe lengwa ungeupata bado, kuwa thread inahusiana na Graphics Design. Japo uwepo wake, unakupa feel tofauti.

Foreground

Hii ndo sehemu ambako taarifa zote za msingi huwa, na ndio mbele kabisa ya Canvas. Ingekuwa picha, wewe ndo huwa kwenye foreground. Ikiwa picha ya gari, lile gari huwa na nafasi kwenye frame kuliko mazingira yanayolizunguka.

Na ikiwa design ya bango, maandishi yote ya msingi huwekwa hapa. Kinachowexa kukusaidia kuzitofautisha hizi layer zote tatu, ni mambo kama urahisi wa kuonekana, contrast kwenye choice ya rangi ukilinganisha na background au mid-ground na kadhalika.

View attachment 2322742

Kwenye hio Banner, maneno yote yako kwenye Foreground. Ila hayo yote ni mambo ya kawaida, ambayo yanapaswa yaendane na hisia zako. Ukiona neno fulani linakuwia sawa likikaa kati kati kuliko kushoto, basi utafanya hivyo kama designer na haitokuwa kesi. Ambapo unaweza zingua kidogo ni kwenye Typography, nayo tuiongelee kidogo.

Nawasilisha,
Kainetics
 
View attachment 2321578
Habari wana JamiiForums, na wadau wa humu kwenye Tech & Gadgets Forum nimeona sio mbaya leo kushare basics za Graphics Design kwa wale ambao wanafanya hii kitu tayari au wale ambao wana interest ya kutaka kuanza.

Nitaongelea mambo matano, Basics za Layout Design, Blocking, Typography na Colour, ambazo ukizicombine design zako zitakuwa level nyingine.

Hizi ideas zinaweza kuwa applied kwenye aina yoyote ya Graphics Design, uwe unategeneza logo, posters, banners, UI/UX Design, mabango, nk.

Kufikia mwisho wa makala hii nadhani utakuwa unaweza fahamu nini kinafanya design baadhi ya designs kuonekana ziko well thought na nyingine za kawaida mno.

Utangulizi

Kwenye swala zima la kufanya Graphics Design, zipo software za muhimu ambazo itabidi ujizoeze nazo. Kama utakuwa unafanya Layout Design ya Vitabu, Majarida na Magazeti, nashauri kuchukua Adobe InDesign. Kwa Designs nyingine kama Logo, Vector Graphics, nk. hapa itatumika Adobe Illustrator. Designs nyingine karibia zote zilizobaki utatumia Adobe Photoshop.

Japo, kwenye makala hii sitoenda kwenye kuongelea workflow ya hizo software, bali kuelezea theory inayotumika kwenye kufanya designs zilizotulia. Tuanze na Layout Design.

Layout Design.

Hii ni moja ya aina za Graphics Design ambayo ni ya msingi kabisa, na yenyewe inajihusisha na swala zima la mpangilio la vitu kwenye canvas yako.

Canvas ni design nzima inapokuwa empty. Kwa mfano, ungekuwa mchoraji, zipo size mbali mbali ambazo unapasww ujizoeze nazo ambazo ni A1, A2(ambayo ni nusu ya A1), A3(Ambayo ni nusu ya hio A2), A4(nusu ya hio A3) na B5(nusu ya hio A4)

View attachment 2321580

Ila likija swala zima la kutengeneza Designs kwa ajili ya matumizi digitally; Size za Canvas huwa Determined kutokana na Ratio ya Urefu na Upana na sio Vinginevyo. Hizi ni baadhi ya size za mhimu ambazo uta consider.

1:1 / Square

View attachment 2321581


Hii humaanisha kuwa urefu na upana huwa ni sawa, hivyo kupelekea canvas kuwa sawa na mraba. Hutumika sana sana kwenye logo, na kutengeneza mabango, au cropping ya zile picha za Instagtam.

Sana sana banners na posters ambazo zitatumika kwenye Instagram, kama zinazoongelea Events, Taarifa fupi(Kama za MillardAyo) na mini-infographics hutumia size hii. Cover Arts za Album zinazowekwa Spotify, BoomPlay na huko lwingine huwa kwenye size hii.

3:4 / Potrait

View attachment 2321584

Kama kuna vitu vitakuwa vinapungua kwenye hio layout ya kwanza, basi layout hii ipo kuongeza nafasi kidogo ambapo Designer anaweza kuwa creative. Hii pia ndo most common na used maana inaweza tumika karibia kwenye kila platform.

Ratio yake inamaanisha kua urefu unazidi upana kwa difference ya numerator 1.

3:2 / Banner

View attachment 2321585


Kama Design husika ulitaka itumike ndani ya post , au kitabu, na hukutaka ile nafasi Kubwa kwenye ukurasa, basi hii layout bdio hutumika. Mfano kibanner cha hii thread kiko kwenye size hii. Na matangazo mengi utakayokutana nayo kwenye blogs, au hata zile picha za kwenye vitabu huwa katika size hii...kwa kuwa huo urefu wake ni mdogo kuliko upana.

16:9 / Landscape

View attachment 2321586


Kama utakuwa na intention ya kutengeneza design itakayojaza screen yoyote ile ya computer au TV, basi ni 16:9. Hii nayo ni familia kwa kuwa ndio size ya videos zilizoko HD, au screen yako ya simu ukii rotate into Landscape mode.

Hii haitumiki sana sana , labda ukiwa Web Designer na utakuwa ukitengeneza sliders, na responsive cta's basi ndipo itatumika. Pia Thumbanail za Video za Miziki,nk. Huwa designed kwenye hii size.


9:16/ Story

View attachment 2321594


Hii hapa ni kinyume cha Landscape na unaweza ilinganisha na screenyako ya simu . Sana sana hii unaweza iconsider kama graphics zako zitaenda tumika kwenye handset ambapo ungependa zijaze kioo kizima, mfano wallpaper za simu, video za Tiktok, WhatSapp Statuses, nk.

Nyinginezo

View attachment 2321600


Zipo designs nyinginezo pia ambazo ni custom constants kwendana na platform ambako zitatumika. Mfano Facebook Banner, Post na Reel zina size zake. Hivyo hivyo kwa Twitter na hata Pinterest. Hata Channel Art ya Youtube ina size yake constant.

Kama utakuwa unafanya layout design ya vitabu, hardcopy, pia navyo vina size zake tofauti kabisa. Majarida yana size zake tofauti nanhata magazeti pia. Hivyo ni mhimu kuchagua Layout ambayo itaendana na design unayotaka ku accomplish.


Vipimo

Kama utakuwa unatumia software kwenye computer au Apps kwenye simu kufanya hizo Graphics zako, unapaswa uwe familiar na sizes mbali mbali. Ikiwemo. Inches, Pixels na Centimetres. Hii itakusaidia kama designs zako zinapaswa kuwa na vipimo maalumu.

Margins, Aligning, Dents na Spacing

Design yoyote ile ili ipendeze, lazima ifanyiwe layout considerations ya hayo mambo manne hapo juu, haijalishi kama ni Presentation ya PowerPoint, Cheti au Banner ya Show nami ntavielezea kwa lugha isiyo rasmi.

Margins - Hizi hudetermine space kutoka mwisho wa karatasi na sehemu mambo yote yanayopaswa kuwa kwenye design yatakapoishia.

Kama uliwahi soma kurasa ya kitabu chochote kile, huwa kuna uwazi unaachwa kuizunguka karatasi nzima. Hii ni muhimu kuhakikisha mambo yote ya msingi yanaonekana kati kati ya canvas husika.

View attachment 2321608

Mfano, kwenye hii design ya ukurasa kwenye guide ya HESLB, huo mstari wa kijani niliozungushia ndio Margin, hii ikimaanisha hakuna element yeyote iliyoongezeka nje ya mstari husika.


Alignment - Hii hapa sana sana hudeal na maneno na huwepo kudeal na mpangilio wa yatakvyoonekana kwenye design husika. Zipo aina nne kuu za Alignments; Centered, Left , Right na Full Scope. Hizi, kila moja kwa nafasi yake hutumika kupangilia kila kitu kwenye canvas kwendana na umhimu wake.

Mfano, Centered alignment hutumika sana sana kwenye kuandikwa vichwa vya habari, nk. Na sana sana hii ni kumaanisha kwamba maneno utayakuta kati lati kabisa ya design husika. Left humaanisha, maneno huanzia kwenye kituo sawa upande wakushoto wa canvas na right ni kinyume chake. Fullscope alignment ni pale maneno yatakapoanzia na kuishia kwenye kituo saawa kwenye design husika.

View attachment 2321611

Kwenye hio picha, unaweza kuona ni Centered Alignment maana maneno yote yako kati kati.

View attachment 2321612

Kwenye hii hapa unawez kuona ni left alignment, maana maneno yote yanaanzia sehemu moja upande wa kushoto(huo mstari wa orange)

Hivyo, right alignment kitakuwa kinyume cha hio . Na Fullscope, ni pale ambapo kituo cha kuanzia na kuishia kwa mstari kwenye aya au paragraph yoyote ile ni contant.

Dents - Hizi ni pale unapokuta haya mbali mbali hazianzii kwenye kituo kimoja ndani ya layout, na hii huwa ipo kuelezea vipengele au sub categories.

Zipo InDents na Exdents. Na maana zake ni kama majina yake yanavyosema. Indents ni zile haya ambazo utazikuta ndani sana ya margin sana sana kama kuna lists, au bullet points. Huwa indentend. Exdents ni kinyume cha Indents. Hizi huwa karibu na Margins husika.

View attachment 2321613

Mfano, kwenye huu huu ukurasa mmoja wapo kwenye hio Guide ya kuomba mikopo, HESLB, mstari wa kijani unaonesha Exdent na mwekundu unaonesha Indent.

Nitaendelea na Blocking.

Nawasilisha,
Kainetics
Waiting.....
 
Safi sana Hongera kwa moyo wako mkunjufu
Lakini watakuja mazwazwa hapa watasema unataka kuwapiga na kitu kizito wakati hata computer hawajui kutumia...
 
...
 

Attachments

  • Kainetics 07.jpg
    Kainetics 07.jpg
    18.8 KB · Views: 56
  • Kainetics 08.jpg
    Kainetics 08.jpg
    17.1 KB · Views: 61
  • Kainetics 01.jpg
    Kainetics 01.jpg
    100.6 KB · Views: 56
  • Kainetics 04.jpg
    Kainetics 04.jpg
    38.3 KB · Views: 62
  • Kainetics 03.jpg
    Kainetics 03.jpg
    122 KB · Views: 53
  • Kainetics 03.jpg
    Kainetics 03.jpg
    122 KB · Views: 46
  • Kainetics 02.jpg
    Kainetics 02.jpg
    77.7 KB · Views: 59
  • Kainetics Basics za Graphics Design.jpg
    Kainetics Basics za Graphics Design.jpg
    34.8 KB · Views: 54
Pamoja mkuu, nlikosoa hio uliposema Graphic Designing kwa kuwa kwa mazoea nimekua nakutana na Graphics Design , kama zote ni kitu kile kile nadhani ni poa
Namimi nilirekebisha ili mada iwe nzuri zaidi maana imekaa vyema sana mkuu. Kongole kwako.
 
Back
Top Bottom