-/ طريقة إنشاء Pattern باترن خاص بك وكيفية إستخدامه \-

[abohmam]

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

الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

السلام عليكم ورحمة الله وبركاته

درسنا اليوم بداية للدرس القادم الذى كنت قد وعدت به فى نهاية الدرس السابق (http://www.abc4web.net/vb/showthread.php?t=700)

والذى سوف نشرح فيه طريقة تصميم زر زجاجي بهذا الشكل وبأكثر من تأثير

http://www.abc4web.net/vb/imgcache/2670.abc4web

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

http://www.abc4web.net/vb/imgcache/2681.abc4web

فائدة الباترن سوف تراها فى هذه الصورة

http://www.abc4web.net/vb/imgcache/2682.abc4web

أكيد عجبكم هذه التطبيقات :abc_050: طيب على بركة الله نبدا هذا الشرح

1 - تصميم شكل الباترن

- قم بإنشاء ملف عمل جديد مقاس 8x8 بيكسل
نستطيع تغير المقاس حسب الرغبة أو شكل وطريقة الباترين الذى نريد إستخدامه ، وكذلك يمكننا تكبير مساحة العمل والتحكم فى المقاس بعد ذلك عن طريق Canvas Zoom ، ولكننا سوف نعتمد الشرح هنا على المقاس 8x8 بيكسل

http://www.abc4web.net/vb/imgcache/2683.abc4web

نقوم بتكبير الصورة عن طريق الزوم http://www.abc4web.net/vb/imgcache/2684.abc4web أو جعل الصورة بمساحة الشاشة

http://www.abc4web.net/vb/imgcache/2685.abc4web

- بإستخدام القلم Pen Tools وباللون الأسود نملئ مساحة الصورة كالشكل التالي ( تستطيع التحكم فى حجم القلم من 1 : 3 بيكسل)

http://www.abc4web.net/vb/imgcache/2686.abc4web

http://www.abc4web.net/upload/images/0d2f4jyyzg8n2g0lpnf5.gif

مشاهدة الحجم الأصلي 100% view

http://www.abc4web.net/upload/images/z2zhzyo6xnb7wl4pjk3.gif

2 - الآن تحويل الشكل إلى باترن (Define pattern)

سوف نقوم بتحول التصميم غلى باترن كى نستخدمه فى أى عمل آخر والطريقة من قائمة Edit :

Edit ->Define Pattern

http://www.abc4web.net/vb/imgcache/2687.abc4web

إختار اسم للباترن بحيث يمكنك تذكره فى أى وقت مثلا ( Stripe5x ) وهذا يعنى لى أن هذا الباترن سيعطيني خطوط والفرق بينهم 5 بيكسل ! ويمكنك أيضا الكتابة باللغة العربية

بعد ذلك إضغط على OK

http://www.abc4web.net/upload/images/zy2e77x7nzwkdhu1dlz.gif

3 - طريقة إستخدام الباترن :

أفتح عمل جديد مثلا مساحة 300x300 بيكسل

الطريقة الأولى : عن طريق القائمة Edit ثم إختيار Fill

http://www.abc4web.net/vb/imgcache/2688.abc4web

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

http://www.abc4web.net/vb/imgcache/2689.abc4web

الطريقة الثانية :

تقف على الطبقة التى تريد أن تضيف لها الباترن وبيمين الماوس تختار Blending Options

http://www.abc4web.net/vb/imgcache/2690.abc4web

أشر على Pattern Overlay وقف عليها سيظهر لك خيارات الباترن للإضافة أو الإخفاء

http://www.abc4web.net/vb/imgcache/2691.abc4web

وإذا تريد إخفاء الباترن فقط نزيل التحديد من خيار Pattern Overlay

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

http://www.abc4web.net/vb/imgcache/2692.abc4web

- إذا تريد حفظ الباترن خارج البرنامج فتفتح نافذة إختيار الباترن وتقف علي الباترن وبيمين الماوس تختار حفظ Save

- أما إذا تريد حذف الباترن نهائيا فتفتح نافذة إختيار الباترن وتقف عليه وبيمين الماوس تختار Delete

:ok:

وهذه مجموعة من الباترن الخاصة بالخطوط المائلة يمكنكم استخدامها مباشرة

http://www.abc4web.net/vb/uploaded/1_11264026147.png (http://www.abc4web.net/vb)

يمكنكم التحميل من المرفقات

:at:
.
أتمنى أن أكون قد وفقت فى تقديم الشرح بطريقة سهلة وتتم الفائدة منه إن شاء الله تعالى

ولاتنسونا من صالح دعائكم

.

مـ(أجمل تحية لكم جميعا)ـع
أبو هــــMـــام
.

[الدمشقي]

شرح واضح وجميل

ألف شكراً لك أخي الغالي أبو همام

الله يديم عليك الصحة والعافية

[abohmam]

شرح واضح وجميل

ألف شكراً لك أخي الغالي أبو همام

الله يديم عليك الصحة والعافية


بارك الله فيك أخى الحبيب الدمشقي

أشكر لك مرورك العطر وتواصلك

وسوف نتابع معا الدروس إن شاء الله

[jef_4]

بالفعل درس ممميز تحياتي لك أخي الكريم

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[sanfour39]

بارك الله فيك على الدرس المميز

تقبل مروري

[Khaled J. Ahmad]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[أبو يوسف]

جزاك الله خيرا أخي الكريم أبو همام

وبارك الله فيك

.

[جروح بارده]

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

[digimon_samoor]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[احمد]

والله جميل جدا ها الشغل :abc_050:

[سالي الفلسطينية]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[مُجمع الخبرات]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[الخليلي]

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

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[abohmam]

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

أشكر لكم مروركم العطر وتواصلكم

تم إضافة ملف جاهز للإستخدام لباترن الخطوط المائلة فى مرفقات المشاركة الأولى

بالتوفيق

[كينج نت]

السلام عليكم ورحمة الله وبركاته

مشكور اخي ابوهمام

شرح مميز ومفيد للجميع وإضافت جميلة جداً

جزاك الله كل خير للمتابعه

:abc_138:

.

[محمود عفيفى]

جزاك الله خيرا أخى أبو همام وبارك الله فيك :abc_152:

[علاء محمد]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[عابر سبيل.]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

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

[التاشمب]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[رائد ابو فيصل]

بارك الله فيك

[فلسطيني]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[ايجي ليوتز]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[راجية رضى الله]

بارك الله فيكم
كنت ابحث عنه..
جزاكم الله خيرا

[عبير الامل]

:abc_152:شكرا لك

[رجل السيف]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية . :abc_152:

[ابو الشباب]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[الوردة الجورية]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .
موفق بإذن الله ... لك مني أجمل تحية .
جزاك الله كل خير
فى أمان الله
:abc_152::abc_028::abc_152:

[السيد عارف]

وعليكم السلام ورحمة الله وبركاته
بارك الله فيك أخى الحبيب

[فداكـ الكون]

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

ودي

[أبو الوليد]

جزاك الله خيرا أخي أبا همام ..شرح وافي ومجموعة مميزة من الباترين :abc_022:

[ابومعاذاج]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[حجاج الجوكر]

موضوع جميل
جزاك الله خيرا

[ملاك دبي]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[أبو علي المغربي]

السلام عليكم ورحمة الله وبركاته
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[ضيف الله]

مشكور

بارك الله فيك

[ابوالتومات]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية

[البغرامي]

جزاك الله خيرا ابا همـام المبدع ،،

[سجلت عشان رابط]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[الفارسين]

الله يعطيك العافية ياغالي

[abohmam]

حياكم الله جميعا

أشكر لكم رمروكم العطر وتواصلكم

بالتوفيق

[الجنتل]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[اشرف سليم]

يديك العافية يا غالى

[ابانوب فريد]

مشكور جدا على معروفكم

[أبو صخر]

جزاك الله خيرا على هذا الجهد المبذول

موفق بإذن الله ... لك مني أجمل تحية .

[كفوكي]

شرح رائع سوف اطبقه:abc_050:

[منتصر]

مشكوررررررررررررررررررررر ررررررررررررررررررررررررر ررررررررررررررررر

[بصمة إبداع]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[ادريس بلحاج]

بارك الله فيك على الدرس المميز

[الدموكي]

شـكــ وبارك الله فيك ـــرا لك ابو همام
مبدع دائما ... لك مني أجمل تحية

[ملك الاحزان]

شكرا على الموضوع

[عبد حميد]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[اسماع]

jazaaaaaaaaaaaaaaak allah

[abohmam]

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

أشكر لكم مروركم العطر وتواصلكم الجاد

[كلمة سر]

شكرا :abc_050::abc_050::abc_050::abc_050::abc_050: