حصريا على الويب العربي تقطيع واجهة بالفوتوشوب وتوزيعها في الفرونت بيج ...

حصريا على الويب العربي شرح تقطيع واجهة بالفوتوشوب ومن ثم نقله الى الفرونت بيج وعمل الروابط



مهم جدا عند نقل الموضوع لأي منتدى الرجاء حفظ الحقوق وذلك بوضع الاتي :-

\================================/
\=== جميع الحقوق محفوظة لـ العبقري نت ========/
\================================/
\===== WwW.3BQRY.NeT =====/

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

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

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

لنبدأ في الدرس :-

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

عن طريق برنامج الفوتوشوب انظر الصورة :-

هذه الواجهة هي التي أريد أن أقطعها الى أجزاء وتركيبها على الفرونت بيج ومن ثم وضع الارتباطات
الان من صندوق الأدوات أختار أداة السكين للقطع كما في الصورة :-

ثم اعمل شكل التقطيع الذي تريده وقم بتقطيع الصورة الى شرائح كما في الصورة بالأسفل :-

وذلك بالضغط واستمرار الضغط وعمل القطعة التي تريدها استمر بالتقطيع الى أجزاء كما في الصور :-


واستمر في عمل المربعات حتى تصل الى النتيجة النهائية كالتالي :-

الان انتهينا من التقطيع بقي علينا حفظه وتحويله الى قطع اتبع الاتي :-

اذهب الى ( ملف ثم حفظ للنسيج العالمي)

الان نختار نوع الصورة وجودتها كما في الأعلى ثم انختار قوة الجودة كما في الصورة بالأسفل :-

ثم نكتب في مربع الجودة الرقم (100)

ثم نضغط موافق للحفظ ونختار كما في الصورة :-

ونختار النوع كما في العلى (هايبر تكست وصور)

ثم نسوي حفظ

راح ينتج لنا ملفين الأول صفحة انترنت والثاني ملف (images)

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

ثم ندخل برنامج الفرونت بيج ونعمل صفحة جديدة فارغة ثم نحفظها باسم index

ونحفظها في المجلد الذي يوجد به مجلد (images)

يعني راح يكون الناتج ملفين كما في الصورة :-

الان قم بعمل تحرير لصفحة (index) بالفرونت بيج

الان بقي علينا ترتيب الصور في الفرونت بيج واعطاؤها الروابط

الان أنت بداخل الفرونت بيج قم بعمل جدول كما في الصور :-

سيظهر لنا جدول الان نضغط على الجدول بزر الماوس الأيمن ثم نختار خصائص الجدول كما في الصورة :-

ثم نضع الخصائص كما في الصورة :-

الان نقوم بادراج الصور في الجداول كما في الصورة التالية :-

يعني في المربع رقم (1) نقوم بادراج الصورة رقم واحد وفي مربع رقم (2) ندرج الثانية وهكذا ...

ملاحظة : الصورة رقم (5) لاتقوموا بادراجها وانما اتركبوا المربع الخاص بها فارغا .

وراح يظهر لنا الناتج التالي :-

الان راح يظهر لنا التصميم تمام ما عدا الصورة رقم (5) سيظهر لنا فيها مربع أبيض فارغ

الان كل اللي عليك انك تفتح برنامج الفوتوشوب مرة أخرى وتقوم بفتح الصورة رقم (5)

ثم نذهب الى قائمة صورة ثم نختار حجم الصورة

الان سيظهر لك أبعاد الصورة ما يهمنا هو العرض والطول احفظ رقم العرض ورقم الطول

ثم اذهب الى برنامج فرونت بيج واضغط بزر الماوس الأيمن على الخلية رقم (5) ثم

اختار (خصائص الخلية)

ضع علامة صح في مربع العرض واختار البكس وكذلك في الطول

وضع في مربع العرض (عرض الصورة رقم خمسة)

وضع في مربع الطول (طول الصورة رقم خمسة)

ثم ضع علامة صح في خانة استخدام صورة خلفية واختار استعراض ثم اختار الصورة رقم خمسة .

الان انتهينا وراح يكتمل التصميم والحمد لله

الان بقي علينا وضع الروابط اتبع الاتي :-

حدد الصورة التي يوجد من ضمنها الأزرار وذلك بالضغط عليها ضغطة واحدة
http://www.3bqry.net/we/t/18.jpg
الان سيظهر لك شريط أدوات الصور الان اختار أداة التحديد من شريط الصور وحدد الازرار كما في الصورة :-

ثم حدد الزر لوضع الارتباط التشعبي كما في الصورة :-

الان بعد أن حددنا الازرار بأداة القلم سيظهر لنا مربع الارتباط التشعبي تلقائيا الان ضع رابط الصفحة التي تريد

أن يفتحها بمجرد الضغط على الزر

ثم طبق نفس العملية في جميع الأزرار

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

اقتباس من مشاركة Ali Hamad تمام عليك ، الى الامام يالغالي ..

اقتباس من مشاركة Zine Dine يعطيك الف عافية :)

اقتباس من مشاركة قد الحروف شكرا على الشرح

اقتباس من مشاركة lord-host.com الله يعطيك العافيه أنت متألق ماشاء الله عليك

اقتباس من مشاركة Balarb Hosting درس عسل يالغالي مثلك اشكرك حبيبي ويعطيك ربي الف عافية وسلمت يمناك

اقتباس من مشاركة مجهول رائع شرح ممتاز , مدعوم بصور توضيحية دمت وسلمت

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

اقتباس من مشاركة المثير الله يجزاك الجنة شرح كنت ادور عليه شكرا لك

اقتباس من مشاركة لحظات لي مدة وانا ابحث عن طريقة التقطيع وطحت ببرامج ماتشتغل <<متغربل المدة = اكثر من سنتين تسلم والله على الدرس المتميز وتستاهل التقيم خمس نجوووم درس ولا اروع مشكور اخوي العبقري لحظااااااااااااااااااااات

اقتباس من مشاركة ArabTeamHost.Com اخوى العبقري بارك الله فيك ولكن الروابط لا تعمل حق الصور يالحبيب برجاء وضع روابط جديدة للشرح لو تكرمت

السلام عليكم

والله درس روعـــــــــــــة

ألف شكر يالغالـــي .. ;)

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

اقتباس من مشاركة Sir Hero والله إسم على مسمى العبقري دائما مواضيعك عبقرية وحصرية مثلك أخوى وبالتوفيق للجميع يارب

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