聯成電腦分享:如何用符號來構圖的2種方法

文、Simi老師

這次會用我的作品範例來詳細說明如何利用符號構圖,讓大家能更深入實際應用的方式。如果還沒看過上次的概念篇,建議先去了解一下基礎再回來看這篇會更有效益喔!

如何開始使用符號構圖

一般來說我自己使用符號構圖的方式有兩種:
1. 根據想畫的題材情境選定一個符號之後,再依照符號的形狀擺放物件。
2. 先把主要的元素放上去,選擇跟目前畫面較接近的符號,再微調物件位置與造型。

如果是以前幾乎沒有畫過圖的初學者,我會比較推薦使用第一個方式,這會讓人比較有依據來設計畫面上的圖樣。
但若是對從小喜歡畫圖、用直覺就能畫到不錯程度的同學來說,其實可以考慮後者。如下圖的範例,我一開始是先憑感覺畫出小女孩與螃蟹的互動,之後覺得可以往圓形構圖的方向調整,所以就微調了女孩的姿勢與頭髮動態,使其符合圓形構圖的感覺。

多種構圖刺激靈感

這張圖是參加2021京都國際動漫大獎的作品,自己也比較慎重以待,在構圖階段就畫了四種來挑選。
在初期的發散水平思考會盡量選擇差異比較大的畫面表現,用不同的構圖符號來輔助進行發想,也有利於像這樣必須呈現多種不同畫面的情形。

系列稿創作

當有多張圖的系列稿創作時,在允許的情況下我也會將所有的草圖同時畫出來。這是八張一套的系列圖,因為是兩兩成對,所以也會考慮成對的兩張圖放在一起時的感覺來設計。
只有線條時對於形狀的感覺會比較難以掌控,但利用色塊就能清楚看出造型樣貌,所以先大致塗上底色,同時利用線條和色塊來打稿也是很好的設計方式。

很多學生在聽到要使用符號來構圖時,腦子就會瞬間一片空白,但其實這些都只是輔助進行創作的方法,不要被束縛住而變得窒礙難行,關鍵是要勇於嘗試,別因為害怕不熟悉的事物,而錯失成長的機會。

文章轉自聯成電腦知識專欄https://www.lccnet.com.tw/lccnet/article/details/2005

聯成電腦分享:構圖的藝術 — 利用符號做出成功構圖(概念篇)

文、SIMI老師

在文章開始前,先邀請各位同學來玩個連連看遊戲,你認為哪一張圖跟哪一個幾何形或符號比較像呢?給大家一個小提示,瞇起眼睛、退開一步再來看,或許就會馬上得到答案。

為何要用符號構圖

雖然我們提供了一些符號來輔助構圖的過程,但倒也不限於這些符號,只是這些符號的形狀本身就充斥在我們的生活當中,藉此可以在作畫時:
1. 使觀者視線快速聚焦
2. 幾何形給心理的感受
3. 輔助決定物件的位置

畫面中的主體呈現一個簡單形狀時,由於主要物件會被集中,比起散亂的物件更容易吸引觀者的視線焦點。而簡單的幾何形在心理上也經常會給人不同的感受,繪者可藉此營造出在這張圖中想要帶給觀者的感受。

教學多年來,經常看到學生在構圖時,常有遇到不知道物件該放在哪裡、或是角色的四肢不知該往哪個方向擺動的問題,此時我們只要利用幾何圖形來構圖,就比較容易找出可以擺放的位置,是一個相當有用且便利的方式。

常見構圖形狀與心理感受

在第一張圖中所列出的△、▽、⬦、+、S、X、V、O、L、C,這十個符號,是經常能在畫面中發現的符號類型

1. 三角形構圖法:最古老的構圖法,畫面具有安全感與崇高的氣氛。

2. 十字形構圖法:由垂直線與水平線交叉構成,而得到極為平衡之構圖,代表安定的感覺。

3. 菱形構圖法:予人堅強的印象,具有安定感。

4. 倒三角形構圖法:畫面有不安定感,為呈現危險、奔放等感受之最佳構圖。

5. X形構圖法:整個畫面中所呈現的根本骨架呈X形,這種構圖會使畫 面顯的視野集中,空間深遠。具有動態要素。

6. S字構圖法:一種基本的經典構圖方式。畫面上的景物成S形曲線的方式分佈,具有延長、變化的特點,使畫面看 上去有韻律感,產生優美、雅致、協調的感覺。

7. L形構圖法:L形是一種邊角構圖形式,它佔據畫面的兩邊和一角,使中間透空,視野開闊,使畫 面活潑多變。L的字形又同時具有穩定、安靜的感覺,因此是動靜皆宜的構圖方式。

8. V型構圖法:有深邃, 重壓, 和懸空感,強烈的高低起伏讓畫面有活潑感。

9. 橢圓形構圖法:會讓人深入畫面當中去看,給人以豐滿、平衡、生動、完好的感覺。容易形 成強烈的整體感,並能產生旋轉、運動、收縮等視覺效果。

10. C形構圖法:具有曲線美的特點又能產生變異的視覺焦點,畫面簡潔明瞭。在安排重點物件時,可安排在C形的 缺口處,使人的視覺隨著弧線推移到重點對象。

最後我們來對一下連連看的答案吧!

如果你的想法跟我不完全一樣也沒有關係,有些圖看起來有些模稜兩可、或是包含兩個以上的符號,都是可能發生的情形。
利用幾何形構圖是一種方法和依據,但並不是絕對,各位在構圖時可以用更開放的心情來使用這些工具與方法。
這次的概念篇主要讓同學們了解利用符號來構圖的基本方法,下一次將帶來實踐篇,和大家分享如何具體使用這些方式來構圖。

文章轉自聯成電腦知識專欄https://www.lccnet.com.tw/lccnet/article/details/1981

聯成電腦分享:快速轉存動畫連續圖檔

文、SIMI老師

利用Photoshop製作動畫以後,除了轉存為GIF檔以外,如果想要製作成LINE貼圖可用的APNG檔,或要在Unity遊戲引擎等其他軟體中製作連續動作圖時,就必須要將動畫儲存成連續的PNG檔來使用。但是影格數量動輒數十張,一張一張存取也太過麻煩,因此就要使用轉存的方式來快速達成。

👉 推薦課程:Photoshop影像處理

step.1 演算視訊

在利用Photoshop完成動畫之後,執行:檔案/轉存/演算視訊 。

step.2 圖像輸出設定

由於功能名稱為「演算視訊」,因此很多學生都以為只有影片輸出的功能,但其實也可以將每個影格單獨輸出成靜態圖。

首先將Adobe Media Encoderfu 切換為Photoshop影像順序。

這樣一來,面板上的設定就會是跟圖像相關的項目。
檔案格式可以依照需求選擇PNG或其他格式。

影格速率依照需求設定。
一般基本動畫可設為’24或30,如果是LINE貼圖則設為10即可。

演算選項中的Alpha色板項目只支援部分格式使用,簡單來說它是用來存取透明區域的範圍,因此選擇預設值「無」的話將無法呈現透明的圖檔,因此務必選取。如無特殊需求,選擇「直接進行-未邊緣調和」即可。

step.3 轉存成功

其他如儲存位置、命名、尺寸等可以自己的需要來調整修改,最後點選「演算」就會將圖檔存放到指定的資料夾。接著就可以依照不同的需求進行後續的工作囉!

這個功能我自己通常是在製作LINE貼圖時使用,由於Photoshop無法直接儲存APNG格式,必須要先轉存為連續PNG檔,再用APNG Anime Maker等小程式來合併,此時就會相當方便。當然如果你是用其他可以直接儲存APNG圖檔的軟體作畫(如CLIP)就沒有這個問題,但若是需要在Photoshop中儲存連續圖檔的話,就能派上用場囉!

