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

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

作者:@MartinRGB 字体:[增加 减小] 来源:互联网

@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教你打造流畅酷炫的动态演示

相关文章

  • PS绘制飘在空中的热气球
  • Photoshop制作超强的金属质感的标志效果
  • 教你用PS简单快速制作漂亮的炫彩背景
  • ps教你无缝隙拼图合图教程
  • Photoshop制作圣诞节主题风格的橘子电商宣传海报
  • PS在图片上添加从天上掉下的立方晶体方法
  • ps制作出人像泼墨效果
  • ps怎么制作手机app图标的背景颜色?
  • ps怎么使用扩展画布给图片留白?
  • ps怎么拼图呢?PS把两张照片拼接在一起

文章分类

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

最近更新的内容

    • Photoshop设计制作简洁的双11电商促销横幅
    • ps怎么设置画笔形状? PS设置画笔的形状动态的教程
    • ps怎么合成在公路上游泳的效果?
    • ps简单制作漂亮的宇宙光束
    • Photoshop设计很Q萌的多肉植物拟物化ICON
    • 用PS制作温馨浪漫的情人节电子贺卡
    • ps制作一款逼真的纹身
    • PS制作逼真漂亮的草坪图案
    • PHOTOSHOP打造三角形酷炫像素BANNER教程
    • Photoshop设计制作多层次的2016潮流立体字海报

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

©2020-2025 All Rights Reserved. linkedu.com 版权所有