በ Adobe ተሞክሮ ዲዛይን CC ውስጥ የቁስ ንድፍ ካርዶችን እንዴት መፍጠር እንደሚቻል

ከ Google የመሳሪያ ንድፉ ዝርዝር መጀመሪያ ላይ በመሣሪያ ስርዓቱ ላይ የንድፍ አሰራርን ንድፍን ለመጠቆም እንደ የ Android የመሣሪያ ስርዓት ነው.

01 ቀን 06

በ Adobe ተሞክሮ ዲዛይን CC ውስጥ የቁስ ንድፍ ካርዶችን እንዴት መፍጠር እንደሚቻል

ከደስታ ግሪንስ

አንዴ ንድፍ አድራጊዎች ወደ ውስጥ መግባቱ ሲጀምሩ እና ከእሱ በስተጀርባ የነበረውን አስተሳሰብ መረዳታቸው, የቁስ ዲዛይን በፀጥታ እና በድር እና ሞባይል ዲዛይን ውስጥ በጣም ከፍተኛ ተጽዕኖ ወዳድረ ምስላዊ ፍልስፍናዎች ውስጥ አንዱ ሆኗል. ምን እያደረገን እንደሆነ ለማየት ምን ማድረግ እንዳለብዎ በ Pinterest ላይ የቁስ ንድፍ ፍለጋን ማድረግ እና እርስዎ በመሣሪያዎች, በጡባዊዎች እና እንዲያውም በድር ጣቢያዎች ላይ በመቶዎች የሚቆጠሩ ምሳሌዎችን እና ሙከራዎችን ይመለከታሉ.

በጣም የሚያስደንቀው የቁስ ንድፍ አውጪዎች መተግበሪያዎች እንዴት በሞባይል መሳሪያዎች ላይ እንዴት እንደሚታዩ እና እንደሚሰሩ የ Google አስተሳሰብ ነው, ነገር ግን ጽንሰ-ሐሳቦች በማናቸውም የመሣሪያ ስርዓት ላይ ለማንኛውም ማያ መጠን ላይ በመተግበር ላይ ናቸው. Google በተጠቀሰው የመክፈቻ አንቀጽ ላይ እንደገለጸው, "መልካም ንድፍ ያላቸውን መልካም ንድፎች በቴክኖሎጂ እና ሳይንስ ፈጠራ እና ተለዋዋጭነት ለተጠቃሚዎቻቸው የምስል ቋንቋን ለመፍጠር ተፈትነናል. ይህ የቁስ ንድፍ ነው. ይህ ተጨባጭ ሰነድ የየራሱ ዶክትሪኖችን እና የቁስ ንድፍ እቃዎችን መዘርጋታችንን እንቀጥላለን.

ጽሑፉ ስለ አጠቃላይ ቁሳቁስ የወረቀት እና የቁስ ንድፍ ምልክት ነው, እሱም ካርዱ ነው. በዉስጣቸዉ ላይ የዉል / የመረጃ ጠቋሚን (ካርታ) እና ወደ ትክክለኛው መስመር ላይ ነዎት. አንድ ካርድ ፎቶዎችን, ቪዲዮዎችን, የጽሁፍ አገናኞችን እና የመሳሰሉትን የያዘ አንድ አካል ነው ነገር ግን ከአብዛኛ በይነተገናኝ ንድፎች የሚለያቸው እነሱ በአንድ ነጠላ ርዕሰ ጉዳይ ላይ ብቻ እንዲያተኩሩ ነው. ካርዶች ክብ የተጠላለፉ ጠርዞች አላቸው, ከመጠን በላይ ጠቋሚዎች እንዳሉ እና ሁሉም በአይሮፕላኑ ላይ ከሆኑ «ስብስብ» ብለው ይጠራሉ.

