第05章

頁碼 [02] [03] [04] [05] [06] [07] [08]

第5章圖片瘦身美容術

01 圖片資源--截圖
02 化妝美容--修圖
03 保持身材--瘦身優化
04 賞心悅目--版面設計
05 Q&A時間

01 圖片資源--截圖

**小動畫(.gif) 網頁背景(.bmp) 美食圖庫

1.按滑鼠右鍵，選另存圖片

2.按 Print Screen 截全螢幕

3.按 Scrool Lock 截視窗畫面

4.使用 HySnapDX 軟體

5.使用 PicPickPortable 軟體

6.其他截圖軟體

網站所需圖片最好另開 images 資料夾統一置放，
檔名以英文命名，編號以易辦認，分類排列，常用者排前面。

注意副檔名unix系統檔名分大小寫。windows 不區分。
map.jpg 與 map.JPG 是不同檔案 (unix系統)

7.手機顯示icon以60x60或48x48為宜，如何製作專業級的icon，推薦採用Icon Generator線上軟體，快速完成icon。

線上製作專業級的icon**

[頁首]

02 化妝美容--修圖

PicPickPortable (推薦修圖軟體)

picpick教學影片★

幫圖片打馬賽克的免費軟體 - PicPick，這款來自韓國的軟體以「美工人員的
全方位設計工具」自居，內建許多小工具，包含：螢幕擷取、色彩選擇器、
放大鏡、尺規、十字線、量角器、白板...等等；螢幕擷取功能不會有缺角
的問題（如：Windows 7），圖片編輯器功能強大，畫框框、畫直線箭頭、
畫曲線箭頭都是專業等級的漂亮。

當中的「打馬賽克」功能，用法很簡單：先用框選工具框住要打馬賽克的區域，
再到下拉式功能表（或右邊小按鈕）選擇【效果】→【馬賽克】，
就可以很迅速的幫圖片的特定區域打上馬賽克，而且支援Unicode萬國碼。

按此下載壓縮檔(*.zip)

圖片去除背景

線上圖形背景消除

[頁首]
03 保持身材--瘦身優化

圖形檔案大小比較

網頁圖片或手機小於100K bytes 為宜。

手機畫面寬度為320點，長度不限。

前往工具軟體 (下載Free Image Resizer)

(可選單一或多個圖形檔)

(依需要調整輸出圖片尺寸)

範例

永吉攝影彙整 鳳英生活照片

　

[頁首]
04 賞心悅目--版面設計

黃金比例法配色的技巧便當排版法色碼表

喜樂迦南村設計園區 九種平面設計構圖技巧

範例:
興南夜市網站參觀網站

網站服務構想書(範例) 服務構想書全文

網頁原始碼 (*.htm)

<html>
<head>
<title>ㄚ鬟變女王 07:26</title>
</head>
<body>
<input onclick="history.go( -1 );return true;" type="button" value="上頁back" style="background-color: #C0E3B5"> 
<img src="../images/image_007.jpg" width="300" height="240"> 
<img border="0" src="../images/cd.jpg" width="300" height="56"> 
2021年01月     
ㄚ鬟變女王 07:26 
<audio src="https://twmc.woobobi.com/light/vol_2021/2021/2101-07.mp3" controls > </audio> 
</body>
</html>

改變背景顏色

<body bgcolor="#F9E6A2"> (從色碼表選擇顏色代碼)

</body>

改變背景圖片與尺寸 (改變body標籤參數)

<body bgproperties="fixed" style="background-image: url(images/image_01.jpg); background-size:1024px 768px">

</body>

[頁首]

Q & A 時間

　