Photoshop做模特网站模板实例

photoshop在实际应用中,我们经常会用ps做网站图片,如用ps做模特网站,我们就有可能会做网站模板,所以今天就教大家一个用Photoshop做模板的实例,希望大家认真学习 此网站由于内容并不太多,所以主要使用2分拦布局,同时结合多边形的导航与花草图片的点缀使整个页面风格十分活跃

Photoshop绘制展示软件产品的绿色网页布局

作者:佚名 出处:发现吧翻译 本教程中我将展示如何创建一个简单展示软件产品的绿色网页布局。 本教程将用到的资源 Classy Icon Set Software Box 完成的设计 这将是我们创建的最终结果, 点击图片放大浏览. 创建文档 新建文档,大小1200 x 1200 像素,背景为白色. 设置你的前景

photoshop在实际应用中,我们经常会用ps做网站图片,如用ps做模特网站,我们就有可能会做网站模板,所以今天就教大家一个用Photoshop做模板的实例,希望大家认真学习

此网站由于内容并不太多,所以主要使用2分拦布局,同时结合多边形的导航与花草图片的点缀使整个页面风格十分活跃,网站的图片可以说是主要的色彩区域,通过优质图片素材的选择与文字的结合,让人觉得整个页面十分饱满与协调。

最终效果如下:

Photoshop做模特网站模板实例插图

新建850×1200大小文件,将背景复制一次,然后在复制出的背景上增加渐变图层样式,如下图

Photoshop做模特网站模板实例插图(1)

使用圆角矩形绘制黑色区域

Photoshop做模特网站模板实例插图(2)

导入一张你喜欢的图片,复制图片到头部圆角矩形位置

                                       
按住ctrl随后点选圆角矩形图层,出现选区,随后选中导入的图片图层,反选,删除,你将会看到圆角区域的图片保留下来,其他区域被删除了

Photoshop做模特网站模板实例插图(3)

使用钢笔工具勾画如下形状

Photoshop做模特网站模板实例插图(4)

填充钢笔选区为白色,调整不透明度为12%

Photoshop做模特网站模板实例插图(5)

使用多边形工具在网站顶部绘制如下图形状

Photoshop做模特网站模板实例插图(6)

随后增加渐变样式

Photoshop做模特网站模板实例插图(7)

Photoshop做模特网站模板实例插图(8)

                                       
在多边形上制作导航按钮文字与搜索条

Photoshop做模特网站模板实例插图(9)

下一步,我们导入花的素材作为网站头部的装饰

Photoshop做模特网站模板实例插图(10)

随后用草的PS笔刷来进一步修饰网站头部

Photoshop做模特网站模板实例插图(11)

之后用制作导航同样的方法制作网站头部下方的长方形区域,如下图

Photoshop做模特网站模板实例插图(12)

加入导航与图片链接

Photoshop做模特网站模板实例插图(13)

使用颜色#242323 到#000000 的渐变色创建网站的主要区域,同时导入一张女性模特素材

Photoshop做模特网站模板实例插图(14)

                                       
复制模特图片,随后将原始的模特图片进行4%模糊处理,再将复制出的图片设置不透明度为65%

Photoshop做模特网站模板实例插图(15)

现在添加网站主体的文字与图片内容

Photoshop做模特网站模板实例插图(16)

现在使用钢笔工具勾画网站底部形状,颜色与网站的头部导航区域相同

Photoshop做模特网站模板实例插图(17)

                                       
添加花草与底部文字

Photoshop做模特网站模板实例插图(18)

完成最后的网站设计图

Photoshop做模特网站模板实例插图

photoshop在实际应用中,我们经常会用ps做网站图片,如用ps做模特网站,我们就有可能会做网站模板,所以今天就教大家一个用Photoshop做模板的实例,希望大家认真学习

此网站由于内容并不太多,所以主要使用2分拦布局,同时结合多边形的导航与花草图片的点缀使整个页面风格十分活跃,网站的图片可以说是主要的色彩区域,通过优质图片素材的选择与文字的结合,让人觉得整个页面十分饱满与协调。

最终效果如下:

Photoshop做模特网站模板实例插图

新建850×1200大小文件,将背景复制一次,然后在复制出的背景上增加渐变图层样式,如下图

Photoshop做模特网站模板实例插图(1)

使用圆角矩形绘制黑色区域

Photoshop做模特网站模板实例插图(2)

导入一张你喜欢的图片,复制图片到头部圆角矩形位置

                                       

按住ctrl随后点选圆角矩形图层,出现选区,随后选中导入的图片图层,反选,删除,你将会看到圆角区域的图片保留下来,其他区域被删除了

Photoshop做模特网站模板实例插图(3)

使用钢笔工具勾画如下形状

Photoshop做模特网站模板实例插图(4)

填充钢笔选区为白色,调整不透明度为12%

Photoshop做模特网站模板实例插图(5)

使用多边形工具在网站顶部绘制如下图形状

Photoshop做模特网站模板实例插图(6)

随后增加渐变样式

Photoshop做模特网站模板实例插图(7)

Photoshop做模特网站模板实例插图(8)

                                       

在多边形上制作导航按钮文字与搜索条

Photoshop做模特网站模板实例插图(9)

下一步,我们导入花的素材作为网站头部的装饰

Photoshop做模特网站模板实例插图(10)

随后用草的PS笔刷来进一步修饰网站头部

Photoshop做模特网站模板实例插图(11)

之后用制作导航同样的方法制作网站头部下方的长方形区域,如下图

Photoshop做模特网站模板实例插图(12)

加入导航与图片链接

Photoshop做模特网站模板实例插图(13)

使用颜色#242323 到#000000 的渐变色创建网站的主要区域,同时导入一张女性模特素材

Photoshop做模特网站模板实例插图(14)

                                       

复制模特图片,随后将原始的模特图片进行4%模糊处理,再将复制出的图片设置不透明度为65%

Photoshop做模特网站模板实例插图(15)

现在添加网站主体的文字与图片内容

Photoshop做模特网站模板实例插图(16)

现在使用钢笔工具勾画网站底部形状,颜色与网站的头部导航区域相同

Photoshop做模特网站模板实例插图(17)

                                       

添加花草与底部文字

Photoshop做模特网站模板实例插图(18)

完成最后的网站设计图

Photoshop做模特网站模板实例插图

作者: 791650988

为您推荐