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

مشاهدة النسخة كاملة : - طــريقة عمل اليـوزر بارز خطـوة بخطوة -


Rumi Chan
24-09-2007, 12:44 PM
السلام عليكم ورحمة الله وبركاته



اليوم حبيت اقدملكم درس عن كيفية عمل اليوزر بار وهي الطريقة سهلة جدا ومافيها اي تعقيد:cool_1:

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


هذا الدرس بأذن الله رتبته بطريقة شرح دقيق للمبتدئين ومبسط ايضا للمحترفين

يعني رح يكون سهل تطبيقه للجميع انشاءالله

الكل لازم يمشي معاي بلا اي اعذار:SnipeR (59):




هذي الايام اليوزر بارز او Userbars اشتهرت جدا وتلاقوها في مواقع كثير وخاصة مواقع الانيمي

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




وطبعا قبل لا أبدا الدرس للي مو عارفين ايش يعني يوزربار هذا رابط لموضوع الاخت جنى ,بعمل طلبات اليوزربارز للأعضاء ماشاءالله ماقصرت
اذا تبوا تتطلعوا على بعضها او تاخذوا فكرة عن اليوزربارز
http://www.an-dr.com/vb/showthread.php?t=1767



وأيضا انصح بزيارة موضوع الاخت SAKURAHIME لمعرفة ادوات الفوتوشوب وايش هي خصائصها قبل لانبدأ ,وهنا رابط الموضوع
http://www.an-dr.com/vb/showthread.php?t=1691



والحين قبل مانبدأ اول خطوة عندكم اختيارين وهم:

(اذا كنت حابب تسوي اليوزربار على صورة جاهزة -أو- اذا كنت تبي تصنع خلفية اليوزربار بنفسك)



اذا كنت مع الخيار الأول يسير طلع الصورة اللي تبغى تشتغل عليها من الملف بشرط ان يزيد عرضها عن 350 بيكسل

كهذه مثلا

http://www.an-dr.org/upload/uploads/eaa790a361.jpg



قصها واضبطها ثم احفظها بهذا الحجم :عرض 350\ ارتفاع19 بيكسل
وحيكون الشكل عندك هكذا

http://www.an-dr.org/upload/uploads/c8033c13b0.jpg




ويسير الحين صورتك جاهزة للعمل عليها

---------------------------------------------------


اما اذا كنت بتختار الخيار الثاني وهي انك تصنع الخلفية بنفسك ,فركز معاي هنا


اول خطوة تقوم بها وهي:

افتح قائمة ملف ثم افتح عمل جديد ,راح تظهرلك الشاشة كذا

http://www.an-dr.org/upload/uploads/f1a8f1b135.gif


وأضبط الخيارات عندك كما ضبطتها انا في الشاشة فوق
قياس الصورة: عرض 350 \ ارتفاع 19
ثم قم بوضع الخلفية على Transparent أو (شفافة)



الخطوة الثانية ,بعد ماتفتح عندك الصورة روح واختار اداة Gradient tool وبالعربي اعتقد اسمها اداة التدرج ,ثم اختر اللون اللي تبغاه

انا بالنسبة لي اخترت اللون الأورنج متدرج الى اللون الابيض

وفي النهاية تأكد انها بتطلع معاك كذا

http://www.an-dr.org/upload/uploads/e22a9cf859.jpg




الخطوة الثالثة والاخيرة قبل لاتجهز الصورة الآن عليك فقط انك تلصق الرمز او الصورة اللي تبغاها على خلفيتك

طبعا هذا الامر مايحتاجله شرح عند البعض اللي عارف كيف يسوي نسخ ولصق يعني الصورة بتكون عنده جاهزة يسير ارجوا انه ينزل تحت ويقابلني عند النجمات الحمراء (*) يعني لازم يوقف اذا شاف نجوم حمراء ولا بيضيع:angry1:




أما اللي يبي يعرف الطريقة ينطق هنا ويتابع معاي شرحها (نياهاهاها):devilidea_1:


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



المهم طريقة النسخ واللصق ببرنامج الفوتوشوب سهلة جدا

الخطوة الاولى: طلع الصورة اللي تبغى تلصقها على عملك او على اليوزر بار من الملف
(والأفضل ان خلفية الصورة تكون بلون واحد حتى ماتتعب في المسح) كما هو ظاهر عندك هنا في المثال

[http://www.an-dr.org/upload/uploads/85ac45f42e.jpg


(ملاحظة: تأكد من ان الصورة حجمها مناسب لليوزر بار وانها مو كبيرة جدا)

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

ثم ارجع افتح الصورة المصغرة



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


(ملاحظة: اذا كانت قائمة اللايرات او الشفائف غير ظاهرة عندك فبأمكانك اظهارها كالتالي ,****** <<Layers
أو
نافذة <<شفائف
ورح تفتح معاك القائمة)



بعد الانتهاء من هذه الخطوة ,اذهب لأداة الـMagic tool أو العصا السحرية
واضغط على خلفية الصورة ,حتلاقي الخلفية حقت الصورة صار عليها تحديد ومن هنا اضغط على مفتاح ديليت Delete من الكيبورد
سترى ان اللون اتمسح والخلفية صارت شفافة كما هو موضح هنا

[http://www.an-dr.org/upload/uploads/1746393c70.jpg



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

]http://www.an-dr.org/upload/uploads/7d9a4af7c9.jpg




بعد الانتهاء اضغط مفتاح Ctrl + A ,وراح تلقى الصورة اتحددت ,اذهب الى القائمة فوق واختار تحرير Edit ثم نسخ



وبعد كذا



******* ارجع لليوزر بار اللي قمت بعمله من قبل وسوي لصق لصورتك اللي مجهزها ,وراح تلقى الصورة اتلصقت وعاد امسكها بأداة التحريك أوMove tool وحطها في المكان اللي تبي في الصورة



تــاداااااااااا


رح تطلعلك بهذا الشكل

http://www.an-dr.org/upload/uploads/dd2fd487b8.jpg


وصورتك الحين جاهزة انك تبدأ العمل عليها


تــــابع الدرس

Rumi Chan
24-09-2007, 01:08 PM
*تأخذ نفس عميييق*



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


فهانحن احبائي رح نبدأ الدرس (طريقة عمل اليوزربار)


>>انتي لسة مابدأتيhmmm


يالله خليكم معايا وركزووووا الحين جينا على المهم



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



2- قم بفتح عمل جديد واختر مقاس 6×6 واجعل الخلفية شفافة Transparent



3- راح تلاقيه فتحلك مربع صغيروووون اكيد بتقول ايش بسوي فيه هذا هههه ,روح وكبره بأداة التكبير حتى يطلع عندك بهذا الشكل

]http://www.an-dr.org/upload/uploads/e88a80dd22.jpg



4- بأستعمال اداة قلم الرصاص قم بوضع مربعات من الاسفل الى الاعلى بهذا الترتيب كما هو موضح عندك

]http://www.an-dr.org/upload/uploads/e789c662dd.gif



5- اذهب الى القائمة واختر Edit >>define pattern , أي تحرير <<ثم اضافة حشو (أو شيء من هذا القبيل) اعذروني لأن برنامج الفوتوشوب غير معرب لدي ,سوف يظهر لك مربع صغير قم بكتابة اي شيء فيه.



6- عند الانتهاء من الخطوة السابقة الآن ارجع الى اليوزربار الذي كنت تعمل عليه سابقا.



7- اختر اداة pattern stamp tool أو اداة طبع النمط او الانماط ,ثم اذهب الى الصورة وقم بأستعمالها على حسب الكثافة اللتي تريدها انا اخترت كثافة 30% وراح يظهر معاك الشكل التالي

