مرحباً إخوانى الكرام
يسرنى أن أبدأ معكم دورة تعليم تصميم المواقع بالفوتوشوب من البدايه حتى الاحتراف بثلاثة مستويات
1- مستوى مبادىء و أساسيات البرنامج
2- مستوى المبتدئين
3- مستوى المحترفين

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

وسوف نتعلم فى مستوى المبتدئين كيفية عمل صفحة تصميم بسيط لصفحة إنترنت تحتوى إطار خارجى وبعض الازرار و التأثيرات

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

( أى أنه هذا هو فصل الاحتراف الحقيقى )

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

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

تقبلوا التحيه والتقدير

مبادىء و أساسيات التعامل مع برنامج الفوتوشوب

=====

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

=====

=====

لفتح البرنامج من قائمة start إختر programs ومن ثم وبعدها إختر adobe photoshop

فينفتح أمامك البرنامج كما بالشكل

======

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

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

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

=====

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

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

الان لتحريك أى طبقه من هذه الطبقات الثلاثه لتغيير ترتيبها

بحيث مثلاً أريد أن أجعل المثلث الاخضر يأتى أمام الدائره الحمراء

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

ومن ثم أضغط فى لوحة المفاتيح على
ctrl ومعها د

فنجد أن الطبقه التى تحتوى على المثلث الاخضر أصبحت أمام الطبقه التى تحتوى على الدائره الحمراء سواء فى قائمة الطبقات أو فى الصوره نفسها

=======

لأنشاء طبقه جديده نستخدم هذا الزر الصغير

والطبقه يتم إنشائها بشكل إفتراضى شفافه

ولكن يمكنك ان تملاء الطبقه بلون واحد مره واحده بإستخادم الاداه التى يحلو للكثيرين تسميتها السطل

فإذا إستخدمت لونا أحمرا لصبغ الطبقه التى أنشأناها مؤخراً سيصبح الشكل كله عباره عن صوره بها لون أحمر لأن الطبقه الاخيره أصبحت أعلى جميع الطبقات كما بالشكل

الان لنفترض أنك تريد إظهار باقى الطبقات
هناك أكثر من حل

أحدها أن تغير من شفافية الطبقه ذات اللون الاحمر التى أنشأناها مؤخراً
وذلك من الاداه كما بالصوره

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

هناك حل أخر لجعل الطبقات الخلفيه تظهر

وهو تصغير أبعاد الطبقه الحمراء

وذلك بالضغط على ctrl مع t فتظهر أربع نقاط نبدأ فى جذبها للداخل فنصغر أبعاد الطبقه الحمراء ليظهر ما خلفها

=====

