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

ps创建常见的网页风格教程系列一

  • 2022-12-24 19:44:46
  • 来源/作者:互联网/佚名
  • 己被围观

作者: maimai 最终效果图 好了,让我们开始吧。打开photoshop创建一个新文档,尺寸是1020px X1240px,背景颜色设置为#e6e9d4。 用矩形工具,创建一个形状,颜色 #bbc19c。我的形状尺寸是 1020px X 327px 好了,添加一个图层蒙版(保证你的图层是被选中状态)。 然后确

网页效果图教程

点击图层>图层蒙版>隐藏所有(保证你选择的图层是图片图层)。

网页效果图教程

选择渐变工具,确定是默认颜色设置(前景白色,背景黑色),按照下图的标记拖拽你的渐变。

网页效果图教程

我的效果:

网页效果图教程

好了,添加一些阴影。我用的是椭圆工具,在头部下面创建一个细长的形状。

网页效果图教程

保持这个形状被选定,我把这个图层命名为阴影。点击滤镜>模糊>高斯模糊。

网页效果图教程

5.5半径

网页效果图教程

好了,我们头部基本上也完成了。

网页效果图教程

Step 4 – 创建主要内容部分

按照下图,添加一些文字。采用的是三栏布局。

网页效果图教程

选择矩形工具,创建一个形状。这就是我们的主要内容区域。我的尺寸是935px X 504px。

网页效果图教程

设置图层样式如下:

网页效果图教程

网页效果图教程

我的效果

网页效果图教程

然后在上面和下面添加一些阴影,用椭圆工具和高斯模糊就可以完成了。添加一些分割线。

现在的效果:

网页效果图教程

好了,添加更多的矢量图标和文字。这是现在的效果。

网页效果图教程

好了,主要内容部分也完成了

Step 5 – 创建底部内容

底部内容就很容易完成了。放上logo和一些文字就可以了。

最终的效果图
image

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

更多精彩内容

  • APP展示图,教你怎么用PS制作APP的界面图片 APP展示图,教你怎么用PS制作APP的界面图片
  • 用ps制作大拇指胜利手势logo 用ps制作大拇指胜利手势logo
  • 用ps制作金属质感徽章 用ps制作金属质感徽章
  • 用ps制作绿色环保Logo 用ps制作绿色环保Logo
  • 用ps制作放大缩小logo 用ps制作放大缩小logo
  • ps cs6设计火箭UI图标 ps cs6设计火箭UI图标
  • 教你用PS打造网页效果图全过程 教你用PS打造网页效果图全过程
  • 进度条,设计一个彩色进度条 进度条,设计一个彩色进度条