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

上課囉~

『Via教你怎麼玩部落格』

一起來學習玩部落格要有哪些基本必備功力
via把自己所學、所會的~
分享給大家喲!
【Via教你玩部落格】photoshop教學~幫圖片壓上部落格LOGO



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

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

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

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

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

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

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

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

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

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

STEP 01.

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

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

開啟完成畫面

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

STEP 02.

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

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



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

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

STEP 03.

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

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

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

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

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

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

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

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

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



 

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

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

STEP 04.

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

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

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

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


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

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

在點擊工具列的【Via教你玩部落格】photoshop教學~幫圖片壓上部落格LOGO後,移到編輯視窗點一下,
出現|狀的閃動符號即可以開始在上面輸入自己的部落格名稱及網址

STEP 05.

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

(一)上方工具列:在點擊【Via教你玩部落格】photoshop教學~幫圖片壓上部落格LOGO



後,畫 面上方便會自動出現工具列,如下圖。

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

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

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

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

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


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

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

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

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

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

如下圖

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

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

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

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

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

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

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

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

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

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

點擊後,出現下列彈跳視窗:

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

A:請選擇JPEG為圖片檔案格式

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

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

存好檔案後~圖片就完成囉!

來看看今天的成果:

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

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

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

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

會不會太困難,或著哪裡不懂呢?

都可以再反應給via喲!

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

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

圖片邊框製作

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

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

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

延伸閱讀






