页面设计
将创意首先在Photoshop中以图片的方式实现,是决定一个网站好坏的核心所在。以下呈现的是涉及Photoshop的教程,其中包括如何创建网站界面、文字效果、照片编辑等内容。
网页设计是UI设计的一部分,其中的思路和方法都是相通的,所以有时候拿图标的设计来练手是非常好的扩展网页设计思路,提高设计能力的方法。再将图标放置到背景之上,加上日历等其他附属信息也就是一张非常漂亮的桌面壁纸了。所以值此情人节到来之际,飞鱼的声纳首先祝有无情人的各位情人节都快乐!
标签式按钮常常用在附属导航中,线条非常漂亮,下面是具体实现步骤。新建一个文档,580像素宽,290像素高,白色背景,其他选项默认。给前景色选择一种灰色,我这里用的颜色是#898989,使用Alt+Delete键给背景图层填充此颜色。然后新建一个图层,选择圆角矩形工具(U),工具栏上选择路径属性,半径10个像素,在图层中画出路径形状,
iphone和ipad中的亚麻布纹背景看上去非常细腻而又不乏质感,给人以人性的柔和的感觉。这样的材质不仅可以出现在UI里,当然也可以应用到网页设计中,所以这篇文章里我就来介绍一下如何在Photoshop中创建这样的背景材质。Ctrl+N新建一个文档,680像素宽,390像素高,背景白色,其余保持默认,点击确定。新建文档的大小要比你最终想要的图片大小大一些,基本上上下左右各留出50像素。
一、新建一个文档,640像素宽、480像素高,白色背景。接下来新建一个图层,填充为#e2e2e2,重命名为”bg”,在图层面板中右键单击”bg”图层,选择”转换为智能物件(Convert to Smart Object)”。然后给该图层应用”滤镜(Filter)>杂色(Noise)>添加杂色(Add Noise)”命令。各项参数设置如下图所示:
在PremiumPixels上看到N多可供下载的网页设计PSD文件,都非常精美。但它只提供了现成的文件,并没有提供教程,那么我就通过源文件自己摸索,向Orman Clark学习一下如何做出如此漂亮的作品。以下是个人摸索的具体步骤:
接上篇文章,这篇文章我们来说说如何在Photoshop中创建杂色背景图案。杂色背景图案看上去稀松平常,没什么出众的效果,但是如果将其应用到网页上以后就会发现这样的杂色背景给网页着实增色不少(如下图)。杂色虽然是很细微的效果,但却打破了单色背景的单调性,让网页看上去更富有质感。
我在去年夏天写的那篇文章《在Photoshop中创建不规则无缝拼接图案》给大家提供了如何在Photoshop中创建以绿草地为内容的无缝拼接网页图案的方法。今天我再来介绍一下如何在Photoshop中创建网格背景的无缝拼接图案。
首先需要说明的是,用作页面背景的网页图案一定要简单,效果不能太强烈,只需要提供一点点质感就可以了,要不就抢了页面内容的风头。而实际上页面内容才应该是整个网站的视觉焦点。这种经验我们可以在给手机换壁纸的时候收获到,我们经常是本能的去挑选那些非常漂亮的风景照或者非常抢眼的图片作为手机的背景图片,可等真正将壁纸换上去之后发现效果并不理想,原因是手机的屏幕不是光秃秃一片,什么也没有,而是摆满了各种图标、文字。本来信息量就多,再添加上一张夺目的背景壁纸,只能是扰乱本来应该吸引注意力的内容,甚至让人产生纷繁杂乱的感觉。在这点上我们要向iphone的壁纸设计师学习,iphone手机上的壁纸看上去都比较低调,但是壁纸效果却非常突出。因为他们知道屏幕上各种图标才是视觉重点。