当前位置:首页 > PS教程 > 设计教程

网页PS设计中常用的八大技巧

  • 2010-12-14 01:07:58
  • 来源/作者:互联网/佚名
  • 己被围观

对任何一个网页开发员来说,掌握基本的Photoshop技巧比如把PSD文件分割为XHTML/CSS文件是必不可少的。同时,我们还应该懂得更多其它的PS技巧,如修改图标背景色、使用多种方式进行P

  对任何一个网页开发员来说,掌握基本的Photoshop技巧比如把PSD文件分割为XHTML/CSS文件是必不可少的。同时,我们还应该懂得更多其它的PS技巧,如修改图标背景色、使用多种方式进行PS抠图、使用快捷键快速选择PS图层等等......下面为大家讲述几个相当有用的PS技巧。

  (一)改变图标的背景颜色

  作为一个网页开发员,我用Photoshop最常要做的是改变图标的背景颜色或者是把图标背景变透明。

  就拿RSS(聚合内容)图标为例。这种图标会有不同的形状和尺寸。

 

网页设计师必修的8个PS技巧

 

 

图01

 

  当你找到了最合适的图标,但你还需要做些修改。最常见的问题是网站的背景和图标的背景可能是不同的,为了把他们搭配在一起,我们需要做一些工作。

  如果图像是GIF格式的,建议先把它转换成PNG格式,他们是类似的,但是PNG格式文件比较小。请阅读在网站中用GIF和PNG图像的利弊。

  具体做的方法是:

  第一步:在Photoshop中打开图像,然后点击文件->存储为Web和设备所用格式(快捷键Ctrl/Cmd+Alt/Option+Shift+S),然后在

  预设 右边的下拉框中选择PNG-8或者PNG-24格式。你可以对比下哪种格式的质量和尺寸更好一些。(参看教你如何存储Web所用格式的图片。)

  接着关闭GIF文件打开你刚存储的图片。

  打开图层面板(如果没显示,按F7键让它可见),你可以看到有一个背景图层。

  右击那个图层,从菜单里选择背景图层,点击确定。

  第二步:使用魔术棒工具。

  1.在工具面板中点击魔术棒工具。

  2.确保容差设在20左右,消除锯齿和连续是勾选上的,如下图:

 

网页设计师必修的8个PS技巧

 

 

图02

 

  然后点击环绕这个图标的白色(或其他颜色)背景。

  确保选中的区域尽可能不要包含图标下的阴影部分。如果阴影部分被包含住了,适当的调整容差(用魔术棒重新选择背景)。

 

网页设计师必修的8个PS技巧

 

 

图03

 

 

  去除背景颜色

  简单的点击Delete键我们就可以去除背景并把它变透明。点击文件->存储为Web和设备所用格式,勾选"透明"选项。

  改变背景颜色

  1.点击前景色在拾色器中选择你想要的颜色,点击确定。

  2.点击油漆桶工具(快捷键G)。如果你没有发现油漆桶工具,右击渐变工具然后选择油漆桶工具。

  接着,用它在图标旁边填充上你刚选择的颜色。

 

网页设计师必修的8个PS技巧

 

 

图04

 

  (二)用自动选择工具选择图层

  选择一个图层很简单:在图层面板中点击那个图层(如果没出现面板按下F7)。

  如果在你的面板中有很多图层或者图层没有直观得命名,那么找相关的图层会变得很烦人。

  有一种办法是打开自动选择工具:

  1.在工具面板中点击移动工具。

  2.选择自动选择右边下拉框中的图层。

  3.勾选自动选择选项。

 

网页设计师必修的8个PS技巧

 

 

图05

 

  启用了自动选择,在画布上随意点击就可以选中相关图层。

  (三)用Ctrl/Cmd+鼠标左键点击 选择图层

  用移动工具(快捷键V)来选择图层的另一种方法是用Ctrl/Cmd+鼠标左键点击 在画布上选择一个特定图层,注意应该把自动选择功能去掉。

  (四)分割一个图层

  选择一个图层后,你也许想把它复制到新文件中从而把它存储为一个新的图片。

  一种方法是用裁剪工具(快捷键C)。

 

网页设计师必修的8个PS技巧

 

 

图06

 

  但有一种保持图层大小不变的快捷方法:

  1.按住Ctrl/Cmd键并且点击图层的缩略图。这样就会自动选择那个图层里所有的东西。

  2.按下Ctrl/Cmd+C (编辑->复制的快捷键)

  3.按下Ctrl/Cmd+N来创建一个新的文件。Photoshop能自动帮你复制和创建一个同样大小的图层的文件。

  4.按下Ctrl/Cmd+V 把它复制到新的图层。

  (五)用拖放的方式把一个图层从一个文件复制到另一个文件

  有许多方法可以用来把一个图层或一组图层从一个PSD文件复制到另一个文件。然而最简单的方法是拖放。

  1.从文件中选择你要复制的图层。如果你要复制多个图层,按住Ctrl键在图层面板中选择图层。

  2.选择移动工具(快捷键V)。

 

网页设计师必修的8个PS技巧

 

 

图07

 


(责任编辑:PS家园网) ​​​​​​​

 1/2    1 2 下一页 尾页

*PSjia.COM 倾力出品,转载请注明来自PS家园网(www.psjia.com)

标签(TAG)

更多精彩内容

  • 文字排版技巧知识大全 文字排版技巧知识大全
  • 电商产品PS修图:金属质感效果 电商产品PS修图:金属质感效果
  • 色彩叠加在各类设计中的巧妙运用 色彩叠加在各类设计中的巧妙运用
  • PS CS5制作逼真绳子 PS CS5制作逼真绳子
  • PS绘制柔美飘逸的丝带 PS绘制柔美飘逸的丝带
  • PS制作一款科技感的立体插图 PS制作一款科技感的立体插图
  • banner制作初级教程 banner制作初级教程
  • 如何设计一个高端大气上档次的 logo? 如何设计一个高端大气上档次的 logo?