دوره تصميم المواقع بالفوتوشوب (يتضمن الشروع بمراحل التصميم) الملحق لثالث --خالدالحربي

اخوانى الكرام
اسعد الله اوقاتكم بكل خير اينما كنتم

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

الملحق الاول مفاهيم اساسيه
الملحق الثانى مفاهيم متقدمة

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

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


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

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

ثالثا :
قد يلزمنا الامر فى أن نرى بعد انجاز احد المراحل فى الملحق الثالث ان نراه LIVE وهذا ما سوف نقوم به ونشير اليه فى حينه برابط وهذا الامر لن يتحقق الا باخذ الموافقه من الاداره الموقره على ذلك لاننى بفضل من الله لا ابحث عن اعلان و***** موقع ما ... بل هدفى توصيل المعلومه بقدر كافي من الشفافيه والمصداقيه بعيدا كل البعد عن حب الذات وحب المظاهر بطرق انا لا احبها والا اسعى للنيل منها .


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

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

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

المرحله الاولى
اعداد الادله
اضافة خلفيه للواجهه
اضافة بعض التأثيرات




البدايه الملحق الثالث المرحله الاولى

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

1- استخدم الامر File ثم New او اضغط من لوحة المفاتيح Ctrl +N لانشاء ملف جديد وسيظهر معنا المربع New الموضح بالصوره التاليه

http://shamaliat.com/up_ar/ar/designe_web001.jpg

2- اضبط ابعاد الملف 777 نقطه للعرض و450 نقطه للطول واجعل درجة الوضوح 72 نقطه / البوصه وهذه القيمة هى القيمة الافتراضيه لدرجة الوضوح فى اعمال الويب . والنمط اللونى اجعله عند الاختيار RGB واختيار Contents اجعله White مثل ماتراه موضح بالصوره اعلاه .

3- اظهر المساطر وذلك باختيارنا الامر View ثم Rulers او اضغط Ctrl +R من لوحة المفاتيح ليتم ظهور المساطر الافقيه والراسيه بالملف ناظر الصوره

http://shamaliat.com/up_ar/ar/designe_web002.jpg

4- لابد ان نقوم بضبط وحده القياس المستخدمة الى وحده Pixels حيث هى الانسب فى اعمال الويب لان الصفحات يتم عرضها فى النهايه على شاشه تقدر ابعادها بالنقاط Pixels ونستطيع ان نعمل ذلك بعدة طرق منها على سبيل المثال :

النقر المزدوج فوق المسطره Rulers ليظهر مربع الحوار Preferences التالية ناظر الصورة

http://shamaliat.com/up_ar/ar/designe_web003.jpg

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

http://shamaliat.com/up_ar/ar/designe_web004.jpg

5- قم بتكبير روية الملف الى 700% عن طريق ضغط + + Ctrl عدة مرات او استخدام لوحة Navigator لتنفيذ ذلك .

6- اضغط مفتاح space من لوحه المفاتيح لتظهر اداة اليد Hand ( لو اردت مشاهده الصفحه من عدة اتجاهات ) .

7- اضغط مفتاح v من لوحة المفاتيح لاختيار اداة الـ Move الحركة ( عند الشروع فى سحب المساطر الافقيه والعاموديه .

http://shamaliat.com/up_ar/ar/designe_web005.jpg

اضافة خلفيه للموقع

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

1- استخدم الامر لانشاء ملف جديد وضع ابعاد الملف 200* 200 للطول والعرض وقيمة درجه الوضوح 72 والنمط اللونى اجعله عند الاختيار RGB واختيار Contents اجعله White شاهد الصوره

http://shamaliat.com/up_ar/ar/designe_web006.jpg

2- اختر الامر
Filter | Noise | Add Noise حيث سيظهر مربع Add Noise واعمل كما تشاهد بالصورة

http://shamaliat.com/up_ar/ar/designe_web007.jpg

3- اختر الامر Filter | Blur | Blur لاحداث نوع منتشوية النقاط والحصول عليها فى صورة انعم .


4- استخدم الامر Filter | Stylize | Emboss حيث سيظهر مربع الحوار Emboss وقم بعمل مثل الصورة التاليه :


http://shamaliat.com/up_ar/ar/designe_web008.jpg

5- اختر الامر Image | Image Size ليتم ظهور المربع الحوارى Image Size وسوف تشاهد الابعاد 200 نقطه وذلك لكى نحصل على حجم اصغر للتأثير نقاط الخلفيه .

6- استخدم الامر Select | All او الضغط على Ctrl + A من لوحة المفاتيح ليتم تحديد المساحه الكلية للملف .

7- اختر الامر Edit | Define Pattern ليظهر لنا المربع الحوارى Define Pattern وقم بتسميه هذاالنوذج الى اى اسم ترغبه انا اسميته Background Alharbi شاهد الصوره

http://shamaliat.com/up_ar/ar/designe_web009.jpg

8- اختر الامر File | Close لاغلاق الملف الحالى بدون حفظ ( قد كان هذا الملف مؤقتا تم انشاؤة فقط للحصول على النموذج السابق )

9- ادخل الانالى ملف العمل الاساسى الخاص بصفحة الواجهه ( الموقع ) قم بتنشط طبقه Background ثم اختر الامر Edit | Fill ليظهر المربع الحوارى Fill

10- اختر نوع الملء Pattern ثم اختر النموذج الذى اسميته انا Background Alharbi السابق اعداده وذلك مناختيار Custom Pattern ثم انقر الزر ليتم الملء على النحو التالى كما تشاهده بالصوره

http://shamaliat.com/up_ar/ar/designe_web010.jpg



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

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

محبكم فى الله
خالدالحربي



https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©