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

تصميم واجهة موقع التجارة الإلكترونية النظيفة في Photoshop

by
Difficulty:BeginnerLength:LongLanguages:

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

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


متجر الأزياء ، الهدية الترويجية

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


رسم فكرتك

حافظ على الرسومات الخاصة بك فضفاضة وخشنة.

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

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

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

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

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

قراءة متعمقة:


إنشاء wireframe الرمادي

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

في ما يلي كيفية ظهور الإطار السلكي النهائي الرمادي:


التنسيق: التركيب

قبل أن نبدأ العمل على إطار العمل السلكي لدينا في Adobe Photoshop ، لدينا بعض القرارات التي يجب اتخاذها.

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


التخطيط: الشبكة

إن استخدام الشبكة يجعل من الأسهل بكثير محاذاة عناصرنا وتحديد حجمها. في هذا التصميم ، سنستخدم شبكة Baseline Grid التي أنشأتها اللاعبين الرائعين في Teehan+Lax. انها شبكة خط الأساس 6px إلى جانب نظام الشبكة 960.

قراءة متعمقة:

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


تخطيط: فضاء أبيض

الأبيض أو الفراغ السالب هو المسافة الفاصلة بين العناصر في واجهتنا. يسمى الفراغ بين العناصر الرئيسية Macro White Space. Micro White Space هي المساحة البيضاء بين عناصر مثل عناصر القائمة ، والمسافة بين التسمية التوضيحية والصورة ، أو المسافة بين الكلمات والحروف.

تساعد White Space في تحديد العلامات التجارية ، وعادةً ما يستخدم المصممون White Space في تصاميمهم لمنحهم شعوراً بالرقي والرفاهية. لذلك يجب علينا الاهتمام بها أثناء تصميمنا.


الطباعة: الخطوط

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

قراءة متعمقة:

في واجهتنا ، سنستخدم الخطوط الثلاثة التالية: Helvetica ، وهو محرف نظيف وحديث يقول كل شيء. جورجيا ، محرف يستحضر الملوك وله نبرة خطيرة. Bebas ، وهو محرف له معنى السلطة ، وهو مثل بيان جريء ، دائمًا ما يبرز نقطة.

  • Helvetica الجديد: نسخة الجسم (الخط القياسي).
  • Helvetica الجديد: نسخة الجسم (الخط القياسي).
  • جورجيا: عناصر أخرى متجهة (الخط القياسي).

الطباعة: التسلسل الهرمي

'التسلسل الهرمي الطبوغرافي' يصف ببساطة كيف تقوم أشكال مختلفة ، وأوزان ، وأحجام خطوط الطباعة بتنظيم وثيقة.

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

  • 24px: عناوين H1.
  • 18px: عناوين H2.
  • 14px: H3 وعناوين التنقل.
  • 12 بكسل: نسخة الجسم— بقيمة أساسية 18 بكسل.

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

أما بالنسبة للأوزان ، فسأذهب من حالة رومان السفلى إلى Bold Lower Case. لا شيء معقد حقا.


الطباعة: القيادة ، التقنين  التتبع

كما سبق وقلت ، سنستخدم قيم المسافات (تباعد الأسطر) المدفوعة من الشبكة ، والتي ستكون: 18 بكسل ، و 21 بكسل.

سيكون تقنين الأحرف الخاص بنا عبارة عن مقاييس للنص الأساسي والبصرية للعناوين (انظر القراءة الإضافية). وأخيرًا ، سنستخدم قيم التعقب الافتراضية (0) لكل النص.

قراءة متعمقة:


الطباعة: مكافحة التعرج

هنا مقالة ممتازة حقا. عليك قراءة هذا واحد! لن أقول كلمة واحدة ، باستثناء أنه بالنسبة لنسخة الجسم (أحجام النقاط الصغيرة) ، سنستخدم Sharp ، وبالنسبة للعناوين (أحجام نقاط أكبر) ، سنستخدم Crisp.


الخطوة 1: إعداد المستند

الآن بعد أن اتخذنا بعض القرارات ، حان الوقت لفتح Adobe Photoshop والبدء فعليًا في إنشاء wireframe! لذا افتح مستند الشبكة الذي قمنا بتنزيله مسبقًا باسم 'grid2.psd'. أول شيء سنقوم به هو تحديد كل الطبقات الموجودة في الوثيقة — باستثناء المجلد المسمى 'علامات' —والتخلص منها ، أو تجميعها في مجلد وإخفائها في الوقت الحالي. قبل أن نذهب إلى أبعد من ذلك ، دعنا نختار مجلد ''Marks'' ثم نضغط على زر ''Lock All'' في لوحة الطبقات.

