聯成電腦-讓你價值連城

文、Alam老師
 
 
大家好，我是Alam，相信各位已經有一段時間沒看過卡漫動畫風格的作品畫法示範了，所以我這回配合半寫實的時尚電玩或動畫電影的方式來嘗試表現，並且也有相當的立體感處理過程，而今天我們再度利用painter的基本功能，做另一風格的表現，這是一張結合寫實與卡漫風格設計一張擬人畫，意思是在說明「螳螂捕蟬，黃雀在後」而產生弱肉強食的----食物鏈關係。
 
我個人非常喜歡這種自創畫風，其中會搭配一些特效功能和筆刷，用來營造繽紛多彩的氣氛，就讓我們捲起袖子，開始動手吧！
 
 
 

本次作品所使用筆刷如下：

a. 油畫粉蠟筆/圓頭油畫粉蠟筆（透明度 20% ，間距 10%，色彩濃度 90%，色彩混合 57%，最小尺寸隨機改變，表現：壓力）

b. 鉛筆/覆蓋鉛筆 （打草稿用）

c. 混色筆/只加水

d. 照片/模糊

e. 輕柔噴槍

f. 羽毛筆刷

g. 橡皮擦/柔和漂白

h. 橡皮擦/橡皮擦

i. 照片/加入紋路

j. 影像水管/線性大小p角度d

k. 特效/膨脹

l. 特效/髮絲噴濺

m. 藝術家/印象派

n. 花紋畫筆 /遮罩花紋畫筆

 

👉 推薦課程：數位創意電繪設計

 
 
 
1. 首先開始用「鉛筆/覆蓋鉛筆」以灰階畫出基本雛形的線稿，注意每個動物間的外形、姿態及比例，因為這是一張偏於半漫畫卡通趣味的畫作，所以可以先以很隨興輕鬆方式來畫草圖，然後再以更明確的線條畫出完整的線稿！
（因為畫真實人物只要有一點點比例上的誤差~~~~就算技法再好，感覺一定還是怪怪的，但在此，我們可以很放鬆隨興的盡情打稿）。
 
 
 
 
2. 調整線稿並確定成型，再把各部份的動物打上基本色調！
 
 
 
 
3. 根據確定的線稿填上各部份的明暗立體感，關於毛髮的部份則可以使用「特效/髮絲噴濺」來處理！並用「照片/暗化」及「橡皮擦/柔和漂白」來斟酌修飾。
 
 
 
 
4. 動物身上的毛髮、鱗片紋路部份可參考「照片/加入紋路」中的內建式圖案或自行蒐尋圖案來擷取。
 
 
 
 
5. 再來是背景的樹枝部份 ，我們事先關掉剛剛的動物彩色群組，或者降低該圖層的透明度以便觀察樹枝擺設的位置和方向，這裡我們使用的是「花紋畫筆 /遮罩花紋畫筆」採用花紋選項中的「樹幹圍欄」畫出粗細不一並且交錯的樹枝！
 
 
 
 
6. 接著往下發展的是背景部份樹枝立體景深，首先是調整各枝條間的光澤度和色調，只是背景越簡單越好不可太過搶角，我們先著試試基礎背景造型。
 
 
 
 
7. 慢慢加入其他場景元素：樹葉，並且改變其色調及銳利度（影像水管/線性大小p角度d）。
 
 
 
 
8. 打開剛剛處理過的動物群組，並增加鷹爪及蛇皮的光澤度，這樣可以使畫面更生動！
 
 
 
 
9. 繼續增加更遠處的暗黑背景，並添上一雙正在暗處虎視眈眈雙眼！
 
 
 
 
10. 在畫面底下畫上一襲草地，這樣是不是更有故事的趣味性呢？
 
 
 
 
11. 再開新「重疊」圖層刷一下光源在主角上的環境光，並在樹幹上加上陰影，最後經過「等化」效果處理之後，畫面是否更平衡而詼諧了許多了呢？
 
 
 

Photo credit：Pexels
 
 
文、意如老師
 
 
續上一篇 工程師一定要了解Vue.js 資料綁定篇
 
認識資料綁定後接續著我們來認識屬性綁定及事件處理，最後我們要實作一個計數器。
 
 
 

任務一：屬性綁定-v-bind 使用方式

任務二：綁定css-style屬性

2-1.綁定多個css-Style屬性

2-2.綁定：style物件object 寫法（集合）

2-3.綁定：style array 寫法

任務三：事件處理

任務四：實作計數器

 
 
 
任務一：屬性綁定-v-bind使用方式
 
上一篇我們有介紹到可以利用 {{ }} 將資料輸出至網頁模版上，那如果屬性也想要{{}}是不是也能這樣？
 
例如我們預想的寫法
 
const vm = Vue.createApp({
  data () {
    return {
      memberId: 'abc123'
    }
  }
}).mount('#app');
 
<div id="app">
  <p id="{{ memberId }}">...</p>
</div>
 
 
 