http://www.an-dr.org/upload/uploads/cba9547486.jpg


http://www.an-dr.org/upload/uploads/8e468a753f.jpg




8- الآن وبالتأكيد لن ننسى الكتابة على الصورة ,اذهب واستعمل اداة الكتابة ,من الافضل ان يكون حجم الخط ليس كبير جدا حيث اني استعمل دائما مابين 12 الى 14 بت
(معظم الناس يستعملون خط يدعى Visitor-BRK ) وهذا ماسأقوم بأستعماله الان ,ولكن لكل منكم الخط الذي يرغب به ولكم ايضا الاختيار اذا اردتوا وضع حد للخط
على كل في هذه الخطوة اختاروا مايحلوا لكم
والنتيجة ستكون بهذا الشكل

http://www.an-dr.org/upload/uploads/311bf2a289.jpg


http://www.an-dr.org/upload/uploads/4a9ef6acfd.jpg




9- والآن سنقوم بعمل لمعة بسيطة وجميلة لأضافة شكل خاص وجذاب ,اعتبرها من الخطوات المهمة

اذهب الى الأداة البيضوية او ellipse tool وضع الكثافة الى 30% عشان ماتتلون معاك كل الرسمة ,وظلل فوق اليوزربار الخاص بك وسوف تظهرلك اللمعة بهذا الشكل

http://www.an-dr.org/upload/uploads/c31f654a99.jpg


http://www.an-dr.org/upload/uploads/29ca6ccf7f.jpg



10- وأخيرا نقوم بوضع حد للصورة كاملة بهذه الطريقة ,نضغط على الصورة كليك يمين راح تظهر خيارات قم بأختيار تحديد Stroke ,راح يظهر لك مربع واجعل الخط 1 بيكسل ,وكثافة اللون 20 الى 30% ثم اضغط موافق.



ياااااااااااه واخيرا انهينا الدرس *تثاؤب*


سيكون الشكل الاخير هكذا

http://www.an-dr.org/upload/uploads/cdf8ad3415.jpg


http://www.an-dr.org/upload/uploads/e71d6cb4a0.jpg



انشالله تكونوا استفدتوا


هاالدرس اشتغلت عليه فتره لابأس بها من الزمن ,وأضمن لكم انه انا اللي قمت بكتابته وعملت على تنسيقه يعني لم يتم نقله من اي مكان اخر


ويالله وروني تطبيقاتكم ,ابغى احس انكم استمتعتم


واذا في أي سؤال \استفسار انا حاضرة


تقبلوا تحياتي يامبدعين ^_^:bye_1:

Colourful Hana
24-09-2007, 01:18 PM
شكراً جزيلاً لك إختي على هذه الإضافة القيمة
أبهرني تقديمك الراقي لموضوعك

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

وشكراً لك مرة أخرى
دمت بود
أختك هاها

aswar
24-09-2007, 02:49 PM
تسلمين أختي علىالدرس ^______^


ومااحبيت أرد لين أطبق الدرس... وهذاااااا تطبيقي^^

http://www.an-dr.org/upload/uploads/75a863f976.jpg (http://www.an-dr.org/upload)

mas3oody
24-09-2007, 03:24 PM
شرح ولا أروع...............
شكرا أختي على الموضوع القيم .......
وإنشاء الله تعم الفائدة على الجميع.........

:loffy1: :loffy1: :loffy1: :loffy1:

SaYa
24-09-2007, 03:30 PM
يااي مرره حلو الدرس ^.^

طبقت كل شي الا تعريف نمط ثاني شي ^_^ مالقيت اللي تقصدين

بس ماشاء الله مرتب ^.^

Jana
24-09-2007, 05:34 PM
والله كوووول الدرس
يعطيج العافية والله
حلوو الدرس

بس ياليت تبينين ان يخففون من كثافة و شفافية الخطوط المالية
عشان يطلع أحلى ^^

Jana

