سنتعلم في هذا الدرس كيفية تصميم موقع بطريقة Parallax Scrolling من الصفر حتى النهاية، وذلك باستعمال برنامج Photoshop. في درسنا هذ سيكون القالب بخصوص وكالة مختصة في الويب (Web Agency).
وهذه هي النتيجة النهائية:
قبل البدء أدعوكم لتحميل هذه الحزمة.
نفتح مشروع جديد على Photoshop بالإعدادات التالية:
- 1800x4850pixels
- Resolution 720Dpi
- Color Mode RVB8bit
للحصول على الدقة أثناء التحويل من PSD على HTML علينا استعمال الأسطر الدلالية (Guides Lines) ليسهل التعامل بـ CSS.
نضيف العلامات الافقية الذهاب إلى:
Menu > View > New Guide
نختار Horizontal ثم ندخل القيم التالية:
59px ،651px ،1431px ،2237px ،2613px ،3154px ،3939px ،4767px
نبدأ بالقائمة في الأعلى – يسمى الجزء العلوي: header-.
نأخذ أداة النص (T) ونكتب مختلف عناصر القائمة باستعمال "Open sans" كنوع للخط و13pt في حجمه (تجده في حزمة هذا الدرس).
بعدة ذلك اجلب أيقونة الموقع خاصتك، في هذا الدرس سنستعمل كلمة Awesome Agency ملونة باللون الأزرق 00b3e3#.
الآن نضيف للمشروع صورة من الحجم الكبير بين العلامتين الأولى والثانية.
نضيف مستطيل أسود اللون باستعمال أداة الشكل الرباعي (U).
نخفض قيمة الشفافية الخاصة بالمربع إلى قيمة %71.
بعد ذلك نرسم مستطيل آخر بمحتوى شفاف وإطار باللون # 617b9b.
ننشئ طبقة جديدة New Layer بالضغط على Ctr+Shift+N، وبأداة القلم (P) بقيمة 1px في عرض الخط، نرسم زوايا كما تبين الصورة-للحصول على خط مستقسم يكفي النقر بالفأرة في مكان بدأ الخط ثم في مكان نهاية الخط مع النقر على زر Shift في لوحة المفاتيح وبهذا يرسم خط مستقسم الشكل بين النقطتين -:
ثم نرسم مستطيل أبيض اللون كهذا.
نطبق عليه – المستطيل الأبيض-Filter Motion Blur وذلك بالذهاب إلى:
Menu > Filter > Blur > Motion Blur
نرسم مستطيل آخر ونطبق عليه نفس الفلتر، ثم نرسم دوائر بأداة الدائرة Ellipse Tool (U) للحصول على الشكل التالي:
أضف الآن النص الخاص بك (النص المستعمل في الدرس مجرد مثال بسيط، والذي سيعوض بمحتوى في HTML)
بالنسبة الجزء الثالث، اجلب الأيقونات المحملة في الحزمة أول الدرس كما تبين الصورة:
بالطريقة ذاتها أضف النص الخاص بك باستعمال نفس الخط «Open Sans» -ينصح الويب عدم استعمال كثرة الخطوط لتفادي بطء الخوادم Servers-
نمر للجزء الرابع، نأخذ أداة المستطيل ونرسم مستطيل أزرق اللون # 32bcef باتباع العلامات -Guides-.
بعد ذلك نتجه إلى خصائص الدمج Blending Options:
ثم نرسم مستطيل آخر بشعاع ذو قيمة 5px ولون أزرق غامق #0c1a2d.
أضف أيقونة الموقع أو أي شيء تريد، في الدرس أضفنا نفس الأيقونة السابقة وشكل المتجاوب للموقع.
ثم نضي فنص رمادي فاتح وغامق للعناوين كما تبين الصورة.
سنصمم الآن معرض للأعمال-Portfolio – المندرج في صفحتنا هاته، أضف الصور الخاصة بك.
أرسم على صورة معية مستطيل أزرق #32bcef .
بعد ذلك نرسم مستطيل آخر أبيض اللون بنفس مقاس الصورة، ثم نخفض قيمة الشفافية -opacity-خاصته إلى قيمة 65% .
وللانتهاء من هذا الجزء، أضف نصا كما في الصورة:
في الجزء الخامس، وبنفس الطريقة نرسم مستطيل أبيض اللون بإطار رماديcacaca #.
دائما بأداة الشكل المربع نرسم في الأسفل مستطيل أزرق اللون #36caf4.
بعد ذلك نتجه إلى خصائص الدمج Blending Options:
نغير من طول المستطيل الأزرق حتى يتناسب مع طول المستطيل الأبيض:
أضف أيقونات المواقع الاجتماعية:
بعد ذلك أضف النص الخاص بك وصورة –في هذا المثال وضعنا صور العاملين في وكالتنا-:
بنفس الطريقة نضيف مستطيلات ونصوص أخرى حتى نتوصل إلى النتيجة المحصل عليها:
الآن، قم بجلب صورة وضعها في الأسفل –هذا الجزء من الصفحة يسمى ب footer – ونطبق عليه نفس خطوات الجزء الثاني للحصول على صورة ذات إضاءة خفيفة.
ونضيف بعض الكلمات وبعض الأيقونات بالشكل التالي:
لرسم استمارة -Form-للتواصل بالموقع نرسم أربع مستطيلات بمحتوى شفاف وإطار أبيض ذو عرض 1-2 pixels:
ثم نضيف مربع أزرق #3ec1f1 ذو زوايا دائرية مع بعض الكلمات التي تشير إلى الحقول وزر الإرسال:
وفي الأخير نضيق في الأسف مستطيل باللون #1e1e1e، بغرض الصفحة يحتوي على نص وأيقونة تشير لحقوق الملكية.
لنحصل في الأخير على الصورة النهائية:
ترجمة -وبتصرّف- للمقال: Tutoriel comment faire un Design Responsive en Parallaxe Scrolling.
أفضل التعليقات
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.