24 comments Add yours
    1. 哈囉Erin:哇~很開心,至少..有人說看得懂~~呵!
      很希望能把一些簡單基本的功能和大家分享,讓大家在編輯影像時更方便上手~
      嗯,Erin~photoshop是個很棒的軟體喲….加油加油!

    1. 哈囉happyfeet:謝謝你對via的支持~^^ 在準備這篇教學文時…其實心裡有點擔心~
      呵,怕這樣的東西,格友可能不愛或支持度不高~嗯!其實via就是抱持一個分享的心情~
      如果有需要的格友,這篇就對他來講就有幫助囉!^^
      謝謝happyfeet對via的鼓勵,我一定也會再好好加油下去的喲~~~^____^

  1. 謝謝via的分享,step by step,淺顯易懂
    不過,如果我想加入學習一列,首先我必須先生個photo shop出來~哈哈~~ (我現在是用photoscape)

    1. 觀景窗~嗯嗯!我知道對於初學者…真的 第一 photoshop並不是網路分享的免費軟體
      所以要取得軟體有一定的難度,第二,就是photoshop的介面或是不是那麼的親和…
      所以當初想寫這篇教學文,就想了很久…因為這是我唯一會的方式,而且我也覺得很好用~
      而且!如果學會photoshop,真的會幫自己的美編功力增加不少呢!呵~^^
      如果觀景窗有photoshop的話,不妨嚐試看看喲!^____^
      (當然要學更精進..可能要自己買書鑽研囉>O<   via的功力還不到如此深厚…呵 )

  2. 謝謝via老師XD
    很淺顯易懂,每每瀏覽\”旅行札記\”
    都有新的收穫~
    恭喜via的旅行札記登上七月份雜誌\”快樂旅行住民宿\”的\”部落客的首選民宿\”單元~

    1. 哇~~TAO:是你跟我說…我才知道…原來…是那一本雜誌~呵,出了耶!
      因為一開始我只知道是Taipei walker雜誌社,並不確定會是在哪一本書刊
      我今天就特地跑去書局買了喲….^____^ 謝謝TAO的分享~
      呵,第一次看到自己的名字真的出現在銷售的雜誌上…感覺很特別
      這個月應該還會有一本雜誌…我再注意看看!^___^ 謝謝TAO的分享~也謝謝你的祝賀喲

    1. 哈囉 vivi:呵~via會再持續的分享一些功能技巧~
      不過一開始還是以最基礎的為優先,先讓大家先習慣一下photoshop
      進而體會到這套軟體的美好~~~(呵,好像有廣告兼疑呀~)
      嗯嗯!via會再持續的分享下去喲..謝謝vivi喜歡via的作品…開心喲!

    1. 小羊兄~呵!photoshop真的要花時間和他培養感情的….^^
      呵,當初我也是花了不少時間…不過,現在覺得一切都很值得喲~
      我真的是離不開他了~~呵!

  3. 好期待via的下ㄧ堂課,目前也正在學習photoshop
    有點小難,雖然市面上有許多書籍但對於初學者並不是那麼容易了解操作,還是實際跟via做ㄧ遍比較實在.

    1. 哈囉peggy:很開心via的photoshop教學文,能讓你有點收獲
      我也很開心喲….而photoshop真的是個很不錯的軟體…希望能推廣給更多人~~^^
      嗯嗯,但也如你所說,對於初學者,真的要多花點心思去進入PS的世界~
      謝謝peggy的鼓勵,之後via會再陸續分享喲….再一起動手做看看吧!^___^

  4. 很喜歡你的部落格也..每回要出去玩前總會上來看看有沒有什麼必玩行程..真的太好了..
    這篇文章也讓我學到不少喔..希望Via老師以後也可以多一些部落格的教學..^_^

    1. 哈囉becky:呵~叫老師via真的還不算啦..^___^ 只是和大家分享一下囉~~
      呵,未來一定還會持續再分享下去的,希望讓大家除了旅行外,還有其它的收獲喲~
      謝謝becky的支持!!^___^

  5. via你好:
    看你的部落格一段時間了,第一次留言,你真是很用心的版主,你PO這教學文我也認真學唷^^好棒喔!期待你的下一堂課唷..嘿嘿

    1. 哈囉vicky:謝謝你浮出水面第一次留言,讓via多認識一個喜歡這個格子的格友喲~
      呵,嗯嗯!過程中如果有遇到什麼困難,都可以發問喲,呵~如果via知道的會儘力回答的~
      下一堂課,呵!via會再努力的生出來的~~哈哈^___^

  6. 我也好想知道美美圖片的邊框。
    順便問一下,怎樣才可以快速的縮照片的檔案啊?
    我的照片檔案都好大喔~
    一定要一次一張嗎???

    1. 哈囉~bow:謝謝你給了我一個方向~下次我也可以教學一下
      Photoshop的自動轉檔功能喲!嗯嗯~PS裡有這項功能~^^
      謝謝bow的提議喲~

  7. Via你真的是太貼心了
    很久以前就想學影像編輯可是看網路的都看不懂
    看完你的才發現原來不困難
    我要來多練習這樣就可以呈現好看的圖片了
    謝謝Via的分享 希望你多發文
    支持你的觀眾留

    1. 哈囉 你好~~~呵,謝謝你,其實影像編輯的軟體,只要真的去學著做
      還有去熟練使用,都不會太難喲~~^____^
      不過要有興趣及熱情去學習、接觸它~呵~~嗯嗯!
      有機會及時間可以一起動手做看看喲,有什麼問題可以再問via
      我會的會儘量和大家分享喲~~~

  8. 超感謝分享
    很想知道妳做的LOGO圖文部份
    是怎麼做的
    用啥軟體做的
    有空來看看我做的
    我是都用PHOTOIMPACT做的
    互相交流交流
    您真是直得學習的對象耶
    感謝分享

    1. 哈囉~峯(RICK):我都使用photoshop去製作的喲~~^___^
      嗯嗯,photoimpact比較像套件 做好了 讓你去套~那shop運用的就是個人的美感及軟體技術
      各有優缺~~~只是我習慣了photoshop…也超愛用的..^^ 嗯嗯 謝謝你~很開心你喜歡via分享的東西喲

  9. 看到你的教學好開心哦…
    因為最近正有念頭想要學呢!
    有你這位教的這麼仔細的老師的話,
    相信我一定會學的很快樂的,
    我已經期待下一堂課了唷~^^

    1. 哈囉starcandy:謝謝你喲~^^ 如果能把photoshop學起來
      對影像編輯真的是一大利器呢,反覆多練習,一定能上手的喲!^^
      嗯嗯,今天應該就會再上第二篇了,歡迎你來學習喲~
      有什麼問題也可以發問喲~

  10. 謝謝Via的用心教學啦!
    讓我們初學者一看就懂了!
    對了..請問Via一下..
    如果我要用相同的LOGO..
    可不可以複製貼上呀…
    不然有50張照片..相同的動作要做50次呢..
    是否有這樣的方法呢?
    謝謝您!^^

    1. 哈囉~Jane:你把做好的LOGO圖層,全部選取後用拖拉的方式
      (或在全部的LOGO圖層全選按右鍵複製)然後貼到新圖就可以
      LOGO不用一直覆製重作,另外教學的下一篇
      也有講到怎麼一直只加入圖片就好,不用一個一個製作的方式喲
      可以參考看看^^

    1. 哈囉 Jeft:天空的漸層藍色嗎?嗯…可以使用工具箱的漸層去拖拉
      先選好你要漸層的雙色(或多色)的色調 再在畫面上做拖拉即可
      講的有點抽象..^^"  希望你懂我的意思…….

  11. 請問版主有免費的相片組合成是推薦嗎?
    最近拍了台中的熊, 想把它拼成一張
    可是最都只能九張 …. (嗚)
    謝謝! ^_^

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *