|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/complete-svg-course-create-vector-graphics-with-html-svg/
课程评论:没有评论
课程名称:SVG 与 HTML 矢量图形设计 - 完整课程与项目 课程概述:这门课程专为程序员设计,尤其适合那些讨厌平面设计但仍希望为网页项目创造出色的2D矢量图形的人。使用SVG(可缩放矢量图形),你无需掌握复杂的图形设计软件,只需通过简单的代码创建各种矢量图形。无须任何设计技能!你可以轻松编辑这些SVG代码,并将其嵌入到网页中。如果你了解HTML和CSS的基础知识,就可以开始学习。几个小时后,你将掌握SVG语法,迅速创造出令人惊艳的图形和设计! 课程内容: 1. 学习如何使用SVG语法创建形状、线条、文本、多边形等。 2. 创建路径,设计复杂的结构、形状、角色和场景。 3. 专业地为每个创建的SVG元素进行样式调整。 4. 学习如何在SVG图像中嵌入定义、链接和图片等。 5. 使用SVG创建可缩放的矢量图标和徽标。 6. 设计用于网页动画和游戏的2D卡通角色。 7. 通过编辑SVG代码快速修改图形。 实际应用: 课程所学可用于设计: - 网站图形 - 2D动画和网页游戏角色与场景 - 演示用的2D图表和图示报告 - 条形图、饼图等 - 在网页和移动浏览器中展示的可缩放图标和徽标 - 流程图、建筑设计等 课程设计: 课程分为6个模块,每个模块深入讲解SVG中的某一概念,包含丰富的实例演示。 - 模块1:SVG基础,学习创建SVG文件及其在HTML网站中的嵌入方法。 - 模块2:创建各种形状,包括矩形、圆形、线条等。 - 模块3:SVG路径与组,学习如何将多个元素组合以便统一操作。 - 模块4:使用SVG绘制文本。 - 模块5:其他SVG元素,包括嵌入位图图片、创建链接等。 - 模块6:为SVG元素设计样式,探讨各种设计属性。 项目实例: - 邮箱图标项目 - 卡通动物脸项目 - 皇冠图标项目 选择我们课程的理由: 1. 教学内容全面,涵盖创建2D矢量图形的所有知识。 2. 通过实践学习,课程中的实例易于理解。 3. 随着示例的学习,你将自信地进入SVG和网页图形设计领域,能将这项技能添加到简历中。 4. 以有趣项目为导向,更好地理解概念并保持学习的趣味性。 那么,你还在等什么?立即注册,开始用SVG语法创造出色的2D矢量图形吧!
Are you a programmer who hates graphic design? But do you still want to create awesome 2D vector graphics for your web projects? SVG (Scalable Vector Graphics) is way to go!Forget mastering complicated graphic design software that have nothing to do with programming. You can now create every kind of vector graphics with just a few lines of code. No design skills needed, at all!What more? These SVG codes are perfectly editable and can be easily embedded in your websites. If you know the very basics of HTML and CSS, you're all set. Spend a few hours learning a bunch of SVG syntaxes, and you'll be creating awesome graphics and designs in no time at all!Every programmer can become a pro designer now!What will you learn in our course? 1. How to create shapes, lines, text, polylines and so much more with SVG syntaxes. 2. How to create paths that can be used to design complicated structures, shapes, characters and scenes. 3. How to style every single SVG element you create professionally. 4. How to embed definitions, links, images and so much more in your SVG images. 5. How to create scalable vector icons and logos with SVG. 6. How to create 2D cartoon characters that can be used in web animations and games. 7. How to edit your SVG graphics in seconds by editing your SVG codeand so much more!What are some real world applications of what you learn in this course? By applying the concepts you learn in this course, you can code and design:1. Graphics for your websites 2. 2D characters and scenes for web animations and web games 3. 2D graphs and pictorial reports that can be used in presentations 4. Bar charts, pie charts, etc. 5. Scalable vector icons and logos that can be displayed in websites, mobile browsers, ipads etc. 6. Flow charts, architectural designs etc. Sky is the limit! You can apply what you learn here anywhere in the web space, in any sphere. Your imagination is your only obstacle to how you apply what you learn here in your real world projects. How is this course designed? Our course has 6 modules, where each module will thoroughly explain the intricacies of one of the concepts in SVG with a wealth of over-the-shoulder examples. Here are the modules: Module 1 - SVG basics - This is the foundations module. You'll learn how to create SVG files, how to embed the codes/images in your HTML websites, how the SVG coordinate system works and every other thing you need to get started with creating SVG. Module 2 - Creating various shapes with SVG - You'll learn how to create rectangles, circles, ellipses, lines, polylines and polygons with a wealth of examples in every single lessons. You'll be coding the shapes along with me in every single module so you understand the concepts better. You'll also learn how to style the shapes in multiple ways to get the best possible result. Module 3 - SVG Paths and Groups - This module handles some very important concepts in SVG - Paths and Groups. You'll learn how to group multiple elements in SVG so they can be manipulated together. Also, you'll learn how to create very complicated graphics with the Path element. Module 4 - Creating text with SVG - In this module, you'll learn how to literally draw text on your SVG images, design them, manipulate them and so much more. Module 5 - Other SVG elements - SVG elements that don't really come under a particular category are included in this module. Some of the lessons include embedding bitmap images, creating links, definitions, symbols etc. Module 6 - Styling your SVG elements - This is a very important module when you take the design aspect of the course into account. In this module, we'll go over the various design attributes and properties offered by SVG. You'll use these properties to create multiple designs for your shapes and elements, designs that'll give your graphics the professional touch they need. We also cover a lot of examples and projects, like: 1. Mail Box icon project - We'll be creating this project in the 3rd module, after you learn how to create lines in paths. 2. Cartoon animal face project - This project comes in the 3rd module as well. You'll be using circles, ellipses, paths, arcs etc to create a cute 2D animal face. 3. Crown icon project - We'll be creating this icon in the 6th module. We'll be clipping the crown icon from a black rectangle. This is a fun project that'll help you learn the clipping concept covered in the 6th module. Why should you choose our course? 1. We like to be thorough in our teaching. You'll find everything you need to start creating awesome 2D vector graphics with SVG code/syntaxes in this course. You won't have to look anywhere else. 2. We strongly advocate learning by doing, rather than just listening or reading. Our lectures are filled with a wealth of examples that explain every concept clearly. 3. If you follow along with our examples in our over-the-shoulder training, and code the graphics along with us, you'll be confident in embarking into the world of SVG and web graphic design/development by the time you finish our course. You'll be able to confidently add this as a skill in your resume. 4. We prefer creating fun projects to explain the concepts and to keep things interesting as well. You'll learn how to apply the concepts you learn in the course in these multiple projects and examples.So, what are you waiting for? Enroll now and start creating awesome 2D vector graphics with SVG syntaxes in no time at all!