نحتاج الآن إلى تغيير ارتفاع المستند ، لأن تصميمنا النهائي أطول من المستند الموجود. لإجراء ذلك ، سنذهب إلى Image> Canvas Size ، لتغيير الارتفاع إلى 1540 بكسل والتأكد من تعيين Anchor إلى Top Center.

ثم انقر فوق View> Extras (لعرض الأدلة) ، المساطر (لعرض المساطر) و Snap (بحيث يمكن للكائنات التي سننشئها أن تنجذب إلى الأدلة).


الخطوة 2: إنشاء الخلفية

سنبدأ بخلق خلفيتنا. قم بإنشاء طبقة جديدة ، أعطها اسماً ('bg' على سبيل المثال) ، ثم امسك أداة Marquee (M) المستطيلة. قم بإنشاء تحديد على اللوحة بالكامل ، ولملئها ، انقر فوق Shift Backspace ، استخدم: اللون ... ثم املأ التحديد بقيمة اللون هذه: f5f5f3. لاحظ أن قيم اللون التي سنستخدمها في إطار العمل السلكي الرمادية ليست القيم النهائية ، ولكننا سنستخدمها لتمييز عناصر الصفحة الخاصة بنا.


الخطوة 3: إنشاء الشريط العلوي

الآن دعنا ننشئ الشريط العلوي. استعمل أداة مستطيل Marquee Tool (M) مرة أخرى ، ثم اختر مجموعة من 1260x45px ، ثم املأها بقيمة اللون هذه: 2d2d2d#.

حدد أداة الكتابة الأفقية (T) ، واكتب عناصر التنقل الخاصة بك ، ثم قم بتطبيق إعدادات الأحرف التالية عليها:

  • الخط: Helvetica New LT Std.
  • الوزن: 55 روماني.
  • الحجم: 12 بكسل.
  • تقنين المسافات: المقاييس.
  • اللون: 767676.
  • مكافحة التعرج: شارب.

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


الخطوة 4: إنشاء نموذج تسجيل الدخول

اكتب الكلمة 'تسجيل الدخول' باستخدام أداة الكتابة الأفقية (T) ، وقم بتطبيق إعدادات الأحرف التالية عليها ، وتأكد من محاذاتها مثل الصورة أدناه.

  • الخط: Helvetica New LT Std.
  • الوزن: 75 جريئة.
  • الحجم: 12 بكسل.
  • تقنين المسافات: المقاييس.
  • اللون: ffffff#.
  • مكافحة التعرج: شارب.

الآن دعونا إنشاء حقول الإدخال. باستخدام أداة Rounded Rectangle Tool (U) ، أنشئ مستطيلين دائريْن كل واحد منهما يجب أن يكون 127x26px ، مع نصف قطر 15 بكسل. املأهم بقيمة اللون هذه: 767676 وقم بمحاذاةهم مثل الصورة أدناه.

اكتب الكلمتين 'اسم المستخدم' و 'كلمة المرور' داخل الحقلين ، مع تطبيق إعدادات الأحرف التالية عليها ، ثم قم بمحاذاةها وفقًا للصورة أدناه:

  • الخط: Helvetica New LT Std.
  • الوزن: 55 روماني.
  • الحجم: 12 بكسل.
  • تقنين المسافات: المقاييس.
  • اللون: ffffff#.
  • مكافحة التعرج: شارب.

سنقوم بإنشاء زر 'Go' الخاص بنا باستخدام أداة Rounded Rectangle Tool (U) ولكن هذه المرة مستطيل 33x25px مع دائرة نصف قطرها 25 بكسل. ثم اكتب كلمة 'Go' داخله باستخدام نفس إعدادات الأحرف في الصورة السابقة ولكن غيّر وزنها إلى 75 Bold.

امسك أداة الخط (L) ، قم بإنشاء سطر 1x25px وقم بتعبئته باللون الأبيض. ثم اكتب كلمة 'تسجيل' باستخدام نفس إعدادات الأحرف الموضحة في الصورة التالية ، وقم أيضًا بمحاذاة جميع العناصر التي أنشأناها في هذه الخطوة وفقًا لها.


الخطوة 5: إنشاء مساحة إعلانية

