لوحة المتصدرين

في المقال السابق تعرّفنا على ماهية صفحة الهبوط، أساسيات وأهم عناصر كل صفحة، كما ألقينا النظرة على بعض الصفحات الشائعة، الآن سنطبق ما تعلمناه في بناء صفحة خاصة بنا. الصفحة التي سنقوم ببنائها ستكون حول تطبيق وهمي، وهو شبكة تواصل تدعى "اهتمامات"، هيا لنبدأ. هذه هي النتيجة النهائية التي سنصل لها بعد تطبيق جميع خطوات الدّرس: الأساسياتسنقوم أولا بإعداد بعض الأمور من أجل العمل. علينا فتح صفحة عمل جديد بأبعاد 1920x6000px من أجل يكون لدينا المتسع للعمل عليه.سنستعمل خط خط Cocon العربي المجاني.سنضع صورة لرأس الصفحة، تستطيع الحصول على أيّ صورة تريدها من مواقع الصور المجانية مثل unsplash.سنستخدم بعض التصاميم الجاهزة من أجل الصفحات، احرص أن تحصل على صور حقيقية في حال كنت تبني تطبيقك، بالنسبة للتصاميم سنحصل عليها من Okilla.سنحتاج إلى إطار للهاتف من أجل أن نضع فيه صورة خاصة بنا في رأس الصفحة، تستطيع الحصول عليه من مجموعة عناصر iOS8 في موقع teehan lax.سنستعمل Grid جاهز من أجل البناء عليه حتى نستخدمه لاحقا في التطوير، من أجل هذا سنحصل على Grid الخاص بإطار Bootstrap وتستطيع تحميله من هنا.سنستعمل مجموعة من الأيقونات المجانية من أجل العمل، اسم المجموعة هي Retina Icons وهي 120 أيقونة مجانية تستطيعون تحميلها من هنا.رأس الصفحةسنبدأ بإعداد رأس الصفحة، وهذا بعد أن قمنا بوضع Grid في المكان المناسب حسنا بعد أن قمنا بهذا، سنقوم بجلب صورة الهيدر المناسبة ووضع overlay أسود شفاف فوقها بشفافية `50%`. سنقوم الآن بإحضار صورة التطبيق للغلاف، سبق وصممت هذه الصورة حتى نستعملها مباشرة. عبر Grid سنختار 6 أجزاء (النصف) ثم نضع الصورة في منتصف ذلك الجزء، نستطيع وضع الصورة في المنتصف عبر تحديد المساحة التي نريد أن نضعه فيها ثم نختار الأزرار المحددة في الأسفل سنختار الآن النصف الثاني، ونضع فيه عنوان الصفحة بخط كبير. أسفله سنضيف نبذة سريعة عن التطبيق، ثم أسفل ذلك سنضيف زر CTA والذي سيكون عبارة زر للتحميل من متجر التطبيقات، احرص على أن تستخدم دوما التصميم الرسمي الذي يتم إدراج في صفحة apple brand guidelines وهو متوفر ب50 لغة، سنستخدم نحن النسخة العربية. لسنا بحاجة لإضافة روابط للتصفح في الهيدر لأننا سنقوم بذلك في الأسفل عبر قائمة ثابتة. روابط التحكمالآن سنقوم ببناء روابط التحكم، وهو عبارة عن قائمة ثابتة في أعلى الصفحة، حيث تثبت بعدما تخرج من إطار الشاشة، القائمة ستكون عبارة عن 4 أيقونات نحصل عليهم من مجموعة Retina Icons سيستغل كل واحد منهم جزئين (السدس) ويتم تنصيفهم في الوسط. التقديم بالتطبيقفي هذا الجزء سنقوم ببناء التقديم بالتطبيق، سيكون عبارة عن 3 أجزاء، كل جزء منهم يتكون من صورة من التطبيق إلى جانب عنوان يصفها وشرح أكثر أسفل العنوان. التقسيم سيكون مماثلا لرأس الصفحة، الصورة تستغل نصف الصفحة، والمحتوى يتسغل النصف الآخر، لكن هذه المرة سيكون المحتوى أقل في الحجم. سنقوم بالأمر ثلاث مرة، في الجزء الثاني سنقلب الاتجاه بحيث يصبح المحتوى على اليمين كما سنغير الخلفية إلى شيء داكن. جزء بناء الثقةجزء بناء الثقة سيتكون من جزئين، وهما بعض شهادات المستخدمين، وبعض الأرقام فلا شيء يبني الثقة في محل الزبون كاستخدام الأرقام فهي شيء سهل القراءة وسريع الملاحظة ويسهل استخدامها للمقارنة. بالنسبة لجزء شهادات المستخدمين، سوف سنستخدم slider حيث أن كل لقطة ستحتوي على شهادة ومعها صورة لصاحبها، الصورة كما تكلمنا في المقال السابق تساعد في كسب الثقة لأنك تعرف مصدر الكلام. أما بالنسبة لجزء الأرقام، فسنستخدم خلفية أخرى (صورة) حتى نجذب الانتباه، سنقوم بتقسيم الصفحة إلى 4 أجزاء، مع كل جزء يحتوي على أيقونة تعبيرية، بالإضافة إلى الرقم وما نحاول نسب الرقم له (عدد الأعضاء، عدد التحميلات...) جزء التحويلفي هذا الجزء نحن لا نملك الكثير لنقدمه، لذا سوف نقوم بإضافة زر التحميل من متجر التطبيقات مجددا إلى جانب إضافة أزرار نشر التطبيق في شبكات التواصل الاجتماعي، سنستخدم أيقونات Entypo الاجتماعية الإعداد للمرحلة القادمةحسنا، عند النقطة نكون رسميا قد انتهينا من التصميم، لقد اتبعنا أهم المعايير المطلوبة منا، وحان الوقت لنحول التصميم إلى صفحة حقيقية، وهذا ما سنقوم به في المقال القادم، ولكن إلى ذلك الحين، نحن لدينا العديد من الصور، ونحتاج إلى استخراجها كلها، وأمامنا طريقان، أخذ كل صورة لوحدها ونسخها وفتح صفحة جديدة ولصق الصورة فيها ثم تغيير إعدادات الصفحة لتناسب أبعاد الصورة ثم حفظ الصورة، وهذه الطريقة كما استنتجت، بدائية. لذا نستطيع أن نستخدم الطريقة الذكية، والتي هي كالتالي، سنعود لكل طبقات الصور (صور التطبيق والأيقونات والخليفات) ونغير اسمها إلى اسم الملف الذي نريده إلى جانب الامتداد، مثلا أغير اسم خلفية رأس الصفحة إلى `background.png` بعد أن نقوم بكل هذا، سنذهب إلى `File>>Generate>>Image Assets` ونُفّلعه، وبعدها نقوم بحفظ العمل بصيغة PSD ليقوم فوتوشوب بحفظ كل الصور التي نريدها في مجلد جانبي (باسم ملف PSD الخاص بنا) وبداخله كل الصورة جاهزة، أوليس هذا رائعا؟ خاتمةفي الدرس القادم سوف نطلع على كيفية بناء الصفحة، مع تعلم بعض الأمور الجديدة واستعمال بعض المعايير في بناء الصفحات.

من منا لا يحب الأطفال؟ ومن منا لا تجذبه أغراضهم وألعابهم ذات الأشكال اللطيفة والألوان البهيجة؟ دعونا نرسم عربة وحقيبة لطفل في برنامج إنكسكيب لنستشعر جزء من تلك البهجة التي نستشعرها مع الأطفال. سنبدأ برسم العربة في هذا الدرس وسنقوم في الدرس القادم برسم حقيبة الطفل. بأداة الدائرة نرسم شكلا بيضاويا، وعند اختيارنا لأداة التحرير Node tool سنلاحظ على يمين الشكل دائرة صغيرة. نحرك الدائرة الصغيرة من يمين الشكل إلى الطرف الذي يقابلها يسارًا لنحصل على قاعدة العربة، والتي سنلونها بدرجة من درجات الأحمر الفاتح. ملاحظة: يمكن معرفة القيم التي اخترناها من لوحة التعبئة والحدود Fill and stroke. من الشريط العلوي لأدوات Node tool سنختار Object to path لتحويل الشكل إلى مسار. نرسم دائرة صغيرة ونضعها في الطرف المستقيم من قاعدة العربة قريبا من المنتصف. نكرر القاعدة ونعطي الشكل المكرر لونا أقتم، ثم نقوم بتدويره مرة واحدة من الشريط العلوي، ونفعل من الشريط العلوي خيار الكبس والالتقاط Enable snapping ومنه نفعل جميع خيارات Snap bounding boxes لينكبس الشكل لمركز الدائرة الصغيرة. اضغط مرة أخرى على الشكل لتظهر أسهم التدوير، وفي وسط الشكل سيظهر لنا مركزه على شكل + . اسحب مركز الشكل إلى الطرف الحاد من الشكل مع الضغط على Ctrl أثناء السحب. كرر الشكل عن طريق اختياره ثم بالزر الأيمن اختر Duplicate ومن لوحة التعبئة والحدود اجعل اللون أفتح ثم قم بتدوير الشكل عكس عقارب الساعة، وكرر الشكل مرتين أخريين وقم بالتدوير مجددا للشكلين. ارسم مستطيلا فوق قاعدة العربة واجعل ضلعه العلوي على الطرف المستقيم من القاعدة تماما. كرر المستطيل على عدد الأشكال التي كررناها في النصف العلوي وذلك ليساعدنا على اقتصاص الزوائد الممتدة فوق قاعدة العربة. اختر أحد الأشكال العلوية مع أحد المستطيلات السفلية ثم من الشريط العلوي اختر: Path > Difference كرر العملية مع بقية الأشكال ليعطينا النتيجة التالية: نكبر قاعدة العربة بسحب السهم الأيسر من أسهم التحجيم ليكون عرضها مناسبا للأشكال التي رسمناها أعلى العربة. نصغر الأشكال التي هي عبارة عن غطاء العربة لتظهر بشكل متدرج مع أهمية إلغاء تفعيل الكبس والالتقاط من الأعلى حتى نتمكن من العمل بحرية. في أسفل قاعدة العربة سنرسم مستطيلا حاد الزوايا بأداة المستطيل. عن طريق Node tool نحرر الشكل ونحوله لمسار عن طريق Object to path ثم نختار العقدتين Nodes أسفل المستطيل ومن لوحة المفاتيح نضغط Ctrl+< لتضييق المسافة بين العقدتين. نرسم مستطيلا بزوايا كاملة الاستدارة ثم نقوم بتدويره ووضعه في أحد حواف المستطيل السابق، ونكرره ونعكسه أفقيا من الشريط العلوي، ثم نسحبه للطرف الآخر مع الضغط على Ctrl أثناء السحب. في الطرف السفلي لأحد أرجل العربة نرسم دائرة متساوية الأبعاد عن طريق الضغط على Ctrl أثناء الرسم، ثم نكرر الدائرة ونصغرها مع الضغط على Ctrl+Shift أثناء التصغير، ثم نحدد الدائرتين ونتبع المسار: Path > Difference نرسم في وسط العجلة التي أنشأناها نجمة بأداة النجمة والمضلعات Stars and polygons. نكرر العجلة ونسحبها للطرف المقابل مع الضغط على Ctrl أثناء السحب. سنرسم سلة أسفل العربة عند العجلات، عن طريق رسم مستطيل مستدير الزوايا بلا تعبئة. ملاحظة: نلغي تعبئة الشكل عن طريق التبويب Fill من لوحة التعبئة والحدود، وذلك بالضغط على علامة x. لإضافة الشبكة للسلة، نختار المستطيل الذي رسمناه، ومن الشريط العلوي نتبع المسار التالي: Extensions > Render > Grids > Grid من النافذة المنبثقة سنضع القيمة 10 لعرض الخط Line width، ولكل من المسافة العامودية والأفقية سنضع القيمة 100، وبقية القيم صفر، ونضع علامة إشارة عند Live preview لتظهر لنا النتيجة بشكل مباشر، ثم نضغط على Apply لتطبيق النتيجة، وبعدها نغلق النافذة. سنلون الشبكة بنفس لون المستطيل، وسنلاحظ أن خطوط الشبكة تزيد عن حواف المستطيل المستديرة. للتخلص من المستطيلات الزائدة، سنختار الشكل الشبكي الذي أنشأناه، ونتبع المسار: Path > Break Apart وذلك لتتجزأ الشبكة وتصير عبارة عن خطوط منفصلة عن بعضها البعض. سنحذف الخطوط الزائدة ونقلل عرض بعضها؛ لتصبح الشبكة متناسقة مع الشكل. بأداة الرسم المنحني Bezier سنرسم ذراعا لسحب العربة، على شكل حرف (L) معكوس طوليا ومائل، وذلك برسم خط منطلق من رجل العربة اليسرى، ومنه نرسم خطا آخر بزاوية قائمة عبارة عن المقبض الذي سنمسك منه العربة لنتمكن من دفعها، مع الضغط على Ctrl أثناء الرسم. نختار أداة Node tool ونسحب بمؤشر الفأرة الخط الثاني الأصغر لنعطيه انحناء. نختار إحدى العقدتين ونسحب منها ذراعها Node handles مع الضغط على Ctrl أثناء السحب لتصبح في نفس امتداد الخط الأول، ونفعل الشيء نفسه مع العقدة الأخرى ليكون ذراعها متوازٍ مع ذراع العقدة الأولى مع المحافظة على نفس الامتداد والارتفاع لذراع العقدتين. من تبويب سمة الحد Stroke style في لوحة التعبئة والحدود نتأكد من جعل أطراف الحدود مستديرة باختيار Round cap ونغير لون الذراع للون رمادي. سنرسم رأس مسمار لولبي عن طريق رسم دائرة صغيرة بأبعاد متساوية مع رسم خط بأداة Bezier في منتصفها، ثم نقوم بتجميعهما عن طريق تحديدهما ثم بالزر الأيمن نختار Group، ونضعه في الأطراف العلوية لرجلي العربة، وعند التقاء الذراع بالرجل اليسرى، وكذلك عند التقاء الرجلين. وبهذا اكتملت عربة الطفل. في الجزء الثاني من الدرس سنتعرف على خطوات رسم حقيبة طفل بإذن الله.