[

==================

ملحوظات

1- المستوى الاول لم ينتهى بعد ولم ننهى منه سوى جزء بسيط جدا

2- الصبر الصبر الصبر

( أسلوب توكيد يعنى )

نستكمل ما بدأناه

تابع المستوى الاول::::

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

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

نبدأ على بركة الله

========================

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

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

مثال:
1-قم بإنشاء طبقة جديده ( الافتراضى أنها تكون شفافه)
ثم قم بإختيار الاداه التاليه

ثم إبدأ برسم المستطيل

فينتج أمامك مستطيل بهذا الشكل

الان هذا الشكل لكى نقوم بإستخدامه لابد من تحويله من الحاله path الى الحاله sellect

أى أنه الان مازال قابلا للتعديل ولكى نفهم البرنامج أننا إنتهينا من تعديل الشكل و سننتقل الى مراحل أخرى لابد أن نحوله الى sellect وذلك بالضغط على
ctrl ثم enter

ومن ثم ستلاحظ أن شكل المستطيل تغير من خط متصل cotinues line الى خط منقط dotted line أى أنه تحول من
الحاله path ( المسار) الى الحاله sellect إختيار

الان يمكننا ملىء هذه المساحه المختاره (المستطيل) بأى لون مبدئى ( لأنه كما إتفقنا لتطبيق أى ستايل لابد أن تكون مساحه مملوءه أى لون حتى ولو كان اللون الابيض)

سأملئها بواسطة أداة السطل

الان لألغاء التحديد
( لكى تفهم البرنامج أنك لن تؤدى المزيد من العمليات بإستخدام التحديد)
إضغط على ctrl مع d

لتجد أن الخط المنقط قد إختفى

الان يمكننا تطبيق أى ستايل بكل بساطه

وذلك بالضغط على الشكل الذى يناسبنا من قائمة الاستايلات

فلنفترض أن تلك المجموعه من الاستايلات لا تعجبك؟
إذن فيمكنك إختيار مجموعه أخرى بالضغط على السهم الصغير المجاور لكلمة style فى صندوق الاستايلات و من ثم تختار مجموعه أخرى

===============================

الدرس التالى:::::

للحصول على شكل محدد أو إنسيابى فيجب إستخدام أداة الـ path أو المسار

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

الان ننشىء طبقه جديده فارغه ونختار أداة الباث

ونتأكد من أن إعدادات الاداه بالاعلى كما بالصوره التاليه

ثم نبدأ بوضع نقطه تلو الاخرى مع السحب

و لأنهاء المسار () لنغلقه ليكون شكل
نتوجه الى نقطه البدايه ونضع نقطه

الان يمكننا التعديل على ما رسمناه بالضغط على ctrl فى لوحة المفاتيح مع عدم إفلاتها " أى الضغط المستمر
وبأداة الباث نعدل فيما أخطأنا فيه

الان لكى نحول هذا المسار الى إختيار
path to sellection

نضغط على ctrl ثم enter كما تعلمنا بالدرس السابق

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

ومن ثم نملاء الاختيار بأى لون و نطبق عليه أى ستايل كما تعلمنا بالدرس السابق
================================

أراكم على خير بالدرس القادم بإذن الله

مرحبا إخوانى الكرام

أود أولا أعتذر عن تأخرى بطرح الدرس الجديد لقيامى ببعض الاعمال
ولنستكمل

تابع المستوى الاول
====================
سوف نتابع اليوم الدروس التمهيديه التى بدأناها سويا
فمن أهم أدوات الفوتوشوب التى يجب أن نتمكن منها جيداً هى أداة الـــــــ sellect

فمثلاً لنفترض أننى رسمت هذا المستطيل إنسيابى الاطراف
( الذى تعلمنا عمله فى الدرس السابق)

الان انا أريد أن أضيف على يمين المستطيل صورة حصان وفى نفس الوقت تصبح ناعمة الحدود
أى أنها تندمج فى المستطيل " او البنر " الذى قمت بتصميمه
ولعمل ذلك
أقوم بفتح الصوره التى تحتوى الحصان المطلوب
و أسهل طريقه لذلك هى سحب صورة الحصان و إفلاتها فى البرنامج مباشرة drag&drop

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

وذلك بالضغط على إطار الصوره بالماوس الايمن و نختار image size ومن ثم سأضع فى خانة hight
نفس إرتفاع التصميم أو اقل منه قليلا

وبالطبع بهذه الطريقه العرض أصبح كبير جدا فأصغر العرض أيضا لتصبح الصوره بهذا الشكل

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

وبعدها نضغط على ctrl و enter ليتم إختيار المسار الذى رسمناه

الان إضغط فى لوحة المفاتيح على alt و ctrl و d بالتتابع
لتؤدى التأثير المسمى feather
و ضع فى الصندوق أى رقم وكلما زاد الرقم زادت درجة النعومه و لنفترض 4 مثلا

الان إضغط على ctrl مع c
لنسخ الجزء الذى حددناه هذا
ثم إتجه للتصميم الذى يحتوى على المستطيل و إضغط

ctrl مع v لتلصق الجزء الذى نسخته من الحصان

ولنفترض أنه هناك منطقه او جزء صغير ليس منعما جيدا او يحتاج لنعومه إضافيه
فنقوم بإستخدام أداة الـــــــ blur

============================

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

الدرس هذا منقول

ولكن

تأكدواااااا

انه لم ينقل الا للفائدة

درس شيق
شكرا لك
لكن اغلب الصور لم تظهر عندي

شكرا جزيلا

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


على العموم مجهود رائع

واصل الموضوع

قدما ان شاء الله

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

جزاك الله خير وفي انتظار التتمة