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

[Troublemaker]

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

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

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

[النمر الخطاط]

الحقيقة الموضوع رائع وبه معلومات كثيرة لكن لى تعليقات

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

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


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

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

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

حركة سكريبت

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

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

[Troublemaker]

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

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

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

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



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


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

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

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

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

[النمر الخطاط]

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

[Troublemaker]

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

انا الآن ارفع فيديو يشرح كيفية التقطيع ^_~

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

[tr1985]

شوية تعليقات على الموضوع
1- موضوع رائع وترتيب الافكار به ممتازة

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

3-

هل اداة الــSilce تقوم بالتقطيع ام بعمل تجزيئات يمكن التقطيع عليها وبأى اداة يتم التقطيع ام هى للتقسيم فقط ويتم استكمال الباقى على برامج اخرى

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

بتوقع هيك كتبت بعض الشغلات الي عندي ولو نسيت اشي او اخطأت بشئ نبهوني

[Troublemaker]

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

[Troublemaker]

شوية تعليقات على الموضوع
1- موضوع رائع وترتيب الافكار به ممتازة

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

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

[منبر الخير]

الله يجزيك بكل خير ونفع الله بك اخي عمر الدعجة

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

وشكرا

[moha$mmed]

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

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

[Troublemaker]

الله يجزيك بكل خير ونفع الله بك اخي عمر الدعجة

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

وشكرا

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

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

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

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

[I'M HERE]

شكرا على الموضوع القيم

* الخط : حاول داخل تصميم الواجهة استخدام خحطوط متعارف عليها بجميع الاجهزة مثل tahoma و arial و time new roman وذلك لاعدم استخدام صور بشكل كبيرة

لكن هل يعني هذا اني اذا استخدمت خطوط , ما بتظهر الاجهزة اللي مش محملة فيها هذه الخطوط ؟

[aktoom]

أحسنت أخي عمر

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

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

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

[Troublemaker]

شكرا على الموضوع القيم

لكن هل يعني هذا اني اذا استخدمت خطوط , ما بتظهر الاجهزة اللي مش محملة فيها هذه الخطوط ؟

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

أحسنت أخي عمر

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

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

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

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

[aktoom]

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

بالضبط ...

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

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

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

أتمنى لك مزيدا من التوفيق ...