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

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

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

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

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

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

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

معروف ان للشاشات مقاسات مختلفة ومتعددة .. واشهرها واكثرها انتشاراً هو المقاس الاصغر .. وهو (( 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