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

[linnou]

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


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


اقتباس
تم رفع الدرس مفصل فى المرفقات من قبلى لتعم الفائده

M!ss N!le




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


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


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


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


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


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





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


المتطلبات :


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


الدرس مفصل :


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


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


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


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


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


http://www.dzbatna.info/dzbatna4/5/1.bmp


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


http://www.dzbatna.info/dzbatna4/5/2.bmp


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


http://www.dzbatna.info/dzbatna4/5/3.bmp


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


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


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


http://www.dzbatna.info/dzbatna4/5/4.bmp



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


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


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


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


http://www.dzbatna.info/dzbatna4/5/5.bmp


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


http://www.dzbatna.info/dzbatna4/5/6.bmp


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


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


http://www.dzbatna.info/dzbatna4/5/7.bmp


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


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


http://www.dzbatna.info/dzbatna4/5/8.bmp


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


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


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


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


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


http://www.dzbatna.info/dzbatna4/5/9.bmp


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


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


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



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


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


http://www.dzbatna.info/dzbatna4/5/10.bmp


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


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


http://www.dzbatna.info/dzbatna4/5/11.bmp


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


http://www.dzbatna.info/dzbatna4/5/12.bmp



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


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


http://www.dzbatna.info/dzbatna4/5/13.bmp


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


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


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


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


الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif جداً كيف تجعل تصميمك يتمدد على جميع مقاسات الشاشة , بالتفصيل الممل.zip (http://www.traidnt.net/vb/attachments/198467d1197591173-جداً-كيف-تجعل-تصميمك-يتمدد-على-جميع-مقاسات-الشاشة-بالتفصيل-الممل.zip) (1.01 ميقابايت, عدد مرات المشاهدة 731 مرة)

http://www.traidnt.net/vb/images/attach/zip.gif tut..zip (http://www.traidnt.net/vb/attachments/198468d1197591410-tut..zip) (1.01 ميقابايت, عدد مرات المشاهدة 381 مرة)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©