درس تصميم الفواصل

[نبض قلبي]

http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9elLogo.gif


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


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

لا حظوا معاي كيف تم التنويع في استخدام أدوات الفوتوشوب لتصميم هذه الفواصل ،،


http://www.jewelsuae.com/fwasel/fwasel1/jewelsfasel5.gif
تم تصميم هذا الفاصل باستخدام أداة الفرشاة والاستايل ،،

http://www.jewelsuae.com/2006/goldS.gif
http://www.jewelsuae.com/fwasel/fwasel1/jewelsfasel7.gif

أما هذا فاستخدمت في تصميمه أداة التحديد لرسم المستطيل ،، والاستايل لتلوينه ،، وأداة الممحاة لحفر الاشكال داخله ،،

http://www.jewelsuae.com/2006/goldS.gif
http://www.jewelsuae.com/fwasel/fwasel2/jewelsfasel33.gif

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

http://www.jewelsuae.com/2006/goldS.gif
هذا على سبيل المثال لا الحصر ،،

أما الفاصل اللي بنتعلم كيفية تصميمه يعتمد على:

* صور الورود وتعديلها عشان يتناسب مع حجم الفاصل
* ادوات التحديد
* الألوان والتحكم بخصائص الظل

الأمثلة
http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el01.gif

http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el02.gif

http://www.jewelsuae.com/fwasel/fwasel1/jewelsfasel1.gif

المثال المطبق في الدرس:

http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el21.gif

أدوات الدرس

http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el1.jpg

http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el2.jpg

http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el3.jpg

http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el4.jpg

http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el5.jpg

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

[نبض قلبي]

الخطوه الاولى:

تعديل صورة الوردة لتتناسب مع حجم الفاصل ،،

الصورة المستخدمة:
http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el4.jpg

في البداية لازم انخلص الوردة من الخلفية ،، طبعاً شي طرق مختلفة للتخلص من الخلفية ،، لكن في هاي الحالة بنستخدم أداة الممحاة السحرية Magic Eraser Tool ،، بنظري هاي اسهل طريقة ،،

وين انحصل هاي الأداة ؟؟

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

لاحظوا الصورة:
http://www.jewelsuae.com/psd/Basik/EraserMagic.gif

ولما تختارون أي أداة بيظهر لكم شريط خاص للتحكم بخصائصه ،، طبعاً بهدف تسهيل مهمتنا ولتوظيف الاداة لخدمة تصاميمنا ،،

ولممحاتنا السحرية بتلاحظون فوق في الشريط مكتوب Tolerance وحذاله رقم ،، حطوا رقم 100 لان هاي القيمة هي الافضل لإزالة الخلفية اللي نتعامل وياها في الصورة السابقة ،،

لاحظوا:
http://www.jewelsuae.com/psd/Basik/EraserMagicD.gif

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



عقب ما غيرنا القيمة ،، نكون جاهزين لاستخدام الاداة ،، نقرة وحدة بالماوس على يسار الخلفية ،، وبتعرفون ليش سموها بالممحاة السحرية !!

لاحظوا النتيجة اللي ظهرتلي:
http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el6.gif

حلينا مشكلة الخلفية والحمد لله ،، خلونا نحل مشكلة الحجم بإذن الله ،،



تصغير الصورة عملية سهلة جداً ،،
نروح لـ Image >> image size
http://www.jewelsuae.com/psd/AlQaemah/ISize.gif

لما نضغط على image size بيظهر لنا بوكس الحجم ،،

غيروا اول رقم بس ،، خلوه : 150،، والرقم اللي تحته بيتغير بشكل تلقائي ،، لان حجم العرض مرتبط بالطول عشان تغييرنا للحجم ما يأثر على شكل الصورة ،، وعقب اضغطوا Ok

لاحظوا الصورة:
http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el7.gif

والنتيجة:
http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el8.gif

وبجي نكون خلصنا من الخطوة الاولى ،، وصارت الوردة جاهزة لاستخدامها في تصميم الفاصل ،،

