建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 图像设计 > Photoshop教程 >

用Photoshop设计网页的几个小技巧(2)

时间:2010-12-19 19:52来源: 作者: 点击:
1.显示图层复合:窗口-图层复合。 2.在图层复合菜单中选择新建图层复合或者直接在面板下点击新建图层复合快捷键。 3.命名这个新的图层复合,勾选可见性的选项,确定。 应用图层复合 点击在这个图层右边图标来隐藏或
 

  1.显示图层复合:窗口->图层复合。

  2.在图层复合菜单中选择新建图层复合或者直接在面板下点击新建图层复合快捷键。

网页设计师应该掌握的Photoshop小技巧

  3.命名这个新的图层复合,勾选可见性的选项,确定。

  应用图层复合

  点击在这个图层右边图标来隐藏或显示图层复合。

网页设计师应该掌握的Photoshop小技巧

网页设计师应该掌握的Photoshop小技巧

 复制部分图层并改变颜色

  photoshop中另一个常见的问题是复制部分图层并改变其颜色。

  这里有一个例子。下面这个图标用作菜单按钮:

  如何只把其中的房子复制出来,把它变成黑白色彩?当你需要做鼠标触摸效果时,这个技巧经常会被用到。

网页设计师应该掌握的Photoshop小技巧

  1.选择矩形选框工具(快捷键M)。

  2.在画布中选择这个房子。然后用Ctrl/Cmd+J把他复制到一个新的画布上。

  3.按下Ctrl/Cmd+U调整新图层的色相和饱和度。把饱和度调整到左边来把房子调为黑白。

  结果:

网页设计师应该掌握的Photoshop小技巧

  但是彩色版的房子还在。要想看到它,把它设为可见。

  扩展或收缩图像

  在第一个技巧中,我演示了如何选择一个图标的背景。在有些情况下,选区不准确,也许你想放大或缩小选区。

  首先,为了看清楚你选择的部分,按下Ctrl+ +来放大这个图像。

  点击选择->修改->扩展

  选择->修改->收缩

网页设计师应该掌握的Photoshop小技巧

  输入你想要扩展或收缩的像素然后点击确定。

网页设计师应该掌握的Photoshop小技巧

  改变图标的背景颜色

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

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

网页设计师应该掌握的Photoshop小技巧

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

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

  具体做的方法是:

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

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

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

  打开图层面板(如果没显示,按F7键让它可见),你可以看到有一个背景图层。右击那个图层,从菜单里选择背景图层,点击确定。

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

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

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

网页设计师应该掌握的Photoshop小技巧

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

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

网页设计师应该掌握的Photoshop小技巧

  去除背景颜色

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

  改变背景颜色

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

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

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

网页设计师应该掌握的Photoshop小技巧

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片