درس تصميم شريط سينمائي

?

السلام عليكم
درس جديد ورائع
وبنفس الوقت طويل شوي...
المهم درس رائع جداً
-------------
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بسم الله الرحمن الرحيم
والصلاة والسلام على أشرف المرسلين .. سيدنا محمد وعلى آله وصحبه أجمعين

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

كاتبة الدرس:المصمم زيزو

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

لكني لا أملك الشريط السينمائي [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] !!
كنت أتمنى أن أسمع منك هذا الرد [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] ..
في هذه الحالة .. عليك أن تمر على درس: [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط].. فقد تم شرح طريقة رسم الفيلم السينمائي بالتفصيل وبالصور التوضيحية ..حيث أنك من خلال الدرس .. سترسم الشريط .. ثم ستحوله لـ شكل Shape [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] ..

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

كل ما عليك فعله الآن هو أن تحمل الملف .. ثم تنسخه .. وتلصقه في ملف الأشكال عندك ..

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
والآن .. يمكننا المتابعة ..

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

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

إذا كان حجم الصورة كبير جداً .. قم بتصغيره ..

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
خطوات التنفيذ
الخطوة الأولى
قم بفتح مساحة عمل جديدة .. عن طريق File >> New
بالإعدادات التالية ..
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ستلاحظ ظهور مساحة العمل البيضاء أمامك ..

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
في هذه الخطوة .. اختر أداة الأشكال Shape [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة].. ومن ثم اختر شكل الشريط السينمائي ..

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

والآن انتقل إلى مساحة العمل .. وقم برسم الشكل .. انصح بالضغط على Shiftمن لوحة المفاتيح أثناء رسم الشكل .. حتى نحافظ على الأبعاد .. ونحصل علىالرسم الحقيقي للشكل ..

بعد أن ترسم الشكل .. اختر أداة المؤشر [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] .. ثم قم بتحريك الفيلم السينمائي للأعلى ..

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