http://www.jewelsuae.com/2006/gold2L.gif

وقبل ما ننتقل للخطوة الثانية ،،

عندي احساس ان بعضكم ما اتقن الخطوة الاولى !!

ما فيها شي،، مشكلة عادية خاصة للي بعدهم مو متمكنين من الممحاة ،،

انصحكم بالتالي ،، تدربوا على استخدام الممحاة السحرية وغيروا في قيمة الـ Tolerance ،، واستخدموا الممحاة العادية لمسح الزوايد ،، وان شاء الله بتتقتونها بسرعة ،،

تفضلوا هاي الصور جاهزة ،، بس بعد يبالها شغلة بسيطة عشان تتحكمون في استخدامها ،،

http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el0.gif http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el00.gif http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el000.gif http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el0000.gif http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el00000.gif

خزنوا الصورة اللي تبونها ،، وافتحوها في الفوتوشوب ،، بتلاحظون ان اللير عليه علامة القفل ،، وسبب القفل ان الورود مخزنه بصيغ الـ gif ،، وها القفل ــ مو مثل اللي فوق ــ يعني يأثر على شغلنا ،، ولازم انشيله ،،

المهم اللي لازم اتسونه هو الآتي:

تروحون لـ :
Image >> Mode

بنلاحظ ان عند كلمة Indexed Color شي اشارة صح ،،

انغيره لـ: RGB color
باختصار: Image >> Mode >> RGB color

شوفوا الصور:
http://www.jewelsuae.com/psd/AlQaemah/Imode.gif

[نبض قلبي]

الخطوة الثانية:

انخلي الوردة على صوب،، ونفتح صفحة عمل جديدة،،

File >> New

http://www.jewelsuae.com/psd/AlQaemah/FileNewJ.gif

و اخترت 400 Pixels للعرض
و 200 Pixels للطول

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

واتأكدوا انكم اخترتوا Transparent ،، يعني خلفية شفافة ،،

شوفوا الصورة:
http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el9.gif

الحين وباستخدام أداة التحديد(شكل المربع) http://www.jewelsuae.com/psd/Basik/T7dedMorab3.gif (http://www.jewelsuae.com/psd/allDoroos/PsdBasik/t7Morb3.htm) الموجوده في قائمة الادوات على يسار الشاشة نرسم شكل مستطيل ،،


لاحظوا الصورة:
http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el10.gif

وممكن انكم تستخدمون أداة التحديد الدائرية ،، وترسمون قاعدة الفاصل بالدائرة ،، مثل هذا الفاصل http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el01.gif


ملاحظة: اللي موظاهر عنده ها الشكل http://www.jewelsuae.com/psd/Basik/T7dedMorab3.gif (http://www.jewelsuae.com/psd/allDoroos/PsdBasik/t7Morb3.htm) ،، وكان بداله شكل دائري او خط طولي او عرضي ،، نقرة على اليمين على الاداة ويختار شكل المربع ،، موجود في اول القائمة ،،
لاحظوا الصورة:
http://www.jewelsuae.com/psd/Basik/ta7deedMorb3.gif


الحين بنلون المساحة اللي حددناها ،،

بس في البداية لازم نختار الالوان ،،

للتسهيل الشرح اضغطوا على حرف D من لوحة المفاتيح وتتحول الالوان للأبيض والاسود ،،http://www.jewelsuae.com/psd/Basik/blakwhite.gif (http://www.jewelsuae.com/psd/allDoroos/PsdBasik/colors.htm) الحين انقروا على اللون الاسود عشان تطلعون قائمة الالوان ،، واختاروا اللون اللي يتناسب مع الوردة اللي اخترتوها ،،

وهني انا اخترت اللون الاحمر بهاي الدرجة: CC3333 #

شوفوا الصورة:

http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el11.gif


