天天看點

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

本節書摘來自異步社群《網頁美工設計photoshop+flash+dreamweaver從入門到精通》一書中的第2章,第2.1節,作者: 安道通 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

photoshop的專長在于圖像處理,而圖像處理是對已有的位圖圖像進行編輯加工處理以及運用的過程,其重點在于對圖像的處理加工。本章主要介紹photoshop的基本操作,包括photoshop cc的工作界面、前景色和背景色的設定、圖像區域的選擇、基本繪圖工具的使用、建立文字和應用濾鏡等基本知識。

學習目标

●  photoshop cc工作界面

●  設定前景色和背景色

●  建立選擇區域

●   基本繪圖工具

●   建立文字

●   圖層與圖層樣式

●   應用濾鏡

網頁美工設計photoshop+flash+dreamweaver從入門到精通

photoshop cc的工作界面包括【菜單欄】、【選項欄】、【工具箱】、【文檔視窗】、【面闆】,如圖2-1所示,下面将分别進行介紹。

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

2.1.1 菜單指令

photoshop cc包括【檔案】、【編輯】、【圖像】、【圖層】、【類型】、【選擇】、【濾鏡】、【3d】、【視圖】、【視窗】和【幫助】11個菜單,如圖2-2所示。

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

【檔案】菜單:對所修改的圖像進行打開、關閉、存儲、輸出、列印等操作,如圖2-3所示。

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

【編輯】菜單:對編輯圖像過程中所用到的各種操作,如拷貝、粘貼等一些基本操作,如圖2-4所示。

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

【圖像】菜單:用來修改圖像的各種屬性,包括圖像和畫布的大小、圖像顔色的調整、修正圖像等,如圖2-5所示。

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

【圖層】菜單:圖層的基本操作指令,如圖2-6所示。

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

【類型】菜單:全新文字系統消除鋸齒選項可提供文字在網頁上逼真預覽顯示效果。這個新選項非常符合基于windows和mac渲染的主流浏覽器的消除鋸齒選項,如圖2-7所示。

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

【選擇】菜單:可以對選區中的圖像添加各種效果或進行各種變化而不改變選區外的圖像,還提供了各種控制和變換選區的指令,如圖2-8所示。

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

【濾境】菜單:用來添加各種特殊效果,如圖2-9所示。

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

【3d菜單】增加了較多功能,可以制作出光感更為細膩、紋理更加豐富、陰影更加逼真的立體效果。“實時3d繪畫”模式也可顯著提升性能,并可最大限度地減少失真,如圖2-10所示。

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

【視圖】菜單:用來調整圖像在顯示方面的屬性,如圖2-11所示。

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

【視窗】菜單:用于管理工作環境,控制各種視窗,如圖2-12所示。

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

【幫助】菜單:用于查找幫助資訊,如圖2-13所示。

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

2.1.2 工具箱

photoshop的工具箱包含了多種工具。要選擇使用這些工具,隻要單擊工具箱中的工具按鈕即可,如圖2-14所示。

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

【選框】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(m):可選擇矩形、橢圓、單行和單列選區,用來在圖像中選擇區域。

【移動】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(v):用來移動目前圖層或目前圖層中標明的區域。

【套索】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(l):用來選擇不規則的選區,包括自由套索、多邊形套索和磁性套索工具。自由套索工具适合建立簡單選區;多邊形套索适合建立棱角比較分明但不規則的選區,如多邊形、建築樓房等;而磁性套索是用于選擇圖形顔色反差較大的圖像,顔色反差越大選取的圖形越準确。

【魔棒】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(w):以點取的顔色為起點選取跟它顔色相近或相同的顔色,圖像顔色反差越大選取的範圍越廣,容差越大選取的範圍越廣。

【裁剪】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(c):可以通過拖動選框,選取要保留的範圍并進行裁切,選取後可以按enter鍵完成操作,取消則按esc鍵。

【切片】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(k):用來制作網頁的熱區。

【畫筆】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(b):用于繪制柔邊、描邊。

【仿制圖章】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(s):可以把其他區域的圖像紋理輕易地複制到標明的區域。

【曆史記錄畫筆】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(y):用于恢複圖像的操作,可以一步一步地恢複,也可以直接按f12鍵全部恢複。

【橡皮擦】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(e):可以清除像素或者恢複背景色。

【漸變】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(g):填充漸變顔色。

【模糊】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(r):模糊圖像。

【減淡】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(o):使圖像變亮。

【路徑選擇】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(a):選擇整個路徑。

【橫排文字】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(t):在圖像上建立文字。

【鋼筆】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(p):繪制路徑。

【矩形】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(u):繪制矩形。

【注釋】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(n):添加文字注釋。

【吸管】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(i):選取顔色。

【抓手】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(h):在圖像視窗内移動圖像。

【縮放】工具

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

(z):可放大和縮小圖像的視圖。

2.1.3 工具選項欄

使用photoshop cc繪制或處理圖像時,首先需要在工具箱中選擇工具,然後在選項欄中對該工具進行相應地設定,如圖2-15所示是【文本】工具的選項欄。

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

2.1.4 浮動面闆

在預設情況下,面闆位于文檔視窗的右側,其主要功能是檢視和修改圖像。一些面闆中的菜單提供其他指令和選項。可使用多種不同方式組織工作區中的面闆。可以将面闆存儲在面闆箱中,以使它們不幹擾工作且易于通路,或者可以讓常用面闆在工作區中保持打開。也可将面闆編組,或将一個面闆停放在另一個面闆的底部,如圖2-16所示。

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

2.1.5 文檔視窗

圖像文檔視窗就是顯示圖像的區域,也是編輯和處理圖像的區域,可以實作photoshop中所有的功能。也可以對圖像視窗進行多種操作,如改變視窗大小和位置,對視窗進行縮放等。文檔視窗如圖2-17所示。

《網頁美工設計Photoshop+Flash+Dreamweaver從入門到精通》——第2章 使用Photoshop CC入門基礎2.1 Photoshop CC工作界面

繼續閱讀