درس تدرج المربعات

المقدمة

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

درس ممتع ،، وخطواته أشبه باللعبة ،،

أرجو أن تستمتع بتطبيقه ..

مثال
على الدرس

خطوات التنفيذ

الخطوة الأساسية

افتح مساحة عمل جديدة
عن طريق File >> New

سيظهر لك بوكس لاختيار الحجم ،، أدخل المقاييس التالية: 100 × 100
Pixels واجعل الخلفية شفافة = Transparent

لاحظ الصورة ...

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

الخطوة الأولى

استخدم أداة التحديد المربعة

،، ثم قم بتحديد ثلاثة
أرباع المساحة ،، وقبل أن تعقد الأمور ،، شاهد الصورة التوضيحية ..

إن كنت تجهل استخدام أداة التحديد المربعة

يرجى
اتباع الرابط التالي لمعرفة المزيد عن هذه الأداة ..

والآن سنقوم بتعبئة المساحة المحددة ،،
وفي الدرس سأقوم بتعبئته بالتدرج ،، لذا قم باختيار لونين تفضلهما ،، وهنا قمت
باختيار الوون الأخضر الغامق بدرجة 003300 للواجهة ،، واللون الأخضر الفاتح بدرجة
CCFFCC للخلفية ،،

،،

لمعرفة المزيد عن كيفية اختيار الألوان قم باتباع
الرابط التالي ..

بعد ان اخترت الألوان المطلوبة ،، قم
باختيار أداة التدرج
،، بالاعدادات الموضحة في
الصورة..

ثم طبق التدرج على المنطقة التي قمنا
بتحديدها ،،

شاهد مساحة العمل بعد تنفيذ التدرج

لقد قمت بسحب خط التدرج من أسفل زاوية اليمين إلى أعلى زاوية اليسار
بالشكل التالي \

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

الخطوة الثانية

والآن قم باختيار أداة الكتابة

واكتب النص الذي ترغبه ،، وفي الدرس
سأكتب عبارة (سبحان
الله والحمد لله)
بالنسبة لتفاصيل الخط المستخدم فهي كالتالي ..

نوع الخط: Hesham Fostat ،،
ملاحظة.. قد لا تجد هذا الخط في قائمة خطوطك ،، لأنني قمت
بتحميله من الانترنت ،، لكن بإمكانك استخدام الخطوط
الأخرى الموجودة لديك ..

اللون: الأبيض ودرجته FFFFFF

الحجم: 24 pt

والنتيجة

إن كنت تجهل استخدام أداة الكتابة

وكيفية التعامل مع تفاصيلها ،، اتبع الرابط التالي ..

مممممممم

ما رأيك بإضافة بعض الحيوية على الخط؟

خطوة إضافية

اتجه للقائمة الرئيسية وطبق التالي ..
Layer >> Layer Style >> Blending Options

تابع الصورة

سيظهر لك هذا البوكس الكبير طبق ما في الصورة ..

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

1- عند الرقم 1 ،، عليك وضع إشارة صح في المربع
الصغير الموجود بجانب كلمة Drop
Shadow
2- عند الرقم 2 ،، عليك أن تضغط على
كلمة Stroke نفسها
ــ لاحظ مكان وجود السهم في الصورة ــ ،، وستلاحظ تغير محتوى البوكس بالكامل
3- عند الرقم 3 أدخل رقم (1) في الشريط الأبيض
الصغير الموجود على يسار كلمة Size ،، ووبهذه
العملية ستحدد حجم الحدود التي ستحيط بالنص ،،
4- لاحظ مكان رقم 4 في الصورة السابقة ،، عليك
أن تضغط على المربع الصغير ــ غالباً ما يكون باللون الأحمر ،، ستلاحظ ظهور
بوكس الألوان،، اختر منه اللون الذي يعجبك ،، بالنسبة لي اخترت اللون الأخضر
الغامق بنفس الدرجة السابقة 003300 ..
5- بعد أن تنهي هذه الخطوات ،، اضغط على
OK

لاحظ النتيجة بعد تطبيق
العملية السابقة

ما رأيك بالنتيجة ،، أفضل بكثير

قبل أن ننتقل للخطوة الثالثة سندمج لير النص مع لير الخلفية الخضراء ،، كي لا
تربكنا في الخطوات القادمة ،، لذا قم بالضغط على Ctrl +
E من لوحة المفاتيح .. ثم انتقل للصفحة رقم 2 ..

الخطوة
الثالثة

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

تابع معي ..
المربع الأول ..

