1.Sketch设计立体质感的画画板IOS软件标
2.paintcode怎么使用?paintcode使用教程
Sketch设计立体质感的IOS软件标
我使用Sketch将近一个月多点,现在我又足够的板源信心用教程的方式来分享我工作的一部分,我将描述我如何使用它的软件许多有趣的功能来创建一个彩色的图标。
我想使用一种简单而深入的画画板教程方式。本教程是板源为Sketch初学者设计的,我将会花时间来描述你可能已经知道的软件找茬 h5 源码知识点。如下图是画画板将要达到的效果。
如果你有一些步骤不清楚可以下载源文件参考。板源
好了,软件来吧!
1 打开界面
首先你需要拥有一款Sketch,画画板你可以从商店购买,板源如果你手头有点紧的软件话可以先使用试用版。
打开界面,画画板此刻你不需要任何模板,板源直接新建界面即可。软件渔乐吧巅峰源码
2 创建画板
正式开始工作之前,我们需要创建一个画板,这与AI一样。
创建画板的方式:一我们可以通过插入的方式进行绘制,默认工具栏的最左边的小加号点开即可看见,选中“Artboard”或者你直接按快捷键A在工作区绘制也一样。最后我们会在界面最左边的检查器中找到画板的属性值,设置“ x ”px即可。
3 填充一个彩色背景
现在我们已经准备好了一个画板,给它一个背景基调,你可以在制作完图标以后再添加,但是背景的产生的环境色会决定你图标的色彩。
为了这个教程我来回做了很多次,现在我们切入正题。私有短网址源码
快捷键R当然也可以选择(插入>形状>矩形,如图4),让绘制的矩形充满画板,此时你需要注意到它的属性值会出现在右侧的检查器中(Fill是填充颜色,Color是边框颜色)如图6。
取消边框颜色,设置填充颜色为十六进制值类型#AFF(图7),现在点击颜色面板右上角的“+”你会看到他会新增一个颜色填充面板,选中选择线性渐变,渐变梯度为从左上到右下(如图8)。
接着是设置渐变填充的属性值,确保你的形状的左上的颜色是# FFFFFF(白色)和右下方的颜色是# (黑色)。点击渐变颜色选择器或者直接点击图形右下角的小圆点设置色彩为#(黑色)透明度0,具体透明度设置详见图9颜色面板下红色方框内。资产管理 页面 源码选择左上角白色设置不透明度。
再次点击“+”创建一个新的颜色填充,这一次是一个径向渐变填充。
确保左上方和右下方的颜色是白色和黑色。设置它们的透明度都为。最终得到一个超级闪亮的霓虹灯效果即从亮到暗紫色的梯度,如图。
最终背景效果完成,全选你的背景图层(Cmd+G)打包成组,双击左侧图层列表的组(或者是Cmd+R)将打包的组命名为Background。
4 使用内置IOS模板
现在让我们开始创建我们自己的图标。
这里我们可以使用内置的ios图标模板,而不必重新创建那个相当复杂的圆角矩形。
单击(File>New from Template>iOS App icon),网站源码拼多多会创建一个新的文件,里面向你展示了iOS的整套图标模板。
在图层列表中找到iOS-@2X画板,解锁(shift+Cmd+L)选中iOS-@2X图层,复制(Cmd+C)它并把它粘贴(Cmd+V)到你的原始文件中,现在你可以关闭你的模板文件了。
paintcode怎么使用?paintcode使用教程
paintcode使用教程:
paintcode是一款十分基于ios开发的矢量神器,在paintcode使用教程中用户可以将矢量转成代码形式放在ios代码中,大大的简约了ios开发体积,从而可以更好的设计开发ios软件。
打开我们的PaintCode(最好是正式版而不是试用版),新建一个Document。
现在界面是这样的。
paintcode默认帮我们生成了一个canvas,就类似于画图软件里面的画布,然后查看我们的右侧,有一个面板。
这就是属性面板,看起来有点像我们XIB里面的属性面板,包括size什么的。
ok,在属性面板里给我们的canvas起个名字,就叫“Stopwatch”好了。
然后在我们的Code Export下拉框里,选择StyleKit Drawing Image Method这个选项。
这个选项的意思就是说,等一会我们生成的代码里,既包含绘画的路径代码(一堆贝塞尔曲线什么的),还会有一个方法是返回一个UIImage类,让你可以直接放在UIImageView里。还是很贴心的。
跟我们的Xcode一样,paintcode里的canvas也是以左上角作为原点的。所以熟练使用Xib的iOS开发应该也能用的很顺手。
创造我们的Stopwatch
下一步,看我们paintcode左上角有一排图标.
选中圆形的那个图标,看图识字应该知道,这个图标就是用来画圆形的。
ok,选中之后,在我们的画布上拖一个圆出来,这时候要按住shift键不放来拖,因为这样可以保证圆形是个正圆,而不是个椭圆。
不用太在意圆形的大小,拖完之后我们可以直接在属性面板里更改。很简单。
ok,现在我们的画布上有一个圆了。然后把它的坐标改为(,),长宽都改为.像这样图一样。
然后,点击Fill(就是圆的填充色),在下拉窗口中选择'Add New Color',创建一个我们自己的颜色。
然后在弹出的窗口里输入颜色的HEX值#DDA.如图所示
点击弹出窗口的外面,让窗口消失,ok我们有了自己的颜色。以后要使用这个色值的时候软件会直接显示这个颜色。
刚才我们选了画圆的按钮,这时候我们选择画方块的按钮,因为我们现在要画一个方块。
随便在画板上拖一个方块,并且把Rect改为下面的值。
X:
Y:2
W:
H:
改完之后你的画板应该是现在这个样子。
然后我们这时候还需要拖一个方块,随便放在画板的一个角落,然后把大小改为宽,高.如图。
然后,我们再拖一个方块,这时候按住shift键不放,这样可以保证方块的长宽比一致(也就是正方形),也是随便放个位置就行了。如图。
可能有人要问了,我们拖的这两个小方块是干嘛的。别着急,继续往下看。
我们选中稍大的那个方块,到右边的属性窗口点开Transforms,然后把Rotation改为-°。
现在应该是这样的。