عندما بدأ ظهور gen-AI كنت أتعلم HTML/CSS. رأيت كل هذا وقلت: انتظر لحظة، يمكنني استخدام CSS لإنشاء قصة مصورة باستخدام بعض أدوات الذكاء الاصطناعي. بشكل عام، لم أكن مخطئًا، إلا أنني توقعت أن الأمر سيستغرق بضعة أسابيع، وتبين أن الأمر سيستغرق 4 أشهر. ومع ذلك، فإن النتيجة جيدة جدًا، وأنا فخور بهذا العمل وتعلمت الكثير من خلال القيام به. لذا، دعني أخبرك لماذا وتذوق كيف فعلت ذلك:

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

2-الأتمتة: عندما تقوم بإنشاء قصة مصورة باستخدام html وcss، فإنك تقوم بترميز قصة مصورة بشكل أساسي. وبعد ذلك، يمكنك الاستفادة من قوة الأتمتة.
فقاعات الكلام، والأخطاء المطبعية، والتخطيط... كل شيء يمكن القيام به على نطاق واسع بنقرة واحدة، أو سطرين من التعليمات البرمجية. لا أعلم ما إذا كان استخدام تقنيات الويب لهذا الغرض سينمو أم لا، وأظن أنه أمر خاص جدًا من جهتي. ومع ذلك، فإن النتائج مذهلة.
التالي هو عرض لغلاف كتابي الهزلي في كود VS. باستخدام DevTools، يمكنك التحكم في أي شيء تقريبًا. كأنها صنعت لهذا.

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

بقدر ما أعرف (صححني إذا كنت مخطئًا)، في جميع هذه الأنظمة الأساسية، يمكنك إنشاء بعض الملفات القابلة للتصدير بشكل أساسي —PDF، JPG، DOC...— لذلك، إذا جاءت اللحظة التي تريد فيها ترجمة الرسوم الهزلية الخاصة بك إلى لغات أخرى سيكون عليك تكرار العملية مرارًا وتكرارًا. يبلغ حجم كتابي الهزلي حوالي 264 صفحة، وصدقوني، حتى المهمة التي تبدو بسيطة وهي نسخ/لصق كل النص بلغة أخرى أصبحت غير قابلة للتغلب عليها بعد... 20 صفحة؟ كي لا نقول إذا قمت بإنشاء المئات.

إذا كنت تستخدم تقنيات الويب لإنشاء قصصك المصورة، فيمكنك الاستفادة من قوة متصفحك لإجراء ترجمات تلقائية بنقرة بسيطة فقط. تقريبا السحر.

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

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

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

لقد استخدمت ملحق
Live Server في كود VS لتصور العملية على خادم محلي.

5-التدريب على HTML/CSS: كان هذا على رأس أهدافي في القيام بذلك. كنت أرغب في التدرب على html وcss، والتدرب بشكل خاص على CSS GRID، وكانت فكرة فعالة حقًا. إن إنشاء القصص المصورة باستخدام لغات الويب هذه أعطى العذر لاستخدام قدر كبير مما يمكن أن تقدمه هذه اللغات، إن لم يكن كل شيء. في CSS، استخدمت المتغيرات والخصائص والتخطيط وتصميم النص... وكان مقدار ما تعلمته هائلاً وأفضل ما في الأمر هو أنها كانت عملية ممتعة لأنني كنت أقوم بهذا المشروع الذي أحبه.

CSS GRID تستحق إشارة خاصة. منذ بداية CSS كلغة، كان تصميم HTML من أجل إنشاء تخطيطات معقدة بمثابة ألم حقيقي: تحديد المواقع، وحيل الهامش، وجداول التخطيط... لا أكثر. إن إنشاء هذا الفيلم الهزلي هو في الواقع دليل على قوة CSS Grid وما يمكنك فعله به. عندما بدأت التعلم، أدركت بسرعة أن هذه الأداة كما لو أنها صنعت لصنع القصص المصورة. إن مستوى الدقة والتحكم المنخفض الذي يمنحك أمرًا مذهلاً ويبدو طبيعيًا ومناسبًا. يحتوي الأمر على منحنى تعليمي حاد في البداية، ولكن بعد أن تتقن ذلك، على المدى الطويل
يستحق كل هذا العناء حقًا. أود أن أقول إنها القطعة المركزية لعمل قصة مصورة على شبكة الإنترنت بأبسط طريقة وهي استثمار كبير في المهارات. هنا هو كيف يبدو رمز CSS لغلاف الكتاب الهزلي. أقوم باختيار فئة .page-1 وأعطي موضعًا باستخدام اختصار قالب الشبكة. لقد قمت بتعيين خلفية الصفحة إلى اللون الأسود وتصميم جميع الصور التي قمت بتحميلها على ملف HTML.

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

شاهد القصة المصورة

هنا