شرح تصميم واجهة موقع احترافية

عمر محسن

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

اليكم درس تصميم واجهة موقع احترافية

اولاً نقوم بتشغيل برنامج الفوتوشوب بمقاس 800 * 600 بيكسل

ثم نقوم بانشاء طبقة جديدة بالضغط على ctrl + shift + n كما بالصورة:



ثم نختار اداة rectangle tool كما بالصورة:



ثم نضغط على السهم الصغير الموجود بلوحة الاستايلات كما بالصورة:




ثم نضغط على buttons كما بالصورة:



ثمستظهر لنا نافذة و نضغط فيها على append كما بالصورة:



ثم ستظهر لنا استايلات جديدة فى لوحة الاستايلات و نحتار منها الاستايل الاحمر الذى سيمى ب red gil كما بالصورة:



ثم نقوم بانشاء طبقة جديدة بنفس الطريقة المذكورة فى بداية الشرح و نرسم باداة rectangle tool مستطيل كما بالصورة:



و نجعل لونه بالاستايل bright red bevel كما بالصورة:



ثم نضغط على filter و نختار من القائمة التى ستظهر لنا distort و من القائمة التى ستظهر بعد ذلك نختار ripple كما بالصورة:



و بعد ذلك نضغط على قائمة filter و نختار من القائمة التى ستظهر لنا distort ثم نخ تار من القائمة الاخرى التى ستظهر لنا wave كما بالصورة:



ثم نقوم بعمل طبقة جديدة بنفس الطريقة المذكورة فى اول الشرح و نرسم باداة rectangle tool مستطيل اخر بنفس الطريقة المذكورة فى اول الشرح و بعد ذلك نضغط على قائمة edit و نختار منه transform و نختار من القائمة الاخرى التى ستظهر لنا warp كما بالصورة:



ثم نغير شكلها بتحريك الدائرة الصغيرة الثانية من اليمين بالطريقة المطلوبة ليصبح الشكل كما ترى فى الصورة:






و نرسم مستطيل اخر بالطريقة المذكورة فى البداية و نقوم بعمل نفس التاثير warp على المستطيل
ثم نقوم بانشاء طبقة جديدة و نرسم مستطيل فى المنتصف و يوازى المستطيلان الموجودان على اليميمن و اليسار و نقوم بعمل التاثير warp عليه ثم نرسم مستطيل اخر بالاسفل تحت كل ما تم تصميمه
و نقوم بعمل التاثير ripple الموجود فى قائمة distort الموجودة بقائمة filter و ستكون النتيجة كالتالى:



ثم نقوم برسم الزرار التى تريدها كما تشاء باستخدام اداة rectangle tool و قم بالتعديل عليها و تلوينها كما تحب و بعد ذلك قم بكتابة الكلمات التى تريدها على تلك الازرار و عمل التاثيرات التى تريدها عليها

و صورة للناتج النهائى قبل وضع الازرار و التاثيرات المطلوبة:





انتهى الشرح و اعتذر على الاطالة و التقصير فى الشرح
كما اعتذر ايضاً على حجم الصور الكبير فهذا اول شرح تصميم واجهة قمت بعمله

واريد ان ارى تطبيقاتكم

مع تحيات عمر محسن شاكر

 

 

fajrnet

شرح جميل جدا اخوي عمر
بارك الله فيك يا الغالي

 

 

عمر محسن

اقتباس المشاركة الأصلية كتبت بواسطة fajrnet شرح جميل جدا اخوي عمر بارك الله فيك يا الغالي

شكراً على الرد و الاطراء الجميل و بارك الله فيك اخى الغالى

 

 

dr vb

شرح ولا أروع يالغالي

تسلم ايدك اخوي علي المجهود الرائع

 

 

me4h.com

مشكور يا مشرفن على الموضوع الشرح الرائع

 

 

عمر محسن

اقتباس المشاركة الأصلية كتبت بواسطة dr vb شرح ولا أروع يالغالي تسلم ايدك اخوي علي المجهود الرائع

شكراً لك على الاطراء الميل اخى الغالى و شكراً لك على الرد الله يسلمك وتشرفت بمرورك

اقتباس المشاركة الأصلية كتبت بواسطة ls4h.com مشكور يا مشرفن على الموضوع الشرح الرائع

العفو اخى الكريم و شكراً لك على الرد
تشرفت بمرورك

 

 

عمر محسن

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

اليكم درس تصميم واجهة موقع احترافية

اولاً نقوم بتشغيل برنامج الفوتوشوب بمقاس 800 * 600 بيكسل

ثم نقوم بانشاء طبقة جديدة بالضغط على ctrl + shift + n كما بالصورة:



ثم نختار اداة rectangle tool كما بالصورة:



ثم نضغط على السهم الصغير الموجود بلوحة الاستايلات كما بالصورة:




ثم نضغط على buttons كما بالصورة:



ثمستظهر لنا نافذة و نضغط فيها على append كما بالصورة:



ثم ستظهر لنا استايلات جديدة فى لوحة الاستايلات و نحتار منها الاستايل الاحمر الذى سيمى ب red gil كما بالصورة:



ثم نقوم بانشاء طبقة جديدة بنفس الطريقة المذكورة فى بداية الشرح و نرسم باداة rectangle tool مستطيل كما بالصورة:



و نجعل لونه بالاستايل bright red bevel كما بالصورة:



ثم نضغط على filter و نختار من القائمة التى ستظهر لنا distort و من القائمة التى ستظهر بعد ذلك نختار ripple كما بالصورة:



و بعد ذلك نضغط على قائمة filter و نختار من القائمة التى ستظهر لنا distort ثم نخ تار من القائمة الاخرى التى ستظهر لنا wave كما بالصورة:



ثم نقوم بعمل طبقة جديدة بنفس الطريقة المذكورة فى اول الشرح و نرسم باداة rectangle tool مستطيل اخر بنفس الطريقة المذكورة فى اول الشرح و بعد ذلك نضغط على قائمة edit و نختار منه transform و نختار من القائمة الاخرى التى ستظهر لنا warp كما بالصورة:



ثم نغير شكلها بتحريك الدائرة الصغيرة الثانية من اليمين بالطريقة المطلوبة ليصبح الشكل كما ترى فى الصورة:






و نرسم مستطيل اخر بالطريقة المذكورة فى البداية و نقوم بعمل نفس التاثير warp على المستطيل
ثم نقوم بانشاء طبقة جديدة و نرسم مستطيل فى المنتصف و يوازى المستطيلان الموجودان على اليميمن و اليسار و نقوم بعمل التاثير warp عليه ثم نرسم مستطيل اخر بالاسفل تحت كل ما تم تصميمه
و نقوم بعمل التاثير ripple الموجود فى قائمة distort الموجودة بقائمة filter و ستكون النتيجة كالتالى:



ثم نقوم برسم الزرار التى تريدها كما تشاء باستخدام اداة rectangle tool و قم بالتعديل عليها و تلوينها كما تحب و بعد ذلك قم بكتابة الكلمات التى تريدها على تلك الازرار و عمل التاثيرات التى تريدها عليها

و صورة للناتج النهائى قبل وضع الازرار و التاثيرات المطلوبة:





انتهى الشرح و اعتذر على الاطالة و التقصير فى الشرح
كما اعتذر ايضاً على حجم الصور الكبير فهذا اول شرح تصميم واجهة قمت بعمله

واريد ان ارى تطبيقاتكم

مع تحيات عمر محسن شاكر

 

 

soolygoy

مشكووووووووووور على الدرس الجميل دون