شرح كامل لتصميم واجهة موقع الان يمكنك ان تصبح مصمم للواجهات

[خالد صبح]

شرح كامل لتصميم واجهة موقع الان يمكنك ان تصبح مصمم للواجهات

نفتح برنامج الفوتوشوب الى اشتغل عليه الاصدار 8 طبعا ما يختلف عن 9 كثير او 7 ^_^ كلو يمشي

نفتح عمل جديد بمقاسات 777×800
800 <<<<<< غيرها حسب رأيتك لتصميمك
777 <<<<<< عرض الصفحه خليها كده لانها افضل مقاسات للموقع
شاهد الصوره 1


بفتح مجلد جديد بجوار قائمة الليرات ونسميه (الرئسيه) عشان يكون عملنا مرتب ونقدر نوصل للنبغاه بشكل اسرع


نفعل المجلد بضغط عليه مره وحده ونفتح لير جديد

بعد ما نضيف لير جديد ونفعله بالضغط على اللير الجديد الى طلع معاك نختار اداة التعبئه ونختار اللون المطلوب ونظرب على العمل مره وحده عشان يتلون الصفحه كامله ^_^


الحين نروح للأشكال الجاهزه في الفوتوشوب ونختار الشكل المربع

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

شوفو الصوره راح توضح لكم الشكل الجاهز + الاشكال ضافيه في اعلى الصوره


انا اخترت الشكل الجاهز مربع اضغط CTRL+ط عشان نسوي جدول للعمل

سوي مجلد جديد وسميه ( الهيدر) ثم فعله بالضغط مره واحده عليه

الان ارسم الشكل الجاهز الى انتا اخترتو بمقدار عشره مربعات صغيره شوفو الصوره توضح لكم اكثر
]

شايفن الارقم من 1 الى 10 هيا ارقام وهميه عشان التوضيح فقط ^_^

طيب الحين فعل الشكل الى سويتو بضغط عليه مره واحده ثم اختار اذاة الممحاة واضرب مره واحده فقط على الشكل راح تطلع لكم ايقونه تطلب منك الموافقه او الرفض اضغط على كلمة موافق

راح تشوف ان الشكل الجاهز اصبح مثل الصوره يعني نقدر نشتغل عليه بحريه الان اضغط مثل الصوره واتبع باقي الصور بترتيب


ثم



طبعا القيمه 50 <<<<ممكن تغيرها حسب رغبتك

وهدا الشكل النهائي


يلى تابعو معاي بترتيب الصور
اولا اضغط على حرف f من صندوق العمل


ثم



لا تضغطو موافق الين اقلكم ^_^

ثم



ثم



ثم خطوت تحديد الهيدر


الحين اضغط موافق ^_^ <<< مشوار


كده خلصنا من التعديلات على الهيدر باقي الصور ^_^

نفتح الصوره المطلوبه حاولو تكون الصوره بصيغة jpg




طيب لازلنا في مجلد الهيدر صح يعني كل شي راح يكون داخل هدا المجلد

نفتح الصوره المطلوبه شاهد طريقة نقل الصوره اختر ادات السحب

وقم بسحب الصوره بالماوس على الطرف الثاني



ادا ما انسحبت معاك اما الصوره في صورة قفل اضغط عليها مرتين واضغط موافق من الايقونه الى راح تطلع لك ^_^

واسحبوها مره ثاني راح تنسحب معاكم ^_^

طيب بعد السحب راح تصير الصوره في الجهى الاخرى داخل مجلد الهيدر في لير لوحدو طبعا
اضغط على لير الصوره ونضغط ctrl+t
نصغر الصوره بالشكل الى تشوفه مناسب لك شوف الصوره كيف


بعد التعديل بشكل الى شايفه يناسبك اضغط ctrl+g

بتوفيق



راح يصير عندك بهدا الشكل



نختار من الصوره luminosity او اي شي تشوفه يناسب التصميم تبعك ^_^

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

راح تكون النتيجه



وكده خلصنا من الهيدر نقدر نسوي اضافات حسب رأيتكم يعني ممكن نرجع نختار شكل جاهز ونضيفه على الهيدر ونكرر الى سبق ^_^
يعني شوفو اش سويت انا من الاشكال الجهازه






بسم الله الرحمن الرحيم

تصميم الفوتر + الرئسيه الى ما ملنا فيها شي لحد الان

طيب نفتح العمل الى سبق على برنامج الفوتوشوب

ونسمي الله ونبداء :

فيما سبق دكرنا انو عندنا مجلدين مجلد الرئسيه ومجلد الهيدر

افتح مجلد الرئسيه لان راح نشتغل عليها اول

نفتح عمل جديد file>>>>new

بمقاسات 5×5 خلفيه شفافه مثل الصوره



الان اختار اداة التكبير وكبر العمل الى اكبر حد ممكن شوف الصوره


نختار اداة الفرشاة 1 بكسل


الان نضغط على وسط العمل جديد ونصنع نقطه او خط من الزاويه للزاويه كل واحد حسب رأيته المهم ... باللون الى يناسبنا يكون لون اغمق او افتح من لون الخلفيه ^_^

انا اخترت اللون الابيض

بعد ما نرسم النقطه او الخط من الزاويه الى الزاويه نحولها الى باترن والطريقه



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

طيب الحين نقفل العمل الى سوينا فيه النقطه لانو ما راح نحتاجها خلاص

الان احنا فتحنا مجلد الرئسيه صح ^_^ نضغط على الخلفيه الى فيها

طيب الان كل الى نعمله نضيف الباترن الى عملناه
الطريقة شوف الصوره او للإختصار shift+f5



الان راح تطلع لنا ايقونة الباترن نختار الباترن الى عملناه ونخلي الشفافيه حسب رأيتنا يعني لا تحاول تخلي الشفافيه فوق 60 وأقل من 40
وانا خليتها 50 الوسط ^_^


اضغط موافق راح تشوف الباترن انتشر على كامل الصفحه الرئسيه
طيب الحين راح نترك الرئسيه ونرجع لها بعدين بشتغل على الفوتر الان

نفتح مجلد جديد مثل ما شرحتها سابقاً

ونسميها فولتر
نسحب المجلد المجلد راح يكوت اعلى الملجد تبع الرئسيه
الان نختار شكل الدائره من الاشكال الجاهزه
ونرسم دائر داخل مجلد الفوتر في الوسط السفلي للواجهى شاهد الصوره



الان اجلب صوره واسحبها على الواجهى مثل درسنا الاول ثم صغرها وأونزنها على الشكل الى عملنها ثم نطبق عليها الماسك ctrl+g
فوق الدائره
ملاحظه : لدمج شكلين جاهزه ارسم الشكل اولا ثم اختار اداة الممحاه واضغط مره وحده فوق العمل وأضغط موافق من ايقونه إلى راح تضهر لك ^_^ وكرر نفس الشي على الشكل الجاهز الاخر ثم ادمجهم عن طريق ctrl+e

شوفو النتيجه عندي


عشان تكون شكل واحد وعند عمل ماسك على الصوره

الان نرسم مستطيل من الاشكال الجهاز تنسحبها الى اسفل لير الدائره
عشان تكون خلف الدائره





لسه ما حطينا الاكشن على الدائره راح نرجع لها بعدين عشان نشوف المناسب لها بعد ما نخلص الفوتر ^_^

الان من قائمة الفلاتر نختار الاتي



الان حط نفس القيم الى في الصوره
كل واحد على حسب رأيته برضو ^_^


الان نظع الاكشن للمستطيل ^_^


ثم



كده خلصنا من الاكشن الان نجيب الاضافات الى هيا الصور حط الصور الى تبيها وسوي لها ماسك ctrl+g

بعد ما نخلص منها خلاص نرجع نضغط على لير الدائره ^_^ ونبداء نكرر نفس الى عملناه فوق على المستطيل مع مراعات انك تقدر تغير لون الحد للدائره حسب رئيتك
وهدا الشكل النهائي للفولتر



وكده خلصنا من الفولتر تقدر تكتب حقوقك او تسوي لك شعار خاص فيك على نفس الفوتر

طيب بس هدي مو نهاية شغلنا لسه باقي الرئسيه ^_^

نرجع لملف الرئسيه ونفتح المجلد ونرسم مستطيل مث
ل الصوره


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



وهنا ما راح اقيدكم برقم معين كل واحد كيفه راح يشوف الشكل قدامه وهو يغير في القيم

يعني كل واحد له ذوق في طريقة صنع شكل وسط الصفحه

الان نضيف لها شوية بروز + برواز
شوف الصوره واتبع معاي




ثم
موافق

الحين اترك لكم الابداع الذاتي

