zoukankan      html  css  js  c++  java
  • 制作logo

    将平时在UI界面设计上的点滴经验记录下来,记性好不如多写技术文档。

    ----------------------------------------------------------------------------------------------------

    目的:制作logo

    软件:AI(制作矢量图形,自身格式是.ai,但也可以导出图像格式.png/.jpg/.tif等,也可以另存为PS格式.PSD)

       PS(将AI制作的logo进行图像后处理,自身格式.PSD,可以输出图像格式.png/.jpg/.tif等)

    成果图:

    步骤:

    1、设置文档大小

    “文件”-------->“新建”------>弹出新建文档对话框

     可以在“配置文件”选定文件类型,在此处选择“基本RGB”,还可以通过宽度高度设置文档大小,单位中进行不同度量单位(毫米、像素、pt等)切换。

    例如:单位:像素   宽度:65px  高度:65px

    2、在新建的布局框中画圆

    选中椭圆工具,按住shift键画圆,画完圆后设置填充色描边色。还可以通过shift+F8快捷键调出“对齐”面板,使得圆在文档视图居中显示。

    选中圆,然后按Ctrl+2锁定圆,这样不会导致其位置发生移动。

    3、沿着对象的路径添加文字效果

    a、画一个圆之后,选择“路径文字工具”,在路径上点击,然后输入相关文字;此外,可以根据需求设置文字大小、字体类型、字体颜色等;

    如果需要调整文字在路径上分布位置,可以使用选择工具选中路径,然后当出现此标记,就可以调整文字位置;

     b、在下半圆输入对应的英文,同时翻转文字。

          画圆,路径文字输入对应的英文,此时英文字母是顺时针分布的。如果要逆时针分布,则需要选中英文文字,然后菜单栏“文字”---“路径文字”----“路径文字选项”---勾选“翻转”,即可实现逆时针分布的效果。截图如下:

    4、绘制麦穗

    思路:麦穗是由若干个平行四边形组成的,然后弯曲这一组平行四边形成弧状;再“扩展外观”以及重新用alt键复制图形,保证有两个图形;对称翻转其中的一个图形,这样即可实现两边对称的效果。

    具体实现:首先绘制矩形----平行四边形---选中平行四边形,右键它---对象---变换---对称,然后45度,复制,如下图:

    批量复制----选中对象,合并多个图形(选中要合并的图形,右键---“编组“即可实现合并多图形效果)

    将合并的图形弯曲成弧形(选中图形,菜单栏“效果”---“变形”---“弧形”,在弹出的窗口进行设置,如下图:)

    菜单栏“对象”---扩展外观这是为了去除弧形的本来图形(垂直的部分);然后复制图形对象,使得有两个图形,这样保证对称后一左一右都有;接着单击图形,右键“变换”----“对称”,垂直对称,即可实现以下效果。

    5、添加文字(数字和中文)

    6、添加图片

    置入图片,并将其黑白化。

    具体实现:文件”------“置入图片”-------置入图片后调整图片大小,然后修改图片预设模式,将其改成“剪影”效果,如下图:

    7、导出图片,导出格式

    --------------------------------------------------------------------------------------------------------

    PS端后处理

    基于Ai导出后的psd格式的文件进行图像在PS端的后处理。

    根据需求进行相关处理,比如修改图片大小:

    图像----->图像大小,在弹出的图像大小对话框中设置相关参数,如下图:

    最后将图片“存储为”------“PNG”格式,因为png透明效果。如下:

    =================================================================================

    操作技能整理:

    1、复制图形

    选中图形,按住alt键不放,即可复制图形,然后在需要放置的区域松开鼠标左键即完成创建;

    批量复制图形:复制完后,使用Ctrl+D就可以进行批量复制图形。

    2、shift键

    按住shift键不放,可以同时选中多个图形

    3、缩放、平移、复原操作

    :放大按钮,但是点击放大按钮后再按住alt不放就是缩小效果。

    平移:任何工具状态下,按住空格键都可以进行平移操作。

    复原:Ctrl+0或者双击平移工具,都可以在任意比例尺下图层整屏显示。

    4、图层大小修改

    图层创建之后再次修改图层大小,“文件”----“文档设置”----“编辑画板”----“点击画板选项”

    5、打开/关闭标尺

    打开ctr+R;再次按Ctrl+R则是关闭标尺

    6、调整图形大小

    选中图形,按住shift键不放可以等比例缩放操作;此外,同时按住shift+alt键,图形可以向内部缩小

    7、对齐、变换、路径查找器面板

    shift+F8调出对齐、变换、路径查找器面板

    "对齐”:其中对齐要注意对齐方式的选择,主要使用“对齐面板”和“对齐所选对象”两种:

        对齐面板:选中图形后,单击要对齐的方式基于文档面板进行对齐,比如:水平居中、垂直居中、左对齐等方式

        对齐所选对象:需要选择需要进行对齐操作的所有图形对象进行对齐。

    8、画正圆

    选择椭圆工具,填充与描边都设置好后,按住shift键不放,鼠标点击拖动可以画出一个正圆,如下图所示。

    9、锁定对象

    CTRL+2 锁定对象
    CTRL+ALT+2 取消全部锁定对象

    CTRL+3 隐藏对象
    CTRL+ALT+3 取消全部隐藏对象

    10、合并多个图形

    按住shift不放,去选中需要合并的图形,选完后松开shift键,然后按Ctrl+J键可以把它们进行合并,形成整体。

    11、对图片矢量化(采用钢笔工具)

    a、置入图片(文件--->置入图片)

    b、置入后,“对象”--->“锁定所选对象”或者Ctrl+2

    c、使用钢笔工具,左键点选所要矢量化区域;如果需要修改局部区域,白箭头选中,再按alt键修复。

    12、图形输出

    文件--->存储为--->矢量.ai格式等

    文件--->导出--->位图JPG、png格式等

    13、不规则图形绘制

    a、贝兹曲线理论知识

     b、绘制不规则图形 

    •第三个点,点击了点,按住鼠标左键不妨。进行移动,形成曲线。画完,按住ctrl键,点击。


    •第二点,点击以后,按住鼠标左键不放,进行移动,形成曲线,再点击第三点。


    •第二点后,按住鼠标左键不放,向下45度角拖动,形成第一个半圆圈,然后点击第三点,形成最终的图形。


    •方法一:第二点点击后,拖动形成半圆弧,再在第二点上点击,使得右边的辅助线消失,再点击第三点,按住拖动,形成最终飞鸟图形。
    方法二:第二点点击后形成半圆弧后,在第二点下面,按住alt键,拖动到与半圆弧顶点,对称的位置,再点击第三点,即可形成图形。


    •第二点后,形成圆弧,再在第二点上点击,再点击第三点,按住鼠标左键不放,进行拖动,形成最终的图形

     

     

    •叶子形状,在某个拐点单击按住拖动,即可最终形成叶子图形。

     

    •第三个点弄完后,再在点上单击一下,再点击第四个个点,鼠标左键按住不放拖动,然后再在第四个点上单击一下,再点击最后一个点,点击后按住鼠标左键不放进行拖动,最终形成图形。

     

     

    -------------------------------------------------------------------------------------------------------------------------------

    参考资料

    http://www.kokojia.com/article/11234.html        //如何沿着对象的路径输入文字?

    http://jingyan.baidu.com/article/358570f66360a4ce4724fc9d.html       //调整文字的位置

    http://jingyan.baidu.com/article/f25ef25446a69c482c1b82af.html    //合并两个图形

    http://jingyan.baidu.com/article/49711c6155eb69fa441b7c3b.html    //图形变形

  • 相关阅读:
    ThinkJS框架入门详细教程(一)开发环境
    为什么要使用云盘?
    博客使用BOS上传图片
    网站第三方评论对比
    Angular定义服务-Learn By Doing
    原生Ajax总结
    JavaScript事件概览
    Angular学习-指令入门
    Angular中ngCookies模块介绍
    Angular Service入门
  • 原文地址:https://www.cnblogs.com/gis-laozhang/p/6657060.html
Copyright © 2011-2022 走看看