تعلم عمل الاستيل (اعمل إستيل منتداك بنفسك) [الأرشيف]

مشاهدة النسخة كاملة : تعلم عمل الاستيل (اعمل إستيل منتداك بنفسك)

hazemali

11-09-2006, 06:27 PM

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

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

اقدم لكم اخواني هذه الدوره البسيطه لصنع إستيل منتدي

متطلبات هذه الدوره برنامج الفتوشب والفرونت بياج

______________ نبدأ علي بركة الله ______________

اولاً افتح برنامج الفتوشوب

http://aus.giga4me.com/a/c1.gif

افتح عمل جديد بهذه الاعدادات

http://absba7.absba.org/teamwork2//fo/1.jpg

اختار الالوان الاتيه

http://absba7.absba.org/teamwork2//fo/2.jpg

ومن اداة paint bucket tool

http://aus.giga4me.com/a/c4.gif

قم بصبغ الخلفيه

http://absba7.absba.org/teamwork2//fo/3.jpg

قم بعمل لير جديد

http://absba7.absba.org/teamwork2//fo/4.jpg

ومن اداء التحديد rectan gular marquee tool

http://aus.giga4me.com/a/c7.gif

قم بعمل التحديد الاتي

http://absba7.absba.org/teamwork2//fo/5.jpg

قم بأختيار اداة gradient tool

http://absba7.absba.org/teamwork2//fo/66.jpg

http://absba7.absba.org/teamwork2//fo/666.jpg

قم بالسحب من فوق لتحت علي اللير او العكس

http://absba7.absba.org/teamwork2//fo/7.jpg
دوس ctrl j

لنسخ اللير

http://absba7.absba.org/teamwork2//fo/8.jpg

دوس ctrl t للتحكم بحجم اللير المنسوخ

http://absba7.absba.org/teamwork2//fo/9.jpg

قم بسحب الي فوق

http://absba7.absba.org/teamwork2//fo/10.jpg
الان هنعمل stroke للير المنسوخ

http://absba7.absba.org/teamwork2//fo/11.jpg

اعمل stroke بألأعدادات الاتيه

http://absba7.absba.org/teamwork2//fo/12.jpg

وبعدين drop shadow

http://absba7.absba.org/teamwork2//fo/13.jpg

نقوم بنسخ اللير

http://absba7.absba.org/teamwork2//fo/14.jpg

دوس ctrl t

http://absba7.absba.org/teamwork2//fo/15.jpg

http://absba7.absba.org/teamwork2//fo/16.jpg

كرر اللي احنا عملناه

http://absba7.absba.org/teamwork2//fo/17.jpg

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

http://absba7.absba.org/teamwork2//fo/18.jpg

بأداة السحب اسحب من فوق لتحت او العكس

http://absba7.absba.org/teamwork2//fo/19.jpg

http://absba7.absba.org/teamwork2//fo/20.jpg

اعطي للفوتر بعض التأثيرات

تم رفع الصور على سيرفر الموقع بواسطة المشرف العام المرفأ

انتهي نلتقي في الجزء التالي وهو تقطيع الاستيل وتركيبه في الفرونت بياج

marwan 4 ever

11-09-2006, 06:40 PM

بارك الله فيك اخي ننتظر الجزء التاني

خبير البرمجه

11-09-2006, 06:45 PM

مشكوووور يالغالي

بس لو تسويه في كتاب الكتروني بيكون احسن لك

hazemali

11-09-2006, 08:13 PM

انتظروا الشرح الساعه 9 مساءاً

omar_kabo

11-09-2006, 08:29 PM

شرح رائع لواحد مثلك اخ حازم
شكرا كتير ومنتظرين الدرس التانى

التمساح الصغير

11-09-2006, 08:32 PM

اخيرن بعد عمر طويل

مشكور اخوي على الشرح الرائع

انشاء الله تكمل الشرح

السـ9ـامي

11-09-2006, 08:58 PM

ممممششششششششكور أخوي على هذا الشرح الرائع

رامبو نت

11-09-2006, 10:20 PM

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

romeo2903

11-09-2006, 10:29 PM

بارك الله فيك

romeo2903

11-09-2006, 10:30 PM

بارك الله فيك

hazemali

11-09-2006, 10:50 PM

اولاً قبل ان ادخل الشرح لابد من ان اعلمك اخي القارئ ببعض المعلومات

يوجد عدة انواع من الاستيلات منها

رباعي الاطراف وهو الذي يتكون من هيدر (العمود العلوي)

جانب ايمن و جانب ايسر

وفوتر (العمود السفلي)

وايضاً يوجد ستيل رباعي الاطراف + البروز

نحن الان نشرح تصميم بسيط لأستيل بسيط

لقد حرصت علي وضع تصميم بسيط لأجعل للقارئ مساحه من الابداع

فيا اخي القارئ عليك فهم كيفية عمل الاستيل وعليك ان تبدع من اجل ان يعلوا شئنك

في مجتمع لايقبل إلا المبدعين

حازم علي

______________فلنبدأ علي بركة الله_________________

اولاً قم بحفظ الاستيل اللي انت صممته بأمتداد ال jpg

ثم قو بفتح صورة الاستيل علي الفتوشوب

دوس ctrl o

لفتح الصوره علي برنامج الفتوشوب

http://aus.giga4me.com/a/c27.gif

http://aus.giga4me.com/a/c28.gif

و بعدين اختار اداة

slice tool

http://aus.giga4me.com/a/c28c.gif

وبعدين اعمل التقطيع ده
http://aus.giga4me.com/a/c29.gif

وبعدين

اختار save as web

http://aus.giga4me.com/a/c30.gif

اعمل الاعدادات دي

http://aus.giga4me.com/a/c31.gif

وبعدين اختار المكان اللي هتحط فيه صور الاستيل واحفظه

تحياتي ونلتقي في الجزء التالي

saad2002

11-09-2006, 10:58 PM

hazemali

الف شكر لك ياغالي

شرح رائع بالفعل

ومثل ما ذكر
يكفي انك تضع النقط فوق الحروف كمثال
وكل واحد وهمته في الابداع في التصميم

في انتظار باقي الشرح

تقبل خالص التحيه والتقدير

hazemali

12-09-2006, 12:17 AM

مشكووورين اخواني علي ردودكم اللي جملة الموضوع وما احلي روح المشاركه

ننتقل الي الجزء المهم اوي اوي وهو وضع الاستيل في الفرونت بياج

قبل ان نبدأ لابد ان تعلمو بشيئ مهم قد يفسد شكل الاستيل وهو نقطة التمدد

هي تلك النقط التي يمتد فيها الاستيل علي حسب حجم الموضوع تابعوا

::::::::::::::::::::::::::::::::::: فلنبدأ علي بركة الله :::::::::::::::::::::::::::::::::

اولاً قم بفتح برنامج الفرونت بياج

http://aus.giga4me.com/a/c32.gif

وبعدين دوس علي تعليمات برمجيه

http://aus.giga4me.com/a/c33.gif

الان نقوم بألغاء كل الكلام اللي مكتوب

http://aus.giga4me.com/a/c34.gif

وبعدين دوس تصميم

http://aus.giga4me.com/a/c35.gif

اقف في الصفحه ودوس كليك يمين واختار خصائص الصفحه

http://aus.giga4me.com/a/c36.gif

اعمل الاعدادات الاتيه

http://aus.giga4me.com/a/c37.gif

والان ادرج جدول بتسع خانات

http://aus.giga4me.com/a/c38.gif

دوس كليك يمين واختار خصائص الجدول

http://aus.giga4me.com/a/c39.gif

اعمل الاعدادات الاتيه

http://aus.giga4me.com/a/c40.gif

اقف في اول خانه علي ايدك اليمين ودوس إدراج صوره

http://aus.giga4me.com/a/c41.gif

اختار الصوره

http://aus.giga4me.com/a/c42.gif

اقف في الخانه اليسري وادرج صوره

http://aus.giga4me.com/a/c43.gif

اختار الصوره

http://aus.giga4me.com/a/c44.gif

اسحب الاطرف يمين ويسار

http://aus.giga4me.com/a/c45.gif

اقف في الخانه الوسطي ودوس كليك يمين واختار خصائص الخليه

واعمل الاعدادات الاتيه

http://aus.giga4me.com/a/c46.gif

اختار الصوره

http://aus.giga4me.com/a/c47.gif

اقف في الخانه الوسطي ودوس كليك يمين واختار تقسيم الخلايا

http://aus.giga4me.com/a/c48.gif

اعمل الاعدادات الاتيه

http://aus.giga4me.com/a/c49.gif

اقف في الخانه التانيه اللي علي ايدك اليمين وادرج صوره
اختار الصوره

http://aus.giga4me.com/a/c50.gif

اقف في الخانه التانيه من الجهه اليسرى وادرج صوره

http://aus.giga4me.com/a/c51.gif

اعمل اللي احنا عملناه في الهيدرفي الفوتر

http://aus.giga4me.com/a/c52.gif

اقف في الخانه الوسطي في الصف الثاني ودوس توسيط

http://aus.giga4me.com/a/c53.gif

انتهي تابعوني في تركيب الاستيل في المنتدي

virs

12-09-2006, 02:05 AM

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

hazemali

12-09-2006, 10:27 AM

لقد قمت بأعداد كتاب إلكتروني لهذه الدوره وهو مقسم الي جزئين

حلموا الجزء الاول

http://rapidshare.de/files/32816867/aboali-style1.rar

وبعد الانتهاء من الدوره ساضع رابط الجزء الثاني

تحياتي اخوكم حازم

_________________ تركيب الاستيل بالمنتدي ____________________

اولاً اضغط علي تعليمات برمجيه

تابع الصور

http://aus.giga4me.com/a/c54.gif

علم علي

http://aus.giga4me.com/a/c55.gif

دوس كليك يمين واختار استبدال

http://aus.giga4me.com/a/c56.gif

http://aus.giga4me.com/a/c57.gif

الان انسخ الصفح لحد الكود

<p align="center">

http://aus.giga4me.com/a/c58.gif

ثم توجه الي لوحة التحكم بتاع المنتدي

http://aus.giga4me.com/a/c59.gif

و اختار من القائمه المنسدله اللي علي اليمين

الاستيلات& القوالب

واختار منها

ضبط الاستيلات

http://aus.giga4me.com/a/c60.gif

وبعدين اختار خيارات جميع الاستايلات

http://aus.giga4me.com/a/c61.gif

اقف في الهيدر
http://aus.giga4me.com/a/c62.gif

قم بألغاء كل ما بداخل الهيدر ما عدا

$spacer_open

$phpinclude_output

http://aus.giga4me.com/a/c63.gif

الصق اللي احنا نسخنا فوق الكود

$spacer_open

http://aus.giga4me.com/a/c64.gif

توجه الي الفرونت بياج

http://aus.giga4me.com/a/c65.gif

اتجه الي لوحة التحكم واقف في الفوتر وابحث عن

<script/>

واضف بعدها اللي احنا نسخنا في الفرونت بياج

http://aus.giga4me.com/a/c66.gif

ثم قم بحفظ العمل

وبعد ذلك قم بأخذ الصور بتاع الاستيل وضعها في المجلد وضعها في الامتداد المناسب

وبذلك تنتهي الدوره

ارجو منكم الردود الجميله والدعاء لي ولعائلتي اخوكم حازم

عتيبي مكة

12-09-2006, 12:59 PM

الله ييجزاك الف خير

على هذه المبادرة الطيبة منك أخي

nourddinebgb

12-09-2006, 01:09 PM

شكرااا لك

muslem

12-09-2006, 02:11 PM

http://img204.imageshack.us/img204/698/titled1589xi3.gif

thulfikar

12-09-2006, 02:19 PM

ماشاء الله بارك الله بيك مميززززززززززززززز

X-WARM

12-09-2006, 02:39 PM

الله ييجزاك الف خير

على هذه المبادرة الطيبة منك أخي

الاعصار ميدو

12-09-2006, 02:51 PM

رائع لا اكثر من رائع والله

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

مبقاش ناقص الموضوع الا الروابط يعنى رابط فوتوشوب و فرونت بيج
والموضوع يتبت

لانه الاول فى المنتدى شكرا يا اخى وسلام

muslem

12-09-2006, 03:07 PM

http://img204.imageshack.us/img204/698/titled1589xi3.gif

saad2002

12-09-2006, 04:13 PM

ماشاء الله رائع اخويhazemali
اتمنا لك التوفيق
وجزاك الله خير ونحن في انتظار الدرس القادم

ولانني احد المتابعيين للدروس فلدي كم سؤال
ومنتظر الاجابه لاستفيد وتعم الفائده على الجميع

س1

لماذا لايتم سحب الصور ووضعها في الفرنت بيج
بمعنى لماذا قسمت الفرنت بيج جداول
وبعدها ادرجت الصور ؟ مالحكمه

س2

لماذا ادرجت جدول بتسع خانات وليس 10 خانات
هل يتماشا مع عدد الصور المستخدمه

تقبل خالص التحيه

ولي عوده

okail72

12-09-2006, 05:37 PM

مشكور

احمد صلاح!

12-09-2006, 06:15 PM

شرح رائع اخي
مشكووووووووور

سيف المعمري

13-09-2006, 02:31 AM

شكرا لك

ملك النيت

13-09-2006, 03:27 AM

http://img204.imageshack.us/img204/698/titled1589xi3.gif

مشكور أخي على الشرح الوافي

hazemali

13-09-2006, 03:57 AM

صاعقة الملاعب

13-09-2006, 09:54 AM

بارك الله فيك اخوي الفاضل

okail72

13-09-2006, 11:53 AM

اين بقية الدورة

hazemali

13-09-2006, 12:00 PM

اخي الكريم باقية الدوره في الصفحه الاولي

saad2002

13-09-2006, 04:27 PM

مشكووورين اخواني علي اجمل الردود ولقد قمت بتكلملة الدوره بالتعديل علي احد مشاركاتي في الصفحه الاولي

حتي يستطيع الاعضاء مشاهدته بكل سهوله

اما بالنسبه لسؤال saad2002

اولأً ادرجنا تسع جدول لكي نوزع فيها صور الاستيل

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

تحياتي حازم

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

اذا كان عندك معلومه حول هذا الموضوع فرجائا التوضيح
وجزاك الله الف خير

ونا منتظر تكمله باقي الدروس

تحيتي

hazemali

13-09-2006, 06:41 PM

نعم يا اخي فالجداول تعطي دقه اكثر لوضعية الصوره وتجعلها تتمدد مع التصميم

تحياتي ك اخوك حازم

عبد الله الشرفا

16-09-2006, 02:51 PM

اخي الكريم اولا شكرا لك
ثانيا نرجو ان تسرع في عمل الدروس وتحضيرها ووضها في المنتدى
وشكرا

hazemali

16-09-2006, 05:55 PM

اخي الكريم اولا شكرا لك
ثانيا نرجو ان تسرع في عمل الدروس وتحضيرها ووضها في المنتدى
وشكرا

اخي الكريم اولاً مشكووور علي ردك

ثانياً الدوره كامله يا اخي في الصفحه الاولي

تحياتي لك اخوك حازم

<ابوخالد>

16-09-2006, 08:11 PM

مشكور أخي حازم

وفقكم الله جميعاً لما يحبه ويرضاه

بالنسبة لي سوف أطبق الشرح ببرنامج دريم ويفر 8

خلاص أعتدت عليه:p

hazemali

16-09-2006, 08:34 PM

وفقك الله يا اخي

lionhurt

19-09-2006, 01:19 PM

الف شكر ياباشـا موضوع هايل والله :)

عبد الله الشرفا

19-09-2006, 01:41 PM

اخي الكريم ممكن نسخة المنتدى الي انتا شرحت عليها

hazemali

19-09-2006, 01:47 PM

مشكوووور ين اخوان يعلي تفاعلكم

اما بالنسبه للأخ عبدالله الشرفا

نسخة المنتدي vb.3.5.4

muhanad2000

20-09-2006, 08:33 AM

http://muhanad2000.googlepages.com/1.gif

جزاك الله خيرا على مجهودك...
السلام عليكم

hazemali

21-09-2006, 01:17 PM

مشكوووووووووووووووور يا اخي علي ردك

ELMo7TaReF

21-09-2006, 01:37 PM

http://img204.imageshack.us/img204/698/titled1589xi3.gif

hazemali

24-09-2006, 11:46 AM

بارك الله فيك

dalou3at_net

24-09-2006, 07:11 PM

يعطيك الف العافية على مجهود رائع

hazemali

24-09-2006, 08:07 PM

وياكم إن شاء الله

hsm98

24-09-2006, 08:53 PM

بارك الله فيك

Nazhan.A

30-08-2007, 07:12 PM

يمكن رفع كتاب عن الدورة لان الصور لم تظهر.

الاعصار ميدو

01-09-2007, 01:47 AM

اخى ارجوك ان تعيد رفع ىالصور لانها لا تظهر عندى

abuahmed853

01-09-2007, 12:07 PM

يا اخوي hazemali انا بالصراحة أشكرك على هالمجهود اللي بذلته لكن عندي سؤال وهو:
انو الصور مو ظاهرة عندي.
انت حاط رابط لتنزيل الجزء الأول من الشرح بس لما افتحه يقول لي File not found ياريت تعطينا الصور في أسرع يا أخي العزيز لان موضوعك يستاهل كل تقدير وشكرا

angel_man

16-09-2007, 07:33 PM

الأنباري

16-09-2007, 08:25 PM

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

شكرا اخوي نفس كلام الاخ وشكرا

mnmn

16-09-2007, 10:20 PM

مع الاسف الصور غير واضحة والرابط تنزيل معطل ....

mahmoudsizar

29-09-2007, 02:57 PM

بارك الله فيك