但可惜無法直接這麼使用，必須使用屬性綁定v-bind的方式，
▶ 傳統寫法
<p id="member"></p>
 
▶ 綁定綁定v-bind寫法
const vm = Vue.createApp({
  data () {
    return {
      memberId: 'abc123'
    }
  }
}).mount('#app');
 
<div id="app">
  <p v-bind: memberId>
</div>
 
 
 
完整範例：
index.html
<!--以超連結為例-三種寫法都行的通--> 
<div id="myapp">
    超連結<br>
        Note：第一種寫法（傳統寫法）
    <a href="http://www.google.com/" title="連到YiruAtStudio">link0</a><br>
    Note：第二種寫法（綁v-bind）
    <a v-bind:href="url" v-bind:title="hint">link1</a><br>
    Note：第三種寫法
    <a :href="url" :title="hint">link2</a>
</div>
 
main.js
var myapp = new Vue({
  el: '#myapp',
  data: {
    url: 'https://dotblogs.com.tw/YiruAtStudio',
    hint: '連到YiruAtStudio'
  }
})
 
 
 
 
參考以下網址查看完整程式碼以及試試效果：
https://jsfiddle.net/YiruAtStudio/y5d4o0jp/7/
 
 
 
任務二：綁定css-style屬性
 
2-1. 綁定多個css-Style屬性-使用大括弧{}包起來
 
▶ 傳統寫法：
<h2 style=”color:blue;font-size:50px;”>文字</h2>
▶ 屬性綁定寫法：
<h2 :style="{color:mycolor,fontSize:myfsize}">文字</h2>
 
 
 
完整範例：
index.html
<div id="myapp">
<h2 :style="{color:mycolor,fontSize:myfsize}">文字</h2>
</div>
 
main.js
var myapp = new Vue({
  el: '#myapp',
  data: {
    mycolor: 'blue',
    myfsize: '50px'
  }
})
 
 
 
參考以下網址查看完整程式碼以及試試效果：
https://jsfiddle.net/YiruAtStudio/d3ye75ma/1/
 
 
 
2-2.綁定：style物件，使用object 寫法（集合）
 
 
 
 
▶ 傳統寫法：
<h3 style=”color:blue;font-size:50px;”>文字</h3>
▶ 使用object 綁定寫法：
<h3 :style="mystyleObj">HI,文字</h3>
 
 
 
完整範例：
index.html
<div id="myapp">
  <h3 :style="mystyleObj">HI,文字</h3>
</div>
main.js
var myapp = new Vue({
  el: '#myapp',
  data: {
    mystyleObj: {
      color: 'blue',
      FontSize: '50px'
    }
  }
})
 
 
 
參考以下網址查看完整程式碼以及試試效果：
https://jsfiddle.net/YiruAtStudio/h16a5omp/3/
 
 
 
2-3.綁定:style array 寫法
 
▶ 傳統寫法：
<h3 style=”color:blue;font-size:50px;”>文字</h3>
 
▶ 綁定:style array 寫法
<h3 :style="[mycolor,myfontSize]">HI,文字</h3>
 
 
 
完整範例：
index.html
<div id="myapp">
 <h3 :style="[mycolor,myfontSize]">HI,文字</h3>
</div>
 
main.js
var myapp = new Vue({
  el: '#myapp',
  data: {
    mycolor: {'color': 'blue'},
    myfontSize: {'fontSize': '50px'}
  }
})
 
 
 
參考以下網址查看完整程式碼以及試試效果：
https://jsfiddle.net/YiruAtStudio/c6yLfesq/3/
 
 
 
 
任務三：事件處理
 
如果需要功能事件處理function()的時候，可以寫在methods裡
▶ 傳統寫法：
<button onclick="fn()">文字</button>
▶ 綁定事件寫法1：
<button v-on:click="fn()">呼叫fn</button><br>
▶ 綁定事件寫法2：
<button @click="fn()">呼叫fn</button><br>
 
 
 
範例題目：
原文字為 “hihi”，
function方法功能為 :
如文字是 “hihi” 文字將改成 “hello” ,  如果是 “hello” 文字將改成 “hihi”
 
  
 
 
 
完整範例
index.html
<div id="app">
  <!--兩個按鈕效果都一樣-->
  <button v-on:click="fn()">呼叫fn</button><br>
  <!--@為縮寫方式-->
  <button @click="fn()">呼叫fn</button><br>
  {{msg}}
</div>
 
main.js
var myapp = new Vue({
  el: '#myapp',
  data: {
    msg: 'hihi'
  },
methods: {
    fn: function () {
      if (this.msg === 'hihi') {
        this.msg = 'hello'
      } else {
        this.msg = 'hihi'
      }
    }
  }
})
 
console.log(myapp.mycolor)
 
 
 
參考以下網址查看完整程式碼以及試試效果：
https://jsfiddle.net/YiruAtStudio/djbemyo9/21/
 
 
 
任務四：實作計數器
 
 
 
 
完整範例：
index.html
<div id="myapp">
 <button v-on:click="fn()">+1</button><br>
 <button @click="fn2()">-1</button><br>
 計數:{{num}}
</div>
 
main.js
var myapp = new Vue({
  el: '#myapp',
  data: {
    num: 0
  },
  methods: {
    fn: function () {
      this.num += 1
    },
    fn2: function () {
      this.num -= 1
    }
  }
})
 
console.log(myapp.num)
 
參考以下網址查看完整程式碼以及試試效果：
https://jsfiddle.net/YiruAtStudio/08rubh6w/
 
 

文、耀月老師
 
 
各位同學大家好～
畫了那麼久的教學，好像沒畫過錦鯉，所以今天就來畫錦鯉來看看囉^^
 
 

使用筆刷：輕柔炭筆、數位噴槍、油畫粉蠟筆、細節噴槍、紋路筆刷、大號粉彩筆、混色筆-只加水、混色筆-紋路水化等…

 

👉 推薦課程：數位創意電繪設計

 
 
 
1. 首先，我們先用油漆桶工具倒個底色到圖紙上，顏色上我使用墨綠色，代表池塘。
 
 
 
 
2. 使用油畫粉臘筆繪製錦鯉的固有色，這邊使用米白色上色，畫出錦鯉的外型出來。
 
 
 
 
3. 接著一樣拿出油畫粉蠟筆來繪製其他錦鯉的體型，因為其他兩隻是在水裡面，所以顏色上可以用不同顏色做區分，並且將後面的蓮葉也畫出來。
 
 
 
 
4. 用輕柔炭筆搭配混色筆-只加水，畫出在河裡面的水波和池塘的深淺色，讓池面看起來更有臨場感，畫的時候注意光線和水波的變化。
 
 
 
 
5. 用輕柔噴槍來繪製魚身上的陰影：圖層特性使用”相乘”之後搭噴槍繪製魚身上的第一層陰影輪廓。
 
 
 
 
6. 使用”油畫粉蠟筆”來繪製錦鯉身上的斑點，先大致上把斑點撇個方向就好。
 
 
 
 
7. 接著將魚身上的斑點畫出去的部分用”橡皮擦”擦拭乾淨，讓斑點服貼在魚體身上。
 
 
 
 
8. 將錦鯉身上的細節畫上，包含魚眼、魚身體上面的褶皺、以及魚鰭等，畫的時候可以參考真正的魚唷！！！
 
 
 
 
9. 將其他兩隻的錦鯉也畫上細節和陰影，一邊畫一邊修改池塘內的倒影和漣漪，陰影會讓讓兩條魚感覺是在水裡面游的樣子。
 
 
 
 
10. 將上方的鯉魚加強整體對比，並且將魚鱗、細節畫上並整體繪製完畢，其他兩條鯉魚也別忘記身上的細節唷！
後方的荷葉，因為算是遠景，所以不用畫的太仔細，可以隨便撇撇就好XD
 
 
 
 
11. 為了增加整體畫面的生動和躍動感，所以我在周圍畫上了大範圍的漣漪，並且加在錦鯉附近加上水珠特效，看起來整張畫面是否更有張力了呢？
 
 
 

文、Andy老師
 
 
大家好，今天要介紹使用photoshop來製作3D漩渦效果的視覺海報，首先先看一下完成的樣子，如下圖。
 
 
 
 

👉 推薦課程：Photoshop影像處理

 
 
 
好，首先先找一張圖片，這3D效果的原理就是圖片上越亮的地方，就會越凸出，越暗的地方就越凹陷，所以我們找的圖片就是要有亮有暗，不能整個畫面都是亮的，至少畫面50%是亮的，好，那我找的是一張煙火的照片，如下圖。
 
 
 
 
再來就是將此圖片在圖層面板對著它按右鍵，複製出一個新圖層，也可以按複製圖層的快速鍵ctrl+J，如下圖。（圖層面板裡的群組是我做好的範例，就當它不存在吧）
 
 
 
 
 
接著對複製出來的背景圖層做 濾鏡 / 扭曲 / 扭轉效果，如下圖。（那為什麼要複製出一個背景圖層來做效果，而不直接用原本的背景圖層做效果，因為永遠都要有保留原圖的習慣，因為若要修改或重做效果時才方便。）
 
 
 
 
扭轉效果面板彈出後，即可設定扭轉的角度，在扭轉效果面板裡，也可預覽圖片扭轉的樣子，這裡我設定扭轉的角度為632度，如下圖。
 
 
 
 
在扭轉面板裡按下確定，煙火圖片就變成扭轉的樣子了，如下圖。
 
 
 
 
接著再執行3D / 新增來自圖層的網紋 / 景深對應至 / 平面，如下圖。
 
 
 
 
接著畫面就會進入到3D效果，而畫面左下會有控制3D的3個操作圖示面板，分別是旋轉，平移，縮放，我把這操作圖示面板移到右上，方便大家觀看，如下圖。
 
 
 
 
此時煙火圖片就整個突起，變成立體圖，這時我們就可以用右上的工具去旋轉，平移，縮放，來調整這個立體圖的角度，如下圖。
 
 
 
 
再來選擇一下內容面板裡的預設集的未照亮紋理，這樣我們3D圖就不會產生陰影，看起來才有平面立體的效果。當然預設集裡有許多效果，大家也可嘗試不同效果，如下圖。
 
 
 
 
 
