دورة تصميم المواقع بالفوتوشوب بثلاثة مستويات

[Chakira]

http://dev4arab.net/uploads/ps/intro1.gif

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

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

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

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

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

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

http://dev4arab.net/uploads/ps/devider.gif

http://dev4arab.net/uploads/ps/firststage.gif
مبادىء و أساسيات التعامل مع برنامج الفوتوشوب

=====

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

=====

يمكنكم تنزيل الاصدار الثامن الداعم للغه العربيه من هذا الرابط

هنـــــــــــــــــا (http://www.32uae.net/pro/Photoshop9me.rar)

أو

هنـــــــــــــا (http://www.downloads.ps-revolution.com/Adobe%20Photoshop%208%20CS%20ME.zip)

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

هنـــــــــــــا (http://www.downloads.ps-revolution.com/AdobePhotoshop7.0ME+Serial.zip)


=====

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

http://dev4arab.net/uploads/ps/2.gif

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

http://dev4arab.net/uploads/ps/1.gif

======

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

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

http://dev4arab.net/uploads/ps/a1.gif

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

http://dev4arab.net/uploads/ps/a2.gif

=====

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

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

http://dev4arab.net/uploads/ps/3.gif

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

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

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

http://dev4arab.net/uploads/ps/4.gif

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

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

http://dev4arab.net/uploads/ps/5.gif

=======

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

http://dev4arab.net/uploads/ps/6.gif

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

http://dev4arab.net/uploads/ps/7.gif

ولكن يمكنك ان تملاء الطبقه بلون واحد مره واحده بإستخادم الاداه التى يحلو للكثيرين تسميتها السطلhttp://www.dev4arab.net/vb/images/smilies/smile.gif

http://dev4arab.net/uploads/ps/8.gif

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

http://dev4arab.net/uploads/ps/9.gif

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

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

http://dev4arab.net/uploads/ps/10.gif

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




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

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

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

http://dev4arab.net/uploads/ps/11.gif

=====

نكتفى بهذا القدر لليوم فقط ولكن لا تتعودوا على هذاhttp://www.dev4arab.net/vb/images/smilies/confused.gif انا شديد جدا لكن ما أحب تكرهونى من أول جلسه

===

تقبلوا التقدير و الاحترام
أخوكم
دونجوان

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

ملحوظات


1- المستوى الاول لم ينتهى بعد ولم ننهى منه سوى جزء بسيط جدا
http://www.dzbatna.com/images/smilies/smoke1.gif
2- الصبر الصبر الصبر

( أسلوب توكيد يعنىhttp://www.dzbatna.com/images/smilies/shiny.gif

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





https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©