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

ahmad

مدير المنتدى
طاقم الإدارة
لكي نصعد السلم فعلينا ان نصعد من الاسفل للاعلى
ومن هنا نبدا ... فاتمنى من الجميع ومن لديه معلومه ان لايبخل بها علينا وبالنسبه عني فلن ابخل باي نقطه اعرفها
كما احب ان اذكر في حالة ان نسيت شئ في الشرح فاتمنى تنبيهي ومن لديه اي استفسار او اي نقطه غامضه فاتمنى ان يسئل عنها كي لاتتكاثر عليه نقاط الغموض في حال الانتقال من درس الى اخر
سوف تتمثل الدروس المطروحه في التصوير الجزئي لاي شئ بحيث ساجعل الصوره تشرح نفسها كي لايحس احدنا بعدم فهم لاي شرح
وننطلق بحفظ الله ورعايته
قم بفتح برنامج الفوتوشوب Adobe Photoshop 7.0 ME كما في الصوره
normaly-1-s.jpg

- قم بالضعط من اعلى برنامج Adobe Photoshop 7.0 ME جهة اليسار على كلمة file
ستندرج لك قائمه ومن ضمنها كلمة new (اضغط عليها)
normaly-2.jpg

3- سيظهر لك مربع حوار وسجل به مثلما تشاهد المحدد باللون الاحمر
العرض = width = 780
الطول = height = 460
الخلفيه = white
ثم ok
normaly-3.jpg

سوف يظهر لك مادونته بالاعلى
normaly-4-s.jpg

انتهينا من مرحلة تجهيز الاساس
نبدى الان بالترميم
من جهة اليمين ستشاهد مثل مافي الصوره وهي مكونات عملك وكل عمل تضيفه سوف يظهر بلير جديد واول عمل انت او انتي قمت به هو تكون عمل جديد وخلفيه بيضاء
normaly-5.jpg

من جهة اليسار نضغط على مربع الالوان ونختار اي لون يناسب ذاقتنا ونعبئ الخلفيه
normaly-6.jpg

بعد اختيار اللون
ننتقل لنفس مربع الادوات ونختار اداة التعبئه
normaly-7.jpg

نذهب للعمل ونعبئ اللون المختار
normaly-8-s.jpg

الان ننتقل مره اخرى للادوات ونختار اداة التحديد
normaly-9.jpg

بعد اختيار اداة التحديد
نقوم بانشاء لير جدير مثل ما نشاهد بالصوره
normaly-10.jpg

ملاحظه : اخذنا اداة التحديد + فتحنا لير جديد = قم بالتحديد فيمكان اقل من حجم الخلفيه لكي تبني الاساس الاخر للبرواز ومن ثم عبئه باي لون يناسبك
شاهد الصوره
normaly-11-s.jpg

الان افتح لير ثالث + استخدم اداة التحديد وحجمه اقل من اللير الذي قبله + عبئه باي لون
normaly-12.jpg

سيصبح بهذا الشكل
normaly-15-s.jpg

الان لو ضغطنا على الصوره السابقه ورائيناها بحجمها الطبيعي سوف نشاهد شئ وهو حدود بيضاء على حواف كل مربع او مستطيل
كيف قمنا بهذا الامر؟
عن طريق هذه الصوره
نختار مثلاً اللير الوسط ونضغط عليه لكي نبدى الشغل على تحديده
ملاحظه : عند الضغط على اللير سوف تشاهده باللون الازرق كما في الصوره
اضغط على حرف f من الاسفل وستخرج لك قائمه وفي اخرها كلمة stroke اضغط عليها
normaly-13.gif

بعد الضغط على كلمة stroke سيخرج لك مربع حوار
size= 1px
calor= اختv اللون الذي ترغب به
اعتمد ok
شاهد الصوره
normaly-14-s.jpg

normaly-14-s.jpg

انتهينا من الدرس وهذا الدرس وهو الذي يعتمد عليه واتمنى المحافظه على العمل الذي ستطبقون عليه لانه مرتبط مع
 

ahmad

مدير المنتدى
طاقم الإدارة
رد: دورة تصنيع الاستايلات من البدايه الى الاحتراف

الدرس الثاني تقطيع البراوزر العادي
الان بعد ان صممنا البرواز العادي البسيط ... ناتي لطريقة تقطيعه الى ثمان قطع
لاحظ ان مجموع القطع في البرواز العادي لكي نحوله الى استايل تكون ثمان قطع
من اين نبدى في عمليه التقطيع؟
نبدى من حيث انتهينا حيث اننا حفظنا البرواز على صيغة jpg
الخطوه الاولى : نقوم بفتح برنامج الفوتوشوب Adobe Photoshop 7.0 ME
normaly-1-s.jpg

ثم نقوم بفتح العمل المحفوظ على صيغة jpg مثل الذي موجود في الصوره وقد تحدثنا عنه سابقاً
normaly-15-s.jpg

اللحين فتحنا البرنامج ونزلنا فيه العمل
فيه على اليسار الادوات وهي ادوات الاستخدام لبرنامج الفوتوشوب ونختار منها اداة التحديد
انظر الصوره
normaly-cating-1.jpg

ونختار منها اللي محدد باللون الاحمر واللي جاي على شكل مربع منقط
====================================
الخطوه الثانيه نروح على البرواز ومعانا اداة التحديد اللي من شوي
ونروح نحدد الزاويه اليمنى العلويه بشكل متساوي من الاطراف من غير زياده او نقصان
normaly-cating-2.jpg

اللي مايعرف كيف يوزن الاطراف راح تجي صوره في الشرح توضح الوزنيه
===================================
حددنا الزاويه العلويه من الجهه اليمنى
طيب نجي اللحين وننسخها
وعملية النسخ تجي بطريقتين
1- اما Ctrl +C او 2- من فوق في برنامج الفوتوشوب على اليسار نروح لكلمة Edit ثم Copy
شاهد الصوره
normaly-cating-18.gif

اللحين نسخنا اللي حددناه
طيب وين نلصقها؟!!
الطريقه المبسطه والسهله هي بعد عمليه النسخ للي حددناه
تروح الى كلمة fill من اعلى الفوتوشوب وتضغط عليها وبتنزل لك قائمه منسدله وفيها كلمة new
على طول اضغط على كلمة new وراح يطلع لك مربع حوار جاهز بالمقاسات اللي انت حددتها
شاهد الصوره
normaly-cating-19.gif

normaly-cating-20.jpg

اضغط ok
راح يطلع لك مربع خلفيته بيضاء
اعمل لصق اما عن طريق
1- اما Ctrl +V او 2- من فوق في برنامج الفوتوشوب على اليسار نروح لكلمة Edit ثم Paste
شوف وش راح يطلع معاك
normaly-cating-21.jpg

=================================
اللحين بعد ان عرفنا كيف نحدد وننسخ ونلصق
جينا على الباقي
والباقي مثل ماسوينا في الزاويه الاولى فوق على اليمين
راح نطبق على البقيه حتى ينتج معنا ثمان زوايا.... وثمان اوساط
normaly-cating-4.jpg

لاحظوا الاسهم اللي في الكي بورد
normaly-cating-5.jpg

قلنا التحديد مازال موجود
يالله نسحب بالسهم اليسار على اخر زاويه فوق على اليسار
ونسوي نسخ وفتح عمل جديد ولصق
وهكذا حتى ننتهي من الزوايا الاربعه
ونفس اللي سويناه مع الزوايا نسويه مع الاوساط
وكل وسط نسخ وفتح عمل جديد ثم لصق
بكذا انتهينا من التقطيع
وانتظروا الدرس الجاي عن :
[الدرس الأول - C ] تركيب قطع البرواز العادي على المنتدى

ملاحظتي اللي قلتها في السابق من حيث اخذ مسافه بالطول والعرض متساويه عن طريق التالي:
من اعلى برنامج الفوتوشوب نختار كلمة window ثم info ونضع امامها صح
normaly-cating-15.gif

وبعد ان وضعنا صح
الان راح نشوف الطول والعرض ومن غير لازياد ولانقصان

normaly-cating-17.jpg
 

ahmad

مدير المنتدى
طاقم الإدارة
رد: دورة تصنيع الاستايلات من البدايه الى الاحتراف

الدرس الثالث تركيب البراوزر العادي


ابي منكم الله لايهينكم تحفظون القطع الثمان ( اربع زوايا وارعه اوساط في مجلد خاص باي مكان بالجهاز )
اللحين بعد ان حفظتوا القطع الثمان ضمن مجلد واسميتموه ماشئتم
نجي اللحين للتطبيق اللي اعتبره اساس الانطلاقه في عالم التركيب للاستايل
في الدرسين السابقه كنت اطلب فتح برنامج الفوتوشوب
الان اللي ابيه فتح برنامج الفرونت بيج
Microsoft Office FrontPage 2003
MicrosoftOfficeFrontPage2003.gif