وبعد ما نتهيت من هاي العملية شكل الألوان صار مثل هذا http://www.jewelsuae.com/psd/Basik/red.gif (http://www.jewelsuae.com/psd/allDoroos/PsdBasik/colors.htm)


الحين باستخدام هاي الاداة http://www.jewelsuae.com/psd/Basik/tadaruj.gif (http://www.jewelsuae.com/psd/allDoroos/PsdBasik/tadruj.htm) من قائمة الادوات بنلون المنطقة المحددة ،، واللي مو ظاهر عنده ،، يسير على رمز السطل http://www.jewelsuae.com/psd/Basik/sa6l.gif (http://www.jewelsuae.com/psd/allDoroos/PsdBasik/sa6l.htm) ونقرة على اليمين بالماوس ،، وياخذ الاختيار الاول من القائمة اللي بتظهرله ،،

شوفوا الصورة:
http://www.jewelsuae.com/psd/Basik/Tadrj.gif

وعقب ما حددنا اداة التلوين المطلوبة http://www.jewelsuae.com/psd/Basik/tadaruj.gif (http://www.jewelsuae.com/psd/allDoroos/PsdBasik/tadruj.htm) نروح للمساحة المحددة بالخط المنقط ،،

اضغطوا بالماوس على يمين المستطيل واسحبوه وياكم لين ثلاثة ارباع المساحة وهدوه (ارفعوا ايدكم عن الماوس)

لاحظوا الصورة المتحركة:
http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el12.gif

في طريقة ثانية للتلوين ،، باستخدام الاستايل ،،
باستخدام رمز السطل http://www.jewelsuae.com/psd/Basik/sa6l.gif (http://www.jewelsuae.com/psd/allDoroos/PsdBasik/sa6l.htm) نلون المساحة المحددة ،، عقب نضغط على اي مربع يعجبنا من بوكس الاستايل،،


لاحظ: الهامش اللي في ها الفاصل تم تعبئته بالاستايل
http://www.jewelsuae.com/fwasel/fwasel1/jewelsfasel1.gif

وهذا بوكس الاستايل للي ما يعرفه
http://www.jewelsuae.com/psd/Basik/Styles.gif

ملاحظة مهمة: اللي يستخدم الاستايل ينتقل للخطوة الرابعة على طول ،، لانه ما بيحتاج للخطوة الثالثة

خلصنا من علامة التحديد (المستطيل المنقط) ،، شلوها ،،

كيف نتخلص من علامة التحديد؟؟
اضغطوا على Ctrl + D من لوحة المفاتيح وبتنشال على طول

ملاحظة .. للي حاب انه يحط اكثر من قاعدة مثل هذا
http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el02.gif
يظهر لير جديد ويكرر نفس العملية السابقه ،،

الخطوة الثالثة:

في هاي الخطوة بنضيف نوع من الواقعية على المستطيل الجامد ،، يعني شوية ظل عشان نعطيه تأثير البروز ،،

نروح لـ بوكس اليرات ،، اتشوفون اللير اللي نشتغل عليه ،، نقرة على اليمين وبتظهر لنا قائمة نختار منها Blending Options

شوفوا الصورة ،،
http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el13.gif

بيظهر لنا بوكس كبير ،، على يساره شي قائمة بالخصائص المؤثرة ،، ما بنحتاج منها غير الاول والثاني ،،

أما الخاصية الاولى ،، فهي اسقاط الظل Drop Shadow ، نكتفي بان انحط علامة صح في البوكس الصغير ــ يعني مجر كلك في المربع الصغير http://www.jewelsuae.com/psd/Basik/DropShadow.gif ،،

والخاصية الثانية تحتها على طول ،، واسمها Inner Shadow يعني اضافة ظل داخلي على الشكل،، هذي الخاصية لازم نضغط على الكلمة نفسها عشان بنغير فيها شوي ،، لاحظوا مكان الماوس من الكلمة: http://www.jewelsuae.com/psd/Basik/InnerShadow.gif

