التصنيفات
التصميم وعرض التصاميم

شرح درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور – فوتوشوب

شرح درس ط·ط±ظٹظ‚ط© طھطµظ…ظٹظ… ظˆط§ط¬ظ‡ط© ظ…ظˆظ‚ط¹ ط§ط­طھط±ط§ظپظٹط© ط¨ط§ظ„ظپظˆطھظˆط´ظˆط¨ بالصور

السلام عليكم و رحمة الله و بركاته
اقدم لكم درس لتصميم واجهة موقع احترافية و اتمنى ان يعجبكم و تستفيدون منه و اتمنى عند النقل وضع هذا الرابط فى بداية او نهاية الموضوع www.albasha.info و اتمنى عدم نزع الحقوق
فلنبدا الشرح:
اولاً نفتح الفوتوشوب ثم نختار المساحة كالتالى:
شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache64052534.
ثم نضغط على ctrl+shift+n فتظهر لنا الشاشة التالية و نضغط فيها على زر ok:
شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache20582233.
ثم نرسم مستطيل دائرى الاطراف باللون الازرق كما بالصورة:

شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif اضغط على الصورة لمشاهدتا بالحجم الطبيعي شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache3907180.g

ثم نضغط مرتين متتاليتين فى النقطة الموضحة بالصورة:
شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache76293853.
ستظهر لنا الشاشة التالية:

شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif اضغط على الصورة لمشاهدتا بالحجم الطبيعي شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache37040416.

فنختار منها كما بالصورة:

شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif اضغط على الصورة لمشاهدتا بالحجم الطبيعي شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache92317985.

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

شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif اضغط على الصورة لمشاهدتا بالحجم الطبيعي شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache2751021.g

و تظهر النتيجة التالية كما بالصورة:

شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif اضغط على الصورة لمشاهدتا بالحجم الطبيعي شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache6069410.g

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

شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif اضغط على الصورة لمشاهدتا بالحجم الطبيعي شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache3340259.g

فتظهر النتيجة التالية و نختار كما يلى و نضغط على ok:

شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif اضغط على الصورة لمشاهدتا بالحجم الطبيعي شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache32228208.

فتظهر النتيجة التالية :

شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif اضغط على الصورة لمشاهدتا بالحجم الطبيعي شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache44584591.

ثم نحركها بالاداة التالية:

شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif اضغط على الصورة لمشاهدتا بالحجم الطبيعي شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache22017833.

الى ان تصبح على النحو التالى:

شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif اضغط على الصورة لمشاهدتا بالحجم الطبيعي شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache91884998.

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

شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif اضغط على الصورة لمشاهدتا بالحجم الطبيعي شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache80050919.

ثم نضغط على ctrl+shift+n فتظهر لنا الشاشة التالية و نضغط فيها على ok كما بالصورة:
شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache12277237.
ثم نرسم باداة المستطيل الدائرى الاطراف مستطيل على يسار التصميم و نطبق عليه كل ما فعلناه من قبل فتكون النتيجة كالتالى:

شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif اضغط على الصورة لمشاهدتا بالحجم الطبيعي شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache97956812.

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

شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif اضغط على الصورة لمشاهدتا بالحجم الطبيعي شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache47249017.

فتظهر لنا الشاشة التالية و نختار منها كما بالصورة:

شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif اضغط على الصورة لمشاهدتا بالحجم الطبيعي شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache24452133.

فيصبح التصميم على هذا النحو:

شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif اضغط على الصورة لمشاهدتا بالحجم الطبيعي شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache14366536.

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

شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif اضغط على الصورة لمشاهدتا بالحجم الطبيعي شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache39626889.

ثم نرسم مستطيل اخر و نطبق عليه كل شىء فعلناه باستثناء استخدام shear فتظهر لنا النتيجة التالية:

شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif اضغط على الصورة لمشاهدتا بالحجم الطبيعي شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache74729939.

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

شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif اضغط على الصورة لمشاهدتا بالحجم الطبيعي شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache70528127.

ثم تكون النتيجة النهائية كالتالى:

شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif اضغط على الصورة لمشاهدتا بالحجم الطبيعي شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور arrow-down.gif شرح  درس طريقة تصميم واجهة موقع احترافية بالفوتوشوب بالصور image.cache78361418.

ثم نكتب ما نشاء على التصميم

لقراءة ردود و اجابات الأعضاء على هذا الموضوع اضغط هنا
سبحان الله و بحمده

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.