• 微课视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
微课江湖
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 微课视频
  • photoshop
  • Fireworks
  • CorelDraw
  • Illustrator
  • Painter
  • Freehand
  • Indesign
  • flash
  • maya
  • autocad
  • 3dmax
您的位置:首页 > 平面设计 >photoshop > PS教你打造流畅酷炫的动态演示

PS教你打造流畅酷炫的动态演示

作者:@MartinRGB 字体:[增加 减小] 来源:互联网 时间:2017-05-22

@MartinRGB 向大家分享了PS教你打造流畅酷炫的动态演示,其中包含ps打造动态文字,ps动态教程,ps怎么调动态的照片,ps教程做动态图,ps动态背景素材等知识点,遇到此问题的同学们可以参考下
PS教你打造流畅酷炫的动态演示
   静态设计
  步骤1
  新建画布
PS教你打造流畅酷炫的动态演示
  步骤2
  视图>新建参考线,垂直,间隔15px,左面4条,右面4条
  视图>新建参考线,水平,在40px,128px,220px处设置水平参考线。
  完成后效果如下图。
PS教你打造流畅酷炫的动态演示
  步骤 3
  在画布上添加状态栏(也就是第一条水平参考线上方40px处),状态栏各位可以从源文件里面直接复制获取。
  不过这里我用了iOS 7 UI Kit的动作包>>>>微盘下载
PS教你打造流畅酷炫的动态演示
  下一步,创建新图层,然后在40px和128px之间创建选区,填充颜色#2c3137.
PS教你打造流畅酷炫的动态演示
  步骤4
  在标题栏添加应用的标题和Logo
PS教你打造流畅酷炫的动态演示
  步骤5
  画一个放大镜icon,圆形结合圆角矩形即可,颜色和App Logo相同。
  再画一个选项icon,圆角矩形即可,颜色和App Logo相同。
PS教你打造流畅酷炫的动态演示
  步骤6
  在128和220px水平参考线之间的区域创建选区,填充颜色和上一选区颜色一样。
  然后在两个区域之间添加2px,不透明度80%的亮色的分割线。
PS教你打造流畅酷炫的动态演示
  步骤7
  选择文字工具,添加分类。
  为了暗示所选中的分类,所选中的分类要用粗体、亮色。
  其他用普通粗细,暗色。
  然后“杂志”复制一份,使用粗体+亮色,然后不透明度设置为0%,暂时隐藏
  “首页复制一份”,常规体+暗色,不透明度设置为0%,暂时隐藏
PS教你打造流畅酷炫的动态演示
PS教你打造流畅酷炫的动态演示
  步骤8
  在菜单项的左右添加箭头,使用圆角矩形即可。
PS教你打造流畅酷炫的动态演示
  步骤9
  背景填充为标题栏和菜单栏的颜色,确保背景图层处于GUI元素下方。
PS教你打造流畅酷炫的动态演示
  步骤10
  在主题区域中,划出如下图选区,填充颜色#3f464e
PS教你打造流畅酷炫的动态演示
  添加图层样式,描边,内阴影,外发光。具体参数如下。
PS教你打造流畅酷炫的动态演示
PS教你打造流畅酷炫的动态演示
PS教你打造流畅酷炫的动态演示
  步骤11
  在形状上方画一个白色圆角矩形,我们会在这个区域放置图像。
PS教你打造流畅酷炫的动态演示
  设置图层样式内发光。(图层样式若不满意可不设置)
PS教你打造流畅酷炫的动态演示
  步骤12
  添加图像,然后创建剪贴蒙版.
PS教你打造流畅酷炫的动态演示
  然后添加文本图层,利用尺寸,颜色,粗细,来营造清晰的阅读层级。
  最后添加几个按钮图标。
PS教你打造流畅酷炫的动态演示
  步骤13
  其他几个矩形同理
PS教你打造流畅酷炫的动态演示
  步骤14
  先把主要区域的矩形图层全部隐藏,然后构建一个较大的矩形区域,这将应用到选择具体卡片后的细节界面。
  做完后,此图层组不透明度设置为0%
PS教你打造流畅酷炫的动态演示
  触控点
  步骤1
  创建新图层,命名为“Tap”,画一个白色形状,不透明度70%
PS教你打造流畅酷炫的动态演示
  步骤2
  复制这个圆形,扩大,去掉填充,描边设置为3pt白色
  继续复制,扩大,描边2pt
  完事后居中对齐
PS教你打造流畅酷炫的动态演示
  隐藏tap图层组,因为刚加载完界面是不会显示触控点的,但是当选择元素产生转场时会出现。
  2 下一页 阅读全文</div> </div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • PS教你打造流畅酷炫的动态演示

相关文章

  • 2017-05-22photoshop制作LOMO风格照片
  • 2017-05-22PS滤镜功能打造逼真的闪电电击效果
  • 2017-05-22PS制作暴风雨来临前的乌云密布效果图
  • 2017-05-22PS制作集中的发光效果方法详解
  • 2017-05-22PS设计出炫酷有创意的音乐节海报
  • 2017-05-22Photoshop设计制作出唯美清新的茶类海报
  • 2017-05-22Photoshop设计时尚简洁的低多边形星系风格海报教程
  • 2017-05-22PS制作从茶壶里出来的小女孩效果图
  • 2017-05-22Photoshop利用画笔和图层样式制作著名游戏中的绿猪图标
  • 2017-05-22ps制作漂亮逼真的阳光发散效果

文章分类

  • photoshop
  • Fireworks
  • CorelDraw
  • Illustrator
  • Painter
  • Freehand
  • Indesign
  • flash
  • maya
  • autocad
  • 3dmax

最近更新的内容

    • Photoshop设计创意动感的流体海报背景
    • ps怎么设计透明水印?
    • Photoshop cs5快速的给人像照片抠头发教程
    • Photoshop绘制金属立体质感的玩具飞机模型
    • 如何使用PS快速给证件照更换背景色
    • ps制作立体感线条
    • Photoshop制作一个简易的地图图标
    • 用ps制作漂亮透明的气泡
    • PS位移滤镜制作一张褶皱效果的圣诞树图案纸张
    • 如何画qq企鹅?ps路径工具绘制qq企鹅方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2015-2018 All Rights Reserved. 微课江湖 版权所有