photoshop sony PSP游戏机的界面设计教程

这是一个sony PSP游戏机的界面设计教程,这里只讲述按钮部分的制作,和大家分享一下GUI设计的过程和经验。 我门先看一下最终的效果图。 前边是照片图,后边一个将是我们要用photoshop创造的图片。 1.创建一个新文档使用下面的设置。 背景颜色可以设置为白色

这是一个sony PSP游戏机的界面设计教程,这里只讲述按钮部分的制作,和大家分享一下GUI设计的过程和经验。

我门先看一下最终的效果图。

photoshop sony PSP游戏机的界面设计教程 

前边是照片图,后边一个将是我们要用photoshop创造的图片。

photoshop sony PSP游戏机的界面设计教程photoshop sony PSP游戏机的界面设计教程 

1.创建一个新文档使用下面的设置。 背景颜色可以设置为白色或透明。

photoshop sony PSP游戏机的界面设计教程 

2.选择椭圆工具(U),打开几何体选项窗口。 选择固定大小,然后设置宽度和高度为74px。 点击您的工作区域,此设置将自动创建一个圆形。

photoshop sony PSP游戏机的界面设计教程#p#分页标题#e# 

3.双击,弹出图层样式。 应用下面的图层样式:

photoshop sony PSP游戏机的界面设计教程photoshop sony PSP游戏机的界面设计教程photoshop sony PSP游戏机的界面设计教程photoshop sony PSP游戏机的界面设计教程 

你的圆应该和下面的图片完全一样:

photoshop sony PSP游戏机的界面设计教程 

4.让我们复制这一层:右键单击它并选择复制图层。 命名此新图层白边。 这个新的复制层具备了所有的样式,但我们只想要圆的形状。 所以,在这个新层右击并选择清除图层样式。

photoshop sony PSP游戏机的界面设计教程 

#p#分页标题#e#5.双击白边层,弹出图层样式。 应用下面的图层样式:

photoshop sony PSP游戏机的界面设计教程 

我们只想层填充样式没有任何的影响,我们必须设置填充不透明度为0%的高级混合。 

photoshop sony PSP游戏机的界面设计教程 

你的圆应该和下面的图片完全一样:

photoshop sony PSP游戏机的界面设计教程 

6.复制白边层并命名新图层灰色边界。 再次,明确了这层和应用层的风格后,图层新样式如下:

photoshop sony PSP游戏机的界面设计教程photoshop sony PSP游戏机的界面设计教程photoshop sony PSP游戏机的界面设计教程#p#分页标题#e# 

7.是时候添加游戏机标志性的形状:三角形,方形,圆形和X。

自定义形状工具(U)。 打开自定义形状选择器窗口,点击黑色的小箭头,然后点击选择全部这样所有的形状将出现在选择器窗口,你会发现三角形,圆形和方形框架。 X键在本教程结束后我会告诉你如何创建。设置前景颜色为#000000,让我们的形状为白色。 选择一些你喜欢的形状,并打开的几何体选项窗口。 选择固定大小,然后设置宽度和高度为40像素。 点击您的工作区域将自动创建形状。

photoshop sony PSP游戏机的界面设计教程 

8.我们必须调整在我们中间按钮形状。 按Ctrl +对底层的缩略图点击激活圆的选区。 选择移动工具(V)和选择我们的形状图层。 你会看到你的屏幕上对齐按钮,这样我们将调整到选择的形状。 在此之后,按CTRL + D取消选择。

photoshop sony PSP游戏机的界面设计教程 

9.此预设框架有一些僵化。 因此, 选择图层,滤镜>模糊高斯模糊。 设置为0,3 PX的半径。 为了更好地理解这一步需要仔细观察与放大前和应用效果后的形状。 

photoshop sony PSP游戏机的界面设计教程 

10.我们的按钮看起来过于平坦, 你必须使用纹理来现实更真实的图标。创建一个新图层并命名为纹理。 按Ctrl +点击相应的图层缩略图调出圆的选区。 填充这一新的层颜色#282828。 按Ctrl + D取消选择。 选择去滤镜>噪音>添加噪声。 设置为46%,高斯。#p#分页标题#e#

photoshop sony PSP游戏机的界面设计教程photoshop sony PSP游戏机的界面设计教程 

光度变化层给5%的不透明度混合模式。

photoshop sony PSP游戏机的界面设计教程 

11.复制灰色边层。 这层的图层样式,设置前景到#000000及以下的图像波纹应用新的样式:

photoshop sony PSP游戏机的界面设计教程photoshop sony PSP游戏机的界面设计教程 

我们要模拟的光线来自左顶部区域,在渐变叠加窗口,还需要移动光标到您的形状左上角的效果。 改变这层不透明度为60%,你会产生:

photoshop sony PSP游戏机的界面设计教程#p#分页标题#e# 

12.最后,我们将增加我们的按钮的亮度。 复制刚才的层并命名新图层为光亮。 图层样式如下:

photoshop sony PSP游戏机的界面设计教程photoshop sony PSP游戏机的界面设计教程 

右键点击亮度层,选择转换为智能对象。 再次,右键单击此层,现在选择栅格化图层。我们只是希望未来的光从圆的左上角部分照射:在图像的蓝色区域如下。 因此可以用软刷清除。