文章轉自聯成電腦知識專欄https://www.lccnet.com.tw/lccnet/article/details/1962

聯成電腦分享:在PS中利用圖層構圖檢視各種不同構圖吧!

文、SIMI老師

身為一個龜毛的重度選擇障礙患者,有時就是會為了一點小東西來來回回調很久,或是在數個構圖之間僵持不下。此時如果利用PS中的「圖層構圖」功能,就可以在糾結的時候省掉一點力氣(笑)。

👉 推薦課程:Photoshop影像處理

Step.1 開啟圖層構圖視窗

首先點選功能表:視窗/圖層構圖,打開圖層構圖視窗。

Step.2 建立圖層構圖

確認第一個版本的圖層配置之後,點選圖層構圖面板上的「建立新增圖層構圖」。

預設值只有勾選記憶「可見度」,如果勾選「位置」的話也會記憶同一個圖層在不同位置的座標,勾選外觀則是可以記錄不同的圖層樣式設定。

如果在建立的當下沒有勾選的話,也可以在事後於面板上點選開啟或關閉。

只要儲存兩種以上不同設定,在檢視的時候只要點選面板上的圖示,就可以來回切換不同的圖層構圖設定來反覆檢視囉!

Step.3 圖層構圖轉存PDF

在轉存項目中可以將圖層構圖轉存為PDF或檔案。
儲存成PDF時可選擇只儲存選取的圖層構圖或全部儲存。幻燈片選項預設是勾選「前進每隔5秒」,如果取消勾選就不會自動播放下一張,必須手動換頁。如果勾選「在最後一頁之後重複播放」的話,在播放到最後一頁之後將回到第一頁重頭播放。

Step.4 工作區域轉存檔案

轉存檔案的選項比較單純,除了命名規則設定之外,在選擇轉存檔案格式之後調整影像品質,點擊執行就會將多個圖層構圖分別存檔,在跟廠商提案構圖時很好用。

圖層構圖的增設與轉存主要可用於同一作品的不同版本之間做檢視,有時在跟廠商提草圖時常常需要畫3~5個版本,利用圖層構圖可方便自己檢視以及事後匯出。另外就是在完稿前的最後細節調整,有時分別看實在看不出太大差異,但在同一個位置重疊就能很快看出問題,是相當有用的功能喔!

文章轉自聯成電腦知識專欄https://www.lccnet.com.tw/lccnet/article/details/1945

聯成電腦分享:在Photoshop以多視窗檢視影像

文、SIMI老師

在進行電腦繪圖時,由於視窗可以放大檢視,因此許多人就會忍不住將圖片放到非常大來繪製局部,認為這樣就可以畫出細緻的畫面,殊不知一味地放大其實會讓作品缺乏整體感,也容易將某些部位畫得過度細緻。

但若是都不放大畫面,有些細節實在難以處理,因此如何在放大作畫的同時還能檢視整體,就是相當重要的一件事。在這個教學中將介紹兩個方式來輔助檢視畫面,一個是很多繪圖軟體都有內建的「導覽器」,一個是Photoshop中的「多視窗檢視影像」功能。

導覽器

在Photoshop中,點選:視窗/導覽器,就可以開啟導覽器功能。

導覽器視窗本身可以自由縮放到喜歡的大小,直接移動導覽器上的紅框就可以快速將畫面移動到想要放大檢視的部位。如此一來在作畫時即使將畫布放大到200%也能隨時顧及畫面的整體囉!

 

多視窗檢視影像

只要點選:視窗/排列順序/新增「(檔案名稱)」的視窗,就能再次開啟同一個檔案的視窗。

在這邊可以用:視窗/排列順序/兩欄式垂直,將視窗左右擺放,就能同時看到兩個視窗。

只要仔細看視窗上顯示的檔案名稱就會知道,現在畫面上的兩個視窗其實都是指向同一個檔案,不論現在編輯的是哪一個視窗的內容,另一邊都會同步呈現。

這樣一來就可以在放大局部的同時也能檢視全部畫面了。

即使旋轉畫布也能檢視回正時的狀態。

既然已經有導覽器的功能,那麼為何還要有「多視窗檢視影像」的功能呢?

這是因為導覽器的圖像僅能檢視,無法直接編輯,而「多視窗檢視影像」則不僅能檢視畫面,還可以在畫面上直接編修。雖然這個功能看似樸素不起眼,實則相當實用,在作畫的同時可以視自己的作畫需求同時開啟兩個、甚至多個視窗來檢視,對創作的輔助與發展還有更多的可能。

文章轉自聯成電腦知識專欄https://www.lccnet.com.tw/lccnet/article/details/1917

聯成電腦分享:遊戲美術的藝術影響力

文、SIMI老師

雖然20世紀初期就開始有電子遊戲的雛形產生,但當時與其說是遊戲其實也只是一些實驗或概念,並沒有什麼美術視覺可言,充其量只是一些符號與幾何形而已。直到1980年前後,以像素圖為畫面表現的《小蜜蜂》、《小精靈》等遊戲相繼出現,任天堂的《超級瑪利歐》更是風靡了全世界。1990年代隨著遊戲機與電腦等硬體的進步,圖像也越來越精緻細膩,像素圖也漸漸少用於遊戲之中。

《超級瑪利歐》1985

在千禧年到來之前,遊戲美術就已經從2D發展到了3D的世界,雖然此時的3D美術以低面數的模型為主,但3D世界仍讓玩家們感受到前所未有的魅力。


《古墓奇兵》(2001)


《古墓奇兵:暗影》(2018)

不出幾年,3D技術已經可以做出非常細緻的模型與光影,但由於網路遊戲的頻寬等限制,使得美術在模型製作的限制仍多。近年來硬體的阻礙越來越,再加上臉部掃描與動態捕捉的技術發展,使得遊戲畫面變得幾可亂真。但在3D遊戲畫面越來越擬真的同時,早期的像素圖和低面數模型的抽象畫面表現卻演變為一種風格,而非因技術不足不得已的選擇。

像素藝術(Pixel Art)

早期由於硬體效能以及儲存容量的限制,因而發展出像素圖這種造型簡單、顏色與陰影過度少的表現形式。現在的像素圖仍保持其精簡的色彩與造型表現原則,但顏色倒是不限於當年的8bit(256色),在色彩的選擇上更為豐富。

現在使用像素風作畫,除了獨立遊戲製作團隊想節約開發成本這個理由之外,通常是想表現一種既復古又可愛的情懷,由於是來自遊戲的風格,也給人更活潑、輕鬆的感覺。設計師聶永真將此概念應用在2016年蔡英文總統的就職郵票,以及台啤紀念酒瓶等周邊商品上,試圖打破政治嚴肅的框架,給人更加親切的感覺。

圖片來源:聶永真FB

低面數(Low-Poly)

在3D軟體中,三個點即可成一面,模型上的三角形數量就稱為「面數」。由於3D模型使用的面數越多,所耗費的資源就愈大,因此早期3D遊戲中的模型多會採用低面數模型製作,以求遊戲可順暢運行。


面數示意圖

然而現今所謂的Low-Poly不單純只是粗糙的3D模型而已,也被廣泛運用在平面繪圖或立體作品的概念上。這樣以幾何形為主的表現方式,正與及包浩斯的幾何運用概念以及近年扁平化的設計風潮不謀而合。藝術家David Mesguich的系列作品,就是想透過Low-Poly模糊的輪廓,表現曾遭遇到難以名狀的壓力。

圖片來源:David Mesguich

回顧整個電子遊戲美術的發展,彷彿看到了整個西洋藝術史的縮影。歷史總是不斷的重演,除了認識各種不同表現手法之外,也許從這些過去的經驗也有助於幫助我們歸納出未來的遊戲美術發展脈絡。

文章轉自聯成電腦知識專欄https://www.lccnet.com.tw/lccnet/article/details/1892