[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم
شبكة عراق نت :: الاقسام العامة :: تقنيات التطوير والجرافيك | Tips & Tricks and Graphic Design :: التصميم والجرافيك
صفحة 1 من اصل 1
[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم
بسم الله الرحمن الرحيم
السلام عليكم ورحمه الله وبركاته
اخواني واخواتي هذا درس استغرق مني ساعات حتى انشره امامكم ويكون طريق معرفه للجميع
فان اصبت فمن الله وان اخطئت فمن الشيطان
وسامحوني على الشرح ان حصل فيه اى تقصير
هذا الدرس في غاية الاهميه
الدرس هو عباره عن امر مهم لاصحاب المواقع سواء مجانية او رسميه
وللعلم اي شخص يستطيع ان يركب هذه الواجهه في اى موقع مجاني وان شاء الله نتطرق لكيفية التركيب فيما بعد
الانطلاقه
تقوم بفتح لير جديد بمقاس 800 # 600 والخلفية بيضاء
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-1](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-1.gif)
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-2](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-2.gif)
قم باختيار اي لونين تجدها مناسبه لذوقك او لشكل تصميمك
انا قمت باختيار هذه الالوان
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-3](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-3.gif)
ثم اذهب لايقونة تدرج الالوان Gradint tool
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-4](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-4.gif)
قم بعمل سحب من الاعلى الى الاسفل ليخرج لك هذا الشكل
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-5](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-5.gif)
الان قم بعمل لير متطابقه
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-6](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-6.gif)
ولاتنسى ان تجعله soft light
ليكون بهذا الشكل
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-7](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-7.gif)
اللحين انت وشطارتك في صنع البنر والايقونات
انا صنعتها بطريقة عادية جداً واستخدمت مثل ما في الصورة
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-8](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-8.gif)
اللحين انا انتيهت من تصميم البنر وازرار التوجيهات مثل كلمة منتدى او رئيسيه
جاء اللحين دور اختيار واحد من الازرار لاعطائه رابط
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-9](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-9.gif)
اخترت اول زر من الاعلى واستخدمت اداة التقطيع
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-10](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-10.gif)
بعدما مررت اداة التقطيع على اول زر
قم بالضغط بالماوس الايمن لكي يخرج لك قائمه وين Edit Slice Option
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-11](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-11.gif)
قم بالضغط عليها
فتخرج لك مربع وفيه كل الاشياء التي تريد ان تضيفها
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-12](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-12.gif)
اما السهم الاول ضع رابط المكان الذي تريد توجيه الزوار والاعضاء له
والسهم الثاني ضع اسم هذا الرابط بالعربي لان عندما يمر الماوس على الرابط يظهر اسفل شريط الاكسبلور
الان كيف تحفظ العمل؟
اذهب من الاعلى الى file ثم save for web
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-13](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-13.gif)
بمجرد الضغط على save for web سوف تنتقل الى هذه الصفحه
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-14](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-14.gif)
كل ماعليك الا الضغط على save
وكما تلاحظ انني لم اضع اي روابط على جميع الزرار وانما اول زر فقط
بعد الضغط على كلمة save وهو تحديد مكان الحفظ
طبق مافي الصورة لعملية الحفظ (( مهم ))
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-15](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-15.gif)
بعد الحفظ والتوجه لمكان الحفظ فانك سوف تجد العمل الذي حفظته اوتماتيك قد انشئ مجلد للصور وملف للعمل
الان اتى دور الرفع للواجهه (( طريقة هذا الرفع خاص بالمواقع الرسميه )
وسوف نتطرق لكيفية الرفع للمواقع المجانيه باذن الله
الان تقوم بفتح برنامج ftp
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-17](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-17.gif)
,وتقوم بالضغط عليه
ثم ترفع المحتويات من مجلد الصور والملف الذي قمت بعمله
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-18](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-18.gif)
منقووول عن الأخ تركي الودعاني
السلام عليكم ورحمه الله وبركاته
اخواني واخواتي هذا درس استغرق مني ساعات حتى انشره امامكم ويكون طريق معرفه للجميع
فان اصبت فمن الله وان اخطئت فمن الشيطان
وسامحوني على الشرح ان حصل فيه اى تقصير
هذا الدرس في غاية الاهميه
الدرس هو عباره عن امر مهم لاصحاب المواقع سواء مجانية او رسميه
وللعلم اي شخص يستطيع ان يركب هذه الواجهه في اى موقع مجاني وان شاء الله نتطرق لكيفية التركيب فيما بعد
الانطلاقه
تقوم بفتح لير جديد بمقاس 800 # 600 والخلفية بيضاء
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-1](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-1.gif)
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-2](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-2.gif)
قم باختيار اي لونين تجدها مناسبه لذوقك او لشكل تصميمك
انا قمت باختيار هذه الالوان
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-3](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-3.gif)
ثم اذهب لايقونة تدرج الالوان Gradint tool
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-4](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-4.gif)
قم بعمل سحب من الاعلى الى الاسفل ليخرج لك هذا الشكل
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-5](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-5.gif)
الان قم بعمل لير متطابقه
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-6](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-6.gif)
ولاتنسى ان تجعله soft light
ليكون بهذا الشكل
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-7](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-7.gif)
اللحين انت وشطارتك في صنع البنر والايقونات
انا صنعتها بطريقة عادية جداً واستخدمت مثل ما في الصورة
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-8](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-8.gif)
اللحين انا انتيهت من تصميم البنر وازرار التوجيهات مثل كلمة منتدى او رئيسيه
جاء اللحين دور اختيار واحد من الازرار لاعطائه رابط
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-9](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-9.gif)
اخترت اول زر من الاعلى واستخدمت اداة التقطيع
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-10](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-10.gif)
بعدما مررت اداة التقطيع على اول زر
قم بالضغط بالماوس الايمن لكي يخرج لك قائمه وين Edit Slice Option
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-11](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-11.gif)
قم بالضغط عليها
فتخرج لك مربع وفيه كل الاشياء التي تريد ان تضيفها
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-12](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-12.gif)
اما السهم الاول ضع رابط المكان الذي تريد توجيه الزوار والاعضاء له
والسهم الثاني ضع اسم هذا الرابط بالعربي لان عندما يمر الماوس على الرابط يظهر اسفل شريط الاكسبلور
الان كيف تحفظ العمل؟
اذهب من الاعلى الى file ثم save for web
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-13](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-13.gif)
بمجرد الضغط على save for web سوف تنتقل الى هذه الصفحه
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-14](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-14.gif)
كل ماعليك الا الضغط على save
وكما تلاحظ انني لم اضع اي روابط على جميع الزرار وانما اول زر فقط
بعد الضغط على كلمة save وهو تحديد مكان الحفظ
طبق مافي الصورة لعملية الحفظ (( مهم ))
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-15](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-15.gif)
بعد الحفظ والتوجه لمكان الحفظ فانك سوف تجد العمل الذي حفظته اوتماتيك قد انشئ مجلد للصور وملف للعمل
الان اتى دور الرفع للواجهه (( طريقة هذا الرفع خاص بالمواقع الرسميه )
وسوف نتطرق لكيفية الرفع للمواقع المجانيه باذن الله
الان تقوم بفتح برنامج ftp
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-17](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-17.gif)
,وتقوم بالضغط عليه
ثم ترفع المحتويات من مجلد الصور والملف الذي قمت بعمله
![[درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-18](https://2img.net/h/www.traidnt.net/vb/dros-hakes/t-mwga-18.gif)
منقووول عن الأخ تركي الودعاني
iraqnt- إدارة الموقع
رد: [درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم
العفو اهلا بك يا اخي
نورت
نورت
iraqnt- إدارة الموقع
رد: [درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم
يسلمووووووووووووووووووووووووو اخي العزيز
احمد المبدع- عضـو يشـــارك
رد: [درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم
شكرا لمرورك الذي اسعدني
بالتوفيق في التطبيق
بالتوفيق في التطبيق
iraqnt- إدارة الموقع
مواضيع ذات صلة
شبكة عراق نت :: الاقسام العامة :: تقنيات التطوير والجرافيك | Tips & Tricks and Graphic Design :: التصميم والجرافيك
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى