موضوع: طريقك لتصبح مصمم واجهات مواقع يبدء من هنا !

ردود: 20 | زيارات: 1147
  1. #1

    طريقك لتصبح مصمم واجهات مواقع يبدء من هنا !



    هل تريد أن تتقن تصميم الواجهات ؟؟؟

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

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


  2. #2
    عضو متميز
    صور رمزية النمر الخطاط
    تاريخ التسجيل
    Oct 2009
    المنطقة
    صندوق الادوات
    ردود
    1,533
    الحقيقة الموضوع رائع وبه معلومات كثيرة لكن لى تعليقات

    [IMG]لكن في تصميم المواقع لن نحتاج سوى لدقة 72 فقط وذلك لأننا لن نقوم بطباعة الموقع بالتأكيد[/IMG]

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


    نفس الصورة قمت بتكبيرها ولم تؤثر على الدقة لأنها بالون و احد و بقي حجمها صغير ( ركز على هذه النقطة لأنها ستريحك من ثقل تحميل الصفحة

    هل معنى ذلك ان نقلل جدا من الوان الصور المستخدمة علما بأن الوان الصور لايمكن الغاء البعض منها
    توضيح ......

    ما معنى هذا المصطلح

    حركة سكريبت

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

    هذه معلومة جديدة لكن نود ان تشرح لنا بمثال بسيط لو امكن
    لكن هل اداة الــSilce تقوم بالتقطيع ام بعمل تجزيئات يمكن التقطيع عليها وبأى اداة يتم التقطيع ام هى للتقسيم فقط ويتم استكمال الباقى على برامج اخرى
    توضيح ........
    وَاللّهُ غَالِبٌ عَلَى أَمْرِهِ وَلَكِنَّ أَكْثَرَ النَّاسِ لاَ يَعْلَمُونَ

    calligraphyer@yahoo.com


    تابع كل ماهو جديد


  3. #3
    انا اعرف ان الطباعة على احجام صغيرة يكون دقة الطباعة 300 بيكسل وعلى اللافتات الكبيرة تكون 72
    لكن للمواقع سمعت من قبل انها 250 فهل هذه معلومة خاطئة
    لن اقول ان معلومتك خاطئة
    لكن يا صديقي لو زدت الجودة ستزيد المساحة و هذا سيؤثر على مساحة الموقع
    و سيؤدي لبطئ عملية التحميل . ( يمكنك وضعها كما تشاء لكن كل هذا سيؤثر على الحجم ) .

    هل معنى ذلك ان نقلل جدا من الوان الصور المستخدمة علما بأن الوان الصور لايمكن الغاء البعض منها
    توضيح ....
    .
    انا لا اتكلم عن جميع الصور انا اتكلم عن الصور ذات اللون الواحد فقط ... لكن هنالك مساحات بالموقع تكون بالون واحد ... فلا تحتاج ان تعمل لها صورة بحجم 300×300 وبصيغة bmp او jpeg بينما تستطيع ان تفعلها بحجم 16×16 بيكسل او اقل و بصيغة gif فلن تختلف عن الـ jpeg <<< هذا بالنسبة للون الواحد ( و اذا راعيت هذه النقطة ستقلل على نفسك مساحة الموقع و ستزيد من سرعة تحميل صفحة الموقع )
    انتبه : انا اتكلم عن اللون الواحد و لا اتكلم عن الصور الملونة
    وهذا مثال :



    [ انظر للمربع عند تكبيره لم يؤثر عليه شي و بهذه الحالة اكون قد وفرت مساحة واسرعت التحميل ] وهذا ما اقصده بصورة ذات لون واحد


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

    هذه معلومة جديدة لكن نود ان تشرح لنا بمثال بسيط لو امكن
    لكن هل اداة الــSilce تقوم بالتقطيع ام بعمل تجزيئات يمكن التقطيع عليها وبأى اداة يتم التقطيع ام هى للتقسيم فقط ويتم استكمال الباقى على برامج اخرى
    توضيح ........
    انظر لعملي هذا http://www.maxforums.net/showthread.php?t=166682
    ستلاحظ ان الواجهة بصفحة و احدة ...
    الآن عندما اريد اخراجها لكي يعمل عليها المبرمج يجب ان اقطعها له و ان اضع الهيدر بصورة واحد و الشعار بصورة اخرى و هكذا ... و التقطيع يكون بأداة الـ Slice الموجودة بالفوتوشوب
    سأشرح عنها بالمنابر قريباً بإذن الله

    ومشكور على قرائتك للموضوع
    اذا واجهتك مشكلة او استصعبت اي نقطة يمكنني مساعدتك بأي وقت أخي ^_~
    وبـــــــــــــــــــــــــــالتوفيق

  4. #4
    عضو متميز
    صور رمزية النمر الخطاط
    تاريخ التسجيل
    Oct 2009
    المنطقة
    صندوق الادوات
    ردود
    1,533
    طيب الان قولى هل معنى التقطيع ان تفصل كل زر او عنصر سيتم الضغط عليه بحيث يصبح فى طبقة منفصلة
    وَاللّهُ غَالِبٌ عَلَى أَمْرِهِ وَلَكِنَّ أَكْثَرَ النَّاسِ لاَ يَعْلَمُونَ

    calligraphyer@yahoo.com


    تابع كل ماهو جديد


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

    ويميز هذه الخصية انها تساعدك في اصدار التصميم الى html مباشرة

  6. #6
    عضو نشيط
    صور رمزية tr1985
    تاريخ التسجيل
    Jul 2009
    المنطقة
    الاردن
    العمر
    32
    ردود
    564
    شوية تعليقات على الموضوع
    1- موضوع رائع وترتيب الافكار به ممتازة

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

    3-
    هل اداة الــSilce تقوم بالتقطيع ام بعمل تجزيئات يمكن التقطيع عليها وبأى اداة يتم التقطيع ام هى للتقسيم فقط ويتم استكمال الباقى على برامج اخرى
    اداة التقطيع بالفوتوشوب اسمها slice tool واختصارها (K) شو فائدتها ؟
    متل ما شرح عمر من قبل انو الموقع لما تبدأ بتصميمه بتبدأ بالرسم على الفوتوشوب الاشكال الي بتحب تظهر موقعك بشكل مميز المهم بس تخلص تصميم بدك تخلي الصورة المصممة لموقعك تصير صفحة ويب وتبرمجها
    حتى تكون تفاعلية ويا ترى هون شو رح نعمل ؟
    بنبدأ بتقسيم الصورة (صورة الموقع الي رسمته) بواسطة اداة التقطيع الى اجزاء مثلا جزء بالهيدر وبالبودي والفوتر واليمين والشمال وبدك تراعي شغلة انو الالوان ذات الدرجة الواحدة والتي تحتل مساحة كبيرة لا نأخذها كصورة لكن عند التقسيم يتم تقسيمها ولكن عند البرمجة تأخذ الدرجة اللونية فقط ونترك الصورة وبدك تراعي حجم الصور ما يكون كبير يعني كل جزء ما يتجاوز 20 كيلو بايت هذا كمثال (انا هيك بعمل واحيانا ما بقبل يكون حجمها اكثر من 15 كيلو او 10 حسب الصورة)
    الان يتم نقل التصميم باجزاءه الى احد برامج التحرير ويقوم بعض الاشخاص باضافة جدول ونقل الصور التي تمت تجزئتها اليه والبعض الاخر يقوم بعمل
    DIV و ... الخ
    طبعا اختر ما يناسبك

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

    موقعي الالكتروني
    http://www.atgroup-solutions.com


  7. #7
    تفضلوا شرح فيديو لأداة Slice
    http://www.maxforums.net/showthread.php?t=166876

  8. #8
    اقتباس الموضوع الأصلي كتب بواسطة tr1985 معاينة الرد
    شوية تعليقات على الموضوع
    1- موضوع رائع وترتيب الافكار به ممتازة

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

  9. #9
    عضو متميز
    صور رمزية منبر الخير
    تاريخ التسجيل
    Jul 2009
    المنطقة
    الفضاء
    ردود
    9,650
    الله يجزيك بكل خير ونفع الله بك اخي عمر الدعجة

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

    وشكرا
    اللَّهُمَّ إنِّي أعُوذُ بِكَ أنْ أُشْرِكَ بِكَ وأنَا أعْلَمُ، وأسْتَغْفِرُكَ لِـمَا لا أعْلَمُ


    ربي اغفر لى ولوالدى وللمؤمنين والمؤمنات والمسلمين والمسلمات الاحياء منهم والاموات

  10. #10
    مشكور كثير على المعلومات الهامة

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

  11. #11
    اقتباس الموضوع الأصلي كتب بواسطة منبر الخير معاينة الرد
    الله يجزيك بكل خير ونفع الله بك اخي عمر الدعجة

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

    وشكرا
    الله يبارك بك منبر الخير ويكثر من امثالك
    ان شاء الله يكون هذا الموضوع مفيد للجميع

    اقتباس الموضوع الأصلي كتب بواسطة moha$mmed معاينة الرد
    مشكور كثير على المعلومات الهامة

    وجزاكم الله خير
    الله يبارك بك اخي محمد على مرورك الجميل

  12. #12
    عضو متميز
    صور رمزية I'M HERE
    تاريخ التسجيل
    Jul 2009
    المنطقة
    yemen
    ردود
    1,047
    شكرا على الموضوع القيم
    * الخط : حاول داخل تصميم الواجهة استخدام خحطوط متعارف عليها بجميع الاجهزة مثل tahoma و arial و time new roman وذلك لاعدم استخدام صور بشكل كبيرة
    لكن هل يعني هذا اني اذا استخدمت خطوط , ما بتظهر الاجهزة اللي مش محملة فيها هذه الخطوط ؟
    Great minds discuss ideas, Average minds discuss events, Small minds discuss people. - Eleanor Roosevelt

    email..magdialafifi@yahoo.com

  13. #13
    مشرف عام
    صور رمزية aktoom
    تاريخ التسجيل
    Dec 2005
    المنطقة
    بلاد العرب أوطاني
    العمر
    52
    ردود
    17,805
    أحسنت أخي عمر

    أنت تسير بخطى حثيثة نحو التميز ... وفقك الله ...

    أتذكر أول مشاركات لك بالمنتدى

    ما شاء الله عليك تطورت بشكل ملفت ... إلى المزيد بعون الله
    سبحان الله وبحمده .. سبحان الله العظيم

    لاريب أنّ الألم هو سائق انفعالاتي الفظّ ، وأنّ الأمل هو وسيلتي الدائمة لترويضه . لكن .. هل أكون بهذا قد لخّصت لك عملية الإبداع ؟

    FACEBOOK

  14. #14
    اقتباس الموضوع الأصلي كتب بواسطة I'M HERE معاينة الرد
    شكرا على الموضوع القيم

    لكن هل يعني هذا اني اذا استخدمت خطوط , ما بتظهر الاجهزة اللي مش محملة فيها هذه الخطوط ؟
    اخي اذا لم تكن لك معرفة بالـ css لن تظهر الخطوط بالاجهزة التي تحمل نفس الخطوط
    لكن يوجد كود css جميل يساعدك برفع الخطوط و عرضها بأي جهاز لكن يجب ان يكون لك معرفة بـ css
    ----------------
    باختصار لن تظهر الخطوط بالاجهزة التي لا تحمل نفس الخط على الجهاز
    و يمكن فعل ذلك بواسطة اكواد css فقط

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

    أنت تسير بخطى حثيثة نحو التميز ... وفقك الله ...

    أتذكر أول مشاركات لك بالمنتدى

    ما شاء الله عليك تطورت بشكل ملفت ... إلى المزيد بعون الله
    اهلاً باستاذي العزيز أكرم
    نور الموضوع بمرورك
    و الحمدلله الذي ساعدني للوصول لهذا المنتدى الذي يحتوي اشخاص متميزين أمثالك
    بالنسبة لأول المشاركات ... خطوة المليون تبدء بخطوة
    وشكراً على مرورك الذي يسعدني كثيراً .
    أخر تعديل بواسطة Troublemaker في 14 / 01 / 2010 الساعة 11:17 PM

  15. #15
    مشرف عام
    صور رمزية aktoom
    تاريخ التسجيل
    Dec 2005
    المنطقة
    بلاد العرب أوطاني
    العمر
    52
    ردود
    17,805
    اقتباس الموضوع الأصلي كتب بواسطة troublemaker معاينة الرد
    و الحمدلله الذي ساعدني للوصول لهذا المنتدى الذي يحتوي اشخاص متميزين أمثالك
    بالنسبة لأول المشاركات ... خطوة المليون تبدء بخطوة
    وشكراً على مرورك الذي يسعدني كثيراً .
    بالضبط ...

    كنت أقصد في بداية مشاركاتك ... كانت على ما أظن ( ملك الهكرز ) وأشياء في مجال التخريب

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

    لكنك انتبهت لأن بداخلك إبداع يجب أن يكون بالاتجاه الصحيح ....

    أتمنى لك مزيدا من التوفيق ...
    سبحان الله وبحمده .. سبحان الله العظيم

    لاريب أنّ الألم هو سائق انفعالاتي الفظّ ، وأنّ الأمل هو وسيلتي الدائمة لترويضه . لكن .. هل أكون بهذا قد لخّصت لك عملية الإبداع ؟

    FACEBOOK

  16. #16
    عضو متميز
    صور رمزية النمر الخطاط
    تاريخ التسجيل
    Oct 2009
    المنطقة
    صندوق الادوات
    ردود
    1,533
    اقتباس الموضوع الأصلي كتب بواسطة aktoom معاينة الرد
    أحسنت أخي عمر


    أتذكر أول مشاركات لك بالمنتدى

    ما شاء الله عليك تطورت بشكل ملفت ... إلى المزيد بعون الله
    اذن هل يمكن ان يصبح مستواى جميل
    وَاللّهُ غَالِبٌ عَلَى أَمْرِهِ وَلَكِنَّ أَكْثَرَ النَّاسِ لاَ يَعْلَمُونَ

    calligraphyer@yahoo.com


    تابع كل ماهو جديد


  17. #17
    عضو نشيط
    صور رمزية legend 1
    تاريخ التسجيل
    Mar 2008
    المنطقة
    سورية & قطر
    ردود
    453
    كان ردي الاول يجب ان يكن هنا
    شكرا كتير ع الشرح سهلت الاومر علي وكيفية البدء
    لان تصميمي الاول اخد فترة وبحث لمعرفة حجم والدقة
    لكن تصميمي الجديد رح ابدأ فيه مع نصائحك وخاصة التفكير قبل التصميم
    يعطيك الف الف عافية

  18. #18
    اقتباس الموضوع الأصلي كتب بواسطة aktoom معاينة الرد
    بالضبط ...

    كنت أقصد في بداية مشاركاتك ... كانت على ما أظن ( ملك الهكرز ) وأشياء في مجال التخريب

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

    لكنك انتبهت لأن بداخلك إبداع يجب أن يكون بالاتجاه الصحيح ....

    أتمنى لك مزيدا من التوفيق ...
    ههههههههه ... فضحتنا يا حجي
    كان طيش شباب

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

    اقتباس الموضوع الأصلي كتب بواسطة legend 1 معاينة الرد
    كان ردي الاول يجب ان يكن هنا
    شكرا كتير ع الشرح سهلت الاومر علي وكيفية البدء
    لان تصميمي الاول اخد فترة وبحث لمعرفة حجم والدقة
    لكن تصميمي الجديد رح ابدأ فيه مع نصائحك وخاصة التفكير قبل التصميم
    يعطيك الف الف عافية
    الحمدلله ان هذا الموضوع افادك
    و ان شاء الله بالمواضيع القادمة سأشرح كل نقطة لوحدها بشكل فيديو

  19. #19
    ماشاء الله عمر .. انا مجبر ان ارفع لك القبعه امام تلك النصائح المهمه والملاحظات البسيطه ولكن متميزه فعلا .. .. مجهود رائع يا عزيزي

    بارك الله فيك يا بطل
    Nader nabil
    My portfolio

  20. #20
    اقتباس الموضوع الأصلي كتب بواسطة نادر ندوره معاينة الرد
    ماشاء الله عمر .. انا مجبر ان ارفع لك القبعه امام تلك النصائح المهمه والملاحظات البسيطه ولكن متميزه فعلا .. .. مجهود رائع يا عزيزي

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

Bookmarks

قوانين الموضوعات

  • لا يمكنك اضافة موضوع جديد
  • لا يمكنك اضافة ردود
  • لا يمكنك اضافة مرفقات
  • لا يمكنك تعديل مشاركاتك
  •  
  • كود BB مفعّل
  • رموز الحالة مفعّل
  • كود [IMG] مفعّل
  • [VIDEO] code is مفعّل
  • كود HTML معطل