【Via教你玩部落格】photoshop教學～幫圖片壓上部落格LOGO

Via教你玩格子via2009 年 7 月 18 日24

上課囉～

『Via教你怎麼玩部落格』

一起來學習玩部落格要有哪些基本必備功力
via把自己所學、所會的～
分享給大家喲！

從去年via’s旅行札記開站以來，
有不少via的格友都在詢問via～
關於圖片影像編修等的問題，
也有不少網友希望能學習到一些影像編輯的技巧

所以，via就決定把自己會的一些東西
不能說很專精，只能把我會的一些粗淺的技術
分享給各位格友們喲～

至於『怎麼玩部落格』～
其實要講的層面很廣，via也還在其中學習
一開始就先教大家最基本的：把圖片搞好！
呵，未來再朝攝影、遊記、食記等等等慢慢發展而去….

好囉！今天的內容準備開始囉

關於影像編輯，via慣用的是「photoshop」這一套軟體
其實這套軟體對一些初學者會有點點小困難，
但當你真的會使用這套影像編修軟體，真的對修圖是大加分喲

跟著via一步一步慢慢做，相信一定也會上手的喲！

當然，要先開始做之前，請大家先準備好Photoshop這套軟體
（請上網搜尋或其它方式，via這裡無法提供喲）
via慣用的是Photoshop CS2的版本

好囉！準備好Photoshop這套軟體後，咱們就開始上課吧！

《Lesson 1-1. 圖片壓上自己的部落格名稱及網址》

STEP 01.

開啟photoshop，並透過「檔案→開啟舊檔」，開啟一張欲編修的圖片

⭐夏都城旅安平館／限時開團中⭐

※省最大：暑假一泊一食入住
超甜價平日雙人房二大一小只要$2,788元入住！
還可再享7/15國旅補助最高可折1300元！
台南最精彩親子飯店→台南夏都城旅來囉！
✅點我訂房：https://bit.ly/3AiNg0i
✅看我開房：https://viatravel.tw/2846/

開啟完成畫面

STEP 02.

注意圖片中左下角的圖片資訊列，這裡會顯示目前圖片的顯示比例

通常以100%為照片真實大小，50%則為照片的二分之一，
200%為照片兩倍大，以此類推

通常這裡都會自己設定為100%，以求看到正確的圖片大小
所以在33.33%格子中，直接覆蓋輸入100%，再按下ENTER鍵
便可獲得正常視覺圖片大小

STEP 03.

在設為100%大小的圖片，如果欲將之縮小
可以透過「影像→影像尺寸」方式，將此圖縮小

按下影像尺寸，則彈跳出下列視窗

其中Ａ的部份，請注意將之調為像素（有時為公分或其它單位）
在網頁影像編輯的世界，多以像素為基本單位
且請注意在Ａ的前方，是否有出現像鎖狀的圖示

此鎖狀圖示表示「強制等比例」縮放
當我們在處理影像圖片時，首重注意的就是比例是否正確
所以在縮放比例時，儘量以等比例處理喔
所以，如果未出現，請於Ｂ處注意是否三個都有勾選

再來就填入希望的像素大小，
通常強制等比例的狀況下，只要輸入寬度，
高度就會自動做調整

本範例就以輸入寬600像素為示範，完成後按下確定即可

這時我們就可以看到，
原本很大一張的圖片已經透過此方式縮小了
※注意圖片顯示比例是否仍為100%，
如果這裡是低於100%的值，表示只是「視覺」上圖片被縮小了
並不代表圖片真的被縮小，所以請保持這裡為100%的數值喔

STEP 04.

透過工具列中的文字工具，即可任意在圖片上打上文字

工具列介紹：
其中先提本篇教學中最重要的兩個單項功能：移動工具及文字
（下圖中有以黃色為底）

移動工具：移動編輯視窗裡的各式圖片或文字
文字工具：透過此工具在編輯視窗裡輸入文字

如果在畫面上沒有看到工具列，
可以透過「視窗→工具」，點選工具項目後，便出現工具列

