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

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

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

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

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

This image has been resized. Click this bar to view the full image. The original image is sized 936x740 and weights 194KB.

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

This image has been resized. Click this bar to view the full image. The original image is sized 800x620 and weights 107KB.

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

This image has been resized. Click this bar to view the full image. The original image is sized 800x620 and weights 81KB.

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

This image has been resized. Click this bar to view the full image. The original image is sized 800x620 and weights 87KB.

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

This image has been resized. Click this bar to view the full image. The original image is sized 800x620 and weights 112KB.

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

This image has been resized. Click this bar to view the full image. The original image is sized 800x620 and weights 121KB.

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

This image has been resized. Click this bar to view the full image. The original image is sized 800x620 and weights 105KB.

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

This image has been resized. Click this bar to view the full image. The original image is sized 800x620 and weights 97KB.

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

This image has been resized. Click this bar to view the full image. The original image is sized 800x620 and weights 105KB.

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

اضغط هنا لمشاهدة الصوره بحجمها المصغر

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

This image has been resized. Click this bar to view the full image. The original image is sized 800x620 and weights 108KB.

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

This image has been resized. Click this bar to view the full image. The original image is sized 800x620 and weights 117KB.

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

This image has been resized. Click this bar to view the full image. The original image is sized 800x620 and weights 123KB.

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

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

This image has been resized. Click this bar to view the full image. The original image is sized 800x620 and weights 65KB.

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

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