欢迎来到天天文库
浏览记录
ID:9476423
大小:64.50 KB
页数:7页
时间:2018-05-01
《photoshop设计制作ui界面艺术类网站》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库。
1、photoshop设计制作UI界面艺术类网站 本文打造的网站非常有设计感,作为艺术和设计类网站来说,传统的用户体验和网站内容可能并不是首要考虑的内容,而更多得要让整个网站在视觉上跟人以吸引力 先看一下看完成图: 图片看不清楚?请点击这里查看原图(大图)。 我们运用950x1130px作为网页设计文件尺寸,背景为黑色,用圆角矩形打造白色图形,半径设定为15px 见下图我们做完的外形是用于网站的头部,放LOGO和导航文字的位置 图片看不清楚?请点击这里查看原图(大图)。 此时为其加上图层样式 图片看不清楚?请点击这里
2、查看原图(大图)。 图片看不清楚?请点击这里查看原图(大图)。 做完后的头部外形样式如下 图片看不清楚?请点击这里查看原图(大图)。 加入网站的域名文字和导航按钮文字 图片看不清楚?请点击这里查看原图(大图)。 我们只在右半加入三个导航文字,只为使之们看起来不单调,我们为每个导航文字前加上发光小图标,先打造一3px的长线,随后为其加上下方样式,做完后拷贝三次 图片看不清楚?请点击这里查看原图(大图)。 做完后见图 图片看不清楚?请点击这里查看原图(大图)。 用选区工具绘制选区 图片看不清楚?请点击这
3、里查看原图(大图)。 随后创建图层,填充白色,并设定不透明度为2% 在头部区块下再打造一白色圆角矩形作为主要内容的导航文字区域 图片看不清楚?请点击这里查看原图(大图)。 加上样式 图片看不清楚?请点击这里查看原图(大图)。 123下一页[感谢阅读这篇文章,..,] 图片看不清楚?请点击这里查看原图(大图)。 图片看不清楚?请点击这里查看原图(大图)。 做完见图 图片看不清楚?请点击这里查看原图(大图)。 选中其中一半区域 图片看不清楚?请点击这里查看原图(大图)。 创建图层,并在选区中填充白色
4、,设定不透明度为5%,加入导航按钮文字,文字之间的线条是用两条1px的直线,一深一浅,如此看起来就有了凹槽效果,这在websbook.前面的网站设计教程中多次出现,这儿不再具体描述 图片看不清楚?请点击这里查看原图(大图)。 我们为导航按钮打造一鼠标滑过效果,先用椭圆在新图层上打造白色圆圈 图片看不清楚?请点击这里查看原图(大图)。 用"滤镜>模糊>高斯模糊",设定参数为6~8,做完后裁剪掉导航部分,把剩余圆圈设定不透明度到23% 图片看不清楚?请点击这里查看原图(大图)。 在导航图层下创建一图层,运用圆角矩
5、形打造如下虚线外形 图片看不清楚?请点击这里查看原图(大图)。 运用如下样式,运用放射渐变 图片看不清楚?请点击这里查看原图(大图)。 上方的边线渐变可依照下图,做完后能出来见下图样子就可以了 图片看不清楚?请点击这里查看原图(大图)。 协同网站本身的黑蓝色色调运用对应的素材照片,加入欢迎文字,艺术网站运用的照片可随便行,本文我们全是只为迎合整个网站的色调风格选取对应的照片 图片看不清楚?请点击这里查看原图(大图)。 上图中右下角的按钮样式如下 图片看不清楚?请点击这里查看原图(大图)。 图片看不清楚
6、?请点击这里查看原图(大图)。 上一页123下一页[感谢阅读这篇文章,..,] 用一样的手法为网页打造区块 图片看不清楚?请点击这里查看原图(大图)。 运用顶部效果文字和发光图标 图片看不清楚?请点击这里查看原图(大图)。 上方几个区块中第一区块我们把用来放照片。因此我们为这个区块中在划出有个圆角矩形,并为其加上样式 图片看不清楚?请点击这里查看原图(大图)。 看到此时效果图如下 图片看不清楚?请点击这里查看原图(大图)。 把事先预备好的照片放入其中,并运用黑色做横条来放描述文字,黑色横条不透明度设定为4
7、0% 图片看不清楚?请点击这里查看原图(大图)。 其他一区块加入文字新闻等标题 为最终一区块加入圆角矩形,这儿我们放入一幅张小照片 图片看不清楚?请点击这里查看原图(大图)。 请留意我们整个网站的风格是圆角,因此照片也尽量运用圆角来使整个网站风格统一 图片看不清楚?请点击这里查看原图(大图)。 只为更有设计感,我们把照片两方各弄出两个圆曹 图片看不清楚?请点击这里查看原图(大图)。 之后再其上加入两个箭头,这个时候然后可用flash来替换 图片看不清楚?请点击这里查看原图(大图)。 做完后最终来整体
8、看下我们的设计网站 图片看不清楚?请点击这里查看原图(大图)。上一页123[感谢阅读这篇文章,..,]
此文档下载收益归作者所有