以下用Photoshop CS3做為示範

建立母片

首先開啟一個Photoshop新檔

在功能選單 > 檔案 > 開啟新檔

網頁設計 photoshop 開新檔案

 

設定圖片尺寸,做為「工作母片」

  1. 圖片尺寸為寬x高,若尺寸為350x300,則設定350,300
  2. 解析度:一律設定為「72 像素/英寸」,也就是72dpi
  3. 色彩模式:一律設定為「RGB色彩」。若不是RGB色彩,圖片可能在網頁上沒辦法正常顯示。
  4. 設定好後按「確定」,初步完成母片的建立。

alt

 

調整原圖

在Photoshop開啟原圖

以「開啟舊檔」的方式,開啟要處理的商品原始圖。

網頁設計 開啟舊檔

 

調整原圖的影像尺寸

選擇「影像尺寸」

網頁設計 調整影像尺寸

 

設定尺寸,將原圖等比縮小至「略大於」工作母片的尺寸,以便於後續比例的調整。可勾選「強制等比例」,讓圖片等比縮小。

網頁設計 強制等比例

 

輸出圖片

將商品原始圖貼到「工作母片」

在原始圖上以「Ctrl+A」選取整張圖片,再用「Ctrl+C」複製圖片。

網頁設計 全選圖片

 

切換到「工作母片」的視窗,按「Ctrl+V」將縮小後的原圖貼到工作母片中。

網頁設計 切換視窗

 

在工作母片中,選擇 功能選單 > 編輯 > 任意變形

alt

 

持續按著Shift調整四個角,以「等比縮放」方式,將圖片縮小至適當大小。縮放後,按「Enter」,完成圖片縮放。

alt

 

輸出圖檔

  1. 在功能選單 > 檔案 > 另存新檔
  2. 檔名請用「英文」、「數字」、「-」、「_」,這四種符號做為命名組合,例t-shirt_01。
  3. 切記檔名不要留空白,在某些情況下,檔案空白會讓圖片沒辦法在瀏覽器上正確顯示。
  4. 檔案格式選擇「JPG
  5. 按儲存。

alt

 

圖檔壓縮設定

接下來會看到JPG檔的圖檔壓縮選項,設定為「品質:8 / 高」,「格式:基本壓縮(標準)

alt

 

完成

到這裡就算完成一個350x300px的圖檔,接下來就是把圖檔上傳到網站上了。

看起來好像程序很多,但其實做久了,熟悉每一個步驟後,速度就會變快。

 

儲存工作母片(PSD檔),繼續處理其他圖片

工作母片可供後續使用,不用每次都重覆設定圖片尺寸、格式,可以增加工作效率。按下列方式將工作母片直接儲存為Photoshop專用的PSD檔。

  1. 在功能選單 > 檔案 > 儲存檔案。
  2. 工作母片的檔名可用中文 (因為不需要放到網路上)。
  3. 格式選擇「Photoshop(PSD)」
  4. 按「儲存」即可完成存檔工作。

 

想跟我們談談你的網頁設計構想嗎?

 

 

網頁設計洽詢 >