المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : دورة جرافكس تصميم الموقع. الدرس(2/4): تخطيط التصميم.



م.صالح
13-May-2008, 02:31
عرفنا في الدرس الماضي كيف أن رأس الصفحة عبارة عن صور مقطعة في أغلب المواقع .. وهناك مواقع رأس الصفحة فيها عبارة عن صورة واحدة (غير مقطعة) وهذا في مواقع قليلة ..

وهذا الكلام لا ينطبق فقط على رأس وتذييل الصفحة فقط بل كل أجزاء الموقع .. فانظر مثلاً

http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson2/frame_bg.jpg

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

لماذا تستخدم الخلفيات بكثرة في المواقع؟
الخلفية عبارة عن صورة صغيرة جداً ولكن لها ميزة وهي أنها تتكرر. فيظنها المشاهد بأنها صورة كاملة.

ونختار الخلفية من المساحات الفاضية التي ليس بها صورة أو نص مكتوب بخط ليس من ضمن خطوط الويندوز وبالإمكان تكرارها بطريقة أفقية.

بينما الصور فتختار حسب المناطق التي بها صور طبيعية أو زخرفة أو تأثير أو غير ذلك بيحث لا يمكن أخذ قطعة صغيره منها وتكرارها بشكل أفقي..

لنأخذ صورة ونرى خصائصها..

http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson2/pic_properties.jpg

أبعادها .. 250 * 78 بكسل أي نقطة.
وحجمها 1.16 كيلوبايت.
حجمها ليس كبير.. ولكن كم صورة في الموقع غير هذه الصورة ..

لنأخذ خلفية ونرى خصائصها..

http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson2/back_porperties.jpg

أبعادها: 2*24 بكسل (نقطة) وواضح أن عرضها عبارة عن نقطتين فقط.
وحجمها 55 بايت.

طبعا 1 كيلو بايت = 1000 بايت.

لماذا تقطيع الصور؟
يلجأ المصممون لتقطيع الصور للأسباب التالية:

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



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

فمثلاً المصمم الذي صمم هذا الموقع قام بالتقطيع بالطريقة التالية:


http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson2/currnet_plan.jpg

بحيث المربعات التي باللون الأزرق تمثل الصور. والمربعات التي باللون الأحمر تمثل خلفية.

ولو أسندت إلي هذه العملية لقمت بتقطيع التصميم بالطريقة التالية:


http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson2/my_plan.jpg



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

طيب أيها الأحبة .. خلوني أعطيكم هذا التدريب ..


http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson2/sample.jpg

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

كتبه.
م.صالح.

بدريه احمــد
13-May-2008, 04:19
بسم الله
..

م.صالح
13-May-2008, 11:06
يعطيك العافية أ/ بدرية .. على المشاركة السريعة..
وسأعقب على هذه المحاولة مع بقية المحاولات غداً الأربعاء الساعة 5 عصراً حتى أرى محاولات باقي المشاركين..

,,)@&**( Mona ) **&@(,,
14-May-2008, 05:29
يعطيك العافيه م / صالح
قسمت مرتين يعني اجابتين خذ راحتك بالتعليق :icon7:

غريب_21
14-May-2008, 09:11
امم سأشارك بالكتابة والمعذرة ..


بالنسبة للزاوية اليمنى بالأبيض .. صورة ..ما كتب فيها تطوع ..الخ

منتصف الهيدر .. صورة وهي ما كتب فيها مشروع تصميم ... .. طبعا من بداية ( تصميم ) في السطر الثاني إلى (تطوعية)

أقصى اليسار .. صورة وهي التي فيها صور متتابعة ..

بقية الهيدر .. تكون خلفيات ..

م.صالح
15-May-2008, 01:56
أولاً أحمد الله على اتضاح فكرة الدرس .. وكل المحاولات تدل على اتضاح الدرس.

وأعتذر عن تأخر الرد للانشغال مع أحد المؤسسات التطوعية ..

وأهلا بالعضو الجديد معنا .. غريب .. في الملتقى . وفي هذه الدورة..

وسأرد على كل محاولة في رد مستقل ...

م.صالح
15-May-2008, 02:06
بسم الله
..

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

أسأل الله لك التوفيق ..

م.صالح
15-May-2008, 02:28
يعطيك العافيه م / صالح
قسمت مرتين يعني اجابتين خذ راحتك بالتعليق :icon7:

أهلا بك أ/ منا، معنا في هذا المشروع المبارك ..

وأشكر لك هذه المحاولات الموفقة ..

واختيار الصور في المحاولة الأولى أفضل من المحاولة الثانية ..

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

أسأل الله لك التوفيق ..

م.صالح
15-May-2008, 02:33
امم سأشارك بالكتابة والمعذرة ..


بالنسبة للزاوية اليمنى بالأبيض .. صورة ..ما كتب فيها تطوع ..الخ

منتصف الهيدر .. صورة وهي ما كتب فيها مشروع تصميم ... .. طبعا من بداية ( تصميم ) في السطر الثاني إلى (تطوعية)

أقصى اليسار .. صورة وهي التي فيها صور متتابعة ..

بقية الهيدر .. تكون خلفيات ..

أهلاً بك أخ غريب ..

ووصفك للتخطيط وصف صحيح ... والله يوفقك ...

م.صالح
15-May-2008, 02:42
سيتم شرح طريقة تقطيع هذا التصميم في الدرس القادم من خلال برنامج الفوتوشوب ...
ولن يستلزم هذا الدرس معرفة سابقة بالفوتوشوب كما سبق وأن أشرت .. فتابعونا ..

وأشكر من شارك معنا .. في هذا الدرس ..

درب الخير
15-May-2008, 10:41
السلام عليكم ...

مشاركة متأخرة :icon15: ............... و لكن البركة في الجماعة و في المشاركة :D

حاولت إلغاء المساحة البيضاء فوق و تحت الصورة و لم أنجح ..... فأرجو المعذرة .

م.صالح
16-May-2008, 05:42
حياك الله أخي درب الخير معنا .. في هذه الدورة ..

وستجد الجواب على هذا الرابط :

http://www.arabvolunteering.org/corner/avt13036.html

إبراهيم المطرفي
24-May-2008, 12:15
شكرا لك م.صالح متابع

والشباب ماقصروا في محاولاتهم وتعليقك على محاولاتهم واضحة

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

butterfly*02
25-May-2008, 02:18
http://up3.m5zn.com/get-5-2008-0pq4n81a744.JPG (http://up3.m5zn.com/showimage-5-2008-0pq4n81a744.JPG])

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

وآهـٍ لريح الجنة
20-Mar-2009, 06:44
بارك الله في جهودكم
التطبيق
http://www.banitamim.org/upfiles/4HZ54240.jpg