裁切圖像以及裁切成固定大小圖像

圖檔不縮小，在網頁上就會很慢很慢的跑出來。

---

你一定要會把照片的檔案縮小！！

一般數位相機拍下來的圖檔都很大，畫面元素也會太多。 在做數位文本時一定要先經過裁圖的處理，以及轉換大小。 這次我們來處理如何裁圖及轉換圖檔大小。會裁圖及改變圖檔大小是數位編輯及數位寫作 必要的基本功之一。

2017年版本：使用Hornil StylePix

使用 CSS 語法來裁圖

這個軟體和photoshop非常類似，會了這個，就會使用photoshop。
但重要的是，這是免費軟體。同時有綠色版本（portable version），可以直接放在隨身碟，不用安裝 即可使用。

使用步骤：
一、請到官網， 找到下載頁面。
二、請下載portable version，即免安裝的綠色版本。
三、解壓縮。
四、請按二下StylePix ，即可啟動。

網路寫作使用圖像的二種最重要技能是：
（一） 依原比例的變更大小；（二）固定長寬比例的裁切大小。

請看教學影音：

Ü Follow Me!Þ

---

※ 教學軟體：photoshop cs 5.1
※ 練習圖檔：請按此下載 （圖像出來後，請在圖像　上按右鍵，再按「另存影像」）

8影音教學內容：
(1)直接改變圖檔大小：

(2)裁圖並改變圖檔大小：
教學影音內容注意事項：
(1) 存檔時，請用「另存新檔」這一功能選項，這樣，原圖檔才能被保存。

使用CSS語法來裁圖     

---

作法：

1. 先用DIV來設定想要呈現圖像的大小。
2. 在DIV內置入圖像。
3. DIV設定overflow語法，來隱藏超出DIV的圖像。
4. 圖像設定position: relative; 來移動圖像。

CSS語法：

<style>

/*加到 div 的Class*/
.divoverflow {
width: 300px;
height:200px;
border: 1px solid black;
overflow: hidden;    /* 設定超出隱藏 */
}

/*加到 img 的Class*/
.imgmove {
position: relative;   /*設定可以移動*/
width: 160%;    /*讓圖像變大*/
top: -20px;       /*向上移動*/
left: -160px;     /*向左移動*/
filter: brightness(140%);     /*變亮濾鏡*/
}

</style>


請 按此看原圖與裁圖的變化

BlogThis！