دعونا نستخدم أداة Marquee Rectangular (M) لإنشاء مستطيل من 480x60px ، املأه بـ 767676 ، وقم بمحاذاةه كما في الصورة أدناه. يجب أن يعمل هذا كعنصر نائب لمساحة إعلانية.

ثم اعط هذه الطبقة سكتة دماغية. توضح الصورة أدناه الإعدادات التي نريدها.


الخطوة 6: إنشاء الشعار

من الناحية العملية ، لا ينبغي تصميم شعارنا هنا في Adobe Photoshop ، ولكن في الوقت الحالي سنقوم فقط بإنشاءه هنا. يمكنك الحصول على أداة Ellipse Tool (U) ، وإنشاء دائرة 60x60px ، وتعبئتها بقيمة اللون هذه: 2d2d2d ، ومحاذاةها كما هو موضح بالصورة أدناه.

اكتب الحرف 'F' باستخدام إعدادات الأحرف التالية ، ثم قم بمحاذاةه وفقًا للصورة التالية:

  • الخط: قبل Something.
  • الحجم: 53.65 بكسل.
  • اللون: ffffff#.
  • مكافحة التعرج: هش.

ثم اكتب كلمة 'أزياء' وقم بتطبيق إعدادات الأحرف التالية عليها:

  • الخط: قبل Something.
  • الحجم: 30 بكسل.
  • تقنين الأحرف: بصري.
  • اللون: 2d2d2d#.
  • مكافحة التعرج: هش.

و ''Store'' مع إعدادات الأحرف التالية:

  • الخط: جورجيا.
  • الوزن: عادي.
  • الحجم: 12 بكسل.
  • تقنين المسافات: المقاييس.
  • اللون: 767676#.
  • مكافحة التعرج: شارب.

تأكد من وضعهم على حد سواء وفقا للصورة أدناه.


الخطوة 7: إنشاء شريط التنقل

في هذه الخطوة ، سننشئ شريط التنقل الخاص بنا. امضي قدما واستخدم أداة Marquee Rectangular (M) ، أنشئ مجموعة من 940x48px ، املأها بقيمة اللون: c3c3c3# ، ووضع 20 بكسل تحت المساحة الإعلانية كما هو موضح في الصورة أدناه.

سنمضي قدما ونلتقط أداة الكتابة الأفقية (T) ، ونكتب عناوين الصفحات الفرعية الخاصة بنا باستخدام إعدادات الأحرف التالية:

  • الخط: مجاني.
  • الوزن: عادي.
  • الحجم: 14 بكسل.
  • تقنين الأحرف: بصري.
  • اللون: 2d2d2d / #ffffff#.
  • مكافحة التعرج: هش.

الآن دعونا نفصل بين العناوين التي أنشأناها للتو. باستخدام أداة الخط (U) ، قم بإنشاء خط عمودي بين كل عنوانين ، قم بتعبئته بقيمة اللون هذه: b4b4b4 ، وتأكد من ترك 20 بكسل بين كل عنوان وخط رأسي.


الخطوة 8: إنشاء القائمة المنسدلة

الآن دعونا ننشئ قائمة منسدلة ، أليس كذلك؟ انتزاع أداة مستطيلة Marquee (M) ، قم بإنشاء تحديد يملأ الفراغ بين الخطين المحيطين بكلمة 'WOMEN' وقم بتعبئته بقيمة اللون: 2d2d2d#. ثم أنشئ بعدًا آخر 340 × 147 بكسل ، ثم املأه بنفس قيمة اللون ، ثم قم بمحاذاةه حسب الصورة أدناه. هذا بمثابة خلفية لقائمة منسدلة لدينا.

اضغط على الزر (T) على لوحة المفاتيح لاختيار أداة الكتابة الأفقية (T) ، وابدأ في كتابة عناصر القائمة الفرعية ، باستخدام إعدادات الأحرف التالية:

  • الخط: Helvetica New LT Std.
  • الوزن: 55 روماني.
  • الحجم: 12 بكسل.
  • تقنين المسافات: المقاييس.
  • الرائدة: 30 بكسل.
  • اللون: 767676.
  • مكافحة التعرج: شارب.

أخيرًا ، تأكد من محاذاةهم كالصورة التالية.

ما سنفعله الآن هو إنشاء إطار لصورة (حيث سنضع صورة لامرأة فقط لإخبار المستخدم بأنك اخترت قسم 'المرأة'). يمكنك الحصول على أداة مستطيلة Marquee Tool (M) ، وإنشاء مجموعة من 139x105px ، وتعبئتها بـ 1f1f1f# ، ثم إنشاء مجموعة أخرى من 121x87px وتعبئتها بـ 767676. تأكد من محاذاة مراكز المستطيلات أفقياً ورأسياً.


الخطوة التاسعة: إنشاء شريط البحث

دعنا نتقدم وننشئ حقل إدخال لشريط البحث الخاص بنا. اسحب أداة Rounded Rectangle Tool (U) ، أنشئ مستطيلاً من 123x26 ​​بكسل ، مع نصف قطر 15 بكسل ، وقم بتعبئته باللون الأبيض. لا تنسى محاذاة كما هو موضح في الصورة أدناه.

باستخدام أداة الكتابة الأفقية الهائلة (T) ، اكتب كلمة 'بحث' داخل المستطيل الزخرفي وقم بتطبيق إعدادات الأحرف التالية عليها:

  • الخط: Helvetica New LT Std.
  • الوزن: 55 روماني.
  • الحجم: 12 بكسل.
  • تقنين المسافات: المقاييس.
  • اللون: 767676#.
  • مكافحة التعرج: شارب.

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


الخطوة 10: إنشاء شريط البحث

لنبدأ في إنشاء منطقة 'محتوى متميز'. ابدأ بإنشاء مجموعة من 640x315px باستخدام أداة Marquee Rectangular (M) ، وقم بتعبئتها باستخدام c3c3c3#.

لنقم الآن بإنشاء هذا الشريط حيث تنتقل رسالة حول المنتج المميز. اسحب أداة Marquee Rectangular Marquee Tool (M) ، أنشئ مجموعة من 480x33px ، املأها بقيمة اللون هذه: 767676# ، وقم بمحاذاةها كما هو موضح في الصورة أدناه.

حدد أداة الكتابة الأفقية (T) واكتب رسالة باستخدام إعداد الأحرف التالي:

  • الخط: Helvetica New LT Std.
  • الوزن: 55 روماني.
  • الحجم: 14 بكسل.
  • تقنين المسافات: المقاييس.
  • اللون: ffffff#.
  • مكافحة التعرج: شارب.

لا تنسى محاذاة النص والخلفية كما هو موضح.

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

  • الخط: جورجيا.
  • الوزن: جريئة.
  • الحجم: 18px.
  • المسافة بين الحروف: بصري.
  • اللون: #2d2d2d.
  • الصقل: هش.

ثم اكتب كلمة "الصيف" باستخدام إعدادات الأحرف التالية:

  • الخط: جورجيا.
  • الوزن: جريئة.
  • الحجم: 48px.
  • المسافة بين الحروف: بصري.
  • اللون:ffffff#.
  • الصقل: هش.

وأخيراً كتابة "مساعدتك تبدو باردة" مع الإعدادات التالية الحرف المطبق عليه:

  • الخط: Helvetica Neue الملازم الأمراض المنقولة جنسياً.
  • الوزن: 55 الروم.
  • الحجم: 18px.
  • المسافة بين الحروف: بصري.
  • اللون: #2d2d2d.
  • الصقل: هش.

تأكد من محاذاة النص كما هو موضح في الصورة أدناه.


الخطوة 11: إنشاء العلامة البيع

الآن دعنا إنشاء علامة البيع لدينا. استخدام أداة القطع الناقص (يو) لإنشاء دائرة 80x80px، وملء مع هذه القيمة اللون: #2d2d2d، ثم ضعه كما هو موضح في الصورة أدناه.

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

  • الخط: جورجيا.
  • الوزن: العادية/جريئة.
  • الحجم: 48px/14px.
  • المسافة بين الحروف: المقاييس.
  • اللون: #ffffff.
  • الصقل: هش.

الخطوة 12: إنشاء منطقة المحتوى الرئيسي

دعونا نذهب إلى الأمام وبدء إنشاء لدينا مجال المحتوى الرئيسي. سوف نبدأ مع العنوان، حتى الاستيلاء على أداة نوع أفقي (T)، اكتب عنواناً، وتطبيق إعدادات الأحرف التالية عليه:

  • الخط: بيباس.
  • الوزن: العادية.
  • الحجم: 24px.
  • المسافة بين الحروف: بصري.
  • اللون: #2d2d2d.
  • الصقل: هش.

لا تنسى أن وضعه 20px تحت منطقة محتوى الموصى بها.

مع أفقية نوع أداة (T) لا يزال محددة، اكتب وصفاً سريعاً لهذا العنوان، باستخدام إعدادات الأحرف التالية:

  • الخط: Helvetica Neue الملازم الأمراض المنقولة جنسياً.
  • الوزن: 55 الروم.
  • الحجم: 12px.
  • المسافة بين الحروف: المقاييس.
  • اللون: #767676.
  • الصقل: حادة.

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

باستخدام أداة الخط (U)، إنشاء خط 640px واسعة ولون لها مع هذه القيمة: #e5e5e5.


الخطوة 13: إنشاء صور المنتج

الاستيلاء على أداة التحديد المستطيل (M)، وإنشاء مجموعة مختارة 200x152px، وملء مع #2d2d2d ومحاذاته 20px أسفل السطر قمنا بإنشائها فقط.

إنشاء علامة بيع أخرى مثل واحد نحن بإنشائه في الخطوة 11، ولكن هذه المرة جعل 45x45px الدائرة وملء مع الأبيض. وينبغي أن يكون النص 24px/14px ومليئة #767676.

استخدام أداة نوع أفقي (T) لكتابة الاسم وسعر المنتج باستخدام إعدادات الأحرف التالية:

  • الخط: Helvetica Neue الملازم الأمراض المنقولة جنسياً.
  • الوزن: 55 الروم.
  • الحجم: 12px.
  • الرائدة: 21px.
  • المسافة بين الحروف: المقاييس.
  • اللون: #767676/#000000.
  • الصقل: حادة.

ونحن سوف ملء هذه المساحة الفارغة بين النص مع رمز--في حال كنت أتساءل.

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

إذا كان الرمز ملونًا ، فانتقل إلى Layer> New Adjustment Layer> Black & White ... لجعله تدرج الرمادي.

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


الخطوة 14: إنشاء لافتة كبيرة في الشريط الجانبي

الآن دعونا نعمل على موقعنا في الشريط الجانبي. سوف نبدأ مع لافتة كبيرة، وحتى انتزاع أداة المستطيل (U)، وإنشاء مستطيل 280x314px وملء مع #2d2d2d. باستخدام أداة تحديد إنشاء مستطيل آخر من 280x41px، وملء مع #767676، ثم محاذاة كل منهما كما هو مبين في الصورة أدناه.

باستخدام أداة نوع أفقي (T)، اكتب عنواناً لهذا الشعار باستخدام إعدادات الأحرف التالية:

  • الخط: بيباس
  • الوزن: العادية.
  • الحجم: 18px.
  • المسافة بين الحروف: بصري.
  • اللون: #ffffff.
  • الصقل: هش.

اضغط على مفتاح (U) تحديد أداة القطع الناقص (U) وإنشاء دائرة هو 210x210px، وملء مع #7676767 ومحاولة محاذاته إلى حد ما كما هو الحال في الصورة أدناه.

الآن من أجل التخلص من الجزء من الدائرة التي يخرج من خلفية لافتة، تفتح لوحة الطبقات، وضع طبقة الدائرة ("tag_bg") مباشرة فوق طبقة الخلفية شعار ("box_bg")، ثم انقر فوق الحق في الطبقة في الدائرة > "إنشاء قناع القطع".

الآن باستخدام أداة نوع أفقي (T)، اكتب بعض النص داخل هذه الدائرة، باستخدام إعدادات الأحرف التالية:

  • الخط: جورجيا
  • الوزن: العادية.
  • الحجم: 18px/14px/24px/30px.
  • المسافة بين الحروف: بصري.
  • اللون: #ffffff.
  • الصقل: هش.

أيضا تأكد من تحديد "أسود زائف" في لوحة الحرف.


الخطوة 15: إنشاء شعار الشريط جانبي أصغر

الاستيلاء على أداة المستطيل (U) وإنشاء مستطيل 280x144px، وملء مع #2d2d2d، ووضعه وفقا للصورة أدناه.

الآن دعنا إنشاء الزر "معرفة المزيد". استخدم أداة التحديد المستطيل (م) لإنشاء مجموعة مختارة 120x30px وملء مع #767676.

ثم الاستيلاء على أداة نوع أفقي (T)، اكتب "معرفة المزيد" داخل المستطيل باستخدام إعدادات الأحرف التالية:

  • الخط: Helvetica Neue الملازم الأمراض المنقولة جنسياً.
  • الوزن: 55 الروم.
  • الحجم: 18px.
  • المسافة بين الحروف: بصري.
  • اللون: #ffffff.
  • الصقل: هش.

مع أفقية نوع أداة (T) لا يزال محددة، اكتب بعض النص كما في الصورة أدناه باستخدام إعدادات الأحرف التالية:

  • الخط: Helvetica Neue الملازم الأمراض المنقولة جنسياً.
  • الوزن: 55 الروم.
  • الحجم: 14px/24px/18px.
  • الرائدة: 24px.
  • المسافة بين الحروف: بصري.
  • اللون: #ffffff.
  • الصقل: هش.

الصورة أدناه يوضح لك كيفية محاذاة النص.

قم بإنشاء نسخة من هذا الشعار وترك 20px المسافة العمودية بينهما.


الخطوة 16: إنشاء القسم "تحديثات تويتر"

إنشاء مجموعة مختارة 280x235px باستخدام أداة التحديد المستطيل (M) وملء مع الأبيض ووضعه 20px تحت الراية.

الاستيلاء على أداة نوع أفقي (T)، واكتب عنوان باستخدام إعدادات الأحرف التالية:

  • الخط: بيباس.
  • الوزن: العادية.
  • الحجم: 18px.
  • المسافة بين الحروف: بصري.
  • اللون: #2d2d2d.
  • الصقل: هش.

باستخدام أداة الخط (U) إنشاء خط 240px واسعة وملئه بهذه القيمة اللون: #e5e5e5.

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

الاستيلاء على أداة نوع أفقي (T) واكتب بعض النص كمثال على سقسقة، ثم تطبيق إعدادات الأحرف التالية عليه:

  • الخط: Helvetica Neue الملازم الأمراض المنقولة جنسياً.
  • الوزن: 55 الروم.
  • الحجم: 12px.
  • الرائدة: 18px.
  • المسافة بين الحروف: المقاييس.
  • اللون: #2d2d2d/#767676.
  • الصقل: هش.

ثم اكتب "أكثر تويت" استخدام إعدادات الأحرف التالية:

  • الخط: Helvetica Neue الملازم الأمراض المنقولة جنسياً.
  • الوزن: 55 الروم.
  • الحجم: 12px.
  • المسافة بين الحروف: المقاييس.
  • اللون: #2d2d2d.
  • الصقل: هش.

لا تنسى أن تنقر فوق "تسطير" في لوحة الحرف.


خطوة 17: إنشاء قسم "منتجات أخرى"

الاستيلاء على أداة المستطيل (U) وإنشاء مستطيل 940x264px وملء مع #ffffff ومكان 20px تحت القسم "تحديثات تويتر".

إنشاء عنوان لهذا المقطع الذي هو بالضبط نفس واحدة ونحن بإنشائه في الخطوة السابقة. ثم استخدم أداة الخط (يو) لإنشاء خط واسعة 898px، وملء مع #e5e5e5.

استخدام أداة المستطيل (يو) لإنشاء مستطيل 178x113px. تقديم ثلاث نسخ منه ومواءمتها حسب الصورة أدناه.

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

  • الخط: Helvetica Neue الملازم الأمراض المنقولة جنسياً.
  • الوزن: 55 الروم.
  • الحجم: 12px.
  • القيادة: 18 بكسل.
  • تقنين المسافات: المقاييس.
  • اللون: 2d2d2d / 767676.
  • مكافحة التعرج: هش.

وأخيرًا ، لا تنسَ جعل 'اشترِ الآن' تحته خطًا.

ابحث عن رمز للسهم وضعه في الصورة أدناه ، وحاول تغيير حجمه إلى شيء حول 28x28px ، وقم بتعبئته بقيمة اللون هذه: 2d2d2d. قم بعمل نسخة أخرى من هذا الرمز ووضعها على الجانب الأيمن.


الخطوة 18: إنشاء منطقة تذييل الصفحة

اسحب أداة Marquee Rectangular Marquee Tool (M) وأنشئ مجموعة من 1260x122px ، ثم املأها بـ 2d2d2d.

اكتب بعض النص في التذييل باستخدام إعدادات الأحرف التالية:

  • الخط: Helvetica New LT Std.
  • الوزن: 55 روماني.
  • الحجم: 12 بكسل.
  • القيادة: 21 بكسل.
  • تقنين المسافات: المقاييس.
  • اللون: #ffffff# / 767676.
  • مكافحة التعرج: هش.

وأخيراً ضع نسخة من الشعار وتأكد من أنه محاذاة كما في الصورة أدناه ، وهذا كل شيء!


مزيج اللون

