ገጽ መስመር Photoshop-ዘይቤ መስመሮችና ተጎታች መመሪያ መስመሮችን በማንኛውም ድረ-ገጽ ላይ ያክላል። ከምልክት ማስገቢያዎች ጋር ፒክሰል-ትክክለኛ መስመሮች ከ viewport ላይና ግራ ጠርዞች ይዘረጋሉ፣ ርቀቶችን ለመለካት እና ማስተካከያ ለማረጋገጥ መመሪያ መስመሮችን ወደ ገጹ ይጎትቱ።
በ Figma ወይም Photoshop ውስጥ የሚሰሩ ዲዛይነሮች ስፔሲንግ እና ማስተካከያ ለማረጋገጥ መስመሮችና መመሪያዎች ላይ ይመካሉ። ገጽ መስመር ይህን የታወቀ መስመር-እና-መመሪያ ስራ ፍሰት በቀጥታ ወደ ብራውዘር ያመጣል።
በእያንዳንዱ 50 ፒክሰል ምልክት ማስገቢያዎች ያላቸው ትክክለኛ መስመሮች ከ viewport ላይና ግራ ጠርዞች ይዘረጋሉ። መስመሮቹ ከገጹ ጋር ይሸበልላሉ ከገጹ ዋና ነጥብ (0,0) ጋር ትክክለኛ ፒክሰል ቦታዎች ያሳያሉ።
አግድም መመሪያ ለመፍጠር ከላይ መስመር ይጎትቱ ወይም ቁመት ለመፍጠር ከግራ መስመር ይጎትቱ። መመሪያዎች ወደ ጠቋሚ ቦታ ይገጥማሉ ትክክለኛ ፒክሰል ዐውደ-ጽሁፍ ያሳያሉ (ምሳ. y: 200px)።
ሁለት ትይዩ መመሪያዎች ሲቀመጡ በመካከላቸው ያለው ፒክሰል ርቀት ራስ-ሰር ይሰላል ከማገናኛ ቅንፍ እና ስያሜ ጋር ይታያል።
አግድም መመሪያዎች ሰማያዊ፣ ቁመት መመሪያዎች ቀይ — ብዙ መመሪያዎች ሲቀመጡ በአንድ እይታ ለመለየት ቀላል።
መስመሮች እና መመሪያዎች ገጹን DOM፣ አቀማመጥ ወይም JavaScript ባህሪ የማይጎዳ ግልፅ ሽፋን ሆነው ይሰጣሉ። ከስር ገጽ ኤለመንቶች ጋር ለመገናኘት ጠቅ ማድረግ ይችላሉ።
የሚፈልጉትን ያህል መመሪያዎች ያስቀምጡ — ገደብ የለም። በገጹ ላይ ማንኛውንም ጉልህ ማስተካከያ ነጥብ የሚያመለክቱ ሙሉ ልኬት ፍርግርግ ይፍጠሩ።
Mockup ራስጌው 80px ቁመት ያለው እና ይዘት በ 120px ይጀምራል ይላል። በነዚያ ቦታዎች አግድም መመሪያዎችን ያስቀምጡ ያረጋግጡ።
ተደጋጋሚ ኤለመንቶች (ካርዶች፣ ዝርዝር ንጥሎች) ላይና ታች መመሪያዎች ያስቀምጡ ሁሉም ተመሳሳይ ስፔሲንግ እንዳላቸው ያረጋግጡ።
ከርዕስ ግራ ጠርዝ ቁመት መመሪያ ያስቀምጡ ከዚያ ከስሩ ያለው ፓራግራፍ ጽሁፍ፣ ቁልፎች እና ምስሎች ተመሳሳይ መስመር ላይ እንደሚጣጣሙ ያረጋግጡ።
ስፋት ለመለካት ከኤለመንት ግራና ቀኝ ጠርዞች ሁለት ቁመት መመሪያዎች ያስቀምጡ። ቁመት ለመለካት ሁለት አግድም መመሪያዎች ያስቀምጡ።
በተለመዱ breakpoint ስፋቶች (768px፣ 1024px፣ 1280px) ቁመት መመሪያዎች ያስቀምጡ ብራውዘሩን ያስተካክሉ ኤለመንቶች በትክክል እንደሚቀያየሩ ይፈትሹ።
የ DevSuite Pro ተንሳፋፊ ዶክ ይክፈቱ እና ገጽ መስመር አዶን ጠቅ ያድርጉ። ፒክሰል-ትክክለኛ መስመሮች ከ viewport ላይና ግራ ጠርዞች ይታያሉ።
አግድም መመሪያ መስመር ለማስቀመጥ ከላይ መስመር ይጎትቱ ወይም ቁመት ለመስጠት ከግራ መስመር ይጎትቱ።
ማንኛውም መመሪያ ፒክሰል ቦታውን ያሳያል (ምሳ. y: 200px)። ሁለት ትይዩ መመሪያዎች ሲቀመጡ በመካከላቸው ያለው ርቀት ራስ-ሰር ይታያል።
ወደ አዲስ ቦታ ለማዛወር ማንኛውንም መመሪያ ይጎትቱ — ርቀት ስያሜዎች ቅጽበታዊ ይዘምናሉ። ለማስወገድ ሁለት-ጠቅ ያድርጉ።
ሁሉንም መስመሮችና መመሪያዎች ለመደበቅ ገጽ መስመር አዶን ዳግም ጠቅ ያድርጉ።
DevSuite Pro ን በነፃ ይጫኑ እና 39+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።
