تصميم متجاوب بطريقة Parallax Scrolling


E.Nourddine

سنتعلم في هذا الدرس كيفية تصميم موقع بطريقة Parallax Scrolling من الصفر حتى النهاية، وذلك باستعمال برنامج Photoshop. في درسنا هذ سيكون القالب بخصوص وكالة مختصة في الويب (Web Agency).

وهذه هي النتيجة النهائية:

01_final.thumb.jpg.4c3ab4b5691dfa60ffe91

 

قبل البدء أدعوكم لتحميل هذه الحزمة.

نفتح مشروع جديد على 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

02_Guides.thumb.JPG.1e38ee7cf3c5631f1c50

03_01_view_all_Guides.thumb.JPG.ec5822ff

نبدأ بالقائمة في الأعلى – يسمى الجزء العلوي: header-.

نأخذ أداة النص (T) ونكتب مختلف عناصر القائمة باستعمال "Open sans" كنوع للخط و13pt في حجمه (تجده في حزمة هذا الدرس).

03_view_menu.thumb.JPG.2b6a8828c86a5aeec

بعدة ذلك اجلب أيقونة الموقع خاصتك، في هذا الدرس سنستعمل كلمة Awesome Agency ملونة باللون الأزرق 00b3e3#.

04_01_view_logo.thumb.JPG.5a7ed275768420

الآن نضيف للمشروع صورة من الحجم الكبير بين العلامتين الأولى والثانية.

04_view_add_image.thumb.JPG.eb21a8b5e6df

نضيف مستطيل أسود اللون باستعمال أداة الشكل الرباعي (U).

05_after_add_rectangle.thumb.JPG.ae97855

نخفض قيمة الشفافية الخاصة بالمربع إلى قيمة %71.

06_Opacity.thumb.JPG.337cd681acce8d34e78

بعد ذلك نرسم مستطيل آخر بمحتوى شفاف وإطار باللون # 617b9b.

07_Other_Rectangle.thumb.JPG.61783a15fa5

ننشئ طبقة جديدة New Layer بالضغط على Ctr+Shift+N، وبأداة القلم (P) بقيمة 1px في عرض الخط، نرسم زوايا كما تبين الصورة-للحصول على خط مستقسم يكفي النقر بالفأرة في مكان بدأ الخط ثم في مكان نهاية الخط مع النقر على زر Shift في لوحة المفاتيح وبهذا يرسم خط مستقسم الشكل بين النقطتين -:

08_Add_corners.thumb.JPG.5ef00636ed613e8

ثم نرسم مستطيل أبيض اللون كهذا.

09_add_Rectangle_for_blur.thumb.JPG.a89d

نطبق عليه – المستطيل الأبيض-Filter Motion Blur وذلك بالذهاب إلى:

Menu > Filter > Blur > Motion Blur

10_Add_Filter_Motion_Blur.thumb.JPG.b490

11_After_Filter_Motion_Blur.thumb.JPG.12

نرسم مستطيل آخر ونطبق عليه نفس الفلتر، ثم نرسم دوائر بأداة الدائرة Ellipse Tool (U) للحصول على الشكل التالي:

12_Copy_Filter_Motion_Blur.thumb.JPG.21f

أضف الآن النص الخاص بك (النص المستعمل في الدرس مجرد مثال بسيط، والذي سيعوض بمحتوى في HTML)

13_view_slide_show.thumb.JPG.0b14dac7662

بالنسبة الجزء الثالث، اجلب الأيقونات المحملة في الحزمة أول الدرس كما تبين الصورة:

14_add_icons.thumb.JPG.3e277a7b819eca59c

بالطريقة ذاتها أضف النص الخاص بك باستعمال نفس الخط «Open Sans» -ينصح الويب عدم استعمال كثرة الخطوط لتفادي بطء الخوادم Servers-

15_add_text_to_icons.thumb.JPG.45c73af8c

نمر للجزء الرابع، نأخذ أداة المستطيل ونرسم مستطيل أزرق اللون # 32bcef باتباع العلامات -Guides-.

16_Fill_BLUE.thumb.JPG.1ea665091b9fe0de3

بعد ذلك نتجه إلى خصائص الدمج Blending Options:

