اكبر مؤسسة لتعليم التصميم ... فى غمضة عين (مجدد) لا تكتب تعليق

سلسلة تعليم تصميم موقع كامل بطريقة احترافية ( الحلقة الاول)

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

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

وذلك يجب اتباع الاتي

- المكونات الاساسية:
1- برنامج الفوتوشوب
2-مساحه على شبكة الانترنت لرفع الموقع
3- برنامج الفرنت بيج
4- حجز برنامج الشات
5- برنامج الاف تي بي

- سلسلة الدروس التي سوف نتطرق لها

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


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

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

والان اخواني الاعزاء سوف نبداء في سلسلة الدروس وكان الله في عوننا جميعاً

تمت الحلقة

سوف اعمل لكم تعليق ...... لا اريدكم فى التعليق

الحلقة الثانية
سلسلة تعليم تصميم موقع كامل ( واجهة موقع احترافية ) الجزء الاول

-

نقوم بعرض الواجهه النهائية التي سنصممها


[وحدهم المديرون لديهم صلاحيات معاينة هذه الصورة]

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

الموقع بالجزء الثاني كاملا ..

,,,,,,,,,,,,,,,,,,,,,,,,



افتح برنامج الفوتوشوب بالضغط مرتين على ايقونة البرنامج ( دبل كليك )

[وحدهم المديرون لديهم صلاحيات معاينة هذه الصورة]

نختار من ملف .... جديد .

[وحدهم المديرون لديهم صلاحيات معاينة هذه الصورة]

نضبط المقاسات كما تلاحظ 770 - 800 بكسيل

[وحدهم المديرون لديهم صلاحيات معاينة هذه الصورة]

نختار لونين متناسقين واحد ثقيل والاخر خفيف ... ونقوم بتلوين الخلفيه باللون الخفيف كما تلاحظ
[وحدهم المديرون لديهم صلاحيات معاينة هذه الصورة]

الان نرسم بالدائره ( اذا لم تكن واضحه الدائره عندك اضغط الزر الايمن على المربع وخترها من القائمه ) نرسم 3 دوائر ويكون شكلها كما تلاحظ بالصوره

اثنتين بشكل طولي والاخرى كبيره بالنص
[وحدهم المديرون لديهم صلاحيات معاينة هذه الصورة]

الان نحول الدوائر جميعا لنتمكن من التعامل معها بشكل افضل ... تابع الصوره لتحويل الدوائر الى اشكال عاديه
[وحدهم المديرون لديهم صلاحيات معاينة هذه الصورة]

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

والتعبئه
[وحدهم المديرون لديهم صلاحيات معاينة هذه الصورة]
نقوم بتعبئة الدوائر واحد واحد نحدد الدائره بالضغط عليها ثم نعبئها بالباترن المختار ... والان نريد اعطاء الدوائر شكل افضل .. نختار الاداة الموضحه

بالصوره ونذهب للخيار الاخير
[وحدهم المديرون لديهم صلاحيات معاينة هذه الصورة]

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

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

. ومن لم تظهر له هذه الانماط يذهب الى .. قائمة وندوز او نوافذ .. ثم يختار ستايل او نمط ....... بعد تعديل الدوائر . نرسم مستطيل فوقها

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

ومن لم تظهر هذه الاشكال عنده يضغط على الزر الصغير بأقصى اليمين .. وهو محدد باللون الازرق بالصوره التاليه .. تظهر قائمه . اختر كلمة all

او الكل
[وحدهم المديرون لديهم صلاحيات معاينة هذه الصورة]

نرسم بالشكل المحدد اثنين ونوزعها على اليمين واليسار بشكل منسق ونعطيها اعدادات مثل الدوائر السابقه من قائمة ستايل التي حفظنا الاعدادات بها كما تلاحظ

بالصوره
[وحدهم المديرون لديهم صلاحيات معاينة هذه الصورة]

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

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

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

المطلوب تابع الصور التاليه
[وحدهم المديرون لديهم صلاحيات معاينة هذه الصورة]
ثم نعكسها باأتباع الصوره التاليه
[وحدهم المديرون لديهم صلاحيات معاينة هذه الصورة]
ينتج هذا الشكل الى الان ..
[وحدهم المديرون لديهم صلاحيات معاينة هذه الصورة]
نرسم دائره متناسقه بالنص ونعطيها نفس ستايل الاشكال الاخرى .

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

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

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

مره اخرى اضغط على الزر المحدد باللون الاحمر للتعديل .. بعد ضبط الخط اضغط اوكي
[وحدهم المديرون لديهم صلاحيات معاينة هذه الصورة]

الان نكرر الخط ونعمل الشكل المطلوب مع الدائره الصغيره التي رسمناها .. ونكرر هذا الشكل لتوزيعه على البنر كما تريد ..

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

اتمنى التطبيق لتعم الفائده ...

مع خالص تمنياتي للجميع بالتوفيق