طبعاً محتويات البوكس بتتغير بالكامل ــ ما عدا القائمة اللي على اليسار ــ

ضمن الاشياء اللي بتظهر لنا مربع صغير باللون الاسود ،، احنا نبغي انغير اللون الاسود للون يتناسب مع لون الشكل والورد المستخدم ،،

عشان جي بنضغط على المربع الاسود بالماوس ،،

لاحظوا:
http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el15.gif

بتظهر لنا قائمة الالوان ،، وانا اخترت هاي الدرجة: 660000 # ،، (المفروض انكم تختارون اللون المناسب عقب تضغطون على OK

لاحظوا الصورة:
http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el16.gif

بعد ما تختارون اللون ،، خلوا باقي الخصائص مثل ما هي ،،

ممكن انكم تجربون باقي الخصائص اللي في ها البوكس ،، بتحصلون على تأثيرات حلوة للي حاب ينوع ،، مثل ها الفاصل
http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el02.gif
لاحظوا تأثير الحفر اللي على قاعدة الفاصل ،، استخدمت Texture من بوكس الخصائص ،،



وعقب ما انتهينا من الخاصية الثانية ،، نضغط Ok

لاحظوا التغيير الحاصل على المستطيل:
http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el17.gif

نتيجة ناعمه،، صح؟

ننتقل للخطوة الرابعة والاخيرة ،،

[نبض قلبي]

الخطوة الرابعة والأخيرة:

الكوشه جاهزة ،، خلونا اندخل العروس ،، خخخخخخخخخخ

روح لصورة الوردة اللي خليناها على صوب ،، وباستخدام علامة المؤشر الموجوده في اعلى يمين قائمة الادوات http://www.jewelsuae.com/psd/Basik/moAsherjewels.gif نسحب الوردة من مكانها ونفرها في صفحة العمل الجديدة اللي اشتغلنا عليها ،، مكان ما رتبنا المستطيل ،،

لاحظوا الوضعية:
http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el18.gif

بعد ما نقلنا الوردة للمستطيل ،، بنفس الأداة ـ المؤشر http://www.jewelsuae.com/psd/Basik/moAsherjewels.gif ـ نرتبها في مكان مناسب ،، عشان نعطي منظر حلو للفاصل ،، وهني انا اخترت يسار المستطيل كمكان للوردة ،،

شوفوا الصورة:
http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el19.gif

ممكن تسحبون الوردة أكثر من مرة لوضعها في اكثر من مكان على الفاصل ،، مثل هذا
http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el01.gif

اللي حاب يضيف تأثيرات الـ Blending Options على الوردة ،، بيكون شي حلو ،، وهو في النهاية يعتمد على اسلوبكم في التنسيق ،،

لو تلاحظون الفاصل ضايع في صفحة العمل ،، صح؟!!

باستخدام أداة القطع http://www.jewelsuae.com/psd/Basik/crop2.gif الموجودة في قائمة الادوات ،، نحدد حواف الصورة ــ خذوا مساحات بسيطة من الحواف ــ ونضغط على Enter من لوحة المفاتيح ــ ،،

لاحظوا الصورة:
http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el20.gif

http://www.jewelsuae.com/2006/gold2L.gif

خطوة اخيرة ومهمة ،،

الفاصل لازم يتخزن بصيغة gif لا غير ،، لاننا لو خزناه بصيغة ثانية ،، بيتخزن الفاصل على شكل مربع ،، يعني خلفية الفاصل بتكون بيضه مو شفافه ،، وحنا نبغي الخلفية تكون شفافة ،،

عند التخزين ،، نروح للقائمة:
File >> Save as

http://www.jewelsuae.com/psd/Basik/FileSave.gif

عقب نكتب اسم الفاصل عادي ،، بتلاحظون ان تحت شريط الاسم شي شريط ثاني مكتوب على يساره Format وعلى يمينه شي سهم صغير اضغطوا على السهم عشان تظهر لكم قائمة الصيغ ،، اختاروا منها صيغة GIF عقب اضغطوا Save

لاحظوا الصوره:
http://www.jewelsuae.com/psd/AlQaemah/fileSave.gif

الحين شوفو النتيجة النهائية:

http://www.jewelsuae.com/psd/allDoroos/Doroos/dFa9el/dFa9el21.gif

[("غنج نجد")]

درس جميل ياغاليه
حفظك المولى
وواضح للكل
بارك الله فيك ..ونقل موفق
‘

[نبض قلبي]

تسلمين عزيزتي ..

نورتي بهالطله ..

[الشموخيه]

http://www6.0zz0.com/2008/03/09/18/376140250.gif
مشكوورة إختي على الموضووع ..

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

[ازقرتيه]

شكرن لكــ =)

[**قمرهم كلهم**]

درس حلو وبسيط..شكرا على الشرح..

[نبض قلبي]

http://www6.0zz0.com/2008/03/09/18/376140250.gif
مشكوورة إختي على الموضووع ..

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

العفو حبيبتي...gleby

تطبيق جوناااااان ..:clapping:

[شموخ قلم]

ماشاء الله تبارك الرحمن..

بوركتي بابداعك المعهود..

جميل جدا!!!!

واصلي ولا تقطعين

استمري





دمتي بخير:thumb_yello:

[نبض قلبي]

شكرن لكــ =)

عفوا حبيبتي :love0073:

[نبض قلبي]

ماشاء الله تبارك الرحمن..



بوركتي بابداعك المعهود..






جميل جدا!!!!


واصلي ولا تقطعين

استمري





دمتي بخير:thumb_yello:










العفو حياتي على مرورك



ولله يعطيك العافيه :kez_09:

[ريحانة البحرين]

االف الف شكر لك لنقل هذا لدرس الرائع لي عودة بالتطبيق باذن الله

تحياتي

[أحلى بنوته]

مشكوره حبيبتي عالدرس بصراحهـ مرره حلو وأكيد راح نستفيد منه :_::0403:

[أحلى نوسه]

يسلمو عالدرس ياحلووه

[الدرر]

مشكورة عالدرس

[Nadin the coolest girl 4]

وَ عَـــلَيكُنَ السَلامُ و الرحـــمَةُ
نبوضة
شرح رائـــع
باركـَ اللهُ فيكـِ

تم تطبيق الدرس ^^؛ :
http://www3.0zz0.com/2008/05/16/10/232949758.gif

بس عـــنـــجــد كتير صــــعـــــب
و الالوان ما لـــحـــقت اساويها متطابقة ^^؛

تسلم إيديكـِ نبوضة
لا ننـــحــرم
دُمتـِ لمنـ تـــحـــبين ^.^

[MimI ChaN]

يسلموو عالنقل الراااائع

[جوجو1]

ثاآآنكس حبوبة على الموضوع النايـــٍـس ^^

[الماسه الزرقاء]

ما شاء الله
ابداع بمعنى الكلمة
تسلم يديج خيتو
ع المجهود الرااااااااااااااااااااااااائع

[نبض قلبي]

يسلمووووووووو ع التواجد

نوترتوا

[الساحره المصريه]

شكرا على الدرس الجميل

ده التطبيق بتاعي

http://img229.imageshack.us/img229/8746/radwauo8.gif

[**كارولين**]

الدرس رااائع طويل شوى بس عجبنى و انتظروا تطبيقى قريبا

[Alaиoud]

هلا ‘‘

درس رآئـــع وسهـل !!
قلدت صورتك اللي صممتي عليها ^ـ*

تطبيقي :
http://www.nshj.com/up-pic/uploads/fdae19546d.gif

[●ŏŖàŅĝĕ ~]

السلآم عليكم ،

موضوع ـٍك رآئع ووآضحٌ تعبك َ

ولن آخرج دون تطبيقٍ مني

http://www.9o9i.com/download/49224986f9353a5a3.gif