接著我用右上的縮放工具來放大圖片，如下圖。
 
 
 
 
接著到圖層面板對著3D圖層按右鍵，點陣化3D，這樣3D圖層就變成一般圖層，但就不能再回頭修改，不過比較省效能，如果電腦不快的話，如下圖。
 
 
 
 
再來就是打字，打字部分就不多做介紹，這次我們主要是3D漩渦效果，以下就是完成圖，謝謝觀賞。
 
 
 

Photo credit：Pexels
 
 
 
文、意如老師
 
 
前幾天接到任務，公司想要將自己的資訊放到維基百科，並且想要架在自己的伺服器上，說實在之前我也沒做過，但既然身為工程師就要有挑戰的精神，話不多說，開始實作吧！（實作時間約30分鐘）
 
 

任務一：下載mediawiki套件

任務二：安裝Xampp伺服器與資料庫

任務三：伺服器與資料庫基本設定

        3-1.將檔案搬移至htdocs資料夾下

        3-2.設定port號

        3-3.錯誤排除處理

        3-4.mediawiki基礎設定

 
 
 
任務一：下載mediawiki套件
 
首先到官方網站把mediawiki整包套件先載下來並安裝到自己的電腦上，
載點如下: https://www.mediawiki.org/wiki/Download/zh
 
 
 
 
目前抓的檔案是 .tar.gz壓縮的檔案，下載回來自己的硬碟後，解壓縮（記得自己安裝在哪個目錄）
完整目錄如下：
 
 
 
 
任務二：安裝Xampp伺服器與資料庫
 
安裝XAMPP包，它是一個Apache網頁伺服器與PHP及MariaDB集合在一起的安裝包，允許使用者可以在自己的電腦上輕易的建立網頁伺服器及MySQL資料庫。
下載路徑：https://www.apachefriends.org/zh_tw/download.html
下載回來後，安裝到自己的硬碟上
 
 
 
 
按下Next下一步，挑選要安裝的環境，如不需要使用時，取消打V
 
 
 
 
接著選擇要儲存路徑，建議預設即可（C:\xampp）
 
 
 
 
 
安裝成功後開啟Xampp控制台，左下角選單列，選擇Xampp Control Panel
 
 
 
 
啟動apache、mysql：點選Actions中的Start按鈕開啟
 
 
 
 
開啟瀏覽器 >> 在網址列上打入 localhost，會出現以下畫面，代表啟動成功
 
 
 
 
開啟MySql 圖形化介面（phpmyadmin）
在MySql右邊按鈕 >> 點選Admin
 
 
 
 
點選Admin按鈕後會自動開啟phpmyadmin 圖形化介面，如下圖：
 
 
有看到以上的畫面就代表伺服器與資料庫已經成功安裝好了
 
 
 
任務三：伺服器與資料庫基本設定
 
3-1.將檔案搬移至htdocs資料夾下
接下來開啟路徑C://xampp/htdocs，把剛剛下載的mediawiki整包套件檔案直接搬到 htdocs 資料夾底下，目前完成的檔案路徑如下：C://xampp/htdocs/mediawiki
 
 
 
 
3-2.設定port號
開Port 設定目錄，開啟路徑為：C:\xampp\apache\conf\extra\httpd-vhosts.conf
設定傾聽port為7410，並加入下列程式碼，請參考：
#Media-7410
Listen 7410
 
##NameVirtualHost *:7410
#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ##ServerName or ##ServerAlias in any <VirtualHost> block.
#
<VirtualHost *:7410>
    ##ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "C:/xampp/htdocs/mediawiki"
    ##ServerName dummy-host.example.com
    ##ServerAlias www.dummy-host.example.com
    ##ErrorLog "logs/dummy-host.example.com-error.log"
    ##CustomLog "logs/dummy-host.example.com-access.log" common
</VirtualHost>
 
 
 
 
加入上述的程式碼後，儲存關閉檔案，記得最後要記得重啟XAMPP。
重啟可直接按下Apache 的 Actions 的Stop ，再按下Start，
重啟後需確認剛剛設定的7410port有開啟
 
 
 
 
接下來再次開啟瀏覽器，輸入localhost:7410，即可成功開啟mediawiki的首頁。
 
 
 
 
3-3.錯誤排除處理
如果網頁無法開啟，可能會碰到以下錯誤的發生
 
 
 
 
或者碰到這種錯誤
 
 
這是因為解壓縮檔案 WinRar和7-zip會忽略了PaxHeader文件，導致錯誤，可以使用WinZip來解壓縮。
 
 
 
3-4. mediawiki基礎設定
點選set up the wiki，基礎設定
 
 
 
 
這個連結到了wiki首頁-安裝頁，點選[繼續]
 
 
 
 
接下來會看到一個歡迎畫面
 
 
 
 
[繼續]往下設定設定資料庫>連線資料庫
基礎設定
資料庫主機：localhost
資料庫名稱：my_wiki
資料庫帳戶：root
 
 
 
 
勾選V使用與安裝程序相同的帳號後按下[繼續]
 
 
 
 
設定wiki的名稱、使用者名稱、使用者密碼、電子郵件地址，設定完後按下[繼續]
 
 
 
 
依自己的需求設定使用者權限，按下[繼續]按鈕直到安裝完成
 
 
 
 
 
 
安裝完成後還需要下載localsettings.php到自己本機上
 
 
 
 
把下載回來的 localsettings.php 放置在您的Wiki的根目錄（index.php所在的目錄）中
 
 
 
 
開啟index.php或直接開啟瀏覽器
網址輸入：localhost:7410/index.php/
即可成功連到你的wiki首頁
 
 
 
 
回到資料庫（phpmyadmin）
開啟Xampp控制台後在MySql右邊按鈕 >> 點選Admin
 
 
 
 
接下來會自動開啟phpmyadmin首頁，接著看到資料庫的地方，已經自動生成剛剛設定的資料表名稱為my_wiki的資料庫
 
 
 
 
確認資料表已經生成後，就可以開始編輯你自己想要的內容了。
 
 
 
 
完成檔如下圖：
 
 
 
 

文、意如老師
 
 
有時候我們收集的數據是千筆甚至數萬筆以上的資料，如何從這些筆數中，找出符合我們所需的資料，這時候就要仰賴篩選這個功能來協助我們。
 
首先準備一組範例資料數據如下：

姓名

報名

地址

電話

國文

數學

獎學金

名次

沈樂豐

板橋

五權南路九十九號

039112356

63

52

100

1

鄭新明

板橋

五權南路九十九號

039112356

88

75

200

2

蔡小燕

公館

博愛路一三一號

039124785

82

63

300

3

黃麗倩

忠孝

南路一段一二四號

039123456

87

84

800

4

周凱明

忠孝

南路一段一二四號

039123456

90

88

800

4

陳智與

三重

民權路一二七號

29213652

93

92

1000

6

吳美足

三重

民權路一二七號

29213652

92

90

1100

7

賴驗新

基隆

和平東路三段一巷一號

29461234

95

90

1200

8

 
 
 

任務、快速篩選資料

任務1：找出報名為“三重”或“忠孝” 地區的學生

任務2：取消篩選

任務3：依色彩做篩選：找出姓名中填滿淺綠色的學生

任務4：找出國文成績大於80分並且數學成績大於70分的學生

任務5：使用內建條件篩選

任務6：找出姓名中姓陳的學生

任務7：找出國文與數學都高於平均的學生

 

👉 推薦課程：Excel財務試算表應用

 
 
 
任務一：快速篩選資料
 
任務1 找出報名為“三重”或“忠孝” 地區的學生
步驟一：
1. 任選一格儲存格
2. 點選工具列中的資料
3. 篩選
 
 
 
 
這時候你會發現標題已經有篩選按鈕了，接下來我們就要使用這些篩選按鈕來找到我們所需要的資料
 
 
 
 
步驟二：
選擇B欄標題中的“報名”篩選按鈕，彈窗中Ｖ勾選三重及忠孝地區後按下確定。
 
 
 
 
任務2：取消篩選
 
點選工具列中的資料 ▶ 再點選一次篩選或者點選清除，即可取消篩選
 
 
 
 
任務3：依色彩做篩選：找出姓名中填滿淺綠色的學生
 
步驟一：點選1姓名篩選鈕 ▶ 篩選2依色彩選單
 
 
 
 
步驟二：儲存格色彩 ▶ 淺綠 ▶ 套用篩選
 
 
 
 
完成篩選
 
 
 
 
任務4：找出國文成績大於80分並且數學成績大於70分的學生
 
先篩選第一個條件國文成績大於80分，國文篩選鈕篩選下拉選擇“大於或等於”,值的部分輸入”80”分
 
 
 
 
套用篩選後再篩選條件2，數學成績大於70分的學生，選擇數學篩選鈕>>篩選下拉選擇“大於或等於”,值的部分輸入“70”分
 
 
 
 
即完成雙條件篩選，以此類推可以多重條件再繼續往下篩選，更精確的找到你想要的資料
 
 
 
 
任務5：使用內建條件篩選
 
再篩選選項中也提供方便的預設條件篩選
篩選 ▶ 請選擇一個
 
 
 
如果是數字篩選的話，有 「=、!==、>=、<、<=」、等等如下圖
 
 
 
 
如是中文字串的篩選選項中則有：「開頭是、開頭不是、包含、不包含」等，如下圖
 
 
 
 
任務6：找出姓名中姓陳的學生
 
