سلسلة تصميم موقع كامل.....(..الجزء الثاني.)الاول
 

مرحبا من جديد هذا الجزء الثاني من تصميم المواقع..
( اللهم لاعلم لنا الأ ماعلمتنا )

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

اولا باول .
كما لا يغيب عنكم بان الدروس مكملة لبعضها ، حيث انه تم طرح الحلقة الاول لسلسلة تصميم موقع كامل وبطريقة احترافية

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

الحلقة الاول


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

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

-

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

[bimg]http://www.des-ksa.com/up/images/2-web-p/web.gif[/bimg]

أضغط على الصوره لتراها بشكلها الطبيعي


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

-

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

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

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



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

http://www.des-ksa.com/up/images/2-web-p/1.gif

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

http://www.des-ksa.com/up/images/2-web-p/2.gif

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

http://www.des-ksa.com/up/images/2-web-p/3.gif

نختار لونين متناسقين واحد ثقيل والاخر خفيف ... ونقوم بتلوين الخلفيه باللون الخفيف كما تلاحظ

http://www.des-ksa.com/up/images/2-web-p/4.gif

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

اثنتين بشكل طولي والاخرى كبيره بالنص

http://www.des-ksa.com/up/images/2-web-p/5.gif

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

http://www.des-ksa.com/up/images/2-web-p/6.gif

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

والتعبئه

http://www.des-ksa.com/up/images/2-web-p/7.gif

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

بالصوره ونذهب للخيار الاخير .

http://www.des-ksa.com/up/images/2-web-p/8.gif

نعمل كما تلاحظ بالصوره وهذا لأعطاء الدائره تحديد على اطرافها

[img]http://www.des-ksa.com/up/images/2-web-p/9.gif[/img

الان نرسم دائرتين بالاعلى كما تلاحظ

http://www.des-ksa.com/up/images/2-web-p/10.gif

ونعدل على الدوائر لنعطيها شكل افضل

http://www.des-ksa.com/up/images/2-web-p/11.gif

نبداء بضبط الاعدادات كما تلاحظ بالصور التاليه

http://www.des-ksa.com/up/images/2-web-p/12.gif

http://www.des-ksa.com/up/images/2-web-p/13.gif

http://www.des-ksa.com/up/images/2-web-p/14.gif

http://www.des-ksa.com/up/images/2-web-p/15.gif

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

اي شكل اخر ... بعد الحفظ اضغط اوكي ..

http://www.des-ksa.com/up/images/2-web-p/16.gif

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

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

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

http://www.des-ksa.com/up/images/2-web-p/17.gif

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

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

او الكل

http://www.des-ksa.com/up/images/2-web-p/18.gif

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

بالصوره

[img]http://www.des-ksa.com/up/images/2-web-p/19.gif[/img

والان نختار شكل جديد وليكن الموجود بالصوره التاليه

http://www.des-ksa.com/up/images/2-web-p/20.gif

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

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

المطلوب تابع الصور التاليه

http://www.des-ksa.com/up/images/2-web-p/21.gif

ثم نعكسها باأتباع الصوره التاليه

http://www.des-ksa.com/up/images/2-web-p/22.gif

ينتج هذا الشكل الى الان ..

http://www.des-ksa.com/up/images/2-web-p/23.gif

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

http://www.des-ksa.com/up/images/2-web-p/24.gif

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

http://www.des-ksa.com/up/images/2-web-p/25.gif

نختار الصوره ونضغط فتح

http://www.des-ksa.com/up/images/2-web-p/26.gif

الان نجعل الصوره فوق الدائره .. وندمجها .. باتباع الصوره التاليه .

http://www.des-ksa.com/up/images/2-web-p/27.gif

بعد الدمج نريد تعديل الوان الصوره لتتناسق مع الموقع .. تابع الصوره لتعديل الألوان

[img]http://www.des-ksa.com/up/images/2-web-p/28.gif[/img

[تظهر نافذه التعديل .. اول شي نأشر بعلامة صح على المربعات الموضحه تحت .. ثم نسحب الموشر ليعطينا اللون المطلوب للصوره

http://www.des-ksa.com/up/images/2-web-p/29.gif

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

http://www.des-ksa.com/up/images/2-web-p/30.gif

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

http://www.des-ksa.com/up/images/2-web-p/31.gif

تظهر نافذه تحذيريه .. اضغط اوكي

http://www.des-ksa.com/up/images/2-web-p/32.gif

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

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

http://www.des-ksa.com/up/images/2-web-p/33.gif

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

ينتج عندنا هذا البنر بشكل احترافي مع الخلفيه ........

http://www.des-ksa.com/up/images/2-web-p/34.gif


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

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

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

تقبلوا تحياتي ...
اسير الشمال

ترقبوا الجزء الثاني,,,,,,2

مشكور

العفو وهذا واجبنا

مشكور والله يعطيك العافيه

العفو

ماقصرت شرح موجز يعطيك العافيه

كل الشكر ع المجهود

ولاهنت اخوي :)

العفو

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

وماقصرتوا

مشكوووووووووووووووووووووووووووووووووووووررررررررررررررررررررررييييييييييييييييييييييييييييييين


جميعا على الردود وماقصرتوا

وهذا كله من اجل المنتدى والاعضاء

العفو

العفو وماقصرتي

مشكور يعطيك الف عافيه