要做一个demo,美工给了效果图片,需要将其变成html。
将过程记录下,记录的重点是ps的基本操作和图片的切法,都是自己摸索的,应该还有更好的方法。
效果图的部分如下:
用div+css来实现,圆角用背景图片来做,多个背景可以做到同一个背景图片上,这样可以减少请求次数,从效果图上看,只有顶部需要圆角效果,其他部分可以直接用border来做,顶部用3个div分别做左边,右边和中部的背景来实现效果,如图:
准备做如下背景图:
用PS打开效果图,放大后用标尺可以看出,圆角宽度6px即可,所以背景图片宽12px,高度只要大于顶部圆角的高度即可。首先建根据算好尺寸,如12*300,建一个图片,截取圆角部分复制到新建的图片上,如图:
复制过来发现最右边能看到底部的马赛克(有透明),直接从左边1px位置选择一列,ctrl+t进行自由变换,拉宽覆盖到右边这1px,然后通过左边圆角来复制右边圆角,复制刚才的图层,通过自由变换,水平翻转,如图:
下图就是翻转后的效果,左边6px是左边的圆角背景,右边6px是右边的圆角背景:
合并这两个图层,准备将高度拉到之前算好的尺寸,如图:
(合并图层)
(拉一个标尺)
(自由变换拉伸到指定高度)
然后就是图片的下半部分放中间的div的背景图片,做x方向的平铺,方式和这类似。
接下来用类似的方式做出按钮的图片:
此图做的时候没考虑清楚,高亮图片应该放在右边,这样写css的时候,position的默认位置可以写0,会简单一点,在保存为gif前可以先水平翻转一次;
CSS部分比较简单,background-image都一样,主要就是根据图片和div来控制background-position,略了。
- 描述: 效果图的一部分
- 大小: 16.2 KB
- 大小: 29.3 KB
- 大小: 20.5 KB
- 大小: 27.1 KB
- 大小: 21.3 KB
- 大小: 24.5 KB
- 大小: 13.2 KB
- 大小: 9.4 KB
- 大小: 13.6 KB
- 大小: 46.3 KB
分享到:
相关推荐
android 简易圆角ImageView 自带在裁剪
根据Excel表格中的数据,批量生成矩形(带或不带圆角)、圆形和环形的简单CAD图形(dwg格式)。 仅仅适用于板材切割领域(火焰切割、等离子切割、激光切割)的简易图形的批量出图,应用范围极窄。 使用说明 按《CAD...
简易实现DIV圆角的JavaScript代码和使用方法
YQImageTool微博:畸形滴小男孩简易图片处理工具:圆角、缩略图、水印、裁剪、根据遮罩图形状裁剪、阴影、旋转、渲染UIView成图片、压缩2种使用方法:-下载文件直接拖到工程中使用,然后:#import "YQImageTool.h"-...
根据Excel表格中的数据,批量生成矩形(带或不带圆角)、圆形和环形的简单CAD图形(dwg格式)。 仅仅适用于板材切割领域(火焰切割、等离子切割、激光切割)的简易图形的批量出图,应用范围极窄。 使用说明 按《CAD...
简易画图板的实现,有以下功能:铅笔,橡皮,直线,矩形,椭圆,圆角矩形,颜色面板,工具面板,重绘。
加枫简易绘图器可以绘制直线,圆,长方形,圆角矩形,可以选择绘图颜色
1)天空div里面构建五个子div,命名为云,每一个div控制大小、圆角和白色填充。 2)用子div的before和after伪元素转块元素,控制其大小、圆角、位置及其缩放等,填充白色,让其与云div一起组成云朵。 3)分别控制...
iOS端的简易图片处理工具:圆角、缩略图、水印、裁剪、根据遮罩图形状裁剪、阴影、旋转、渲染UIView成图片、压缩…… 更详细介绍及使用方法见GitHub:https://github.com/976431yang/YQImageTool
简易画图板,仿windows自带的画图板,能画直线、圆、椭圆、多边形,矩形,圆角矩形,铅笔涂鸦,能在背景图上画图。可与背景一起保存为.bmp格式的图片。提供源代码,有详细的注解。有兴趣的朋友可以拿去修改并完善。
简单的画图板,可以画出直线、圆、曲线、喷枪、直角矩形、圆角矩形等图形,而且可以通过橡皮擦擦除。
今天继续玩小程序的api,看着别人例子跟着做一个小程序,留下一个脚印吧。...只是顶一个简单的按钮的圆角和间距,颜色这个我还是用primary这个小绿色。 下面是index.wxml文件 //index.wxml <button class="butt
加枫简易绘图器可以绘制直线,圆,长方形,圆角矩形,可以选择绘图颜色.作者信息:顾加平(浙江平湖师范) 关键字:CreatePen,Rectangle,MoveToEx,RoundRect,Ellipse,SetCapture,sdk,简易绘图器
易语言窗口换肤模块源码,窗口换肤模块,JSkin_加载,调整按钮位置,更改窗体颜色,更改窗体背景图片,添加标签,载入按钮图像,WndProc,初始化按钮图片,调整控制按钮坐标,取窗口大小,置窗口圆角,添加按钮,画窗体背景,画普通...
快速批量去水印、批量切图、制作图片圆角、图片压缩、图片加边框、简易图片格式破零处理、尺寸修改、网址、批量改名、内涵使用说明。
很多C#代码的应用,实现了QQ截图,换肤 ,绘图画, 生成图形随机验证码,异形控件,圆角代码,C#绘制坐标简易曲线控件等好多功能
Easy GIF Animator 6是一款功能强大且使用简单的GIF动画制作软件,内置简易操作向导,可以让你快速创建新的动画,创建动画横幅或者动画按钮,支持从视频创建动画。帧图像:选择你想在你的动画、包括图像。他们每个...
修复模块某些问题,增加自绘相关功能 增加:bass频谱,纯色按钮,图标按钮,圆角进度条 等控件
jquery制作精美的评分插件是一款简易却又不失气派的jquery评分插件,它主要使用css3特性里面的圆角还有jQuery去控制里面的事件。并且此评分插件还运用了动画去使用户在使用的时候根据等级而显示不同的颜色。