فتحنا الان برنامج الفرونت بيج ومنها الى التعليمات البرمجيه وامسحوا مافيه ولاتخلون شئ
شاهد الصوره
normaly-tabel-1.jpg

بيصير شكله كذا
normaly-tabel-2.jpg

اللحين تنتقلون الى كلمة تصميم من اسفل الفرونت بيج على اليمين
normaly-tabel-3.jpg

بعد ان ضغطنا كلمة تصميم فيوجد فوق ايقونه انشاء جدول
normaly-tabel-4.jpg

بعد ان ضغطنا على ايقونه انشاء جدول فراح تندرج جداول نضلل منها تسعه فقط
انظر الصوره
normaly-tabel-5.jpg

طبيعي على عدد الجداول راح نشوف في ارضيه الفرونت بيج تسعه جداول
normaly-tabel-6.jpg

اللحين نضغط على اي مكان في ارضيه الفرونت بيج بالماوس الايمن وبيظهر لنا مستطيل وفيه كلمة خصائص الصفحه
normaly-tabel-7.jpg

نختار اللي محدد باللون الاحمر ثم موافق
normaly-tabel-21.jpg

الان نروح لاي مكان في الجدول ونختار خصائص الجدول
normaly-tabel-8.jpg

قم بوضع القيم اللي محدده باللون الاحمر
normaly-tabel-9.jpg

الان اصبح الجدول جاهز لوضع القطع الثمان عليه ولكن لابد ان نركز في الخانات اللي مبينه باللون الازرق انها الزوايا واللي بالاحمر هي الاوساط
الزوايا = ادراج صوره
الاوساط =خلفيه خليه
normaly-tabel-10.jpg

اللحين نروح لاول خليه في الجدول فوق على اليمين ونضع الماوس عليها ومن ضم نضغط على ايقونه ادراج صوره كما هي محدده باللون الاحمر
normaly-tabel-11.jpg

ضغطنا على ايقونه الصوره وبحثنا عن اسم مجلد القطع الثمان فوجدنا اسمه test
اضغط على المجلد مرتين حتى تشوف الصوره الثمان داخله
normaly-tabel-12.jpg

مثل مانشوف الصوره الثمان الان واللي توضحه الصوره
طيب حنا ضغطنا على في السابق على اول خانه في الجدول او اول خليه من فوق يمين
طيب الان نبي ندور على الصوره اللي تناسبها
وش بتكون
نشوف الصوره !
normaly-tabel-13.jpg
 

ahmad

مدير المنتدى
طاقم الإدارة
رد: دورة تصنيع الاستايلات من البدايه الى الاحتراف

ضغطنا على الصوره او الزاويه اليمنى اللي فوق كلك مرتين ونزلت في اول خانه
مثل مانشوف في الصوره
normaly-tabel-14.jpg

نكمل الان بقية الزوايا مثل اللي سويناه من شوي للزاويه اللي فوق على اليمين
normaly-tabel-15.jpg

الزوايا واتوقع كانت سهله
طيب الاوساط وش كنت اقول من شوي
كنت اقول لاتوضع كادراج صوره وانما كاخلفيه
normaly-tabel-16.jpg

نروح للاربع خلايا او اوساط ونضغط بطرف الماوس يمين ومن ثم نضغط على خصائص الخليه
normaly-tabel-18.jpg

نختار كل خلفيه ونضعها في مكانها المناسب واخر شئ يصير معانا الشكل كذا
normaly-tabel-17.jpg


جينا لموضوع شد الاطراف
لاحظوا منطقه الوسط
تشوفون سهم متجه يمين وسهم متجه يسار
نروح نشد الجهتين الى اخر اليمين والى اخر اليسار
normaly-tabel-19.jpg

صار الشكل كذا وهو المطلوب
normaly-tabel-20.jpg
 

ahmad

مدير المنتدى
طاقم الإدارة
رد: دورة تصنيع الاستايلات من البدايه الى الاحتراف

إعتماد البراوزر العادي
اللحين نبي نعرف وشلون نركبه على المنتدى وكيف يكون راكب بدون اخطاء
normaly-end-1.jpg

في نفس الخلايا وفي النص في الفراغ اللي موضوع بالصوره الجايه
نحط الماوس فيه ونضغط على التنصيف
normaly-end-2.jpg

