ps设计企业网站教程(4)

效果 1, 在PS中新建文件,宽度定义为1000px,实际上我们所要用到的宽度一般在950px-980px之间。为了方便更好的展示网站的整体效果。所以文件的宽度应大于网页实际的宽度。高度自定,但最好要大于整个页面的高度,在

Photoshop鼠绘教程:有点国家感觉的青翠春竹(3)

5、复制多几份,然后叠加起来。注意上面的接口处也应该减淡。 6、CTRL+T整体缩小,然后 复制一份备用。 (整体缩小前应该合并竹节图层) 7、将两节合为一节,接口处用减淡工具减淡

ps设计企业网站教程(4)插图

效果

ps设计企业网站教程(4)插图(1)

1, 在PS中新建文件,宽度定义为1000px,实际上我们所要用到的宽度一般在950px-980px之间。为了方便更好的展示网站的整体效果。所以文件的宽度应大于网页实际的宽度。高度自定,但最好要大于整个页面的高度,在没有办法确定页面的高度范围时,我们可以把高度定到大于网页高度。这样,整个页面制作好了。我们可以使用裁切工具。将多余的部分裁切掉。

ps设计企业网站教程(4)插图(2)

ps设计企业网站教程(4)插图(3)

2, 这个实例,以网站实际宽度为800像素为例进行操作。为了加快制作流程,节省制作的时间成本。我通常的做法是:a,选矩形选框工具;b,定义固定宽度800px,高度无所谓;c,新建图层;D,建立选区,填充任何一种颜色;e,选移动工具[v键],定方水平居中;f,CTRL+R,打开标尺;g,定义参考线。这样,我们就把页面的实际宽度定义完成。所有的制作,设计部分,都是在这样的区域中进行。然后,把刚建的图层删除。因为建这个层的目的是定议参考线

ps设计企业网站教程(4)插图(4)

3, 开始制作导航部分。下面还是使用选框工具。定议高度为60px,并在文件中新建图层,创建一个矩形的选区。填充任意一种颜色。CTRL+D取消选择。对此矩形选用渐变叠加样式。如图所示

ps设计企业网站教程(4)插图(5)

4, 在头部导航的底部,建立两直线。高度为1px.一条黑色线,一条白色线。将两条件合并,使用图层样式中的“叠加”就产生了如图所示的效果

ps设计企业网站教程(4)插图(6)

5, 下面制作鼠标经过导航文字的变化部分。简单的操作方式是,直接把刚建方的矩形复制图层。再CTRL+T自由变换。将其缩小宽度,并对渐变图层样式进行一些小小的改动。如图效果所示

ps设计企业网站教程(4)插图(7)

6, 在小矩形的两边。分别建方两条垂直线。线为灰色。一个导航点击已制作完成。下面开始复制这个导航点击状态时的效果。为了使导航与背景之间不要太过于融合。我在导航下面再建立一层,并使用一种颜色对比强列的渐变效果。如图所示

ps设计企业网站教程(4)插图(8)

7, 简单的制作一个logo.输入文字”shop”,并对其添加图层样式,如图设置

ps设计企业网站教程(4)插图(9)

8, 单独新建一个文件,文件大小为3px × 3px;背景为透明。在这个3px × 3px文件中,画上三个1px × 1px的黑色矩形,如图所示;然后,CTRL+A,全选,在编辑菜单中选择定义图案。再回到之前的文件中,按CTRL键,点击”shop”文字层,调出文字选区,再选择编辑菜单中的填充图案。(要选择刚才定义的图案。)

ps设计企业网站教程(4)插图(10)

9, 为了使整个页面更加的有质感。我们选择背景层,使用滤镜>杂色>添加染色 如图所示,完成头部的设计

5, 下面制作鼠标经过导航文字的变化部分。简单的操作方式是,直接把刚建方的矩形复制图层。再CTRL+T自由变换。将其缩小宽度,并对渐变图层样式进行一些小小的改动。如图效果所示

ps设计企业网站教程(4)插图(7)

6, 在小矩形的两边。分别建方两条垂直线。线为灰色。一个导航点击已制作完成。下面开始复制这个导航点击状态时的效果。为了使导航与背景之间不要太过于融合。我在导航下面再建立一层,并使用一种颜色对比强列的渐变效果。如图所示

ps设计企业网站教程(4)插图(8)

7, 简单的制作一个logo.输入文字”shop”,并对其添加图层样式,如图设置

ps设计企业网站教程(4)插图(9)

8, 单独新建一个文件,文件大小为3px × 3px;背景为透明。在这个3px × 3px文件中,画上三个1px × 1px的黑色矩形,如图所示;然后,CTRL+A,全选,在编辑菜单中选择定义图案。再回到之前的文件中,按CTRL键,点击”shop”文字层,调出文字选区,再选择编辑菜单中的填充图案。(要选择刚才定义的图案。)

ps设计企业网站教程(4)插图(10)

9, 为了使整个页面更加的有质感。我们选择背景层,使用滤镜>杂色>添加染色 如图所示,完成头部的设计

ps设计企业网站教程(4)插图

效果

ps设计企业网站教程(4)插图(1)

1, 在PS中新建文件,宽度定义为1000px,实际上我们所要用到的宽度一般在950px-980px之间。为了方便更好的展示网站的整体效果。所以文件的宽度应大于网页实际的宽度。高度自定,但最好要大于整个页面的高度,在没有办法确定页面的高度范围时,我们可以把高度定到大于网页高度。这样,整个页面制作好了。我们可以使用裁切工具。将多余的部分裁切掉。

ps设计企业网站教程(4)插图(2)

ps设计企业网站教程(4)插图(3)

2, 这个实例,以网站实际宽度为800像素为例进行操作。为了加快制作流程,节省制作的时间成本。我通常的做法是:a,选矩形选框工具;b,定义固定宽度800px,高度无所谓;c,新建图层;D,建立选区,填充任何一种颜色;e,选移动工具[v键],定方水平居中;f,CTRL+R,打开标尺;g,定义参考线。这样,我们就把页面的实际宽度定义完成。所有的制作,设计部分,都是在这样的区域中进行。然后,把刚建的图层删除。因为建这个层的目的是定议参考线

ps设计企业网站教程(4)插图(4)

3, 开始制作导航部分。下面还是使用选框工具。定议高度为60px,并在文件中新建图层,创建一个矩形的选区。填充任意一种颜色。CTRL+D取消选择。对此矩形选用渐变叠加样式。如图所示

ps设计企业网站教程(4)插图(5)

4, 在头部导航的底部,建立两条直线。高度为1px.一条黑色线,一条白色线。将两条件合并,使用图层样式中的“叠加”就产生了如图所示的效果

ps设计企业网站教程(4)插图(6)

ps设计企业网站教程(4)插图

效果

ps设计企业网站教程(4)插图(1)

1, 在PS中新建文件,宽度定义为1000px,实际上我们所要用到的宽度一般在950px-980px之间。为了方便更好的展示网站的整体效果。所以文件的宽度应大于网页实际的宽度。高度自定,但最好要大于整个页面的高度,在没有办法确定页面的高度范围时,我们可以把高度定到大于网页高度。这样,整个页面制作好了。我们可以使用裁切工具。将多余的部分裁切掉。

ps设计企业网站教程(4)插图(2)

ps设计企业网站教程(4)插图(3)

2, 这个实例,以网站实际宽度为800像素为例进行操作。为了加快制作流程,节省制作的时间成本。我通常的做法是:a,选矩形选框工具;b,定义固定宽度800px,高度无所谓;c,新建图层;D,建立选区,填充任何一种颜色;e,选移动工具[v键],定方水平居中;f,CTRL+R,打开标尺;g,定义参考线。这样,我们就把页面的实际宽度定义完成。所有的制作,设计部分,都是在这样的区域中进行。然后,把刚建的图层删除。因为建这个层的目的是定议参考线

ps设计企业网站教程(4)插图(4)

3, 开始制作导航部分。下面还是使用选框工具。定议高度为60px,并在文件中新建图层,创建一个矩形的选区。填充任意一种颜色。CTRL+D取消选择。对此矩形选用渐变叠加样式。如图所示

ps设计企业网站教程(4)插图(5)

4, 在头部导航的底部,建立两条直线。高度为1px.一条黑色线,一条白色线。将两条件合并,使用图层样式中的“叠加”就产生了如图所示的效果

ps设计企业网站教程(4)插图(6)

5, 下面制作鼠标经过导航文字的变化部分。简单的操作方式是,直接把刚建方的矩形复制图层。再CTRL+T自由变换。将其缩小宽度,并对渐变图层样式进行一些小小的改动。如图效果所示

ps设计企业网站教程(4)插图(7)

6, 在小矩形的两边。分别建方两条垂直线。线为灰色。一个导航点击已制作完成。下面开始复制这个导航点击状态时的效果。为了使导航与背景之间不要太过于融合。我在导航下面再建立一层,并使用一种颜色对比强列的渐变效果。如图所示

ps设计企业网站教程(4)插图(8)

7, 简单的制作一个logo.输入文字”shop”,并对其添加图层样式,如图设置

ps设计企业网站教程(4)插图(9)

8, 单独新建一个文件,文件大小为3px × 3px;背景为透明。在这个3px × 3px文件中,画上三个1px × 1px的黑色矩形,如图所示;然后,CTRL+A,全选,在编辑菜单中选择定义图案。再回到之前的文件中,按CTRL键,点击”shop”文字层,调出文字选区,再选择编辑菜单中的填充图案。(要选择刚才定义的图案。)

ps设计企业网站教程(4)插图(10)

9, 为了使整个页面更加的有质感。我们选择背景层,使用滤镜>杂色>添加染色 如图所示,完成头部的设计

作者: 791650988

为您推荐

联系我们

联系我们

0898-88881688

在线咨询: QQ交谈

邮箱: email@wangzhan.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部