Photoshop实例教程:绘制简单的网页登陆页面

教程旨在教大家使用Photoshop创建一个简单的登录界面。只需一些简单技巧,你也可以设计出一个漂亮的登录界面。界面的背景色使用了几种不同的灰色色系,此举可最大程度保持整个界面的简洁和优雅。

本教程简单易学,适合于初学者。

登录界面

步骤1

新建一个800(H)x600(W)像素的文档。当然也可根据自己的需求新建。接下来,使用圆角矩形工具(U)建立一个320×210像素的圆角矩形,并用浅灰色(light gray)填充,以此作为整个登录界面的背景。

步骤2

为登陆界面背景添加深灰色(#dbdada)投影,参数如下:

投影(Drop shadow): 距离(distance):1px,大小(size):1px,混合模式(blend mode)设为“正片叠底”(Multiply),不透明度(opacity)设为50%

步骤3

为背景应用大小为1px的描边(stroke),描边的颜色与投影的颜色一致,即#dbdada。

[1] [2] [3] [4]  下一页

时间: 2024-07-30 08:39:44

Photoshop实例教程:绘制简单的网页登陆页面的相关文章

Photoshop实例教程:绘制下载文件夹图标

导言: 在大多数的交互和网页设计中,图标都是非常重要的一部分.虽然图标很小,但制作他们也经常是个不小的挑战.在这个教程里,我们将介绍到如何在PS中运用不同的形状和反射制作一个下载文件夹的图标.我们开始吧! 第一步 新建文档 打开PS,新建一个一个文档(Ctrl + N).参数如下,然后使用钢笔工具(P)创建如下形状.(图01) 分辨率:72dpi:颜色模式:RGB:尺寸:600×600 px. 图01 第二步 钢笔工具绘制基本形状使用钢笔工具绘制文件夹背后的部分,然后再绘制蓝色条纹.如下图所示.

Photoshop实例教程:绘制WP新闻博客主题模板

通常在第一次制作新闻博客模板,很难把握方向.这篇教程将为你提供如何在Adobe Photoshop中制作WordPress新闻博客主题的参考.该主题包括页眉区,图片轮换区域(包含特色文章,最近消息,按照分类显示,侧边栏,widget).如果你是初学者,跟着本教程一步一步来就可以.如果你有一定基础,亦可从本教程中获得新的收获. 本教程需用到的资源 · Search · 社交图标 第1步:创建文档 在PS中创建一个1200像素 x 1700像素的文档 标尺工具在本教程中非常有用,使用之前要确保标尺和

Photoshop实例教程:绘制iphone风格导航菜单

本教程学习如何用Photoshop打造专属于你自己的iphone风格导航菜单,主要用到了图层样式来完成的,下面让我们一起来学习吧. 先看效果图. 新建文档450x450像素,背景填充#32363c,新建图层画一个白色矩形. 把不透明度改为6%,类似下图效果. 新建图层,前景色#5b6573在顶部再画一个矩形. 复制6层,改变颜色,1.2.7同一颜色,3为红色,其它为白色. [1] [2]  下一页

Photoshop实例教程:很简单的人物调色教程

听着变形金刚3的音乐发完的这篇教程,呵.很简单的人物调色教程,觉得效果还行吧,就拿过来了.往后还有几篇这样的,一整张图片的教程.其实说道调色,个人认为可以去盒子新浪微薄 weibo.com/huolihezi 下载那些动作回家研究研究就挺好,呵呵.不废话了,往下看教程吧. (翻译不容易,可有很多人把教程拿走却不注明来源,所以..只能加上水印,对不起,影响大家阅读了)          

Photoshop实例教程:绘制清新绿色飘带

本教程的重点是绿色飘带部分的制作.方法跟光束的制作方法类似,先用钢笔勾出轮廓填充绿色,然后用选区及蒙版等做出高光和暗调部分即可.看似简单操作起来都是一些细活,一定要有耐心. 最终效果 1.新建一个壁纸大小的文档如:1024 * 768像素,背景选择白色. 新建一个图层,选择椭圆选框工具,在画布的右下角拉一个椭圆选区如下图,按Ctrl + Alt + D 羽化80个像素. <图1> [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]  下一页

Photoshop实例教程:绘制iOS5通知栏背景

制作工具:Adobe Photoshop cs5iOS5发布后评价都说很棒,于是毫不犹豫的刷了,算是纪念Jobs的临终大作.改进的功能很多,其中一个大功能就是有了一个跟android几乎一样的通知栏,同事看了说:我擦,这功能跟android 的下拉框有啥区别?完全抄袭么- 然后就有人说了:那不是,瞧,对比一下,明显- iOS5的通知栏帅多了,瞧这背景,瞧这细节-.好吧,仔细看了下的确很酷,细节纹理做得很棒,像一块布.发现做起来也不复杂就几步就可以了^__^. 最终效果 步骤 1 新建psd,大小

Photoshop实例教程:绘制奇幻的彩色光影翅膀

效果图是由非常多的光丝构成,不过这些光丝不是用钢笔勾出路径后描边路径得到的.是用更梦幻的水平光束变形得到的.多条叠加后的效果非常梦幻. 最终效果 1.在制作翅膀之前,我们需要先做一些准备工具,需要先做好一些平行的白色半透明线条,大致需要完成的效果如下图. <图1> [1] [2] [3] [4] [5] [6] [7] [8]  下一页

Photoshop实例教程:绘制美丽的漂亮光束

光束的制作是非常讲究耐心的,因为光的质地比较难把握,需要用较多的图层叠加来表现光的层次感.制作的时候最好是多新建一些组,然后分段做出光的不同部分.最终效果 1.由于翅膀是对称图形,我们制作的时候,只需要作出一边就可以了,需要完成的效果如下图. <图1> [1] [2] [3] [4] [5] [6] [7] [8] [9]  下一页

Photoshop实例教程:绘制燃烧的花枝

效果图 第一步 创建文件,大小为600 × 450,然后在添加一个渐变,如下: 第二步 我们把素材下载下来.素材下载,然后命名为"花".并拖到画布里面. 适用混合样式>颜色叠加,就会是下面的效果: [1] [2] [3] [4]  下一页