对任何一个网页开发员来说，掌握基本的Photoshop技巧比如把PSD文件分割为XHTML/CSS文件是必不可少的。 " p6 r$ v) |+ L% b0 f" V7 ^1 {! U
在中我已经讨论了这一点，但为了更简单，许多时候你只需要做简单的图像编辑而且不想和你的网页开发员深入讨论。接下来这篇文章将列举一些常用的Photoshop网页界面设计的方法技巧。

1.改变图标的背景颜色

' ^- I+ T8 [: |% ]% _2 K作为一个网页开发员，我用Photoshop最常要做的是改变图标的背景颜色或者是把图标背景变透明。 & l% b/ e; O& f
就拿RSS(聚合内容)图标为例。这种图标会有不同的形状和尺寸。 * ?/ _% b0 n2 N* x1 y$ V7 P$ W

9 t, E# Z( O) ]- ]% h当你找到了最合适的图标，但你还需要做些修改。最常见的问题是网站的背景和图标的背景可能是不同的，为了把他们搭配在一起，我们需要做一些工作。
6 Y8 V( `; P" g: ?如果图像是GIF格式的，建议先把它转换成PNG格式，他们是类似的，但是PNG格式文件比较小。请阅读。 - U9 h( y' A/ {( q
具体做的方法是：
' z; C' g1 T9 b7 I8 p- C{dy}步：在Photoshop中打开图像，然后点击文件->存储为Web和设备所用格式（快捷键Ctrl/Cmd+Alt/Option+Shift+S）,然后在 预设 右边的下拉框中选择PNG-8或者PNG-24格式。你可以对比下哪种格式的质量和尺寸更好一些。（参看。）
/ y% Y( e7 n( c8 z接着关闭GIF文件打开你刚存储的图片。 2 x& K) C: i; E& r7 e
打开图层面板（如果没显示，按F7键让它可见），你可以看到有一个背景图层。
7 s% L6 g+ n( T( b6 h# p右击那个图层，从菜单里选择背景图层，点击确定。 - q  H2 O8 z, W3 n: o! b
第二步：使用魔术棒工具。 $ [: v4 G* v$ |4 T
1.在工具面板中点击魔术棒工具。 - n0 r, f& Q: G8 ~2 G8 c* Z
2.确保容差设在20左右，xx锯齿和连续是勾选上的，如下图：
* _+ m  W) f4 X8 v( M' p1 n$ \
7 e" _- I3 b& ^0 V# ^% [* f  X  
$ w# |  Y8 {# F/ D% M  B, C然后点击环绕这个图标的白色（或其他颜色）背景。
& S1 n) G+ Y& h/ ~  v0 j) q确保选中的区域尽可能不要包含图标下的阴影部分。如果阴影部分被包含住了，适当的调整容差（用魔术棒重新选择背景）。 ' ]0 O: t" a" o
0 B" d* C% u' e+ k% k
  % k, g6 g- v0 q; e; r, }( e
去除背景颜色
9 ^* b% v4 y3 m% T* K7 J1 `8 R简单的点击Delete键我们就可以去除背景并把它变透明。点击文件->存储为Web和设备所用格式，勾选 透明 选项。 2 c  Z" N1 y- G& P  L1 u( k
改变背景颜色
- L$ W* `2 U, G7 p4 P. Z5 ~5 N1.点击前景色在拾色器中选择你想要的颜色，点击确定。
* V( U! N; ?4 L; I% \) e9 ^; a: k! K7 d2.点击油漆桶工具（快捷键G）。如果你没有发现油漆桶工具，右击渐变工具然后选择油漆桶工具。
" F, O( H/ W9 U- T8 e0 X7 d接着，用它在图标旁边填充上你刚选择的颜色。 ; ^4 ^- D5 [/ I: {0 h+ M9 l7 h
  E, a  N& D1 d  W/ Z9 {! y
  

2.用自动选择工具选择图层

, F& Y4 C7 y' p& a# p5 m选择一个图层很简单：在图层面板中点击那个图层（如果没出现面板按下F7）。 ( E) `4 E# K" {( X+ m  P
如果在你的面板中有很多图层或者图层没有直观得命名，那么找相关的图层会变得很烦人。 2 Q) o' j1 W3 k# d* [
有一种办法是打开自动选择工具：
4 {/ @$ X$ @2 Q! r2 G' v1.在工具面板中点击移动工具。
1 X* h4 N) d' }; N! `- W/ z; i2.选择自动选择右边下拉框中的图层。 & Z/ f4 y4 Y# `; M  w% T
3.勾选自动选择选项。
# T( k2 M" |) g3 Y6 G
( ?7 K% i: C0 B. J! x0 J" n  
1 d4 N/ `0 Z: ?, D启用了自动选择，在画布上随意点击就可以选中相关图层。

3.用Ctrl/Cmd+鼠标左键点击 选择图层。

; \" e- g/ g0 E5 o+ C1 l# y用移动工具（快捷键V）来选择图层的另一种方法是用Ctrl/Cmd+鼠标左键点击 在画布上选择一个特定图层，注意应该把自动选择功能去掉。

4.分割一个图层

5 L7 E3 F# |9 |4 o) ^9 P$ y  Y, E: U选择一个图层后，你也许想把它复制到新文件中从而把它存储为一个新的图片。
% h3 _( h1 T( b一种方法是用裁剪工具（快捷键C）。 . [! T" C, K3 b
* C/ [* m6 i4 ~
  
! F  i" i; ^1 M% J但有一种保持图层大小不变的快捷方法： 8 w8 @, R1 ?0 F7 l
1.按住Ctrl/Cmd键并且点击图层的缩略图。这样就会自动选择那个图层里所有的东西。 ) }) w8 J8 l6 {) A; e! P. L6 q- N) f
2.按下Ctrl/Cmd+C (编辑->复制的快捷键)
- L4 d: g$ S3 ?* @" V3.按下Ctrl/Cmd+N来创建一个新的文件。Photoshop能自动帮你复制和创建一个同样大小的图层的文件。
- H1 d. r7 E& T; R. r+ A' M4 x4.按下Ctrl/Cmd+V 把它复制到新的图层。

5.用拖放的方式把一个图层从一个文件复制到另一个文件

. o3 z7 `3 N. x) b$ c
有许多方法可以用来把一个图层或一组图层从一个PSD文件复制到另一个文件。然而最简单的方法是拖放。
. e) I2 B2 J5 ^" X- |0 z1.从文件中选择你要复制的图层。如果你要复制多个图层，按住Ctrl键在图层面板中选择图层。 / E9 G& Y: T& }) h0 f* K
2.选择移动工具（快捷键V）.
; I% C" S& g1 b$ W0 N
; J: P( W4 @+ s3 R# @6 ?6 x  % ^; h' b8 r# ]# V5 G3 Q
在画布中点击任何地方然后把图层拖到你需要复制到的新建文件里。
% [! ]  H7 W% N/ f& [这个文件会被xx，放开鼠标把复制的图层放在你想要的地方。

6.扩展或收缩图像。

4 f% b5 F0 A9 W- t; Y; Q# X在{dy}个技巧中，我演示了如何选择一个图标的背景。在有些情况下，选区不准确，也许你想放大或缩小选区。
* @/ n( k% C$ K4 H0 a8 {首先，为了看清楚你选择的部分，按下Ctrl+ +来放大这个图像。 0 c* V9 V) v4 x- o
点击选择->修改->扩展 7 J) S' W7 r6 `  T! X
      选择->修改->收缩
+ j' C& Y/ \" h0 t; w2 }* w
- D0 M: |% f* p  d5 g2 r7 I2 U$ U  3 q, ~+ E  W6 T( p
输入你想要扩展或收缩的像素然后点击确定。
3 j3 Z& k: I  E

7.使用图层复合

" A. V" k6 R. {% K
当有多个图层时，获取图层的可见状态会是操作更有效。换言之，只显示你想要看见的图层。
" N: X3 H1 z" Q* Q8 C2 B1.显示图层复合：窗口->图层复合。
2 ^7 j5 U4 H6 S. ~. B& \) z2.在图层复合菜单中选择新建图层复合或者直接在面板下点击新建图层复合快捷键。
) y6 }: i' O5 d/ d0 m! v
* K9 g: {- l8 ^+ G$ V( [  
, d' }7 s# v3 K# H$ |  R+ {3.命名这个新的图层复合，勾选可见性的选项，确定。 9 G; Z% f' R) S! [2 ?; E
应用图层复合 0 i9 r6 w3 J, Q6 Z2 z: {- p! V
点击在这个图层右边图标来隐藏或显示图层复合。 ) {' v+ I( w5 c$ D& N' l$ p

# h$ B: d% |7 N  3 x  T3 B, C  W
$ |5 n% d4 |9 w, H$ {+ p
  

8.基本图像处理：改变颜色

0 |' Z  A2 x: Z2 P& o) z0 M" |# P% h
Photoshop中另一个常见的问题是复制部分图层并改变其颜色。 7 j: K. q, n: p. n; F
这里有一个例子。下面这个图标用作菜单按钮： : Z6 s, n! v3 `) m4 K& X: ~- k
) \  V4 u4 {3 C9 V6 R% Z/ p
  7 _9 {8 J6 ]" Q. x' T) y
如何只把其中的房子复制出来，把它变成黑白色彩？当你需要做鼠标触摸效果时，这个技巧经常会被用到。
6 k1 {" R- k  R! Z6 v9 U. s, Z1.选择矩形选框工具（快捷键M）。 & i! B: T9 e# ^  A
2.在画布中选择这个房子。然后用Ctrl/Cmd+J把他复制到一个新的画布上。 9 W. ]) D: _) p( z2 {# G* Z- [
3.按下Ctrl/Cmd+U调整新图层的色相和饱和度。把饱和度调整到左边来把房子调为黑白。 1 g3 x$ J! [8 r, }2 p
结果： 3 e- X5 l: ?5 l6 i/ V- d
, T, P2 ]9 w. q) _  o1 A; r
  9 y- t9 M7 ^3 L' ]) b
但是彩色版的房子还在。要想看到它，把它设为可见。

9.利用测量工具

2 ?: ^7 D1 \. K( _作为一个网页设计员，为了能制作适合网页的图像，我们常需要xx到像素来测量图像。一个常用的例子是计算清楚菜单栏的尺寸以用作CSS图像拼合。 4 \% H- T& t, y* g
有两种方法来进行测量：
. T& X$ o7 v! q6 @: m# k. y3 I& t量尺（快捷键Ctrl/Cmd+R） / M/ `9 }  C/ h* x% f2 J" E
1.点着不放把左上角的量尺拖向画布。
- c! w5 @8 w5 K: G: H8 U$ i2.在你想要放坐标的地方释放鼠标。
& W: K, C2 T, k' |3.缩放（快捷键Ctrl/Cmd++）更好的观察量尺刻度。 ) d2 c/ ^9 [" a* d! `
建议：双击量尺本身或者点开 编辑->{sx}项->单位和标尺来打开选择框，选择你想用的测量单位（比如从英寸到像素）。 0 \( ]* E. g8 I9 u4 t
" e$ G1 o) ]7 D: a0 h
量尺工具（快捷键I）
, u5 U4 p( ^* s6 x1.在工具面板中点击量尺工具（如果没有看见，右击吸管工具转换为量尺工具）。 ; _1 ]6 B7 m2 D  l2 ~3 r  i3 b& n; f
2.点击后从起点拖到终点来进行测量。
! J' t/ h: ?& D3.检测这部分的宽度和高度。 2 s: A! @  \) g8 u. R7 B
( A9 a: m2 T5 r% f9 W; K% P2 h
  ; p# D0 v) u. P: ~# U3 ^, L
你也有网页开发的Photoshop小技巧？不如在评论中和我们分享。

 

 

 

来源：感知物联网（）是中国{dy}个xxx的物联网平台。投稿信箱：、合作QQ：1282320374、物联网QQ群：105931736