منتديات برامج التعليمية

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

مرحبا بكم في منتديات برامج التطويرية والتعليمية


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

    Admin
    Admin
    Dr.Y.OptiX
    Dr.Y.OptiX


    عدد الرسائل : 304
    نقاط : 11
    تاريخ التسجيل : 22/06/2007

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

    مُساهمة من طرف Admin الإثنين أغسطس 27, 2007 2:15 pm

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

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

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

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

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

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

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

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

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

    المتطلبات :

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

    الدرس :

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


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

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

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

    تحياتي لكم

      الوقت/التاريخ الآن هو الخميس مارس 28, 2024 3:02 pm