
- Oct 14 Thu 2021 10:00
聯成電腦分享:Painter電繪專欄 ─ Q版小公主

- Oct 12 Tue 2021 10:00
聯成電腦分享:Photoshop教學 ─ 快速繪製場景法

文、Andy老師
大家好,這次要跟大家介紹的是快速繪製場景的方法,當然要快速繪製場景就必須使用照片,好,那我們先來看一下完成的效果。
👉 推薦課程:Photoshop影像處理
好,那我們來看一下如何繪製,首先先將照片在photoshop打開,然後將天空去背,去背的方法可用遮罩配合魔術棒,而魔術棒選不乾淨的部分,則用筆刷配合遮罩去擦除天空,用遮罩的好處是因為遮罩可以來回地擦除和復原,效果如下圖。
接著對照片執行濾鏡的模糊的智慧模糊,智慧模糊是可以將圖像輪廓內的顏色中合,但輪廓卻能夠保持銳利,參數的設置可以開啟預覽即可即時看到參數調整後的效果,在這個階段我執行兩次智慧模糊,接著我使用色彩平衡來調色快速鍵是Ctrl+B,讓暗面偏藍紫色,亮面偏黃紅色, 效果如下圖。
接著再使用色相飽和度快速鍵是Ctrl+U,因為要讓畫面有繪畫的感覺,所以色調上會調較飽和鮮豔, 效果如下圖。
再來我新增一個圖層圖層模式改成色彩增值,接著使用硬邊筆刷去畫影子,把光源設在右上方,因此影子都落在左下方,接著再使用柔邊筆,把一些影子的邊緣畫的比較模糊,如此一來我們就有一個明顯的陰影方向來表現光線的來源,
接著我在新增一個圖層模式改為覆蓋,接著使用硬邊的筆刷在畫面受光面去畫上黃橘色的亮面色調,再使用柔邊筆刷去柔化一些硬邊的亮面, 效果如下圖。
接著再使用揉邊筆在黑色的暗面處,畫上深紫色和深藍色,讓暗部不是全黑的色調,效果如下圖。
接著找一張天空的照片,合成在天空處,並使用智慧模糊, 效果如下圖。
接著新增一個覆蓋模式的圖層,來加上一些藍紫色於天空上, 效果如下圖。
最後再新增一個覆蓋圖層,用柔邊筆畫上太陽光線, 效果如下圖。
就大功告成了,謝謝觀賞
- Oct 07 Thu 2021 10:00
聯成電腦分享:Javascript網頁程式_處理日期、時間篇(上)

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>
完成檔如下:
完整參考程式碼:
- Oct 05 Tue 2021 10:00
聯成電腦分享:認識Word尺規上的定位點,製作目錄或菜單
