數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎圖像編輯:GIMP
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

2012年5月3日 星期四

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



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

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

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


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>


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


沒有留言:

張貼留言