17_Pattern.thumb.JPG.b27417a8937b5ab4838

18_Render_Pattern.thumb.JPG.c3b897082a00

ثم نرسم مستطيل آخر بشعاع ذو قيمة 5px ولون أزرق غامق #0c1a2d.

أضف أيقونة الموقع أو أي شيء تريد، في الدرس أضفنا نفس الأيقونة السابقة وشكل المتجاوب للموقع.

19_add_Monitor_Ipad_Iphon.thumb.JPG.d4d4

ثم نضي فنص رمادي فاتح وغامق للعناوين كما تبين الصورة.

20_01_add_Text.thumb.JPG.1a51cc4e2f32042

سنصمم الآن معرض للأعمال-Portfolio – المندرج في صفحتنا هاته، أضف الصور الخاصة بك.

20_add_images.thumb.JPG.8cce1c44820a078a

أرسم على صورة معية مستطيل أزرق #32bcef .

21_add_rectangle.thumb.JPG.af1e93b15b485

بعد ذلك نرسم مستطيل آخر أبيض اللون بنفس مقاس الصورة، ثم نخفض قيمة الشفافية -opacity-خاصته إلى قيمة 65% .

22_opacity_image.thumb.JPG.88bf3afb5eca4

وللانتهاء من هذا الجزء، أضف نصا كما في الصورة:

23_add_some_text_Searsh_icon.thumb.JPG.b

في الجزء الخامس، وبنفس الطريقة نرسم مستطيل أبيض اللون بإطار رماديcacaca #.

24_add_Rectangle.thumb.JPG.9c4012aa366c9

دائما بأداة الشكل المربع نرسم في الأسفل مستطيل أزرق اللون #36caf4.

25_add_footer_to_rectangle.thumb.JPG.efd

بعد ذلك نتجه إلى خصائص الدمج Blending Options:

26_Pattern.thumb.JPG.7bbbfb47d1f61e5f441

27_1_After_Pattern.thumb.JPG.229c1e12470

نغير من طول المستطيل الأزرق حتى يتناسب مع طول المستطيل الأبيض:

27_After_Pattern.thumb.jpg.4bab0f358b4a6

أضف أيقونات المواقع الاجتماعية:

28_icons_twit_skyp.thumb.JPG.99b7de73b56

بعد ذلك أضف النص الخاص بك وصورة –في هذا المثال وضعنا صور العاملين في وكالتنا-:

29_1_Team.thumb.JPG.cdffed851d428a4d33d1

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

29_Team.thumb.JPG.835851e5258382f821734a

الآن، قم بجلب صورة وضعها في الأسفل –هذا الجزء من الصفحة يسمى ب footer – ونطبق عليه نفس خطوات الجزء الثاني للحصول على صورة ذات إضاءة خفيفة.

ونضيف بعض الكلمات وبعض الأيقونات بالشكل التالي:

30_contact_footer.thumb.JPG.be598c2349c1

لرسم استمارة -Form-للتواصل بالموقع نرسم أربع مستطيلات بمحتوى شفاف وإطار أبيض ذو عرض 1-2 pixels:

31_1_Contact_Form.thumb.JPG.a7ca0f9ac87f

ثم نضيف مربع أزرق #3ec1f1 ذو زوايا دائرية مع بعض الكلمات التي تشير إلى الحقول وزر الإرسال:

31_Contact_Form.thumb.JPG.20a6898af42fe5

وفي الأخير نضيق في الأسف مستطيل باللون #1e1e1e، بغرض الصفحة يحتوي على نص وأيقونة تشير لحقوق الملكية.

لنحصل في الأخير على الصورة النهائية:

32_Final.thumb.jpg.c9bc22ed47fed759ac5f3

 

ترجمة -وبتصرّف- للمقال: Tutoriel comment faire un Design Responsive en Parallaxe Scrolling.



1 شخص أعجب بهذا


تفاعل الأعضاء


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

شارك هذا التعليق


رابط هذا التعليق
شارك على الشبكات الإجتماعية

عمل جميل ومتناسق .. لكن يمكن أن يكون أكثر إحترافيةً

 

تحياتي لك

شارك هذا التعليق


رابط هذا التعليق
شارك على الشبكات الإجتماعية


يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن