article_main_img

文、Alam老師

 

 

 

大家好!我是Alam,今天要介紹分享的作品是Q版人物的設計過程,在這裡除了人物臉部的描寫刻畫,還要介紹不同以往的頭身比例呈現。一般的Q版人物設計通常會比較偏言情小說人物的表現模式,比較沒有太多立體質感,也相較於美式Q版人物的誇張寫實表現,我在這裡特別結合甜美可人與寫實立體的兩項特質,畫出頭身1:3之比例,希望能碰撞出更新穎的畫面質感。

 

 

此次會使用到的筆刷如下(部份會經由修改設計後才使用的):

 

a.噴槍/細緻細節噴槍

b.噴槍/輕柔噴槍

c.鉛筆/覆蓋鉛筆(畫線稿用)

d.油畫粉臘筆/圓頭油畫粉臘筆

e.混色筆/只加水

f.橡皮擦/橡皮擦

g.橡皮擦/柔和漂白

h.特效/膨脹

i.照片/暗化

j.照片/加入紋路

k.特效/擠壓

l.粉彩筆/概念藝術抖動平滑

 

 

 

👉 推薦課程:Painter創意電繪設計

 

 

 

 

1. 首先,挑選一張自己喜歡的照片來做參考製作,在此我特別找一張自家小朋友的近照來示範。一開始,先單獨在一個檔案上把小女孩的輪廓五官描繪出來。因為是Q版人物的形像,我刻意把人物臉形稍微調整得圓潤一點,這樣會有些可愛卡通的感覺!

 

 

 

 

2. 然後,再繼續將上述草稿更明確化一些,主要是臉部表情的呈現!

 

 

 

 

3. 接下來,我們將五官、頭髮及臉部表情細緻化!

 

 

 

 

4. 頭髮方面,依據頭部的輪廓與弧度畫上明暗的立體光影處理,也勾勒出基本層次,髮絲要一氣呵成撇到位才顯得自然。

TIP:頭髮筆刷運用:粉彩筆/概念藝術抖動平滑,在這裡要注意髮流的方向及其自然度和透明度的轉換!

 

 

 

 

5. 以頭部的角度為基準,畫出身體部份的造型線稿,注意Q版人像的頭身比例,此處我設定為1:3左右,因為這樣才能讓小女孩的身材有修飾曲線的空間,看起來會比較靈巧秀氣些。(另外還有1:1和1:2等比例畫法,但身段上看起來會比較誇張而顯得粗短)

 

 

 

 

6. 繼續在服裝及膚色畫上基本色,並初步處理一下明暗關係。

 

 

 

 

7. 擦除不必要的線稿後,再繼續加強服裝上的光影立體感。

 

 

 

 

8. 接著在裙子和披風上添加一些紋路…!(使用筆刷:照片/加入紋路)

 

 

 

 

9. 在公主頭上添加上一個大大的紅色蝴蝶結,先看看效果如何!

 

 

 

 

10.同樣的,如步驟7,也為蝴蝶結精緻化處理做出光影立體感,並使用「特效/擠壓」來強化輪廓皺摺和間隙…!

 

 

 

 

11. 然後,繼續細化頭髮的造型和髮色,再度修飾一下整體的輪廓曲線!

 

 

 

 

12. 背景的部分,無需亂真,宜選擇類似立體卡通的景物造型,我找出一張以前事先畫好的場景圖稍加處理一下(局部模糊化),也能跟女主角相得益彰。

 

 

 

 

13. 最後再加上一些前後景的花花草草來襯托畫面(調整一下模糊程度),一個可愛的小公主就站在你面前囉!

 

 

 

文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣()

article_main_img

文、Andy老師

 

 

 

大家好,這次要跟大家介紹的是快速繪製場景的方法,當然要快速繪製場景就必須使用照片,好,那我們先來看一下完成的效果。

 

 

 

 

 

👉 推薦課程:Photoshop影像處理

 

 

 

好,那我們來看一下如何繪製,首先先將照片在photoshop打開,然後將天空去背,去背的方法可用遮罩配合魔術棒,而魔術棒選不乾淨的部分,則用筆刷配合遮罩去擦除天空,用遮罩的好處是因為遮罩可以來回地擦除和復原,效果如下圖。

 

 

 

 

接著對照片執行濾鏡的模糊的智慧模糊,智慧模糊是可以將圖像輪廓內的顏色中合,但輪廓卻能夠保持銳利,參數的設置可以開啟預覽即可即時看到參數調整後的效果,在這個階段我執行兩次智慧模糊,接著我使用色彩平衡來調色快速鍵是Ctrl+B,讓暗面偏藍紫色,亮面偏黃紅色, 效果如下圖。

 

 

 

 

接著再使用色相飽和度快速鍵是Ctrl+U,因為要讓畫面有繪畫的感覺,所以色調上會調較飽和鮮豔, 效果如下圖。

 

 

 

 

再來我新增一個圖層圖層模式改成色彩增值,接著使用硬邊筆刷去畫影子,把光源設在右上方,因此影子都落在左下方,接著再使用柔邊筆,把一些影子的邊緣畫的比較模糊,如此一來我們就有一個明顯的陰影方向來表現光線的來源,

 

接著我在新增一個圖層模式改為覆蓋,接著使用硬邊的筆刷在畫面受光面去畫上黃橘色的亮面色調,再使用柔邊筆刷去柔化一些硬邊的亮面, 效果如下圖。

 

 

 

 

接著再使用揉邊筆在黑色的暗面處,畫上深紫色和深藍色,讓暗部不是全黑的色調,效果如下圖。

 

 

 

 

接著找一張天空的照片,合成在天空處,並使用智慧模糊, 效果如下圖。

 

 

 

 

接著新增一個覆蓋模式的圖層,來加上一些藍紫色於天空上, 效果如下圖。

 

 

 

 

最後再新增一個覆蓋圖層,用柔邊筆畫上太陽光線, 效果如下圖。

 

 

 

就大功告成了,謝謝觀賞

文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣()

article_main_img

Photo credit:Pixabay

 

 

 

文、意如老師

 

 

 

任務開始:先建立環境

任務一:抓取目前標準時間

任務二:把抓到的標準日期時間顯示在網頁上

任務三:抓出"年、月、日、時、分、秒"

任務四:實作按鈕功能

日期時間: 顯示標準時間

今天日期: 只抓年//

現在時間: 只抓時//

 

 

 

任務開始:

 

首先建立環境,在任意的位置上,例如:”桌面”,點選滑鼠右鍵新建 ”文字文件.txt”,改變檔名、副檔名為.html ,例如: index.html

 

 

 

 

再點選右鍵,使用記事本開啟。

 

 

 

 

打上網頁基本語法

 

<html>

    <head>

        <title>網站標題放這裡</title>

    </head>   

<body>

        網頁內容放這裡

</body>

</html>

<script>

<!--Javascript 區塊-->

</script>

 

 

 

再使用瀏覽器開啟 index.html

 

 

 

 

任務一:抓取目前標準時間

 

在 <script></script>使用new Date()可以抓取目前標準的時間,再使用 console.log() 印出。

例:

<script>

Today = new Date();

console.log(Today);

</script>

 

 

 

 

將網頁重新整理後,按下F12(開發者模式) ,到console(控制台)看看是否已經有印出了目前的標準時間了。

 

 

 

 

任務二:把抓到的標準日期時間顯示在網頁上

 

先在<body></body>中放入一個空盒子<span></span>,id 名為 current

例: <span id="current"></span>

 

再使用Javascript 抓取日期時間後再塞入id=current 的空盒子中。

例:

 document.getElementById('current').innerHTML = new Date();

 

 

 

 

再將你的網頁重新整理後就可以看到目前的標準時間出現在網頁上了。

 

 

 

 

任務三:抓出"年、月、日、時、分、秒"

 

標準日期時間

new Date();

Today.getFullYear()

月份(月份固定+1)

(Today.getMonth()+1)

Today.getDate()

Today.getHours()

Today.getMinutes()

Today.getSeconds()

 

試著用console.log() 印出效果看看。

<script>

Today = new Date();

console.log(Today);

 

y=Today.getFullYear();

console.log("年:"+y);

 

mh=(Today.getMonth()+1);

console.log("月:"+mh);

 

d=Today.getDate();

console.log("日:"+d);

 

h=Today.getHours();

console.log("時:"+h);

 

m=Today.getMinutes();

console.log("分:"+m);

 

s=Today.getSeconds(); 

console.log("秒:"+s);

</script>

 

 

 

接下來使用瀏覽器開啟,並按下F12(開發者模式),點選console(控制台)即可看到效果

 

 

 

 

任務四:實作按鈕功能

 

日期時間:顯示標準時間

今天日期:只抓年/月/日

現在時間:只抓時/分/秒

 

點選按鈕後,右邊出現日期/時間

 

 

 

 

首先做這三個按鈕,按鈕右邊分別放入空的盒子(預備要放日期/時間)的位置。

按鈕製作方式:

<button>按鈕中的文字</button>

空盒子

<span id=”幫盒子取一個名字”></span>

 

例:

<button>日期時間:</button><span id="mToday"></span><Br>

<button>今天日期:</button><span id="mday"></span><Br>

<button>顯示時間:</button><span id="mT"></span><Br>

 

如下圖:

 

 

 

到Javascript中,先把所需要的資料抓出。

<script>

Today = new Date();

yy=Today.getFullYear();

mm=Today.getMonth()+1;

dd=Today.getDate();

h=Today.getHours();

m=Today.getMinutes();

s=Today.getSeconds(); 

</script>

 

接下來要設定第一個按鈕 [日期時間] 點選後要在mToday盒子中顯示”標準的日期時間”

所以先寫一個方法myDate():

 

function myDate(){

        document.getElementById("mToday").innerHTML = Today;

}

 

接下來到button中設定點選後呼叫此方法 myDate()

 

<button onclick=myDate()>日期時間:</button><span id="mToday"></span><Br>

 

 

接著就可以開啟網頁點選第一個按鈕試試看。

 

 

 

 

以此類推,再建立第二個與第三個按鈕的功能。

 

<!--今天日期-->

function mToday(){ 

        document.getElementById("mday").innerHTML = yy+"年"+mm+"月"+dd+"日";

}

 

<!--顯示時間-->

function mTime(){

        document.getElementById("mT").innerHTML = h+":"+m+":"+s;

}

 

 

到第二個與第三個按鈕呼叫如下:

 

<button onclick=mToday()>今天日期:</button><span id="mday"></span><Br>

<button onclick=mTime()>顯示時間:</button><span id="mT"></span><Br>

 

 

 

完成檔如下:

 

 

 

 

完整參考程式碼:

 

 

 

文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣()

article_main_img

文、意如老師

 

 

 

什麼是定位點呢?簡單的來說其實就是對齊方式,尺規上提供了五種對齊的方式分別為:靠左、置中、靠右、對齊小數點、分隔線定位點。

 

 

 

 

說明如下:

 

 

我們馬上來實作看看吧!

 

 

 

首先把尺規先開啟,1.檢視▶將2.尺規打勾▶即可看到左上方的3.定位點按鈕

 

 

 

 

點擊3.定位點按鈕一下可快速切換定位點。

 

     

 

 

 

接下來我們準備一份資料,這份資料上面有品名與價格,我們要將這份資料做成目錄或是菜單樣式。

 

資料如下:

 

豪華辦公網椅$1950

直角白面便利折合會議桌$2520

實用雙層拉門公文櫃$4980

高級活動高櫃$1700

加寬鋁製四階扶手梯$1599

 

 

 

 

任務一:將價格推到最右邊

任務二:移除定位點

任務三:認識置中定位點

任務四:小數點對齊

任務五:分隔線定位點

任務六:加入前置符號

 

 

 

任務一:將價格推到最右邊

 

咦?!那還不簡單就空白鍵按按按按到底就好了啊!!

Oh!! 不!! 千萬別這麼做!! 因為…手會按到抽筋拉!

 

 

 

步驟1:

在$字號前先按下Tab鍵空格(先強制將品名與價格做個區隔),如下圖

 

 

 

步驟2:

全選文字,左上角1.定位點按鈕點兩下切換到靠右定位點 ,接著點選2.尺規上任意位置,你會發現3.所有靠右邊的文字(價錢)乖乖的跑到你點選的位置了。

 

 

 

 

接下來就可以隨心所意的左拉或右拉定位點來控制價錢的位置。

 

 

 

 

任務二:移除定位點標記

 

移除定位點標記,只需要按住定位點標記後往下拉,即可移除。

 

 

 

 

移除定位點標記後,原本的價錢也會回到原位。

 

 

 

 

任務三:認識置中定位點、靠左定位點

 

置中定位點 用法與剛剛的靠右定位點使用方式相同,將定位點固定在尺規的任意位置上,要調整的文字(價格)則會對齊在定位點的中間位置上。

 

 

 

以此類推,靠左定位點 也是一樣,點擊切換1.定位點到靠左定位點,再點選2.尺規上任意位置,要調整的文字(價格)則會對齊在定位點的右邊位置上。

 

 

 

 

任務四:小數點對齊

 

先把價格都填上小數點。

 

 

 

 

接下來點選1.對齊小數點之定位點 ,再點選2.尺規上任意位置,你會發現你的小數點已經對齊定位點了。

 

 

 

 

任務五:分隔線定位點

 

分隔線定位點 ,它就是一條垂直的線,你可以加在你想要的任何地方。

點選1.分隔線定位點 ,再點選2.尺規上任意位置,分隔線馬上出現,接著你就可以隨心所意的左拖右拖調整定位點分隔線的位置。

 

 

 

 

任務六:加入前置符號

 

製作菜單最後一個步驟就是在價錢前面加上虛線或是底線,這邊word都有提供好幾種樣式讓你選擇。

 

 

 

 

1. 全選文字後(Ctrl+A)

2. 常用

3. 段落>>進階

 

 

 

 

點擊定位點按鈕

 

 

 

 

在前置字元中選擇自己喜歡的樣子後按確定鈕,即可完成。

 

 

 

 

 

文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣()