Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Affinity Designer
Webdesign

إنشاء تصميم التطبيق اللياقة البدنية في مصمم تقارب

by
Difficulty:BeginnerLength:MediumLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Arabic (العربية/عربي) translation by Ratnawati (you can also view the original English article)

Final product image
What You'll Be Creating

في هذا البرنامج التعليمي سوف يسير لكم من خلال عملية تصميم شاشة ترحيب لتطبيق دائرة الرقابة الداخلية اللياقة بدنية. سوف نعمل مع "تقارب مصمم"، أداة جديدة وواعدة الرقيق، وتطبيق كبيرة لتصميم واجهة المستخدم.

لن تحتاج إلى أي خبرة سابقة مع التطبيق. بنهاية هذا البرنامج التعليمي سوف قد اكتسبت معرفة أساسية "تقارب مصمم" سير العمل. سوف نعمل مع نوع وناقل، والصور، فضلا عن أنماط الطبقة.

إنشاء عامل مساحة

الخطوة 1

دعنا نبدأ بإنشاء مستند جديد.

بعد فتح "مصمم تقارب" الذهاب إلى ملف > جديد من القائمة الرئيسية. يمكنك تحديد ملف المعلمات التي تناسب احتياجاتك الأفضل المنبثقة التي تظهر. الآن دعونا نركز على خيارين: نوع والإعداد المسبق للصفحة. ونحن سوف يكون تصميم أي فون التطبيق ذلك أفضل وسيلة للذهاب إلى اختيار نوع: الأجهزة وإعداد مسبق: أي فون 5 (الشبكية). سيتم تعيين مصمم تقارب الذرة الخيارات الأخرى بالنسبة لنا.

الخطوة 2

القادم حتى نحن بحاجة إلى إعداد بيئة العمل. أنا مروحة كبيرة من استخدام الشبكات في التصميم. ونحن لن يسكن عمق هذا الحق الآن، ولكن أننا سوف قم بإعداد شبكة تخطيط بسيط حقاً.

وسوف الهزيل هذا التصميم على "أبل البشرية واجهة المبادئ التوجيهية" الأساسية، مما يعني الالتزام بتسلسل هرمي محدد. سوف نحتاج إلى تخصيص لشريط الحالة (20 نقطة). ثم، على الرغم من أن تتسم بالشفافية، سيكون هناك شريط التنقل البسيط أدناه أن (pt 44).

التالي لأعلى ومساحة للمعلومات الرئيسية عن أداء المستخدم ومكاناً لزر لبدء ممارسة التمارين الرياضية.

انتقل إلى طريقة عرض > مدير الأدلة ومنبثقة سوف تظهر، مع المبادئ التوجيهية الأفقي والرأسي (فارغة الآن). انقر على أيقونة صفحة فارغة صغيرة أسفل المقطع "خطوط إرشاد أفقية". القيام بذلك سيتم إضافة دليل أفقي جديد. ثم انقر نقراً مزدوجاً فوق القيمة التي تظهر في القائمة وتغيير بنط 20 إضافة إلى أدلة أخرى باستخدام السمات كما هو موضح أدناه.

خلفية التطبيق

الخطوة 1

الآن نحن في طريقنا لإنشاء خلفية التطبيق لدينا. من قائمة أداة على اليسار حدد أداة المستطيل (M)، ورسم مستطيل يغطي منطقة العمل بالكامل. على لوحة الجانب الأيسر هناك قسم تحويل. يمكنك التحقق من أبعاد المستطيل الخاص بك هنا، فضلا عن نقطة انطلاق لها (يجب أن يكون X:0، pt Y:0 و w: 320، بط حاء: 568).

الخطوة 2

الآن سنقوم بتغيير لون الخلفية. اذهب إلى شريط "الأدوات إطار" فقط تحت شريط الأدوات الرئيسي (إذا كنت لا ترى دفعة واحدة لعرض > "إظهار شريط أدوات إطار" في القائمة الرئيسية). على الجانب الأيسر من شريط الأدوات إطار سترى خصائص تتعلق بالشكل الذي قمنا بإنشائها فقط. انقر فوق المستطيل الأبيض الصغيرة وصفت تعبئة (بالشكل المحدد). اختر RGB Hex منزلقات من قائمة الاختيار، ثم أدخل #151515 في حقل الإدخال المعلمة ست عشري، ثم اضغط Enter.

الخطوة 3

انتقل إلى لوحة الطبقات. انقر نقراً مزدوجاً فوق الطبقة التي تحتوي على شكل لدينا وتغيير اسمها إلى "حرس الحدود". ثم انقر على أيقونة القفل قليلاً لتأمين طبقة حرس الحدود. وبهذه الطريقة لن تعبث معها عن طريق الصدفة عند العمل على العناصر الأخرى.

حالة وأشرطة التنقل

الخطوة 1

تركيز الاهتمام على شريط الحالة. ونحن لن تهتم بالتغيير الجذري لمفهوم الدائرة، بدلاً من تحميل الملفات المصدر يعلق على هذا البرنامج التعليمي للعثور على ملف stat-بار. ثم انتقل إلى الملف > الاستيراد في "تقارب مصمم الرئيسية القائمة"، حدد ملف stat-bar.afdesign وواحدة انقر فوق أي مكان على التصميم.

قم بتحديد المجموعة ووضعه في الجزء العلوي من الشاشة التطبيق.

الخطوة 2

لقد حان الوقت لإنشاء القائمة همبرغر لدينا. للبدء، قم بتشغيل الشبكة، بكسل وأدلة العض في شريط "الأدوات الرئيسي". تغيير اللون الرئيسي الخاص بك إلى "الأبيض" في أعلى الجانب الأيسر من إطار التطبيق. حدد "أداة المستطيل" من لوحة الأدوات على اليسار ورسم مستطيل pt 18 × 2. اضغط زر Alt + Shift وانقر واسحب المستطيل أدناه نسخة أصلية واحدة (نحن كنت مجرد نسخ المستطيل). القيام بذلك مرة أخرى وستحصل على رمز قائمة همبرغر.

حدد كافة الأشكال الثلاثة (Shift + النقر)، وانقر فوق الزر "إضافة" في الركن الأيمن العلوي "تقارب مصمم" دمج واحد. البحث عن الرمز الخاص بك في لوحة الطبقات وتسميته "همبرغر-القائمة-الرمز".

الخطوة 3

حدد أداة النص الفني (T) من لوحة أداة وانقر في أي مكان داخل مساحة شريط التنقل على تصميمنا. أدخل النص "تشغيل التطبيق"، وحدد الكثير.

انقر فوق الزر حرف، قم بتغيير سمات النص كما هو مبين أدناه، ثينلوسي المنبثقة.

الآن مركز النص في منطقة شريط التنقل. سوف تنجذب تلقائياً. إذا لم يكن الأمر كذلك، تأكد من تشغيل خيارات أطباق على شريط الأدوات الرئيسي في الأعلى.

لقد حان الوقت لتنظيف الأشياء في لوحة الطبقات. انقر فوق الزر "إضافة طبقة جديدة" في أسفل لوحة الطبقات واسحب أيقونة همبرغر، شريط العنوان وحالة التطبيق في ذلك. مجموعة التطبيق العنوان والقائمة أيقونة الطبقات معا (حدد كلا وانقر فوق Cmd + G) ثم إعادة تسمية الطبقة كما هو موضح أدناه:

التخطيط المرحلي

الخطوة 1

حدد أداة الدائرة (م) من لوحة الأدوات، ورسم دائرة. مع الشكل الجديد الخاص بك بتحديد فتح لوحة "خصائص السكتة الدماغية" على الجانب الأيسر العلوي وتغيير المعلمات كما هو موضح أدناه.

بدء الرسم من دليل مركز أنشأنا في البداية، ثم اضغط باستمرار على Cmd (الرسم من نقطة المركز) والتحول (رسم دائرة، لا قطع ناقص) أثناء الرسم. دائرة الخاص بك يجب أن يكون حوالي 200 × 200 نقطة.

حدد الدائرة واضغط تحويل إلى منحنى زر في القائمة شريط الأدوات. حدد أداة العقدة (A)، وانقر على زر "الخروج من المنحنى". مع "أداة العقدة" المحددة لا يزال إنشاء نقطتين على المنحنى حوالي 3/4 ارتفاعها.

ملاحظة: يمكنك إنشاء أدلة إضافية لمواءمة هذه العقد الجديد أفضل. اضغط Cmd + R لإظهار المساطر وانقر فوق ثم اضغط على المسطرة العليا، ثم اسحب مؤشر لأسفل لإنشاء دليل.

حدد العقدة العليا للدائرة وانقر فوق Delete على لوحة المفاتيح لإزالته. يجب أن يكون قاعدة لطيفة لمخطط دائرة مفتوحة الآن.

الخطوة 2

حدد الشكل المخطط وتكرار ذلك (CMD + J). حدد في أعلى اليسار باستخدام أداة العقدة وحذفه. افتح لوحة "خصائص السكتة الدماغية"، وقم بتغيير القيم كما هو موضح أدناه. اللون الأخضر هو #4DFA41 والأصفر #F7D203.

الخطوة 3

حدد "أداة النص الفني" وإدخال بعض المعلومات الإضافية، ثم ضع وتنسيقها كما هو موضح أدناه.

ولدينا الآن مخطط تقدم حقاً ملفتة للنظر مع معلومات إضافية حول إنجازات المستخدم!

بدء تشغيل زر

الخطوة 1

حدد أداة المستطيل (M) من لوحة الأدوات ثم ارسم مستطيلاً، تقريبا 290pt × 44 نقطة. "الإنسان واجهة المبادئ التوجيهية لدائرة الرقابة الداخلية" اقتراح المصممين أبل 44 من حزب العمال أن يكون ارتفاع الزر مثالية للتنصت على السهل.

العالي-نقر على خلفية التطبيق والشكل المستطيل كنت قمت بإنشائه، ثم انقر فوق "أفقي محاذاة" إلى مركز الزر في الناحية العلوية اليسرى من الشاشة. ووضعه في الجزء السفلي من تصميم واجهة المستخدم الخاصة بك. يمكنك أيضا تحديد الشكل المستطيل وتغيير في العاشر/لوحة إعدادات Y في التحويل إلى تلك المبينة أدناه:

الخطوة 2

حدد الشكل التي قمت بإنشائها فقط. افتح لوحة "لون التعبئة" في أعلى الجانب الأيسر من الشاشة، وتغيير لون التعبئة إلى شفاف. من تغيير في المخ إلى #4CFA41. افتح لوحة "التفضيلات السكتة الدماغية" (الموجود بجانب لون واحد) وتعيين سمك 2pt ومحاذاته إلى داخل الشكل.

الخطوة 3

الآن لتسمية الزر. حدد "أداة النص الفنية" واستخدامها لإنشاء بطاقة عنونة في وسط المستطيل الذي أنشأته للتو. اكتب في "بدء التشغيل" وفتح إطار الحرف بواسطة النقر فوق الزر حرف من القائمة أداة الأعلى (مع الكائن النص المحدد). تغيير كافة تفضيلات تعكس الأمثلة المبينة أدناه:

إحصائيات عينة

نحن ذاهبون إلى وضع طريقة عرض إحصائيات بسيطة بين التخطيط المرحلي والزر "بدء التشغيل". ونحن سنعرض متوسط سرعة التشغيل والعدد الإجمالي لتشغيل وحرق السعرات الحرارية.

الخطوة 1

قم بزيارة الموقع Icons8 وتحميل أيقونة تشغيل وايقونة ساعة توقيت، ورمز "عنصر النار". Icons8 مكان عظيم للعثور على الرموز الحديثة والانيقة. يمكنك الحصول على بابوا غينيا الجديدة مجاناً (تذكر أن وصلة إلى موقع Icons8 إذا كنت تستخدم لهم) أو شراء نسخة متجه.

الخطوة 2

البدء بوضع رمز التشغيل في التصميم الخاص بك. انتقل إلى الملف > مكان وحدد الملف، أو مجرد سحب الملف إلى "مصمم تقارب". مكان توسيطه عمودياً أسفل المخطط التقدم.

بعد ذلك انتقل إلى لوحة التأثيرات (مع الرمز المحدد) وفتح علامة التبويب "تراكب اللون" تغير لون تراكب إلى #4CFA41.

قم بالتبديل إلى علامة التبويب أنماط وإنشاء نمط مخصص من التحديد بالنقر فوق المنسدلة رمز القائمة إلى اليمين الصغيرة، وتحديد "أسلوب إضافة" من التحديد. عند القيام بذلك سوف يكون من الأسهل إعادة استخدام أسلوبنا في وقت لاحق.

الخطوة 3