photoshop sony PSP游戏机的界面设计教程 

现在完成了,复制三个改变中间的图形。

photoshop sony PSP游戏机的界面设计教程 

X的制作步骤:

设置前景颜色为#000000,让我们的形状为白色。 选择矩形工具(U),打开的几何体选项窗口。 选择固定大小,然后设置宽度为4像素,高度为44像素。 点击您的工作空间和此设置将自动创建该矩形的任何地方。 创建另一个矩形反转设置:44px × 4像素。

#p#分页标题#e#现在你有两个方向的矩形:垂直和水平。激活移动工具(V),选择这两个层次,进入编辑>变换>旋转并设置旋转45 °。现在你有你的X框。 摆在你们面前的按钮,记得要运用高斯模糊。

photoshop sony PSP游戏机的界面设计教程

原创文章,作者:admin,如若转载,请注明出处:https://www.2233cn.com/%e7%bb%8f%e5%85%b8%e8%ae%be%e8%ae%a1/1690.html

(0)
上一篇 2014年9月22日 上午7:57
下一篇 2014年9月22日 上午7:58

相关推荐

  • Photoshop制作可爱的时尚拼贴效果

    本教程主要使用Photoshop制作可爱的时尚拼贴效果,本教程介绍简单拼贴图的制作方法。大致过程:处理之前需要用网格及辅助线把素材均分成一些小方块,然后分别用选区把这些小方块复制到新的图层,适当给小方块描边并添加投影。最后把小方法变形处理,再改变背

    经典设计 2014年9月6日
  • Photoshop制作木质谦镶嵌效果的文字

    步骤1 首先让我们建立一个新文档,我的是540 300像素,72ppi。大小并不重要的。在网上能找到很多好的木材纹理,我使用的纹理在Defcon x.de上。我们将首先创建3个图层,分别粘贴每个木材纹理。颜色不重要,重要的是木材的色调,为此我选择了淡的,中度的,深

    经典设计 2014年7月3日
  • Photoshop调出美女照片梦幻的紫色效果教程

    本教程主要使用Photoshop调出美女照片梦幻的紫色效果,冷色图片调色方法有很多,可以直接新建图层,用冷色叠加快速得到初步冷色。然后慢慢微调各部分的颜色,直到效果自己满意即可。喜欢的朋友让我们一起来学习吧。 来源:PS联盟 作者:Sener 最终效果 下面

    经典设计 2015年3月20日
  • Photoshop合成创意抽象的头像打散效果

    本教程主要使用Photoshop合成抽象风格的美女艺术头像,教程将教你如何创建一个黑暗的抽象照片效果,通过添加一些抽象元素来营造景深。 效果图: 制作过程: 来源:P大点

    经典设计 2014年12月26日
  • Photoshop合成唯美的水墨卷轴人物签名

    本教程主要使用Photoshop合成唯美的水墨卷轴人物签名,教程大致分为两部分来完成。首先是卷轴部分的制作,这一步可以直接使用卷轴素材,也可以按照作者的方法制作简单的效果。然后是主体画面的制作,这一步需要要统一好颜色和风格,背景及素材可以按照自己的

    经典设计 2014年8月18日
  • Photoshop小魔术:将照片变成水晶苹果

    效果描述 ⊙一张真实苹果的照片,如图 80-1 所示,通过电脑进行喷画出一个晶莹透彻的苹果。下面通过实例的操作,详细介绍如何使用 Photoshop CS 软件的各种工具制作水晶苹果,效果如图 80-2 所示。 创作思路 打开一张真实的苹果照片,运用【钢笔工具】先勾画

    经典设计 2014年9月27日
  • Photoshop设计时尚大气的51立体字教程

    本教程主要使用Photoshop设计时尚大气的51立体字教程,文字的制作由两个大的部分构成:立体字及花纹装饰。立体字部分制作稍微复杂一点,主体面部分还需做出一些镂空效果。装饰部分可以直接使用素材,增加浮雕效果即可。 来源:PS联盟 作者:Sener 最终效果 1

    经典设计 2014年12月30日
  • Photoshop让超漂亮MM眼睛动起来

    要求: 1.只放大眼睛。鼻梁部分不能受影响。 2.眼睛的小眼角部分保持不动,大眼角向左、向右移动。 3.眼睛垂直方向不变。 4.其余部分不受影响。 1.打开图片: 用辅助线确定需要眼睛移动的区域,如图: 用辅助线确定需要眼睛移动的区域,如图: 在信息面板上可

    经典设计 2014年7月5日
  • Photoshop调出静物柔和小清新效果图

    来源:多玩 作者:雪穗 效果图 原图 教程

    经典设计 2015年1月5日
  • Photoshop调出美女照片淡淡唯美的通透肤色

    本教程主要使用Photoshop调出美女照片淡淡唯美的通透肤色,素材图片主色为暗绿色,画面看上去不够清爽。调色的时候可考虑用淡色,并用云彩滤镜等增加梦幻效果,后期微调人物肤色,再把整体颜色调柔和即可。喜欢的朋友一起来学习吧。 来源:PS联盟 作者:Sene

    经典设计 2014年12月9日

发表评论

您的电子邮箱地址不会被公开。