步驟一：
1.     點選標題姓名中的篩選按鈕
2.     篩選中請選擇一個
 
 
 
 
步驟二：
選擇“開頭”，右邊下拉式會出現所有人的姓名，但因為我們只想找姓“陳”的學生，所以自行輸入“陳”即可。
 
 
 
 
搜尋結果如下圖：
 
 
 
 
任務7：找出國文與數學都高於平均的學生
 
1. 選擇國文篩選鈕
2. 篩選標籤選擇下拉式“高於平均”
 
 
 
 
3. 再點選數學篩選鈕
4. 篩選標籤選擇下拉式“高於平均”，即完成篩選
 
 
 
 
如果想要更方便的截取篩選結果，並將篩選結果複製到其它地方存取，請參考下一篇

文、Simi老師
 
 
在上次的文章中跟大家介紹了將錯視藝術融入設計與插畫中的範例與優勢，這次要具體說明該如何設計出在平面設計與插畫領域最常被運用的「多義圖形」、「圖地反轉」以及「正倒立共存」的錯視概念，以增加畫面中的趣味感及內容深度。
 
 
創意發想
 
雖然我們把「多義圖形」、「圖地反轉」以及「正倒立共存」這三者分開列舉，但其實後兩者也是屬於「多義圖形」的範疇，即一張圖中包含了多重意義，因此經常被設定為對立的兩種意思。
 
 
例如我的這張《lover or loner?》，就是以「戀人」和「單身」兩種相對的意義來發想。由於題目訂得相當明確，因此要如何讓兩種形象同時存在，著實讓我絞盡了腦汁。
 
首先將三個人的頭部都畫出來，由於人的臉部比較容易令人意識到其存在，因此以遮蔽臉孔局部及不露出虹膜的方式降低臉部存在感。然後同時思考：對我而言一個人時的存在意義為何？他在做些什麼？要如何跟倒轉的兩張臉結合？
 
而這三個問題的答案所指向的就是「閱讀」。於是將兩個人的膚色改成深褐色，並以幾何圖案取代腮紅，使雙人的臉部在逆向時與書本的樣貌更為符合。最後再設法使兩者連結的部位產生連結，於是以領子為主來發想，最後想到將手掌與領子結合，讓畫面更順理成章。
 
 
 
 
而《嫮福雙至》這張作品因為是虎年賀圖的關係，老虎這個形象是絕對必要的，至於另一種形象為何就不是那麼重要，因此我先將老虎的頭部大致畫出來後，再去尋找目前畫面上讓我能產生聯想的元素。
 
老虎粉色的三角形鼻子倒轉過來的形狀讓我聯想到胸部開口的衣服，很快地便決定畫一個女孩子。一開始的人物畫法是用平常的風格呈現，但是如同前面所提到的，由於人物臉部的存在感太過強烈，因此必須要用更風格化的手法來呈現，並讓眼睛、頭髮、皮膚使用近似色，使整個臉部更有一體感，跟平時為了強調眼睛而使用對比色的方式完全不同。
 
 
 
設計策略
 
從上面兩張作品的發想脈絡中，可以整理出幾個設計錯視圖形的策略：「選擇識別度高題材」、「減少色彩影響」、「微弱光影表現」、「避免透視變形」、「省略局部樣貌」、「輪廓誇示轉化」。
 
1. 選擇識別度高題材：
 
包含特徵明不明顯、種類是否普遍為人所知等。例如老虎是大家都知道的動物，就屬於容易識別的題材；但如果選擇「非洲鼴鼠」這種大部分人可能都不確定長什麼樣子的動物的話，由於錯視本身就已經需要一定程度的思考才能感受到其中的趣味性，讓人花費額外精力去思考錯視轉換以外的部分就顯得本末倒置了。
 
 
2. 減少色彩影響：
 
高指標性的色彩會使觀者不易跳脫其中，難以將認知轉換到另一個事物之上。因此關鍵的轉換物件最好是選擇識別度較低的色彩，甚至使用單一色系都能讓顏色對畫面判斷的干擾降到最低。
 
 
3. 微弱光影表現：
 
可避免因光影影響而使情境的設計受到限制。但如果倒轉過來的光影符合情境設定，依然可以使用適當的強度來處理。
 
 
4. 避免透視變形：
 
雖然並非絕對，但多數的「正倒立共存」圖像都傾向使用平面化的方式呈現，或是刻意不將透視的變形表現出來，以減少圖形設計的困難及複雜度。
 
 
5. 省略局部樣貌：
 
在能保有一定識別度的情況下，省去畫面上的次要資訊可以減少影響觀者判斷的元素。例如不畫出眼睛與鼻子可減少對臉部的感知，但仍可被識別為人物肖像。
 
 
6. 輪廓誇示轉化：
 
為了使圖形在倒轉後比較容易被看成另一個圖形，創作者經常選用比較非寫實的誇張風格來表現，或是將之刻意排列或描繪成另一個圖形的輪廓樣貌。
 
 
 
