اپنے خاکہ ڈیزائن میں ڈیٹا کیسے شامل کریں

Sep 12, 2025

کيسے

گزشتہ چند سالوں میں اسکرین ڈیزائن ایک طویل راستہ آیا ہے. ہیک، ہم چند سال پہلے 'سکرین ڈیزائن' بھی نہیں کہہ رہے تھے. جیسا کہ گرافک ڈیزائنرز اور Illustrators کے اسکور اسکرین ڈیزائن سے نمٹنے کے لئے تیار ہے، لہذا ہمارے ٹول سیٹ بھی ضروری ہے. ہم اب جامد، سنگین طور پر مخصوص ٹکڑے ٹکڑے کی تخلیق نہیں کر رہے ہیں - ہم زندہ رہنے، سانس لینے کے ڈیزائن کے نظام کی منصوبہ بندی کر رہے ہیں جو مختلف ماحول میں کام کرنا ضروری ہے.

مطالبات کا یہ نیا سیٹ لچکدار، نئے اوزار پر توجہ مرکوز کے دھماکے میں جنم دیا ہے. بوہینیا کوڈنگ میں ٹیم سے ایک بڑھتی ہوئی ستیکی کا میرا پسندیدہ پسندیدہ ہے.

خاکہ مجھے تیزی سے کام کرنے کی اجازت دیتا ہے، میں نے کبھی خواب دیکھا تھا، جب تک میں نے سب سے بہتر کیا کرنے کے لئے مجھے آزاد کر دیا ہے: ڈیزائن. جب میں تیار ہوں تو فوری طور پر پروٹوٹائپ اور اعلی فلاح و بہبود کے لئے کافی مضبوط ہے. خاکہ کی سب سے بڑی طاقتوں میں سے ایک اس کی بڑھتی ہوئی کمیونٹی ہے، جس نے پلگ ان کا ایک بڑا انتخاب بنایا ہے جو آپ چاہتے ہیں کہ کسی بھی سمت میں خاکہ بڑھاؤ.

کرافٹ ، اشارے لیبز سے، مستقبل کے ڈیزائن کے کام کے بہاؤ کو طاقت کرنے کا مقصد ہے. یہ اوزار کی بڑھتی ہوئی سیٹ پیش کرتا ہے، تمام وقت کو بچانے کے لئے اور ڈیزائن کرنے کے دوران حقیقت میں شامل کرنے کے لئے بنایا گیا ہے. وقت بے شمار بچت کے اقدامات (الوداع کاپی اور پیسٹ!) سے آتا ہے اور حقیقت یہ ہے کہ حقیقی اعداد و شمار اور مواد کو فوری رسائی سے آتا ہے (الوداع Lorem ipsum!).

اس سبق میں، ہم دستکاری سے تین کلیدی اوزار کا استعمال کرتے ہوئے ایک نظر ڈالیں گے: تصاویر، قسم اور ڈپلیکیٹ، رابطوں کی فہرست کے لئے مکمل اور حقیقت پسندانہ اسکرین ڈیزائن بنانے کے لئے.

01. اپنے آرٹ بورڈ سیٹ کریں

چلو میں ایک نیا دستاویز بنانے اور اندر کام کرنے کے لئے ایک آرٹ بورڈ قائم کرنے کی طرف سے شروع کریں. ایک تازہ دستاویز میں، ہٹ داخل کریں اور جی ٹی؛ آرٹ بورڈ یا صرف A. آرٹ بورڈ کے آلے کو چالو کرنے کی کلید.

دائیں پین میں آپ پیش وضاحتی آرٹ بورڈ کے سائز (مقبول آلات اور منظر نامے سے ملنے کے لئے تیار ایک مینو دیکھیں گے. آئی فون 6 کا انتخاب کریں اور کینوس کے مرکز میں آپ کے لئے ایک آرٹ بورڈ تیار کیا جائے گا.

02. ایک ہیڈر ڈرا

اگرچہ ہم خاص طور پر اس سبق میں رابطوں کی ایک فہرست تشکیل دے رہے ہیں، اگرچہ ہم اس الجھن کو مکمل کرنے کے لئے کچھ اضافی انٹرفیس بٹس کی ضرورت ہوگی. آئتاکار کے آلے کے ساتھ ( داخل کریں اور جی ٹی؛ آئتاکار یا آر )، آرٹ بورڈ کے سب سے اوپر بھر میں ایک ہیڈر ڈرا. عنوان 'رابطے'، اور اچھی پیمائش کے لئے کچھ شبیہیں ڈالیں، جیسے 'مینو' اور 'تلاش' کے اعمال جیسے آرٹ بورڈ کے بائیں اور دائیں کونے میں.

03. فوٹر کی تعمیر

Add a tabbed footer, with a floating action button for adding a new contact — ایک نیا رابطہ شامل کرنے کے لئے ایک فلوٹنگ ایکشن بٹن کے ساتھ ایک ٹیبڈ فوٹر شامل کریں

ہم اعداد و شمار کو حاصل کرنے سے پہلے، ایک نئے رابطے کو شامل کرنے کے لئے ایک فاب (فلوٹنگ ایکشن بٹن) کے ساتھ مکمل، ایک فوری ٹیبڈ فوٹر کو بھی تعمیر کرتے ہیں. آئتاکار کے آلے کے ساتھ، ایک سفید آئتاکار باہر نکلیں اور اسے آرٹ بورڈ کے نچلے حصے میں رکھیں. اوول کے آلے کا استعمال کرتے ہوئے ( داخل کریں اور جی ٹی؛ اوول یا اے )، فاب کے لئے ایک حلقہ ڈرا.

04. شبیہیں داخل کریں

اگلا، کچھ شبیہیں ڈالیں تاکہ صارف کو جہاں کلک کرنے کے لئے کلک کریں: FAB کے اندر ایک 'پلس'، بائیں ٹیب میں ایک 'صارف' آئکن، اور دائیں جانب ایک 'تاریخ' آئکن. ہم ایک اشارے بھی شامل کریں گے - ایک سادہ سیاہ لائن - ظاہر کرنے کے لئے رابطے دیکھیں منتخب کیا جاتا ہے. اب آرٹ بورڈ پس منظر کا رنگ (سیاہ) مقرر کرنے کا ایک بہت اچھا وقت ہے، جس میں آپ آرٹ بورڈ کو منتخب کرکے اور پھر انسپکٹر میں ایک رنگ اٹھا سکتے ہیں.

05. ایک رابطہ شے بنائیں

ہمارے مرحلے کے سیٹ کے ساتھ، یہ ایک ہی رابطہ شے بنانے کا وقت ہے. یہ وہی چیز ہے جو ڈیٹا، نقل شدہ، اور رابطوں کی مکمل فہرست کو مکمل کرنے کے لئے ایک گرڈ میں بند ہو جائے گا. چلو ایک سادہ دائرے کے ساتھ شروع کرتے ہیں، جو اوتار کے لئے ایک جگہ دار کے طور پر کام کرے گا (ایک صارف ہر صارف کی نمائندگی کرتا ہے).

06. کچھ ٹیکسٹ تہوں بنائیں

Add text layers where the names and addresses of your contacts will sit — متن تہوں کو شامل کریں جہاں آپ کے رابطے کے نام اور پتے بیٹھیں گے

اوول کے آگے، آلو ٹیکسٹ تہوں کی جوڑی بھی ڈالیں. کے ساتھ داخل کریں اور جی ٹی؛ متن یا صرف ٹی کلیدی، ایک پرت ڈالنے کے لئے متن کے آلے کا استعمال کریں جو 'یہاں نام' پڑھتا ہے، اور اس کے نیچے ایک اور 'یہاں ای میل' پڑھتا ہے. یہ تہوں کے اندر اندر قسم کے پینل سے ڈیٹا سے بھریں گے.

07. ایک نام اٹھاو

Using the Type panel, populate the design with some random names — قسم کے پینل کا استعمال کرتے ہوئے، کچھ بے ترتیب ناموں کے ساتھ ڈیزائن کو آباد کریں

ساسیج بنانے کا وقت! ہم ایک حقیقی نام اور ایک حقیقی ای میل ایڈریس داخل کرکے شروع کریں گے. سب سے پہلے، اس پرت کو منتخب کریں جو 'نام یہاں' پڑھتا ہے اور ٹائپ پینل کھولیں (انسپکٹر کے آگے کرافٹ بار میں واقع). آپ کو منتخب کرنے کے لئے ڈیٹا کے مینو کے ساتھ پیش کیا جائے گا. 'نام' منتخب کریں، پھر مرد، عورت یا دونوں سے منتخب کریں. آپ کی ٹیکسٹ پرت خود بخود ایک حقیقی نام سے بھرا ہوا جائے گا.

08. ای میل ٹیکسٹ پرت بھریں

ہم ای میل ٹیکسٹ پرت کو اسی طرح سے بھرنے کے لئے جا رہے ہیں جس طرح ہم نے نام کیا. 'یہاں ای میل یہاں' پرت منتخب کریں، قسم کے پینل کو کھولیں، اور ای میل ایڈریس کو فوری طور پر ایک حقیقت پسندانہ ای میل ایڈریس داخل کرنے کے لئے منتخب کریں.

09. بے ترتیب چہرے

Select a source from which headshots can be pulled — ایک ذریعہ منتخب کریں جس سے ہیڈ شاٹس نکالا جا سکتا ہے

اگلا اپ ہم اس سرمئی دائرے کو ایک حقیقی تصویر اوتار کے ساتھ بھرنا چاہتے ہیں، جو ہم تصاویر پینل کے ساتھ کریں گے. دائرے کی پرت کو منتخب کرکے شروع کریں، پھر کرافٹ پین سے 'تصاویر' کھولیں. یہاں، آپ کو چند اختیارات مل گئے ہیں، جیسے مقامی فولڈر، ڈراپ باکس، یا بڑے پر ویب کی سوسسنگ کی طرح.

یہاں میں ویب سائٹ uifaces.com سے ڈاؤن لوڈ کردہ تصاویر سے بھرا ہوا ایک مقامی فولڈر کا انتخاب کر رہا ہوں. 'جگہ کی تصاویر' پر کلک کریں اور کرافٹ آپ کے ذخیرہ سے لے جانے والے بے ترتیب چہرے کے ساتھ اپنا دائرہ کریں گے.

10. رابطوں کی ایک فہرست بنائیں

ایک ہی رابطے سے بھرا ہوا ہے، یہ رابطے کی مکمل فہرست بنانے کا وقت ہے. ہم ایسا کرنے سے پہلے، ہم صرف تہوں کے تحت ایک چھوٹی سی تقسیم لائن ڈالیں.

11. ڈپلیکیٹ

ایک مکمل فہرست میں ہمارے واحد رابطہ عنصر کو دوبارہ کرنے کے لئے، ہم کرافٹ کے ڈپلیکیٹ پینل کا استعمال کرنے جا رہے ہیں. آپ کے گروپ کے ساتھ منتخب کردہ، ڈپلیکیٹ پینل کھولیں اور اختیارات کو چیک کریں.

ہمارے پاس دو انتخاب ہیں: انتخاب اور مخصوص شمار کے اندر. سب سے پہلے آپ کو اس علاقے کو منتخب کرنے کی اجازت دیتا ہے جسے آپ فہرست میں چاہتے ہیں، پھر اس کے ساتھ بہت سارے اشیاء فٹ ہوتے ہیں. دوسرا آپ کو صحیح شمار کی وضاحت کرنے کی اجازت دیتا ہے ('میں ایک گرڈ ایکس اشیاء وسیع اور Y اشیاء لمبا' چاہتا ہوں).

12. انتخاب کے اندر کا استعمال کرتے ہوئے

ہم اندرونی انتخاب کا اختیار استعمال کریں گے، جس میں مجھے مل گیا ہے سکرین ڈیزائن کے لئے بہترین ہے. چونکہ یہ عمودی فہرست ہے، گرڈ نہیں، ہم صرف عمودی اختیار کو چیک کرنے کے لئے جا رہے ہیں. ڈپلیکیٹ مواد پر کلک کریں اور آپ دیکھیں گے کہ کچھ چیزیں ہو گی.

سب سے پہلے، آپ کا واحد رابطہ گروپ تین گنا ہو گیا ہے. دوسرا، ہر وقت ڈپلیکیٹ اس کے جادو کرتا ہے، آپ کے شعبوں کو دوبارہ آباد کیا جاتا ہے، لہذا ہر نیا گروپ تازہ ڈیٹا کا استعمال کرتا ہے. تیسری، آپ کے رابطے کے گروپوں کے تحت تخلیق کردہ ایک نئی پرت ہے، جس میں ہم اس علاقے کی وضاحت کرنے کے لئے استعمال کریں گے جو ہم رابطے سے بھرا ہوا چاہتے ہیں.

13. پرت کا سائز تبدیل کریں

Resize the Duplicate Control layer, and the contacts will multiply to fill the space — ڈپلیکیٹ کنٹرول پرت کا سائز تبدیل کریں، اور رابطوں کو خلا کو بھرنے کے لئے ضرب ہو جائے گا

رابطے کی فہرست پوری سکرین کو بھرنے کے لئے، ہم تبدیل کرنے جا رہے ہیں ڈپلیکیٹ کنٹرول پرت. بس شکل کے نیچے ہینڈل کو پکڑو اور اسے اپنے آرٹ بورڈ کے نچلے حصے میں نیچے ڈالو.

جیسے ہی آپ جانے دو، ڈپلیکیٹ خود کار طریقے سے نئی جگہ بھرنے کے لئے زیادہ سے زیادہ رابطہ گروپوں کو تخلیق کرے گا، پھر تازہ ڈیٹا کے ساتھ ہر نئے گروپ کو بھرنے کے لۓ.

14. اسپیسنگ کو درست کریں

اب ہماری فہرست جگہ میں ہے، آپ کو اس بات کا یقین ہوسکتا ہے کہ فاصلہ صحیح نہیں ہے. کرافٹ کے ساتھ، گٹروں کو ایڈجسٹ کرنا بہت آسان ہے. منتخب کردہ ڈپلیکیٹ کنٹرول پرت کے ساتھ، ایک بار پھر ڈپلیکیٹ پینل کھولیں، اور اس بات کو نوٹس کریں کہ اب بٹن اب گٹروں کو ایڈجسٹ کرتا ہے. کینوس کے ارد گرد ہر نئی پرت کو نگاہ کرنے کے بجائے، صرف عمودی گٹر کا اختیار 20 کو تبدیل کر دیتا ہے، پھر ایڈجسٹ گٹرٹر بٹن کو مار ڈالو. آپ کی فہرست خود بخود صحیح وقفہ کاری میں داخل ہوجائے گی.

15. ٹھنڈی ہیڈر شامل کریں

ہماری فہرست کے ساتھ مکمل طور پر اور حقیقی نظر آنے والے لوگوں کے ساتھ آباد ہوئے، چلو انٹرفیس میں دوگنا اور کچھ فلئر ڈالیں، شاید مکمل تصویر ہیڈر کی شکل میں. ہم اصل 'ہیڈر-بی جی' کی شکل کو منتخب کرکے شروع کریں گے جو ہم نے آئتاکار کے آلے کے ساتھ نکالا، اور اس فہرست میں پہلی رابطہ کی طرف اشارہ کیا. ہیڈر شاید 20px کو پہلے شے سے رکھنا چاہئے، کیونکہ ہم نے ہماری فہرست میں استعمال ہونے والی ایک ہی گٹر کا استعمال کیا.

16. صحیح تصویر تلاش کریں

Unsplash is an impressive online photo resource — Unsplash ایک شاندار آن لائن تصویر وسائل ہے

ہمارے نئے سائز کی شکل کے ساتھ منتخب کردہ، چلو تصاویر پینل کھولیں، اور غیر جانبدار ٹیب کے سربراہ ہیں. Unsplash ایک حیرت انگیز آن لائن وسائل ہے، جو رائلٹی فری، اعلی معیار کی تصاویر سے بھرا ہوا ہے.

کرافٹ آپ کو رنگ اور قسم کی طرف سے فلٹر کرنے کی اجازت دیتا ہے، لہذا کسی بھی موقع کے لئے ایک بہترین تصویر تلاش کرنا ہمیشہ سے آسان ہے. ہمارے سیاہ رنگ سکیم کے ساتھ، مجھے لگتا ہے کہ خلائی قسم صرف ٹھیک ہو گی. جگہ کی تصویر پر کلک کریں اور آپ کی نئی تصویر جگہ پر جائیں گے.

17. tweaking رنگ

چونکہ کرافٹ ہمارے فلٹرز پر مبنی بے ترتیب تصویر رکھتا ہے، جب تک آپ کو پسند نہیں ملتی ہے، اس تصویر کو دوبارہ دوبارہ ترتیب دینا آسان ہے. صرف جگہ کی تصویر پر کلک کریں جب تک کہ آپ کو پسند نہ ہو.

تصویر مجھے پسند ہے تھوڑا سا روشن ہے، لہذا میں اس تصویر کے سب سے اوپر پر ایک سیاہ مترجم بھرنے کے ذریعے ایک نشان کو تبدیل کرنے جا رہا ہوں. خاکہ آپ کو 'اسٹیک' کو ایک شکل پر بھرتی ہے، لہذا ہم سب کو کرنے کی ضرورت ہے، انسپکٹر کے بھر میں تھوڑا '+' آئکن پر کلک کریں. میں نے تصویر کے سب سے اوپر پر 50 فی صد سیاہ پرت شامل کیا ہے، جو اب صرف صحیح نظر آتا ہے.

18. کیا

There you have it – a realistic mockup full of data — آپ کے پاس یہ ہے - اعداد و شمار سے بھرا ایک حقیقت پسندانہ مذاق

یہ سب کچھ ہے! عام طور پر مواد کو تلاش کرنے کے لئے عام پاگل ڈیش عام طور پر تلاش، کاپی کرنے، پیسٹنگ، اور بار بار پر مشتمل ہوتا ہے. حقیقت پسندانہ اعداد و شمار کے ساتھ پوری ترتیب کو بھرنے میں صرف چند کلکس دور ہے، اور آپ کو اپنے پسندیدہ ڈیزائن کے پروگرام کو بھی چھوڑنے کی ضرورت نہیں ہے.

اپنے خاکہ ڈیزائن میں ڈیٹا کیسے شامل کریں

01. اپنے آرٹ بورڈ سیٹ کریں

02. ایک ہیڈر ڈرا

03. فوٹر کی تعمیر

04. شبیہیں داخل کریں

05. ایک رابطہ شے بنائیں

06. کچھ ٹیکسٹ تہوں بنائیں

07. ایک نام اٹھاو

08. ای میل ٹیکسٹ پرت بھریں

09. بے ترتیب چہرے

10. رابطوں کی ایک فہرست بنائیں

11. ڈپلیکیٹ

12. انتخاب کے اندر کا استعمال کرتے ہوئے

13. پرت کا سائز تبدیل کریں

14. اسپیسنگ کو درست کریں

15. ٹھنڈی ہیڈر شامل کریں

16. صحیح تصویر تلاش کریں

17. tweaking رنگ

18. کیا

کيسے - انتہائی مشہور مضامین

حرکت پذیری کے لئے ایک چہرہ کس طرح

ایپل کی تصاویر اپلی کیشن ماسٹرنگ کے لئے 10 تجاویز

فوٹوشاپ میں پس منظر کو کیسے ہٹا دیں

ایک پین کی بھولبلییا سٹائل مونسٹر بنانے کے لئے کس طرح

آپ کے پادری آرٹ ورک پر ڈرامہ کیسے شامل کریں

سکریچ سے ایک پیارے 3D کردار بنائیں

فوٹوشاپ کے 'میچ فونٹ' کی خصوصیت کا استعمال کیسے کریں

مجسمہ اور پینٹ کی نقل مکانی کے نقشے کو کیسے جوڑنا

اقسام