amer11
24-09-2007, 06:24 PM
السلام عليكم

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

وحبيت اقلك ملاحظة
انه يجب كتابة ان شاء الله
وليس انشاء الله

Rumi Chan
24-09-2007, 08:42 PM
مرحبـا اعزائي ^_^

Colourful Hana
شكرا عزيزتي على المرور
وخلينا نشوف تطبيقك قريب ^ ^



aswar

ماشاء الله عمل جيد واليوزر بار طالع يجنن ^_^ ,لكن المرة الجاية حاولي تخففي كثافة الخطوط اللي على الصورة عشان بتوضح اكثر

وشكرا عزيزتي على متابعتك وتطبيقك

SaYa
طبقت كل شي الا تعريف نمط ثاني شي ^_^ مالقيت اللي تقصدين
اذهبي الى القائمة
تحرير >>ثم تحديد الحشو

^ ^" رحت اشوفه من جهاز اخوي وان شاء الله حتلاقيه

وخلينا نشوف تطبيقك ^_^

Jana
اهلا وسهلا بجنى ^ ^

بس ياليت تبينين ان يخففون من كثافة و شفافية الخطوط المالية
عشان يطلع أحلى ^^
نعم هذه نقطة مهمة جدا انا قمت بالتلميح لها فوق بوضع كثافة 30% او اقل ,او كل واحد يسوي اللي بيناسبه لان البعض يمكن يشتغلون بحشوات غير اللون الاسود فربما تطلع معاهم الكثافة المحددة خفيفة

بس اذا كانوا يستخدموا الحشوة السوداء كما هو موضح فوق فالأفضل ان تكون الكثافة 30% او اقل زي ماقالت جنى ^_^
(ملاحظة: في احدى الصور انا قمت بأستخدام حشوة او خطوط بيضاء )

amer11
اشكرك اخي على مرورك وخلينا نشوف تطبيقك ^ ^
وشكرا على تنبيهك اخي انا اقوم بعمل هذه الاخطاء احيانا بغير قصد والمرة القادمة سأنتبه

شكرا ^_^

knouh
24-09-2007, 08:59 PM
ما شاء الله

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

مم قررت أثبت البرنامج و أجربها ان شاء الله

بانتظار كل جديدك

ياقوت
24-09-2007, 09:23 PM
مشكورة عزيزتي

لي عودة مع التطبيق


بإذن الله

X-RoN
24-09-2007, 10:56 PM
مشكوره اختي على الدرس الرئع ^_^

بالتوفيق

luchia
25-09-2007, 01:54 AM
يجننننننننننننننننن
تسلمين
ولما انزل الفوتو الجديد بسويه

Rumi Chan
25-09-2007, 08:58 PM
شكرا لجميع ^.^

المهم انكم استفدتوا

بس يالله ابغى اشوف تطبيقات O.O

مو لهذي الدرجة صعب ^ ^

Snake Never Die
26-09-2007, 10:34 AM
الله يعطيكِ الف عافية اختي الغالية على هذا الدرس الرائع

ان شاء الله التطبيق قريب

بالتوفيق

LELO
27-09-2007, 04:03 PM
يعطيك العافيه درس روعه

وشرح وااافي

وهذا تطبيقي

http://www.up.5alid.com/up/uploads/a903342572.gif

تحيتي

M$s jojo
27-09-2007, 07:56 PM
هذا تطبيقي وش رايك
http://www.ghalay.com/up/get-9-2007-7wbvc6u5.gif (http://www.ghalay.com/up)

- wOw -
27-09-2007, 08:50 PM
و||||||و
÷÷÷÷÷÷÷÷÷÷÷÷
درـــســ روووعه منـ احلى سينسي فـ الدوونيا..^___^
اللهـ يعطيكــ العافيهــ.. ويجزاكــ خير يارب في دا الشهــر الكريمــ
..،..
ودا تطبيقي على الدرس الكيوووتـ:)
.".
http://www.an-dr.org/upload/uploads/e49c3bcdfa.jpg
.".
ان شــاءلله يكون صح ،،
يلا عاد لا تحرمينا مدة طويلة من طلة جديدــ ة ودرسـ جـ ديــ د
الي اكيــد حيكوونـ .× و|||و ×.
تشـ.,.,.,ـاو...

