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

[عمر محسن]

السلام عليكم و رحمة الله و بركاته
اقدم لكم درس لتصميم واجهة موقع احترافية و اتمنى ان يعجبكم و تستفيدون منه و اتمنى عند النقل وضع هذا الرابط فى بداية او نهاية الموضوع www.albasha.info و اتمنى عدم نزع الحقوق
فلنبدا الشرح:
اولاً نفتح الفوتوشوب ثم نختار المساحة كالتالى:

ثم نضغط على ctrl+shift+n فتظهر لنا الشاشة التالية و نضغط فيها على زر ok:

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

ثم نضغط مرتين متتاليتين فى النقطة الموضحة بالصورة:

ستظهر لنا الشاشة التالية:

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

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

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

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

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

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

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

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

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

ثم نضغط على ctrl+shift+n فتظهر لنا الشاشة التالية و نضغط فيها على ok كما بالصورة:

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

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

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

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

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

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

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

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

ثم نكتب ما نشاء على التصميم
و بهذا ينتهى الدرس و اتمنى ان ارى تطبيقاتكم
www.albasha.info

[Remano]

شكرا لك
ولكن عندما تريد عمل أنحنائات قم بأستعمال اداة ال Path ولا تستعمل الفلاتر اطلاقا الا في اشياء بسيطة
لأن الفلاتر تستعمل بالغالب للتعديل على الصور وليس للويب وتصميمه

فلتر zigzag يستعمل لعمل تشويه لمنظر معين
تستطيع استعماله كأنعكاس للماء مثلا

بالتوفيق...

[عمر محسن]

شكرا لك
ولكن عندما تريد عمل أنحنائات قم بأستعمال اداة ال Path ولا تستعمل الفلاتر اطلاقا الا في اشياء بسيطة
لأن الفلاتر تستعمل بالغالب للتعديل على الصور وليس للويب وتصميمه

فلتر zigzag يستعمل لعمل تشويه لمنظر معين
تستطيع استعماله كأنعكاس للماء مثلا

بالتوفيق...

العفو اخى الكريم
ليس ضرورياً ان استخدم اداة path
وشكراً لك على الصنائح الجميلة و الرد الجميل و المفيد

[dewan159]

السلام عليكم .. شئ جميل , رائع , متتتميييززز .. وبما انك تريد ان ترى تطبيقاتنا على درسك المتميز , ما رايك فى هذا التطبيق ! ايصلح واجهة لموقع ؟!

اخى ارجو ان لا تغضب منى او تثور ولكن نصيحة منى توقف عن ما تحاول اثباته للجميع مهما كان هذا الشئ , هذا منتدى وليس كأى منتدى ! , حتى الان حوالى خمسة مواضيع تقوم بعرض تصاميمك بها على الجميع ثم ينتقدك الجميع وينصحوك فتغضب وتقول انهم لا يساعدوك بهذا النقد , ارجو ان تتوقف عن عرض تصاميمك على الجميع و لا تؤخر عرض مواضيع اخرى اهم واقيم بكثير , ,, النصيحة مرة اخرى تابع دروس تعليمية جديدة غير مستهلكة ولا تحسب انك احترفت التصميم اذا كان ناتج عملك كالذى بالاعلى , ولا تخبرنى بأنك مبتدئ , فإذا كنت لماذا تطرح الدروس على الجميع وتنظر ان تعلق على تطبيقاتهم ....
اخى الكريم ارجو ان لا اكون قد جرحت شعورك وإن فعلت فانا متاسف ولكن هذه الكلمات كادت تقتلنى لولا ان اخرجتها , وارجوك لا تغضب منى ولا تغضب من الجميع حين يحاولوا مساعدتك .
واعتذر من اسلوبى بأول الرد
وهذا التصميم كان اول تصميم لى منذ سنه او اكثر عندما كنت اتابع الدروس الى تتابعها ولكن للاسف اخذت وقت طويل حتى استطعت ان اتغلب على هذا النمط لانى لم اجد من ينصحنى !
ولدى نصيحة اخرى : تخلى عن الكلمات " احترافيه , مصمم , مبدع , تصاميم احترافية " ولو حتى لفترة قصيرة حتى تجيد التصميم لكى لا يسخر منك احد .
---------------------------------------------------------------------
ارجو ان اكون افدتك وهذه والله نيتى واعلم ان هذا الرد على لسان الكثيرون ولكن يفضلون تشجيعك بالكلمات المعهودة , بالتوفيق .

[مبرمج قادم]

ما شاء الله .. شروح وافي اخوي عمر ... ربي يوفقك

لا تحرمنا من مثل هالمواضيع المميزة ...الى الامام اخي وبالتوفيق

[أحمد عبدالمنعم]

dewan159 : يسلم بقك

ولكن مازعجني وأنا أقرأ ردك. هو كثرة الإعتذارات التى فيه وأسلوب جبر الخواطر وتقديمك له على إستحياء جدا، خد عندك..
أرجو الا تغضب، وأرجو الا تثور، وأرجو الا أكون جرحت شعورك، وأنا متأسف وأعتذر من أسلوبي وأرجوووووك سامحني "وحيات أبوك"

فيه إيه بس!!

إن قرر الأخ الغضب وإعتبرنا حاقدين وحاسدين لإبداعة المنقطع النظير (فهو حر) في غضبه وهنيئاً له بتصاميمه الإحترافية الرائعة، أنت تقول رأيك (وأنت حر) فيه أيضا، أخذ به أو لم يأخذ، ولكن للأسف الأخ عمر يبدوا أنه لا يتعلم من النصائح السابقة ولا يعترف بحقيقة تصاميمة المُرة المؤذية للعين والبعيدة كل البعد عن الجمال، بل يواصل في تقديمها كي يعاقبنا نحن بها!! ويحتاج الى ردود مثل تصاميمة بعيداً عن كلمات التوفيق والتطبيل والنصائح الخجولة.

التناقض واضح جدا في الردود لمتابعين مواضيع الاخ عمر الإحترافية الرائعه!

[عمر محسن]

السلام عليكم .. شئ جميل , رائع , متتتميييززز .. وبما انك تريد ان ترى تطبيقاتنا على درسك المتميز , ما رايك فى هذا التطبيق ! ايصلح واجهة لموقع ؟!

اخى ارجو ان لا تغضب منى او تثور ولكن نصيحة منى توقف عن ما تحاول اثباته للجميع مهما كان هذا الشئ , هذا منتدى وليس كأى منتدى ! , حتى الان حوالى خمسة مواضيع تقوم بعرض تصاميمك بها على الجميع ثم ينتقدك الجميع وينصحوك فتغضب وتقول انهم لا يساعدوك بهذا النقد , ارجو ان تتوقف عن عرض تصاميمك على الجميع و لا تؤخر عرض مواضيع اخرى اهم واقيم بكثير , ,, النصيحة مرة اخرى تابع دروس تعليمية جديدة غير مستهلكة ولا تحسب انك احترفت التصميم اذا كان ناتج عملك كالذى بالاعلى , ولا تخبرنى بأنك مبتدئ , فإذا كنت لماذا تطرح الدروس على الجميع وتنظر ان تعلق على تطبيقاتهم ....
اخى الكريم ارجو ان لا اكون قد جرحت شعورك وإن فعلت فانا متاسف ولكن هذه الكلمات كادت تقتلنى لولا ان اخرجتها , وارجوك لا تغضب منى ولا تغضب من الجميع حين يحاولوا مساعدتك .
واعتذر من اسلوبى بأول الرد
وهذا التصميم كان اول تصميم لى منذ سنه او اكثر عندما كنت اتابع الدروس الى تتابعها ولكن للاسف اخذت وقت طويل حتى استطعت ان اتغلب على هذا النمط لانى لم اجد من ينصحنى !
ولدى نصيحة اخرى : تخلى عن الكلمات " احترافيه , مصمم , مبدع , تصاميم احترافية " ولو حتى لفترة قصيرة حتى تجيد التصميم لكى لا يسخر منك احد .
---------------------------------------------------------------------
ارجو ان اكون افدتك وهذه والله نيتى واعلم ان هذا الرد على لسان الكثيرون ولكن يفضلون تشجيعك بالكلمات المعهودة , بالتوفيق .

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

[dewan159]

اخى ca2oom
والله كل ما اردته هو اهداء النصيحة ولم اتوقع ان احد سينتقدنى على محاولتى واسلوبى ؟! , ولكن اردت ايضا ان لا اضر احد بكلامى ولا اجد حرج فى الاعتزار لاحد ولكنى حاولت معمالته بطريقة مختلفة فلا انافقه او اقسو عليه , ولكن سبحان الله حتى هذا لم يجدى نفعا وانظروا الى الرد بالاعلى , فالاخ عمر ماذال مصر على انه محترف وان لا احد بمستواه الاحترافى " كما انه ليس مبتدئ ... ؟! بل هو بالعقل بمحترف !! واننا قسونا عليه واستهذانا به وهو يحاول مساعدتنا بدروسه !! ".
----------------------------
اخى عمر
اريد ان اعرف كيف تفهم الامور هل ترى ان بردى استهذاء بك بعد كل ذلك , انا اقسمت بالله انى اريد اهداء النصيحة فقط والله على ما اقوله شهيد فلم ارد بسوة ولم انافقك ولكن كانت محاولة منى لمساعدتك لس إلا , انت كل ما تريده هو ان تجد رد يقول لك " عمل جميل , رائع " .. فإذا كان خلاف ذلك اصبح رد عدائى وغير بناء !!! , لماذا لا تقيم عملك بنفسك على الاقل الخطوة الاولى هى الاعتراف بانك مبتدئ وهذه هى الحقيقة . وليس ان تجد احدا يقول لك انا اعمالك جميله يعنى انك محترف فلكل واحد منا نظرته ومستواه !!

[الغريم]

درس مفيد .
شكرا على ما قدمت
الغريم

[عمر محسن]

dewan159 : يسلم بقك

ولكن مازعجني وأنا أقرأ ردك. هو كثرة الإعتذارات التى فيه وأسلوب جبر الخواطر وتقديمك له على إستحياء جدا، خد عندك..
أرجو الا تغضب، وأرجو الا تثور، وأرجو الا أكون جرحت شعورك، وأنا متأسف وأعتذر من أسلوبي وأرجوووووك سامحني "وحيات أبوك"

فيه إيه بس!!

إن قرر الأخ الغضب وإعتبرنا حاقدين وحاسدين لإبداعة المنقطع النظير (فهو حر) في غضبه وهنيئاً له بتصاميمه الإحترافية الرائعة، أنت تقول رأيك (وأنت حر) فيه أيضا، أخذ به أو لم يأخذ، ولكن للأسف الأخ عمر يبدوا أنه لا يتعلم من النصائح السابقة ولا يعترف بحقيقة تصاميمة المُرة المؤذية للعين والبعيدة كل البعد عن الجمال، بل يواصل في تقديمها كي يعاقبنا نحن بها!! ويحتاج الى ردود مثل تصاميمة بعيداً عن كلمات التوفيق والتطبيل والنصائح الخجولة.

التناقض واضح جدا في الردود لمتابعين مواضيع الاخ عمر الإحترافية الرائعه!

ما الذى تريده اذن ان يهيننى؟
واجهاتى ليست مؤذية للعين
ادبى يمنعنى من الرد عليك
الله يسامحك

[عمر محسن]

درس مفيد .
شكرا على ما قدمت
الغريم

العفو اخى الكريم

[عمر محسن]

اخى ca2oom
والله كل ما اردته هو اهداء النصيحة ولم اتوقع ان احد سينتقدنى على محاولتى واسلوبى ؟! , ولكن اردت ايضا ان لا اضر احد بكلامى ولا اجد حرج فى الاعتزار لاحد ولكنى حاولت معمالته بطريقة مختلفة فلا انافقه او اقسو عليه , ولكن سبحان الله حتى هذا لم يجدى نفعا وانظروا الى الرد بالاعلى , فالاخ عمر ماذال مصر على انه محترف وان لا احد بمستواه الاحترافى " كما انه ليس مبتدئ ... ؟! بل هو بالعقل بمحترف !! واننا قسونا عليه واستهذانا به وهو يحاول مساعدتنا بدروسه !! ".
----------------------------
اخى عمر
اريد ان اعرف كيف تفهم الامور هل ترى ان بردى استهذاء بك بعد كل ذلك , انا اقسمت بالله انى اريد اهداء النصيحة فقط والله على ما اقوله شهيد فلم ارد بسوة ولم انافقك ولكن كانت محاولة منى لمساعدتك لس إلا , انت كل ما تريده هو ان تجد رد يقول لك " عمل جميل , رائع " .. فإذا كان خلاف ذلك اصبح رد عدائى وغير بناء !!! , لماذا لا تقيم عملك بنفسك على الاقل الخطوة الاولى هى الاعتراف بانك مبتدئ وهذه هى الحقيقة . وليس ان تجد احدا يقول لك انا اعمالك جميله يعنى انك محترف فلكل واحد منا نظرته ومستواه !!

لست مبتدىء يا مبتدىء الله يسامحك

[محمد عبد الشكور]

السلام عليكم,

أخي الكريم عمر محسن,
جهد تشكر عليه لتخصيص وقتك لعمل لدرس مثل هذا..

لو افترضت اني بحاجة لمصمم لتصميم موقعي الجديد, هل يمكن ان ارى اعمالك ؟
و هل تستخدم XHTML و CSS 3 ?
و اتمنى ان تعرضها على العامة هنا في نفس المكان
لا استخدم الماسنجر او اي وسيلة اتصال اخرى.. فقط هنا في هذا الموضوع ..

و ما رأيك بتصميمات المواقع الآتية: CSB - Noe Design Studio ?
اريد ان اعرف رأيك و هل تستطيع ان تصمم ما يتخطى هذه المواقع كونك مصمم محترف* ؟

شكراً مقدماً
*رحم الله امرئ عرف قدر نفسه

أرق التحيات,
أخوك محمد عبد الشكور

[عمر محسن]

السلام عليكم,

أخي الكريم عمر محسن,
جهد تشكر عليه لتخصيص وقتك لعمل لدرس مثل هذا..

لو افترضت اني بحاجة لمصمم لتصميم موقعي الجديد, هل يمكن ان ارى اعمالك ؟
و هل تستخدم XHTML و CSS 3 ?
و اتمنى ان تعرضها على العامة هنا في نفس المكان
لا استخدم الماسنجر او اي وسيلة اتصال اخرى.. فقط هنا في هذا الموضوع ..

و ما رأيك بتصميمات المواقع الآتية: CSB - Noe Design Studio ?
اريد ان اعرف رأيك و هل تستطيع ان تصمم ما يتخطى هذه المواقع كونك مصمم محترف* ؟

شكراً مقدماً
*رحم الله امرئ عرف قدر نفسه

أرق التحيات,
أخوك محمد عبد الشكور

العفو
فى الواقع انا لم اقل انى محترف و لكن قلت اننى اضع بعض اللمسات الاحترافية
ولا اجيد ال xhtml او css