احنا عرفنا كيف نسوي باترن الحين كل واد يسوي شكل جديد حسب رغبته والى ما يبغى كيفه
وكمان تقدر تضيف شكل جديد فوق الشكل الوسط يعني تقدر تصنع اكثر من شكل حسب رغبتك بس كل شكل حاول يكون لونه افتح او اغمق من السابق عشان تبان معاك اهم شي حط لها حد عشان تعرف انتا اي طبقه تحتاج وقت التعديل ^_^

وكده خلصنا الفوتر + الرئسيه وبقى لنا القوائم والمساحات الاعلانيه + فتحات الشات ^_^
يعني الدرس الجاي راح يكون فيه شوية دقه حاولو تستفيدو من هدي الدرسين في صناعنة قواقوائم قبل درسنا عشان ترتاح وقت الدرس ^_^



بسم الله نبداء :

في درسنا السابق انهينا عمل الفوتر + الرئسيه

تبقى لنا الاعمده + القوائم + الاعلانات + فتحات الشات ^_^

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

نختار اي اداة لرسم الاعمده اما الباث للرسم الحر او القوالب الجاهزه او عن طريق الفرش لو حبيت يعني الشي اختياري انا اختارت ادات القوالب الجاهزه ....
واخترت المستطيل ...
نرسم الشكل مثل الصوره ...



ندبل اللير بضغط على ctrl+j
نسحب بأدات التحريك الحر بجوار اداة التحديد ونسحب العمود الجديد الثاني الى الجهى الاخرى وعشان توزن العمودين على التصميم اضغط
على ctrl+حرف (ط)لعمل الشبكه ....اوزن العمودين بعدد المربعات والحين نطبق على العمودين
الفلتر مثل الصوره



نحط نفس القيم الى في الصوره



الان نضع الاكشن الى يناسبنا مثل ما تعلمنا في الدرس السابق لان الاغلب يستخدمون الباترن في الاعمده كل واحد له
ذوق وفي البعض يكتفي باللون وإضافة الحدود فقط
هدا الاكشن الى وضعته انا






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



حط الباترن الى يعجبك بس خلي الشفافيه من 10 الى 50 حسب رغبتك لا تزيدها اكثر من 50 عشان لا تكون واضحه على العمود ^_^

وكده خلصنا الاعمده راح نبداء في القوائم نفتح مجلد جديد ونكتب عليه القوائم لاكن هدي المره راح نخلي المجلد هدا في الاعلى عشان يكون فوق التصميم طريقة الوضع اضغط على اخر لير عندك في الاعلى ثم اضغط على مجلد جديد راح يجيك المجلد الجديد فوق المجلد الى انت ضغط عليه

القوائم مافيها اي شي من الصعوبه كلها مربع وداخله مستطيلات <<< عشان محد يخاف ههههههه

بس الكلام في الاكشن وطريقة الاذواق
راح نشرحها بشكل مفصل

نختار من القوالب الجاهزه اي شكل نرغب انو يكون شكل خلفية القوائم
الدائري او المستطيل او اي شكل اضافي عندك تقدرو تزورو قسم ادوات الفتوشوب راح تلقو قوالب الين الفتوشوب يقلكم الرحمه ^_^

طيب في بعضكم يتقن اداة الباث يقدر يستخدمها في الرسم الحر

لان احنا راح نرسم شكل واحد مع القوائم بعد كده راح نسوي نسخ للمجلد كامل بدل ما كل شوي نعيد والشي الثاني للدقه في التوزن القوائم وعدم اختلال المقاسات...

طيب نرسم الشكل المطلوب في المكان الى يبغاه بس قبل ترسم الشكل اضرب حساب شي مهم الى هوا كم زر تحتاج في كل قائمه + كم قائمه تحتاج يعني ممكن نعمل قائمتين في اليمين واليسار ونقسم عدد الازره على القائمتين ....
وممكن نرسم اربعة قوائم ونقسم عدد الازره على الاربع قوائم كل واحد حسب رغبته وحسب رأيته للتصميم الى سواه او الى يبغى يستفيد منه بعد انتهاء الدوره ....
انا راح اعمل قائمتين يمنى ويسرا<< مو الممثله المصريه اقصد يعني يسار ^_^
تأكد انك واضع الجدول او الشبكه الوهميه على التصميم عشان المسافات في اطراف التصميم

الحين ارسم الشكل المطلوب في احد الجهتين وضع الاكشن المناسب لك
ثم دبل اللير بضغط على ctrl+j

ثم اضغط على shift واسحب اللير الجديد الى الجهى الاخرى عشان يكون على نفس المستوى والارتفاع بدون اي اختلال وانت معلق على shift حاول توزنها عند الاعمده بعدد المربعات الصغيره في في الشبكه الوهميه انا حددتها لكم بالاحمر عشان تعرفو كيف التصميم يكون موزون بدقه ...



ادا كان في عدت قوالب في التصميم الخلفية الازرار مو مشكله نسوي مجلد جديد للأزارير عشان ما نتلخبط
نرسم شكل الزر بأي قالب ونحط عليه الاكشن حسب رغبتك ...
نرسم دوائر او مستطيلات طبعا ما اقدر اقيدكم بأرقام الاكشن لان كل واحد مثل ما اتفقنا يسوي شي خاص فيه لا يحاول يطبق الدوره مثل ما هيا لانو ما راح يحس بطعم الشي الى عمله الانجاز لمن تعمل شي جديد لنفسك يعني خدني انا كمرشد فقط ^_^
حسب ما سويت في الازرار الى عندي هدي الاكشن الى عملتها







الان ندبل لير الازرار ctrl+j

ونحرك الازرار الى الاسفل عن طريق الكيبورد اضغط على shift+ السهم الى الاسفل

ثم دبل اللير الجديد وكرر السابق وهكذا مع جميع الازارير

اما القائمه الثانيه ندبل لير الازرار ثم shift ونسحب الزر الى القائمه الاخرى ونعيد ما فعلناه مع القائمه الاولى ^_^ او تسوي copy للمجلد كامل تبع الازرار وتسحب الى الجهى الاخرى

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



طيب يا أخوان خلونا نسوي اعلان وليكن المقاس 150×60
نفتح مجلد الرئسيه نسوي عمل جديد <<عمل مو لير
بالمقاسات الى قلتها 150×60 او حسب رغبتكم
نصبغ البنر بأي لون نريد كبدايه فقط ثم نسحب العمل الجديد على الوجهى
البنر على طول راح يجيك في الرئسيه خليه اول واحد فوق عان يكون فوق الاقوالب والاشياء الى عملناها

طيب الحين مخمخ في البنر الصغير هدا بكيفك ^_^ من اكشن
ثم اجلب الصوره المطلوبه وطبق عليها نفس الى سويته على الهيدر والفوتر يعني ماسك ^_^

نسوي فتحت الشات بس نخليها كبيره شويه عشان كود الجافا تبع الشات
يعني تقدر تقول 300 ×250

والله انا ما اعرف المقاس بتحديد لاكن راح نخلي الملف الاصلي للتعديل
لاني مو مبرمج اكواد ^_^
الحين نسوي مجلد جديد خاص بكل البيانات يعني من مسميات للأزرار و اسم الموقع والكتابه على الاعلان والحقوق
وراح تلقي شغلك مرتب اول شي ثاني شي ما انتهينا
هدا شكل العمل النهائي






ننقل العمل على الايمج ردي والغرض من النقل :
1- تحريك الاعلان
2- التقطيع
اضغط على الايقونه الى في الصوره



بعد ما يتنقل العمل على الايمج ردي نسوي فريم جديد مثل الصوره



بعد ما اضفنا الفرايم الجديد نروح لقائمة الليرات نزيل صورة العين المتواجده على الاشياء الى نبغاها متحركه الان نرجع نضغط على الفرايم رقم واحد عشان نبداء القص .

الان نختار اداة القص مثل الصوره .



الان نبداء عمليت قص الصوره بشكل مرتب نبداء بالهيدر وننتهي بالفولتر بشرط ...
عند الازاريز نقص الازرار بشكل كامل كل زر لوحده عشان نقدر نحط الروابط عليها ادا كنت تبغى الهيدر فلاشي قص الهيدر كامل او حسب الجزء الى تبغى تعمله فلاش بالكامل يعني خليها قطعة وحده عشان تنزلها الفلاش وتسوي الى تبغاه عليها ...

شاهد عمليت القص ...



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





الان نفتح برنامج الفرنت بيج Microsoft Office FrontPage 2003

عشان نحط الروابط الى ما عندو البرنامج يحمله من قسم البرامج ...

اول ما نفتح البرنامج ضغط على كلمة تعليمات برمجيه من الاسفل ..



نحدف كل الموجود ونرجع نضغط على كلمة تصميم...



ونضغط على ملف من القائمه ثم فتح ونختار ملف الاكسبلور الى عملناه على سطح المكتب الى هوا التصميم..



راح يطلع لطلع لك التصميم كامل قدامك طيب نبداء وضع الروابط نضغط على اول زر عملناه وليكن المنتدى ^_^


نضغط كلك يمين الفاره على اول زر ونختار ارتباط شعبي ..



نحط الرابط ولا تضغط موافق



بعدين اضغط الاطار الهادف واختار اطار جديد
عشان الى يضغط على الزر هدا راح ينفتح له المنتدى في صفحه جديده

وادا تبغاها في نفس الصفحه اتركها مثل ما هيا





الحين راح تشوف التصميم تشوه يعني صار فيه فراغات ارجع اضغط على نفس ازرار المنتدى كلك يمين الفاره واختار خصائص الصوره ....





حط القيمه صفر بدل القيمه السابقه 2 راح تشوف التصميم رجع مثل ما كان

نكرر الخطوات السابقه على باقي الازارير نحط الروابط على كامل الازارير لا تنسى حقوق الحفظ تحط بدل الرابط الايميل او موقعك
الى يقدرو يوصلو لك فيه
ونفس الكلام في الاعلان تحط ايميل الموقع او ايميلك الشخصي لطلبات الاعلان ^_*
بس خليها برضو في اطار جديد عشان ما تقفل صفحة الموقع على الشخص الى بيطلبك ^_^ ويزعل عليك (*O*) ويرسلك ملاحظه بدل الاعلان ^_^ شاهد طريقة وضع الايميل



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



اختر من القائمه العلويه تنسيق ومنها خلفيه .. اختار اللون المناسب ثم موافق وكده خلصنا كل شي

باقي حفظ العمل

روح من القوائم العلويه ملف ..ثم حفظ لا تسوي حفظ بإسم اريحك اضغط ctrl+s
وخلاص
^_^

وكده مبروووووووووووك عليكم الواجهى تقدر تجرب شغلك على اي مساحه مجانيه ادا كان التصميم في الجهى اليسر للموقع
ارجع افتح العمل في الفرنت بيج حدد العمل كامل ثم توسيط وسوي حفظ

وكده تمت الدوره الحمد الله

كل واحد ينزل التصميم الى عمله حتي نحط ملاحظاتنا واي سؤال انا موجود

المصدر: طريق الإحتراف

[رائد ابو فيصل]

ما شاء الله اخ خالد

تقدم سريع

جزاك الله خيرا

يعطيك العافيه

[abohmam]

بارك الله فيك أخى خالد

نقل موفق وشرح ممتاز

جزاك الله خيرا

وعساك على القوة دائما

[ريوم قطر]

السلام عليكم ورحمة الله وبركاته
اخوي ليش لما اسوي ctrl+g ماتروح الصورة تحت بل انه يعطيني group 1 مثلا
شنو الي اسويه غلط على فكره هذي اول مره استعمل فوتوشوب وماعندي نفس الي في الشرح مختلف شوي cs2
وشكرا

[أبو أيهم]

يسملو جدا خالد حبيت كثير اتعلمها بس في صور متعددة لم تظهر لدي مع ان النت سريع اي يستطيع عرض الصور اشك ان المشكلة في الصور

هل يمكنك مراجعة الصور ورفع التلفانة من جديد

وفقك الله


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

غير مسجل

[أبو يوسف]

اقتباس: المشاركة الأصلية كتبت بواسطة أبو أيهم     يسملو جدا خالد حبيت كثير اتعلمها بس في صور متعددة لم تظهر لدي مع ان النت سريع اي يستطيع عرض الصور اشك ان المشكلة في الصور هل يمكنك مراجعة الصور ورفع التلفانة من جديد وفقك الله والسلام عليكم ورحمة الله وبركاته أبو يوسف

حياك الله أخي الكريم

أنا تظهر الصور عندي كاملة


.

[سالي الفلسطينية]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[الفتة الطائر]

gooooooooooooooooood موفق بإذن الله ... لك مني أجمل تحية .

[orderhack]

شرح جميل ومميز بارك الله فيك

[الوردة الجورية]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .
جزاك الله كل خير
فى انتظار المزيد من الدروس المميزة
فى رعاية الله