በዚህ "How to" በፕሮግራሙ መሰረት አንድ ካርድ እንፈጥራለን. ካርዱን በተለያዩ የመረጃ እና ስዕል መሳሪያዎች ከመፍጠር ይልቅ በተለየ አቅጣጫ ወደምናመጣበት እንመጣለን. በአሁኑ ጊዜ በ Macintosh ውስጥ ብቻ ያለ ህዝብ ቅድመ እይታ ያለው እና አሁን በነጻ የሚገኝ በ Adobe የልምድ ዲዛይን ውስጥ ያሉ መሣሪያዎችን እንጠቀማለን. እዚህ ማውረድ ይችላሉ.

እንጀምር.

02/6

በ Adobe አጋጣሚዎች ዲዛይን CC ውስጥ የፕሮቶታይፕ ስነ ጥበብ ክፍልን መፍጠር

ለመጀመር የስነ ጥበብ መሳሪያን እና የስነ ጥበብ ካርታ አብነት ይጠቀሙ. ከደስታ ግሪንስ

Start Screen ውስጥ በ Experience Experience ዲዛይን ዲዛይን CC (XD) ውስጥ የ Android ማያ ገጽን ለመፍጠር የሚችል ምንም ግልጽ መንገድ የለም. XD ን ስንከፍት የምንሰራው ነገር የ iPhone 6 አማራጮችን መምረጥ ነው, እና በይነገጽ ሲከፍተው በመሳሪያ አሞሌው ላይ የ Artboard መሳሪያውን እናስቀምጣለን እና የ Android ሞባይልን ከመረጡት የምርጫዎች በስተቀኝ ላይ ባለው በስተቀኝ በኩል Android Mobile የሚለውን ይምረጡ . ከዚያ ወደ የመምረጫ መሳሪያ እንቀይራለን, በአንድ ጊዜ የ iPhone የስነ ጥበብ ስም ላይ አንድ ጊዜ ጠቅ ያድርጉ እና የስነ ጥበብ ካርዶችን ሰርዝ. በቃ.

በአሁኑ የ XD ስሪት ውስጥ, በ iPhone 6 አጠገብ ያለው ትንሽ ቀስት አለ, ሲጫኑ, ተቆልቋይ ምናሌ ይከፍታል. ከዛም የ Android ሞባይል ስሪት መርጠህ እና የ Android ሞባይል ሠንጠረዥ የተመረጠው በ በይነገጽ ውስጥ ይከፈታል.

ለካርዱ ትክክለኛውን ማሳያ ቦታ እንዳለን ለማረጋገጥ አብዛኛውን ጊዜ ወደ ስኬት 3 እንወርዳለን እና ከመዋሪያ ንድፍ ወደ ንድፍ ማውረድ ከቁስ ንድፍ ወህኒያዊ ሁኔታ አሞሌ, የዳቦ አሞሌ እና የመተግበሪያ አሞሌ ቅዳና ይለጥፉ. ንድፍ 3.2 የመሳሪያ ንድፍ ንድፍ ( ፋይል> አዲስ ከቅንብሮች> ቁሳቁስ ዲዛይን ) እና ሌላ በጣም ጥሩ ጥሩ ነፃ የሆነ ከ Kyle Ledbetter እዚህ ያገኛሉ. Sketch ከሌለዎት በፋይል> ክፍት UI ኪባ> Google Material ውስጥ ከሚገኙት የ XD መቅረጾች ቅዳ እና መለጠፍ ይችላሉ. በተጨማሪም በ Photoshop, ስነ-ንድፍ አውጪ, ተፅዕኖዎች እና ስዕል ንድፍ ለማግኘት ከ Google ውስጥ ሊያወርዷቸው ይችላሉ.

03/06

ለ Adobe XD CC Artboard የቁስ ንድፍ ካርድን በማከል

የ UI ኪነዶች ከቁሳዊ ንድፍ መግለጫው ጋር በሚጣጣም መልኩ እጅግ በጣም ጠቃሚ ናቸው. ጥርስተርስ ቶም ግሪን

የ XD በጣም ጠቃሚ ጠቋሚዎች አንዱ ለ Apple iOS, ለ Google Material እና ለ Microsoft ዊንዶውስ የ UI Kits ማካተት ነው. በብዙ ሁኔታዎች "ፈጣን" የሚለውን ቃል "ፈጣን ፕሮቶታይፕ" የሚለውን ቃል ይጨምራሉ.በዚሁ የተለመዱ የበይነገጽ ክፍሎች እንደ Photoshop, Illustrator ወይም ሌሎች እንደ ንድፍ አፕሊኬሽኖች በየጊዜው መፈጠር የለባቸውም. ንድፍ.

የምንፈልገው የ UI ንጥል ካርድ ነው. ወደዚያ ለመድረስ File> Open UI Kit> Google Material እና ኪዳኑ እንደ አዲስ ሰነድ ከፍተናል. የሚያስፈልጉንን ነገሮች በካርዶች ምድብ ውስጥ ተገኝቷል.

ስለነዚህ የምንወዳቸው ነገሮች በ Content Blocks specs እንዲሁም በ Typography ንድፍ ውስጥ በተገለጸው የጽሑፍ ቅርጸትና ርቀት ዝርዝሮች ላይ በተገለጸው የቁስ ንድፍ መግለጫ መስፈርቶች ይገዛሉ.

የፈለግነው የካርድ ዓይነት ከታች በስተግራ ያለው ነበር. አጠር አድርገን በመዳፊት እና በማንጠፍለክ ወደ ክሊፕቦርዱ ኮፒ አድርገን. የአጋጣሚ ነገር ሆኖ XD ለተከፈቱ ሰነዶች የተለጠፈ በይነገጽ የለውም. የምናሰራው ስራ እየሰራን ያለውን ለመለየት, ለመምረጥ እና ለመለጠፍ የሰነድ መስኮቱን በትንሹ ወደፊት ለማንቀሳቀስ ነው. በተከፈቱ የ XD ሰነዶች መካከል በፍጥነት ለመቀያየር ሌላኛው መንገድ Command- 'መጫን ነው .

04/6

በ Adobe Experience Design CC ውስጥ የቁስ ንድፍ ንጥረ ነገሮችን እንዴት ማርትዕ እንደሚቻል

እያንዳንዱ የ UI አካል ወደ የ XD ፕሮጀክት ላይ ተጨምሯል. ንባቡን ከማርትዕ በፊት ገድሉን መሰረዝዎን ያረጋግጡ. ከደስታ ግሪንስ

በ XD ውስጥ ያለው ካርድ ከቅጥብጥ ሰሌዳው / ዋ ከደከመበት / በምሥክር ወረቀቱ / መስራት አይጀምርም. ማድረግ ያለብዎ የመጀመሪያ ነገር ካርዱን መሰብሰብ ነው ምክንያቱም ካርዱን የሚፈጥሩት ትንሽ እና ጥራቶች ማግኘት ስለፈለጉ ነው. ይህንን ለማድረግ ካርዱን ይምረጡና Object> Unngroup ወይም Shift-Command-G የሚለውን ይጫኑ.

ካርድዎ አሁን ሶስት ጥራዞች ያካተተ ነው:

የመጀመሪያው እርምጃ ብርሃን ጥቁር ሣጥን መሰረዝ ነው. ብቸኛ ዓላማዎ ለምርጫው ቦታ እንደ ቦታ ቦታ ሆኖ መያዝ, ከመረጡ, እንደ አማራጭ.

ጽሁፉ ያለበት ሳጥን በርግጥ ጥቁር ግራጫ ሲሆን 50% ብርሃንነት ያለው ነው. ይህ ሳጥን እንደ የጽሑፍ ጀርባ ጥቅም ላይ ሊውል ይችላል እና ቀለሙን እና የሳጥኑ ግልጽነት መቀየር ይችላሉ.

ምንም እንኳን ወዲያውኑ አይታወቅም, ብርሃኑ ግራጫ ሳጥን የቁሳዊ ንድፍ ንድፍ መከተል የጀርባው ጠርዝ በ 2 ፒክስሎች የተሞላ ነው. ምስል እየጨመሩ ከሆነ ይህን በልቡ ይያዙት. በተጨማሪም ወደ ማይግብር ማመልከቻ ወይም በ XD ውስጥ ሊታከሉ የሚችሉ የተጠማዘቡ ጠርዞች ያስፈልጋል.

