1. 程式人生 > >前端要會的一些ps切圖和和ps技巧!

前端要會的一些ps切圖和和ps技巧!

一,圖層切圖:(這車開的有點穩,但注意跟上節奏)

1.左上角:檔案-開啟 你要處理的圖 。注意,開啟psd檔案會有提示,如果用圖層摳圖的話,則保留圖層,不然選擇拼合。

2.選擇右上角這個"移動選擇工具"(這個工具還可以隨意移動目標O),然後點選目標,這時軟體右下角邊圖層那裡,會自動定位到你點選的圖層。

3.點選那隻眼睛,鎖定的目標消失了,則說明是當前選擇的圖層。(我們不要的圖層都可以用這個功能甩掉o)

4.選擇左上角  ,右擊選擇"移動選擇工具",然後把要摳的圖框起來,注意要框完整一點!儘量大於你要摳出來的圖。

5. 右擊當前圖層選擇 "轉化為智慧物件 ",然後ctrl +c 複製當前圖層, ctrl + n 新建一個圖層

ctrl + v將圖層貼上到新建的圖層。

                     這是我摳出來的圖,在右邊 點選背景圖的眼睛,背景消失;

                     ,這樣就是一個純的圖層了!不參雜任何雜質呢。

6.ctrl+shift+alt+s 儲存,或者左上角 檔案 - 儲存為web所用格式儲存,背景圖儲存為png,內容圖儲存為jpg。

二,切片切圖:(超簡單)

  右擊小刀片,選擇"切片工具"。然後和上面一樣儲存就行了。切好了可以利用切片選擇工具挑出想要的,點選上方自動生成的切片 ,一般也去掉

左上角我們還可以根據需要選擇切圖的大小比例,這樣就能截出整齊大小一致圖片了。

補充一些 基礎操作:

a)    Ctrl++ 放大圖片,ctrl - -縮小圖片 ,或者左下角百分比調整比例

b)    按住空格鍵space+,點選滑鼠左鍵,拖動圖片。

c)    修改單位,點選編輯-首選項 -單位與標尺,將釐米修改為畫素px。

     想儲存更大或者更小的圖,  選擇影象大小

d)    點選檢視,選擇標尺(快捷ctrl+R),清除預設參考線(快捷ctrl+.),清除切片(快捷ctrl+,)。

e)    點選編輯-設定快捷鍵,將常用操作設定為我們熟悉的鍵。

f)     移動(V),選區(M),切片(C),將圖層轉換成智慧物件(ctrl+/).

相關推薦

前端一些psps技巧

一,圖層切圖:(這車開的有點穩,但注意跟上節奏) 1.左上角:檔案-開啟 你要處理的圖 。注意,開啟psd檔案會有提示,如果用圖層摳圖的話,則保留圖層,不然選擇拼合。 2.選擇右上角這個"移動選擇工具"(這個工具還可以隨意移動目標O),然後點選目標,這時軟體右下角邊圖

前端PS技巧(一)

發現 右下角 放大 比較 clas ng- ring 練習 span UI給我們設計圖的時候都會有一份設計原稿psd文件,有的公司可能UI會把需要的圖標給切好,更多時候是需要我們自己來切的。而且,有的時候可能需要的東西UI沒有切出來,你就要去是去找UI切好了再發給我們,這個

前端PS

str 導出 而且 點擊 ron float 工具箱 設計 出圖 對於我這種前端初入門者來說,切圖也是要必須學的。下面就是我參考資料的學習記錄: 一、切圖方式分類 Photoshop傳統cs版本   傳統切圖(手動切圖、參考線切圖)Photoshop cc版本   

Web前端快捷鍵、技巧經驗

如果不是設計者自己來切圖,那麼切圖者需要從圖層裡來體會設計者的意圖。如何分組,層次間的關係都體會了設計者對頁面結構個人的理解。所以對一個設計稿來說,第一步是粗看圖層,理解設計意圖,其次是根據自己的理解對圖層進行新的操作和轉換。以下是關於圖層操作的一些經驗: 關閉圖層可見性 --關閉圖層可見性非常常用,因

前端ps,圖文教程,詳細。

寫在前面:本文主要內容是目前我所知道的切圖技巧結合網上的資料,寫出來分享一波。圖文教程,多圖!! BB:很多人都會說,切圖這個活倒底分給UI還是分給前端。雖然好的UI會給我們把圖切好,但是他們切的圖不一定百分之百符合我們的需求,所以我一直都覺得這是頁面仔必須要會的一項技

關於使用ps一些學習

這幾天閒著學習了慕課網上的一個小課 前端工程師必備的PS技能——切圖篇,對切圖有了個大概的瞭解,連結在此 https://www.imooc.com/learn/506 下載與安裝 常用操作 只是一些簡單的快捷鍵: 新建檔案:ctrl + N 蓋印可見圖層(合

ps技巧

元素 觀察 疊加 參考 png 註意 導出 要點 否則 步驟1: ps打開psd文件 步驟2: 點擊移動工具,觀察左上角的自動選擇是否有勾選 ,如果沒有最好勾選,對應的選項有圖層和組,善於切換這個功能能夠有效快速的找到你要的區域 步驟3: 找到要切圖的元素,將其他疊加的圖層

APP流程APP命名規範詳細完整版

con hdpi blog desktop src ron 優點 down tableview 轉自:http://www.25xt.com/appdesign/7339.html 我們都知道一套完整的 App 通常會有很多張切圖,不管是 iPhone 需要 1x、2

ps 5 修改、維護

一行 技術分享 必須 畫布 影響 色彩 過程 綜合 -- 想要改變圖標的位置? 新功能,加個圖標? 畫布太大,文件空白太多? 圖標多余,要刪除? 修改與維護 一 要繼續放更多的圖片? 更改畫布大小 圖像 -----> 畫布大小 ----> 選擇左上角

PS學習記錄1.頁面製作部分之PS

 網頁設計在技術層面上,第一步是美工做出網頁效果圖,第二步就是網頁前端進行網頁切圖。網頁切圖工具常用的有fireworks、PS,這裡使用PS進行網頁切圖。       我們通過設計稿,得到我們想要的產出物(如.png,.jpg檔案),

PS採坑

部落格記錄我的各種採坑,有的坑很水,比如下面這個 謹記錄自己的坑,以後作為入門笑料。 拿到設計師的psd設計圖,理清事件邏輯,接下來就要切圖啦。結果PS老是crash!檢查了PS版本,也不低啊2017、2019版本的。看了下盤的記憶體,還有30G了,執行8G不算高,但跑個PS沒問題吧。但就是一匯入圖片就崩

ps儲存的網頁讓它居中

魅力網路今天在給一學生做ps切圖,我們一起復習一下網頁的基礎知識,當我們用ps切圖直接儲存網頁,用瀏覽器開啟預設是左對齊的,一般的網頁都是居中對齊這樣才看的好看,下面讓河北魅力網路告訴大家方法。方法一:<body style="text-align:center" 在body後面加上 style="te

ps保存的網頁讓它居中

idt round 方法 技術 比較 般的 water db4 pro 魅力網絡今天在給一學生做ps切圖,我們一起復習一下網頁的基礎知識,當我們用ps切圖直接保存網頁,用瀏覽器打開默認是左對齊的,一般的網頁都是居中對齊這樣才看的好看,下面讓河北魅力網絡告訴大家方法。方法一:

ps(4)——簡單工具操作(3)

第一部分:操作路徑 鋼筆工具: 補充:關於錨點的一個基本常識:錨點有空心和實心。 路徑的基本操作技巧: 路徑如何切換為選區:首先要將工作區切換到基本功能,然後路徑面板底部第三個屬性是將路徑切換為選區。這個功能比較重要。 建立錨點: >>> 直接使用滑鼠左

ps的快捷鍵

(1)切圖片 1、Ctrl+ “;” 或Ctrl+“-” 表示顯示/隱藏輔助線——用於上下、左右進行區域塊選擇 2、Ctrl+R;--   顯示/隱藏標尺 同時右鍵標尺,選擇畫素單位 3、Ctrl+加

如何&PS&網頁

鑑於很多朋友問到如何切圖這個問題,又鑑於這個問題可大可小,一兩句話是絕對講不清楚的,所以今天有空閒在家裡就舉一個簡單的例子來說明這個問題吧!OK,讓我們開始:   step1:在Photoshop中開啟設計稿,如下圖 選擇工具板上的slice切片工具,先大刀闊斧的切上一番

前端必備技能之Photosh

切圖:即從設計稿裡面切出網頁素材 一、使用Photoshop工具 工具的使用: 1.將文字與標尺的單位的設定為畫素 2.開啟這五個視窗,關閉其它視窗,儲存工作區方便以後使用   3.工作區弄亂時,可以使用上圖中的復位,或者在下圖中選擇工作區:   4.切圖常用

前端選擇pngjpg呢?

今天特意驗證了一下: 切完圖分別儲存png24、png8和jpg60、jpg80(60和80表示儲存圖片時品質選擇)後,   然後再壓縮圖片,壓縮圖片地址:https://tinypng.com/ 圖片直接拉進去就可以壓縮,壓縮完對比一下,沒想到png24圖片壓縮完記憶體小又清晰;jpg

做APP設計需要的PS技巧一些快捷鍵。以及相應的技巧

PS學習筆記 快捷鍵: 工具箱:          (shift+)          預設前

PS-前端教程(jpgpng

ps:多日後的補充說明 部分看了文章的設計師,來找我說怎麼切圖。sorry?在我的理解,這就是切圖啊,但是他們所指的“切圖”是,怎麼把設計圖製作成html頁面。 在我看來,現在人們對於前端都是有誤區的。認為前端是切圖的,(也確實是這麼叫的,本人情感上很不願意聽前端被叫做“切圖的”)所以也會誤認為我的這篇文