صفحة 1 من 2 12 الأخيرةالأخيرة
النتائج 1 إلى 15 من 30

الموضوع: درس مهم جداً : كيف تجعل تصميمك يتمدد على جميع مقاسات الشاشة , بالتفصيل الممل

  1. #1
    عضو نشيط
    تاريخ التسجيل
    Sep 2005
    المشاركات
    131

    درس مهم جداً : كيف تجعل تصميمك يتمدد على جميع مقاسات الشاشة , بالتفصيل الممل



    بسم الله الرحمن الرحيم

    السلام عليكم ورحمة الله وبركاته

    "احترت في المكان المناسب للموضوع ,, هل هو قسم تطوير المواقع أو قسم برامج الرسوم و التصميم ولكني اهتديت في النهاية ان الموضوع انسب لهذا القسم وهدفه يخدم هذا القسم بشكل اكبر ,, ولكم الرؤية النهائية في نقله إلى مكانه المناسب :shy: "

    من الامور المهمة جداً والتي يجب على المصمم اتقانها ومعرفتها هي خاصية تمديد التصميم على جميع مقاسات الشاشة

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

    كتبت هذا الدرس بطريقة تفصيلية حتى يتقن المصمم هذه الخاصية المهمة

    قبل ان ندخل في الموضوع ساتحدث قليلاً عن الشاشات :

    معروف ان للشاشات مقاسات مختلفة ومتعددة .. واشهرها واكثرها انتشاراً هو المقاس الاصغر .. وهو (( 800*600 )) , وهو المقاس الافتراضي والاكثر استخداماً في التصاميم , لكن ماذا يحصل ان صممت تصميم مختلف عن مقاس الشاشة ؟

    اذا كان التصميم مصمم على مقاس اكبر من ((800*600 )) فإن المستخدم سيظطر للتحريك يميناً ويساراً حتى يطلع على الموقع .. وهذي العملية مزعجة جداً ولا يُقبل حصولها في التصاميم

    الامر الآخر اذا كان التصميم مصمم على مقاس ((800*600 )) والمستخدم يستخدم دقة شاشة اكبر .. ما سيحصل هو ظهور فراغات على يمين ويسار الشاشة .. وهو امر ليس مزعج كما في الحالة الاولى , ولكن هناك فكرة جميلة لتفادي وجود هذه الفراغات وهي تمديد التصميم لجعله يتمدد على جميع مقاسات الشاشة من اصغرها إلى اكبرها

    المتطلبات :

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

    الدرس :

    ملاحظة : تم تقليل جودة الصور بشكل كبير حتى يصغر حجمها ويسهل تصفح الموضوع .. لذلك العذر على الجودة الضعيفة

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

    1- افتح برنامج الفوتوشوب .. وافتح العمل بأي مقاس .. ضعه مثلاً (( 500*100 بكسل ))

    2- ارسم مستطيل بأي لون تريد

    3- الان وهذه الخطوة المهمة .. اذهب واختر اداة الـ (( Slice Tool )) انظر الصورة



    4- اذهب للمستطيل .. واعمل في منتصف المستطيل مربع عرضه واحد او اثنين بكسل .. من اعلى المستطيل إلى اسفله .. وحدد الجهة اليمنى والجهة اليسار للمستطيل .. بذلك يكون لديك ثلاث مناطق محددة وهي المناطق المطلوبة .. انظر الصورة



    5- اضغط على (( file )) ثم اضغط على (( Save For Web )) .. انظر الصورة



    6- ستفتح لك نافذة جديدة .. فيها مجموعة اعدادات .. لك الحرية في تغييرها .. مثلاً وضع الصورة بصيغة (( gif )) او (( jpg )) او غيرها من الصيغ .. وايضاً تستطيع التحكم في جودة الصور .. اضغط على الجزء اللي ترغب بالتعديل عليه وتظهر لك الخواص

    7- اذا انهيت الاعدادت اللي تحتاجها .. اضغط على (( save )) وتأكد من المكان اللي تضع الصورة فيه .. غالباً لما تضع الصور في مجلد معين يظهر لك مجلد آخر داخل المجلد الذي اخترته باسم (( images )) .. بمعنى اوضح .. لنفترض انك ترغب بحفظ الصور في ملف المستندات واخترت المستندات وضغطت حفظ .. لن تظهر لك مباشرة في المستندات .. ما سيحصل هو ظهور مجلد جديد باسم (( images )) وستجد الصور بداخله

    8- بعد عملية الحفظ ستظهر لك الاجزاء التي حددتها مع بقية الاجزاء الاخرى التي لم تحددها .. غير مهم .. نحن نحتاج الاجزاء التي حددناها .. انظر الصورة (( التي حددتها بالاحمر هي الاجزاء المطلوبة وهي التي حددناها سابقاً باداة الـ (( Slice Tool ))




    بانتهائنا من الجزء المتعلق بالفوتوشوب نكون قد انتهينا من الجزء الاكبر .. ولم يبقى إلا اليسير باذن الله

    افتح برنامج الفرونت بيج واعمل ما يلي :

    1- اضف جدول من ثلاث خانات

    2- حدد الجدول ثم اضغط باليمين ثم اذهب إلى خصائص الجدول واجعل اتجاه الجدول من اليمين إلى اليسار .. واجعل حجم الحدود = صفر .. انظر الصورة



    3- اذهب للخلية التي في المنتصف واذهب إلى خصائص الخلية .. واجعل تمددها بنسبة (( 100% )) واجعل لها خلفية وتكون الخلفية هي الصورة التي حددناها وجعلنا عرضها 1 او 2 بيكسل .. انظر للصورة



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

    5- سيظهر لك مثل التالي :



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

    1- اضغط على الصورة باليمين ثم اضغط من القائمة على خصائص الصورة .. بعد دخولك للخصائص اضغط على ايقونة عام في الاعلى .. ومن هناك عدل امتداد الصورة إلى الامتداد اللي تريده .. انظر الصورة



    وتطبقها على بقية الصور .. بالنسبة للخلفية تستطيع تحرير امتدادها من خصائص الخلية .. ستلاحظ انه بعد تغيير الامتداد ستظهر الصور على شكل اكس .. وستختفي الخلفية .. لا مشكلة .. ستظهر عند رفع الصفحة والصور في الامتداد المحدد

    ملاحظة مهمة : هذه العملية مهمة جداً لتصميم السكربتات مثل المنتديات والمجلات حيث ان الصور تكون في مكان آخر غير المجلد الرئيسي .. في هذه الحالة اذا اردت رفع الصفحة مباشرة بدون تعديل الامتداد فلا يوجد اشكالية .. لكن ضع الصور في نفس المجلد الذي تضع فيه الصفحة

    الآن هناك حركة جمالية اخيرة اذا اردت فعلها فهي جميلة .. وهي الغاء الفراغات اعلى واسفل وجوانب الصفحة

    وطريقتها كالتالي :

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



    الآن ارفع الصفحة إلى المجلد الرئيسي في موقعك .. وارفع الصور الى المجلد الذي حددته في الامتداد قبل قليل .. انا سارفعها في مجلد (( img )) انت ضعها في المجلد الذي حددته

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

    http://www.zemam.com/drs.htm


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

    * يمكنك عمل الفكرة في البانرات .. مثل :



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

    * يمكنك استخدامها على المنتديات او المجلات مثل :



    * يمكنك استخدامها في الفوتر اسفل الصفحة مثل :




    متى لا يمكنك استعمالها ؟ عندما يكون لديك تصميم ممتلىء بالصور .. فيمكنك تطبيقها لكنها تشوه التصميم .. لذلك يميل الكثير من المصممين عندما لا يكون في تصاميهم مناطق فراغ يمكن جعلها منطقة تمدد .. عندما لا يكون لديهم مثل ذلك يجعلون التصميم ذو مقياس ثابت على (( 800*600 ))

    ولكي تتوضح لديك الصورة بالمقصد من تصميم ممتلى بالصور وغير متوفر به مكان للتمدد انظر للصورة التالية :



    ملاحظة جميع الصور اعلاه حقوقها محفوظة لزمام لخدمات التصميم ولعملائه الكرام

    وأي استفسار أو سؤال انا حاظر .. وباذن الله يكون هناك استفادة من هذا الموضوع .. وعذراً على الإطالة والأخطاء الإملائية إن وجدت

    مع أطيب الأمنيات

    زمام لخدمات التصميم
    http://www.zemam.com








  2. #2
    عضو نشيط جدا
    تاريخ التسجيل
    Sep 2005
    المشاركات
    553


    ياسلام عليك جزاك الله كل خير

    شرح رائع الله يبارك فيك





    __________________
    لتكون الأفضل أتبع الأفضل
    منتديات فلاش للمحترفين
    http://www.flashfp.com/vb/index.php
    flashfp#hotmail.com

  3. #3


    ماشاء الله عليك اخوى الغالى

    شرح رائع مثل صاحبة وبالتوفيق اخوى





    __________________
    سوالف سوفت ( المعلومة تأتي أولآ )
    استخدم خاصية تنبيه المشرفين للضرورة وعند ملاحظة موضوع يخالف قوانين منتديات سوالف وسيتم مراجعة الموضوع او المشاركة المبلغ عنها على الفور

  4. #4
    عضو نشيط جدا
    تاريخ التسجيل
    Jun 2003
    المشاركات
    358


    جزاك الله خيرا





    __________________
    Keyboard-Arabic

  5. #5
    عضو سوبر نشيط
    تاريخ التسجيل
    Jun 2004
    المشاركات
    723


    تسلم على المعلومة المهمة





    __________________
    سبحان الله وبحمده---سبحان الله العظيم
    برامج عربية:
    البوابة العربية
    المدونه العربيه
    MySmartBB

  6. #6
    خبير JavaScript
    تاريخ التسجيل
    Jul 2002
    المشاركات
    2,920


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

    جزاك الله خيرا على الدرس المفيد
    والسلام






  7. #7


    ضربت على الوجع أخي
    جزاك الله خير وجعله الله في ميزان حسناتك






  8. #8
    عضو نشيط
    تاريخ التسجيل
    Sep 2005
    المشاركات
    131


    FLASHFP

    مرحبا عزيزي وشاكر لك مرورك واطرائك الرائع



    ahmed-samara

    الرائع حضورك وتواجدك .. حياك الله



    YALLAYAARAB

    واياك ,, شاكر لك مرورك

    زمام لخدمات التصميم
    www.zemam.com






  9. #9
    عضو نشيط
    تاريخ التسجيل
    May 2004
    المشاركات
    97


    جزاك الله كل خير اخي الكريم

    فعلا الكثير كان يسأل ويستفسر عن طريقة تمدد التصميم

    زادك الله من علمه ونفك بك

    تحياتي القلبية





    __________________
    http://www.almanalgate.com/
    بوابة المنال
    لخدمات النيوك الاحترافية
    ::الشبكة العربية التعليمية سابقا::

  10. #10
    ينتظر رسالة التوكيد
    تاريخ التسجيل
    Jun 2005
    المشاركات
    211


    الله عليك ولله اصبت الهدف موضوع رائع فعلا ليك منى الف تحية








  11. شكرا لك اخي الكريم على الشرح الوافي والمهم

    وجعله الله في ميزان حسناتك انشاء الله





    __________________
    ownersınnı
    ALdiraZi BLoOoG | Contact Me | lt.tl - shorten your URL

  12. #12
    عضو نشيط
    تاريخ التسجيل
    Jun 2005
    المشاركات
    57


    درس افادني كثير
    مشكور اخوي






  13. #13
    عضو سوبر نشيط
    تاريخ التسجيل
    Feb 2002
    المشاركات
    609


    درس مفيد جداً
    بارك الله فيك







    __________________
    لا إله إلا الله .. محمد رسول الله

    موقع زهور الإسلام

  14. #14
    عضو نشيط
    تاريخ التسجيل
    Sep 2005
    المشاركات
    131


    Suliman1
    الله يسلمك عزيزي ,, وحياك الله


    Zizwar
    مرحبا استاذي الكريم ,, شرفنا وجودك في الموضوع وشاكر لك على التوضيح والاقتراح الكريم


    مرشوش بفليت
    واياك عزيزي ,, وشاكر لك مرورك


    Lost in love
    واياك استاذي الكريم ,, وان شاء الله تعم الفائدة ويستفيد الاخوان


    algana9
    هلا بك اخي العزيز ,, وشاكر لك كلامك الطيب


    sr3h.com
    العفو استاذي الكريم ,, وشاكر لك حضورك


    f222f.com
    العفو اخي العزيز ,, وشاكر لك حضورك الكريم


    Hawajes
    بارك الله فيك ,, وحياك الله

    زمام لخدمات التصميم
    www.zemam.com






  15. #15
    عضو نشيط
    تاريخ التسجيل
    Sep 2005
    المشاركات
    131


    للرفع ,, للفائدة






صفحة 1 من 2 12 الأخيرةالأخيرة




ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  
0
موقع مكملات غذائية | نظارات طبية | أضف موقعك هنا