المساعد الشخصي الرقمي

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



salima
10-30-2013, بتوقيت غرينيتش 03:20 AM
اخوانى الكرام بالامس القريب كان لنا وقفه كامله مع الملحق الاول

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


على هذا الرابط
دوره تصميم المواقع بالفوتوشوب ---- الملحق الاول --- خالد الحربي (http://www.dzbatna.com/t101076/)


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


http://shamaliat.com/up_ar/ar/No.2.jpg


بسم الله الرحمن الرحيم

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

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



كيفيه اختيار اللون فى الفوتوشوب

ويتم ذلك بعدة طرق منها :
استخدام مربع الحوار Color Picker

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

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

وكا تشاهد ان هذاالمربع يمكننا اختيار الالوان من خلاله بأحد الانظمة اللونيه المتاحه وهى :

HSB , RGB , Lab , CMYK ولا ندخل بتفاصيلها حيث ما يهمنها نظام RGB فقط ( وان اردا اى سائل السؤال عن بقية الانظمة فلن اتردد بشرح طريقةها )

اذا كما قلنا ان ما يهمنا هنا فى اعمال الويب التفضيل باختيار لون بنظام RGB حيث يعبر عن مدى لونى واسع كا ان تنشيط اختيار Only Web Colors يعمل على ظهور الالوان التى يتم استخدامها للصور على الويب . ناظر الصورة

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

وعدد الالوان المتاحه عندما قمنا بتنشيط اختيار Only Web Colors هو 216 لون وعند الاستخدام نظمن ان الالوان سوف تظهر بدون اختلافات على الشاشات ذات العمق اللونى 8 بت .

وفى حالة عدم تنشيط Only Web Colors اذا قمنا باختيار لون غير موجود داخل 216 لون فسيتم ظهور علامة الصندوق المضلع ( ناظر الصوره) وهنا احب ان انبهكم الى ان اللون سيحدث به اختلاف عند العرض على الشاشات , واذا ضغطنا بالماوس ( النقر ) على علامة الصندوق المضلع فسيتم اختفاؤها وتنتقل الدائره الخاص بالاختيار الى اللون الاقرب داخل حدود 216 لون

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

وايضا يتيح لنا مربع الحوار Color Picker بيانات اللون وفق للنظام السداسى عشر والذى يمكن نسخه واستخدامه داخل برامج تحرير الملفات من نوع HTML وذلك فى الجزء المخصص لذلك http://shamaliat.com/up_ar/ar/ColorPicker04.jpg وناظر الصور السابقه للشرح طريقة لتعرف اين موقع هذا الجزء المخصص يعنى باختصار شديد لو وضعت الماوس على هذاالجزء وبدأت تكتب بيانات اللون مثل OOOOCC لشاهدت احدى تدرجات الازرق او 2C2C8A تشاهد لون اخر وهكذا

ماهى استخدام لوحة Color

لوحة Color احد موارد اختيار اللون ببرنامج الفوتوشوب ويمكن اختيار اللون باى من الانظمة اللونه المتحه فى القائمة التاليه ناظر الصوره

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

استخدام لوحة Swatches


لوحة Swatches ايضا احد موارد اللون الخصبه بالفوتوشوب يمكنك الاختيار من مكتبات اللون الجاهزة والغنيه والمتاحه فىالقائمة الجانبيه ناظر الصورة

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

الان لابد ان نعرف استخدام اداه القطاره http://shamaliat.com/up_ar/ar/ColorPicker07.jpg Eyedropper لانتقاء اللون
يمكننا استخدام اداة القطاره فى اختيار لون من داخل التصميم او من صوره وذلك بالنقر مباشره باستخدام اداة القطاره فوق عينه اللون ليتم اختياره كلون امامى ويمكن استخدامه بعد ذلك فى عمليات التلوين .
وايضا نستخدم اداة القطاره فى نسخ اللون ولكن بالقيمة السداسى عشريه حيث يمكن استخدامها داخل برامج تحرير ال HTML مثل الفرونت بيج وذلك بالنقر بالزر الايمن للماوس فوق عينه اللون لتظهر القائمة الفرعيه ناظر الصورة

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

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

ملء مساحات التحديد




من القائمة الرئيسيه اضغط على Edit ثم Fill سوف تخرج لك هذا المربع الحوارى ناظر الصوره
وشاهد مدولاات الارقام من 1 الى 7

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

1- لملء باللون الامامى
2- للملء باللون الخلفى
3- للملء باحد نماذج الباترون pATTERNS ناظر الصورة

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

4- لملء بيانات اخر حفظ للملف وهى تعتبر من طرق التراجع حيث يتم الغاء التعديلات والرجوع الى تاريخ الملف عند اخر حاله تم حفظه عليها .
5- للملء باللون الاسود
6- للملء باللون الرمادي المحايد 50%
7- للملء باللون الابيض .

ادوات الرسم بالفوتوشوب

وهى كالتالى :

01- اداة Brush
02- اداة Pencil
03- اداة Gradint
04- اداة Paint Bucket
05- اداة Rectangle
06- اداة Rounded Rectangle
07- اداة Ellipse
08- اداة Polygon
09- اداة Line
10- اداة Custom Shape

الان دعونا نستعرض تلك المفردات الجميله المتميزة فى ادوات الرسم بالفوتوشوب والتى تساعدنا على انشاء تصميماتنا على درجة عاليه من الابداع والامتاع



01- اداة Brushhttp://shamaliat.com/up_ar/ar/Brushalharbi01.jpg

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

http://shamaliat.com/up_ar/ar/Brushalharbi02.jpg
ويمكن ان نتحكم فى عرض الفرش وذلك باى من الاختيارات المتاحة بالقائمة الجانبيه
ناظر الصوره

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

ومن انسب اختيارات العرض التى يمكن استخدام اختيار Small Thumbnail كما يمكن استدعاء مزسد من الفرش المخزنه بالبرنامج وذلك من بين المكتبات المتاحة ايضا بالقائمة الجانبيه ناظر الصوره

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

وهنا توضيح لبعض نماذج الفرش المتاحه

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

02- اداة Pencil http://shamaliat.com/up_ar/ar/Pencilalharbi01.jpg

وهى تتفرع من الاداة Brush حيث يمكن اختيارها بعد النقر بالزر الايمن للماوس وهى تستخدم ايضا فى تلوين المساحات غير ان اهم ما يميزها حالة الفرش المصاحبه لها اذ تتميز بالصلابه Hardnees ولايوجد بها نعومه ناظر الصوره التاليه لترى شكل الفرش المصاحبه للاداة Pencil

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

03- اداة Gradint http://shamaliat.com/up_ar/ar/Gradintalharbi01.jpg

تستخدم الاداة Gradint فى لنشاء التدرجات اللونيه المختلفه وتعتبر من اهم ادوات الرسم بالبرنامج ويمكن استخدام الاختيارات المختلفه للاداة للحصول على اشكال مختلفه من التدرجات ناظر الصوره

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

ويمكن الاختيار من بين التدرجات اللونيه الجاهزة التى تتيحها القائمة الجانبيه بشريط الاختيارات Options ناظر الصوره

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

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

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

لقد شاهدنا فى المربع السابق امكانية ايجاد كافة الامكانيات اللازمة لتعديل التدريج اللونى , طيب الان شاهد تلك العلامات المميزة لالوان التدريج والتى يطلق عليها Color Stops ناظر الصوره لتتعرف عليها

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

حينما نقومبا لنقر على احد هذه العلاملت يظهر لونها فىمربع الكلر COLOR وعند النقر فوق مربع COLOR يظهر مربع Color Picker

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

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

ولكى نتحكم فى موضع علامة اللون على خط التدريج اللونى يتم تنشيط العلامة حيث يحدد اختيار الوكيشن موضع هذااللون فى التدريج ويمكن تغيره بادخال قيمة جديده ( اى رقم )
وتقع علامات اللون كما رينا فى الصورة السابقه اسفل شريط التدريج كما نلاحظ وجود علامتين فوق الشريط باللون الاسود وهما للتحكم فى شفافية التدريج اللونى وتسمى Opacity Stops ناظر الصوره

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

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

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

04- اداة Paint Buckethttp://shamaliat.com/up_ar/ar/PaintBucketalharbi0001.jpg

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

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

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


05- اداة Rectangle http://shamaliat.com/up_ar/ar/Rectangle_alharbi01.jpg


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

تعتبر اداة Rectangle واحدة من ادوات رسم الاشكال Vector Shapes داخل برنامج الفوتوشوب وتستخدم فى انشاء مساحات مستطيله او مربعه باللون الامامى ويمكن التحكم فى اختيارات هذه الاداة من شريط الخيارات ناظر الصورة

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

06- اداة Rounded Rectangle http://shamaliat.com/up_ar/ar/RoundedRectangle_alharbi01.jpg

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

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

07- اداة Ellipse http://shamaliat.com/up_ar/ar/Ellipse_alharbi01.jpg

تستخدم هذه الاداة لانشاء مساحات بيضاوية او دائريه باللون الامامى ويمكن التحكم فى اختيارتها من شريط الخيارات وهى مشابهه الى حد كبير للاداة Rectangle

08- اداة Polygon http://shamaliat.com/up_ar/ar/Polygon_alharbi01.jpg

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

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

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

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

09- اداة Line http://shamaliat.com/up_ar/ar/Line_alharbi01.jpg

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

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


10- اداة Custom Shape http://shamaliat.com/up_ar/ar/Custom_Shape_alharbi001.jpg

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

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

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

ويمكن استدعاء مكتبات الاشكال الجاهزة بالبرنامج وذلك من القائمة الجانبيه ناظر الصوره

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


واليك هذا الرابط --- درس مفصل أداة رسم الأشكال Shape فى الفوتوشوب وطريقه استخدامه .. خالد الحربي (http://www.dzbatna.com/t43049/)

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

الفلاتر :

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

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

والنوع الاخر فلاتر اضافيه وهى تلك الفلاتر التى نضيفها لبرنامج الفوتوشوب وهى منانتاج شركات اخرى ويطلق على هذاالنوع من الفلاتر Third Party ومن اشهر الفلاتر الاضافيه : KPT و Eye Candy

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

1 - ان يتم تطبيق الفلتر على طبقه نشطه
2- فى حاله وجود تحديد Selection ويتم التنفيذ داخل مساحة التحديد .
3- طبقات النص لايمكن تطبيق الفلاتر بها الا بعد تحويلها الى طبقات عاديه وذلك باستخدام الامر RASTERIZE
4- بعد تنفيذ الفلتر يمكن التحكم فى درجة تطبيقه باستخدام الامر Edit ثم Fade Filter


التعامل مع النصوص :

اخى الحبيب اعلم ان عمليات التصميم تحتاج لاضافة اليها بعض النصوص ويمكن من خلالها ان نضيف ما يشاء من نصوص وتنسيقها وتعديلها بالعديد من الاختيارات ويتم ذلك باستخدام الاداة http://shamaliat.com/up_ar/ar/TYPEalharbi01.jpg او ادوات الكتابه المتفرعه منها ويمكن تعديل النص باستخدام الخصائص المتاحه فى شريط الخيارات او باستخدام لوحة Character التى يمكن الحصول عليها من قائمة الوندو ويمكن نضيف تأثيرات انحناء خاص فى النص باستخدام اختيار Create Warped Text من شريط الاختيارات كما يقبل النص تطبيق تأثيرات Layer Styles وعند الرغبه فى اضافة فلاتر لطبقه النص لابد من تحويلها اولا مثل ما قلنا فى قواعد استخدام الفلاتر الامر RASTERIZE


حفظ الملفات :

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

اوامرالحفظ Save عند اختيار الامر File ثم Save للمرة الاولى فى حفظ الملف يتم ظهور مربع كما بالصورة ناظرالصورة
http://shamaliat.com/up_ar/ar/Save_alharbi001.jpg

هنا بهذه الصوره السابقه يتم ادخال اسم الملف وتحديد مكان الحفظ مع اختيار نوع الملف من اختيار الـ Format

وهنا انبه انه عند استخدام امر Save للحفظ يتم ظهور المربع الحوارى Save As فى المرة الاولى فقط ولايتكرر الظهور فى حالات الحفظ التاليه بعد اجراء التعديلات .

الامر Save As

يستخدم الامر File ثم Save As فى حفظ نسخة اضافيه من الملف لاستخدامات اخرى حيث تشاهد ظهور المربع الحوارى السابق ونشير فقط الى اختيار As a Copy الذى عند تنشيطة يتم حفظ النسخه فى الموضع المحدد معبقاء الملف الاصلى مفتوحا اما عند تنشيطه فيتم حفظ نسخه من الملف فىالموضع المحدد مع بقاء هذه النسخه مفتوحه واغلاق الملف الاصلى .

اما الامر Save As :

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


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

على امل الالتقاء بكم بالقريب العاجل فى الملحق الثالث تصميم واجهة interface الموقع

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

الى ان يحين ذلك الوقت استودعكم الله



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

استعمل مربع البحث في الاسفل لمزيد من المواضيع


سريع للبحث عن مواضيع في المنتدى