亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

前端工程師必備的PS技能——切圖篇

  • 移動工具: commad + 點擊圖層:可以選擇多個圖進行操作

    選區工具:單選、多選、減選、重疊區。

    矩形選區按住shift變正方形、橢圓按住shift變圓。注意:先放開鼠標,再放開shift鍵才行。

    alt 鍵:以鼠標為心選取。

    shift 加選區快捷鍵M 擴展切換。

    放大縮小 ctrl + + -

    ctrl+D 刪除所有選區

    選區、套索、魔棒

    shift+ alt 切換 選取添區、減區

    套索:多邊形延鼠標畫區。

    魔棒; 自動選取識別封閉內容相同區域。

    右鍵即可對選區操作填充等。


    裁剪工具快捷鍵c:裁取選中部分

    找到要導出圖層區域。 選擇工具 ctrl + 鼠標左鍵選中圖層。切換到裁剪、回車自動裁剪尺寸為選中區。

    選取不規則圖、單擊裁剪 即可自動裁剪選中區最小包圍尺寸。

    ?點擊圖層選取獲取裁剪尺寸。按住alt鍵單擊眼睛。會把其它圖層隱藏。 進入顯隱模式。保存png即可

    查看全部
  • 預設web 寬1920像素

    視圖? 顯示 智能參考線 利于切圖

    標尺 快捷鍵


    窗口:關閉庫、通道、路徑、顏色。切圖主要需要的是圖層。

    另外添加信息、字符、歷史記錄到面板。

    關閉面板旁的屬性。

    信息:可以顯示定位position、選區的寬高。

    右上角面板選項設置:顏色RGB、尺寸像素、分辨率72ppl、文檔大小、文檔尺寸勾選。

    編輯.首選項:單位標尺修改為像素。默認為里面。

    窗口.工作區:保存工作區。類似于預設。對當前設置保存為“web切入區“專用。



    查看全部
  • v 鍵拖動

    自動選擇旁 圖層 command +鼠標左鍵


    查看全部
  • 首選項的單位與標尺都改為像素

    新建工作區進行當前的設置保存。

    查看全部
    1. ctrl鍵加鼠標左鍵,點擊psd的中的文字,會自動選擇當前圖層。

    2. 勾上視圖中的標尺和顯示中的智能參考線。

    3. 關閉庫和顏色、通道、路徑

    4. 打開信息和字符窗口工具

    查看全部
  • 新建自定義

    查看全部
  • 編輯-首選項-增效工具-啟用生成器,PS將在下一次啟動時生效

    文件-生成-圖像資源,同一個PSD根目錄下,會生成圖片文件夾

    在更改圖層文件名,增加后綴.png時,會在文件夾內生成png文件?

    對于蘋果的retina優化,需要導出2倍圖,客隊文件名如下命名

    200% button @2x.jpg

    可將文件導出成兩倍圖,并生成文件button @2x.jpg

    若要導出其他質量的圖片,可以在后綴加上對應數字,如png8,jpg8

    若要刪除該圖片,可以在PS圖層里去除后綴

    文件-抽出資源,可以抽取選中文件及其下方圖層

    復制CSS,對于非智能對象,可以選中圖層-復制CSS


    查看全部
  • 隱藏參考線快捷鍵為ctrl + ;

    查看全部
  • 不錯
    查看全部
  • 矩形選框工具:按住Shfit+畫矩形會得到一個正方形 橢圓選框工具:按住Shfit+畫橢圓得到一個正圓 注意:畫完之后先松開鼠標再松開Shift鍵
    查看全部
  • 界面設置:標尺和智能參考線要選上

    查看全部
  • 擴展知識:

    https://img1.sycdn.imooc.com//5c63cdba0001de9405640301.jpg

    查看全部
  • 拓展知識:

    自動切圖:

    啟用生成器:編輯>首選項(快捷鍵:ctrl + k)>增效工具>啟用生成器: true

    文件>生成>圖像資源: true

    選中圖層后,雙擊修改圖層名字a為a.png,即可自動生成圖片。

    查看全部
  • Ps精準切圖:

    文件>導出>將圖層導出到文件

    查看全部
    1 采集 收起 來源:PS精準切圖

    2019-02-13

  • 利用圖層標參考線,利用參考線選擇切片。

    如果圖形復雜通過裁剪成塊,再進行切圖。

    查看全部
    0 采集 收起 來源:PS傳統切圖

    2019-02-13

舉報

0/150
提交
取消
課程須知
本課程適合對Photoshop有簡單了解,希望學習前端開發切圖方法的用戶。
老師告訴你能學到什么?
使用Photoshop從網頁設計師提供的psd中獲取網頁前端開發過程中所需要的資源,并進行簡單的調整和處理。

微信掃碼,參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

友情提示:

您好,此課程屬于遷移課程,您已購買該課程,無需重復購買,感謝您對慕課網的支持!