| 收藏本站 | 关于我们
首页 免费模板 收费模板 部分案例 分类模板 地方门户 二次修改 服务定制 酷站欣赏 设计学院 特效代码 字体下载
当前位置:首页 >> PhotoShop教程 >> 基础知识
CSS3 PK Photoshop:圆角和框投影(一)
编辑发布:飞将军   点击量:6689

本教程旨在教大家结合CSS3样式创建一个漂亮,简洁的导航栏。而在过去,我们只能借助图片,java script和div层进行创作。

注意:下面所有的示例都是在Mozilla Firefox,Safari和Chrome中进行测试。你也可以再IE等非上述浏览器中测试一下实际效果。

准备工作

在网页设计的早期,外观漂亮,设计精美的导航栏就是保持网站条理清晰,结构良好的强有力元素之一。在过去,一个好的设计所用到的投影(shadow),渐变色(gradient),圆角(rounded corners)和鼠标悬停效果(hover)等都需要一系列的技巧,但这会增加代码和图片数量。

我们会在教程中深挖两个非常重要的CSS3效果:圆角和框投影(Box Shadows),另外,本文还会使用线性渐变(线性渐变已在此文进行过介绍CSS3 vs Photoshop – Complex Backgrounds)。

相关素材:http://webdesigntutsplus.s3.amazonaws.com/tuts/181_css3_vs_psd/Samples.zip

演示地址:https://webdesigntutsplus.s3.amazonaws.com/tuts/181_css3_vs_psd/Samples/Navigation_non_bleed/index2.html

第一步:圆角

大家都听说过圆角,我们就不具体讲述圆角该如何设计了。在接下来的例子中,我们着重讲述用Photoshop和CSS3实现圆角效果的差异。

用任何图形处理软件都能非常简单地创建一个圆角效果。但是在Photoshop中,我们会遇到以下问题:

精度问题:即便你设置了圆角半径,Photoshop内置的抗锯齿引擎通常还是会为图片增添多余的像素。过去,大多数人都必须得手动去掉这些影响圆角精度的像素,让图像的圆角处更加洁净,例如下图的红色的圆角出的多余像素。

编辑问题:这是创建圆角图形遇到的最大问题。如果你在Photoshop中创建了一个半径为10像素的圆角图形,但出于需要,你得把半径增加到20像素,除了重新拉伸图形,或手动编辑圆角外,没有其它办法,时间浪费了,并且又不精确。重定大小是一个大问题,如果你想拉伸或放大图形,你必须使用Photoshop中的锚点选择工具,因为使用自由变换(Transform Controls)可能导致圆角图形边缘失真。花在圆角切片上时间还没有包括在内。

填充和边框:对圆角框图形进行渐变填充往往是一项浩大的工程。没有覆盖边框,你还要准确地去掉相关图片的多余像素。你至少要为每个框创建3副图像,一个是顶部的圆角,另外是底部圆角,以及创建水平或垂直渐变,然后写代码。填充图片遇到的另一问题是,减小容器的高度和宽度,得到渐变色得到不合要求的效果。(见下图所示)

混合角样式:在Photoshop中,创建混合角的样式得花一点时间,因为它并没提供这样的结合方式。你只能手动增加会减少半径或结合图形,然后裁剪每个角。

 

上一篇没有了下一篇PS电影海报添加电光效果
 服务流程 | 积分说明 | 使用说明 | 粤ICP备17004399号-2 电视直播 | QQ头像获取