شرح :@@ كيف تصنع أيقوناتك بنفسك لعمل واجهات حديثة Modern UI Access@@

[Amr Ashraf]

السلام عليكم ,, الاخوة الاعزاء كل عام وانتم بخير .

كما نعلم ان الايقونات جزء لا يتجزء من الواجهات الحديثة الجذابة التى تلفت الانظار ومن هذا المنطلق واستكمالاً للموضوع السابق الذى تجده هنا :

 

موضوعنا اليوم عن كيف تصنع ايقوناتك خصيصاً لتتناسب مع تصميم برنامجك بطريقة بسيطة , انظر النتيجة :

هناك اختلاف بسيط فى الالوان لأنى عملتهم على عجالة 😅 .

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

من هنا

بعد التحميل والتثبيت ستجد هذه الايقونة

 

افتح البرنامج وابحث عن الايقونة التى تريدها بوصفها مثلاً Facebook , Twitter وهكذا , ستجد ايقونات غير قابلة للتخصيص ولكن يمكن التحكم فى حجمها وستجد ايقونات يمكن تغيير ألوانها ستجدها تحت تصنيف Material وبها تصنيفات فرعية مثلا Outlined للايقونات المفرغة و Filled للايقونات الممتلئة , ابحث ن الايقونة وقم بتلوينها مثل المثال :

اضغط كليك يمين ثم Save As واحفظ الايقونة شفافة يمكن وضعها على اى تصميم

طيب انا محتاج لون دقيق جدا حتى يكون هناك تناسق تام فى الألوان والتصميم فى هذه الحالة يمكنك سحب اللون بالاداة الموجودة فى الموضوع السابق اتبع المثال لسحب لون الاكسس المحبوب على سبيل المثال :

لا حدود لما يمكنك ابداعه , بتطبيق ما تعلمته من الدرسين يمكنك عمل Themes يقوم المستخدم بنحديد المفضل لديه ويتم تغيير الوان الازرار والايقونات وشريط العنوان ليصبح برنامجك شبيهاً ببرامج .Net 😅

المطلوب دعوة بظهر الغيب لصلاح الحال وتيسير الامور , دمتم بخير

مرفق المثال الاول لتغيير الوان الحروف والايقونات المستخدمة

 

 

Icon Color Amr.rarFetching info...

تم تعديل مايو 7, 2022 بواسطه Amr Ashraf

[kanory]

ماشاء الله عليك مميز

[Amr Ashraf]

  في 7‏/5‏/2022 at 19:10, kanory said:

ماشاء الله عليك مميز

Expand  

تشرفت بمرورك استاذنا

[الأترُجّة]

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

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

ما شاء الله! تَباركَ الله!

وأستسمحكم:

هل يمكن تطبيق الدّرس على برامج غير الأكسس؟!

والله تعالى يجزيكم خيرًا ، ويزيدكم من فضله.

[Amr Ashraf]

  في 7‏/5‏/2022 at 19:24, الأترُجّة said:

هل يمكن تطبيق الدّرس على برامج غير الأكسس؟!

Expand  

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

 

  في 7‏/5‏/2022 at 19:24, الأترُجّة said:

والله تعالى يجزيكم خيرًا ، ويزيدكم من فضله.

Expand  

ولكم مثله

[الأترُجّة]

  في 7‏/5‏/2022 at 19:34, Amr Ashraf said:

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

 

ولكم مثله

Expand  

شُكرًا لأريحيتكم.

أحسن الله تعالى إليكم، ويسّر لكم الخَير.

[abouelhassan]

سدد الله خطاك وزادك من فضله اللهم امين يارب العالمين

[Moosak]

شكرا لك الأخ عمر .. 🌹 🙂 

فعلا أنا أستخدم نفس البرنامج لعمل أيكونات البرامج .. سهل وسريع ومريح 👍🙂 

[Amr Ashraf]

  في 8‏/5‏/2022 at 06:15, abouelhassan said:

سدد الله خطاك وزادك من فضله اللهم امين يارب العالمين

Expand  

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

  في 8‏/5‏/2022 at 08:30, Moosak said:

شكرا لك الأخ عمر .. 🌹 🙂 

Expand  

بارك الله فيك اخى موسى , شرفنى مرورك

  في 7‏/5‏/2022 at 23:44, الأترُجّة said:

أحسن الله تعالى إليكم، ويسّر لكم الخَير.

Expand  

جزاك الله خير

[أبوبسمله]

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

بالتوفيق

[محمد حسن المحمد]

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

سبحان من علم الإنسان ما لم يعلم

جزاكم الله خيرا وأحسن إليكم آمين.

[Amr Ashraf]

  في 8‏/5‏/2022 at 16:00, احمد الفلاحجي said:

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

Expand  

شرفنى مرورك اخى الكريم

  في 8‏/5‏/2022 at 16:07, محمد حسن المحمد said:

جزاكم الله خيرا وأحسن إليكم آمين.

Expand  

نحن واياكم اخى الفاضل , شرفنى مرورك

[النجاشي]

  في 7‏/5‏/2022 at 18:54, Amr Ashraf said:

السلام عليكم ,, الاخوة الاعزاء كل عام وانتم بخير .

كما نعلم ان الايقونات جزء لا يتجزء من الواجهات الحديثة الجذابة التى تلفت الانظار ومن هذا المنطلق واستكمالاً للموضوع السابق الذى تجده هنا :

 

موضوعنا اليوم عن كيف تصنع ايقوناتك خصيصاً لتتناسب مع تصميم برنامجك بطريقة بسيطة , انظر النتيجة :

هناك اختلاف بسيط فى الالوان لأنى عملتهم على عجالة 😅 .

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

من هنا

بعد التحميل والتثبيت ستجد هذه الايقونة

 

افتح البرنامج وابحث عن الايقونة التى تريدها بوصفها مثلاً Facebook , Twitter وهكذا , ستجد ايقونات غير قابلة للتخصيص ولكن يمكن التحكم فى حجمها وستجد ايقونات يمكن تغيير ألوانها ستجدها تحت تصنيف Material وبها تصنيفات فرعية مثلا Outlined للايقونات المفرغة و Filled للايقونات الممتلئة , ابحث ن الايقونة وقم بتلوينها مثل المثال :

اضغط كليك يمين ثم Save As واحفظ الايقونة شفافة يمكن وضعها على اى تصميم

طيب انا محتاج لون دقيق جدا حتى يكون هناك تناسق تام فى الألوان والتصميم فى هذه الحالة يمكنك سحب اللون بالاداة الموجودة فى الموضوع السابق اتبع المثال لسحب لون الاكسس المحبوب على سبيل المثال :

لا حدود لما يمكنك ابداعه , بتطبيق ما تعلمته من الدرسين يمكنك عمل Themes يقوم المستخدم بنحديد المفضل لديه ويتم تغيير الوان الازرار والايقونات وشريط العنوان ليصبح برنامجك شبيهاً ببرامج .Net 😅

المطلوب دعوة بظهر الغيب لصلاح الحال وتيسير الامور , دمتم بخير

مرفق المثال الاول لتغيير الوان الحروف والايقونات المستخدمة

 

 

Icon Color Amr.rar 71.73 kB · 27 downloads

Expand  

من طيبك الله يسعدك استاذي  هديه رائعه وجميله بارك الله فيك 

[Amr Ashraf]

  في 9‏/5‏/2022 at 12:49, النجاشي said:

من طيبك الله يسعدك استاذي  هديه رائعه وجميله بارك الله فيك 

Expand  

شرفنى مرورك اخى الكريم

[محمد سلامة]

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

 

هدية جميلة 🌹🌹🌹

[Amr Ashraf]

  في 11‏/5‏/2022 at 15:32, محمد سلامة said:

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

Expand  

ولكم مثله أخى الكريم , شرفنى مرورك