」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 我使用 HTML/CSS + AI 製作了一個網路漫畫...

我使用 HTML/CSS + AI 製作了一個網路漫畫...

發佈於2024-08-29
瀏覽:185

gen-AI開始出現時,我正在學習 HTML/CSS。我看到這一切並說:等一下,我可以使用 CSS 和一些 AI 工具來製作漫畫。總的來說,我沒有錯,只是我預計需要幾週時間,結果卻花了四個月。然而,結果相當不錯,我為這項工作感到自豪,並且我從中學到了很多東西。那麼,讓我告訴你為什麼以及如何我這樣做的味道:

1-免費工具:除非您選擇使用付費人工智慧產生器(我推薦),您需要的所有其他工具都是免費的。
就我而言,我只使用了 VS code,只使用了 HTML 和 CSS。不需要更多。所有字體、資源和工具都可以免費找到。
沒有必要就不要增加東西。這是兩個超強大的工具。掌握它,花一段時間就夠了。
I made a webcomic using HTML/CSS   AI…

2-自動化:當您使用 html 和 css 製作漫畫時,您本質上是在編寫漫畫程式碼。然後,您可以利用自動化的力量。
氣泡、拼字錯誤、佈局…一切都可以透過點擊或幾行程式碼大規模完成。我不知道為此目的使用網路技術是否會成長,我懷疑這對我來說是一件非常特殊的事情。然而,結果是驚人的。
接下來是 VS code 中我的漫畫封面的視圖。使用 DevTools,您幾乎可以控制任何事情。就像是為此而生一樣。
I made a webcomic using HTML/CSS   AI…

3-翻譯:這是一件大事。因為即使您使用這些無程式碼平台之一來製作漫畫,您也會失去這種自動化的力量。

據我所知(如果我錯了,請糾正我),在所有這些平台中,您基本上創建了一些可導出的文件- PDF、JPG、DOC ... - 因此,如果您想要翻譯漫畫的那一刻到來翻譯成另一種語言,你將不得不一遍又一遍地重複這個過程。我的漫畫大約有 264 頁,相信我,即使是看似簡單的以其他語言複製/貼上所有文字的任務,也開始變得難以逾越...... 20 頁?更不用說你是否創造了數百個。

如果您使用網路技術來製作漫畫,那麼您只需單擊即可利用瀏覽器的強大功能進行自動翻譯。幾乎是魔法。

我的建議是雙重的。首先,對於翻譯,迄今為止最好的瀏覽器是chrome,因為它嵌入了谷歌翻譯器並且支援幾乎所有你能想像到的語言(有一些瘋狂的...) 。其次,即使是自動的,您也需要檢查每一頁以進行品質控制。這是因為有些語言比其他語言更冗長,這可能會極大地改變對話氣泡的長度以及您未設定的力量大小和位置,從而破壞頁面的樣式。
漫畫頁翻譯為繁體中文的例子:
I made a webcomic using HTML/CSS   AI…
一個重要的屬性需要知道的是翻譯,它允許您設定為“是”或“否”。假設您不想翻譯某些單字或句子。您可以設定為 NO,瀏覽器將不會執行翻譯。
4-在線發布:如果您不想提交給中間人並在線發布您的漫畫,例如在您的個人網站上怎麼辦?

這是一個很好的選擇。我透過這樣做和出版漫畫獲得的經驗之一是,平台就像看門人一樣——合理,甚至可以預測——但不是必需的。這是網路的魅力之一,一種去中心化的媒體,你可以創建自己的網路/平台並在那裡發布你的漫畫,而不必透過其他人強加給你的過濾器——相信我,有很多過濾器,即使在像亞馬遜這樣似乎沒有意識形態的平台上也是如此。
我在 VS 程式碼中使用了 Live Server 擴充功能來視覺化本機伺服器上的進程。
I made a webcomic using HTML/CSS   AI…

5-練習 HTML/CSS: 這是我這樣做的首要目標。
我想練習html和css,特別是掌握CSS GRID,這確實是一個有效的想法。使用這些網路語言製作漫畫為我們提供了使用這些語言所能提供的大部分內容(如果不是全部的話)的藉口。在 CSS 中,我使用了變數、屬性、佈局、文字樣式...我學到的東西是巨大的,最棒的是,這是一個有趣的過程,因為我正在做這個我喜歡的專案。
CSS GRID 值得特別一提。自從 CSS 作為一種語言誕生以來,為 HTML 設計樣式以製作複雜的佈局確實是一件痛苦的事情:定位、邊距技巧、佈局表……僅此而已。製作這部漫畫實際上是 CSS Grid 強大功能的證明 以及您可以用它做什麼。
當我開始學習時,我很快就意識到這個工具就像是為了製作漫畫而生的。其精確度和低控制水平給您帶來驚人的感覺,並且感覺自然且合適。一開始它的學習曲線很陡峭,但是當你掌握了它之後,從長遠來看真的值得。我想說,這是以最簡單的方式製作網路漫畫的核心部分,也是一項巨大的技能投資。
這是漫畫封面的 CSS 程式碼的樣子。我選擇 .page-1 類別並使用網格模板速記給出一個位置。我將頁面背景設為黑色,並將我在 HTML 檔案上上傳的所有圖像設定為樣式。
I made a webcomic using HTML/CSS   AI…

這真是一次偉大而有趣的冒險(即使我花了比預期更多的時間)。現在我對前端有點厭倦了。想要繼續後端並製作一個很酷的全端專案。

看漫畫這裡

版本聲明 本文轉載於:https://dev.to/oscar_oro/i-made-a-webcomic-using-htmlcss-ai-1b6d?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 極簡生活的藝術
    極簡生活的藝術
    什麼是極簡生活? 極簡生活是一種有意減少擁有的財產數量和生活中雜亂的生活方式。這不僅是為了整理您的空間,也是為了簡化您的生活,專注於真正重要的事情,並減少干擾。 為什麼採用極簡主義? 頭腦清晰:擁有的東西越少,需要擔心的事情就越少,頭腦就越清晰。 財務自由:透過...
    程式設計 發佈於2024-11-06
  • Java 混淆之謎
    Java 混淆之謎
    Come play with our Java Obfuscator & try to deobfuscate this output. The price is the free activation code! Obfuscated Java code Your goal...
    程式設計 發佈於2024-11-06
  • 如何在沒有圖像的 Outlook 電子郵件中建立圓角?
    如何在沒有圖像的 Outlook 電子郵件中建立圓角?
    在沒有圖像的 Outlook 中設定圓角樣式使用 CSS 在電子郵件用戶端中建立圓角可以非常簡單。但是,使用 CSS border-radius 屬性的傳統方法在 Microsoft Outlook 中不起作用。在設計具有圓角元素的電子郵件時,此限制提出了挑戰。 不用擔心,有一個解決方案可以讓您在 ...
    程式設計 發佈於2024-11-06
  • 如何在Python中高效比較字典中相等的鍵值對?
    如何在Python中高效比較字典中相等的鍵值對?
    比較字典是否相等的鍵值對在Python中,比較字典以檢查鍵值對是否相等是一項常見任務。一種方法是迭代字典並使用 zip 和 iteritems 方法比較每一對字典。然而,還有一些替代方法可以提供更好的程式碼優雅性。 其中一種方法是使用字典理解來建立僅包含共享鍵值對的新字典。代碼如下:shared_i...
    程式設計 發佈於2024-11-06
  • 如何在 PHP 中使用數組函數向左旋轉數組元素?
    如何在 PHP 中使用數組函數向左旋轉數組元素?
    在PHP 中向左旋轉數組元素在PHP 中旋轉數組,將第一個元素移動到最後一個元素並重新索引數組,可以使用PHP 的array_push() 和array_shift() 函數組合來實現。 PHP 函數:PHP 沒有專門用於旋轉的內建函數數組。但是,以下程式碼片段示範如何模擬所需的旋轉行為:$numb...
    程式設計 發佈於2024-11-06
  • 如何解決Java存取檔案時出現「系統找不到指定的路徑」錯誤?
    如何解決Java存取檔案時出現「系統找不到指定的路徑」錯誤?
    解決Java 中遇到「系統找不到指定的路徑」時的檔案路徑問題在Java 專案中,嘗試存取文字時遇到錯誤來自指定相對路徑的檔案。此錯誤是由於 java.io.File 類別無法定位指定路徑而產生的。 要解決此問題,建議從類別路徑中檢索文件,而不是依賴文件系統。透過這樣做,您可以消除相對路徑的需要,並確...
    程式設計 發佈於2024-11-06
  • Laravel 中的 defer() 函數如何運作?
    Laravel 中的 defer() 函數如何運作?
    Taylor Otwell 最近宣布了 Laravel 中的新函數 defer()。這只是對 defer() 函數如何運作以及使用它可能遇到的問題進行非常基本的概述。 找出問題 還記得您曾經需要從 API 獲取某些內容,然後在幕後執行一些用戶不關心但仍在等待的操作的路由嗎?是的,我們都至少經歷過一...
    程式設計 發佈於2024-11-06
  • 在 Python Notebook 中探索使用 PySpark、Pandas、DuckDB、Polars 和 DataFusion 的資料操作
    在 Python Notebook 中探索使用 PySpark、Pandas、DuckDB、Polars 和 DataFusion 的資料操作
    Apache Iceberg Crash Course: What is a Data Lakehouse and a Table Format? Free Copy of Apache Iceberg the Definitive Guide Free Apache Iceberg Crash ...
    程式設計 發佈於2024-11-06
  • Vue + Tailwind 和動態類
    Vue + Tailwind 和動態類
    我最近在做的一個專案使用了Vite、Vue和Tailwind。 使用自訂顏色一段時間後,我遇到了一些困惑。 在模板中添加和使用自訂顏色不是問題 - 使用 Tailwind 文件使該過程非常清晰 // tailwind.config.js module.exports = { theme:...
    程式設計 發佈於2024-11-06
  • 端對端(E 測試:綜合指南
    端對端(E 測試:綜合指南
    端到端测试简介 端到端(E2E)测试是软件开发生命周期的重要组成部分,确保整个应用程序流程从开始到结束都按预期运行。与专注于单个组件或几个模块之间交互的单元或集成测试不同,端到端测试从用户的角度验证整个系统。这种方法有助于识别应用程序不同部分交互时可能出现的任何问题,确保无缝且无错误的用户体验。 ...
    程式設計 發佈於2024-11-06
  • 可以在 Go 結構標籤中使用變數嗎?
    可以在 Go 結構標籤中使用變數嗎?
    在Go 結構體標籤中嵌入變數Go 的結構體標籤通常用於註釋和元數據,通常涉及簡單的字符串文字。但是,使用者可能會遇到在這些標籤中需要動態或計算值的情況。 考慮以下結構,其中帶有為 JSON 封送註解的「類型」欄位:type Shape struct { Type string `json:&...
    程式設計 發佈於2024-11-06
  • 如何增強 Visual Studio 的建置詳細程度以實現深入洞察?
    如何增強 Visual Studio 的建置詳細程度以實現深入洞察?
    熟悉 Visual Studio 的建造詳細程度需要全面了解 Visual Studio 建置過程背後的複雜細節?別再猶豫了! 雖然使用 vcbuild 不會產生所需的詳細輸出,但 Visual Studio 的設定中隱藏著一個解決方案。採取以下簡單步驟即可解鎖大量資訊:導覽至 Visual Stu...
    程式設計 發佈於2024-11-06
  • 開發者日記# 誰寫的?
    開發者日記# 誰寫的?
    有個想法困擾著我。也許,我們無法識別它,但日復一日,我們周圍越來越多的人工智慧生成的內容。 LinkedIn 或其他平台上的有趣圖片、影片或貼文。我對帖子的媒體內容沒有疑問(很容易識別它何時生成、從庫存中獲取或創建),但我對帖子的內容表示懷疑。幾乎每次我讀一篇文章時,我都會想這是誰寫的?是作者分享了...
    程式設計 發佈於2024-11-06
  • 哪一種方法計算資料庫行數較快:PDO::rowCount 或 COUNT(*)?
    哪一種方法計算資料庫行數較快:PDO::rowCount 或 COUNT(*)?
    PDO::rowCount 與COUNT(*) 效能在資料庫查詢中計算行數時,選擇使用PDO:: rowCount 和COUNT(*) 會顯著影響效能。 PDO::rowCountPDO::rowCount 傳回受最後一個 SQL 語句影響的行數。但是,對於 SELECT 語句,某些資料庫可能會傳回...
    程式設計 發佈於2024-11-06
  • PART# 使用 HTTP 進行大型資料集的高效能檔案傳輸系統
    PART# 使用 HTTP 進行大型資料集的高效能檔案傳輸系統
    让我们分解提供的HTML、PHP、JavaScript和CSS代码对于分块文件上传仪表板部分。 HTML 代码: 结构概述: Bootstrap for Layout:代码使用 Bootstrap 4.5.2 创建一个包含两个主要部分的响应式布局: 分块上传部分:用于...
    程式設計 發佈於2024-11-06

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3