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

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



م.صالح
24-May-2008, 01:01
تعلمنا في الدرس الماضي طريقة تقطيع (تشريح) التصميم من خلال برنامج الفوتوشوب.
وفي هذا الدرس سنتعلم طريقة ضبط إعدادات وحفظ الشرائح كصور متفرقة بحيث يمكننا استخدامها في بناء موقع على الانترنت.

وهذا الدرس أسهل درس في هذه الدورة.

بعد الانتهاء من تقطيع التصميم يظهر عندنا بالشكل التالي:

http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson4/layout.gif

ويتضح أن الصور التي قمنا بتقطيعها تظهر حدودها باللون الأزرق بينما الشرائح التلقائية تظهر حدودها باللون الرمادي.

نذهب الآن إلى الأمر File –> save for web

http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson4/save_for_web.gif

ستظهر لنا النافذة التالية

http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson4/sfw_01.gif

ومواصفات الصورة الناتجة هي:
رقم الصورة.
حجم الصورة.
الوقت المتوقع لظهور الصورة إذا كانت سرعة الاتصال بالانترنت 28 كيلوبايت في الثانية.

وحتى يظهر كامل التصميم نختار الأمر Fit on screen من القائمة المنسدلة التي بالركن الأيسر السفلي.

الآن عند اختيار أي شريحة وذلك باختيار أداة تحديد الشرائح ستظهر إعدادات الشريحة.
لدينا أكثر من نوع للصور المستخدمة في الانترنت وسنركز على نوعين فقط GIF و JPJ.
وعند اختيار أي نوع ستكون هناك خيارات أخرى هي عبارة عن مستويات الجودة .. ودائما نحاول أن نقلل الحجم ما لم يؤثر على الجودة ...

http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson4/setting.gif

http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson4/jpg_q.gif

http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson4/gif_q.gif

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

فعلى سبيل المثال الشريحة التي تحتوي على عنوان الموقع.. فمن الواضح أن بها لونين فقط ومن الأفضل أن تكون GIF الآن سنختار النوعين ونرى الفرق بينهما ..
عند اختيار النوع JPG الدرجة High تظهر الصورة التالية وحجمها حوالي 5 كيلوبايت.

http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson4/text_jpg.jpg

بينما عند اختيار النوع GIF حصلنا على الحجم 3 كيلو بايت وجودة الصورة أفضل من النوع JPG في هذه الحالة..

http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson4/text_gif.gif

بينما لو أخذنا صورة الكرة الأرضية – فكما قلنا- أن الأفضل أن تكون JPG وذلك لأنها صورة.
سنجرب النوعين ونرى الفرق بينهما ..
عند اختيار النوع GIF تظهر لنا الصورة التالية وحجمها 30 كيلوبايت.

http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson4/photo_gif.gif

بينما عند اختيار النوع JPG فتظهر لنا الصورة التالية وحجمها 15 كيلو بايت..

http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson4/photo_jpg.jpg

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

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

طبعا هناك العديد من الخصائص والخيارات في هذه النافذة لم أتطرق إليها للأمور التالية:
حتى يكون الدرس سهلاً.. وما ذُكِر في هذ الدرس هي الأمور المهمة في الموضوع.
هناك العديد من الخيارات سنقوم بعملها من خلال برنامج الفرونت بيج حيث أن برنامج الفرونت بيج الأسهل في تنفيذها وأكثر احترافاً من الفوتوشوب في مجال تصميم صفحات المواقع و HTML .

بهذا الدرس تكون الدورة الأولى قد انتهت وأتمنى أن تكون مفيدة ونافعة وسهلة..

ومن لديه أي استفسار فلا يتردد في السؤال ...

ولا تنسوا تطبيق هذه المعلومات في تصميم المواقع التطوعية والتي سنبدأ فيها خلال الأسبوعين القادمين بإذن الله تعالى.

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

إبراهيم المطرفي
24-May-2008, 12:45
جزاك الله خيرا

معلومات قيمة وشرح رائع .

ما رأيك بإمتداد png.

في رعاية الله

م.صالح
25-May-2008, 05:04
مرحباً أخي إبراهيم ..

وهذه لفتة جيدة منك أخي الحبيب ..

ومن الأفضل التطرق إلى نبذه عن الامتدادت JPG و GIF و PNG باختصار:

الامتداد JPG فهو يدعم 16 مليون لون، لذا فهو أفضل في حال الصور الفتوغرافية والصور التي تحتوي على تدرجات لونية كثيرة أو ظل، ويتميز بصغر حجمه.

الامتداد GIF فهو يدعم الصور ذات الألوان القليلة والتي هي في ضمن الألوان التي يدعمها وعددها 256 لون فقط. ويتميز بقبوله للشفافية والحركة.

وبالنسبة للامتداد png فهو امتداد جديد وتم تطويره للاستخدام في تصميم المواقع..
ومن مميزات هذه الهيئة قبولها للشفافية:
ولدينا نوعين من هذا الامتداد:
PNG-8: وهي أقرب للهيئة GIF في دعمها ل 256 لون، وحجمها قد يكون أقل من حجم ملف GIF مع نفس الجودة.
:PNG-24 وهي أقرب لهيئة JPG من حيث دعمها ل 16 مليون لون بالإضافة إلى دعمها للشفافية بشكل متميز، إلا أن عيبها هو أن حجمه أكبر من حجم JPG ونفس الجودة.

بالإضافة إلى أن PNG ليست مدعومة من كل متصفحات الانترنت، وستكون بديلاً لهيئة GIF. وستكون مدعومة من قبل المتصفحات الحديثة.

إبراهيم المطرفي
25-May-2008, 01:27
جزاك الله خيرا .. يجب أن تكون هذه الفروقات في بال المصمم دائما .

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

في رعاية الله

butterfly*02
25-May-2008, 03:37
طيب فين اقدر اشوف التغيرات اللي اسويها على الصورة يعني المعاينة من فين ولا في طريقة ثانية اعذروني مبتدئة ومنكم استفيد
ويعطيك ألف عافية م.صالح ولا يحرمك الاجر

م.صالح
25-May-2008, 09:49
أهلاً بك butterfly
نفس المنتطقة التي بالمنتصف تظهر فيها معاينة أثر التأثير على الجودة وأسفل الصورة نرى الأثر على حجم الصورة...
وبالإمكان تقسيم الشاشة إلى قسمين وأربعة أقسام معاينة تأثير لكل قسم ومقارنة كل خيار على التصميم من حيث الجودة والحجم كما في الصورة التالية..

وهذا الدرس تم إيضاحه بهذه الطريقة ليناسب المبتدئين.. ومن لديه أي سؤال فلا يتردد في طرحه هنا ..

http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson4/4-up.jpg

احمد حسن
27-May-2008, 06:01
جزاك الله خير اخوي وتم تطبيق الدرس بنجاح
جعل الله هذا العمل في موازين حسناتك

بدريه احمــد
02-Jun-2008, 04:51
مجهود تشكر عليه استاذ صالح
واشكر عرضك للامتدادات " كنت رح اسال عنها "
يعطيك العافيه

وآهـٍ لريح الجنة
20-Mar-2009, 10:41
جزيت الخير
تم التطبيق
ولله الحمد