የካርድ ማረፊያ ሁኔታ እንዴት እንደሚታይ ማየትም ጥላ ነው. ልዩነቱ የ 2 ፒክሰል ካርዶች መቆሙን የሚያሳይ ነው. ይህንን ለማከል ጥቁር ዳራ ቅርፅን ይምረጡ እና በንብረቶች ፓነል ውስጥ የ Y እና B (ብዥታ) እሴቶችን 2 ይቀይሩ.

05/06

በ Adobe XD CC ውስጥ ወደ ቁሳዊ ንድፍ ካርዶችን ምስል እንዴት ማከል እንደሚቻል

ከምስሎች ጋር መስራት አንዱ መንገድ የማስመጣቱን ምስል ለማንሳት ቦታ ያዢውን መጠቀም ነው. ከደስታ ግሪንስ

ካርዱን ማወቅ 344 ፒክሰል ስፋት እና የምስል ቦታ 150 ፒክስል ከፍ ያለ ነው (የግራጫው የጫፍ ሰማያዊ ቁመቱ ግማሽ ) እኛ ፎቶውን በ Photoshop ውስጥ ገነነው, መጠኑን ጣለው እና በ "Photoshop" Export As dialog ውስጥ ያለውን የ @ 2x አማራጭ ሳጥን. ምስሉ ወደ Adobe XD ያስመጣ ነበር.

ከዚያም በግራ በኩል ባለው ምስል ላይ ምስሉ ግራጫ ሳጥን ይጎትተን በመምረጥ < Object> Mask With Shape . ውጤቱ ምስሉ የክብ ቅርጽ ማዕዘኖቹን በመምረጥ ነው. ከዚያም ምስሉን ወደ መጨረሻው ቦታ አቀናብረናል.

በምስሉ ከተቀመጠው, የመካከለኛውን ግራጫ ሳጥን ቀለም ቀይ ቀለም ቀይረን, ጽሑፉን እና የአገናኝ ፅሁፉን ቀለም ቀይረናል.

06/06

የ Adobe XD Cc Grid Featureን መጠቀም

የዩ.ኤስ. ተሞክሮ ተሞክሮ ዲ ኤን ኤ የግድግዳ ስፒል ተጠቀም. ከደስታ ግሪንስ

በካርዱ አጠናቅቀው አሁን በእውነተኛው የንድፍ ንድፍ መሠረት መሠረት በአግባቡ መቀመጥ አለበት. ይሄ ማለት በካርዱ በኩል 8 ፒክስሎች አሉ እና ካርዱ ከመተግበሪያ አሞሌ 8 ፒክሰሎች መሆን አለበት. ይህንን ለማድረግ በንድፍ ቅደም ተከተል ስም አንድ ጊዜ ጠቅ ያድርጉ እና, በፕሮጀክቱ ፓነል ውስጥ, ፍርግርግ ይምረጡ. ፍርግርጉ በሥነ ጥበብ ካርታ ላይ ይታያል.

ነባሪው ፍርግርግ መጠን 8 ፒክስል ሲሆን ለቁስ ዲዛይን አንድ ዓይነት ፍርግርግ ነው. ሌላ መጠነ-ስፋት ካስፈልግዎ, ፍርግርቱ ላይ ያለውን ዋጋ ይለውጡ. የግሩን ፍርግም ለመለወጥ ከፈለጉ የቀለም ቺፖችን ጠቅ ያድርጉ እና ከተገኘው ቀለም መምረጫ አንድ ቀለም ይምረጡ.

ከተከፈተው ፍርግርግ ጋር ካርዱ ላይ ጠቅ ያድርጉና ወደ የመጨረሻው ቦታ ይንቀሳቀሳሉ.

ለማጠናቀቅ ካርዱን መርጠናል, የሬዲዮ (Repeat Grid) አዝራሩን ጠቅ በማድረግ በካርዶች መካከል ወደ 8 ፒክሰሎች መለወጥ.