在點擊工具列的後，移到編輯視窗點一下，
出現｜狀的閃動符號即可以開始在上面輸入自己的部落格名稱及網址

STEP 05.

打上文字後，可能會發現字的大小、字型或顏色不是想要的
可以透過兩個方式修改

（一）上方工具列：在點擊後，畫面上方便會自動出現工具列，如下圖。

（二）文字工具視窗：透過「視窗→文字」的點選，出現的文字工具視窗
有更多的文字相關編輯可用（建議用此方式編修文字），如下圖。

其中字型、大小、字距及顏色，都可以透過這裡做設定
慢慢調出專屬於自己部落格的LOGO文字吧！

PS.特別注意：如果字體出現鋸齒狀，通常是字體效果被設定為「無」，
所以可以將效果設為「強烈」或其它的呈現方式，則鋸齒狀的問題便會解決

打字文字及網址後，照片上便壓上專屬的MARK囉！

講解到這裡，via要多提一個重要的photoshop的概念：

「圖層」《圖層視窗可透過「視窗→圖層」的勾選而出現》

在photoshop與photoimpact最大的不同點之一，
就是圖層的概念運用，
在photoshop，運用一層一層的圖層堆疊出影像畫面
所以剛才上列教述的步驟，photoshop會一層一層幫我們建立出各個圖層
且越上面的圖層，就顯示在畫面的上方，在下面的圖層，就會在上方圖層的底下

如下圖

所以，當我們要移動或編輯哪個圖層時，
記得一定要先在圖層視窗點擊該圖層，使其成為反黑的狀況下
才是真的選取該圖層且可以開始編輯

許多初學者在剛開始使用時，會覺得怎麼我都點選或編輯不到文字或圖片
就是因為他沒有選取到該圖層，所以做的任何動作都不會有反應
這點就請大家要多多注意喔！

當我們做好自己專屬的部落格名稱及網址後，
下一張圖片，我們可以重覆STEP 01-03的動作，
先將圖片縮小後，在工具列點選「移動工具」
在該圖片上點住不放，然後拖拉到我們剛才做好文字的編輯視窗
這樣，新圖就被拉到剛才完成的圖片裡

這裡請記得圖層的概念，
記得把新圖在圖層視窗裡，移到名稱及網址的圖層底下（如下圖Ａ處）
這樣文字才能顯現在圖片上面喔

依此類推，一張張壓有自己部落格文字的圖片
就這樣完成囉！

最後～要教大家的是圖片的存檔！

選取「檔案→儲存為網頁用」做為我們儲存檔案的方式

點擊後，出現下列彈跳視窗：

Ａ：請選擇JPEG為圖片檔案格式

Ｂ：品質會影像檔案大小，
如果品質越好，檔案相對越大，會造成網路讀取速度較慢，
但品質太低照片會出現雜訊，所以可以自行調整品質大小
左側的視窗會依品質高低呈現出圖片的效果

Ｃ：這裡會出現檔案的實際大小，所以在調整品質時，也可以參考這裡

存好檔案後～圖片就完成囉！

來看看今天的成果：

一張壓有自己專屬部落格名稱及網址的圖片就大公告成，
也不怕在網路的世界被人任意盜圖囉！

————————————————————————————————————-

今天的課程就上到這裡囉～
不知道大家覺得如何呢？

會不會太困難，或著哪裡不懂呢？

都可以再反應給via喲！

這套photoshop影像編修軟體，via真的很愛用～呵
也覺得它的功能真的很強大，
在後續的教學文中，再慢慢介紹給大家吧！

不定期的via會再推出一系列的部落格教學文～
這次「先把圖片搞好吧～影像編輯系列」
下一篇要教的，也是許多人在留言中有詢問過的：

圖片邊框製作

再敬請期待下一次的上課吧！

下課囉～各位認真看完本篇的同學們～呵！^___^

PS.記得要多練習，才會對photoshop上手及熟練喔

延伸閱讀