درس و تصميم

بسم الله الرحمن الرحيم


ايها الشعب ولا اقولكم بلاش ندخول دوغغري

المهم ياجماعة الخير

هونيا < لغه عربيه متعوب عليها

راح انزل دروس تخص برامج التصاميم

وفي بدايه كل درس بكتب اسم البرنامج الخاص بالدرس



وشكريا :)

درس في الفوتوشوب

[IMG]http://www.pixel-d.com/blog/wp-*******/uploads/n1.png[/IMG]


أدري اني طولت عليكم والمفروض اني استحي على وجهي وابثركم بكذا موضوع بس مثل ماتعرفون العين بصيره واليد قصيرة ليت كل شي ننجزه بالنظر [IMG]http://www.pixel-d.com/blog/wp-*******/plugins/fckeditor-for-wordpress-plugin/smiles/msn/biggreen.gif[/IMG]
كآن وفرنا المراكض ورى السعف والنخل ( والله كان اعرستي وعيلتي بعد [IMG]http://www.pixel-d.com/blog/wp-*******/plugins/fckeditor-for-wordpress-plugin/smiles/msn/sad1.gif[/IMG][IMG]http://www.pixel-d.com/blog/wp-*******/plugins/fckeditor-for-wordpress-plugin/smiles/msn/Swaffff.gif[/IMG] )
حبيت اطرح لكم كيفية عمل بنر اعلاني بجميع خطواته .. راح يكون تركيزنا اكثر شي على برنامج الأميج ردي وخصوصاً الانميشين .. لعمل حركات نصوصيه كانت او صوريه .. والراعي الرسمي هو شركه موبايلي [IMG]http://www.pixel-d.com/blog/wp-*******/plugins/fckeditor-for-wordpress-plugin/smiles/msn/a6.gif[/IMG] <- صحيح انك مادريت عن هوى داري بس هنك عاد تجحدها ! [IMG]http://www.pixel-d.com/blog/wp-*******/plugins/fckeditor-for-wordpress-plugin/smiles/msn/icon111.gif[/IMG]

بدايةً لابد اننا نعرف جميع المقاسات للبنرات المستخدمه والمتداوله عبر النت ..


[IMG]http://www.pixel-d.com/blog/wp-*******/uploads/a0.jpg[/IMG]

راح نطبق الشرح على المقاس الاكبر لأني بيني وبينكم ماحب أحد يقيدني بمحكر دجاج [IMG]http://www.pixel-d.com/blog/wp-*******/plugins/fckeditor-for-wordpress-plugin/smiles/msn/confused.gif[/IMG] .. على قولة المشعوذة مريم وسعوا حزام الصراويل لابارك الله بالضيقه [IMG]http://www.pixel-d.com/blog/wp-*******/plugins/fckeditor-for-wordpress-plugin/smiles/msn/Swaffff.gif[/IMG]

<- ماودتس اتشقلبين نفستس وتبدين بالشرح [IMG]http://www.pixel-d.com/blog/wp-*******/plugins/fckeditor-for-wordpress-plugin/smiles/msn/sad1.gif[/IMG] !






[IMG]http://www.pixel-d.com/blog/wp-*******/uploads/b1.gif[/IMG]



نفتح مقاس عمل 728 × 90 بيكسل [IMG]http://www.pixel-d.com/blog/wp-*******/plugins/fckeditor-for-wordpress-plugin/smiles/msn/biggreen.gif[/IMG]
طبعاً [ بعد مانضبط الخلفيه ونختار الصور المناسبه ونكتب الاعلان المطلوب ونحط الحدود مع الحقوق .. وكل شغلنا هذا يكون بالفوتوشوب عقبها ننتقل لبرنامج الايمج ردي اذا كان
الاصدار الثامن .. بخلاف الاصدار العاشر فننتقل له عن طريق القائمه الرئيسية ****** --> Animation ]

مثل مانتم شايفين البنر يتكون من عندة حركات نصوصيه للاعلان وعلى كذا راح ناخذ كل جزئيه ونشرح فيه خطواته [IMG]http://www.pixel-d.com/blog/wp-*******/plugins/fckeditor-for-wordpress-plugin/smiles/msn/thumbs_up.gif[/IMG]

أولاً :
نبدأ بحركه كلمة ( متوفر الآن )
نلاحظ ان حركتها هو الظهور ثم الاختفاء !
نفتح صندوق الانميشين


ونظهر العين على كلمة متوفر الآن .. ونضيف 2 فريم
الفريم [ 1 ] راح نخلي اعداد الـ Opacity على 0 %

[IMG]http://www.pixel-d.com/blog/wp-*******/uploads/a1.jpg[/IMG]


الفريم [ 2 ] راح نخلي اعداد الـ Opacity على 100 %
ونحط اعدادت الوقت على 0.1 sec
[IMG]http://www.pixel-d.com/blog/wp-*******/uploads/a2.jpg[/IMG]



ونضغط على ( Tween ) اشرت عليها باللون الأورانج ..
تطلع لنا هالقائمه ونخلي الاعدادات كما هي بالصورة .. وموافق
[IMG]http://www.pixel-d.com/blog/wp-*******/uploads/a3.jpg[/IMG]


بعد مانضغط على ( Tween ) بيكون عندنا 7 فريمات عقب أول فرمين .. ولاحظوا حركه اظهار الحركه بعد ماكانت مختفيه ..

[IMG]http://www.pixel-d.com/blog/wp-*******/uploads/a4.jpg[/IMG]

عقبه نضيف فيرم 8 ونخلي اعداد الـ Opacity على 0 % ونضغط على ( Tween ) مره آخرى
عشان تختفي لنا الكلمه من جديد [IMG]http://www.pixel-d.com/blog/wp-*******/plugins/fckeditor-for-wordpress-plugin/smiles/msn/regular_smile.gif[/IMG] ..

.
.

ثانياً :
حركه شعار موبايلي [ 1 ]
راح نستخدم بهالحركه ايقونه الممحاة .. فنشتغل على الليرات هنا فخلوا صندوق الانميشن والفيرمات على جنب
راح نبدأ بالشعار كامل ونسوي له نسخ للير 2 ونمسح جزء منه – نسخه لير 3 ونمسح جزء منه – نسخه لير 4 ونمسح جزء منه
وهكذا لمين نخلص من الشعار كله ويختفي عنا كلياً .. فـ تقريبا يطلع لنا 14 لير

عقبه نروح لصندوق الانميشن ونضيف 14 فيرم
ونحط اعدادت الوقت على 0 sec
ونخفي جميع الأعين ..
أول فريم : وراح يبدأ لنا طبعاً من عند رقم [ 9 ] نظهر لير العين على أول لير للشعار الممسوح رقم [ 1 ]
ثاني فريم : نظهر لير العين على ثاني لير للشعار الممسوح رقم [ 2 ]
ثالث فريم : نظهر لير العين على ثالث لير للشعار الممسوح رقم [ 3 ]
رابع فريم : نظهر لير العين على رابع لير للشعار الممسوح رقم [ 4 ]
الــــــــــــخ الفيرم [ 14 ] يظهر لنا الشعار كامل

[IMG]http://www.pixel-d.com/blog/wp-*******/uploads/a5.jpg[/IMG]


ثالثاً :
حركه شعار موبايلي [ 2 ]
وهي حركه سريعه يجيك الشعار راكض من اليسار لليمين < [IMG]http://www.pixel-d.com/blog/wp-*******/plugins/fckeditor-for-wordpress-plugin/smiles/msn/ph34r.gif[/IMG]
مهوب حنا وقفنا عند آخر فريم رقمه لير [ 14 ] اللي يظهر لنا الشعار كامل ! هذا انخليه كما هو
ونضيف فريم ثاني ونظهر عين الشعار الرقم نفسه [ 14 ] ونمشي به بالماوس لجهة اليسار
ونضبط اعدادت الوقت على 0 sec
ثمن نضغط على ( Tween )
ونلاحظ ان كلمة موبايلي تحركت معه على شكل حركه اظهار بسبب اننا اظهرنا العين يوم حركنا الشعار
[IMG]http://www.pixel-d.com/blog/wp-*******/uploads/a6.jpg[/IMG]


رابعاً :
حركه صورة ( الأيفون )
وهي حركه اظهار الصوره .. والخطوات فيها مثل حركه كلمه ( متوفر الآن ) السابق شرحه أعلاه ..
نضبط اعدادت الوقت على 0 sec
[IMG]http://www.pixel-d.com/blog/wp-*******/uploads/a7.jpg[/IMG]



خامساً :
حركه iPhone 4 in white
وهي حركه تجيك نازله من فوق وترتطم على سطح الارض وتنقز مرتن ثانيه وترجع للقاع مثل لاجدعت لك كأس وقام يناقز بالارض <- لاعاد تشرحين تكفين [IMG]http://www.pixel-d.com/blog/wp-*******/plugins/fckeditor-for-wordpress-plugin/smiles/msn/sad1.gif[/IMG] !
نظهر العين على كلمة ايفون
الفريم الأول : نسحب الكلمه بالماوس لـ فوووق لمين تختفي
نضيف فريم ثاني : ونسحب الكلمة بالماوس لـ تحت ونحطه بالوسط
ونضبط اعدادت الوقت على 0 sec
ثمن نضغط على ( Tween )

[IMG]http://www.pixel-d.com/blog/wp-*******/uploads/a8.jpg[/IMG]

بعدها نضيف 4 فيرمات
الفريم الأول : نرفع الكلمه لفوق بضغطتين بالماوس
الفريم الثاني : ننزل الكلمه بضغطتين بالماوس
الفريم الثالث : نرفع الكلمه لفوق بضغطه بالماوس
الفريم الرابع : ننزل الكلمه بضغطه بالماوس

عشان تطلع لنا حركه المناقز <- [IMG]http://www.pixel-d.com/blog/wp-*******/plugins/fckeditor-for-wordpress-plugin/smiles/msn/Swaffff.gif[/IMG]

.
.

سادساً :
حركه الـ Avilable
ننسخ لير الكلمة مرتين بحيث يطلع لنا ليرين ..
اللير الأول : نطبق عليه من قائمة فلتـر Blur --> Motion Blur ونحط اعداداته على 50 %
بالفريم الأول : نظهر عين اللير الأول اللي سوينا عليه الفلتر .. ونخفي عين اللير الثاني اللي هي كلمه Avilable
ونسوي عليه حركه الإخفاء ثم الاظهار كما شُرح سابقاً .. بالـضغط على ( Tween )
الفيرم الثاني : اللير الثاني لـ كلمه Avilable نخليه كما هو + نخفي عين اللير الأول
[IMG]http://www.pixel-d.com/blog/wp-*******/uploads/a9.jpg[/IMG]

8

يتبع

سابعاً :
حركه iPhone 4 in white
وهي حركة ( التلاشي )
مثل حركه االظهور ثم الاختفاء للكلمه بس باختلاف نقطه بسيطه
وهو انه نحط اعدادات الدمج لكلا الليرين Dissolve بعد مانظهر العين على الكل

ونضبط التالي :
الفريم [ 1 ] راح نخلي اعداد الـ Opacity على 100 %
الفريم [ 2 ] راح نخلي اعداد الـ Opacity على 0 %
وناقف على الفريم الثاني ونضغط على ( Tween )

[IMG]http://www.pixel-d.com/blog/wp-*******/uploads/a10.jpg[/IMG]

وبكذا نكون انتهينا من عمل البنر عسى بس فهمتوا والا هين ..! <- والله ماضنتي لكن لاصبختكم بالزبيريه فهمتوا [IMG]http://www.pixel-d.com/blog/wp-*******/plugins/fckeditor-for-wordpress-plugin/smiles/msn/biggreen.gif[/IMG]

.
.

يبقى نقطه أخيره وهي كيف نصغر البنر !
وخل نقول التصغير بمقاس 468×60 <- مافيه طريقه خاصه للتصغير لازم تعيد جميع الخطوات من جديد فقط الاختلاف انه بيوفر لك التصميم و الفكره والاخراج .. لكن الخطوات هي نفسها بتسويها بنفس البنر للصغير [IMG]http://www.pixel-d.com/blog/wp-*******/plugins/fckeditor-for-wordpress-plugin/smiles/msn/sad1.gif[/IMG]
عشان كذا المصممين يطلبون سعر خاص للبنر الكبير و سعر آخر للبنر الصغير .. حنا نقدر نصغير البنر هما هو لكن بيطلع مقاسات مختلفه عن المقاس المطلوب !
عشان كذا نظراً لاختلاف مقاسات البنر ( المحدده المطلوبه من قبل الشخص ) نضطر انه نعيد التطبيق والخطوات من جديد [IMG]http://www.pixel-d.com/blog/wp-*******/plugins/fckeditor-for-wordpress-plugin/smiles/msn/whatchutalkingabout_smile.gif[/IMG] <- طبت من السطح


بخلاف لو بنصغره على المقاس اللي يحافظ فيه على النسبه والتناسب لحجم البنر .. مع الاحتفاظ بجميع الخطوات ..!
فيعطينا هالمقاسات

[IMG]http://www.pixel-d.com/blog/wp-*******/uploads/b00.jpg[/IMG]


[IMG]http://www.pixel-d.com/blog/wp-*******/uploads/b2.gif[/IMG]


نلقاكم بدورس آخرى [IMG]http://www.pixel-d.com/blog/wp-*******/plugins/fckeditor-for-wordpress-plugin/smiles/msn/a060.gif[/IMG]