[ الدرس الثانى ] : [ Flat Design | آلتصميم آلمسطح ] : تصميمـ Header .

تم تحميل الصفحة في 1,7571836 ثانية
[ Flat Design | آلتصميم آلمسطح ] : تصميمـ Header .

Đя.Aиσиyмσυs

.:: مُصمم جرافيكس، مَبرمج ::.
rankrankrank
إنضم
3 يونيو 2014
المشاركات
708
الإعجابات
964
النقاط
93




السلام الله عليكم يا من صنعتم للاًبداع معنى ~..
نـ
سأل الله أن يوفقنا لتقديم ما يرضي الجميع ، من الاخوان والاخوات
~..

كما نسأل الله، أن يوفقهم جميعاً الى كل خير، وصلاح ~..


ُ
نستكمل بآذن الله دورتنا البسيطة عن التصميم المسطح .~..




**
.:: فهرس الدورة ::.
[ Flat Design | آلتصميم آلمسطح ] : مقدمة عنـ آلتصميمـ , وتآريخة .

[ Flat Design | آلتصميم آلمسطح ] : البداية فى التصميم المسطح .


**

..: [ Flat Design | آلتصميم آلمسطح ] :تصميمـ Header . :..


نــتـيجــة الــــدرســـ .~



|[ ---------------------------------------------------- ]|

نبدأ على بركة الله . . ~

نفتح الآن برنامج الفوتوشوب اى اصدار متاح . .

ثم نضع الاعدادات الاتية او حسب ما تريدون





|[ ---------------------------------------------------- ]|


نقوم بملا الخلفية بالوانــ [F0F0F0#] مستعملين اداة [
]

ولتعين الالوان بالاكواد نقوم بالاتى بالضغط على [
]

تفتح لنا قائمة منها يمكنا كتابة الاكواد والحصول على الون المطلوب . . ~



|[ ---------------------------------------------------- ]|

نقوم بآظهار الــ[Rulers] المسطرة . .

عن طريق الضغط على" Ctrl + R "

ثم نقوم بعمل ،، "Guide"

نتابع .،،






نقوم بعمل
"Guide" بمقاس px305. .~

اختصارآ للوقت اخوتى سوف ناتى الى حافة المسطرة بالسحب نستطيع عمل

"Guide"
بكل سهول . .

ليصبح الشكل النهائى للـ
"Guide"ـ "Guides"

هكذا . .~



فائدة هذة الخطوط هي تحديد وضبط العمل بدقة . . ~

|[ ---------------------------------------------------- ]|

نآخذ الان اداة الــ [
]

وبالضغط على صفحة العمل تظهر لنا النافذة الاتية . .~



ثم نضغط . OK

وللتحكم فى اللون اوخصائص الشكل يمكنا ذلك بواسطة . .~



نضع الشكل الذى قمنا بآنشآئة فى البداية

ونختار لة الون [
#FFFFF] الابيض . . ~

|[ ---------------------------------------------------- ]|

نقوم بوضع لوجو الموقع فى الحافة بهذا الشكل . . ~




ثم نآخذ اداة الكتابة [
]

بكود لون . .~ [303030]

ونكتب اسم الموقع مع مراعاة الاعدادات الاتية .. ~



بهذآ الشكل .. ~





ثم نآخذ اداة الكتابة [
]

ونكتب تعريف بسيط جدا للموقع مع مراعاة الاعدادات الاتية .. ~



هكذأ ،،



|[ ---------------------------------------------------- ]|

ننتقل للجهة المقابلة للوجو . . ونقوم برسم اربعة دوائر . .~

نتابع . . ،،

بآخذ هذة الاداة . ، [
]

والضغط على مساحة العمل تظهر النافذة الاتية . ،،





وبتكرار الدوائر حسب المطلوب . .وضع الايقونات المطلوب~
هكذأ ، ،



|[ ---------------------------------------------------- ]|

نآخذ اداه المستطيل [
]

نضغط على الخلفية ونقوم بملا الاعدادات الاتية .. ~



ونملا بالون . . ~ 303030

ثم نضعة بهذأ الشكل . .~



ثم نضع التكسر المرفق . .~

ثم نآخذ اداة الكتابة [
]

ونقوم بكتابة اقسام الموقع مع مراعآة الاعدادات الاتية

كود اللون . . الرمادى الفاتح . ~ 999999



آلى ان نجعلة هكذأ .، ،



ونقوم بظليل اى رابط نريدة ونجعلة بالون الابيض .. ~

هكذآ . . ~



ثمم نقوم بعمل مستطيل . . ~

بهذة الاعدادات . ~

وكود لون .

#16a085



ثم نضع المستطيل بهذآ الشكل . . ~



نقوم بعمل مستطيل اخر . .بآلاعدادات الاتية . .~



ونضعة هكذأ . .~



|[ ---------------------------------------------------- ]|

نآخذ أداة الــ [
]


ونصنع مدور بهذة الاعدادات . .واللون ابيض ~




نقوم بوضعة فى هذا المكان مع اضافة ايقونة البحث . . ~



ثم نآخذ اداة الكتابة [
]
ونقوم بكتابة عبارة بحث عن المزيد مع مراعآة الاعدادات الاتية

999999999999
كود لون , 858585



بهذأ الشكل . . ،،،


|[ ---------------------------------------------------- ]|
نقوم بوضع شآشة . .،،



نضع اى صورة داخل الشآشة . .،،



نقوم بكتآبة تعريف بألاعدادات الاتية . .،



هكذآ . .،،،



|[ ---------------------------------------------------- ]|
بآخذ هذة الاداة . ، [
]

والضغط على مساحة العمل تظهر النافذة الاتية . ،،



ثم نضعهما هكذآ .. ،،



|[ ---------------------------------------------------- ]|

نقوم بصناعة مثلثان عن طريق . الاتى ،،

نآخذ الاداة [
]

وبهذة الاعدادات . .



ونضعهما هكذآ .. ،،



|[ ---------------------------------------------------- ]|

نقوم بعمل ثلاث دوائر صغيرة بمقيأس 10 / 10


ونصنع دائرة صغيرة . بمقيأس 4/4. ،، هكذأ



|[ ---------------------------------------------------- ]|
تــحــميــل الخـطـــوط .

تــحــميــل ملف العمل Psd .

تــحــميــل الوجو والايقونات .


|[ ---------------------------------------------------- ]|

نتمنى ان تكون ذات منفعة لكم ~..

ونسأل الله التوفيق لنا ولكم
~..

في اًمان الله ورعايته
~..| [ ---------------------------------------------------- ]|

ترقبونا فى دروس قآدمة بآذن الله .

محبكم دومأ || Dr.Xavi
~..

بآخذ هذة الاداة . ، [ ] والضغط على مساحة العمل تظهر النافذة الاتية . ،،
"Guide س ؤ"
 

Abo Ziad

.:: Administrative ::.
طاقم الإدارة
إنضم
27 أغسطس 2008
المشاركات
24,154
الإعجابات
22,170
النقاط
113
رد: [ Flat Design | آلتصميم آلمسطح ] : تصميمـ Header .

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

من أروع ما رأيت في النقاء والعمل المُتقن في التصميم
درس واضح جدا وعمل ممتاز جدا يا غالى والله
انا متابع معك من أول درس ودروسك سهله وممتازة جداً
تسسلم إيدك يا بطل
لك مني 100 نقطة تقييم على أداءك وعملك الرائع جداً
 

Đя.Aиσиyмσυs

.:: مُصمم جرافيكس، مَبرمج ::.
rankrankrank
إنضم
3 يونيو 2014
المشاركات
708
الإعجابات
964
النقاط
93
رد: [ Flat Design | آلتصميم آلمسطح ] : تصميمـ Header .

درس رائع
وهيدر اروع
جاهز للتكويد :248:

لا تحرمنا دروسك المفيده
شكرآ لك اخى . سعيد ان الدرس اعجبك يآ غألى . :127:
 

Josَ

VIP DeveloPer
rankrankrankrankrankrank
إنضم
7 أكتوبر 2013
المشاركات
4,038
الإعجابات
7,224
النقاط
113
العمر
22
رد: [ Flat Design | آلتصميم آلمسطح ] : تصميمـ Header .

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

ماشاء الله عليك ي مبدع .. درس ممتاز جدا والله

من كل النواحي مميز , منسق ؛ محتوى مٌبسط مفهوم سهل ..

واحلى شى اناقة الموضوع ؛ طرح انيق جداً احسنت والله ..

خماسي واحلى تقييم .. لك كل الود .. :forgiveme:
 

Đя.Aиσиyмσυs

.:: مُصمم جرافيكس، مَبرمج ::.
rankrankrank
إنضم
3 يونيو 2014
المشاركات
708
الإعجابات
964
النقاط
93
رد: [ Flat Design | آلتصميم آلمسطح ] : تصميمـ Header .

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

من أروع ما رأيت في النقاء والعمل المُتقن في التصميم
درس واضح جدا وعمل ممتاز جدا يا غالى والله
انا متابع معك من أول درس ودروسك سهله وممتازة جداً
تسسلم إيدك يا بطل
لك مني 100 نقطة تقييم على أداءك وعملك الرائع جداً
تسلم حبيبى ابو زياد . .:637476:
شهادة اعتز بيها دوما . . :dh (6):
شكرا ع التقيم يآ غـالى :2 (64):
 

Đя.Aиσиyмσυs

.:: مُصمم جرافيكس، مَبرمج ::.
rankrankrank
إنضم
3 يونيو 2014
المشاركات
708
الإعجابات
964
النقاط
93
رد: [ Flat Design | آلتصميم آلمسطح ] : تصميمـ Header .

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

ماشاء الله عليك ي مبدع .. درس ممتاز جدا والله

من كل النواحي مميز , منسق ؛ محتوى مٌبسط مفهوم سهل ..

واحلى شى اناقة الموضوع ؛ طرح انيق جداً احسنت والله ..

خماسي واحلى تقييم .. لك كل الود .. :forgiveme:
تسسلم حبيبى ابو مشعل . . :127:
 
إنضم
13 مارس 2013
المشاركات
693
الإعجابات
602
النقاط
93
الإقامة
Ntdll.dll
رد: [ Flat Design | آلتصميم آلمسطح ] : تصميمـ Header .

بارك الله فيك على التصميم الاحترافي يا بطل :42:
 

DR-WoWo

مُراقب عام تطوير المواقع
طاقم الإدارة
إنضم
4 أغسطس 2011
المشاركات
11,483
الإعجابات
16,201
النقاط
113
الإقامة
مكة المكرمة
رد: [ Flat Design | آلتصميم آلمسطح ] : تصميمـ Header .

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

درس ابداااع

ما قول غير الله يحفظك ويزيدك من العلم :42:
 
إنضم
1 أبريل 2013
المشاركات
1,536
الإعجابات
1,510
النقاط
113
الإقامة
in my home
رد: [ Flat Design | آلتصميم آلمسطح ] : تصميمـ Header .

ماشاء الله عليك
تنسيق رائع + موضوع رائع = ابداع
:42:
 

X-CoOoDER

X-ᏨᏫᎠᎬᎡ
rankrankrankrankrank
إنضم
22 سبتمبر 2013
المشاركات
2,624
الإعجابات
2,501
النقاط
113
الإقامة
أ‡أ،أŒأ¤أ¦أˆ أ‡أ،أڑأ‘أˆأ
رد: [ Flat Design | آلتصميم آلمسطح ] : تصميمـ Header .

درس رائع من ناحيه التنسيق الموضوع والفكرة

أنا من متابعين دروسك

منتظر الدرس القادم بفارغ الصبر

لا تحرمنا من جديدك أخي الغالي
 

Đя.Aиσиyмσυs

.:: مُصمم جرافيكس، مَبرمج ::.
rankrankrank
إنضم
3 يونيو 2014
المشاركات
708
الإعجابات
964
النقاط
93
رد: [ Flat Design | آلتصميم آلمسطح ] : تصميمـ Header .

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

درس ابداااع

ما قول غير الله يحفظك ويزيدك من العلم :42:
شكرأ لك استاذ أحمد .:dv (5):
 

Đя.Aиσиyмσυs

.:: مُصمم جرافيكس، مَبرمج ::.
rankrankrank
إنضم
3 يونيو 2014
المشاركات
708
الإعجابات
964
النقاط
93
رد: [ Flat Design | آلتصميم آلمسطح ] : تصميمـ Header .

درس رائع من ناحيه التنسيق الموضوع والفكرة

أنا من متابعين دروسك

منتظر الدرس القادم بفارغ الصبر

لا تحرمنا من جديدك أخي الغالي
شكرآ لك يآ غألى ان شآء الله اقدم مايفيد . :dv (5):
 

kapos

Active DeveloPer
rankrankrank
إنضم
6 أكتوبر 2013
المشاركات
633
الإعجابات
421
النقاط
0
الإقامة
EgYpT
رد: [ Flat Design | آلتصميم آلمسطح ] : تصميمـ Header .

درس جميل و منتظر باقي الدروس :383838: ويا سلام لو عندك خلفيه عن ال css + html وتقدر تسوي دوره لتصميم قوالب الوردبريس :]d (2):
 

الأعضاء النشطين حاليآ الذين يشاهدون هذا الموضوع (1 عضو و 0 ضيف)

خيارات الاستايل

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

إرجاع خيارات الإستايل