شهاب
30-01-2007, 12:18 PM
في هذا الموضوع سنتعرف على طريقة بسيطة لتصميم الصور و الكلمات المتحركة التي يمكن استخدامها في المواقع الشخصية أو في الردود والتواقيع في المنتديات.
فمن المعروف لدى الجميع أن الإنسان يلتفت إلى الأشياء المتحركة أكثر من التفاته إلى الأشياء الساكنة.
فمثلاً لو فكرت أن أضع في توقيعي إعلاناً لجذب انتباه الأعضاء إلى موضوعي الجديد، فأيهما ترونه أكثر لفتاً لانتباهكم؟
http://www.9m.com/upload/30-01-2007/0.53442011155283.jpg
http://www.9m.com/upload/30-01-2007/0.95118011154563.gif
ومن هنا يمكننا القول أن الغاية من استخدام الصور والكلمات المتحركة هي لفت الانتباه إلى أشياء مهمة ومحددة.
ومن الضروري التأكيد هنا.. أن الإسراف في استخدام العناصر المتحركة سيؤدي إلى تشتيت الانتباه بدلاً من جذبه!
[line]
طريقة إنشاء العناصر والنصوص المتحركة باستخدام برنامجي الPhotoShop والImageReady :
ــــــــــــــــــــــــ
• في برنامج الPhotoShop
- افتح ملف جديد وليكن مثلاً بقياس 500 عرض × 100 طول.
- اكتب أي نص نريده، على سبيل المثال "ملتقى رابطة الواحة الثقافية"
- اضغط بالزر الأيمن للفأرة على طبقة النص ثم اختر Blending Option أو اضغط مرتين على طبقة النص.
- من مربع Drop Shadow نختار الإعدادات التالية:
http://www.9m.com/upload/30-01-2007/0.277011154476.jpg
- من مربع Color Overlay نختار اللون الأحمر -أو أي لون آخر مختلف- كما بالصورة التالية:
http://www.9m.com/upload/30-01-2007/0.16555011153254.jpg
- انتقل الى برنامج الImageReady بالضغط على الأيقونة الموضحة في الصورة:
http://www.9m.com/upload/30-01-2007/0.99632011155155.jpg
ــــــــــــــــــ
• في برنامج الImageReady
- تأكد من إظهار صناديق أدوات الـLayers و الـAnimation.. وذلك من خلال قائمة Windows.
- في صندوق ال Layers نظهر التنسيقات الخاصة بطبقة النص بالضغط على السهم الموجود بجانب اسم الطبقة، ثم أخفي التنسيق الخاص باللون.. وذلك بإزالة إشارة العين من أمام مربع Color Overlay.. كما بالصورة التالية:
http://www.9m.com/upload/30-01-2007/0.165011154849.jpg
- في صندوق ال Animationأدرج إطار جديد بالضغط على الأيقونة المحددة بالصورة التالية:
http://www.9m.com/upload/30-01-2007/0.819480111508.jpg
- قم بتفعيل الإطار الجديد بالضغط عليه مرة واحدة.
- من صندوق الLayers أظهر تنسيق اللون بإعادة إشارة العين أمام مربع Color Overlay.
- أدرج إطار جديد ثم أخفي التنسيق مجدداً.. ثم أنشئ إطاراً آخر وأظهر التنسيق.. وهكذا كرر ذلك عدداً من المرات، حتى يكون مربع الAnimation لديك بالشكل التالي:
http://www.9m.com/upload/30-01-2007/0.7320111555.jpg
- في صندوق ال Animation حدد إطارات الحركة بالضغط على الإطار الأول مع الضغط على زر Shift من لوحة المفاتيح ثم الضغط على الإطار الأخير مع الاستمرار في الضغط على زر Shift.
- نغير مدة مكوث الإطارات وذلك بالضغط على الوقت بجانب أحد الإطارات - أثناء بقاء الإطارات محددة- ثم نختار أحد التواقيت الموجودة أو حدد أي وقت آخر من خلال الضغط على Other. ولمثالنا هذا نختار 0.2 ثانية.
http://www.9m.com/upload/30-01-2007/0.76112011155113.jpg
- من صندوق الLayers يمكننا الآن حذف إطار الخلفية البيضاء إن أردنا.. وذلك بتفعيل طبقة الخلفية ثم الضغط على زر Delete في لوحة المفاتيح.
- لحفظ الملف على شكل صورة Gif.. من قائمة File ثم Save Optimized As أو بالضغط على Ctrl+Shift+Alt+S من لوحة المفاتيح.
وهذه هي النتيجة النهائية:
http://www.9m.com/upload/30-01-2007/0.43133011155366.gif
ـــــــــــــــــــــــــ ـــــــــــــــ
لتحميل الدرس على شكل ملف PDF
- اضغط هنـــــــــا - (http://rapidshare.com/files/14069334/animation_pics.pdf.html)
[line]
بقي أن أقول أن برنامج الImageReady يقدم الكثير من المزايا التي يمكن من خلالها على الحصول على نتائج رائعة جداً..
وقد أتمكن مستقبلاً بإذن الله من تقديم طرق وأفكار جديدة في هذا المجال..
ختـــاماً.. أرجو أن يكون الموضوع قد نال على رضاكم..
و تقبـــــــلوا تحيــــــاتي
فمن المعروف لدى الجميع أن الإنسان يلتفت إلى الأشياء المتحركة أكثر من التفاته إلى الأشياء الساكنة.
فمثلاً لو فكرت أن أضع في توقيعي إعلاناً لجذب انتباه الأعضاء إلى موضوعي الجديد، فأيهما ترونه أكثر لفتاً لانتباهكم؟
http://www.9m.com/upload/30-01-2007/0.53442011155283.jpg
http://www.9m.com/upload/30-01-2007/0.95118011154563.gif
ومن هنا يمكننا القول أن الغاية من استخدام الصور والكلمات المتحركة هي لفت الانتباه إلى أشياء مهمة ومحددة.
ومن الضروري التأكيد هنا.. أن الإسراف في استخدام العناصر المتحركة سيؤدي إلى تشتيت الانتباه بدلاً من جذبه!
[line]
طريقة إنشاء العناصر والنصوص المتحركة باستخدام برنامجي الPhotoShop والImageReady :
ــــــــــــــــــــــــ
• في برنامج الPhotoShop
- افتح ملف جديد وليكن مثلاً بقياس 500 عرض × 100 طول.
- اكتب أي نص نريده، على سبيل المثال "ملتقى رابطة الواحة الثقافية"
- اضغط بالزر الأيمن للفأرة على طبقة النص ثم اختر Blending Option أو اضغط مرتين على طبقة النص.
- من مربع Drop Shadow نختار الإعدادات التالية:
http://www.9m.com/upload/30-01-2007/0.277011154476.jpg
- من مربع Color Overlay نختار اللون الأحمر -أو أي لون آخر مختلف- كما بالصورة التالية:
http://www.9m.com/upload/30-01-2007/0.16555011153254.jpg
- انتقل الى برنامج الImageReady بالضغط على الأيقونة الموضحة في الصورة:
http://www.9m.com/upload/30-01-2007/0.99632011155155.jpg
ــــــــــــــــــ
• في برنامج الImageReady
- تأكد من إظهار صناديق أدوات الـLayers و الـAnimation.. وذلك من خلال قائمة Windows.
- في صندوق ال Layers نظهر التنسيقات الخاصة بطبقة النص بالضغط على السهم الموجود بجانب اسم الطبقة، ثم أخفي التنسيق الخاص باللون.. وذلك بإزالة إشارة العين من أمام مربع Color Overlay.. كما بالصورة التالية:
http://www.9m.com/upload/30-01-2007/0.165011154849.jpg
- في صندوق ال Animationأدرج إطار جديد بالضغط على الأيقونة المحددة بالصورة التالية:
http://www.9m.com/upload/30-01-2007/0.819480111508.jpg
- قم بتفعيل الإطار الجديد بالضغط عليه مرة واحدة.
- من صندوق الLayers أظهر تنسيق اللون بإعادة إشارة العين أمام مربع Color Overlay.
- أدرج إطار جديد ثم أخفي التنسيق مجدداً.. ثم أنشئ إطاراً آخر وأظهر التنسيق.. وهكذا كرر ذلك عدداً من المرات، حتى يكون مربع الAnimation لديك بالشكل التالي:
http://www.9m.com/upload/30-01-2007/0.7320111555.jpg
- في صندوق ال Animation حدد إطارات الحركة بالضغط على الإطار الأول مع الضغط على زر Shift من لوحة المفاتيح ثم الضغط على الإطار الأخير مع الاستمرار في الضغط على زر Shift.
- نغير مدة مكوث الإطارات وذلك بالضغط على الوقت بجانب أحد الإطارات - أثناء بقاء الإطارات محددة- ثم نختار أحد التواقيت الموجودة أو حدد أي وقت آخر من خلال الضغط على Other. ولمثالنا هذا نختار 0.2 ثانية.
http://www.9m.com/upload/30-01-2007/0.76112011155113.jpg
- من صندوق الLayers يمكننا الآن حذف إطار الخلفية البيضاء إن أردنا.. وذلك بتفعيل طبقة الخلفية ثم الضغط على زر Delete في لوحة المفاتيح.
- لحفظ الملف على شكل صورة Gif.. من قائمة File ثم Save Optimized As أو بالضغط على Ctrl+Shift+Alt+S من لوحة المفاتيح.
وهذه هي النتيجة النهائية:
http://www.9m.com/upload/30-01-2007/0.43133011155366.gif
ـــــــــــــــــــــــــ ـــــــــــــــ
لتحميل الدرس على شكل ملف PDF
- اضغط هنـــــــــا - (http://rapidshare.com/files/14069334/animation_pics.pdf.html)
[line]
بقي أن أقول أن برنامج الImageReady يقدم الكثير من المزايا التي يمكن من خلالها على الحصول على نتائج رائعة جداً..
وقد أتمكن مستقبلاً بإذن الله من تقديم طرق وأفكار جديدة في هذا المجال..
ختـــاماً.. أرجو أن يكون الموضوع قد نال على رضاكم..
و تقبـــــــلوا تحيــــــاتي