Photoshop打造简洁的新闻栏目网页设计教程

2016-02-16 03:16 14 1 收藏

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐Photoshop打造简洁的新闻栏目网页设计教程,希望大家看完后也有个好心情,快快行动吧!

【 tulaoshi.com - PS 】

效果:

Photoshop打造简洁的新闻栏目网页设计教程,PS教程,图老师教程网

制作开始:

绘制一个矩形框。

Photoshop打造简洁的新闻栏目网页设计教程,PS教程,图老师教程网

给矩形框增加样式:描边。

Photoshop打造简洁的新闻栏目网页设计教程,PS教程,图老师教程网

在底部矩形上再绘制一个长形矩形。用来承载栏目名。

Photoshop打造简洁的新闻栏目网页设计教程,PS教程,图老师教程网

给这个载体矩形增加样式。

如:渐变叠加配合描边与内发光。

Photoshop打造简洁的新闻栏目网页设计教程,PS教程,图老师教程网

每个边缘细节,都要将画布放大,像素化处理。

Photoshop打造简洁的新闻栏目网页设计教程,PS教程,图老师教程网

在栏目标题载体上写上所需名称及其他元素。

Photoshop打造简洁的新闻栏目网页设计教程,PS教程,图老师教程网

添加框架内的图片展示区域。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/ps/)

Photoshop打造简洁的新闻栏目网页设计教程,PS教程,图老师教程网

添加标题与摘要展示。

Photoshop打造简洁的新闻栏目网页设计教程,PS教程,图老师教程网

所看见的初步样式。

Photoshop打造简洁的新闻栏目网页设计教程,PS教程,图老师教程网

选择铅笔工具,展开画笔工具栏。调整间距。

Photoshop打造简洁的新闻栏目网页设计教程,PS教程,图老师教程网

新建图层。

Photoshop打造简洁的新闻栏目网页设计教程,PS教程,图老师教程网

按住Shift键在如下区域绘制一根点状线。

Photoshop打造简洁的新闻栏目网页设计教程,PS教程,图老师教程网

需要更改点状线的颜色是,增加颜色叠加即可。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/ps/)

Photoshop打造简洁的新闻栏目网页设计教程,PS教程,图老师教程网

选择文本框工具绘制一个矩形文本框,并增加内容。

Photoshop打造简洁的新闻栏目网页设计教程,PS教程,图老师教程网

再新建一个图层。

Photoshop打造简洁的新闻栏目网页设计教程,PS教程,图老师教程网

使用铅笔绘制一个小方点。

Photoshop打造简洁的新闻栏目网页设计教程,PS教程,图老师教程网

并使用ctrl+j复制这个图层。(当前我们三条文本链接,所以只需要三次)。

Photoshop打造简洁的新闻栏目网页设计教程,PS教程,图老师教程网

排列好头尾标题点时,使用垂直自动排列工具。

Photoshop打造简洁的新闻栏目网页设计教程,PS教程,图老师教程网

最终增加元素及调整颜色所看见的效果。

Photoshop打造简洁的新闻栏目网页设计教程,PS教程,图老师教程网

 

来源:https://www.tulaoshi.com/n/20160216/1567379.html

延伸阅读
标签: PS PS基础
先看看效果图 1、新建一个大小1920*1200像素的文档,RGB颜色模式,分辨率72像素/英寸。新建一个图层,双击打开图层样式,选择渐变叠加。 2、点这里下载雪花形状。加载到画笔里面。 3、我们将创建雪花背景图案,新建一个大小68px*76px的新文档,RGB颜色模式,分辨率为72像素/英寸。选择自定义形状工具(U),在选项栏中点击形状...
这个实例是模仿天猫服饰活动页做的一个banner,在蓝色理想论坛有网友对实例中的立体格子背景做法疑问,我静下心来,花了点时间将效果做出来。立体格子的结构比较简单,主要是要认真观察细节,处理好阴影的效果。 高清图片:http://pan.baidu.com/share/link?shareid=125546&uk=3708036670 教程详情 程序: Adobe Photoshop cs6 难度:中...
来源:火星时代 作者:Jar 好的设计不一定要追求复杂,只要善于构图,即使用最简单的线条也能做出极佳的视觉效果。如下面的教程:作者用的元素不多,一点过渡色块,再加上几个线条和一些小点,出来的效果也很绚丽。 最终效果 1、新建一个文档,将背景以十六进制色号为2a3b4d的颜色填充,或者你自己喜欢的任何颜色。 2、使用选择工具...
标签: PS PS基础
本文将通过一个实例教程展示如何利用photoshop(版本:cs2)制作一个美观的LOGO,适用于游戏题材网站,喜欢的朋友让我们一起来学习吧。 本教程为 图老师论坛 会员 intknight 原创教程,转载请注明作者和出处 先看看效果图: 软件:Photoshop CS 2 具体实例: 我的一个客户请我帮他的游戏网站重新设计一个新的LOGO,以下是他目前使用的LOGO...
标签: PS PS基础
最终效果 一、头脑风暴: 围绕口感和高档去想找素材的关键字,以下是我想到的一些关键字。 二、寻找灵感: 找寻灵感的过程中,我们脑海里面一定要记住这个海报需要体现的是什么,然后在各大设计网站找一些海报分析他们的合成技法、颜色调性、版式排版、文案处理手法等等。。。这个过程中脑海里面会自然形成一个大概的画面。 三、...

经验教程

119

收藏

83
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部