« 上一篇下一篇 »

圆角图片在线做

今天在网上看到了一些关于web2.0的应用在线生成站点,随手找了一个制作圆角图片的站点,试了一下,感觉还不错。没有设计基础的朋友这下省去了很多制作的麻烦。我把该图片的制作过程与大家交流一下,下面这张图片就是我在线生成的,怎么样,漂亮吗?注:外面的长方形边线是我的网站程序自动生成的,制作时是没有的。

round_angle_image

Roundedcornr

Roundedcornr 是一个在线生成圆角图片的网站,同时提供了在线生成css 圆角表格和css圆角边框代码。使用起来的比较简单,输入几个参数,点生成就可以输出相关代码,你拷贝下来改一改就可以了。我主要介绍在线生成圆角图片的步骤,对了,把网页颜色选择调试器打开,用它来查找颜色的代码值,在制作时会用到。

打开该网站拉滑块你会看到“Single RoundedCornr Image”一栏,就在这里了,你会看到一些需要你输入的参数数值。

Height 和Width 是让你设定你要生成的图标尺寸,我上面的是470*80的,单位为象素。

Corner background 是你生成的图象放在什么背景上,如果你选透明(Transparent),它会自动将你的图片背景设成你的图片主色,你可以选择Solid,颜色代码为:#FFFFFF。这种设置的意思是让图片放在白色的画布上。

通过“Top Left Corner”等后面圆角和方形的参数可以将图片四角设置成你需要的形状,你还可以设置圆角的半径(Corner radius),参数直接填数字就可以。

下面是图片的处理,你可以把图片的背景色设为一种颜色(solid),也可以设成渐变色(Gradient),这里要提一下的是“Gradient height”,设置不同的数值会有不同的渐变效果,当然你的数值应该小于你图片的高度(因为只有上下渐变,没有左右渐变),例如:我上面的图片尺寸就不能超过80。

图片设置好后你需要为你的图片加个边线(Border),这里你可以将它设置成无或者有,如果你需要线框它还给你提供了线框的厚度(Thickness)和颜色供你选择。如果想要美观一些,可以把厚度为1或更小,让边线很细。

图片做好了,在上面写些文字吧,你可以设置文字的颜色和大小,不过遗憾的是不支持中文,但我觉得用英文做图象艺术感很强哦,你觉得呢?