هل انتهيت من الرسم [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

انتقل الآن للخطوة الثالثة ..

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

لن تلاحظ أي تغيير على مساحة العمل ..

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

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

*
سنكرر الآن نفس العملية السابقة .. اتجه لبوكس الليرات مرة آخرى .. ثم انسخ اللير الذي نسخته قبل قليل ..
بعدها .. اختر أداة المؤشر [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] باستخدام السهم الأسفل .. انقل الشريط السينمائي لأسفل الشريط السابق .. تماماً كما فعلت قبل قليل ..

لاحظ وضع بوكس الليرات بعد الانتهاء من هذه العملية ..
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

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

سؤال: في بوكس الليرات .. عندي 4 ليرات .. واحدة للخلفية .. وثلاث ليرات للشريط ..
كيف أدمج ليرات الشريط .. دون أن أدمجها مع الخلفية؟؟ [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

لذا تابع مع هذه الخطوة البسيطة ..

خطوة دمج الشريط السينمائي

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

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

بعد أن ترفع علامة العين عن لير الخلفية .. ستلاحظ أن المساحة البيضاءاختفت من مساحة العمل .. وظهرت خلفية الشطرنج الرمادية .. تابع الخطوةالتالية ..

اتجه لشريط القوائم .. وطبق التالي ..
Layer >> Marge Visible
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

واختصارها من لوحة المفاتيح .. Ctrl + Shift + E

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

شاهد وضع بوكس الليرات بعد أن قمنا بدمج لير الخلفية ..
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
هل انتهيت ؟؟

هيا معي للخطوة الرابعة

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الخطوة الرابعة
اترك الفيلم السينمائي قليلا .. واذهب لإحضار بعض الصور ..

انتقل لشريط القوائم .. وطبق التالي ..
File >> Open
استخرج الصور من المكان الذي قمت بتخزينها فيه ..
لاحظ الصور التي سأستخدمها بعد أن قمت بفتحها في برنامج الفوتوشوب ..
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
بعد أن قمت بفتح الصور المطلوبة في البرنامج .. اضغط بالفأرة ـ الماوس ـ على أية صورة لتفعيلها .. ثم انسخها ..
هناك طريقتان للنسخ :
الطريقة الأولى: من لوحة المفاتيح .. اضغط على Ctrl + A لتحديد الكل .. ثم Ctrl + C لنسخ الصورة ..
وهي طريقة مختصرة وسريعة .. لكن أحياناً قد لا يتم التنفيذ بسبب خلل طارئ في لوحة المفاتيح ..
الطريقة الثانية وهي الأضمن: اتجه لشريط القوائم .. واضغط على قائمة Select ثم اختر All
بعدها اتجه مباشرة لقائمة Edit ثم اختر Copy ..
ثم اتجه لمساحة عمل الفيلم السينمائي ، وألصق ما نسخته .. وذلك عن طريق Ctrl + V أو Edit >> Paste

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

ما رأيك ؟؟

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

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الخطوة الخامسة

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

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

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

قم بالتعديلات المبينة في الصورة ..
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
تتبع الأرقام على الصورة ثم اقرأ الشرح التالي:
1- في البداية .. اتجه عند Style: وقم بتغيير الاختيار الموجود من Normalإلى Fixed Size .. ستلاحظ أن خانتي الـ Width = العرض .. والـ Height =الطول .. قد تم تفعيلهما ..
2- أدخل رقم 200 عند Width = العرض ..
3- والرقم 120 عند Height = الطول ..

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

شاهد الصورة التوضيحية بعد أن قمت بوضع التحديد في المكان الملائم من الصورة:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

والآن سنقوم بعكس التحديد ..
لدينا طريقتين لتنفيذ ذلك .. الطريقة الأولى من لوحة المفاتيح .. أضغط على Ctrl + Alt + I
أو من شريط القوائم اتجه لقائمة Select واختر Inverse
شاهد مساحة العمل بعد تنفيذ الأمر السابق ..
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
والآن من لوحة المفاتيح .. اضغط على Delete .. ستلاحظ أن المناطق الغير مرغوب فيها قد تم حذفها ..

غالباً ما ستجد مفتاح Delete في المنطقة المحددة بدائرة حمراء في الصورة التالية ..
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

يمكنك الآن أن ترفع التحديد .. وذلك بالضغط على Ctrl + D ..

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

شاهد مساحة العمل بعد تنفيذ ما سبق ..
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
انتهينا من الصورة الأولى .. لنحضر الصورة الثانية ..
انتقل للخطوة السادسة ..
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الخطوة السادسة
سنكرر ما قمنا به في الخطوتين الرابعة والخامسة ..
سأمر على الخطوات بشكل سريع ..
1- اضغط على إحدى الصور التي قمت بفتحها .. ثم قم بتحديدها عن طريق Ctrl + A .. ومنثم انسخها Ctrl + C.
2- اضغط بالفأرة على مساحة عمل الفيلم .. ثم الصق ما قمت بنسخه .. وذلك عن طريق Ctrl + V
3- اختر أداة التحديد المربعة .. وبنفس الأعداد التي تم توضيحها في الخطوة الخامسة .. ( Fix Size - 200 × 120 )
4- اضغط بالفأرة على مساحة العمل .. بعد أن تتأكد من تفعيل لير الصورة ـالصورة التي قمت بلصقها مؤخراً ـ ستلاحظ ظهور علامة التحديد .. باستخدامالأسهم في لوحة التحكم .. اختر المنطقة التي ترغب في الإبقاء عليها منالصورة ..
5- قم بعكس التحديد .. وذلك بتطبيق الأمر التالي من لوحة المفاتيح Ctrl + Shift + I ..
6- من لوحة المفاتيح اضغط على Delete لحذف الأجزاء الغير مرغوب فيها .. ثم ارفع التحديد باستخدام Ctrl + D ..
7- اختر أداة المؤشر [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]، ثم من لوحة المفاتيح، أضغط على الأسهم لتجعل الصورة الجديدة أسفل الصورة السابقة .. مع ترك مسافة بسيطة بينهما ..

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

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

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

اخر شي
الخطوة الثامنة
بما أننا قمنا بشرح كيفية الدمج في وقت سابق .. سأذكر الخطوات باختصار ..
اتجه لبوكس الليرات .. وارفع علامة العين من لير الخلفية Background .. ثم طبق أمر الدمج إما من لوحة المفاتيح Ctrl +Shift + E
أو من شريط القوائم .. Layer >> Marge visible
لا تنسى أن تعيد علامة العين للير الخلفية بعد أن تنتهي من عملية الدمج ..

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

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

تأكد من تحديد لير الشريط السينمائي .. ثم انتقل لقائمة Filter وطبق الأمر التالي ..
Filter >> Distort >> Shear
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

إن واجهتك مشاكل في إتباع الخطوات على الصورة .. تفضل بقراءة الشرح:
1- هذه النقطة واضحة .. فقد اختر Repeat Edge Pixels ..
كما لاحظت فإن المخطط البياني يحتوي على خط مستقيم .. وهذا الخط عبارة عنمسار الصورة .. أي أن أية حركة ستحدثها على الخط المستقيم في المخططالبياني بنافذة Shear سيتم تطبيقه على التصميم .. وفي درسنا .. سيتمتطبيقه على الشريط السينمائي .. لذا .. وبواسطة الماوس ـ الفأرة ـ سنقومبتحريك الخط .. قليلاً إلى اليسار كما هو موضح في رقم 2 .. وقليلاً لليمين.. كما هو في الرقم 3 ..

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

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

الخطوة العاشرة
في هذه الخطوة سنقوم بإضافة ظل للتصميم ..
من شريط القوائم .. اتبع الخطوة التالي ..

Layer >> Later Style >> Drop Shadow
لاحظ الصورة ..
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

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

سنترك جميع الإعدادات على حالها .. فقط سنقوم بتغيير الآتي:
1- عند Angle أدخل رقم 150 ..
2- وعند Distance أدخل رقم 20
3- ثم اضغط على OK
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

هكذا .. وصلنا للنتيجة النهائية ..

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

جزاكم الله خيراً على حسن المتابعة ..

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

?

» درس تصميم اشكال متطايرة
» تصميم موقع بالفلاش
» تصميم كرة متحركة ثلاثية الأبعاد
» أنااكشف لك شعور تجهله }{تصميم}
» [ الدرس التاسع ] تصميم بطاقة فلاشية من الصفر