Photoshop打造简洁的新闻栏目网页设计制作教程
p3db 人气:3介绍用PhotoShop打造简洁的新闻栏目网页设计效果,比较简洁的新闻栏目设计,喜欢网页设计的同学可以一起来学习一下!
效果:
![PhotoShop打造简洁的新闻栏目网页设计制作教程 教程](https://img.qb5200.com/download-x/20201127/265032.jpg)
制作开始:
绘制一个矩形框。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/265033.jpg)
给矩形框增加样式:描边。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/265034.jpg)
在底部矩形上再绘制一个长形矩形。用来承载栏目名。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/265035.jpg)
给这个载体矩形增加样式。
如:渐变叠加配合描边与内发光。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/265036.jpg)
每个边缘细节,都要将画布放大,像素化处理。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/265037.jpg)
在栏目标题载体上写上所需名称及其他元素。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/265038.jpg)
添加框架内的图片展示区域。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/265039.jpg)
添加标题与摘要展示。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/265040.jpg)
所看见的初步样式。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/265041.jpg)
选择铅笔工具,展开画笔工具栏。调整间距。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/265042.jpg)
新建图层。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/265043.jpg)
按住Shift键在如下区域绘制一根点状线。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/265044.jpg)
需要更改点状线的颜色是,增加颜色叠加即可。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/265045.jpg)
选择文本框工具绘制一个矩形文本框,并增加内容。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/265046.jpg)
再新建一个图层。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/265047.jpg)
使用铅笔绘制一个小方点。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/265048.jpg)
并使用ctrl+j复制这个图层。(当前我们三条文本链接,所以只需要三次)。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/265049.jpg)
排列好头尾标题点时,使用垂直自动排列工具。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/265050.jpg)
最终增加元素及调整颜色所看见的效果。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/265051.jpg)
加载全部内容