الدرس الثالث [ تنسيق المحتويات - تصميم الأزرار ] (1 زائر)


ENORI

[AT-Repack Founding Titan]
إنضم
2 فبراير 2015
رقم العضوية
3401
المشاركات
2,486
الحلول
4
مستوى التفاعل
7,747
النقاط
971
أوسمتــي
19
العمر
28
الإقامة
مغرب الأنوار ..!
توناتي
2,080
الجنس
ذكر
LV
4
 
[TBL="http://www.foxpic.com/VIMYiS5v.jpg"]































[/TBL][TBL="http://www14.0zz0.com/2015/03/28/12/986616757.png"]


[FONT=Arial, sans-serif]
747607194.png
[/FONT]


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

أهلا طلابي الأعزاء .. كيف حالكم ؟ ان شاء الله الكل بخير وفي أفضل حال ~

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

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

القرص في الجزء الأول اما الجزء الثاني فسيكون عن كيفية تصميم الأزرار وتنسيقهـــا كي نبدأ في تركيب قرصنــا عما قريب

هذه المرة لن نقـــوم بأية تطبيقات وما ستكتسبونه هنـــا يمكنكـم من خلاله التعديل على مشاريعكـــم السابقة والدرس جد سهل


| الجزء الأول : ترتيب المحتويات |

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

[ Rounded Rectangle ] غير متناسقة من ناحية المسافة بينها في الأصدار الأحدث من الفوتوشوب هنالك

خاصية [ Smart Guides ] دورها بدون اطالة يظهر في هذه الصورة التالية :

VVTQrYKV.jpg


يساعد كثيرا في وضع الطبقات على نفس المستوى هذا أول شيء ،، الأمر الثاني يوجد لدينا خاصيتان في قائمة [ Layer ]

V0gqvLqo.jpg


Vt7rE8ul.jpg



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

VgHs7XqJ.jpg


Vyi8NvxB.jpg



الأداة الأخيرة والتي تقدم عون كبير هي [ Rulers ] وتتواجد في قائمة [ View ] أو يمكننا الوصول اليها من الكيبورد عن

طريق الأختصار [ Ctrl + r ] طريقة استخدامه بسيطة جدا أولا نقوم بالنقر بالزر الأيمن فوق الشريط لاستعراض المقياس الذي

سنتعامل به وفي حالتنا إخترت البيكسل < الخطوة الثانية هي النقر بالزر الايسر فوق الشريط وسحب الخط المتقطع الى مساحة

العمل .. والصورة التالية توضح هذه الخطوات :

V121j2lV.jpg


VIpMmrvx.jpg


VW8xE76L.jpg


V0PskMgw.jpg


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

VumzJcst.jpg




| الجزء الثاني : تصميم الأزرار |

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

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

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

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

شفاف تماما كما في الصورة :

V1ynEM6o.jpg


بعد حفظ الصورة أقوم بادراجها فوق الزر الاصلي ،، ومــــن خلال هذه الصورة أقوم باضافة خاصية الصوت عند مرور الماوس فوقهــــا

وايضا اضافة الأكشن الذي سيحدث بعد النقر عليها .. سيتم توضيح الفكرة أكثر بشكل عملي في الدرس القادم عندما نبدأ مرحلة التركيب

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


142848930313.png


1428489303164.png


حيث لجأت فقط الى الكتابة وأحد الأشكال .. أو باستخدام صور بصيغة [ PNG ] تتناسب والمشروع مع تعديل شفافيتها كما في الصورة

V1KrWjDX.jpg


سبق وأن رفعت لكم المجموعة التالية :

V0Cf3vfY.jpg


التحميل من [ هنآ ]

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

جديد وأطبق عليه ما يلي :

V0UHePpi.jpg


طريقة ثانية :

V0DkDsBH.jpg


وهذه مجرد أمثلة لا غير ويمكنكم التفنن في استخدامها .. ايضا قمت بإرفاق مجموعة من الأزرار كل ما عليكم فعله لاستخدامها

هو التحديد على الطبقة وعمل نسخ للستايل الخاص بها وتطبيقه على عملكم :

V0nJGFi7.png


التحميل من [ هنا ]

وبهذا يكون قد إنتهى درس اليوم وأتمنى أن تكون الفكرة واضحة لكم .. اما بالنسبة للتطبيقات فلا توجد لكن

يجب عليكم العودة لمشاريعكم والتعديل على كافة الأمور لننتقل الى مرحلة التركيب ونخرج من الجزء الممل

الخاص بالتصميم


[/TBL][TBL="http://www14.0zz0.com/2015/03/28/12/886138463.png"]
















[/TBL]



 
التعديل الأخير:

إنضم
10 يونيو 2014
رقم العضوية
2231
المشاركات
1,071
مستوى التفاعل
105
النقاط
0
الإقامة
مصر
توناتي
0
الجنس
ذكر
LV
0
 