قم بإضافة لير جديد عن طريقة الضغط على المربع الصغير

الموجود أسفل بوكس
الليرات ..

شاهد وضع بوكس الليرات

ملاحظة .. إن لم تجد بوكس الليرات ،، أو لم تعرف كيف تضيف
لير جديد ،، اتبع الرابط التالي لمعرفة المزيد عن هذا الجانب المهم من الفوتوشوب

ثم اختر أداة التحديد المربعة

،، لكن هذه المرة سنغير
خصائصها .. ستجد خصائص الأداة أسفل القائمة الرئيسية ،، لاحظ الصورة

تابع معي الصورة من اليسار ،،
تلاحظ وجود المربع الأحمر على المربع الصغير ،، عليك ان تضغط هنا بالفأرة ــ الماوس
ــ
عند كلمة Style عليك ان تغير الخاصية من
Normal إلى Fixed Size ،، بعد
أن تغير الخاصية ستلاحظ تفعيل المربعين الأخيرين ،، Width
و Height ،، عليك ان تدخل رقم 15
px في كلاهما ،،

توضيح ..
قد تسأل ،، لما غيرت Style من Normal
إلى Fixed Size ،، في هذه الخطوة سنقوم برسم خمس
مربعات صغيرة ،، ويجب ان تكون هذ المربعات متساوية ومتناسقة كي نخرج بتصميم أنيق
ومتقن ،، خاصية Normal ستسمح لنا باستخدام أداة التحديد
كما نشاء ،، أي اننا نتحكم بالطول والعرض ،، كما فعلنا في الخطوة الأولى ..أما
Fixed Size فسيتيح لنا تحديد الطول والعرض الذي نريده
بالضبط ،، وهنا أدخلنا 15 × 15 ،، أي أننا حددنا المربع بطول وعرض 15 بيكسل ،، وكل
ما علينا فعله هو أن نضغط بالفأرة على مساحة العمل ،، وستلاحظ ظهرو المربع الصغير
في المكان الذي ضغط به ،، وسيكون حجم التححديد ثابتاً في كل مرة سنستخدمه بها
بالطول والعرض الذي أدخلناه في الخصائص،، وبعد أن تنتهي من هذه العملية ،، إذا رغبت
أن تعيد الحال لما كان عليه في السابق ،، قم بتغيير الـ Style
من Fixed Size إلى Normal
مجدداً ..

والآن اتجه لمساحة العمل ،،
واضغط على يسار مساحة العمل ،،

ملاحظة .. إن لم يظهر مربع التحديد في المكان
المطلوب ،، ضع مؤشر الماوس ــ الفأرة ــ في وسط مربع التحديد حتى يظهر لك سهم أبيض
صغير ،، ثم اضغط بالفأرة وحرك مربع التحديد في المكان الذي ترغبه ..

سنقوم الآن بتلوين المربع ،،
من قائمة الأدوات اختر اللون المطلوب ،، وقد اخترت درجة الأخضر الغامق مجدداً
003300 ،، وبعد ذلك اختر أداة السطل

ثم عبيء المربع الصغير باللون
الذي اخترته ..

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

وإن لم تجد أداة السطل

،، أو كنت تجهل كيفية استخدامه
اتبع الرابط التالية ..

لاحظ النتيجة

لقد قمت برفع التحديد عن طريق الضغط على
Ctrl + D من لوحة المفاتيح ..

وبذلك انتهينا من رسم المربع
الأول ..

المربع الثاني ..

أضف لير جديد بنفس الطريقة السابقة ..
شاهد بوكس الليرات بعد إضافة اللير الثاني ..

إن نسيت كيف تضيف لير جديد

.. اضغط هنا ..

أعد اختيار أداة التحديد
المربعة

واضغط فوق المربع الأول
،، وكما نبهت سابقاً ،، ضع الفأرة ــ الماوس ــ في منتصف المربع حتى يظهر لك السهم
الأبيض ثم قم بتحريكة للمكان المطلوب فوق المربع الأول مباشرةً ..

ملاحظة .. إن واجت صعوبة في وضع مربع التحديد
الثاني فوق الأول مباشرة أنصحك باستخدام أداة المكبر

لتكبير مساحة العمل والتحكم بالعناصر الموجودة بشكل أفضل ،، لمعرفة المزيد عن كيفية
استخدام أداة المكبر اتبع الرابط التالي ..

شاهد الصورة ..

ثم اختر لوناً مختلفاً ،، وقد
اخترت درجة أفتح من اللون الأخضر ورقمه .. 336633 ،،
باستخدام أداة السطل

قم بتلوين المساحة
المحددة ..

شاهد مساحة العمل بعد تلوين المربع ورفع علامة التحديد ..

المربع الثالث ..

نفس الطريقة السابقة ،، أضف لير جديد ..
شاهد الصورة ..

ثم اختر أداة التحديد المربعة

وضع مربع ثالث فوق
الأخير ..

اختر لوناً مناسباً ،، وقد قمت باختيار درجة أفتح من الدرجة السابقة ورقمها ..
669966 ،، وباستخدام أداة السطل

قمت بالتلوين ..

والآن ،، بعد أن كررت العملية 3 مرات ،،
تابع المرة الرابعة والخامسة وحدك بنفس الخطوات ،، ويفترض أن تصل في النهاية للشكل
التالي ..

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

والنتيجة المطلوبة ..

فقط للعلم ،، في المربع الرابع استخدمت اللون
الأخضر بدرجة 99CC99 ،، وفي المربع الخامس درجة اللون الأخصر هو CCFFCC

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

الخطوة الرابعة

الانتقال للإمج ردي ..

للانتقال يمكنك استخدام إحدى الطرق التالية:

الطريقة الأولى: File > Jump To > Adobe ImageReady
الطريقة الثانية: Shft + Ctrl + M
الطريقة الثالثة: هو الانتقال للامج ردي عن طريق الرمز الموجود أسفل قائمة الأدوات
مثل ما هو موضح في الصورة

اختر ما يناسبك ..

سنحتاج لشريط الحركة
Animation ،، غالباً
ما ستجده بمجرد فتح الإمج ردي ،،

ولكن إن لم يكن
موجوداً،،
اذهب للقائمة الرئيسية واختر Window
وتأكد من وجود إشارة صح على كلمة Animation

لاحظ الصورة

في الصورة السابقة ــ التي تمثل قائمة Window ــ
،، تأكد من وضع إشارة صح على كلمة Layers أيضاً
،، لأننا سنحتاج له بشكل أساسي في عملنا ،،

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

شاهد الوضع في صفحة الإمج ردي

اضغط على الصورة لتكبيرها

والآن .. إلى العمل ..

الخطوة الخامسة

في البداية سنعمل على بوكس الليرات في
الإمج ردي،، قم برفع علامة العين من ليرات المربعات كلها ،، فقط أبقي علامة العين
على اللير الذي في الأسفل ـ وهي لير الخليفية التي كتبنا
عليها ،، واسمه
Layer o ـ

شاهد الصورة ..

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

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

شاهد شريط الحركة بعد أن قمت بنسخ البرواز ،، ولاحظ مكان وجود مربع النسخ ..

والآن عد مجدداً إلى بوكس الليرات وأعد
علامة العين على لير المربع الأول واسمه Layer 1
شاهد الصورة ..

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

مرة أخرى ،، اتجه
لبوكس الليرات وأعد علامة العين على لير المربع الثاني واسمه Layer 2

ارجع لشريط الحركة وانسخ اللير الثالث كما فعنا في المرتين السابقتين ..

عد مرة أخرى لبوكس الليرات وأعد علامة العين على المربع الثالث واسمه
Layer 3 ،، وهكذا

هل استوعبت العملية ،، سهلة للغاية ،، عليك أن تكررها حتى تصل للمربع الخامس
Layer 5 ،، وما نفعله هو إضافة كل مربع في برواز جديد ،،
كي تبدو المربعات وكأنها تظهر فوق بعضها في خط مستقيم أثناء الحركة ،،

في النهاية سيكون شكل شريط الحركة كالتالي ..

الخطوة السادسة

إنها الخطوة النهائية ،، وهي ضبط توقيت الحركة ،، تلاحظ أسفل كل برواز في شريط
الحركة يوجد هذه العبارة
sec. O
،، اضغط عليه وأدخل التوقيت الذي تراه مناسباً ،، والتوقيت يعني المدة التي ترغب
ببقاء البرواز الواحد قبل أن يلحقة البرواز الذي يليه ،، وهنا اخترت مدة 0.2 لجميع
البراويز ،،

لاحظ كيفية اختيار التوقيت ..

ولكي تشاهد الحركة اضغط على رمز التشغيل
Play
الموجود أسفل شريط الحركة Animation ..

الخطوة الأخيرة

لا تنسى أن تخزن عملك الرائع ،، وذلك في الإمج ردي عن طريق:

File >> Save Optimized As

ثم اختر اسما مناسبا واضغط OK

والنتيجة النهائية

شكراً على المتابعة
جزاكم الله خير