بعد ماضغطنا على التنصيف عشان يكون شغلنا موزون ومرتب
نروح اسفل الفرونت بيج ونضغط على كلمة التعليمات البرمجيه لمشاهده الاكواد
راح نشاهد هالصوره الجايه واللي يبين فيها عمليه التوسيط وانه انوجد فيها كلمة CENTER
normaly-end-3.jpg

اللحين بتشوفون الجدول منقسم نصين وانا قسمته بلونين
اللون العلوي نص الخلايا واللون السفلي نص الخلايا السفليه
طيب التقسيم من وين تم ؟
تم من بعد كلمة center وهذا مربط الفرس
normaly-end-4.jpg

تعالوا نشوف وش المقصود من التقسيم باللونين
قلنا نصف علوي ماقبل كلمة <p align="center"> ونصف سفلي مابعد كلمة <p align="center">
اللي قبل يوضع في تمبلت الـ header
اللي بعد يوضع في تمبلت الـ footer
normaly-end-5.jpg

كيف يتم وضعها؟!
الطريقه السليمه والصحيحه هي:
نقوم بالتوجه الى لوحة تحكم المنتدى ومن اليمين نشوف مثل هالصوره

normaly-end-6.jpg

نضغط على كلمة Style Manager وعلى طول تنقلنا الصفحه على مجموعة الاستايلات المركبه عندك وبنلقاها في الجهه اليسرى اختار الاستايل اللي تبي تسوي فيه البرواز
وانا فضلت استايل الشركه ( من يوم تشوفه وانت ناوي تعدل عليه روح واضغط على كلمة اذهب اللي محدده باللون الاحمر)
شوف الصوره
راح يظهر لك هالصوره
normaly-end-7.jpg

