02Oct ما هو التقديم (التقديم)

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

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

الكلمات "تقديم".

كلمة Render (Rendering) هي لغة إنجليزية، والتي غالبًا ما تُترجم إلى اللغة الروسية بكلمة "Visualization".

ما هو العرض ثلاثي الأبعاد؟

في أغلب الأحيان، عندما نتحدث عن العرض، فإننا نعني العرض في رسومات ثلاثية الأبعاد. تجدر الإشارة على الفور إلى أنه في الواقع، في العرض ثلاثي الأبعاد، لا توجد أبعاد ثلاثية على هذا النحو، والتي يمكننا رؤيتها غالبًا في السينما مرتدين نظارات خاصة. تخبرنا البادئة "3D" في الاسم عن طريقة إنشاء العرض، والذي يستخدم كائنات ثلاثية الأبعاد تم إنشاؤها في برامج الحاسوبللنمذجة ثلاثية الأبعاد. ببساطة، في النهاية ما زلنا نحصل على صورة ثنائية الأبعاد أو تسلسل منها (فيديو) تم إنشاؤه (عرضه) بناءً على نموذج أو مشهد ثلاثي الأبعاد.

يعد التقديم أحد أصعب الأشياء التي يجب القيام بها. من الناحية الفنيةمراحل العمل مع الرسومات ثلاثية الأبعاد. لشرح هذه العملية بلغة بسيطة، يمكن إجراء تشبيه بعمل المصورين. لكي تظهر الصورة بكل مجدها، يحتاج المصور إلى المرور ببعض المراحل الفنية، على سبيل المثال، تطوير الفيلم أو الطباعة على الطابعة. يتحمل الفنانون ثلاثي الأبعاد نفس المراحل الفنية تقريبًا، والذين، من أجل إنشاء الصورة النهائية، يمرون بمرحلة إعداد العرض وعملية العرض نفسها.

بناء الصورة.

كما ذكرنا سابقًا، يعد التصيير من أصعب المراحل الفنية، لأنه أثناء التصيير تكون هناك مراحل معقدة عمليات حسابية، يؤديها محرك التقديم. في هذه المرحلة، يقوم المحرك بترجمة البيانات الرياضية حول المشهد إلى الصورة النهائية ثنائية الأبعاد. خلال العملية جاريةتحويل البيانات الهندسية والأنسجة والإضاءة ثلاثية الأبعاد للمشهد إلى معلومات قيمة اللون المدمجة لكل بكسل في صورة ثنائية الأبعاد. بمعنى آخر، يقوم المحرك، بناءً على البيانات المتوفرة لديه، بحساب اللون الذي يجب تلوينه لكل بكسل من الصورة للحصول على صورة معقدة وجميلة وكاملة.

أنواع العرض الرئيسية:

على المستوى العالمي، هناك نوعان رئيسيان من العرض، والاختلافات الرئيسية بينهما هي السرعة التي يتم بها حساب الصورة وإنهائها، بالإضافة إلى جودة الصورة.

ما هو العرض في الوقت الحقيقي؟

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

نظرًا لأن العامل الأساسي في هذا النوع من العرض هو التفاعل من جانب المستخدم، فيجب عرض الصورة دون تأخير وفي الوقت الفعلي تقريبًا، نظرًا لأنه من المستحيل التنبؤ بدقة بسلوك اللاعب وكيف سيتفاعل مع لعبة أو مشهد تفاعلي. لكي يعمل المشهد التفاعلي أو اللعبة بسلاسة دون هزات أو بطء، يجب على المحرك ثلاثي الأبعاد عرض الصورة بسرعة لا تقل عن 20-25 إطارًا في الثانية. إذا كانت سرعة العرض أقل من 20 إطارًا، فسيشعر المستخدم بعدم الراحة من المشهد، مع ملاحظة الهزات والحركات البطيئة.

تلعب عملية التحسين دورًا كبيرًا في إنشاء عرض سلس في الألعاب والمشاهد التفاعلية. من أجل تحقيق سرعة العرض المطلوبة، يستخدم المطورون حيلًا مختلفة لتقليل الحمل على محرك العرض، في محاولة لتقليل العدد القسري من الحسابات الخاطئة. يتضمن ذلك تقليل جودة النماذج والأنسجة ثلاثية الأبعاد، بالإضافة إلى تسجيل بعض معلومات الضوء والإغاثة في خرائط الأنسجة المعدة مسبقًا. ومن الجدير بالذكر أيضًا أن الجزء الأكبر من الحمل عند حساب العرض في الوقت الفعلي يقع على معدات الرسومات المتخصصة ( بطاقة الفيديو -GPU)، مما يسمح لك بتقليل الحمل من المعالج المركزي(وحدة المعالجة المركزية) وتحرير قوة المعالجة الخاصة بها لمهام أخرى.

ما هو العرض المسبق؟

يتم استخدام العرض المسبق عندما لا تكون السرعة أولوية ولا تكون هناك حاجة للتفاعل. غالبًا ما يستخدم هذا النوع من العرض في صناعة الأفلام، عند العمل مع الرسوم المتحركة والمؤثرات البصرية المعقدة، وكذلك عندما تكون هناك حاجة إلى الواقعية وجودة الصورة العالية جدًا.

على عكس العرض في الوقت الحقيقي، حيث يقع الحمل الرئيسي على بطاقات الرسومات (GPUs) العرض المسبقيقع الحمل على وحدة المعالجة المركزية (CPU) وتعتمد سرعة العرض على عدد النوى والخيوط المتعددة وأداء المعالج.

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

برامج التجسيد.

يوجد الآن عدد كبير من محركات العرض في السوق، والتي تختلف في السرعة وجودة الصورة وسهولة الاستخدام.

كقاعدة عامة، تكون محركات العرض مدمجة في برامج رسومات ثلاثية الأبعاد كبيرة وتتمتع بإمكانيات هائلة. من بين البرامج (الحزم) ثلاثية الأبعاد الأكثر شيوعًا هناك برامج مثل:

• 3ds ماكس؛
• مايا.
• الخلاط؛
• سينما 4 دي وغيرها

تحتوي العديد من هذه الحزم ثلاثية الأبعاد على محركات عرض مضمنة بالفعل. على سبيل المثال، محرك تقديم شعاع العقليةموجودة في حزمة 3Ds Max. بالإضافة إلى ذلك، يمكن توصيل أي محرك عرض شائع تقريبًا بمعظم الحزم ثلاثية الأبعاد المعروفة. من بين محركات العرض الشائعة ما يلي:

• الأشعة السينية؛
• شعاع العقلية؛
• عارض كورونا ، إلخ.

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

لقد وجدت العديد من محركات العرض شهرة في مجالات معينة من العمل باستخدام الرسومات ثلاثية الأبعاد. على سبيل المثال، يحظى "V-ray" بشعبية كبيرة بين المصورين المعماريين بسبب وجوده كمية كبيرةمواد للتصور المعماري وبشكل عام، جودة جيدةيجعل.

طرق التصور.

تستخدم معظم محركات العرض ثلاث طرق حسابية رئيسية. كل واحد منهم له مزاياه وعيوبه، ولكن جميع الطرق الثلاث لها الحق في استخدامها في مواقف معينة.

1. خط المسح (خط المسح).

يعد عرض Scanline هو اختيار أولئك الذين يمنحون الأولوية للسرعة على الجودة. وهذا بالضبط بسبب سرعته، هذا النوعغالبًا ما يتم استخدام العرض في ألعاب الفيديو والمشاهد التفاعلية، وكذلك في إطارات العرض للحزم ثلاثية الأبعاد المتنوعة. باستخدام محول الفيديو الحديث، يمكن لهذا النوع من العرض إنتاج صورة مستقرة وسلسة في الوقت الفعلي بتردد 30 إطارًا في الثانية وما فوق.

خوارزمية العمل:

بدلاً من العرض "بكسل ببكسل"، فإن خوارزمية عارض "scanline" هي أنه يحدد السطح المرئي في الرسومات ثلاثية الأبعاد، والعمل على مبدأ "صف تلو الآخر"، حيث يقوم أولاً بفرز المضلعات اللازمة للعرض حسب أعلى Y الإحداثي الذي ينتمي إلى مضلع معين، وبعد ذلك يتم حساب كل صف من الصورة عن طريق تقاطع الصف مع المضلع الأقرب إلى الكاميرا. تتم إزالة المضلعات التي لم تعد مرئية أثناء الانتقال من صف إلى آخر.

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

2. رايتريس (رايتريس).

تم إنشاء هذا النوع من العرض لأولئك الذين يرغبون في الحصول على صورة بأعلى جودة وعرض تفصيلي. يحظى عرض هذا النوع بشعبية كبيرة بين محبي التصوير الواقعي، ومن الجدير بالذكر أنه ليس بدون سبب. في كثير من الأحيان، بمساعدة عرض تتبع الشعاع، يمكننا رؤية لقطات واقعية بشكل مذهل للطبيعة والهندسة المعمارية، والتي لا يمكن للجميع تمييزها عن الصور الفوتوغرافية، علاوة على ذلك، غالبا ما يتم استخدام طريقة تتبع الشعاع عند العمل على الرسومات في مقطورات أو أفلام CG؛

لسوء الحظ، من أجل الجودة، هذه الخوارزميةالعرض بطيء جدًا ولا يمكن استخدامه بعد في الرسومات في الوقت الفعلي.

خوارزمية العمل:

فكرة خوارزمية Raytrace هي أنه لكل بكسل على الشاشة التقليدية، يتم تتبع شعاع واحد أو أكثر من الكاميرا إلى أقرب نقطة كائن ثلاثي الأبعاد. ثم يمر شعاع من الضوء كمية معينة منارتدادات، والتي قد تتضمن انعكاسات أو انكسارات اعتمادًا على مواد المشهد. يتم حساب لون كل بكسل خوارزميًا بناءً على تفاعل شعاع الضوء مع الكائنات الموجودة في مساره المتتبع.

طريقة البث الشعاعي.

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

غالبًا ما يحدث أن يتم الخلط بين "طريقة تتبع الشعاع" (raytrace) وطريقة "صب الشعاع". ولكن في الواقع، فإن "رمي الشعاع" (طريقة صب الشعاع) هي في الواقع طريقة "تتبع الشعاع" مبسطة، حيث لا يوجد أي معالجة أخرى للأشعة الشاردة أو المكسورة، ويتم حساب السطح الأول فقط في مسار الشعاع .

3. الإشعاع.

بدلاً من "طريقة تتبع الأشعة"، في هذه الطريقةيعمل العرض بشكل مستقل عن الكاميرا وهو كائني التوجه، على عكس طريقة البكسل تلو البكسل. تتمثل الوظيفة الرئيسية لـ "الإشعاع" في محاكاة لون السطح بشكل أكثر دقة من خلال مراعاة الإضاءة غير المباشرة (ارتداد الضوء المبعثر).

تتمثل مزايا "الإشعاع" في الظلال الناعمة المتدرجة وانعكاسات الألوان على جسم قادم من كائنات مجاورة ذات ألوان زاهية.

من الممارسات الشائعة إلى حد ما استخدام Radiosity وRaytrace معًا لتحقيق العروض الأكثر إثارة للإعجاب والواقعية.

ما هو عرض الفيديو؟

في بعض الأحيان، يتم استخدام التعبير "render" ليس فقط عند العمل مع رسومات الكمبيوتر ثلاثية الأبعاد، ولكن أيضًا عند العمل مع ملفات الفيديو. تبدأ عملية عرض الفيديو عندما ينتهي مستخدم محرر الفيديو من العمل على ملف الفيديو، ويقوم بتعيين جميع المعلمات التي يحتاجها، المسارات الصوتيةو تأثيرات بصرية. في الأساس، كل ما تبقى هو دمج كل ما قمنا به في ملف فيديو واحد. يمكن مقارنة هذه العملية بعمل المبرمج عندما يكتب الكود، وبعد ذلك كل ما تبقى هو تجميع كل الكود في برنامج عمل.

مثل المصمم ثلاثي الأبعاد أو محرر الفيديو، تتم عملية العرض تلقائيًا ودون تدخل المستخدم. كل ما هو مطلوب هو ضبط بعض المعلمات قبل البدء.

تعتمد سرعة عرض الفيديو على الطول والجودة المطلوبة للإخراج. في الأساس، تقع معظم العمليات الحسابية على قوة المعالج المركزي، وبالتالي فإن سرعة عرض الفيديو تعتمد على أدائه.

الفئات: , / / ​​من

