دروس تصميم واجهة بسيطة و تقطيعها

[awtil.com]

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

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

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



طبعا التصميم ليس كامل انما هو نمودج لما سنقوم به

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

www.awtil.com/albums

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

اتمنى ان شاء الله هده الدروس تفيدكم واي سؤال ان شاء الله اقدر اساعد الجميع

والله الموفق

[awtil.com]

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

بسم الله نبدا ونفتح عمل جديد بمقاس 600*600
ننشئ لاير جديد ومن قائمة الادوات نختار اداة التدرج GRADIENT TOOLS
ليس مهم اللون لاننا سنغير بالاعدادات بما يناسب
كليك بالزر الايمن للفأرة على اللير ونختار خصائص BLENDING OPTIONS
التغيير الوحيد الدي يهمنا هو ال GRADIENT OVARLYنطبق التاتير التالى


لتغير القيم فقط كليك على الزر وضع القيمة المحددة بالصورة تم كليك على OK
الان سنحتاج الى اداة المسطرة و اهميتها كتيرة منها اننا هنا سنقسم مجال العمل حسب مكونات صفحتنا
متلا منطة للهيدر تم منطقة جسم الصفحة و اخيرا الفوتر
لاظهار المسطرة ابسط طريقة هي من لوحة المفاتيح كليك على CTRL+R
نقوم بسحب سطور من المسطرة لتحديد مكان كل جزء من تصميمنا كما تبين الصورة

منطقة الهيدر كما دكرت باحد المواضيع يكون فيه اسم الموقع و الشعار
منطقة جسم الموقع وهي اهم منطقة لان بها محتويات الموقع من روابط واشعار وغيرهما
اما منطقة الفوتر فبها يوجد حقوق المصمم وتاريخ الموقع وممكن اعلانات
الان نقوم بجلب الصورة التى نريدها ان تكون خلفية بوسط التصميم
يمكنكم مراجعة البوم الصور كما دكرة بموضوع المقدمة كدلك الايقونات متوفرة
اختر ما تشاء الان نفتح صورتنا من خلال الضغظ على CTRL+O
نحدد مكان الصور تم نفتحها ويجب ان تكون اداة ال MOVE TOOL هي المحددة
نقوم بجر الصورة الى وسط تصميمنا ليس مهما ان كانت كبيرة
اغلق الصورة ان اردت فقط انتهي دورها بمجرد وضعها بوسط التصميم
كليك على زر CTRL+T لتغيير حجمها ووضعها بوسط التصميم كما تبين الصورة التالية
نضعها داخل الاطار الاوسط كما تبين الصورة

طبعا الصورة الافضل نعمل عليها تاتير واقترح عليكم طريقتين
الاولى اما من خلال لوحة المفاتيح كليك على CTRL+U
لتغير من خصائص اللون للوصول الى خلفية جميلة
او من خلال التاتير التالى كليك على الصورة من خلال قائمة اللير واختر BENDING OPTIONS
تم نطبق خاصية ال STROK وخاصية PATTERN OVERLY

and

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

and






لنصح الى النتيجة التالية

نطبق تاتير اخير لاعطاء جمالية لقائمتنا بتغير ال OPACITY الى 25
لنحصل على التاتير التالى

بهدا نكون انهينا 50 بالمائة من عمل منطقة جسم تصميمنا
الان كل ما علينا هو جلب الايقونات و كتابة اسم الروابط مع تطبيق خطورة بسيطة وهي كالتالى
انشئ لاير جديد ومن قائمة الادواة اختر اداة القلمPENCIL TOOL
تم قم برسم خط افقي فوق منطقة قائمة الروابط ولجعل الخط مستقيم ضع اصبعك على زر CTRL
تم ابدا الرسم لتجد ان اتجاه الخط سيكون مستقيم ولا يوجد به اي ميلان
كرر الامر حسب عدد الروابط التى ستستخدمها لنصل الى النتيجة التالية كما تبين الصورة

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

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

اتمنى الشرح يكون واضح واي سؤال لا تترددوا
والله الموفق

[awtil.com]

السلام عليكم
في الموضوع السابق انتهيا عملنا وتوقفتا في خطوة تصميم جسم الصفحة
وفي هدا الموضوع سنتحدت حول تصميم الهيدر وايضا الفوتر وكما دكرت بان الهيدر
يكون به اسم الموقع وايضا شعار يدل على خصوصية الموقع
شخصيا عندي شعار موجود صممته مند مدة كل ما علينا هو تطبيق تاتير النص التلاتي الابعاد على اسم الموقع
اولا نقوم بكتابة اسم الموقع وبحجم كبير ونختار خط معين متلا انا اختر خطkacstart
يوجد ضمن باقة الخطوطة التى قدمتها سابقا
نقوم بمضاعفة اللير ليكون عندنا 2 لاير يمتلان اسم الموقع
نقوم بالتاتيرات التالية على اللير السفلى

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

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

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

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

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

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

كليك على الاختيار المحدد لتظهر لك النافدة التالية

لابد من كتابة الرابط مسبوق ب HTTP والا فان الرابط لن يعمل
الخانة التانية كما هو موضع يتعلق الامر بخصوص الرسالة التى تظهر عندما يكوت زر الفارة فوق الرابط
نقوم بنفس الامر على كل الروابط التى انشئناها
واخيرا وصلنا الى حفظ العمل من قائمة FILE نختار SAVE FOR WEB
وقد شرحة الامر مسبقا لدلك اضن الطريقة واضحة كل ما اريد اضافته
هو عند الحفظ نختار صيغة HTML+IMAGE
تم نحدد مكان الحفظ ونعطي اسم INDEX لمشروعنا
واخيرا نقول لك مبروك عليك واجهتك البسيطة لم يبقي الا التعديل بالفرونت بيجوهو موضوعنا القادم بادن الله

اتمنىىلكم الافادة و الى المواضيع القادمة بادن الله

والله الموفق

[raoaa]

الله عليك
جزاك الله كل خير
موضوع هايل

[awtil.com]

[CENTER]



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

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


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

الان تجاوزنا المشكل الاول. المشكل التاني وهو ان التصميم يوجد بجهة اليسار
الامر سهل للغاية من خلال الفرونت بيج ادخل على html
توجد باسفل البرنامج وهدا المكان معد لتعديل على التصميم باضافة وسم من وسوم لغة ال html
والوسم المهم لدينا هو انجعل التصميم كله بالوسط ودلك بالوسم التالى
<center></center>
لاحضو هده الصور تبين كود صفحتنا قبل اضافة الوسم center
هنا اول الكود


وهنا اخر الكود


ان لم تكن تعرف اي شئ بلغة ال html فلا تقلق الامر سهل للغاية
اكتب الكود التالى
<center>
بعد كود <head>
باول صفحتنا وباخر صفحتنا نضيف كود </center>اسفل كود </body>
لمعرفة كل كود على حدي ودوره راجع دورة ال html
ابقي في صفحة الكود وانتبه باعلى الصفحة على الكود التالى او الوسم
<title>Untitled-1</title>
هدا الوسم دوره يحدد عنوان صفحتنا وهو الاسم الدى سيظهر باعلى المتصفح لدلك يجب تغييره الى اسم موقعك
ليصبح متلا بهدا الشكل
<title> شبكة منتديات كنان </titel>
ايضا لاحضو بالصورة الاولى الجزء المحدد بالرقم 2 فهدا الجزء هو الخاص او الماتر على لون خلفية التصميم
نحن هنا مخيرين اما نترك اللون الابيض ويصبح تصميمنا الاسود بالوسط او نغير قيمته الى اللون الدي نريد
وان كنت ايضا تريد ان تكون صورة معينة هي خلفية التصميم فالامر ايضا سهل وسنشر الامور كلها
لتغير اللون فما علينا سوي تغير قيمة ال #ffffff الى القيمة #000000
بالتالى تصبح الخلفية سوداء متل تصميمنا
اما ان اردنا تغير الخلفية بصورة معينة فما علينا الرجوع الى قسم // عادي // ببرنامج الفرونت بيج
تم النقر بالزر الايمن على اي مكان فارغ ونختار من النافدة التى ستظهؤر لنا // خصائص الصفحة كما تبين الصورة التالية

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

نحدد زر //خلفية // رقم 1
نأشر على اختيار //صورة خلفية //
تم كليك على زر // استعراض // لتحديد مكان الصورة
تم اخيرا كليك على موافق وستجد ان الخلفية اصبحة تظهر اسفل التصميم
بهدا نكون قد انهينا التعديل على واجهتنا واصبحة قابلة للعرض على الزوار
لكن قبل دلك اريد ان انبه الى انه حتى هدا النوع من التصاميم يمكن وضع الاعلانات به او اي كود ككود رتب متلا
المهم وضعه بالاعلى او الاسفل خارج اطار الصور متلا نضعه بعد <center> بالاعلى وايضا بعد </center > الموجودة اسفل الكود
مبروك عليك تصميمك وواجهتك احفظ التعديل
واليكم نمودج اخر لنتاج تطبيق هده الطريقة واجهة صممتها لاحد الاصداء
http://a-style.ici.st/
الان انهينا هده الخطوة لم يبقي لنا الا رفعها ونشرها فسيكون بادن الله موضوعنا القادم هو
1/ التسجيل بالاستضافة المجانية وايضا رفع التصميم مع استخدام سكربتات كسكربت اتصل بنا وايضا دفتر الزوار
الشئ الدي لم ادكره هنا هو التعديل على الروابط اتركه لتوضيح الاشياء الممكن عملها بخصوص الروابط
اتمنى لكم الافادة
والله الموفق
[/CENTER]

[voov]

شكرا على الموضوع ياغالى والله مجهود فعلن

[laimona]

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

[هواجيس مصمم]

أستااذي شكرا من الأعمااق على هذه السلسلة الرااائعة التي لم أجد شرحا أوفى منها ولا حتى شروحات الفيديوو ,,حقيقة ,,
جزاك الله خير وأحسن الله إليك أنتظر بشغف شديد إتمام الدروس,,


وبالنسبة لسؤال الأخت ليمونا ،
أقول حسب تعاملي مع الفرونت بيج بإمكانك تفعيل مهمة هذه الروابط من خلال برنامج الفرونت بيج ,,
فهناك خيار إسمه (إرتباط تشعبي ) هو الذي يدخل الرابط على الكلمة مثلا(الرئيسية .. الأعمال ,, ...)

[suf_man]

مشكوووووووووووووووور اخي الكريم

[مخاوية الليل]

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

والله درس اكثر من رااااائع