دورة شاملة لتصميم موقع ((واجهة)) بالفوتوشوب & الفرونت بيج

[بحريني2]

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

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

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

طيب اول شي راح ابدأ بالشروط الاساسية

1_يجب ان يتوفر لديك الفوتوشوب ~_~

2_ يجب ان يتوفر لديك برنامج الفرونت بيج

3_يجب عليك التركيز في الدرس جيداً لكي لا تقع في الاخطاء

4_اي مساعدة وطلب او خلل تفضل واطرحه علينا وان شاءالله اقدر اساعد

5_ الصور من غير اسم لمن يريد نقلها الى موقعه او ما شابه والرجاء حفض الحقوق

6_ اريد ان اشاهد التطبيقات

طبعا لا استطيع ان أضع الشرح من البداية لانه منتدى مكسات لا يقبل الكثيير من الكلام


اتمنى ان أرى الردود والتشجيع منكم

انتضروني في الشرح القادم ان شاءالله

[بحريني2]

قول بسم الله وخل نبدأ التصميم


اول شي افتح الفوتوشوب زي الصورة هذي طبعا الاصدار الي عندي 7 & 8



اذا دخلت افتح عمل جديد new



ملاحضة : اعمل نفس القياسات الي انا حطيتها عشان تصير مضبووط بالشغل



طبعا زي ما تشوف على يسار البرنامج في شريط الادوات شوف انا حاط على شنو خط



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



طيب زي ما تشوف بالصورة لازم نسوي لاير عشان نكون هذي الطبقة تابع الصور شوف في مربع صغير لما تسوي التحديد اضغط عليه



طبعا احين لازم نحدد الاداة عشان نصبغه احنا نبيه بشكل منسق وحلوو طبعا شوف الصورة



طيب اذا اخترنا اداة الصباغة الادراج __ لازم نسوي زي هذا الي بالصورة



عليك اختيار الالوان وانا اخترت البني الفاتح والغامج طبعا علينا ندرج الالوان زي ما بهذي الصورة



اذا خلصنا منه اضغط اوكي وبعدين روح واعمل زي هذي الصورة او الشكل الي يعجبك



وهذا الشكل الي راح ينتج حقنا



طيب احين خلصنا من هذا الشي لازم احين تسوي تحديد ثاني لاكن شوف وين على نفس الهيدر



لا تنسى لازم تضيف لاير زي ما تشوف هنا



طيب شوف تحديد الالوان عشان نضيف الي فووق




بكتفي بهذا القدر اعزائي الاعضاء لانه موقع مكسات زي ما تعرفون ما يقبل كلام اكثر وصور ازيد

انتضروني بالدرس الجاي وانتضر الردود

__________________________________________________ _______

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

نتابع الدورة ونقول بسم الله

طبعا احنا نضيف لازم ادراج الالوان زي الي بهذي الصورة



طيب احين روح اضغط على هذا الاير مرتين عشان نعدل الاشياء شوف الصور



طيب احين شوف اذا ضغطت دبل كلك شو راح يطلع الك



طيب احين نروح نضيف خصائص حقه



وبعدين نروح نضيف الحاجة الثانية اتبع الصور وشوف المكان الي انا مركز الك فيه



ملاحظة : اذا اردنا حفظ الاستايل نقوم بالضغط على New Style





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

[IMG][/IMG]

واحين اذا ضغطنا على هذي نروح الى الاداة الي موضحة بهذي الصورة من view ____ show ____ grid

[IMG][/IMG]


اذا عملنا هذي الحركة لازم نسوي شي ثاني وهو هذا الشي نضيف زي الي موضح شووف كويس

[IMG][/IMG]

وراح بعدين نحصل على هذا الشكل الهندسي



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



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


___

طيب احين نروح نعدل على خصائص هذا الير الجديد رقم 3



نشوف الشكل كيف صار



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



اعمل انت مثلها

وكذا خلصنا الدرس ويتبع ان شاءالله

الدرس الجاي باقي علينا الجهة اليمين وغيرها من اشياء جمالية للستايل

انتضروني واتمنى اشوف بعض الردود

[الفارس المغامر]

وعليك السلام

ما شاء الله موضوع متميز

بالتوفيق والله يعينك

[بحريني2]

اخواني في اكثركم ما يعرف كيف يعمل اكثر من طبقة اتبع هذي الصورة وراح تعرف ان شاءالله



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

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



بعدين اضغط على هذي الي باللون الوردي زي ما تشوف عشان تضيف لاير للمربع



بعدين اذا خلصت روح الى اداة ادراج الالوان زي الي تشوفه بالصور وبعدين شوف هذا الخيار



طيب اذا دخلنا لازم نسوي زي الي بهذا الشكل


واضغط اوكي ok

بعدين لازم تضع الماوس من الزاوية الي فووق الى الزاوية السفلية اتبع الصورة



وشوف كيف راح يكون معاك الشكل



اذا سويت كل هذا وضبط الشكل معاك زيي روح اتوجه الى هذا الشيء الي بالصورة




راح تضهر الك واجهة كبيرة شوي لازم نعدل فيها كيف راح يكون شكل هذ1 المربع شوف انا وش سويت واعمل نفسي



طيب بعدين لازم نعدل على هذا الاير بالضغط عليه مرتين



راح تجيك هذي الصفحة عدل واعمل زي الي انا حاطه لك



طيب بعدين اختار هذي الاداة
وارفع الير رقم 4 الى لير رقم 1



احين شوف هذا الشكل الي انا سويته لازم اسحبه واخليه على يسار الهيدر البنر الي فوق


بأداة السحب هذي اسحبه الى يسار الهيدر زي الي بالصورة

شووف كيف صار لما وديته يسار



طيب شوف اخووي احين اعمل الى لاير رقم 4 نسخ يعني انسخه 3 طبقات وشوف كيف راح يصير



احين اخووي نبي نعدل كل اليرات ونحطهم داخل مجلد اتبع هذي الصورة



وبعدين اتبع الثلاث نقاط تراها مهمة



وهذا الشكل راح يكون كذا



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

تراني تاعب كثيير في هذا الموضوع اتمنى تقدرون كل الي اسويه للمنتدى

تقبلوا تحياتي وانتضروني في الدرس القادم

[بحريني2]

اول شي احب اشكر الي ثبت الموضوع جزاه الله الف خيير وانتضروا التكملة الان

[randonita]

ثانكس

بحريني2
والله لا يحرمنا منك قلبوووو

[بحريني2]

مشكووورين على الردود

وانتضركم وجاري تكملة الدرس

[بحريني2]

ثانكس

بحريني2
والله لا يحرمنا منك قلبوووو

شكرا على الرد اختي

واتمنى اشوف تطبيقك

الى اللقاء في الدرس الجاي

[randonita]

ترى نص الصور مو باينه

[الفارس المغامر]

يعطيك العافية

ياليت لو ترفع الصور على مكسات إن أمكن ذلك

لأن بعض الصور لم تظهر

[بحريني2]

هلا اخووي

انا اعمل هذي المشكلة

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

[بحريني2]

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

اخواني راح نكمل الموضوع الان

طيب احين احنا سوينا جهة وحدة حلوة والجهة الثانية لازم نعدلها كمان

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



طبعا اذا عملنا الها نسخ شوف كيف راح يكون



احنا نبيها بالشكل المعكوس عشان تناسب الجهة اليمين شوف كيف



بعدين راح يكون الشكل معاك زي هذا



بعدين ضل اعمل لها نسخ نفس المرة الاولى وراح يطلع الشكل كذا



خلصنا من هذا الجزء احين نروح حق الحركة الجمالية

ونعمل نفس الشي كوبي حق الاير 4 شوف الصورة



طيب شوف الصورة الشكل مب حلوو ابدا لازم نعدل هذا العمود عشان يصير تمام

شوف لازم تعمل نفس هذي الصورة
[IMG][/IMG]

وشوف احين كيف راح يكون الشكل

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



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

طيب احين خلصنا من هذي المرحلة ننتقل الى اسفل الهيدر



وبعدين اضف لاير

بعد ذلك نقوم بأدراج الالوان زي الي بالصورة



ونعمل الادارج زي هذا الشكل



وشوف كيف ضهرت النتيجة



طيب نعدل على هذا الير وهو رقم 5



طيب نروح الى الخيار الي حطينا عليه صح ونعدل الشيء الموضح بالصورة



خلصنا من الهيدر نقريبا وهذا الشكل النهائي




بقى لنا شغله وحدة في الهيدر وهي نحط الصور طبعا الي يبي صور يتبع الشرح والي ما يبي ينتضرني في الشرح القادم

طبعا شرح وضع صورة تجميلية بعد قليل

الى اللقاء في درس وضع صور للهيدر او البنر

تقبلوا تحياتي..

[chibi_tsuki]

thankxxxxxxxxxxx so much for this topic

i just want to search for this ... thankx gods i don't have to search now

thankx so much again ... great work

[chibi_tsuki]

please can you upload the pic again cause it most of it don't apear

and sory for written english because of my computer

[بحريني2]

please can you upload the pic again cause it most of it don't apear

and sory for written english because of my computer

هلا اختي

مب مشكلة

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

انا كلمت المراقبين وان شاءالله نعدل الموضوع والصور

وشكرا على الرد

والحمدلله انج لقيتي الموضوع وان شاءالله بكمل الشرح تراه طوييل جدا

ومب مشكلة عن اللغة الانجليزية تراني أفهم

شكراً

[بحريني2]

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

السلام عليكم

حبيت اني افيدكم واحط لكم ال 67 صورة حق الشرح في مرفق واحد

عشان بعض الصور مب ضاهرة

طبعا الصور مرقمة من 1 الى 67

طبعا هذا المرفق لتعديل الهيدر

وكيفية وضع صورة عما قريب ان شاءالله

واتمنى ما تنقطعون عن الردود

مع السلامة
للتحميل اضغط على الصورة

[سلام الشاعر]

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

[بحريني2]

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

هلا والله بالغالي

العفو اخوي واتمنى عجبك الشرح

اليوم ان شاءالله راح اتفق مع مشرف القسم وراح نعدل الموضوع كله ان شاءالله

تسلم على الرد

الى اللقاء

[KABOOM]

السلام عليكم

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

والموضوع استحق التثبيت ...

وبالنسبة للصور

ربما السبب في عدم ظهور بعضها هو ازحام والضغط على السيرفر

وراح تظهر الصوره بإتباعك هذه الطريقة و ستظهر الصور


1- قم بالضغط على مكان الصوره بالزر الايمن

2 -إظهار الصوره أو show pic... وتظهر ان شاء الله

[بحريني2]

شكرا اخووي كابوم

وهذا من حسن ذوقك الرفيع

و انا جربت الطريقة الي قلتها وضهرت الصورة

نفس ما قلت ضغط على السيرفر

تسلم على الرد

مع السلامة