اللحين وصلنا للنقطه الفاصله اما نكون او لا نكون
مع ثقتي انكم راح تكونوا
بنشوف الهيدر ومحدد باللون الاحمر والفوتر محدد باللون الاحمر
وهنا شغلنا بس
ننسخ محتويات الجزء العلوي اللي في هالصوره
http://www.traidnt.net/vb/images/Sty...maly-end-5.jpg
ونحطه قبل جملة
$spacer_open
$_phpinclude_output
وننسخ الجزء السفلي اللي في هالصوره
http://www.traidnt.net/vb/images/Sty...maly-end-5.jpg
ونحطه بعد جملة
<************************ type="text/****************************">
<!--
// Main vBulletin **************************** Initialization
vBulletin_init();
// Initialize 'Active' Table Cells
//vBulletin_init();
//-->
</************************>
normaly-end-9.jpg

ثم نضغط حفظ او موافق او اعتمد على حسب اللغه الموجوده لديك
normaly-end-8.jpg

تعالوا للمنتدى ونشوفه
normaly-end-10.jpg
 

ahmad

مدير المنتدى
طاقم الإدارة
رد: دورة تصنيع الاستايلات من البدايه الى الاحتراف


إعتماد البراوزر العادي
اللحين نبي نعرف وشلون نركبه على المنتدى وكيف يكون راكب بدون اخطاء
normaly-end-1.jpg

في نفس الخلايا وفي النص في الفراغ اللي موضوع بالصوره الجايه
نحط الماوس فيه ونضغط على التنصيف
normaly-end-2.jpg

بعد ماضغطنا على التنصيف عشان يكون شغلنا موزون ومرتب
نروح اسفل الفرونت بيج ونضغط على كلمة التعليمات البرمجيه لمشاهده الاكواد
راح نشاهد هالصوره الجايه واللي يبين فيها عمليه التوسيط وانه انوجد فيها كلمة CENTER
normaly-end-3.jpg

اللحين بتشوفون الجدول منقسم نصين وانا قسمته بلونين
اللون العلوي نص الخلايا واللون السفلي نص الخلايا السفليه
طيب التقسيم من وين تم ؟
تم من بعد كلمة center وهذا مربط الفرس
normaly-end-4.jpg

تعالوا نشوف وش المقصود من التقسيم باللونين
قلنا نصف علوي ماقبل كلمة <p align="center"> ونصف سفلي مابعد كلمة <p align="center">
اللي قبل يوضع في تمبلت الـ header
اللي بعد يوضع في تمبلت الـ footer
normaly-end-5.jpg

كيف يتم وضعها؟!
الطريقه السليمه والصحيحه هي:
نقوم بالتوجه الى لوحة تحكم المنتدى ومن اليمين نشوف مثل هالصوره

normaly-end-6.jpg

نضغط على كلمة Style Manager وعلى طول تنقلنا الصفحه على مجموعة الاستايلات المركبه عندك وبنلقاها في الجهه اليسرى اختار الاستايل اللي تبي تسوي فيه البرواز
وانا فضلت استايل الشركه ( من يوم تشوفه وانت ناوي تعدل عليه روح واضغط على كلمة اذهب اللي محدده باللون الاحمر)
شوف الصوره
راح يظهر لك هالصوره
normaly-end-7.jpg

اللحين وصلنا للنقطه الفاصله اما نكون او لا نكون
مع ثقتي انكم راح تكونوا
بنشوف الهيدر ومحدد باللون الاحمر والفوتر محدد باللون الاحمر
وهنا شغلنا بس
ننسخ محتويات الجزء العلوي اللي في هالصوره
http://www.traidnt.net/vb/images/Sty...maly-end-5.jpg
ونحطه قبل جملة
$spacer_open
$_phpinclude_output
وننسخ الجزء السفلي اللي في هالصوره
http://www.traidnt.net/vb/images/Sty...maly-end-5.jpg
ونحطه بعد جملة
<************************ type="text/****************************">
<!--
// Main vBulletin **************************** Initialization
vBulletin_init();
// Initialize 'Active' Table Cells
//vBulletin_init();
//-->
</************************>
normaly-end-9.jpg

ثم نضغط حفظ او موافق او اعتمد على حسب اللغه الموجوده لديك
normaly-end-8.jpg

تعالوا للمنتدى ونشوفه
normaly-end-10.jpg
 

ahmad

مدير المنتدى
طاقم الإدارة
رد: دورة تصنيع الاستايلات من البدايه الى الاحتراف

قم بفتح عمل جديد
1-top.jpg

والمقاس كما في الصوره
2-top.jpg

بيكون بهذا الشكل
3-top.jpg

الان انشئ لونين على حسب اختيارك ويكون لون خفيف والثاني اثقل منه
طبعا الخفيف فوق والثقيل تحت
5-top.jpg

اصبغ الخلفيه باللون الخفيف مثل هذا الشكل
4-top.jpg

اللحين نضغط على اداة تدرج اللون
6-top.jpg

ونختار من فوق اللي محدد باللون الاحمر
7-top.jpg

اللحين نضغط على الونيين المدموجين
8-top.jpg

واللحين الصور بتشرح نفسها ولازم نركز فيها
9-top.jpg

10-top.jpg

11-top.jpg
12-top.jpg

اللحين من فوق نختار التالي للتخطيط الدقيق
13-top.jpg

مثل مانشوف كيف صار التخطيط
14-top.jpg

افتح لير جديد
15-top.jpg
 

ahmad

مدير المنتدى
طاقم الإدارة
رد: دورة تصنيع الاستايلات من البدايه الى الاحتراف

اللحين ناخذ اداة التحديد الخاص ونحدد بشكل مناسب من الاطراف
16-top.jpg

شوف الشكل بالتحديد
17-top.jpg

اللحين نستعمل اداة التدرج الخاص باللون
18-top.jpg

ومازال التحديد موجود نسحب بالتدرج اللون من فوق الى تحت
19-top.jpg

اللحين نلغي التحديد اضغط Ctrl+D
ومن فوق نسوي مثل اللي في الصوره
20-top.jpg

اللحين نروح على لير اللون المتدرج ونضغط من الاسفل حرف f ومن ثم كلمة stroke لكي نضع له تحديد خارجي
21-top.jpg

وهذي قيم التحديد وانتبه للون المحدد لابد ان يكون متوافق مع الالوان المختاره من قبل ليكون الشكل مناسب
22-top.jpg

ثم نسوي دبل للير اللي اشتغلنا عليه
23-top.jpg

ثم نضغط Ctrl+T ليتم تحديد الشكل وسحبه الى اعلى بحيث يصبح عمود مناسب الشكل
24-top.jpg

ادبل اللير الخاص بالعمود ليصبح لدينا عمود في الاعلى وعمود في الاسفل
25-top.jpg

اللحين العمودين نضغط على كل واحد فيهم Ctrl+G بحيث تدخل في القالب الاساسي الام
26-top.jpg

وهذا شكل الليران المدخله في القالب الاساسي
27-top.jpg

اللحين نروح للير الام اللي محدد باللون الاحمر ونضغط على حرف F ثم DROP SHOW لاعطائه ضل مناسب
28-top.jpg

وهذي قيم الظل
29-top.jpg

وهذا الهيدر اصبح جاهز للاضافات من صور ومن كتابه ... الخ
30-top.jpg
 

مواضيع مماثلة

أعلى