البرنامج التعليمي: كيفية تصميم Uhone IP الخاص بـ Chatroom
سنقوم في هذا البرنامج التعليمي بتصميم واجهة مستخدم لجهاز iPhone من أجل تطبيق خاص بالمحادثة وتطبيق دردشة.
يتضمن التطبيق عددًا من عناصر واجهة اللمس اليومية ، مثل الأزرار وحقول الإدخال والإيماءات التي تعمل باللمس.
سنقوم بتغطية مختلف أدوات فوتوشوب ، وأنماط الطبقة وبالطبع معالجة أي قيود التصميم ؛ بالإضافة إلى جعل تصميم البيكسل مثاليًا وجميلًا بما يكفي لاستحقاق مكان على شاشة iPhone.
تم تصميم التصميم باستخدام Photoshop CS5.5 ، إلا أن جميع الإصدارات الحديثة من Photoshop ستعمل بشكل رائع.
متطلبات شاشة التطبيق
سنقوم فقط بإنشاء شاشة واحدة في هذا البرنامج التعليمي. ستكون الشاشة هي شاشة الدردشة الرئيسية للتطبيق القائم على الدردشة ، مثل غرفة الدردشة العامة ولكن على هاتفك. متطلبات هذه الشاشة هي:
- عنوان - هذه هي غرفة الدردشة التي أنت فيها حاليًا.
- زر العودة / إغلاق / الموضوعات - للعودة إلى الشاشة السابقة.
- زر شخص - يعرض هذا الشخص الموجود حاليًا في غرفة الدردشة.
- قائمة بالرسائل - يجب أن تحتوي الرسائل على صور شخصية وطابع زمني.
- طريقة لعرض ملفات تعريف المستخدمين ورسائل التقارير.
- حقل نصي لكتابة رسائلك.
- زر إرسال لنشر رسائلك.
التخطيط والرسم والسيرفر
كما هو الحال مع أي مشروع واجهة مستخدم ، فإن التخطيط والرسم والإسراع في الواجهة الخاصة بك أمر ضروري. وغالبًا ما يستبعد أي أفكار سخيفة (على الرغم من أنها قد لا تبدو سخيفة في رأسك!) قبل وضع المفاهيم الرقمية والأحجار الطبيعية معا. ما يمكن أن يبدو وكأنه حل رائع لإصلاح مشكلة في رأسك قد لا يعمل على الإطلاق في الممارسة الحقيقية ، وهذا هو السبب في أن إطار العمل السلكي قبل البدء في مشروع ما يعد خطوة مهمة.
انتزاع القلم ولوح المفضلة لديك والبدء في رسم.
كما ترون من الصورة أعلاه ، قضيت بضع دقائق في وضع ثلاثة مفاهيم مختلفة. عادة ما تستغرق هذه العملية أيامًا أو أسابيع في بعض الأحيان ، ولكن نظرًا لأننا لا نصمم سوى شاشة واحدة والغرض من التطبيق بسيط ، فإن هذه الخطوات لا تستغرق وقتًا طويلاً! هم في الغالب متشابهة جدا ، ولكن كل واحد لديه اختلافات فريدة من نوعها ، والتي سألخص أدناه.
رسم أ
مستوحاة من واجهة المستخدم الأصلية على Twitter لـ iPhone ، تسمح واجهة المستخدم هذه للمستخدمين بالتمرير على رسالة لعرض مزيد من الخيارات ، مثل "عرض الملف الشخصي" و "تقرير المستخدم" - وهي طريقة ممتعة وموفرة للمساحة للسماح بالمزيد من المحتوى على هذه الشاشة. لقد ألحقت فكرة وجود زر إعدادات في شريط التنقل في هذه الشاشة ، ولكن قررت اتباع القاعدة العادية الخاصة بي "Less Is More" - من غير المرجح أن يدخل المستخدم إلى الإعدادات في كل مرة يستخدم فيها التطبيق بحيث لا تكون هناك حاجة إليه هنا.
رسم ب
هذا المفهوم أصغر قليلاً ، مع وجود أزرار "عرض الملف الشخصي" و "إبلاغ المستخدم" كرموز ثابتة على يمين الرسائل. لقد لعبت مع فكرة عدم وجود زر "إرسال" هنا ، وبدلاً من ذلك استخدم زر الإرسال على لوحة مفاتيح iOS. لقد قررت ضد هذا لأن معظم التطبيقات (بما في ذلك تطبيقات iOS القياسية مثل الرسائل) تحتوي على زر إرسال لوحة المفاتيح بالإضافة إلى زر الإرسال الإضافي بجوار حقل إدخال النص. أحب أن أبقي واجهاتى متسقة مع الآخرين على App Store.
رسم ج
Sketch C هو المخطط الذي قرّرت المضي قدمًا به - بدلاً من زر الرجوع لدينا زر إغلاق. أعتقد أن هذا يجعل الأمر أكثر وضوحًا عند الانتهاء من النقر ، لن تكون جزءًا من تلك المحادثة (بخلاف تطبيقات المراسلة ، حيث تعود ، ويمكن أن تعود لترى كل تلك الرسائل السابقة). يعرض زر الأشخاص قائمة بالمستخدمين الموجودين حاليًا في غرفة الدردشة ، وقد قرأت فكرة عرض الشريحة لعرض المزيد من عناصر الميزات (مثل تطبيق Twitter) للسماح للمستخدم بمشاهدة الملف الشخصي للمستخدم أو الإبلاغ عنه.
مع هذا ، حان الوقت للانتقال إلى وضع شيء ما معاً في Photoshop!
الخطوة 1: الحالة وشريط التنقل
قبل المضي قدمًا في هذه الخطوة ، نحتاج إلى إنشاء مستندنا. يبلغ حجم شاشة iPhone القياسية (في دقة شبكية العين) 640px و 960px عالية بدقة 326ppi. أميل دائماً إلى البدء بخلفية بيضاء في تصاميمي.
الخطوة الأولى هي وضع شريط حالة iOS الافتراضي. شريط الحالة هو الشريط الموجود أعلى جهاز iPhone الخاص بك والذي يخبرك بالمعلومات الهامة مثل الإشارة والناقل والوقت وعمر البطارية. هناك ثلاثة خيارات هنا: شريط أسود ، شريط أسود منخفض الشفافية أو شريط الفضة.
إذا كنت ترغب في جعل تصميم تطبيقك يبدو وكأنه صفقة حقيقية ، فيمكنك الاستيلاء على شريط الحالة من مجموعة Retina iPhone GUI PSD وجدت هنا . ما عليك سوى تنزيل وفتح PSD ، وسحب الشريط الذي تريده إلى مستند PSD الخاص بك. ضعه في أعلى اللوحة القماشية.
شريط التنقل هو التالي في قائمة المهام الخاصة بنا. يبلغ شريط التنقل القياسي 86 بكسل ، ويمتد العرض الكامل لجهاز iPhone الخاص بك (640 بكسل). مرة أخرى ، يمكنك سحب هذا العنصر من مجموعة PSD المذكورة أعلاه ، أو يمكنك إنشاء هذا يدوياً (الخيار المفضل الخاص بي حيث لا توجد أنماط مرفقة). حدد أداة Rectangle Shape Tool وضع مستطيل 640 x 86px على اللوحة القماشية.
الخطوة 2: أزرار شريط التنقل
بالإشارة إلى الأطر الزمنية لدينا ، لدينا اثنين من الأزرار على شريط التنقل الخاص بنا. حدد أداة Rounded Rectangle Shape (تذكر أن تستخدم دائمًا أدوات الشكل للأشكال في تصميم واجهة المستخدم ، مما يجعل من السهل جدًا قياس حجم المستند بدقة أقل!). لقد استخدمت الأبعاد 100 × 50 بكسل مع نصف قطر في الزاوية يبلغ 6 بكسل.
ضع هذا الشكل على جانبي اليمين واليسار لشريط التنقل الخاص بك ، وضعهما بشكل جيد.
الخطوة 3: اختيار النمط
لقد حان الوقت للبدء في اختيار أسلوب التصميم لدينا. سيسمح هذا التطبيق للأشخاص بالدردشة والتعرف على أشخاص جدد ، والسماح للأشخاص بالاستمتاع بالقيام بذلك. لهذا السبب ، أشعر بأن نظام الألوان الغريب المرح والطباعة هنا مهم للمساعدة في الوصول إلى هذه النقطة.
حدد أداة الكتابة واختر محرفًا يطابق الصورة الموجودة في رأسك. اخترت الشمبانيا Arial Rounded MT Bold . اكتب اسم الموضوع الخاص بك (اخترت "تصميم واجهة المستخدم") وجعله محوريًا في شريط التنقل الخاص بك.
بالاستمرار في الموضوع الممتع الذي اخترناه للتطبيق ، حان الوقت لاختيار بعض الألوان. أنا شخصيا استخدم عشاق اللون للمساعدة في إلهام اختياراتي للألوان عندما أقوم بالتصميم. في هذه الحالة بالذات ، بحثت عن "متعة" وفي غضون ثوانٍ ، عرضت علي الكثير من الخيارات المختلفة واللوحات الملهمة لاستخدامها كقاعدة لتصميمي.
انتهى بي الأمر اختيار واحد يسمى اللعب . من المهم أن تفكر في الألوان التي ستحتاجها عند اختيار لوحة الألوان ؛ أجد التقاط شيء خفيف ، شيء مظلمة ، وشيء مشرق هو دائما نقطة انطلاق جيدة. من المهم أن يكون لديك تباين جيد في التصميم الخاص بك.
الخطوة 4: تصميم شريط التنقل
سننتقل الآن إلى شريط التنقل ونعطيه اللون الذي يستحقه. حدد طبقة شريط التنقل (آمل أن تكون طبقاتك منظمة!) ، انقر بزر الماوس الأيمن واختر خيارات المزج. هذا هو منزل أقوى أدوات Photoshop عندما يتعلق الأمر بتصميم تصميمات مثالية للبيكسل. من هنا ، يمكنك إضافة الظلال والتدرجات والأنماط والستر ، مع إمكانية نسخ ولصق هذه الأنماط على طبقات أخرى.
بادئ ذي بدء ، سنضيف تدرجًا إلى شريطنا ، لذا انقر على تراكب التدرج. لقد حددت اللون الفيروزي كالذي أريد استخدامه لشريط التنقل الخاص بي. إنه ساطع ويحزم لكمة قوية ، وسيجعل تصميمنا سهل التذكر. تطبيق التدرج زاوية 90 درجة من الضوء (أعلى) إلى الظلام (أسفل).
انقر الآن على لوحة Stroke. تغيير حجم الحد إلى 2 بدلاً من القيمة الافتراضية 3. من المفترض أن تحاول دائمًا تجنب الأرقام الفردية في تصميم واجهة المستخدم ، خاصةً على أجهزة الجوال. سيؤدي ذلك إلى المزيد من العمل لكل من المصمم والمطور عندما يتعلق الأمر بتطوير العمل (لا يمكنك العثور على نصف 3 بكسل كنصف بكسل!).
غيّر نوع تعبئة حدتك إلى التدرج اللوني ، وتأكد من ظهور الحد على شكل الشكل الخارجي. اختر لونًا فيروسيًا داكنًا لأسفل دكتاتورك وأسود للأعلى. نظرًا لأن الحد يقع على الجزء الخارجي من شريط التنقل ، فإن الجزء الأسود من الحد لن يظهر أعلى شريط الحالة ، وبالتالي سيكون جميع المستخدمين قادرين على رؤية الحد في أسفله.
حدد لوحة Inner Shadow وقم بتطبيق ظل أبيض عتامة 15٪ على شريطك. سيظهر هذا في أعلى الشريط ، وسيعطيها تمييزًا رائعًا ، مما يجعلها تظهر أكثر ثلاثية الأبعاد. لقد أعطيت ظلك مسافة 2 بكسل وحجم 3 بكسل.
الآن حان الوقت لجعل شريط التنقل الخاص بنا يبرز. باستخدام أنماط ، يمكننا إضافة الكثير من العمق لتصميمنا. أستخدم نمط شبكة بيضاء على شريط التنقل الخاص بي. إذا كنت ترغب في استخدام هذا النمط ، فيمكنك تنزيل مجموعة منها مجانًا Premium Pixels .
الخطوة 5: التظليل الطباعة
لإضفاء بعض العمق على الطباعة ، افتح لوحة خيارات المزج وقم بتطبيق ظل مسقط. غيّر الزاوية إلى -90 (تأكد من عدم تحديد "استخدام النمط العالمي" هنا وإلا سيتم تغيير جميع الظلال في التصميم إلى -90) واستخدام نفس اللون الذي استخدمته في أسفل شريط أعمدة التنقل. امنح الظل مسافة 2 بكسل وأفلت الحجم إلى 0 بكسل. هذا يعطي ظلال قطرة نظيفة فوق النص الخاص بك على الفور مما يجعلها أكثر إثارة للاهتمام.
الخطوة 6: تصميم زر شريط التنقل
سنقوم الآن بتطبيق بعض الأنماط الرائعة على أزرار أشرطة التنقل الخاصة بنا. نرغب في ربط هذه الأزرار بشكل جيد مع شريط التنقل الخاص بنا ، ولكن في الوقت نفسه يجب أن تبرز بشكل جيد بما فيه الكفاية حتى يتعرف المستخدم على الفور على أنها أزرار. للقيام بذلك ، سنستخدم المزيد من أنماط الطبقات لمنحهم تأثيرًا ثلاثي الأبعاد.
افتح لوحة خيارات المزج وانقر على تراكب الانحدار. امنح الزر الخاص بك الضوء (الأعلى) إلى التدرج الداكن (السفلي) باستخدام ألوان من شريط التنقل الخاص بك. تم تحديد اللون الفاتح من إبراز شريط التنقل الخاص بي ، وتم تحديد اللون الغامق من الحد السفلي لشريط التنقل.
حدد لوحة الحد وتغيير حجم الحد إلى 2 بكسل ، مع وضع خارجي. غيّر نوع التعبئة إلى التدرج والزاوية إلى 90 درجة. تغيير ألوان التدرج من الضوء (أعلى) إلى الظلام (أسفل) ، مستندة الألوان على الألوان المستخدمة بالفعل لشريط التنقل والأزرار. على الفور ، يمكنك أن ترى أن هذه السكتة الدماغية تمنح الزر مظهراً ثلاثي الأبعاد ، كما لو كان يخرج من شريط التنقل بدلاً من الجلوس فوقه.
لتنسيق الزر أكثر قليلاً وجعله أكثر جاذبية بصريًا ، سنضيف توهجًا داخليًا إلى الزر. انقر على لوحة التوهج الداخلي وقم بتغيير وضع المزج إلى شاشة. أسقط العتامة إلى 20٪ وتأكد من ضبط الضوضاء على 0٪. غيّر التوهج الأصفر الافتراضي إلى اللون الأبيض وتأكد من أنه قد تم تعيين الحجم على الإعداد الافتراضي 5px. يجب أن يمنح هذا الزر توهجًا داخليًا لطيفًا ، مما يجعل الزر يبدو ملموسًا حقًا!
سنضيف الآن ظلًا داخليًا لجعل زرنا أكثر واقعية. غيّر مستوى الشفافية إلى 15٪ وحدد اللون الأسود باللون. أسقط المسافة إلى 2 بكسل والحجم إلى 4 بكسل. غيّر الزاوية الآن إلى -90 درجة (تأكد من عدم تحديد Use Global Light). هذا يعطي الجزء السفلي من الزر ظلًا طفيفًا ، يخفي بعضًا من التوهج الداخلي السفلي الذي قمنا بتطبيقه. في الحياة الواقعية ، ستكون هذه المنطقة مظللة لذا كان من المهم إخفاء التوهج الداخلي هنا.
لإنهاء تصميم زرنا ، سنقوم بإضافة الظل المسقط. حدد لوحة الظل المسقطة وقم بتغيير اللون إلى اللون الأبيض مع عتامة 25٪. هذا الظل سيكون بمثابة تسليط الضوء تحت السكتة الدماغية لدينا ، لذلك تغيير المسافة إلى 4px (2px لتغطية منطقة السكتة الدماغية ، و 2px الذي سيظهر تحت السكتة الدماغية).
الخطوة 7: تسميات الأزرار
إن زرًا بدون تصنيفها لا معنى له ، لذا سنقضي قليلاً من الوقت لإنهاء الأزرار. أولاً وقبل كل شيء ، انقر بزر الماوس الأيمن على زر النص الخاص بك وحدد خيار Copy Layer Style. الآن انقر بزر الماوس الأيمن على زر un-styled وحدد خيار Paste Layer Style.
سنستمر في العمل على الزر الأيمن أولاً. سيتم تسمية هذا الزر باسم "الأشخاص" ونريد استخدام رمز أكثر من 2+ أشخاص. من أجل هذا البرنامج التعليمي ، سأستخدم الرموز التي تم تصميمها بواسطة استوديو Yummygum الإبداعي. يمكنك العثور على حزمة اعتدت في IconSweets.com - سأكون باستخدام الرموز من هذه الحزمة طوال البرنامج التعليمي.
باستخدام نفس الخط الذي استخدمته لعنوان شريط التنقل ، اكتب تسمية أزرارك. قم بتغيير حجمها ووضعها على الزر الخاص بك ، ثم ضع الرمز الذي تختاره (أو ضعه بنفسك) في المستند الخاص بك. ضع هاتين الطبقتين بالتساوي على الزر الخاص بك. لقد أوقفت طبقاتي بحيث يكون هناك 15 بكسل لكلٍّ من الجانبين والزر ، و 10 بكسل بين الرمز والنص. الصق نمط الطبقة من نص موضوع شريط التنقل على كلٍّ من رمزك وتسمية الزر. إذا كنت بحاجة إلى تغيير حجم طول الزر ، فاستخدم أداة التحديد المباشر لتحديد نقاط الربط الأربعة على اليمين ، ثم اسحب. يمكنك الضغط باستمرار على مفتاح shift لإبقاء هذا التعديل مستقيماً.
كرر هذه العملية باستخدام الزر الموجود على يسار شريط التنقل الخاص بك ، هذه المرة باستخدام رمز متقاطع وكلمة "إغلاق". لإضافة مزيد من التصميم لأزراري ، خفضت تعتيم شكلي الخلفية إلى 95٪ ، وهذا يسمح بقليل من نمط الشبكة أسفله للتألق.
الخطوة 8: شريط حقل النص
حان الوقت الآن لإيلاء بعض الاهتمام لبقية الشاشة. الاستيلاء على أداة الشكل المستطيل واستخدام نفس الأبعاد لشريط التنقل الخاص بنا (640 × 86 بكسل) وضع شكل على اللوحة القماشية الخاصة بك. ضعه في أسفل الشاشة.
الخطوة 9: الخلفية
نحن الآن بصدد العمل على خلفية تصميمنا. افتح لوحة خيارات المزج لطبقة الخلفية الخاصة بك واختر نمطًا لملئها. استخدمت نموذجًا داكنًا مع خطوط عمودية تمر منه أنماط دقيقة - يمكنك تنزيل مجموعة الأنماط الكاملة هنا والتي أوصي بها بشدة.
إذا كنت ترغب في إضافة بعض الألوان الخاصة بك إلى النمط الذي اخترته ، فيمكنك القيام بذلك باستخدام نمط تراكب الألوان. قمت بتطبيق لون بني (من لوح الألوان الذي اخترته سابقًا) بنسبة 35٪. هذه العتامة منخفضة بما يكفي لكي يظهر النسيج / النمط الخاص بك من خلال درجة عالية بما يكفي لتلوين اللون أو خلفيتك.
الآن لدينا خلفية داكنة ، سترى النقطة التي يلتقي فيها شريط التنقل الخاص بنا مع صورة الخلفية الخاصة بنا لا تبدو جيدة تمامًا. يمكنك إصلاح هذا بسهولة عن طريق تطبيق نمط ظل على شريط التنقل الخاص بك ، والذي سيجعله يبدو كما لو كان أعلى خلفيتك.
أعد فتح لوحة خيارات المزج لشريط التنقل الخاص بك وحدد لوحة الظل المسقط. تأكد من تحديد اللون الأسود وتغيير العتامة إلى 25٪. قم بزيادة المسافة إلى 6 بكسل والحجم إلى 10 بكسل ، وانقر فوق موافق. قد تحتاج إلى تجربة هذه الخيارات لأن النتائج ستختلف بناءً على لون ونوع النسيج / النمط الذي حددته لخلفيتك.
الخطوة 10: الرسائل
الآن وبعد أن استكملنا الخلفية وشريط التنقل العلوي ، سنركز على الحصول على المحتوى الرئيسي للتطبيق. حدد أداة Shape Rectangle Shape وضع مستطيل على اللوحة القماشية. كان العرض الذي استخدمته 600 بكسل ، مما يسمح بعرض 20 بكسل على كل جانب من جوانب الشكل. لقد استخدمت نسخة أخف من اللون الأصفر / creme من لوحة الألوان التي اخترتها سابقًا.
حدد أداة Rounded Rectangle Shape وتغيير الأبعاد إلى 80 x 80 بكسل ، والنصف الجغرافي إلى 6 بكسل. ضع الشكل (الذي سيتم استخدامه كصورة أفاتار) على اللوحة القماشية وضعه بشكل صحيح. للحفاظ على اتساق تصميمي ، سمحت بوضع 20 بيكسل بين حواف شكل خلفية رسالتي وشكل أفاتاري.
باستخدام أداة النص ، اكتب اسمك ورسالة ؛ لقد استخدمت Arial Rounded MT Bold لاسمي و Arial العادي لنص رسالتي - قم بتنسيق النص الخاص بك بحيث يتلاءم بشكل جيد مع مربع خلفية رسالتك.
سنضيف الآن بعض الأسلوب لرسالتنا باستخدام اللون فقط ؛ لقد غيرت لون اسمي إلى اللون الفيروزي الغامق (قريب جداً من اللون الأسود) وفيروزاً مستوحى من شريط التنقل الخاص بي.
بعد ذلك قمت بإدخال صورة لنفسي بالانتقال إلى File> Place. بمجرد إدخالها ، قمت بتغيير حجم الصورة ووضعتها فوق مربع الصورة الرمزية الأسود الذي أنشأناه سابقًا. لحفظ قطع الصورة ، وأيضاً لمنحك خيار نقل أو تغيير حجم الصورة الرمزية الخاصة بك في وقت لاحق ، انقر بزر الماوس الأيمن عليها وحدد الخيار Create Clipping Mask. سيؤدي هذا إلى ربط صورتك الرمزية بالصورة السوداء للصورة الرمزية وسيعرض فقط ما هو فوق الصندوق الأسود. ستجد باستخدام أداة التحريك التي لا يزال بإمكانك نقلها وتغيير حجمها.
باستخدام رمز IconSweets آخر ، قمت بإنشاء طابع زمني صغير وجميل. اضطررت إلى تقليل حجم الرمز الخاص بي - يمكنك القيام بذلك عن طريق الانتقال إلى Edit> Transform> Free Transform وتغيير الأبعاد (إما بالبكسل أو النسبة المئوية). لقد استخدمت 70 ٪ في كل من العرض والارتفاع للحفاظ على النسب. أضفت بعض النص ، و voila. تأكد من اختيار لون سهل القراءة لكنه لا يصرخ لاهتمامك.
الخطوة 11: رسائل مكررة
قم بتكرار مربعات الرسائل الخاصة بك أسفل بعضها البعض ، مع ترك فجوة 2px بين كل مربع للخلفية. يمكنك القيام بذلك إما بالنقر أو سحب طبقاتك فوق رمز طبقة جديدة ، أو بدلاً من ذلك يمكنك الضغط على Cmd + Shift + Down Arrow في نفس الوقت لتكرار وتدوير الطبقات لأسفل.
غيّر كل المحتوى في مربعات الرسائل ، كما لو كانت محادثة حقيقية. إذا كنت بحاجة إلى تغيير حجم مربعات الخلفية ، فاستخدم أداة التحديد المباشر وقم بتغيير حجمها باستخدام نقاط الربط. هذا يحافظ على جميع الحواف لطيفة وحادة.
الخطوة 12: تصميم الرسالة
مع القيام بذلك ، يمكننا الآن التركيز على إحضار مربعات رسائلنا إلى الحياة. افتح لوحة خيارات المزج وحدد لوحة الظل المسقط. قم بتغيير وضع المزج إلى الوضع العادي ، واختر اللون الأبيض. زيادة الشفافية إلى 80٪ بدلاً من 75٪ القياسية وإعطاء الظل مسافة 2 بكسل. سيؤدي هذا إلى إخفاء الفجوة 2px التي تركناها بين كل من خلفيات مربع الرسالة.
انسخ نمط الطبقة أعلاه والصقه في كل طبقات خلفية مربع الرسالة. يجب أن ينتهي الأمر مع شيء مثل أعلاه.
الخطوة 13: إضافة زوايا دائرية
لجعل تصميمنا أكثر إثارة للاهتمام ، وأيضا لإضافة المزيد من العمق ، سنقوم بإضافة زوايا مستديرة إلى أسفل رسالتنا وجعلها تظهر كما لو كانت ورقة مكدسة على المزيد من الورق.
حدد أداة Rounded Rectangle Tool واعطها نصف قطر 10px. تغيير العرض إلى 600 بكسل (أو أي عرض استخدمته لخلفيات مربع الرسالة) وارتفاع لا يتجاوز ارتفاع خلفية مربع الرسالة. لقد استخدمت لونًا مشرقًا هنا بحيث يمكن رؤيته بسهولة.
باستخدام أداة التحديد المباشر ، حدد محتويات طبقة شكل المتجه (المربع المستدير الذي قمنا برسمه فقط) وانتقل إلى تحرير> نسخ. انقر فوق طبقة شكل الموجه لخلفية مربع الرسالة السفلي وانتقل إلى تحرير> لصق. سيؤدي ذلك إلى لصق محتويات طبقة الشكل على طبقة الشكل الأخرى. يمكنك الآن حذف الشكل الذي رسمناه في الخطوة السابقة. يجب أن ترى الشكل ظاهرًا.
افتح خيارات المزج لخلفية مربع الرسالة السفلى وقم بتطبيق ظل مسقط. غيّر اللون إلى اللون الأسود ، والعتامة إلى 25٪ ، والمسافة إلى 1 بكسل والحجم إلى 3 بكسل. هذا سيخلق ظلال قطرة لطيفة لطيفة.
كرر هذه الطبقة وحركها لأسفل بمقدار 5 بكسل. قم بإعادة وضع الطبقة بحيث توضع تحت الأصل. يجب أن ينتهي الأمر مع شيء مماثل ل أدناه. كما ترى ، هذه طريقة بسيطة لإنشاء مظهر ورق متداخل.
كرر الخطوة مرة أخرى بحيث يكون لديك ثلاث قطع من الورق بدلاً من اثنين فقط. قد ترغب في إعطاء الجزء السفلي من الورقة ظلال قطرة أكثر وضوحًا بشكل طفيف.
الخطوة 14: ظل شريط التنقل
ربما لاحظت أنه أثناء تصميم مربعات الرسائل الخاصة بنا ، أخفينا معظم الظل المسقط الذي كان يلقي شريط التنقل لدينا على خلفيتنا. لاستبدال هذا ، يمكنك إما وضع رسائلك أسفل شريط التنقل (الخيار السهل ولكن غير الواقعي) أو إكمال الخطوة التالية.
حدد أداة Marquee مستطيلًا وارسم خطًا نحيفًا أعلى رسائلك المشابهة لما سبق. املأها باللون الأسود على طبقة جديدة.
انتقل إلى الفلتر> Blur> Gaussian Blur وتطبيق التعتيم. سيعمل هذا الآن كظل - فقط قطع أي أجزاء من التمويه التي تتداخل مع حواف خلفية مربع الرسالة.
الخطوة 15: أزرار الملف الشخصي والتقرير
بالإشارة إلى الأطر الزمنية ، قررنا السماح للمستخدمين بتمرير رسالة إلى اليسار لكشف المزيد من الأزرار. في هذه الحالة ، تسمح هذه الأزرار للمستخدم بمشاهدة ملف تعريف رسائل الرسائل ، أو الإبلاغ عن ملصق الرسالة.
حدد الطبقات التي تشكل إحدى رسائلك (اخترت رسالة هومر سمبسنز) واستخدم مفتاح shift ومفاتيح الأسهم ، وحرك رسالة 10px في وقت إلى اليسار. باستخدام أداة النص ، اكتب تصنيفاتك ، ثم حدد بعض الرموز لتتوافق مع تلك التصنيفات. اخترت شخصًا فرديًا للملف الشخصي ، وهدفًا للتقرير (كما لو كنت تقوم بإطلاق النار عليهم - اعتقدت أن هذا كان ممتعًا تمامًا!).
لإضفاء مزيد من العمق على هذه المنطقة ، أضفت ظلالًا سوداء إلى كل من الرموز والنص.
الخطوة 16: شريط حقل النص
يعد شريط حقل النص أحد أهم العناصر على هذه الشاشة. يحتاج المستخدمون إلى أن يكونوا قادرين على إدخال رسائلهم بكل سهولة ودون إرباك (وهذا هو السبب في إزالة زر الإرسال المخفي في المفاهيم الأولية المرسومة).
للبدء ، حدد طبقة الخلفية ونسخ أنماط الطبقة. قم بلصق أنماط الطبقة هذه على طبقة شريط حقل النص التي أنشأناها مسبقًا. افتح خيارات المزج لهذه الطبقة وحدد لوحة الحد. ضع حدًا بطول 2 بكسل على الجزء الخارجي من الشكل باستخدام اللون الأسود المتناسق بلونك. عندما تكون السكتة الدماغية في الخارج ، والشكل يلامس ثلاثة حواف من قماشك ، ستظهر فقط شوطًا أعلى الشكل.
حدد الآن علامة التبويب "ظل داخلي" وقم بتغيير وضع المزج إلى الوضع العادي ، وإلى اللون الأبيض ، والتعتيم إلى 10٪ والمسافة إلى 2 بكسل. تأكد من تعيين الزاوية إلى الافتراضي ضوء العام (90 درجة) وانقر فوق موافق. هذا يعطينا تسليط الضوء على لطيفة تحت السكتة الدماغية السوداء لدينا. مع تطبيق هذين الخطين البسيطين (2px) ، يبدو شريط مجال النص الخاص بنا منفصلاً بشكل جيد عن باقي الخلفية ، على الرغم من أنه يحتوي على نفس الخلفية!
حدد أداة Rounded Rectangle Tool. قم بمنح أداتك نصف قطر عالي ، لقد استخدمت 50 بكسل ؛ هذا سوف يعطيه نهايات مستديرة (دائرية). ضع شكلاً على شريطك ، لقد استخدمت 460 × 54 بكسل كأبعاد. تأكد من أن الجانب الأيسر لشكل حقل النص الخاص بك هو 20 بكسل بعيداً عن الجانب الأيسر من اللوحة للحفاظ على تباعد التصميم.
املأ الشكل بلون داكن (استخدمت لونًا بنيًا محددًا من بكسل داكن في الخلفية) ثم افتح لوحة أنماط الطبقة. تطبيق ظل قطرة بيضاء 2px على حقل النص الخاص بك مع عتامة 10٪.
انقر فوق لوحة الظل الداخلية وقم بتطبيق ظل داخلي على شكل حقل النص الخاص بك. هذا سيعطيه الكثير من العمق ويجعله يبدو كما لو أنه مقطوع إلى خلفية القضبان. استخدم اللون الأسود مع وضع المزج المضاعف و عتامة 25٪. لقد استخدمت 5px كمسافة بلدي و 10 بكسل كحجم ، على الرغم من أنك قد ترغب في تجربة هنا.
باستخدام أداة النص ومجهزة Arial Rounded MT Bold ، اكتب "كتابة تعليق ..." وقم بوضعه في مربع حقل النص الخاص بك. افتح خيارات المزج لطبقة النص الجديدة الخاصة بك وقم بتطبيق ظل أسود باهت مع عتامة 75٪ ومسافة 2 بكسل وحجم 3 بيكسل.
الخطوة 17: زر حقل النص
قم بإعادة تحديد أداة الشكل المستطيل Rounded Rectangle Shape وباستخدام نفس إعدادات نصف القطر والارتفاع الذي استخدمناه سابقًا ، ضع شكلاً على خلفية شريط حقل النص. تغيير حجم طول الزر بحيث يجلس 10 بكسل من الحقل النصي و 20 بكسل من الحافة اليمنى للقماش.
انقر بزر الماوس الأيمن على طبقة شكل الزر الجديد وحدد خيارات المزج. حدد لوحة تراكب التدرج وقم بتطبيق تدرج من الضوء (أعلى) إلى الظلام (أسفل). لقد استخدمت اللون الأصفر الرائع الذي كان في لوحة الألوان التي اخترتها في وقت سابق.
للحفاظ على اتساق التصميم لدينا ، سأقوم بتطبيق ضربة على الزر الذي يجعلها تبدو كما لو كانت تخرج من الخلفية ، مثلما فعلنا مع الأزرار الموجودة في شريط التنقل. في هذه المرة كنت أستخدم اللون الأسود الصلب بدلاً من السكتة الدماغية المتدرجة حيث أن الخلفية أكثر قتامة ولا تمتلئ بتدرج. اعتدت على ضربة 2px في داخل شكلي مع عتامة 100 ٪.
حدد أداة النص واكتب "إرسال" على الزر الخاص بك. افتح خيارات المزج لطبقة النص الجديدة وقم بتطبيق ظل قطرة بني على النص الخاص بك بمسافة 1 بكسل وحجم 3 بيكسل.
وبهذا انتهينا جميعًا! نود أن نرى نتائجك ، لذا لا تتردد في نشرها في قسم التعليقات أدناه. إذا كنت ترغب في رؤية التصميم بدقة كاملة ، يمكنك أن ترى ذلك هنا .