zoukankan      html  css  js  c++  java
  • 圆角图片在线做

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

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

    圆角图片在线做 - worm128 - Winlone技术博客 

    http://roundedcornr.com/

    打开该网站拉滑块你会看到“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或更小,让边线很细。

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

    神鸟技术
  • 相关阅读:
    P1030 求先序排列 P1305 新二叉树
    spfa
    Clairewd’s message ekmp
    Cyclic Nacklace hdu3746 kmp 最小循环节
    P1233 木棍加工 dp LIS
    P1052 过河 线性dp 路径压缩
    Best Reward 拓展kmp
    Period kmp
    Substrings kmp
    Count the string kmp
  • 原文地址:https://www.cnblogs.com/winlone/p/13670365.html
Copyright © 2011-2022 走看看