رد: الدرس الثالث [ تنسيق المحتويات - تصميم الأزرار ]

وعليكم السلام ورحمة الله وبركاته
الدرس مفهوم وواضح وكل شئ
بس المشكلة اننا صممنا أزرار التنقل من قبل
وحفظناه بصيغة png وكذلك الخطوط ضاعت
كيف نعدل على التصميم الان ؟
كان من المفترض ان تضع هذا الدرس بالدرس السابق
وتجعلهم درس واحد فهذه الجزئية من رأيى لا تحتاج لدرس خاص
ولها علاقة كذلك بالدرس السابق

 

ENORI

[AT-Repack Founding Titan]
إنضم
2 فبراير 2015
رقم العضوية
3401
المشاركات
2,486
الحلول
4
مستوى التفاعل
7,747
النقاط
971
أوسمتــي
19
العمر
28
الإقامة
مغرب الأنوار ..!
توناتي
2,080
الجنس
ذكر
LV
4
 
رد: الدرس الثالث [ تنسيق المحتويات - تصميم الأزرار ]

وعليكم السلام ورحمة الله وبركاته
الدرس مفهوم وواضح وكل شئ
بس المشكلة اننا صممنا أزرار التنقل من قبل
وحفظناه بصيغة png وكذلك الخطوط ضاعت
كيف نعدل على التصميم الان ؟
كان من المفترض ان تضع هذا الدرس بالدرس السابق
وتجعلهم درس واحد فهذه الجزئية من رأيى لا تحتاج لدرس خاص
ولها علاقة كذلك بالدرس السابق


- يا أهلا .. أول شيء قلته هو الأحتفاظ بالملفات المفتوحة لمشاريعكم للتعديل عليها مستقبلا ، لكنني لم افهم قصدك بشأن التعديل على التصميم
ان لم يكن لديك الـ PSD حاليا فالحل الوحيد هو اعادة التصميم الخاص بمشروعك .. اذا كانت ازرار التنقل موجودة عندك مسبقا فلا مشكلة لكن
حفظها لوحدها بعيدا عن التصميم قد يكون متعب ولك حرية الأختيآر

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

إنضم
2 أبريل 2015
رقم العضوية
3962
المشاركات
34
مستوى التفاعل
3
النقاط
0
توناتي
0
الجنس
ذكر
LV
0
 
رد: الدرس الثالث [ تنسيق المحتويات - تصميم الأزرار ]

درس جميل جداً وخفييييييف
أشكرك على الملفات المرفقة أكيد بتكون مفيدة
+
التطبيق بيكون على مشروع الدرس الأول ، صح؟


الدرس السابق لوحده كان طويل كفاية وفي حالة دمج هذا وذاك في موضوع واحد فستحدث لخبطة
كبيرة والاكيد ان كل الدروس لها علاقة ببعضها البعض
1%20%2867%29.gif
+1
بالفعل كان طويل وصعب تدمجهم
أكرر شكري لك يا استاذنا العزيز اعجبني3
 

ENORI

[AT-Repack Founding Titan]
إنضم
2 فبراير 2015
رقم العضوية
3401
المشاركات
2,486
الحلول
4
مستوى التفاعل
7,747
النقاط
971
أوسمتــي
19
العمر
28
الإقامة
مغرب الأنوار ..!
توناتي
2,080
الجنس
ذكر
LV
4
 
رد: الدرس الثالث [ تنسيق المحتويات - تصميم الأزرار ]

درس جميل جداً وخفييييييف
أشكرك على الملفات المرفقة أكيد بتكون مفيدة
+
التطبيق بيكون على مشروع الدرس الأول ، صح؟


+1
بالفعل كان طويل وصعب تدمجهم
أكرر شكري لك يا استاذنا العزيز اعجبني3

يا أهلا بك عزوزي منور بأطلالتك .. اي على موضوع الدرس الأول او ان قررتم تغير فكرة

المشروع فلا مشكلة وان شاء الله نبدأ في الدرس القادم العمل على برنامج [ AMS ]


حيث سنتحرك بشكل منطقي على عكس التصميم فلكل شخص اسلوبه
ص4








 

إنضم
12 أغسطس 2014
رقم العضوية
2585
المشاركات
2,843
مستوى التفاعل
1,632
النقاط
740
أوسمتــي
6
العمر
27
توناتي
805
الجنس
ذكر
LV
1
 
رد: الدرس الثالث [ تنسيق المحتويات - تصميم الأزرار ]

آول شي شكرآ آستاذي نيرو ع آلدرس وآهلا بعدوتك آلنا ش1

ثآني شي آلحمد لله حفظت كل شغلي بشكل PSD ض2ض2

كنت متوقع راح تسوي هذآ آلدرس من قبل ومحضّر آلازرار من زمآن ضض2

بآنتظار الدرس آلجاي ~
 

إنضم
4 فبراير 2015
رقم العضوية
3423
المشاركات
644
مستوى التفاعل
172
النقاط
0
أوسمتــي
5
العمر
29
توناتي
0
الجنس
أنثى
LV
1
 
رد: الدرس الثالث [ تنسيق المحتويات - تصميم الأزرار ]

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

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

..
بما ان الدرس لن يكون عليه تطبيق علينا استغلال هذه الفترة لترتيب افكارنا اكثر حول القرص
الخاص بنا + اعادة التصماميم و المحافظة على ملفات الـ psd

وذلك عن

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

شفاف تماما


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

 

ENORI

[AT-Repack Founding Titan]
إنضم
2 فبراير 2015
رقم العضوية
3401
المشاركات
2,486
الحلول
4
مستوى التفاعل
7,747
النقاط
971
أوسمتــي
19
العمر
28
الإقامة
مغرب الأنوار ..!
توناتي
2,080
الجنس
ذكر
LV
4
 
رد: الدرس الثالث [ تنسيق المحتويات - تصميم الأزرار ]

آول شي شكرآ آستاذي نيرو ع آلدرس وآهلا بعدوتك آلنا ش1

ثآني شي آلحمد لله حفظت كل شغلي بشكل PSD ض2ض2

كنت متوقع راح تسوي هذآ آلدرس من قبل ومحضّر آلازرار من زمآن ضض2

بآنتظار الدرس آلجاي ~

الشكر لك حبيبي كيلوا دائمــآ منور بإطلالتك لا عدمناك

اي هيك العمل الصح يا بطل .. تيب ما دام محضر كل شيء

فان شاء الله بكرا الصبح أحط الدرس الرابع






 

H A V E N ~

I finally opened my eyes and realized the truth
إنضم
3 ديسمبر 2014
رقم العضوية
3030
المشاركات
1,515
مستوى التفاعل
2,127
النقاط
335
أوسمتــي
7
توناتي
1,000
الجنس
أنثى
LV
1
 
رد: الدرس الثالث [ تنسيق المحتويات - تصميم الأزرار ]

السلام عليكم و رحمة الله و بركاته
اخبارك سينسي ان شاء الله تكون امورك كلها تمام
الحمد لله لحقت على الدرس
1%20%28214%29.gif

النت رفع ضغطي بشكل
فعلا شكرا على الدرس الرائع فعلا استفدت
بالذات المسطره ما كنت اعرف استخدمها و كل تصاميمي تجي على تقديري
1%20%2823%29.gif

و حمستني للاصدار الجديد من الفوتوشوب بس للاسف ما اقدر اثبته
لازم موافقة اخوي و هو معارض
1%20%2811%29.gif
باحاول فيه من جديد

و الاضافات الي رفعتها لنا كلها عجبتني
1%20%2857%29.png

ان شاء الله احملهم
1%20%28150%29.gif

و ما شاء الله دمشقية جابت السؤال الي في بالي جزاتها الله خير
شكرا سينسي انك نبهتني احط العمل psd
و لا كنت الحين حايسه
و ان شاء الله ما يعلق النت كتبت الرد ثلاث مرات الى الان بكا1
انتظر الدرس الجاي بقارغ الصبر
انتبه لنفسك سينسي
cute_%20%285%29.gif

في امان الله
 

ENORI

[AT-Repack Founding Titan]
إنضم
2 فبراير 2015
رقم العضوية
3401
المشاركات
2,486
الحلول
4
مستوى التفاعل
7,747
النقاط
971
أوسمتــي
19
العمر
28
الإقامة
مغرب الأنوار ..!
توناتي
2,080
الجنس
ذكر
LV
4
 
رد: الدرس الثالث [ تنسيق المحتويات - تصميم الأزرار ]

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

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

..
بما ان الدرس لن يكون عليه تطبيق علينا استغلال هذه الفترة لترتيب افكارنا اكثر حول القرص
الخاص بنا + اعادة التصماميم و المحافظة على ملفات الـ psd


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



الحمد لله انني قد أفدتكم ولو بشيء بسيط وكما قلت فهي فرصة لترتيب الافكار اكثر

فالبرنامج القادم سيشتتها نوعا ما في اول استخدام xD

ما قصدته هو :

التصميم يحتوي على زر [ دخول ] بطول وعرض معين

اخذ القياس المشابه للزر مثلا [ 300*20 ] وافتح عمل جديد شفاف واحفظه

دوره هو تحويل الصورة الشفافة الى مساحة توضع فوق التصميم ويتم اضافة

خاصية الزر لها ... سنفهم الامر أكثر في الدرس الأخير عما قريب او ما قبل الأخير

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

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

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






 

المتواجدون في هذا الموضوع

المواضيع المتشابهة

أعلى أسفل