ارجو المساعده .كيف اصمم واجهت الموقع عبر الفرنت بيج ؟؟؟

[4zez]

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

ارجــــ :c016:ــو من احد الاخوه ان يعلمن تصميم الموقع من الفرنت بيج .....








ولكم مني جزيل الشكر......

[التوته]

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



أخبر عندي طريقته،،، بدوره لك وأحطه هنااااااااا :)
.
.
.

[التوته]

حصلت الطريقة اسمها (تصميم فريم اطار للمنتدى)

هي نفسها طريقة تصميم واجهة للموقع،،،


والشرح شوي طويل وفيه اسم الموقع، فبرسل لك الرابط ع الخاص،،،

وإذا ما كان هذا المقصود، اكتب هنا والإخوان إن شاء الله ما بيقصرون وياك



وشككككراااااااً :)
.
.
.

[شمـ بريدة ـوخ]

- انا اعرف طريقة عمل تصاميم للموقع بالفوتوشوب ثم نقلها للفرنت بيج لوضع الروابط بس مدري هو الي تبيه او لا

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

إذا اذا كنت تبي النوع الاول الي ذكرته قلي حتى اجيب الدرس
واذا تقصد النوع الثاني فهو راح يجيك الرابط

[4zez]

لو سمحت ابي النوع الاول:oven:

[4zez]

اشكر الاخ ( التوته و شمــ بريده ــوخ )

[التوته]

اشكر الاخ ( التوته و شمــ بريده ــوخ )
هههههههههههههههههههههههههه

احنا خواااات مهوب أخ :e058:



والعفووو :)
.
.
.

[عواطف]

جاري البحث

[4zez]

انا اسف ياخت :::التوته:::و :::شمـــ بريده ـــوخ:::

[شمـ بريدة ـوخ]

هذي طريقه

http://www.alqosman.net/vb/uploaded/18_1151536197.jpg

http://www.alqosman.net/vb/uploaded/18_1151536256.jpg

http://www.alqosman.net/vb/uploaded/18_1151536532.jpg

.

[شمـ بريدة ـوخ]

وهذي طريقه ثانيه ... درس ثنين × واحد ;)
.
دورة لتعليم تصميم موقع بالفوتوشوب بإحتراف
اهم شى فى تصميم الموقع التحديد بدقة عالية وسوف نتعلمها بأذن الله و كيفية التقطيع باحتراف و استخدام البترن
الخاص بالفوتوشوب
نبداء باسم الله الرحمن الرحيم :
البرامج المستخدمة :
1-برنامج الفوتوشوب CS أو 7 ME
2-برنامج الفرونت بيج الخاص مع حزمة Office .
نبداء ببرنامج الفوتوشوب :
1-ننشاء مشروع جديد وافضل مقاس هو 780 × 600
2-ويتم ذلك من File <<<New

http://absba3.absba.org/teamwork6/waelhindam157818/1.gif

الان تم انشاء المشروع نختار الالوان المناسبة للموقع وهذا اهم شى هو اخنيار الالوان
انا اخترت اللون كود F7DDFF ليكون خلفية للموقع .
ننشاء ليرن جديد و نعباه بهذا اللون .

http://absba3.absba.org/teamwork6/waelhindam157818/2w.gif

ناتى لمرحلة انشاء البنر للموقع و افضل فى هذه المرحلة ان يتم اظهار الشبكة فى البنرامج لتسهيل التحديد
ويتم ذلك عن طريق قائمةview <<< Show <<<Grid
ونستخدم فى هذه المرحلة اداه التحديد Pen Tool
ننشاء ليرن جديد الخاص بالبنر وننشاء التحديد كما بالصوءة فى المربعات الحمراء

http://absba3.absba.org/teamwork6/waelhindam157818/3w.gif

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

http://absba3.absba.org/teamwork6/waelhindam157818/4w.gif

الان يتم الضغط على الزر الايمن و اختيار Make Selcantion ثم وضع القيمة0 و الضغط على OK ينتج لنا تحديد نملائه باللون FFA0F9 ممكن ان نخفف حدة اللون من خاصية Opacity الى 80%و File الى ايضا 80 %

http://absba3.absba.org/teamwork6/waelhindam157818/5w.gif

الان تم الانتهاء من الجزء العلوى للموقع وهو البنر يتم انشاء الجزء السفلى للموقع وبنفس الاداه وهى pen Tool

http://absba3.absba.org/teamwork6/waelhindam157818/6w.gif

اعمدة على الجنين للموقع وذلك بعمل تحديد باداه Rectangaler Tool بالطول ونمائه بنفس اللون وعمل الانحناء للاعمدة بفلتر الاتى Filter<<<Distart<<<Shear
ويتم عمل الانحناء وذلك بتحيرك النقاط التى على الخط ومشاهدة النتيجة باسفل حتى يتم عمل الانحناء المطلوب يتم عمل نسخة من هذا العمود بغرض وضعه بالجهة المقابلة وذلك بالضغط على Ctrl + J
لتحويلها للجهة المقابلة يتم عمل الاتى Edit<<<>>>Transform>>>Flip Vetical

http://absba3.absba.org/teamwork6/waelhindam157818/7w.gif

يتم عمل الازرار عن طريق أداه التحديدRectangalar Tools كما بالشكل وتكون درجة الانحناء 6pxلتكون بهذا الشكل وعلى الجنين

http://absba3.absba.org/teamwork6/waelhindam157818/8w.gif


الان نرسم قلب كبير لنعمل به الدى جى شات بأداه Custom Shaps

http://absba3.absba.org/teamwork6/waelhindam157818/9w.gif

الان نعمل جزء لشريط اخر المواضيع بالمنتدى وشريط الاهداءات وايضا باداه التحديد والموضوع كله يعتمد على اتقان التحديد

http://absba3.absba.org/teamwork6/waelhindam157818/10w.gif

الجزء الثالث
==========
سوف يتم دمج الصور على البنر ويتم ذلك بالاتى:
يتم اختيار صورة مناسبة و وضعها على البنر كا التالى
http://absba3.absba.org/teamwork6/waelhindam157818/11.jpg

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

http://absba3.absba.org/teamwork6/waelhindam157818/12.jpg

يتم اختيار من قائمة تحديدselect>>>>Inverse ثم الضغط على اليرن الخاص بالصورة و الضغط على Delete من لوحة المفاتيح كما بالصورة

http://absba3.absba.org/teamwork6/waelhindam157818/13.jpg

الان يتم دمج الصورة لتكن جزء من البنر ويتم ذلك كا التالى :

http://absba3.absba.org/teamwork6/waelhindam157818/14.jpg

ثم يتم اختيار هذاالاختيار http://absba3.absba.org/teamwork6/waelhindam157818/15.jpg

عمل تدريج لون كا التلى لمدج الصورة بهذه الاداه http://absba3.absba.org/teamwork6/waelhindam157818/16.jpg

و اختيار خاصية التالية فى التدريج اللونى http://absba3.absba.org/teamwork6/waelhindam157818/18.jpg

ويكون اللون الابيض فى اسفل و اللون الاسود فى اعلى http://absba3.absba.org/teamwork6/waelhindam157818/17.jpg

وعمل تدريج من اليسار الى اليمين بحسث يكون بهذا الشكل

http://absba3.absba.org/teamwork6/waelhindam157818/19.jpg

الان يتم الكتابة على النر و الازرار وشريط المنتدى و الاهداء و الفوتر وهو الجزء السفلى ليكون بهذا الشكل :

http://absba3.absba.org/teamwork6/waelhindam157818/20.jpg

الان يتم تقطيع التصميم بهذه الاداه :

http://absba3.absba.org/teamwork6/waelhindam157818/21.jpg

يتم تقطيع التصميم بس يتم ملاحظة انه يتم تقطيع الازرار بمقاسها بالضبط كا الشكل التالى :

http://absba3.absba.org/teamwork6/waelhindam157818/22.jpg

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

http://absba3.absba.org/teamwork6/waelhindam157818/23.jpg

ويتم الضغط على الازرار فى التصميم واضافة الروابط كا التالى :


http://absba3.absba.org/teamwork6/waelhindam157818/24.jpg

حيث يتم عمل روابط مختصره وهلى مثلا www فى حقل URL ثم الضغط على OK حيث يتم عمل جميع الازرار كما الشكل السابق .
File >>>Save For Wep كما بالصورة و الضغط على Save
الخطوة الاخيرة وهى تحويل التصميم الى صفحة ويب بامتداد HTML ويتم ذلك عن طريق الاتى

http://absba3.absba.org/teamwork6/waelhindam157818/25.jpg

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

http://absba3.absba.org/teamwork6/waelhindam157818/26.jpg

+++++++++++++انتهى الشرح بالتوفيق انشاء الله+++++++++++++


للامانه الدرس منقول :)

[Samaa]

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

تطلع شييييييييييييييييييييي


شموخ ما قصرت حطت لك الطريقة بالتفصيل الممل

ربي يعطيكم العافيه

[4zez]

شكرا . وانا اسف على التاخير بس كان الكمبيوتر خربان