سنقوم في هذا الدرس بالتحضير لتخطيط الموقع باستخدام تخطيط PSD، وذلك باستخدام نظام الشبكة من إطار عمل Bootstrap 4 فقط. بعد أن تعلمت طريقة التخطيط هذه، يمكنك إنقاذ نفسك من المشاكل المحتملةمع القدرة على التكيف مع الموقع، يعد هذا أمرًا جيدًا بشكل خاص للمبتدئين.

يتم ضمان قابلية الموقع للتكيف عند تصميمه باستخدام شبكة Bootstrap من خلال أنظمة flexbox، المدعومة من قبل جميع المتصفحات الرئيسية وحتى Internet Explorer، بدءًا من IE9+. للمزيد من الإصدارات السابقةمن IE 9، نقوم بتوصيل البرامج النصية التي تساعد في عرض تخطيطنا بشكل صحيح.

والأهم من ذلك، يجب رسم تخطيط PSD في البداية مع مراعاة تخطيط Bootstrap اللاحق. وبالتالي، لا توجد أسباب أخرى لعدم التخطيط باستخدام شبكة التمهيد، سواء في مشاريعك أو عند الطلب. سأحاول تقديم قدر أقل من النظرية، بدون ماء ومزيد من التدريب.

التحضير للتخطيط

افتح التخطيط في Photoshop وتأكد من أنه يحتوي على تخطيط مكون من 12 عمودًا على طول الأدلة، وأن جميع عناصر التصميم محاذية للأدلة. عادة ما تكون المسافة بين الأدلة الخارجية 1170 بكسل.

تحميل على الموقع https://getbootstrap.com/تم تجميع CSS وJS لسهولة التكامل في مشروعك.

نسخ من القسم مقدمة / قالب البداية- قالب صفحة البداية والصقه في ملف HTML الخاص بمشروعك. لقد أنشأنا قالبًا لمستند HTML المستقبلي.

هل يجب عليّ تنزيل bootstrap.min.css أو استخدام رابط إليه؟

من المعتقد أن الملف bootstrap.min.css سيتم تحميله بشكل أسرع لأنه موجود على عدة خوادم، وليس على خادم واحد لديك. وهذا يعني أن الموقع سيفتح بشكل أسرع. إذا كنت لا تزال تقرر تنزيل هذا الملف بنفسك، فحدد ذلك الطريق الصحيحإلى المجلد الذي يحتوي على ملفات Bootstrap. على أية حال، تحتاج إلى إنشاء ملف CSS فارغ حيث ستكتب أنماطك.

مهم! يجب أن يتم تضمين ملف CSS الخاص بك في ملف الفهرس في مستوى أقل من bootstrap.min.css.

نحن نربط الخطوط. يمكن رؤية الخطوط والأيقونات التي يستخدمها المصمم في التخطيط برنامج فوتوشوبأو في التمديد ل متصفح كروم-WhatFont.

لماذا نحتاج إلى ملفين CSS؟

ملف CSS bootstrap.min.css عبارة عن مكتبة لا تحتاج حتى إلى الدخول إليها. نحن نعمل مع ملف واحد فقط - main.css، لكننا نحتاج إلى التأكد من أن أسماء الفئات الجديدة لملف CSS الخاص بك لا تتطابق عن طريق الخطأ مع اسم "المكتبة".

في الملف bootstrap.min.css، تم بالفعل إنشاء أنماط لشبكة flexbox وتمت كتابة استعلامات الوسائط، نحتاج فقط إلى تسجيل الفئات المناسبة في الكتل المطلوبةعلى صفحة HTML. يمكن العثور على أسماء الفئات في صفحة الإطار في القسم شبكة. يقوم مصممو التخطيط ذوو الخبرة في تخطيط Bootstrap بتوصيل المكونات الإضافية (Bootstrap 4 Autocomplete، Bootstrap 4 Snippets) بمحرر كود Sublime Text.

تقسيم تخطيط PSD إلى كتل

نرى أن الموقع يتكون من 8 كتل: رأس بقائمة تنقل (تنقل)، 6 أقسام (قسم) وتذييل.

تظهر في الأقسام (القسم: #الخدمات، #المحفظة) أعمدة، والتي سنقوم بتخطيطها بناءً على مكون Bootstrap الرئيسي - الشبكة.

أولاً نقوم بعمل ترميز HTML للهيكل الرئيسي، وسنضيف التفاصيل مع تقدم التخطيط.

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

عند إنشاء تصميمات مواقع الويب في أدوبي فوتوشوبلا يمكنك الاستغناء عن استخدام نوع من نظام الشبكة. يمكنك إنشاء شبكة بنفسك باستخدام الأدلة، أو استخدام حل جاهز ومثبت - شبكة Bootstrap جاهزة في تنسيق PSD. على الرغم من أن أحجام شبكة Bootstrap الافتراضية تعمل على توحيد التصميم إلى حد ما، هذا الخياراستخدامها بنجاح في عملهم كمية كبيرةمصممي الويب حول العالم. بالإضافة إلى ذلك، يتيح لك هذا التوحيد الأداء في أسرع وقت ممكن تخطيط HTMLالتخطيط الذي تم إنشاؤه، والذي يؤدي حتمًا إلى العمل بشكل أسرع في المشروع في سياق تطوير موقع الويب عبر الإنترنت أو إنشاء القالب.

معلمات شبكة Bootstrap القياسية بتنسيق PSD:

• العرض الكلي منطقة العمل: 1920 بكسل؛
• عرض الحاوية مع الحشو: 1170 بكسل؛
• عرض العمود بدون الحشو: 68 بكسل؛
• عرض الحضيض: 15 بكسل؛
• نظام الشبكة: 12 عمود.

قد يكون هناك خطأ في تباعد الأعمدة وبعض الأبعاد بمقدار +/- 1 بكسل نظرًا لأن بعض الأبعاد الفردية لا يمكن تقسيمها بالتساوي. ولكن هذا ليس حاسما على نطاق التنمية نموذج PSD بالحجم الطبيعيأ.

قواعد العمل مع شبكة Bootstrap PSD

هناك قواعد معينة للعمل مع شبكة Bootstrap. بعض مصممي الويب المبتدئين لا يأخذون هذه القواعد بعين الاعتبار في عملهم، مما يؤدي إلى سوء الفهم بين مصمم التخطيط والمصمم إذا كان هناك فريق يعمل على المشروع. تم تطوير شبكة Bootstrap بتنسيق PSD لإنشاء تصميم موقع ويب استنادًا إلى الخصائص "المادية" لشبكة CSS الخاصة بإطار عمل Bootstrap ويجب على المصمم الالتزام بقواعد معينة لتجنب الاصطدامات غير الضرورية أثناء عملية التطوير.

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

2. يمكنك استخدام أي عدد من الأعمدة الفردية لتصور الكتل المختلفة للموقع.

3. بمجرد تقسيم التخطيط إلى أعمدة وكتل، لا يمكن استخدام المسافات (Gutters) بينها لوضع أي عناصر تصميم أو محتوى موقع.

4. لا تخف من تجاوز الشبكة. إذا قررت إنشاء قسم أو كتلة غير قياسية، فقم بتنفيذ فكرتك خارج شبكة Bootstrap، إذا لزم الأمر. لكن حاول تقديم الحل الخاص بك بنوع من النظام، على سبيل المثال، التمسك بمركز التخطيط أو استخدام ميزات شبكة Bootstrap جزئيًا، أو الحفاظ على تعدد العناصر أو التمسك بأي شيء آخر النظام المنطقيعند إنشاء كتلة مخصصة. سيؤدي هذا إلى تسهيل عمل مصمم التخطيط بشكل كبير إذا كان فريق المطورين يعمل في المشروع. سوف يشكرونك.

النقطة الأخيرة مهمة للغاية، لأن العديد من مصممي الويب المبتدئين يخشون تجاوز شبكة Bootstrap والتصميم، في معظم الحالات، رتيب وممل للغاية. تذكر أنك تحتاج فقط إلى أدلة شبكة Bootstrap لتخطيط كتل موقع الويب التي يجب تنظيمها وفقًا لنظام الشبكة، ويمكن أن يكون هذا تقسيم التخطيط إلى أجزاء منطقية أساسية - الشريط الجانبي + المحتوى، وتحديد عناصر الكتلة، مثل عناصر الرف الدائري، والأخبار أقسام وغيرها بخلاف ذلك، يجب ألا تقتصر على الشبكة وتتصور فقط على طول الأدلة. ومع ذلك، إذا كنت تقوم بتصميم قسم أو كتلة معينة وفقًا لنظام شبكة Bootstrap، فتأكد من اتباع القواعد من النقاط 1،2،3 أعلاه.

كيف تحصل على شبكة التكيف Bootstrap بالعرض المطلوب

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

نقوم بتعطيل جميع المكونات الإضافية وإعادة ضبط جميع الإعدادات على "الافتراضي" (أي الافتراضي).

في قسم "نظام الشبكة"، في الحقل "@grid-gutter-width"، أدخل القيمة "20px" (القيمة الافتراضية هي 30px).

في قسم "أحجام الحاويات"، في الحقل "@container-large-desktop"، أدخل القيمة "940px + @grid-gutter-width":

ثم نذهب إلى أسفل الصفحة ونضغط على زر "ترجمة وتنزيل".

من الأرشيف المستلم نستخدم الملف "bootstrap.min.css"

بعد أن فتحنا، على سبيل المثال، ملف "bootstrap.css" في الملف، ننتقل إلى محددات مواقع @media ونتأكد من تجميع كل شيء بشكل صحيح.

لا يمكن لموقع الويب أو تخطيطه الاستغناء عن شبكة معيارية تحتوي على أعمدة يتم من خلالها بناء بنية الكتلة للموقع. يتم استخدام الشبكات من قبل المصممين ذوي الخبرة والمبتدئين. يحتاج الأخير ببساطة إلى اعتماد هذه المجموعة بأدوات عبر الإنترنت لإنشاء وحدات شبكات PSDوبما أنها ستسهل بشكل كبير العمل على إنشاء الموقع وتجعله أكثر صحة نقطة فنيةالرؤية، وخاصة إذا نحن نتحدث عنعن بعض مصدر المعلوماتعلى سبيل المثال، موقع إخباري أو مدونة أو بوابة، حيث يتم التركيز بشكل أساسي على العرض عالي الجودة للمعلومات.

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

كيف تعمل؟ بسيط جدا. يحدد المصمم المعلمات لإنشاء شبكة تمت الموافقة عليها مسبقًا من قبل فريق التطوير بأكمله. بعد ذلك، يقوم بتنزيل الصورة مع الأعمدة المرسومة فيها تنسيق PNGأو PSD، ويبني تصميم موقع الويب بناءً على الخطوط الناتجة. يبدأ مصمم التخطيط، الذي لديه إطار مُعد مسبقًا، في التنضيد. كل هذا يعمل على تسريع العمل على الموقع بشكل كبير لكل من المصمم ومصمم التخطيط.

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

لذا. نلفت انتباهكم إلى مجموعة من الأدوات لإنشاء شبكات وحدات PSD وCSS، والتي ستسهل بشكل كبير إنشاء موقع على شبكة الإنترنت.

Responsify.itSimple و أداة سهلة الاستخداملإنشاء شبكة سريعة الاستجابة. يولد كما ملف PNGلتطوير التصميم و أنماط المغلقلمصمم التخطيط. إضافة كبيرة من هذه الخدمةهو أنه يمكنك رؤية النتيجة النهائية على الفور. يوجد في الجزء السفلي مفتاح دقة الشاشة. باستخدامه، يمكنك رؤية كيفية إعادة ترتيب أعمدة الموقع على أجهزة مختلفة. Grid Calculator هي أداتي المفضلة لإنشاء شبكات معيارية، والتي أستخدمها بانتظام. هذا نوع من الآلات الحاسبة التي ستخبرك على الفور بعرض العمود الذي سيتم إعطاؤه معلمات معينة للشبكة المعيارية، وهذا مريح ومفيد للغاية. تتيح لك حاسبة الشبكة إنشاء شبكات معيارية بتنسيق PNG، صور المتجهاتوأنماط للفوتوشوب JSX

نمط الشبكة المعيارية مولد صور جيد مع شبكات معيارية بتنسيق PSD و PNG. الفرق الرئيسي بينه وبين معظم المنافسين هو أنه لا يمكنه بناء الأعمدة فحسب، بل أيضًا خطوط أفقية. لبعض المهام سيكون هناك اداة مفيدة. على سبيل المثال، سيسهل العمل على الرسم الممل للجداول مع البيانات عند تطوير تصميم موقع الويب.