|
دورة تصميم المواقع بالفوتوشوب بثلاثة مستويات
 مرحباً إخوانى الكرام يسرنى أن أبدأ معكم دورة تعليم تصميم المواقع بالفوتوشوب من البدايه حتى الاحتراف بثلاثة مستويات 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  ============================ حتى الان تعلمنا فكرة الطبقات و كيفية تحريكها و تغيير شفافيتها و تغيير أبعادها و تعلمنا إستخادم الاستايلات و تعلمنا كيفية عمل شكل سواء ثابت او منحنيات عشوائيه و تطبيق الاستايلات عليها و تعلمنا فى الدرس الاخير هذا كيفية دمج الصور فى بعضها لصناعة بنر لطيف و متناسق و تكون صوره ناعمة الاطراف و متنجانسه ================= نتقابل فى دروس أخرى بأمر الله أخوكم |
رائـــع رائــع
الله يباركـ فيكـ اخوي دنجوان درس رائــع يعطيكـ العافيه إن شاء الله وبإنتــظار جديدكـ |
جزاك الله خيراً
سأكون تلميذة دائمة، لكن روابط التحميل لا تعمل |
مشكور اخوي على هذا الموضوع المهم
ونرجوا من الله ثم منكم الاستمرار بها الى درجه الاحتراف اننا في انتظار المزيد |
شكرا جزيلا إخوانى الكرام على ردودكم الرائعه هذه بارك الله بكم جميعا
وجارى البحث عن روابط جديده لبرنامج الفوتوشوب حيث لم تعد الروابط التى بالاعلى تعمل لأن البرنامج حجمه كبير واى موقع يرفعه يستهلك ترافيك ضخم بالطبع |
doongoan
اخوي بخصوص البرنامج ان شاءالله انا سارفعه على موقعي حتى اتيح لكم ان تتابعو الدروس( مايبي اي عذر لكم ) لاننا فعلا حابين نتعلم وشلون نصمم موقع وياريت ياخوي doongoan انك ترفع الصور حقه الشرح على موقعك انت واذا تبيها على موقعي راسلني وابشر بخير هذا اول شيء وثاني شيء ياريت اخوي لو تغير اسمي من جابر الكاسر الى شمالي الجوف لان هذا اسمي في كل المنتديات التي عرفت بها ارجوا ان اخدمكم في اي شيء فيه مصلحه الكل |
ما شاء الله
مبدع كما تعودنا دائماً يالغالي وربي يوفقك |
شكرا جزيلا اخى الغالى ابو الليل على تشريفك للموضوع
اخى الغالى جابر الكاسر يمكنك كتابة موضوع جديد بقسم الاقتراحات تطلب فيه تغيير مسماك الى شمالى جوف و الاخوان ما بيقصرون إن شاء الله تقبل التقدير و الاحترام |
مشكور يالغلا وفى انتظار ابداعك لنا يامبدع
اخوك |
مجهود اكثر من مييز
سلمت ولا عدمناك |
مشكووور اخوى على المجهود المميز
تحياتى لك |
مرحبا اخوي
يعطيك الف عافيه وان شاءالله تقبلني طالبه عندك ويندي :p |
ما تقصر أخوي يعطيك العافية ...
|
جميل وياريت تكمل
|
يعطيك العافية أخوي
والله يوفقك ان شاء الله لتكمل الموضوع والدورة أخوي بارك الله فيك |
يعطيك العافية أخوي
والله يوفقك ان شاء الله لتكمل الموضوع والدورة أخوي بارك الله فيك |
مشاء الله عليك اخوي دورة رائعة وفيها الكثير من الفائدة
جزاك الله كل خير |
بارك الله فيك
|
| جميع الأوقات بتوقيت مكة المكرمة. الساعة الآن » 07:28 AM. |
Powered by vBulletin
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Copyright © ArabWebTalk.Com 2004-2012