纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页photoshop教程图片处理

学习制作简洁风格乒乓球主题页面 Illustrator设计教程

如如酱w   2021-11-22 我要评论
Illustrator设计教程:学习制作简洁风格乒乓球主题页面。今天我们将分为8步来制作这么一个网页效果图:1.新建文档、2.创建背景、3.创建参考线、4.利用参考线来制作乓乓球桌面、5.制作球拍、6.制作乓乓球、7.文字排版、8.文件的导出!所以话不多说让我们直接进入正题:

教程效果图

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

教程步骤

步骤1:新建文档

打开Adobe Illustrator(简称AI)点击新建(快捷键:Ctrl+N)来创建一个文件

文件配置如下:

名称:自定

画板:因为我们整个制作过程都在一个画板上制作的并不需要多余的画板所以这里画板数量为“1”

尺寸(宽度、高度):因为我们做的是网页效果图所以当然要按照网页尺寸来啦!宽=1920、高=1080

单位:像素

颜色模式:因为我们是在电脑端显示所以颜色模式选择“RGB”

分辨率(栅格效果):72ppi

图片教程在下方

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

步骤2:建立背景

2.1文件建立好后接着我们就来建立背景啦!不过在建立背景之前我们要先打开智能参考线、关闭对齐网格、对齐像素和对齐点!然后我们将图层名称从图层1改为“背景”

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

2.2 接着我们在背景图层用矩形形状工具沿着画布大小拉一个矩形出来然后改变填充颜色:#83b0ff就会出现这种效果!

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

接着我们把背景图层锁上锁上的目的呢是为了防止误操作因此我们可以为图层进行上锁减少误操作的出现!可以选中图层之后再小眼睛旁边哪里点一下也可以选中图层之后按Ctrl+2锁定!

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

这样我们的背景图层就做好啦!

步骤3:建立参考线

3.1 接着嘞我们新建一个图层并改名为“参考线”然后放到背景图层上方!然后我们就开始做参考线啦!

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

3.2 接着我们选中参考线图层然后用钢笔沿着画板的左侧的边做一条线出来:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

(如果用钢笔链接出来一条线之后还继续提示链接的话按一下Esc键就行)

(在画参考线的时候首先注意一下图层是否选择正确在做当前图层内容的时候一定要把其他图层锁定(防止误操作)!不然会出现和其他图层内容混在一起的情况增加工作量造成不必要的麻烦。就像这样!)

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

3.3 接着我们用选择工具(小黑箭头)选中我们刚刚创建好的路径然后调节描边大小颜色随意你看的清就行!

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

3.4 接着呢我们在“效果>扭曲和变换”找到变换效果:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

然后我们在变换效果界面设置一些参数设置完成点击确定。参数如下:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

注意副本必须是偶数不能是基数(至于为啥自己试一下就晓得了)

3.5 接着我们选中线条点击对象>扩展外观

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

扩展外观之后我们就用对齐工具来让参考线水平居中对齐:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

接着我们选择工具(小黑箭头)选中对齐好的参考线把它的高度调整一下按住ALT+拖动可以等比调节效果如下:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

3.6 接着我们选中参考线点击右键 >变换>旋转对参考线旋转60°并复制:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

然后按Ctrl+D(重复上一步操作)在复制一次得到效果如下:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

3.7 接着利用选择工具(小黑箭头)选中这3组参考线点击“视图>参考线>建立参考线”效果如下:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

这样我们的参考线就做完了做参考线呢是为了后面做球桌用的最后不要忘了锁定图层哦!

步骤4:制作乒乓球桌面

现在我们开始做球桌在做之前呢我们还是先来分析一下构成:那么可以看到球桌分为3个面上面、左侧和右侧!如下图所示:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

接着我们来开始绘制上面的形状!

4.1 首先我们新建一个名字叫球桌的图层然后放在背景和参考线图层之间:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

接着我们把参考线显示出来然后选中我们刚刚建立好的球桌图层并利用钢笔工具绘制出形状在绘制的时候利用参考线的交叉点来绘制可以绘制出这么一个形状:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

接着我们用选择工具(小黑箭头)选中这个形状把它的填充改一下:填充颜色改为:#405cff那么我们的上面这一部分就做好啦:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

4.2 接着我们绘制左侧的形状也是一样还是利用参考线的交叉点来进行绘制然后还是一样我们利用选择工具(小黑箭头)选中这个形状把它的填充改一下填充颜色改为:#5387f9得到如下效果:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

怎么样是不是很简单?以此类推我们可以把剩下的形状都做出来:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

这样我们的球桌部分就做完了!

步骤5:制作球拍

5.1 还是一样建立一个图层名字取名为球拍接着我们画一个大小为:495*520、的椭圆然后改变它的填充颜色为:#ff3939

我们得到如下效果:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

5.2 接着呢我们画一个三角形(多边形工具)放在椭圆上方并且居中对齐一下改变填充填充颜色是:#e5ad5然后做适当的调整做出如下效果:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

5.3 接着我们选中这两个形状然后用形状生成器来裁剪多余的部分然后再做部分的调整。得到如下效果:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

5.4 接着我们来制作握把我们画一个大小为77*275的圆角矩形并改变它的填充颜色:#e5ae73然后对矩形的圆角加以调整得到以下效果:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

5.5 接着我们用选择工具(小黑箭头)选中这个形状然后用自由变换工具里面的透视变换来调整得到如下效果:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

5.6 接着再握把上画一个三角形来做一个斜坡面并适当调整弧度然后改变填充颜色:#efc69a后再适当调整一下球拍形状大小, 然后选中所有形状按Ctrl+G编组得到效果图如下:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

5.7 然后我们再做一些修饰我们在握把上做一个纯白色底(颜色:#ffffff)的圆角矩形然后打些字上去字体用优设标题黑

颜色改为:#405cff配置如下:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

5.8 接着我们用选择工具(小黑箭头)选中所有形状后按住alt+鼠标拖动复制一个出来然后我们把复制出来的球拍改一个颜色效果图如下;

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

记得要把两个球拍单独编组然后放到不同的图层哦:)

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

5.9 接着我们来做球拍的3d效果首先我们来制作黑色球拍3d效果我们先选中黑色球拍然后在“效果>3D>突出和斜角”调出3D面板(注意在做之前一定要编组哦)!参数设置如下:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

那么我们就得到了一个3d效果的球拍了接着我们再“对象>扩展外观”给它扩展一下方便我们调整!

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

5.10 接着我们对这个球拍取消编组然后对它做一些光影效果(其实就是改填充啦~)配置效果如下:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

这样我们第一个球拍的3D效果就做好了以此类推我们可以做第二个球拍的效果参数设置如下:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

最后的效果是这样!

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

5.11 接下来我们做球拍的阴影部分首先我们用选择工具(小黑箭头)选中这两个球拍按Ctrl+c先复制出来然后新建图层取名为“球拍阴影”

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

然后把复制出来的球拍粘贴到阴影图层里面然后我们先做黑色球拍的阴影(把红色球拍和红色球拍阴影先隐藏)选中阴影图层里的黑色球拍后使用路径查找器的“联集 ”把黑色球拍变成一个面接着把填充改一下填充颜色:#1021ff然后我们就得到了这样的一个效果:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

然后我们去调整一下调到你觉得合适为止这里没有固定要求!调整好的效果是这样:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

以此类推我们可以把另外一个阴影做出来!效果如下:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

这样我们的球拍就制作完成啦!

步骤6:制作乒乓球

6.1 还是老样子先新建一个图层取名叫“乒乓球”

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

接着我们画一个正圆放在合适的位置可随意发挥!

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

当然啦就这么直接放在这里肯定是不行滴~所以我们要对球加一点光影效果首先我们按Ctrl+c复制这个圆然后按Ctrl+f(粘贴到最上层)接着我们再画一个椭圆就像这样子:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

接着我们选中这两个圆用形状生成器减去上面这个圆当然啦用减去顶层也可以看你自己怎么随手怎么来!然后我们对减去的圆修改一个填充颜色:#f1eeff之后我们就得到了这么一个效果:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

6.2 我们接着来对这个球做一个投影我们复制一个圆按Ctrl+D(粘贴到最底层)然后通过选择工具调整一下并且修改填充颜色:#1021ff我们就得到了这么一个效果:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

到这里我们就做完了乒乓球啦!

步骤7:排版

7.1 还是老样子“上图层”取名为排版接着我们用画笔工具勾勒出一条线出来(随意发挥没有固定要求)然后再利用钢笔工具把锚点链接起来让它成为一个形状像这样:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

7.2 接着我们来做一下文字部分。我们先从标题开始我们打一段文字(建议英文)参数配置如下:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

我们得到了这么一个效果:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

接着我们选中这些文字然后“对象>扩展”把文字转换为形状方便后续的调整!接着根据自己环境主题的色调来改变填充颜色得到效果如下:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

接着我们打一段文字放在标题下面颜色还是根据环境来吸取得到如下效果:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

7.3 接着我们来做网页按钮我们先画一个257*72的椭圆然后修改填充颜色:#ff3939,得到这么一个椭圆:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

接着我们再这个椭圆上加上文字得到以下效果:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

以此类推我们再旁边也加一个按钮效果如下:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

7.4 接着我们画一个50*15大小的圆角矩形用来做轮播导航然后修改填充颜色:#405cff我们得到这个效果:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

同理我们再做几个15*15大小的正圆摆放在右边修改填充颜色:#83b0ff我们得到了这么一个效果:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

7.5 接着我们做剩余的排版就很简单啦!打一些文字然后对齐再调整一下就行啦!得到以下效果:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

然后我们可以去找一些素材或者自己做一些图标放在里面得到以下效果:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

步骤8:导出

方式1:用“文件>导出>导出为”

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

然后会调出对话框:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

点击确定即可!

方式2:用“文件>导出>储存为web所用格式(旧版)”:

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。

点击储存即可导出!

最终效果图

Illustrator设计教程:学习制作简洁风格乒乓球主题页面。


相关文章

猜您喜欢

  • PS CS6打造奶白色皮肤效果的美女人像照片教程实例

    今天我们一起来学习一篇PS美女图片皮肤美白教程PS CS6打造奶白色皮肤效果的美女人像照片教程实例 本教程为设计前沿网wzsky.net网友翻译转载必须注明作者和出处。转载请不要打上贵站水..
  • Photoshop给美女数码婚纱照制作成胶片效果

    Photoshop给美女数码婚纱照制作成胶片效果。实例主要用到camera rawps调色。整个教程高光以暖黄暗部以冷色为主。效果图: 原图: 操作步骤: 原片偏蓝和洋红头纱太亮我们要以暖黄为主所以要加色温减色调减高光保留头纱的细节如图: 口红、肤色加色相偏黄..

网友评论

Copyright 2020 www.tdogsoftware.com 【零度软件园】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式