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

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

كيفكم يا اعضاء منتديات العاشق .,....؟

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

طبعاً الدرس مُترجم


نبداء على بركة الله


اولا نقوم بفتح عمل جديد عن طريق
File > New
او عن طريق الضغط علىCTRL+N
ونجعل القياسات 1200 ×768 Pixels







ملاحظه : قمنا بتصغير العينه ليسهل الشرح ^_^"

ونذهب ونكتب الذي نريده فوق
فمثلا نحن كتبنا هكذا







ليس بشرط ان تكتبو مثل الكتابه
اكتبو الذي توريدونه ^_^"

بعدها نقوم بذهاب الى
Blending Options>Outer Glow
ونضع هذا اللون F01452
ونجعل الأعدادت كالتالي







بعدها نذهب الى Blending Options>Gradient Overlay







واضبطو اعدادته كهذهِ







لتصبح النتيجه هكذا











ثم نأخذ الأداه(Rounded Rectangle Tool (U
ونرسم مربعا كهذا











ثم نذهب الى
Blending Options>Gradient Overlay
ونقوم بظبط الأعدادات كالتالي







ثم نظبط التدرج بهذه الألوان







ثم نذهب الى Blending Options>Stroke
ونظبط اعدادته كما يلي







ثم نعود مرةً اخرى الى التدرجات
ونظبطها كما يلي






لتصبح النتيجه حتى الأن هكذا







ثم نقوم بأخذ فرشاه
بحجم 300 PX







ثم نقوم بوضعها
بهذا الشكل








ثم نضع لير الفرشاه
تحت لير المستطيل
ونقوم بالظغط على CTRL+T
لتقصيره وتطويله
ليصبح هكذا







ثم نقوم بأخذ اداة( Rounded Rectangle Tool (U
وعمل مربع من فوق صغير
ونجعل الـFill 10%
والـ Opacity 5%
لتصبح النتيجه هكذا







قم بعدها نقوم برسم خط على تحت
بأدة( Line Tool (U
فمثلا بعد رسم الخط تصبح هكذا







ثم نذهب بعدها الى Blending Options>Gradient Overlay
واجعلو الأعدادات كهذهِ







ثم قمو بعمل هذا التدرج







البعض سوف يقول ان تصميم هاذا صعب
لاكن انا وفرت عليك التعب

لتحميل التدرج جاهز

اضغط هنا

اما اذا اردت ان تعلمه لوحدك
فهذا الأمر راجعاً اليك

بعد عمل هذه الخطوه وظبط الأعدادات
سوف تصبح النتيجه هكذا







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







ثم نأتي من داخل
المستطيل ونرسم
خط بأداة( Line Tool (U
لتصبح النتيجه هكذا







ثم نذهب الى Blending Options>Gradient Overlay
ونقوم بالظبط الأعدادات كالتالي







ونقوم بظبط اعدادات اللون كهذهِ







وسوف تصبح النتيجه هكذا







ثم نذهب مرا اخرى الى Blending Options>Gradient Overlay







ونقوم بتغير التدرج
كالتالي







لتصبح النتيجه هكذا







ثم نكرر العمليه
على عدد المربعات
التي تريد عمليها
لتصبح النتيجه هكذا







ثم نقوم كتابة مانريد
لتصبح النتيجه هكذا






ثم نقوم بأعدادات
على كل كلمه كتبتها في هذا المربع
وهذه الأعدادت مرا اخرى لتذكير ^^"

نقوم بذهاب الى Blending Options>Outer Glow
ونضع هذا الون F01452
ونجعل الأعدادات كالتالي







بعدها نذهب الى Blending Options>Gradient Overlay







واضبطو اعدادات التدرج هكذا







وقومو بهذه الأعدادات على كل كلمه وضعنها
لتصبح النتيجه هكذا






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







ثم نستخدم اداة( Rectangle Tool (U

ونملؤها بالون الأسود

لنسهل عليك هذه الخطوه لقد قمت بعمل كل هذا فقط معاليك
الا سحب هذه الصوره الا العمل ^_^"






بعدها نقوم
برسم دأره لتصبح بهذا الشكل







ثم نذهب الى Blending Options>Gradient Overlay
ونظبط اعداداته كالتالي






ونجعل التدرج كما يلي







ثم نذهب الى Blending Options>Stroke
ونظبط اعداداته كما يلي






ثم نعود مرا اخرى الا التدرجات
ونظبطه بهذا التدرج







ومن ثم سوف تصبح النتيجه هكذا






ثم نرسم مثلثاً داخل الدأره
بأداة الـ (Pen Tool (P
ليصبح الشكل هكذا







ثم نقوم بضبط اعدادت المثلث
بذهاب الى Blending Options>Gradient Overlay
ونجعل اللأعدادات كالتالي







ونجعل التدرج كما يلي







بعدها سوف تصبح النتيجه هكذا







ثم نذهب مرا اخرى الى Blending Options>Gradient Overlay
ونجعل الأعدادت هكذا






ثم نذهب الى Blending Options>Stroke
ونقوم بجعل الأعدادت كما يلي





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







وبعدها نضيف كتابه
في الوسط
فمثلا كهذهِ







ونقوم بأعدادات الكلمه
كما ذكرنا سابقا اعدادتهم
لتصبح هكذا







بعدها نقوم برسم خط
على الجانب الأخر بأدة( Line Tool (U
بعد رسمه سوف تصبح النتيجه هكذا







ومن ثم نذهب لـ Blending Options>Gradient Overlay
ونقوم بجعل الأعدادت كما يلي







ومن ثم
نقوم بعمل التدرج التالي







بعد عمل التدرج سوف يصبح
شكله هكذا ..!







ثم نقوم بكتابة اي شي في
فمثلا هكذا







ثم على تلك الكلمه نقوم
بأعدادات كما ذكرنها سابقا
لتصبح هكذا







ومن ثم نكتب مانريده في هذا الجزء الفارغ
فمثلا نحن قمنا بكاتبة هذا الكلام










في الختام اتمناء ان الدرس نال اعجاب الجميع ,

وترجمة الدرس تكون مفهومة لدى الجميع ,

واذا كانت هُناك اخطاء الرجاء ابلاغي ,

انتظر

تطبيقتكم
+
ردودكم

ولاتنسى التقيم اذا اعجبك الموضوع ,

تحياتي لكم ,

الزعيم كيمو