والآن بعد أن انتهينا من تركيبتنا السحابية ذات التدرج الرمادي ، فقد حان الوقت للتركيز على تلوين واجهتنا. اللون هو موضوع ضخم جدا ، لذلك أنا ذاهب للذهاب فقط من خلال جزء تركيبة اللون. سيحتوي نظام الألوان لدينا على ثلاثة أنواع من الألوان:

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

الصورة التالية تعرض ألواننا الأساسية ، الرئيسية ، و اللكنة.


غرفة تبحث

وبما أننا سنستخدم بعض اللوحات في تصميمنا ، فكرت أن أتحدث باختصار عن 'غرفة المظهر'. بشكل عام ، سيكون للصورة الشخصية موضوع ومساحة حولها. يمكن أن ينبع الاهتمام البصري في الصورة من الحركة ، هكذا تتحرك أعيننا حول اللقطة. ولتحريك العين ، يقوم المصور بتعديل المساحة المحيطة بالموضوع وفقًا لذلك.

على سبيل المثال كما ترون في الصورة أدناه ، فإن محاذاة الموضوع على اليسار (1) ، مع الفضاء الأبيض (غرفة النظر) على اليمين ، يخلق حركة (3) ، مما يجعل أعيننا تبدو في الاتجاه حيث ينظر هذا الموضوع.

قراءة متعمقة:


الخطوة 19: تلوين الخلفية

الآن دعونا نبدأ تلوين واجهتنا! لملء طبقة الخلفية بالألوان ، يمكنك النقر فوق الصورة المصغرة لها في لوحة الطبقات أثناء الضغط باستمرار على مفتاح Cmd / Ctrl لتحديد البكسلات الخاصة به ، ثم انقر فوق Shift + Backspace> Color…> f6f6f4. أو يمكنك إضافة تراكب الألوان إليها.


الخطوة 20: تلوين الشريط العلوي

قم بتلوين كلمة 'تسجيل الدخول' مع قيمة اللون هذه: ffffff ، 'اسم المستخدم / كلمة المرور' مع: 8e8e8e ، حقول الإدخال مع 8e8e8e ، خلفية الزر و 'تسجيل' مع ea6a53 ، ونص التنقل مع 999999.

املأ المساحة الإعلانية مع صورة كما هو موضح في الصورة أدناه ، وقم بإنشاء قناع لقطة لها ، كما فعلنا في الخطوة 14.

الوقت لتلوين الشعار. أعطِ الدائرة وكلمة 'الموضة' قيمة اللون هذه: 2d2d2d ، املأ الحرف 'F' بنفس لون الخلفية f6f6f4 ، وكلمة 'store' مع bc3726.


الخطوة 21: تلوين شريط التنقل

سنقوم بملء نص خلفية التنقل باستخدام قيمة اللون هذه: c3c3c3 ، والنص الذي يحتوي على 2d2d2d# ، وكلمة 'WOMEN' مع f6f6f4# (تمثل حالة التمرير / التحديد) ، وخطوط الفصل الرأسية مع b4b4b4#.

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

بالانتقال إلى شريط البحث ، سنقوم بملء حقل الإدخال بـ ffffff# الأبيض ، وكلمة 'بحث' مع a6a6a6# ، والرمز مع ea6a53#.

الآن دعونا نعطي شريط التنقل الفرعي بعض الألوان ... املأ الخلفية بـ 2d2d2d# ، والنص مع c4c4c4# ، وحدود الصورة مع 1f1f1f#.

سنجعل حدود الصورة أكثر إثارة للاهتمام من خلال إضافة الظل المسقط والظل الداخلي إليها. يمكن رؤية جميع الإعدادات في الصورة أدناه.

وأخيرًا ، ضع صورة لنموذج نسائي كما هو موضح في الصورة أدناه.

الآن حان الوقت لإنشاء الخطوط المتقطعة بين عناصر التنقل. افتح Adobe Illustrator ، أنشئ مستندًا جديدًا ، وحدد Tool Line Segment Tool (\\) ، وأنشئ خطًا بعرضه 135 بكسل ، واملأه بلا (/). ثم افتح لوحة Stroke واضبط إعداداتك وفقًا للصورة أدناه.

قم بنسخ السطر المتقطع ولصقه في Adobe Photoshop ، وقم بعمل نسختين منه ، واملأهما جميعًا بقيمة اللون التالية: 484848#.


الخطوة 22: تلوين بانر الشريط الجانبي الكبير

سنبدأ هذه الخطوة بوضع صورة لملء خلفية الشعار. اذهب إلى File> Place…> حدد صورة> Place.

دعونا نمضي قدما ونلون الدائرة بالنص الموجود بداخلها. قيم اللون التي يجب أن نستخدمها موضحة في الصورة أدناه.

من أجل جعل الرقم '50' بارزًا قليلاً ، سنقوم بتطبيق Drop Shadow على الطبقة التي تحتوي عليه. يمكن رؤية الإعدادات في الصورة أدناه.

وقت العمل على العنوان ... املأ الخلفية به بقيمة اللون هذه: 000000# ، والنص بقيمة اللون هذه: c3c3c3#. ثم قم بإنشاء خطين متقطعين (مثل الخط الذي أنشأناه في الخطوة 21) املأهما 414141# وقم بوضعهما كما هو موضح في الصورة أدناه.

دعنا نضيف بعض الاهتمام المرئي إلى خلفية العنوان ، بإضافة نسيج دقيق من grunge إليها. قم بتنزيل مجموعة الفرشاة المذهلة هذه: ''فرشاة فرش الجرونج الرائعة'' التي تم إنشاؤها بواسطة اللاعبين الرائعين في WeFunction أو أي مجموعة فرشاة أخرى تفضلها. قم بإنشاء طبقة جديدة فوق طبقة خلفية العنوان مباشرة ، مع تحديدها ، قم بالطلاء فوق العنوان باستخدام إحدى الفرش باستخدام أداة الفرشاة (B) (أو ربما يمكنك استخدام إحدى صور PNG المضمنة بدلاً من ذلك) املأها باللون الأبيض ، ثم تقليل عتامة الطبقة إلى 30 ٪. أخيرًا ، انقر بزر الماوس الأيمن عليه> إنشاء قناع قطع ...


الخطوة 23: تلوين منطقة المحتوى المميز

سنملأ خلفية منطقة المحتوى المميزة بتدرج لجعلها تبدو أكثر إثارة. لذا امض قدما واختر أداة التدرج (G) ، وافتح محرر التدرج من لوحة التحكم ، وقم بتعيين قيم اللون من b6a397# إلى 9d8a83#.

نحتاج إلى تحديد المنطقة التي يجب ملؤها بالتدرج ، ونقوم بذلك عن طريق التحديد على ذلك. لذلك دعونا نذهب إلى لوحة الطبقات ، انقر فوق الصورة المصغرة لطبقة الخلفية مع الضغط باستمرار على مفتاح Cmd / Ctrl لإجراء تحديد فوقها ، ومع تحديد Gradient Tool (G) ، حدد Gradient Gradient ، واسحب من كما هو موضح في الصورة أدناه أثناء الضغط باستمرار على مفتاح Shift لتقييد الملاك.

يتم عرض قيم لون العناصر في هذا القسم في الصورة أدناه.

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


الخطوة 24: تلوين لافتات الشريط الجانبي الصغيرة

مرة أخرى ، سنضع صورة أخرى كخلفية لشعارنا ، ونستخدم قيم اللون الموضحة في الصورة أدناه لتلوين عناصرنا.

لجعل النص الخاص بنا يبرز أكثر قليلاً ، سنعطيه إسقاط الظل. يمكن رؤية الإعدادات في الصورة أدناه.

وسنفعل الشيء نفسه مع لافتة أخرى ...

الآن دعونا نمنح بعض الألوان لقسم ''تحديثات Twitter'' ... تحتوي الصورة أدناه على جميع قيم الألوان التي يجب أن نستخدمها لهذا القسم.


الخطوة 25: تلوين منطقة المحتوى الرئيسية

سنبدأ بالعنوان ونملؤه بقيمة اللون: 2d2d2d# ، ثم الوصف مع هذه القيمة: 858585 #، ثم السطر مع e5e5e5#.

الانتقال إلى معاينة المنتج ... قم أولاً بوضع صورة للمنتج ، ثم قم بتلوين جميع العناصر بالقيم المعروضة في الصورة أدناه.

سيتم تلوين العناصر الموجودة في قسم 'المنتجات الأخرى' بنفس القيم الموضحة في الخطوة السابقة ، فقط تأكد من ملء الخلفية بالأبيض ffffff# ، ورمز السهم مع 040707#.


تلوين منطقة تذييل الصفحة

املأ خلفية الراكب مع قيمة اللون هذه: 2d2d2d# ، والنص مع a0a0a0 و ffffff#.

وأخيرًا ، تظهر ألوان الشعار في الصورة التالية ...


استنتاج

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

Advertisement
Advertisement
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.