NouR.FaYe
28-09-2007, 12:25 AM
سويت لي يوووزر باار
^_^
اول مره اطبق درس من منتدى، درس سهل وممتع
وهذي التجربة الأولى لي

http://www.an-dr.org/upload/uploads/568bbbfbca.jpg

أعتقد بس يحتاج له ايطار وتوضيح الخط.. @_@

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

في امان الله

Rumi Chan
28-09-2007, 06:33 AM
LELO

جوجو^وجوج


- wOw -

NourFaYe

ماشاااء الله يوزر بارات راااااااائعة:SnipeR (59): :SnipeR (59):

طبقتوا احسن تطبيق عزيزاتي :cool_1:

بالتوفيق ^ ^

Miss jojo
26-02-2008, 04:03 PM
.
http://www.noriny.com/album/19/pic/pix251.gif (http://www.noriny.com/album/19/album.php?action=shwo&file_shwo=pix251.gif)
.
http://www.noriny.com/album/19/pic/pix251.gif (http://www.noriny.com/album/19/album.php?action=shwo&file_shwo=pix251.gif)
.
.
http://www.noriny.com/album/19/pic/pix134.gif (http://www.noriny.com/album/19/album.php?action=shwo&file_shwo=pix134.gif)
oOoOoOoOoOoOo

درس رائع ..
:
وجاري التطبيق ..
:
مودتـــــــي..

oOoOoOoOoOoOo
.
http://www.noriny.com/album/19/pic/pix251.gif (http://www.noriny.com/album/19/album.php?action=shwo&file_shwo=pix251.gif)
.
http://www.noriny.com/album/19/pic/pix251.gif (http://www.noriny.com/album/19/album.php?action=shwo&file_shwo=pix251.gif)

luchia
06-03-2008, 11:10 PM
هلاا رومي تشان

هذا تطبيقي
http://www.an-dr.org/upload/uploads/321b451653.gif (http://www.an-dr.org/upload)



9- والآن سنقوم بعمل لمعة بسيطة وجميلة لأضافة شكل خاص وجذاب ,اعتبرها من الخطوات المهمة


اذهب الى الأداة البيضوية او ellipse tool وضع الكثافة الى 30% عشان ماتتلون معاك كل الرسمة ,وظلل فوق اليوزربار الخاص بك وسوف تظهرلك اللمعة بهذا الشكل


مافهمت هذه الخطوة

ووين أداتها

أرجو التوضيح

وتسلمين رومي تشان

مع محبتي~
luchia

ماكي كون
10-03-2008, 03:08 AM
ثاااااااااااااااااااااااااااااااانكيو أختي واااااااااااااااايد عجبني الدرس :please_1:استمتعت بطريقة شرحج ما شاء الله عليييج

و طبقت الدرس بحطه بتوقيعي لوووووول :D إن شاء الله مع الوقت أبدع فيه


دومو أريغاتو و انا أتمنى تكثر هالنوع من الدروووس :happy_1:

JANA

hana-chan
12-03-2008, 04:50 PM
مشكووورة أختي rumi chan لكن بالنسبة لما قلتيه:



قصها واضبطها ثم احفظها بهذا الحجم :عرض 350\ ارتفاع19 بيكسل
وحيكون الشكل عندك هكذا

http://www.an-dr.org/upload/uploads/c8033c13b0.jpg





كيف أحسبها 19 حتى أقصها؟؟
وهل يلزم هذا الطول فحسب أم يمكن تغييره حسب الرغبة؟؟

وآسفة إذا طولت..

تحيــ Hana-chanـاتي