介紹

你好！我的名字是希拉·卡爾馬切拉。在這個場合，我將分享我使用 Clip Studio Paint 為遊戲啟動畫面創建動畫復古像素藝術的經驗。

 

我希望這篇文章對那些正在尋找使用 CSP 創建像素藝術和復古設計的人來說是有趣的提示。

關於復古設計

復古是 70 到 90 年代流行的一種設計風格。復古與久負盛名的複古風格不同。復古風格對其時代具有當代甚至未來主義的印象。復古的獨特之處，可以從選擇比較閃耀的顏色，也就是所謂的霓虹色中看出。復古設計風格隨著迪斯科、派對和運動生活方式的興起而發展。

 

在同一時代，視頻遊戲是用低分辨率圖形開發的，現在被稱為像素藝術。對我來說，以復古風格製作像素藝術的技巧很有趣。

像素藝術的畫佈設置

讓我們開始吧！打開 Clip Studio Paint 然後創建一個新的畫布。我們要創建的最終作品將是 1280 像素 x 720 像素，但要創建像素藝術，我們只需要創建該尺寸的 10%。所以我們需要的畫布尺寸是 128px x 72px。

接下來，我們必須設置網格以更容易繪製像素。轉到視圖 > 網格。

 

現在我們可以在畫布上看到它。但是我們仍然需要調整網格大小。轉到視圖 > 網格/標尺設置。將原點設置在中心，並將間隙 (D) 和分割數設置為 1。

復古配色方案

在我們開始編譯像素之前。首先，我們需要創建一個適合復古風格的調色板。創建一個新圖層以使其成為調色板，將該圖層命名為“復古調色板”。

接下來，雙擊工具箱中的前景色打開顏色設置。我們將創建的第一種顏色是“Hot Pink”。在十六進製字段中，輸入代碼“ff69b4”。然後在畫布上刷。

以下是我們需要的複古調色板上的顏色。

其餘的我們仍然需要黑白，我們可以在標準調色板面板中使用。

像素藝術的工具設置

好的！我們可以使用多種工具來創建具有特殊設置的像素藝術。第一個工具，我們可以使用“圖形工具”如線條、曲線和形狀工具來創建精確的像素對象。

要使用圖形工具創建像素藝術，我們需要關閉抗鋸齒功能。抗鋸齒是一項功能，通過添加和處理數字圖像對象周圍的樣本像素的顏色，使邊緣看起來平滑。

使用抗鋸齒當然像素藝術不會好看。因此，我們必須在左側的工具屬性面板中禁用此功能。在抗鋸齒部分有幾個級別，選擇“無”。

第二個工具，我們可以使用帶有子工具 Marker 和 Dot Pen 類型的“Pen Tool”。這種類型的筆會產生一個 1px 粗細的線條圖，這樣我們就可以輕鬆地創建有機像素對象。

第三個工具，我們可以使用“填充工具”輕鬆填充像素字段。選擇引用其他圖層類型，以便我們可以填寫重疊字段，即使它們是不同的圖層。然後在工具屬性中，取消選中區域縮放。此功能幾乎類似於在像素對像上產生噪聲的抗鋸齒。

第四個工具，當然，我們需要“橡皮擦工具”來擦除作品上不必要的像素。選擇矢量類型以擦除像素而不留下痕跡。

 

好的！其餘的我們可以根據需要使用其他工具。

復古背景

現在讓我們來一場像素盛宴。我們首先為要創建的啟動屏幕創建背景，當然是複古風格。

我用 1px 粗線劃分畫布作為天空和地面區域的地平線。

接下來使用“吸管工具”從我們之前創建的圖層調色板中獲取顏色。我用紫水晶填充天空，用胭脂紅填充地面。

現在創建一個新層，我們將創建一個典型的著名復古設計的日落對象。使用橢圓形狀工具，在按住鍵盤上的“Shift”鍵的同時畫一個圓，使形狀成比例。

使用橡皮擦工具在日落上劃出條紋。你可以像我一樣模仿這種模式。

現在再次創建一個新圖層，我們將用山脈剪影圖像裝飾背景。使用黑色線條工具在日落圖像的右側和左側繪製山脈。

用黑色填充山脈，然後將圖層不透明度更改為 50%。

創建一個新圖層，我們將添加日落前建築物的剪影圖像。這次我用的是點筆。

用幾個彩色像素作為燈光裝飾建築物的圖像。

現在我們移動到地面區域，創建一個新層以在地面上創建一個網格。再次，我使用綠松石藍色的線條工具進行精確設計。

畫一條對角線放在一個點上以進行透視。

複製這一層，然後去編輯>變換>水平翻轉。定位網格，使其在畫布上對稱。然後選擇網格圖層和副本，轉到圖層>合併選定圖層。

現在在已創建網格圖像的對角線上製作水平線。

復古街景

接下來，我們為環境創建對象。我們要營造復古的街頭氛圍。很簡單，我會在道路的左右兩肩上做道路標記和一排棕櫚樹。

 

創建一個圖層文件夾來收集環境對象的圖層。創建一個新層以創建路徑。

現在填充形成路徑的形狀的交叉點，在圖像中用電黃色填充。將圖層不透明度更改為 50%。

創建一個新圖層以創建道路標記。使用線條工具製作白色道路標記。

接下來，創建另一個新層來製作一棵棕櫚樹。使用點筆工具製作。使其左右對稱。

復古車對象

好的！現在是時候創建主模型了。為複古汽車對象創建一個新圖層。用點筆劃出來。

在汽車圖層上方創建一個新圖層，使用黑色在汽車模型表面製作陰影。將圖層不透明度更改為 50%。然後將圖層與汽車圖層合併。

作為補充，在新圖層上的汽車下方製作陰影。將圖層不透明度更改為 50%。

動畫過程

現在是時候讓場景栩栩如生了。我們將對兩個部分進行動畫處理，即街道環境和建築物中的燈光。

 

為此，準備時間線面板。轉到窗口 > 選中時間線。您會發現時間線面板出現在屏幕底部。

在“時間軸”面板中，單擊“新建時間軸”。然後會出現一個新的時間線設置，填寫時間線名稱。將幀率和播放時間設置為 24。場景和鏡頭在 1 號，分割線在 6 號。然後將圖像插值更改為硬邊緣。

要創建動畫，我們需要一個動畫文件夾，其中包含將鏈接到動畫 cel 的特殊圖層。

 

為此，單擊新建動畫文件夾。然後動畫文件夾將出現在“圖層”面板的頂部。將文件夾重命名為“動畫”。目前動畫文件夾是空的。我們必須處理已製作的模型以編譯並成為動畫 cel。

選擇從復古車到背景層的所有模型層。您可以排除圖層調色板並將其保存在底部。然後轉到圖層>創建文件夾並插入圖層。然後所有選定的圖層將被收集到一個文件夾中。將文件夾重命名為“編譯”。

複製編譯文件夾並將復製文件夾重命名為“cel_01”。然後轉到圖層>轉換圖層（H），因此cel_01文件夾更改為單位圖層。將 cel_01 圖層拖到 Animation 文件夾中。

在時間線面板中，確保我們為每個選定的幀選擇標記為紅色的幀號 1，然後單擊指定 cels。我們將被要求選擇將鏈接到 cel 的圖層。選擇 cel_01。

要製作下一個 cel，請執行相同操作。複製編譯文件夾，然後將副本重命名為“cel_02”。在被轉換成一個單元層之前。我們必須轉換這個文件夾中的一些模型來創建運動的錯覺。

現在選擇 cel_02 文件夾中的道路標記圖層。我們將編輯圖像，使其看起來好像道路標記正在向畫布底部前進。所需要做的就是刪除或添加某些部分的像素。

隨著道路標記的移動，棕櫚樹也必須向畫布底部移動。從邏輯的角度來看，接近視圖的對象會看起來更大。因此，隨著它的移動，棕櫚樹必須按比例放大。

 

選擇棕櫚樹圖層，然後去編輯>變換>自由變換。在左側的工具屬性中，將插值方法設置更改為硬邊緣，這樣縮放就不會導致像素噪聲。

現在選擇建築層，改變燈光裝飾，讓它看起來好像燈光在閃爍。

接下來，選擇 cel_02 文件夾。轉到圖層>轉換圖層（H）。將 cel_02 圖層拖到 Animation 文件夾中。在時間軸中選擇第 3 幀，然後單擊指定 cels。選擇 cel_02。在這個動畫中，我將每 2 幀設置一次 cel，播放時間為 24。

在時間軸中選擇第 3 幀，然後單擊指定 cels。選擇 cel_02。

在這個動畫中，我將每 2 幀設置一次 cel，播放時間為 24。

 

對於下一個單元格，請通過更改連續變換來做同樣的事情，以便它產生運動的錯覺。

渲染和發布

好的！我已經用動畫 cel 完成了每 2 幀的構圖和填充，總共 24 幀。

在我們渲染和發布這個動畫之前。讓我提醒您，此動畫的尺寸為 128 像素 x 72 像素。因此，如果我們立即渲染它，我們可以看到的結果就是這個大小。

為此，我們需要先調整它的大小。轉到編輯 > 更改圖像圖像分辨率。將出現分辨率設置窗口。

將寬度更改為 1280 像素，將高度更改為 720 像素。然後將插值方法更改為硬邊。然後在不破壞像素排列的情況下放大圖像。

 

現在我們渲染這個動畫。如果您需要可以使用循環功能查看的動畫結果，那麼我們應該將其導出為動畫 GIF 格式。轉到文件 > 導出動畫 > 動畫 GIF。指定存儲目錄。

將出現渲染窗口，將寬度更改為 1280 像素，將高度更改為 720 像素。

但是，在一些遊戲項目中。通常，開發人員要求以圖像序列的形式呈現初始屏幕。這是因為動畫將使用編程腳本創建。為此，我們可以轉到文件>導出動畫>選擇圖像序列。

將出現渲染設置窗口。指定存儲目錄。選擇 PNG 格式和導出幀清單。

 

好的！我只能分享這些。希望它有用，請支持我提出更多提示。

訂閱我的 YouTube 頻道：