總而言之，就是抓住讓畫面變得較為曖昧的原則，進而讓一張圖能呈現出兩種以上的樣貌，提升內容的深度與層次感，就是設計多義圖形的心法囉！

文、KK老師
 
 
哈囉！我是kk，一個『從事數位行銷十多年，也熱愛幫你透過網路，創造財富』的分享家。
 
通常我們會建議使用WordPress又想要建立電子商務平台的使用者，下載啟用WooCommerce，兩者同屬於同個母公司Automattic，因此系統整合介接度較高，且WooCommerce免費版即支援多款金流方式。
 
 
 
該如何安裝WooCommerce呢？
 
進入WordPress後台，點選「外掛」>「安裝外掛」，搜尋「WooCommerce」下載並啟用。
 
 
 
 
點選「WooCommerce」>「設定」>「付款」即可發現銀行轉帳、支票付款、貨到付款、PayPal等付款方式，可以透過排序來控制資料在前台的顯示順序。
 
 
 
 
若經營的是台灣市場，支票付款比較不符合台灣人使用習慣、PayPal不接受台灣買家透過信用卡付款給台灣賣家。點選「銀行轉帳」的「管理」輸入標題（使用者在結帳會看到的標題）、描述（使用者在結帳會看到的付款方式說明）、指示（會加到感謝頁、電子郵件通知的內容）、帳號詳細資料。使用者在結帳會看到相關資訊，依照步驟操作，但賣家需人工確認是否該筆款項入帳，再進行出貨。
 
 
 
 
點選「貨到付款」的「管理」輸入標題、描述、指示、啟用運送方式、是否接受虛擬訂單。使用者在結帳會看到相關資訊，但會略過付款流程，直接成立訂單，賣家需與合作的物流單位簽約，司機代收款後轉交給賣家。
 
 
 

文、Alam老師
 
 
大家好！我是Alam，這一回跟大家分享的繪圖過程是具有國畫風格的動態水墨跑馬作品－「後有追兵」，這是一張必須表現動態的模擬國畫，在Painter的筆刷中有很多特效筆刷可以畫出心中所想的效果！我們也可以利用自創筆刷來做出類似效果，再搭配「圖層」功能，讓畫面更有豐富的色彩層次！現在就讓我們一起來玩玩看吧 ^^
 

本次所使用筆刷：

a. 噴槍毛筆（擷取筆尖）

b. 輕柔噴槍

c. 橡皮擦/橡皮擦

d. 混色筆/塗抹

e. 影像水管/線性大小P角度D

f. 照片/模糊

g. 照片/暗化

h. 照片/加入紋路

 

👉 推薦課程：數位創意電繪設計

 
 
 
1. 首先用輕柔噴槍來擷取如圖所示的筆尖圖樣，並調整這支筆的屬性參數，設定完畢記得「儲存變體」以便將來可以隨時取用！
 
 
 
 
2. 我們可以用這支筆刷來打簡單的結構稿，把一匹狂奔的馬和天空飛翔的鷹以國畫乾毛筆的方式概略描繪出來。
 
 
 
 
3. 在線稿圖層下方開新圖層開始上一基本色，此時著色可以輕鬆隨意一些，不必太在意顏色會超出現稿範圍，由於是仿古畫，所以色澤不宜太過鮮豔！
 
 
 
 
4. 利用「重疊圖層」搭配上其他色調！
 
 
 
 
5. 開始調整肢體細節的明確度，並抹除局部「重疊圖層」的透明度或增加部份亮度與彩度！
 
 
 
 
6. 利用「輕柔噴槍」調整筆頭為「鉛筆剖面圖」、不透明度：50 %、筆觸抖動：1.38、最小尺寸：12%、間距：116%。在背景天空畫出些許雲朵！
 
 
 
 
7. 調整「影像水管」筆刷的設定條件，讓噴灑出來的分佈效果符合畫面的濃密程度。
 
 
 
 
8. 新開幾個圖層來做幾類野草的噴灑，再針對各圖層來調整色調與清晰度！
 
 
 
 
9. 在此，先介紹一支可以有效表現畫面動態的筆刷－「混色筆/塗抹」，這支筆刷，的使用落筆點是在色塊外圍先放大筆刷，然後以反向輕輕拖曳出具有動態殘影效果的軌跡。
 
 
 
 
10. 最後，繼續使用步驟1所設定的筆刷，再一次描繪馬匹與老鷹的線稿輪廓後，選擇局部具有動態的肢體，使用「混色筆/塗抹」拖曳出動態層次線條，然後經過「等化」處理，一張具有動態效果往前狂奔的馬就出現囉！
 
 
 

Photo credit：Pexels
 
 
 
文、意如老師
 
 
了解了基本的程式架構後，接下來我們要來認識資料綁定以及屬性綁定
 

任務：資料綁定

1. 使用v-text 接資料

2. 使用大括弧 {{ }} 接資料

3. 認識資料型態function

4. 使用v-html 接資料

5. 使用v-model接資料

6. 設計表單資料綁定

 
 
 
任務：資料綁定
 
1. 使用v-text 接資料
例：v-text="message"
 
範例index.html程式碼參考如下：
<div id="myapp">
      <span v-text="message"></span>
</div>
 
 
 
範例main.js程式碼如下：
var myapp = new Vue({
  el: '#myapp',
  data: {
    message: 'Hello myapp!'
  }
})
 
 
 
 
2. 使用大括弧 {{ }} 接資料
 
第二種方法，使用大括號的方式來接資料例如{{message}}，這種方式使用起來會較有彈性更方便。
 
範例Index.html程式碼如下：
<div id="myapp">
      <span>{{message}}</span>
</div>
 
 
 
範例main.js程式碼如下：
var myapp = new Vue({
  el: '#myapp',
  data: {
    message: 'Hello myapp!'
  }
})
 
 
 
兩種方式混合一起用：
 
範例Index.html程式碼如下：
<div id="myapp">
      <span v-text="message"></span>
      <span>{{message}}</span>
</div>
 
 
 
範例main.js程式碼如下：
var myapp = new Vue({
  el: '#myapp',
  data: {
    message: 'Hello myapp!'
  }
})
 
 
 
網頁結果顯示：
 
 
程式碼參考：https://jsfiddle.net/YiruAtStudio/e4809f6t/5/
 
 
 
如果你的main.js是首頁，並預設已經有寫一些內容，那麼我們也可以繼續往下加入（例：17行）
 
 
 
 
這時候開啟我們的首頁最下方，就會有我們剛剛輸入的文字了。
 
 
可參考-程式碼：https://jsfiddle.net/YiruAtStudio/01kdp57w/6/
 
 
 
3. 認識資料型態function
 
如元件檔副檔名為.vue例App.vue它們都是各自獨立非共用，所以元件中的data都只能是function型態，並可用return 方式來回傳資料
例路徑：src\components\mytest.vue
 
參考程式碼如下
<div class="myfont">
        {{mymsg}}
</div>
<script>
export default{
  data () {
    return {
      mymsg: 'hi,mymsg!'
    }
  }
}
</script>
 
 
 
 
4. 使用v-html接資料：例v-html="message
如果要返回（return）的是html，則需要使用的是v-html
 
範例Index.html程式碼如下：
 
<div id="myapp">
 <span v-html="message"></span>
</div>
 
 
 
範例main.js程式碼如下：
var myapp = new Vue({
  el: '#myapp',
  data: {
    message: '<a href="#">我是超連結</a>'
  }
})
console.log(myapp.message)
 
 
 
執行結果：
 
 
完成程式碼參考：https://jsfiddle.net/YiruAtStudio/sx35fd9m/
 
 
 
5. 使用v-model接資料
先來看看v-model的效果如下圖，在使用者填完資料或選擇資料時，下方資訊則會自動更新。
 
 
 
 
使用方式如下，範例index.html程式碼：
<div id="myapp">
  姓名:<input type ="text" v-model="myname">
  購買數量:<input type = "number" v-model="mynum">
  <br>
  {{myname}}，購買數量為:{{mynum}}
</div>
 
 
 
範例main.js程式碼如下：
var myapp = new Vue({
  el: '#myapp',
  data: {
    myname: 'Name:',
    mynum: '5'
  }
})
 
console.log(myapp.myname)
 
 
 
完成檔：
 
 
完成程式碼：https://jsfiddle.net/YiruAtStudio/8vex0af1/
 
 
 
6. 設計表單資料綁定
範例index.html程式碼如下：
<input type ="text" v-model="myname">
<input type = "number" v-model="mynum">
<textarea v-model="mynote"></textarea>
運送:<br>
<input type ="radio" name="s1" v-model="transport"  value="711">7-11<br>
<input type ="radio" name="s1" v-model="transport"  value="family">全家<br>
<input type ="radio" name="s1" v-model="transport"  value="hilife">萊爾富<br>
加購:<br>
<input type="checkbox" v-model="chkbox" value="python">python
<input type="checkbox" v-model="chkbox" value="Java">Java
<input type="checkbox" v-model="chkbox" value="PHP">PHP
付款方式:
<select v-model="select_item">
  <option value="ATM">ATM</option>
  <option value="pay">貨到付款</option>
  <option value="ment">取貨付款</option>
</select>
{{myname}}，購買數量為:{{mynum}}，<br>
{{mynote}}。<br>
運送方式{{transport}}<br>
加購{{chkbox}}<br>
付款方式{{select_item}}
 
 
 
範例main.js程式碼如下：
var myapp = new Vue({
  el: '#myapp',
  data: {
    myname: 'Name:',
    mynum: '5',
    mynote: '備註',
    transport: '請選擇',
    // 宣告checkbox-data中的變數為陣列[]
    chkbox:[],
    //也可宣告null
    select_item:null,
  }
})
 
 
 
執行結果如下圖：