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

مشاهدة النسخة كاملة : [فوتوشوب] درس الكتابة المضيئة


عبد الهادي اطويل
07-10-2007, 20:32
إن برنامج Adobe Photoshop برنامج تجاري وليس مجانيا، ويمكن الحصول عليه أو تحميل نسخة تجريبية منه من خلال موقعه عبر الرابط التالي:
برنامج Adobe Photoshop
:home: (http://www.adobe.com/products/photoshop/family/)
:062:
يمكنك ايجاد بدائل مجانية لهذا البرنامج من خلال تصفح القسم التالي:
قسم برامج التصميم
:icf-(43): (http://www.alamalnet.com/vb/forumdisplay.php?f=94)

أهلا بكم أحبائي رواد منتديات الأمل العزيزة..
أرحب بكم في هذا الموضوع الذي أنشر فيه أول درس لي في برنامج الفوتوشوب، وكلي أمل في أن أوفق في مجال شروحات الفوتوشوب حتى أنقل ما عندي من معارف لكل محب للأمل ووافد على دنيانا التي تسعد بقدومكم..
قبل أن أبدأ في تقديم خطوات الدرس، أحب أن أدعو كل محب للتصميم منكم بأن يقوم بتطبيق لما جاء في الدرس ويضع عمله في رد لأرى تفاعلكم أحبائي ومدى استعابكم للدرس، وهو أمر فيه نفعكم، كما أنه يشجعني على العطاء أكثر أحبائي.
http://img101.imageshack.us/img101/9140/fassilxy9.gif
http://img387.imageshack.us/img387/3538/2etoilesmultioria3.gifعنوان الدرسhttp://img387.imageshack.us/img387/3538/2etoilesmultioria3.gif
الكتابة المضيئة
http://img387.imageshack.us/img387/3538/2etoilesmultioria3.gifأمثلةhttp://img387.imageshack.us/img387/3538/2etoilesmultioria3.gif
http://img341.imageshack.us/img341/5544/alamalnetarabiclazerwu8.jpg
http://img101.imageshack.us/img101/8780/062sm7.gif
http://img341.imageshack.us/img341/760/alamalnetlazerxf2.jpg
http://img101.imageshack.us/img101/8780/062sm7.gif
http://img387.imageshack.us/img387/3538/2etoilesmultioria3.gifأدوات الدرسhttp://img387.imageshack.us/img387/3538/2etoilesmultioria3.gif
- البرنامج الذي استعملته هو الفوتوشوب السابع، وطبعا يمكن تطبيق الدرس أيضا باستعمال أية نسخة من برنامج الفوتوشوب:
http://img72.imageshack.us/img72/9114/photoshopallzh1.jpg
http://img101.imageshack.us/img101/9140/fassilxy9.gif
والآن على بركة الله نبدأ الدرس:
نشغل برنامج الفوتوشوب ونقوم بإرجاع لوني الخلفية والواجهة لأصلهما الأبيض والأسود وذلك بالنقر على الزر التالي http://img526.imageshack.us/img526/1601/32373068ta7.png كما توضح ذلك الصورة التالية:
http://img526.imageshack.us/img526/3596/69513179jn4.gif
http://img72.imageshack.us/img72/1456/informationao5.gifإشارة: يمكن القيام بنفس العملية عن طريق الضغط على حرف D من لوحة المفاتيح.
فتصبح الألوان كما يلي:
http://img526.imageshack.us/img526/3981/21496527qw0.gif
http://img72.imageshack.us/img72/1456/informationao5.gifإشارة: لمن لا يعرف تلك الألوان، فإن اللون الأعلى (الأسود) يمثل لون الواجهة (Foreground Color)، بينما اللون السفلي (الأبيض) يمثل لون الخلفية (Background Color).
الآن علينا أن نجعل لون الخلفية أسودا لأننا سنحتاج ذلك في الدرس، لذا نقوم بعكس الألوان عن طريق النقر على الزر التالي http://img526.imageshack.us/img526/2388/86931930ym4.png كما توضح ذلك الصورة التالية:
http://img72.imageshack.us/img72/8612/93322744ao6.gif
http://img72.imageshack.us/img72/1456/informationao5.gifإشارة: يمكن القيام بنفس العملية عن طريق الضغط على حرف X من لوحة المفاتيح.
فتصبح الألوان كما يلي:
http://img526.imageshack.us/img526/9740/xcolorup4.png
نبدأ الآن عملا جديدا عن طريق القائمة File ثم نختار New:
http://img526.imageshack.us/img526/5878/32754833pf9.gif
http://img72.imageshack.us/img72/1456/informationao5.gifإشارة: يمكن فتح نافذة عمل جديد عن طريق الضغط على الاختصار Ctrl+N من لوحة المفاتيح.
فتظهر نافذة تمكننا من تحديد اسم للعمل وأيضا أبعاده، وأنا اخترت 400 في العرض و 200 في الارتفاع (الوحدة هي البيكسل Pixels)، أما في نوع الخلفية فلقد اخترت Background Color، أي أنني جعلت لون الخلفية (Background بالإنجليزية) هو نفسه لون مساحة العمل، وعليه سيكون لونها أسود كما حددنا في الخطوة السابقة.
هذه صورة توضح الاعدادات التي اعتمدتها:
http://img526.imageshack.us/img526/935/newyo7.gif
ننقر على OK لتأكيد خياراتنا، فتظهر مساحة العمل كما يلي:
http://img526.imageshack.us/img526/712/spaceworkqv6.png
ننقر بزر الفأرة الأيمن على أداة الكتابة http://img526.imageshack.us/img526/8684/80474528rn3.png ثم نختار من القائمة المنسدلة الأداة Horizontal Type Mask Tool كما في الصورة التالية:
http://img526.imageshack.us/img526/180/37023990zu7.gif
ثم نذهب إلى مساحة العمل وننقر ثم نكتب النص الذي نريد، وأنا كتبت في مثالي اسم موقعنا وهو alamalnet، وبعد تظليل النص جعلت له الخيارات التالية:
نوع الخط: Monotype Corsiva
حجم الخط: 100pt (علينا كتباتها في حيز حجم النص)
المحاذاة: الوسط
وهذه صورة موضحة لكل ذلك:
http://img526.imageshack.us/img526/3426/13684246ee1.png
http://img72.imageshack.us/img72/1456/informationao5.gifإشارة: يمكنكم تحريك النص بجعل سهم الفأرة بالقرب منه، وعندما يتحول شكله إلى هذا الشكل http://img526.imageshack.us/img526/9465/34589889yw9.gif ننقر دون إفلات ونحرك الفأرة فيتحرك النص فنجعله في المكان الذي نريد، وهذه العملية لا تستوجب تظليل النص، بل يمكنك تحريك النص سواء كان مظللا أم لا.
للتخلص من تظليل النص، نقوم بالنقر على أي أداة أخرى من صندوق الأدوات مثل الأداة http://img526.imageshack.us/img526/9465/34589889yw9.gif، فيصبح النص كما يلي:
http://img526.imageshack.us/img526/1732/11nw8.png
الآن سوف نلون النص باللون الذي سيجعله يبدو وهاجا، وأنا أختار اللون الأزرق. لذلك نتبع المراحل التالية:
أولا علينا أن نجعل لون الواجهة أزرقا عن طريق النقر على أيقونتها كما في الصورة:
http://img514.imageshack.us/img514/2248/12gw3.gif
فتظهر نافذة اختيار اللون، فنتبع ما هو موضح في الصورة التالية:
http://img526.imageshack.us/img526/6250/13ny4.png
من المفروض بعد هذه العملية أن يطرأ على الألوان التغيير التالي:
http://img526.imageshack.us/img526/8176/bluesl5.png
نذهب الآن إلى قائمة Edit ثم Fill:
http://img526.imageshack.us/img526/9003/31396302rm9.gif
ثم نختار كما في الصورة:
http://img526.imageshack.us/img526/4093/8wmop7.gif
بعد النقر على زر OK يفترض أن يصبح حيز العمل لديكم كما يلي:
http://img526.imageshack.us/img526/8738/14yp4.png
الآن سنقوم بعكس تحديد النص، لذلك نذهب إلى قائمة Select ثم نختار Inverse:
http://img526.imageshack.us/img526/1011/15pf5.gif
http://img72.imageshack.us/img72/1456/informationao5.gifإشارة: يمكن القيام بعملية العكس هذه عن طريق الضغط على الأزرار Shift+Ctrl+I من لوحة المفاتيح.
فتصبح مساحة العمل كما يلي:
http://img526.imageshack.us/img526/3686/16xp4.png
والآن جاء دور الفلتر، إذن تابعوا الشرح بانتباه فنحن في أهم مرحلة الآن..
نذهب إلى قائمة Filter ومنها إلى Blur ثم نختار Gaussian Blur:
http://img526.imageshack.us/img526/4471/17fk5.gif
ومن نافذة إعدادات الفلتر نقوم باختيار التوهج المناسب من خلال تغيير قيمة Radius، وفي حالتنا هذه فإنني توقفت عند القيمة 8.4 كما في الصورة:
http://img526.imageshack.us/img526/1631/18eo2.png
http://img72.imageshack.us/img72/1456/informationao5.gifإشارة: القيمة المعطاة ليست قانونا، بل هي تختلف باختلاف حجم النص، وتبقى نظرتكم الفنية أكبر حاسم في هذا الأمر، وعموما نختار القيمة التي يكون عندها التوهج خفيفا حول حواف النص كما في مثالنا.
نكرر تطبيق الفلتر نفسه 4 أو 5 مرات إلى أن نصل إلى نتيجة مرضية وذلك عن طريق القائمة Filter ثم Gaussian Blur كما في الصورة:
http://img526.imageshack.us/img526/5762/19hn3.gif
http://img72.imageshack.us/img72/1456/informationao5.gifإشارة: في الفوتوشوب، يمكن إعادة تطبيق الفلتر نفسه وبالإعدادات نفسها المختارة آخر مرة عن طريق الضغط على الأزرار Ctrl+F من لوحة المفاتيح كما هو موضح في الصورة السابقة.
أنا توصلت لحد الآن إلى النتيجة التالية:
http://img526.imageshack.us/img526/2266/19xb1.png
الآن نقوم مجددا بعكس تحديد النص كما فعلنا سابقا عن طريق القائمة Select ثم Inverse (أو بالضغط على الاختصار Shift+Ctrl+I من لوحة المفاتيح):
http://img526.imageshack.us/img526/8754/15zm9.gif
فيصبح عملنا كما يلي:
http://img526.imageshack.us/img526/8187/192hz8.png
ثم نقوم بتلوين النص باللون الأبيض، لذلك نرجع لوني الخلفية والواجهة إلى الحالة الافتراضية بالضغط على حرف D، ومن تم نعكسهما بالضغط على حرف X من لوحة المفاتيح، فيصبح شكلهما كما يلي:
http://img526.imageshack.us/img526/6835/xcolorao2.png
علينا أن نملأ الآن تحديد النص باللون الأبيض، لذلك نذهب إلى قائمة Edit ثم Fill:
http://img526.imageshack.us/img526/9003/31396302rm9.gif
ثم نختار كما في الصورة:
http://img526.imageshack.us/img526/4093/8wmop7.gif
بعد النقر على زر OK يفترض أن يصبح حيز العمل لديكم كما يلي:
http://img526.imageshack.us/img526/9598/22rk3.png
نطبق من جديد الفلتر السابق، فنذهب إلى قائمة Filter ومنها إلى Blur ثم نختار Gaussian Blur:
http://img526.imageshack.us/img526/4471/17fk5.gif
ومن نافذة إعدادات الفلتر نقوم باختيار التوهج المناسب من خلال تغيير قيمة Radius إلى الحد الذي نكون فيه مرتاحين إلى النتيجة فيبدو لنا التوهج طبيعيا، وأنا توقفت عند القيمة 2.1 كما توضح ذلك الصورة التالية:
http://img526.imageshack.us/img526/9598/22rk3.png
يفترض الآن أن تكون عندكم مساحة العمل كما يلي:
http://img526.imageshack.us/img526/7007/23tc0.png
وأخيرا لم يبق إلا أن نلغي التحديد عن طريق القائمة Select ثم نختار Deselect:
http://img526.imageshack.us/img526/406/24am0.gif
http://img72.imageshack.us/img72/1456/informationao5.gifإشارة: يمكن إلغاء التحديد أيضا عن طريق الضغط على Ctrl+D من لوحة المفاتيح.
فتكون النتيجة كما يلي:
http://img526.imageshack.us/img526/4417/25yp5.png
ما رأيكم بالنتيجة؟ آمل أن تروقكم..
والآن علينا أن نصدر عملنا على شكل صورة، وهذه هي الطريقة الصحيحة لمن لا يعرفها، وهي تمكننا من تصدير تصميمنا بدقة جيدة وحجم مقبول يمكن نشره عن طريقها عبر الأنترنت:
لذلك نذهب إلى قائمة File ثم نختار Save for Web:
http://img526.imageshack.us/img526/2123/26nx1.gif
http://img72.imageshack.us/img72/1456/informationao5.gifإشارة: يمكن القيام بهذا الأمر بالضغط على الأزرار Alt+Shift+Ctrl+S من لوحة المفاتيح.
فتفتح النافذة التي نختار منها امتداد الصورة ودقتها، أنا اخترت الامتداد JPEG وجعلت للصورة أعلى دقة كما توضح ذلك الصورة التالية:
http://img526.imageshack.us/img526/8421/27by4.gif
http://img72.imageshack.us/img72/1456/informationao5.gifإشارة: يمكنكم تحديد الامتداد والدقة التي تريدون وذلك بالاختيار من المربعين المؤطرين بالأزرق في الصورة السابقة، أي من هذا الموضع:
http://img72.imageshack.us/img72/7476/28dt3.gif
بعد ذلك نكتب الاسم الذي نريد لعملنا، ثم ننقر على زر حفظ لنحفظ تصميمنا. هذه صورة موضحة لذلك:
http://img72.imageshack.us/img72/6521/29aa1.gif
وهذه هي نتيجة الدرس:
http://img72.imageshack.us/img72/2817/alamalnetiq0.png
http://img101.imageshack.us/img101/8780/062sm7.gif
إلى هنا أكون قد انتهيت من أول درس لي في عالم الفوتوشوب، وفي الحقيقة هو أول درس أقوم بنشره في مجال التصميم، لذلك آمل أن تجدوه في المتناول، كما أرجو ألا تبخلوا علي بملاحظاتكم البناءة، وأنا طبعا رهن إشارتكم إذا احتجتم أي توضيح..
أنتظر ردودكم وتطبيقاتكم أيها الأحبة..
مني لكم أرق تحية..

catherine
07-10-2007, 21:18
رائع أستاذ، بل قمة في الروعة
درس في أعلى مستوى و شرح في القمة

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

عبد الهادي اطويل
07-10-2007, 22:33
يا صاحبة الردود الذهبية..
الغالية كاثرين..
ردك جعلني أسعد وأتشجع لبذل المزيد..
أتمنى أن أرى تألقك قريبا في دنيا التصميم الرائع..
كما أتمنى أن يكون كل أمل..
بوركت أختي الغالية..
مني لك أرق تحية..

عبد الحفيظ اطويل
08-10-2007, 10:16
دائما تتحفنا بما هو اجمل و تبهرنا باختياراتك الرائعة اخي العزيز هادي
درس في قمة الروعة يغري بالمتابعة و التعلم
مجهود رائع منك اخي و شرح دقيق و مفصل جزاك الله عنا كل الخير
دائما تتحفنا بما هو اجمل و مميز
تم تثبيت الموضوع نشرا للفائدة و لتميزه
تحياتي

عبد الهادي اطويل
09-10-2007, 17:01
دائما تتحفنا بما هو اجمل و تبهرنا باختياراتك الرائعة اخي العزيز هادي
درس في قمة الروعة يغري بالمتابعة و التعلم
مجهود رائع منك اخي و شرح دقيق و مفصل جزاك الله عنا كل الخير
دائما تتحفنا بما هو اجمل و مميز
تم تثبيت الموضوع نشرا للفائدة و لتميزه
تحياتي
سرني تواجدك الدائم والمميز أخي الحبيب حفيظ بصفحاتي..
آمل أن ينفعك الدرس، كما أرجو أن أرى تطبيقات الإخوة قريبا إن شاء الله..
مني لك أرق تحية يا غالي..

سيف الأمل
09-10-2007, 20:13
بارك الله لنا فيك أخي هادي
درس ممتاز و شرح أيضا ممتاز
ألف شكر لك
تحياتي لمجهودك الجبار

عبد الهادي اطويل
09-10-2007, 20:53
أهلا بك أخي العزيز سيف الأمل في صفحتي المتواضعة هذه..
سرني تواجدك أخي وكلامك، آمل أن يفيذ هذا الدرس كل أمل، وأنا أنتظر التطبيقات بشوق كبير..
مني لك أرق تحية..

يوسف أيت قدور
14-10-2007, 17:09
السلام عليكم ورحمة الله تعالى وبركاته :
اولا عيد مبارك سعيد للكل أعضاء وزوار منتديات الامل ولك المسلمين قاطبة..نتفضل نحن reda_h2r وتلميذ الأمل بتطبيق اول درس في [فوتوشوب] ونتمنى من العلي القدير ان نكون وفقنا في هدا التطبيق الاول من الدرس الاول ..ولايسعنا سوى انتظار ملاحظتكم ..

http://img130.imageshack.us/img130/7864/alamalnet2uj1.gif

http://img135.imageshack.us/img135/4700/redah2rye9.gif

وتقبوا منا خالص التحايا ..والقادم أجمل ..

عبد الهادي اطويل
14-10-2007, 19:49
رائع أخواي تلميذ الأمل ورضا، فعلا تطبيق ممتاز والجميل أنكما فهمتما تقنية الدرس واستوعبتماها فأبدعتما في التطبيق وهذا شيء مفرح..
نأمل أن يحدو باقي الأعضاء حدوكما ويطبقان الدرس، وبالتوفيق في مسيرتكما في مجال التصميم التي ستكون مشرقة غن شاء الله..
مني لكما أرق تحية..

الغازي مروان
15-11-2007, 19:14
شكرا اخي والمزيد من الدروس ان شاء الله

عبد الهادي اطويل
15-11-2007, 20:06
بارك الله فيك أحي الغازي وشكرا على مرورك..
آمل أن تستفيذ من الدرس..
مني لك أرق تحية..

طير السلام
12-02-2008, 11:32
مشكوووووووور أخي على الدروس القيمة :more15: :more19: :14:

عبد الهادي اطويل
26-02-2008, 12:42
سرني مرورك أخي الكريم طير السلام، وآمل بحق أن تكون قد استفذت من هذا الدرس..
مني لك أرق تحية..