前端工程師技能之photoshop巧用系列

photoshop是前端工程師無法回避的一個軟件,這個軟件本身很強大,但我們僅僅需要通過這個工具來完成基本的切圖工作即可。本文將開始photoshop巧用系列的第一篇——準備篇

 

作用

  我們為什么要去切圖呢?這就需要說到項目流程。一個完整的項目流程是市場進行需求分析,產品做出項目原型,UI根據項目原型出設計圖,前端根據設計圖制作頁面,后端進行數據相關工作,網站經過測試后上線。

  我們常說的切圖實際上就是要把UI制作的設計圖切成網頁需要的素材。具體到網頁的哪些地方需要素材呢?主要包括兩類:

  【1】HTML中的<img>標簽

<img src="img/xx.jpg" alt="">

  【2】CSS中的background-image屬性

{background-image: url(../img/xx.jpg);}

 

初始化

  前端工程師在使用photoshop之前需要進行一些初始化設置,主要包括以下3個

  【1】首選項設置 <ctrl+k>

編輯 > 首選項 > 單位與標尺 > 把標尺和文字的單位都改成像素

  【2】面板設置(在窗口菜單下)

    1、工具(可切換兩列或單列布局)

    2、選項(與當前選中的工具一一對應)

    3、信息<F8>(顏色、位置、尺寸信息,一般結合矩形選框工具使用)

    4、圖層<F10>(圖層操作)

    5、歷史記錄(記錄歷史操作,常用于回退)

  【3】輔助視圖(在視圖菜單下)

    1、對齊<ctrl+shift+;> (開啟對齊后,圖層移動到另一個圖層或參考線或文檔邊緣時會有自動吸附功能)

    2、標尺<ctrl+R>

    3、參考線<ctrl+;>(視圖 > 顯示 > 參考線)

    [注意]需勾選顯示額外內容,才能看到畫布里的參考線和網格

 

常用工具

  【1】移動工具<V>(常用于選擇圖層及移動圖片)

    在選區工具中的選項面板有圖層和組兩個選項,組一般指的是一個可能包含多個圖層的文件夾,而圖層僅指圖層本身

    [注意]移動工具對應的選項面板上的自動選擇一定要勾選上

  【2】矩形選框工具<M>(常用于選擇一塊區域并配合信息面板查看信息)

    如果認真觀察,會發現矩形選框工具右下角是有一個小三角的,鼠標點擊后不松開會彈出多個選項,包括矩形選框工具、橢圓選框工具、單行選框工具和單列選框工具4種。

    [注意]如果使用矩形選框工具的同時,按住shift按鍵,會生成正方形

    一般地,使用矩形選框工具都是為了建立一個新選區,但實際上,也可以對選區進行如下操作

    1、添加到選區: shift

    2、從選區減去: alt

    3、與選區交叉: shift + alt

  【3】魔棒工具<W>(摳不規則的圖)

    [注意]容差是用來設置顏色取樣時的范圍,容差為0代表只選取當前的顏色值

  【4】裁剪工具+切片工具<C>(裁剪圖片)

    [注意]裁切工具裁的是工作區,不管是多少圖層都能裁切下來

  【5】縮放工具<Z>(縮放畫布)

  【tips】常用的縮放快捷鍵
    1、放大:
      a、ctrl+加號

      b、alt+滾輪上滾

    2、縮小:

      a、ctrl+減號

      b、alt+滾輪下滾

    3、顯示為100%: ctrl+1

  【6】取色器+吸管工具(取色)

    1、填充前景色: alt+del 

    2、填充背景色: ctrl+del

    3、切換前景色和背景色: X

    4、默認前景色和背景色: D

  【7】文字工具<T>(輸入及編輯文字)

  【8】抓手工具<空格>(移動可視區域)

    抓手工具的實際快捷鍵是H鍵,單擊H鍵,再點擊鼠標左鍵不松開,圖片會以適應屏幕大小的形式顯示在屏幕中。當移動鼠標并松開左鍵后,屏幕會放大顯示鼠標所在的圖片區域

快捷鍵

  除了上面提到的一些快捷鍵之后,還有一些常用的快捷鍵也是需要注意的

  【1】單步撤銷或前進: ctrl+z

  【2】連續撤銷: ctrl+alt+z

  【3】回退到某一步: 點擊歷史記錄面板上相應的步驟

  【4】取消選擇: ctrl+d

  【5】變形: ctrl+t

  【6】保存: ctrl+shift+alt+s

  【7】合并圖層: ctrl+e

  【8】蓋印所見圖層: ctrl+shift+alt+e

  [注意]對于一些工具來說,需要調用工具的尺寸大小,通用的快捷鍵是左中括號[和右中括號]

來源:博客園

上一篇: 25種用戶十秒離開你網站的原因

下一篇: 網頁設計培訓課程之漸進增強和優雅降級

分享到: 更多
腾讯分分时时计划 在线二十一点手机游戏 中彩网七乐彩开奖视频 pk10最牛稳赚单双公式 七乐彩近30期开奖号码今晚 什么时时彩计划软件好用 防连挂计划软件 虎扑nba国外直播 火龙果分分彩计划软件 排九至尊大还是天牌大 下载APP送28元彩金100可提现 时时彩宝典手机下载 重庆时时总和多少算大 北京pk10走势图 内蒙古时时计划软件 扑克牌猜大小怎么玩