Photoshop制作网页加载动画教程

  作为一个混迹互联网的IT人士,如果想各方面都了解点得话,那么设计gif动画也是个不错的学习方向哦。

  下面就step by step 教大家如何设计一个loading.gif的加载动画图:

  先看photoshop教程效果图:


  1、创建一个图层100×100 PX,背景颜色#2d2d2d


  2 、在背景文件上用直线工具绘制一条1px的白色纵线:


  注意,这条直线要水平居中对齐,具体方法如下:

  同时选中这两个浮层:


  点击排列方式中的‘水平居中对齐‘图标:


  3、选择直线图层,用命令行Control+ T对直线旋转45°


  4 、选中变换后的直线浮层,用快捷键Control + Alt + Shift + T复制旋转该直线到如下效果:


  5 、创建一个1px半径的圆角矩形,如下图所示,这里加上参考线是为了更好的让圆角矩形与直线都水平居中


  6、对圆角矩形进行变形,如下所示:


  这里变形方法是先对圆角矩形Control + T,到变形状态后,然后点击鼠标右键,出现下图所示的菜单,然后选择’斜切’属性,

  即可变换左下和右下两个点

分类:

  • PS入门教程
时间: 2024-10-31 05:54:56

Photoshop制作网页加载动画教程的相关文章

jquery插件NProgress.js制作网页加载进度条

  这篇文章主要介绍了jquery插件NProgress.js制作网页加载进度条的相关资料,需要的朋友可以参考下 NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情! 你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现.其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见.不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现! NProgress.js应用于复杂网页的细长进度条.由 Googl

用css3制作旋转加载动画的几种方法

以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会利用css3去实现一些很酷的效果,这些效果原来更多的是利用图片来实现.最近的一个改进就是利用css3制作旋转加载动画.以下将分别介绍几种实现的方案. 方案1,图片辅助 传统做法是直接用动态的GIF图片,这个方案是用PNG图片加上背景颜色来模拟静止的加载图片,然后利用css中的animation处理图

CSS3制作loading加载动画效果代码

  在我们这次的新设计教程中,我将向您展示如何创建纯CSS3的loading加载动画组件(没有任何图像).我认为它可以为你减少项目的代码量和额外的图像对你网站的负载.我准备了三种不同风格的加载组件.现在,让我们看看我做的. css3-loading Step 1. HTML 你可以在这里看到的三个元素–放置"加载"元素的div.  代码如下   <div class="main_body">     <div class="element

PhotoShop制作loading加载等待GIF动画教程

浏览网页打开某一项的时候经常会碰到loading内容加载中的等待动画,本次我们利用PhotoShop来制作一个loading加载等待的GIF动画效果. 本次使用工具是 photoshop cs5精简版制作 教程 小小GIF动画,不成敬意,还请笑纳 不仔细看你可能都不会发现下面这个就是效果图: 1.新建文件,200X200PX 2.用那个工具画一个正圆,并新建一个图层. 3.点画笔工具,然后再点上面红框处,设置画笔的大小和硬度 4.切换到路径面板,点用画笔描边路径,就能得到一个圆,然后在工作路径下

PhotoShop制作美女眨眼Gif动画教程

photoshop制作美女眨眼动画的教程,主要为大家介绍如何使用photoshop中的动画面版配合图层的隐藏和显示功能制作一幅古典美女的眨眼GIF动画. 最终效果 1.打开人物素材,按Ctrl + J 把背景图层复制一层,如下图 2.在复制的图层中用仿制图章工具把眼睛涂抹掉,用画笔和铅笔画出眼睫毛,不要画得太夸张,如下图 photoshop教程 3.回到背景图层复制一层,按Ctrl + Shift + ] 置顶 分类: PS入门教程

Photoshop制作炫彩万花筒动画教程

  先来看看最终的效果图吧: 具体的制作步骤如下: 1.打开ps新建300*300像素的文件,文件名随便填,如图点确定. 2.把图层1填充为黑色的背景,然后新建图层2,如图. 3.选中图层2,用椭圆工具拖一个正圆的选区,填充为红色,不要取消选区. 4.用左方向键移动适当的距离,然后删除选区内的内容,如图. 5.把图层2复制一层图层2副本,如图. 6.选中图层2副本,在画布上用移动工具把图层2副本移到如图所示. 7.选中图层2,用橡皮檫工具檫除掉不需要的部分,如图. 8.选中图层2副本向下合并如图

jquery插件NProgress.js制作网页加载进度条_jquery

NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情! 你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现.其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见.不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现! NProgress.js应用于复杂网页的细长进度条.由 Google, YouTube, 和 Medium 提供灵感. 安装 依赖于 jQuery (1.8版本及以上),添加 np

PhotoShop制作滚动图片GIF动画效果图文教程

教程利用PhotoShop制作滚动图片GIF动画效果,考虑制作滚动图像多样性效果,我分别介绍三种不同的方法来制作有差异的动画效果,分别是:平行单向滚动动态效果,往复式滚动动画效果和开关门式滚动动画. 大家可以根据自已已经掌握的动画制作知识进行选择性练习,同时,根据教程思路创作出另一种不同风格的动画效果. 先上几个效果: 分类: PS入门教程

HTML5 五彩圆环Loading加载动画实现教程

原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈的时候还有淡入淡出的效果.每一个圆环不停地旋转,从而实现加载动画的效果.首先你可以看看效果演示: 你也可以在这里查看在线演示 下面分享一下这款HTML5 Loading动画的实现过程,主要是HTML代码和CSS3代码,以及初始化的JS代码. 首先是HTML代码,只定义一个Loading容器,非常简单