مرة أخرى، حدد "أداة النص الفني" وإنشاء كائنين من كائنات النص. اكتب في عدد عينات والنص "مجموع يدير". تنسيق عليها كما هو موضح أدناه. مركز لهم عمودياً ووضعها أسفل رمز "تشغيل الرجل".

الخطوة 4

ضع الرموز الأخرى التي تم تنزيلها في تصميم واجهة المستخدم. مع واحد منهم تحديد اختيار نمط حددنا فقط من لوحة الأنماط. فويلا! وقد تم تطبيق أنماط لدينا دون الحاجة إلى تحديد لهم مرة أخرى.

مع الرمز المحدد لا يزال انقر فوق Cmd + C أو الذهاب إلى تحرير > نسخة. حدد رمز آخر وانقر فوق Cmd + Shift + V أو اذهب إلى قائمة > تحرير > "أسلوب اللصق". هذا سوف لصق نمط الكائن المنسوخ مسبقاً إلى واحدة جديدة. سهل جداً، أليس كذلك؟

اللمسات الأخيرة

الخطوة 1

عندما يكون لدينا جميع المكونات على اللوحة القماشية لدينا أن الوقت قد حان للعمل على بعض التفاصيل. أولاً وقبل كل شيء لدينا ثقب قبيح في وسط التصميم، دعونا نفعل شيئا حيال ذلك.

إذا كنت أبقى الطبقات الخاصة بك ونظم، هذا الشيء تكون سهلة. حدد الطبقة/المجموعة مع مخططنا المرحلي وتحريكه حول 50pts لأسفل. إذا كنت لا تحتفظ بطبقات الخاص بك ونظم، ستكون هذه الخطوة الصعبة-أنها أكثر يقدم لك الحق!

الخطوة 2

دعونا أيضا التوابل الخلفية. إنشاء مستطيل 320x320pt ووضعه على قمة التصميم. حدده ثم اختر Corner Tool (C) من لوحة الأداة. انقر على واحدة من نقاط الربط للمستطيل لجعله قابل للتحرير، بدوره على أدلة المعرفة مسبقاً (Cmd +؛) وانقر فوق مركز الزاوية السفلي من المستطيل لإنشاء عقده. قم بتحديده وتحريكه لأسفل 40pts. ولدينا هنا لدينا سهم على شكل مخصص جديد. انتقل إلى لوحة الطبقات ونقله إلى طبقة حرس الحدود (وضعه في الجزء العلوي).

الخطوة 3

الاستيلاء على الملفات المصدر يعلق على هذا البرنامج التعليمي، ونلقي نظرة على صورة الباريسي الجميل الشوارع. أنها واحدة من الصور أخذت عند زيارته لباريس. يبدو لطيفا أيضا مكان عظيم لتشغيل. فتحه في مصمم تقارب ونسخة (Cmd + C) عليه.

أن نعود إلى التصميم وحدد لنا شكل السهم تم إجراؤه من قبل (في لوحة الطبقات). ثم انقر فوق Cmd + Alt + V للصق في الشكل المحدد. نقله إلى المحاصيل كما تريد. حدد شكل السهم وخافت أن 40% من العتامة. انقر فوق Cmd + G لوضع المنحنى في مجموعة، وتغيير "طريقة مزج" من عادي إلى توهج.

الخطوة 4

مع الفريق المحدد لا يزال الاستيلاء على أداة الشفافية (ص) من القائمة أداة وإنشاء "خطي مزج التدرج" في المجموعة (انقر واسحب) من الأسفل، على طول الطريق حتى. يمكنك اللعب باستخدام أداة لتحقيق النتائج التي تريد.

الخطوة 5

الآن دعنا إضافة ظل مسقط أدناه لدينا السهم. حدد المجموعة، ثم انتقل إلى لوحة التأثيرات. توسيع علامة التبويب "الظل الخارجي" وقم بتشغيله. الإزاحة radius و 15pt 20pt ينبغي أن تعمل بشكل جيد.

الاستنتاج

لقد انتهيت! لقد قمت بإنشائها التصميم الخاص بك التطبيق المحمول الأولى مع "مصمم تقارب". مع أي حظ، الخطوات المتكررة خلال هذه العملية سوف تدرس لك عدد من تقنيات سير العمل "مصمم تقارب" مفيدة جداً. وأتطلع إلى رؤية ما تصاميم أخرى تقوم به!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.