عذب القوافي
12-12-10, 12:48 AM
السلام عليكم
تم اعتماد ان تكون الدروس في هذه الدوره مفتوحه وان تكون دروس الدوره المتقدمه المتخصصه مغلقه لمن ينتسب كمبتدء هنا ومن ثم سيتم نقله لمجموعة متدرب
الدرس الاول (مهم للغاية معاينته وذلك لمعرفة المتطلبات)
[درس] الدرس الاول [دورة تصميم الاستايلات قابله للتمدد] نظره حول المتطلبات والاساسيات (http://www.3deeel.com/vb/thread120607.html)
طبعا ً مثلما اشرنا هنا دورة متقدمه لمن يعرف التعامل مع الفوتوشوب
وباقي المستلزمات مثل السيرفر الشخصي والفرونت بيج سنعود لكم بالشرح حولها عند الوصول اليها في حينها والتي ذكرت في الدرس الاول حول الاحتياجات
الان سنبدأ العمل في تصميم الاستايل
1- تمهيد
هناك 3 نقاط محرمه في كل اجزاء الاستايل
أ- نقطه في الهيدر
ب_ نقطة في تأطير الاقسام
ج- نقطة في الفوتر
ماهي النقاط المحرمه ؟
الجواب
هي مناطق يتم تصميمها لتقبل التمدد في الاستايل مثلما تعلمنا ماذا يعني المطاط
وهذه المناطق يجب ان لا تكون تحتها اي زخرفه نهائيا وهي صوره صغيرة الحجم تكرر نفسها لتناسب حجم المستعرض
وسيكون المثال عليه في التصميم التالي
نبدأ بسم الله
افتح عمل بمقاس يكون اصغر من 800 ويفضل مقاس 790 او 770 حسب حاجتك وهنا سأعمل على مقاس 790 والطول لا يهم اخترت 900 عشان يكون عندي مكان للعمل لانني في التقطيع لن احتاج الا العرض وليس للطول لكامل الاستايل
http://www.3deeel.com/drs/r001.jpg
وهنا سأعمل على تصميم استايل حسب نظرتي له وكل شخص له الحريه في التصميم
فرحتي اليوم بفوز فريق الوحده الاماراتي في احدى مباريات بطولة اندية العالم
وراح اصمم لهم استايل بهذه المناسبه وعليه قد حددت الالوان وهي الوان الفريق الرسميه العنابية والفضيه
طبعا سأضع حجر الاساس للاستايل وهو الهيدر والفوتر وتأطير الاقسام وهذا افتراضي في العمل ويمكن لاي شخص عمله ومن هنا اذا طبقت يكون حددت حجم الهيدر والفوتر والاقسام
مثال
http://www.3deeel.com/drs/r012.jpg
شاهد لاحقا شكل (1)
هو تحديد المناطق المحرمه في التصميم قبل الشروع في التصميم وادخال الصور
حاول ان تعمل هيدر بمقاس لا يزيد عن 200 او 250 في الارتفاع حتى يكون مناسبا في السرعه
والفوتر بمقاس 150 او اقل في الارتفاع
اما الاقسام لا يشترط الارتفاع لانه سنعمل على تصميم عمود يقبل التمدد حسب حجم كل قسم
المناطق المحرمه لا اقبل اي زخرفه او اي تلاعب تحتها يجب ان تكون بخط مستقيم لانه الصوره ستكون صغيره وستكرر نفسها حسب حجم الشاشه وهذا مهم جدا لديك المنطقه الحره وهي تحت تصرفك ضع فوقها الصور وكل ما ترغب من زخرفه واترك لي المناطق المحرمه دون اي زخرفه تحتها
شاهد شكل (1)
http://www.3deeel.com/drs/r003.jpg
مثلما شاهدنا في المثال بالشكل رقم 1
تركت لكم مساحه كبيره للتلاعب فوقها وطلبت منكم مناطق صغيره محرمه ويمكنك عملها في اي مكان لا يشترط المكان اللذي انا حددته على كيفك يمين او يسار عدا المناطق المحرمه تبع الاقسام يجب ان تكون فوق بعضها وبنفس الخط حتى يتم تطبيق شرط توزيع رباعي الاطراف لتمدد الاعمده وهذا ما سنشير اليه لاحقا
نكمل الدرس
هنا طبقت الشروط
لاحظ تصميمي بعدما قمت بادخال الصور والتلاعب واحتفظت بالمناطق المحرمه دون اي زخرفه تحتها
1- في الهيدر بين اللاعبين وكأس الدوره
2- في الفوتر بين اسماعيل مطر واسم النادي
3-في الاقسام بالوسط وسيكون هذا المكان لاسم القسم
4- واسفل الاقسام مباشره موازي لمكان اسم القسم وسندخل عليه متغير اظهار اسم الموقع فيما بعد
اتبعت الشرط والمناطق المحرمه هي على شكل خد مستقيم عليه ارضيات ولكنها ليست مزخرفه وهي في خط واحد
مثال على النقطه المحرمه بعد التقطيع
http://www.3deeel.com/drs/r007.jpg
طبعا هي صوره تكرر نفسها حسب حجم الشاشه وطالما لا يوجد فيها زخرفه راح تطلع مضبوطه
لاحظ هنا كررتها في حجم اكبر وطلعت بدون تشوه وكأنها صوره وحده وليست اربع صور جنب بعض
http://www.3deeel.com/drs/r008.jpg
طيب نعمل زخرفه ونشوف الفرق
واذا كانت هناك زخرفه في الارضيه لن ينفع التمدد وهنا عملت لكم مثال
الصوره تحتها زخرفه
http://www.3deeel.com/drs/r009.jpg
وهنا بعد التقطيع وقبل التوزيع وجعلها ارضيه للتمدد
http://www.3deeel.com/drs/r010.jpg
طيب هنا بعد ادخالها التوزيع واذا كان المتصفح يستخدم الشاشه بمقاس كبير لاحظ التمدد كيف يتشوه
http://www.3deeel.com/drs/r011.jpg
اعتقد هنا وصلت الفكره الشامله للتمدد وسبب التسميه للمنطقة المحرمه وكل ذلك عشان يكون تصميمك مطابق للمعايير القياسيه وما يكون فيه اي تشوه ويقبل اي مقاس للمتصفحين او زوار موقعك
يهمني في الهيدر والفوتر اني اترك مسافه تقريبا 10 من حساب مقاس العمل وهو 790 بحيث 10+790 = 800 وهو المقاس الافتراضي لحجم الشاشه لقبول التمدد الصحيح وفيما بعد سوف ندرس كيف تدخل اشياء متحركه في هذا المكان ليغلب عليها طابع جمالي اخر حسب طريقة عذوووب في ادخال الحركات بالهيدر والفوتر وهنا لم اتطرق لاي حجم بخصوص الاقسام وهذا طبيعي لانه تأطير الاقسام مثلما تلاحظ حجمها اصغر من الهيدر والفوتر وبشكل طبيعي ستكون هناك مساحه كافيه لاسم الاقسام في المناطق المحرمه الخاصه بالاقسام
طبعا ً هنا اهم شي يعرقل المصمم
هي المخيله
يجب ان تكون لديك مخيله واسعه لابداع التصميم وهنا سنرى ان كان هناك مبدعين
مهم جدا ان تطلق العنان لمخيلتك في التصميم وتعبر عنها بالادوات في الفوتوشوب
هي نفس الصوره في الشكل 1 ولكنني استخدمت ماجادت به مخيلتي لاخراج العمل بهذا الشكل
وهي توفر المعطيات مثلا
كأس البطوله
جعلته ايقونه متكرره في كل مكان واطراف التصميم لتأطير الاقسام واخفيت جسم الكأس بالاسفل يعني مجرد خربطه وتلاعب
شكل 2
http://www.3deeel.com/drs/r004.jpg
لاحظ الاسهم حول الشروط
تبقى لنا شئ مهم
وهو ادخال الاعمده للاقسام
وهنا ايضا منطقه شبة محرمه
السبب
يوجد قسم عام تحته مثلا اربعة اقسام
بينما القسم التطويري تحته الكثير من الاقسام الفرعيه
بما يعني
انه لازم العمود يعمل نفس المطاط يتمدد على حسب طول القسم ولكن بطريقه عموديه وليست افقيه
هنا شبه محرمه لانك تقدر تدخل زخرفه خفيفه على عمود القسم وبطريقة احترافيه لانه التمدد هنا عمودي وليس افقي ويمكنك عمل اشكال في العموم بشكل خفيف او ان تعمله بدون اشكال داخليه مجرد ادخال استايل متدرج اللون بالطول وليس بالعرض
مثال للعمود لو احطه فوق بعض 100 مره راح يكون متناسق ولن يظهر انه يتكرر لانني ادخلت له زخرفه بسيطة تظهر التناسق
http://www.3deeel.com/drs/r013.gif
وان يكون المربع الداخلي في تأطير الاقسام متساوي ولا يدخل فيه من اي الحركات التصميميه
لانه كل ما سيدخل داخل المربع الداخلي للاقسام لن يستفاد منه لان بالتقطيع سيتم وضع المسطره على حواف الاعمدة الجانبيه من الداخل وايضا العمود العلوي والسفلي من الداخل
شاهد المثال في الشكل 3 بعد عمل الاعمده وترك مربع الاقسام من الداخل بدون اي تدخل وبطريقة مستقيمه
http://www.3deeel.com/drs/r005.jpg
الى هنا سنكتفي بهذا الدرس وهو سهل جدا ومثلما ذكرت ليس لمستجدي الفوتوشوب وانما لمن يعلم بطرق الدمج والتلاعب فيه
وهذا مثال للشكل النهائي للاستايل الذي قمت بتصميمه ولم يأخذ مني سوى 40 دقيقه لانني قد قمت بتوسيع مخيلتي والفكره جاهزه والحدث مناسب واستعرت بصور للفريق وشعاره وكأس البطوله وشعار الدوره وهذا المهم والالوان هي من الوان الفريق الاساسيه وما سيكمل ذلك فيما بعد عند ادخال الخطوط والوانها
شكل 4 النهائي
http://www.3deeel.com/drs/r006.jpg
الاستايل مرفق لكم بملف مفتوح ومكتوب على كل لير باللغه العربيه وعلى اصدار الفوتوشوب 8 المحبب لي يمكنك فتح العمل ومشاهدة المحتويات وكيف قمت بتصميمه وتقطيع الصور والعمليه سهله مجرد اخفاء العيوب خلف الصور الاماميه
حمل الملف وبعدها ستتضح لك الصوره
ارجو ان اجد تطبيق لكم هنا
وسع مخيلتك واجعل لك هدف للتصميم يمكنك التعبير عن اسم موقعك بادخال الصور المطلوبه المعبره عنه
مثلا اسم الموقع
همس القلوب
ادخل حركات عاطفيه وقلوب
ما ينفع تحط صور سيارات :hugs[1]:
نبذه عن الدرس القادم
الدرس القادم سيكون حول تقطيع الاستايل تمهيدا ُ للتوزيع بشكل صحيح وسيكون الدرس بالتفصيل الممل لانه اذا قطعت الاستايل بشكل صحيح ماراح تتعب في التوزيع وهي العمليه قبل الاخيره والهامه جدا وسنتعلم ان شاء الله كيف نجعل كل صوره تحتوي على رابط لتعمل بشكل صحيح ولاحظ في المثال ادناه كيف جعلت التمدد صحيح ولا يوجد تشوه
مثال على الاستايل بعد تقطيعه وتوزيعه
http://www.3deeel.com/drs/whda
لنا لقاء مع تطبيقاتكم واي مرحله صعبه يرجى اعلامي هنا
لتحميل ملف الاستايل مفتوح
اضغط تاليا
http://www.3deeel.com/upload/./extension/rar.gif (http://www.3deeel.com/upload/uploads/files/adelb6d722b91f.rar)
بالتوفيق
تم اعتماد ان تكون الدروس في هذه الدوره مفتوحه وان تكون دروس الدوره المتقدمه المتخصصه مغلقه لمن ينتسب كمبتدء هنا ومن ثم سيتم نقله لمجموعة متدرب
الدرس الاول (مهم للغاية معاينته وذلك لمعرفة المتطلبات)
[درس] الدرس الاول [دورة تصميم الاستايلات قابله للتمدد] نظره حول المتطلبات والاساسيات (http://www.3deeel.com/vb/thread120607.html)
طبعا ً مثلما اشرنا هنا دورة متقدمه لمن يعرف التعامل مع الفوتوشوب
وباقي المستلزمات مثل السيرفر الشخصي والفرونت بيج سنعود لكم بالشرح حولها عند الوصول اليها في حينها والتي ذكرت في الدرس الاول حول الاحتياجات
الان سنبدأ العمل في تصميم الاستايل
1- تمهيد
هناك 3 نقاط محرمه في كل اجزاء الاستايل
أ- نقطه في الهيدر
ب_ نقطة في تأطير الاقسام
ج- نقطة في الفوتر
ماهي النقاط المحرمه ؟
الجواب
هي مناطق يتم تصميمها لتقبل التمدد في الاستايل مثلما تعلمنا ماذا يعني المطاط
وهذه المناطق يجب ان لا تكون تحتها اي زخرفه نهائيا وهي صوره صغيرة الحجم تكرر نفسها لتناسب حجم المستعرض
وسيكون المثال عليه في التصميم التالي
نبدأ بسم الله
افتح عمل بمقاس يكون اصغر من 800 ويفضل مقاس 790 او 770 حسب حاجتك وهنا سأعمل على مقاس 790 والطول لا يهم اخترت 900 عشان يكون عندي مكان للعمل لانني في التقطيع لن احتاج الا العرض وليس للطول لكامل الاستايل
http://www.3deeel.com/drs/r001.jpg
وهنا سأعمل على تصميم استايل حسب نظرتي له وكل شخص له الحريه في التصميم
فرحتي اليوم بفوز فريق الوحده الاماراتي في احدى مباريات بطولة اندية العالم
وراح اصمم لهم استايل بهذه المناسبه وعليه قد حددت الالوان وهي الوان الفريق الرسميه العنابية والفضيه
طبعا سأضع حجر الاساس للاستايل وهو الهيدر والفوتر وتأطير الاقسام وهذا افتراضي في العمل ويمكن لاي شخص عمله ومن هنا اذا طبقت يكون حددت حجم الهيدر والفوتر والاقسام
مثال
http://www.3deeel.com/drs/r012.jpg
شاهد لاحقا شكل (1)
هو تحديد المناطق المحرمه في التصميم قبل الشروع في التصميم وادخال الصور
حاول ان تعمل هيدر بمقاس لا يزيد عن 200 او 250 في الارتفاع حتى يكون مناسبا في السرعه
والفوتر بمقاس 150 او اقل في الارتفاع
اما الاقسام لا يشترط الارتفاع لانه سنعمل على تصميم عمود يقبل التمدد حسب حجم كل قسم
المناطق المحرمه لا اقبل اي زخرفه او اي تلاعب تحتها يجب ان تكون بخط مستقيم لانه الصوره ستكون صغيره وستكرر نفسها حسب حجم الشاشه وهذا مهم جدا لديك المنطقه الحره وهي تحت تصرفك ضع فوقها الصور وكل ما ترغب من زخرفه واترك لي المناطق المحرمه دون اي زخرفه تحتها
شاهد شكل (1)
http://www.3deeel.com/drs/r003.jpg
مثلما شاهدنا في المثال بالشكل رقم 1
تركت لكم مساحه كبيره للتلاعب فوقها وطلبت منكم مناطق صغيره محرمه ويمكنك عملها في اي مكان لا يشترط المكان اللذي انا حددته على كيفك يمين او يسار عدا المناطق المحرمه تبع الاقسام يجب ان تكون فوق بعضها وبنفس الخط حتى يتم تطبيق شرط توزيع رباعي الاطراف لتمدد الاعمده وهذا ما سنشير اليه لاحقا
نكمل الدرس
هنا طبقت الشروط
لاحظ تصميمي بعدما قمت بادخال الصور والتلاعب واحتفظت بالمناطق المحرمه دون اي زخرفه تحتها
1- في الهيدر بين اللاعبين وكأس الدوره
2- في الفوتر بين اسماعيل مطر واسم النادي
3-في الاقسام بالوسط وسيكون هذا المكان لاسم القسم
4- واسفل الاقسام مباشره موازي لمكان اسم القسم وسندخل عليه متغير اظهار اسم الموقع فيما بعد
اتبعت الشرط والمناطق المحرمه هي على شكل خد مستقيم عليه ارضيات ولكنها ليست مزخرفه وهي في خط واحد
مثال على النقطه المحرمه بعد التقطيع
http://www.3deeel.com/drs/r007.jpg
طبعا هي صوره تكرر نفسها حسب حجم الشاشه وطالما لا يوجد فيها زخرفه راح تطلع مضبوطه
لاحظ هنا كررتها في حجم اكبر وطلعت بدون تشوه وكأنها صوره وحده وليست اربع صور جنب بعض
http://www.3deeel.com/drs/r008.jpg
طيب نعمل زخرفه ونشوف الفرق
واذا كانت هناك زخرفه في الارضيه لن ينفع التمدد وهنا عملت لكم مثال
الصوره تحتها زخرفه
http://www.3deeel.com/drs/r009.jpg
وهنا بعد التقطيع وقبل التوزيع وجعلها ارضيه للتمدد
http://www.3deeel.com/drs/r010.jpg
طيب هنا بعد ادخالها التوزيع واذا كان المتصفح يستخدم الشاشه بمقاس كبير لاحظ التمدد كيف يتشوه
http://www.3deeel.com/drs/r011.jpg
اعتقد هنا وصلت الفكره الشامله للتمدد وسبب التسميه للمنطقة المحرمه وكل ذلك عشان يكون تصميمك مطابق للمعايير القياسيه وما يكون فيه اي تشوه ويقبل اي مقاس للمتصفحين او زوار موقعك
يهمني في الهيدر والفوتر اني اترك مسافه تقريبا 10 من حساب مقاس العمل وهو 790 بحيث 10+790 = 800 وهو المقاس الافتراضي لحجم الشاشه لقبول التمدد الصحيح وفيما بعد سوف ندرس كيف تدخل اشياء متحركه في هذا المكان ليغلب عليها طابع جمالي اخر حسب طريقة عذوووب في ادخال الحركات بالهيدر والفوتر وهنا لم اتطرق لاي حجم بخصوص الاقسام وهذا طبيعي لانه تأطير الاقسام مثلما تلاحظ حجمها اصغر من الهيدر والفوتر وبشكل طبيعي ستكون هناك مساحه كافيه لاسم الاقسام في المناطق المحرمه الخاصه بالاقسام
طبعا ً هنا اهم شي يعرقل المصمم
هي المخيله
يجب ان تكون لديك مخيله واسعه لابداع التصميم وهنا سنرى ان كان هناك مبدعين
مهم جدا ان تطلق العنان لمخيلتك في التصميم وتعبر عنها بالادوات في الفوتوشوب
هي نفس الصوره في الشكل 1 ولكنني استخدمت ماجادت به مخيلتي لاخراج العمل بهذا الشكل
وهي توفر المعطيات مثلا
كأس البطوله
جعلته ايقونه متكرره في كل مكان واطراف التصميم لتأطير الاقسام واخفيت جسم الكأس بالاسفل يعني مجرد خربطه وتلاعب
شكل 2
http://www.3deeel.com/drs/r004.jpg
لاحظ الاسهم حول الشروط
تبقى لنا شئ مهم
وهو ادخال الاعمده للاقسام
وهنا ايضا منطقه شبة محرمه
السبب
يوجد قسم عام تحته مثلا اربعة اقسام
بينما القسم التطويري تحته الكثير من الاقسام الفرعيه
بما يعني
انه لازم العمود يعمل نفس المطاط يتمدد على حسب طول القسم ولكن بطريقه عموديه وليست افقيه
هنا شبه محرمه لانك تقدر تدخل زخرفه خفيفه على عمود القسم وبطريقة احترافيه لانه التمدد هنا عمودي وليس افقي ويمكنك عمل اشكال في العموم بشكل خفيف او ان تعمله بدون اشكال داخليه مجرد ادخال استايل متدرج اللون بالطول وليس بالعرض
مثال للعمود لو احطه فوق بعض 100 مره راح يكون متناسق ولن يظهر انه يتكرر لانني ادخلت له زخرفه بسيطة تظهر التناسق
http://www.3deeel.com/drs/r013.gif
وان يكون المربع الداخلي في تأطير الاقسام متساوي ولا يدخل فيه من اي الحركات التصميميه
لانه كل ما سيدخل داخل المربع الداخلي للاقسام لن يستفاد منه لان بالتقطيع سيتم وضع المسطره على حواف الاعمدة الجانبيه من الداخل وايضا العمود العلوي والسفلي من الداخل
شاهد المثال في الشكل 3 بعد عمل الاعمده وترك مربع الاقسام من الداخل بدون اي تدخل وبطريقة مستقيمه
http://www.3deeel.com/drs/r005.jpg
الى هنا سنكتفي بهذا الدرس وهو سهل جدا ومثلما ذكرت ليس لمستجدي الفوتوشوب وانما لمن يعلم بطرق الدمج والتلاعب فيه
وهذا مثال للشكل النهائي للاستايل الذي قمت بتصميمه ولم يأخذ مني سوى 40 دقيقه لانني قد قمت بتوسيع مخيلتي والفكره جاهزه والحدث مناسب واستعرت بصور للفريق وشعاره وكأس البطوله وشعار الدوره وهذا المهم والالوان هي من الوان الفريق الاساسيه وما سيكمل ذلك فيما بعد عند ادخال الخطوط والوانها
شكل 4 النهائي
http://www.3deeel.com/drs/r006.jpg
الاستايل مرفق لكم بملف مفتوح ومكتوب على كل لير باللغه العربيه وعلى اصدار الفوتوشوب 8 المحبب لي يمكنك فتح العمل ومشاهدة المحتويات وكيف قمت بتصميمه وتقطيع الصور والعمليه سهله مجرد اخفاء العيوب خلف الصور الاماميه
حمل الملف وبعدها ستتضح لك الصوره
ارجو ان اجد تطبيق لكم هنا
وسع مخيلتك واجعل لك هدف للتصميم يمكنك التعبير عن اسم موقعك بادخال الصور المطلوبه المعبره عنه
مثلا اسم الموقع
همس القلوب
ادخل حركات عاطفيه وقلوب
ما ينفع تحط صور سيارات :hugs[1]:
نبذه عن الدرس القادم
الدرس القادم سيكون حول تقطيع الاستايل تمهيدا ُ للتوزيع بشكل صحيح وسيكون الدرس بالتفصيل الممل لانه اذا قطعت الاستايل بشكل صحيح ماراح تتعب في التوزيع وهي العمليه قبل الاخيره والهامه جدا وسنتعلم ان شاء الله كيف نجعل كل صوره تحتوي على رابط لتعمل بشكل صحيح ولاحظ في المثال ادناه كيف جعلت التمدد صحيح ولا يوجد تشوه
مثال على الاستايل بعد تقطيعه وتوزيعه
http://www.3deeel.com/drs/whda
لنا لقاء مع تطبيقاتكم واي مرحله صعبه يرجى اعلامي هنا
لتحميل ملف الاستايل مفتوح
اضغط تاليا
http://www.3deeel.com/upload/./extension/rar.gif (http://www.3deeel.com/upload/uploads/files/adelb6d722b91f.rar)
بالتوفيق