title
Design & Animate SVG Illustrations for Web Design

description
Today's Question: Do you charge hourly or per project? Let us know! https://designcourse.com - Learn UI/UX from Scratch with my new service (coming soon) -- Today, I'm going to show you how to design an isometric SVG illustration in Adobe Illustrator CC using 3D tools. Then, we're going to take the SVG code and animate it based on hover. Enjoy this channel? Leave a comment, subscribe and give a like! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'Design & Animate SVG Illustrations for Web Design', 'heatmap': [{'end': 1732.521, 'start': 1703.109, 'weight': 1}], 'summary': 'Tutorial covers creating isometric svg animation, 3d isometric illustrations, simplifying svg and photoshop layer management, optimizing and creating svgs, and adobe xd mock-up and svg animation, providing detailed techniques and processes for web design.', 'chapters': [{'end': 143.762, 'segs': [{'end': 143.762, 'src': 'embed', 'start': 25.822, 'weight': 0, 'content': [{'end': 31.67, 'text': "And by the way, it's isometric for for added bonus, this isometric illustration and illustrator.", 'start': 25.822, 'duration': 5.848}, {'end': 41.138, 'text': "And then we're going to export the SVG code paste it into an HTML document, and then use CSS to create this animation that's occurring right here.", 'start': 31.73, 'duration': 9.408}, {'end': 42.059, 'text': 'All right.', 'start': 41.158, 'duration': 0.901}, {'end': 44.821, 'text': "And it's based on user interaction, such as a hover.", 'start': 42.119, 'duration': 2.702}, {'end': 47.904, 'text': 'And also it looks really interesting.', 'start': 45.602, 'duration': 2.302}, {'end': 54.489, 'text': "It's a see-through and transparent in a sense, because we're adding a blend mode to it to make it look really cool.", 'start': 47.944, 'duration': 6.545}, {'end': 55.349, 'text': 'All right.', 'start': 55.069, 'duration': 0.28}, {'end': 57.831, 'text': "So there's a lot packed into this tutorial.", 'start': 55.549, 'duration': 2.282}, {'end': 59.032, 'text': 'Hopefully you enjoy it.', 'start': 58.051, 'duration': 0.981}, {'end': 71.402, 'text': "Today's question is how do you charge clients if you're working on a project per hour or per project and this is assuming, of course,", 'start': 59.573, 'duration': 11.829}, {'end': 73.684, 'text': "you're a freelancer of some sort?", 'start': 71.402, 'duration': 2.282}, {'end': 80.03, 'text': 'all right, so go ahead and state what you personally prefer to do in the comments, along with an explanation.', 'start': 73.684, 'duration': 6.346}, {'end': 82.852, 'text': 'all right, so before we begin, make sure you subscribe here.', 'start': 80.03, 'duration': 2.822}, {'end': 88.277, 'text': "the channel has been exploding lately, making me really happy, and i've increased my content production.", 'start': 82.852, 'duration': 5.425}, {'end': 91.26, 'text': "um so let's keep it up and let's get started.", 'start': 88.277, 'duration': 2.983}, {'end': 92.454, 'text': 'All right, guys.', 'start': 92.014, 'duration': 0.44}, {'end': 94.296, 'text': "so we're going to get started here in Adobe Illustrator.", 'start': 92.454, 'duration': 1.842}, {'end': 98.018, 'text': 'I would say that you can use any other vector application,', 'start': 94.896, 'duration': 3.122}, {'end': 108.165, 'text': "but we are going to be using a specific feature here in Illustrator that may not be available in other vector apps, and that's going to be 3D Extrude.", 'start': 98.018, 'duration': 10.147}, {'end': 110.167, 'text': 'So just keep that in mind.', 'start': 108.245, 'duration': 1.922}, {'end': 113.689, 'text': "So I'm just going to leave it at 1000 by 700.", 'start': 110.827, 'duration': 2.862}, {'end': 115.47, 'text': "We'll be changing this manually later.", 'start': 113.689, 'duration': 1.781}, {'end': 127.776, 'text': 'All right, so just to give a little bit of context here, again, this is for a fictional VPN service or virtual private network service.', 'start': 116.711, 'duration': 11.065}, {'end': 136.619, 'text': "And basically that's just, I did a real quick mock-up here of just kind of like a fictional landing page.", 'start': 128.076, 'duration': 8.543}, {'end': 142.481, 'text': 'And a VPN service is something to keep you anonymous online.', 'start': 138, 'duration': 4.481}, {'end': 143.762, 'text': "That's what I came up with.", 'start': 142.802, 'duration': 0.96}], 'summary': 'Tutorial on creating isometric illustration and animation using svg and css, with a brief discussion on client charging preferences.', 'duration': 117.94, 'max_score': 25.822, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM25822.jpg'}], 'start': 3.112, 'title': 'Creating isometric svg animation', 'summary': 'Discusses the process of creating an isometric svg animation in adobe illustrator, exporting the svg code to an html document, and using css to create a user interactive and transparent animation, while also addressing a question about client charging preferences.', 'chapters': [{'end': 143.762, 'start': 3.112, 'title': 'Creating isometric svg animation', 'summary': 'Discusses the process of creating an isometric svg animation in adobe illustrator, exporting the svg code to an html document, and using css to create a user interactive and transparent animation, while also addressing a question about client charging preferences.', 'duration': 140.65, 'highlights': ['The tutorial covers creating an isometric SVG animation in Adobe Illustrator, exporting the SVG code to an HTML document, and using CSS to create a user interactive and transparent animation. The tutorial covers creating an isometric SVG animation in Adobe Illustrator, exporting the SVG code to an HTML document, and using CSS to create a user interactive and transparent animation.', 'The tutorial focuses on creating a fictional VPN service landing page and explains the purpose of a VPN service in keeping users anonymous online. The tutorial focuses on creating a fictional VPN service landing page and explains the purpose of a VPN service in keeping users anonymous online.', 'Addressing a question about client charging preferences, the chapter encourages viewers to share their preferences and explanations in the comments section. Addressing a question about client charging preferences, the chapter encourages viewers to share their preferences and explanations in the comments section.', 'Encourages viewers to subscribe to the channel and announces an increase in content production due to recent channel growth. Encourages viewers to subscribe to the channel and announces an increase in content production due to recent channel growth.', 'Introducing the use of 3D Extrude feature in Adobe Illustrator for creating the isometric illustration. Introducing the use of 3D Extrude feature in Adobe Illustrator for creating the isometric illustration.']}], 'duration': 140.65, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM3112.jpg', 'highlights': ['The tutorial covers creating an isometric SVG animation in Adobe Illustrator, exporting the SVG code to an HTML document, and using CSS to create a user interactive and transparent animation.', 'The tutorial focuses on creating a fictional VPN service landing page and explains the purpose of a VPN service in keeping users anonymous online.', 'Addressing a question about client charging preferences, the chapter encourages viewers to share their preferences and explanations in the comments section.', 'Encourages viewers to subscribe to the channel and announces an increase in content production due to recent channel growth.', 'Introducing the use of 3D Extrude feature in Adobe Illustrator for creating the isometric illustration.']}, {'end': 863.003, 'segs': [{'end': 217.667, 'src': 'embed', 'start': 144.382, 'weight': 0, 'content': [{'end': 149.726, 'text': 'And so the idea is to have some type of illustration right here in this section.', 'start': 144.382, 'duration': 5.344}, {'end': 156.73, 'text': "So all I've done is just taken this background color and you'll see what that is momentarily.", 'start': 150.346, 'duration': 6.384}, {'end': 165.756, 'text': "I'm just going to put in a rectangle for the background and then We'll go ahead and change that fill here to.", 'start': 157.15, 'duration': 8.606}, {'end': 168.618, 'text': 'the color code is 282A2C.', 'start': 165.756, 'duration': 2.862}, {'end': 169.718, 'text': 'if you want to follow along.', 'start': 168.618, 'duration': 1.1}, {'end': 174.682, 'text': "We're actually not going to be using this or including it in SVG because we want it to be transparent,", 'start': 169.999, 'duration': 4.683}, {'end': 180.366, 'text': 'but still I want to see roughly what the background is going to be while we do this illustration.', 'start': 174.682, 'duration': 5.684}, {'end': 185.329, 'text': 'Okay, let me get rid of the stroke real quick here.', 'start': 181.586, 'duration': 3.743}, {'end': 189.275, 'text': 'All right, sweet.', 'start': 188.453, 'duration': 0.822}, {'end': 195.793, 'text': "And let's go ahead and we'll open up the layers and we'll make this path something we can't select.", 'start': 189.376, 'duration': 6.417}, {'end': 207.441, 'text': 'OK, so just a few days ago or last week, I did an isometric tutorial here using Adobe Illustrator, and this is going to be isometric.', 'start': 196.815, 'duration': 10.626}, {'end': 211.603, 'text': "However, we're not going to use that grid in that process of creating the grid to do it.", 'start': 207.481, 'duration': 4.122}, {'end': 215.425, 'text': "We're going to use the 3D tools here in Illustrator.", 'start': 211.623, 'duration': 3.802}, {'end': 217.667, 'text': "So you'll see how that works momentarily.", 'start': 215.546, 'duration': 2.121}], 'summary': 'Creating an isometric illustration using 3d tools in illustrator.', 'duration': 73.285, 'max_score': 144.382, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM144382.jpg'}, {'end': 284.774, 'src': 'embed', 'start': 256.803, 'weight': 2, 'content': [{'end': 262.532, 'text': "I you know, when it's hovered over I, the logo kind of fills a gap in the browser.", 'start': 256.803, 'duration': 5.729}, {'end': 264.495, 'text': "So it's kind of like a, I don't know.", 'start': 262.633, 'duration': 1.862}, {'end': 271.669, 'text': "It's, it's, it's, uh, Just an interesting play on the concept of what this service provides.", 'start': 264.696, 'duration': 6.973}, {'end': 279.191, 'text': "We're going to start off by doing, or creating rather, a rounded rectangle for a browser.", 'start': 271.689, 'duration': 7.502}, {'end': 284.774, 'text': "We'll choose the rounded rectangle tool here by left clicking and dragging out.", 'start': 280.492, 'duration': 4.282}], 'summary': 'Discussion about creating a rounded rectangle for a browser and its visual impact on the logo.', 'duration': 27.971, 'max_score': 256.803, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM256803.jpg'}, {'end': 697.998, 'src': 'embed', 'start': 666.465, 'weight': 3, 'content': [{'end': 671.849, 'text': "And there you go, it's in perfect isometric perspective based on these angles that have applied to it.", 'start': 666.465, 'duration': 5.384}, {'end': 675.412, 'text': "All right, so the extrude depth, it's quite thick.", 'start': 672.47, 'duration': 2.942}, {'end': 678.094, 'text': 'I actually want something around seven.', 'start': 676.032, 'duration': 2.062}, {'end': 682.838, 'text': 'Yeah, maybe nine.', 'start': 678.114, 'duration': 4.724}, {'end': 688.375, 'text': 'All right, that looks good to me.', 'start': 687.375, 'duration': 1}, {'end': 690.296, 'text': "Actually, no, it doesn't.", 'start': 689.576, 'duration': 0.72}, {'end': 692.416, 'text': '12 Okay, I like that.', 'start': 690.756, 'duration': 1.66}, {'end': 697.998, 'text': "And then if you want to adjust the color, it became quite dark, and that's because of the lighting.", 'start': 693.256, 'duration': 4.742}], 'summary': 'Adjusting extrude depth to 12; lighting affects color.', 'duration': 31.533, 'max_score': 666.465, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM666465.jpg'}], 'start': 144.382, 'title': 'Creating 3d isometric illustrations in illustrator', 'summary': 'Discusses creating isometric illustrations using 3d tools in illustrator, including the process, design steps, and optimization techniques. it covers using background color, 3d effects, and path simplification for optimization.', 'chapters': [{'end': 217.667, 'start': 144.382, 'title': 'Illustration with 3d tools in illustrator', 'summary': 'Discusses the process of creating an isometric illustration using 3d tools in illustrator, including the use of background color, rectangle for background, changing fill color, and the decision not to include it in svg for transparency.', 'duration': 73.285, 'highlights': ['The process involves using 3D tools in Illustrator to create an isometric illustration, as opposed to the traditional grid method, as explained in a recent tutorial.', 'The speaker demonstrates the use of background color and a rectangle for background, including the specific color code 282A2C, providing clear guidance for the audience to follow along.', 'The decision not to include the illustration in SVG is mentioned, with the reason being the desire for transparency, indicating a thoughtful consideration of design elements.', 'The speaker also mentions getting rid of the stroke and making a path unselectable, demonstrating attention to detail in the illustration process.']}, {'end': 863.003, 'start': 217.987, 'title': 'Creating 3d isometric perspective illustration', 'summary': 'Describes the process of creating a 3d isometric perspective illustration using adobe illustrator, including steps for designing a browser shape, adding a fictional logo, applying 3d extrude and bevel effects, and simplifying paths for optimization.', 'duration': 645.016, 'highlights': ['The process involves creating a rounded rectangle for a browser, setting up the color, adding buttons and a URL bar, and creating a fictional logo (Relevance: 5)', 'Applying 3D extrude and bevel effects to achieve isometric perspective, adjusting extrude depth and lighting, and expanding the appearance of objects (Relevance: 4)', 'Explaining the need for simplifying paths to reduce file size when using SVG format, ungrouping and uniting paths to simplify the design (Relevance: 3)']}], 'duration': 718.621, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM144382.jpg', 'highlights': ['The process involves using 3D tools in Illustrator to create an isometric illustration, as opposed to the traditional grid method, as explained in a recent tutorial.', 'The speaker demonstrates the use of background color and a rectangle for background, including the specific color code 282A2C, providing clear guidance for the audience to follow along.', 'The process involves creating a rounded rectangle for a browser, setting up the color, adding buttons and a URL bar, and creating a fictional logo (Relevance: 5)', 'Applying 3D extrude and bevel effects to achieve isometric perspective, adjusting extrude depth and lighting, and expanding the appearance of objects (Relevance: 4)', 'The decision not to include the illustration in SVG is mentioned, with the reason being the desire for transparency, indicating a thoughtful consideration of design elements.']}, {'end': 1111.986, 'segs': [{'end': 905.864, 'src': 'embed', 'start': 863.023, 'weight': 0, 'content': [{'end': 869.75, 'text': "And trust me, when I first did this for the preparation of this tutorial that I'm doing, I didn't do this process.", 'start': 863.023, 'duration': 6.727}, {'end': 871.152, 'text': 'I left all that stuff in there.', 'start': 869.791, 'duration': 1.361}, {'end': 875.517, 'text': 'And it was a massive amount of SVG code to put into index HTML.', 'start': 871.452, 'duration': 4.065}, {'end': 877.319, 'text': "So that's why I'm doing this.", 'start': 875.917, 'duration': 1.402}, {'end': 879.201, 'text': "It's going to simplify the code greatly.", 'start': 877.359, 'duration': 1.842}, {'end': 880.863, 'text': "It's going to be a lot less.", 'start': 879.221, 'duration': 1.642}, {'end': 882.032, 'text': 'All right.', 'start': 881.772, 'duration': 0.26}, {'end': 887.435, 'text': "So it still looks good, especially because we're going to be applying a mixed blend mode in CSS.", 'start': 882.072, 'duration': 5.363}, {'end': 893.558, 'text': "And so, yeah, let's go ahead and do the same process that we just did for the other stuff.", 'start': 887.975, 'duration': 5.583}, {'end': 899.761, 'text': "So one thing that's interesting is you can notice when I select this, it also extruded.", 'start': 893.598, 'duration': 6.163}, {'end': 905.864, 'text': 'you know each individual, these two toolbar things up here, which this is all code.', 'start': 899.761, 'duration': 6.103}], 'summary': 'Simplify svg code to greatly reduce amount in index html for improved efficiency and aesthetics.', 'duration': 42.841, 'max_score': 863.023, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM863023.jpg'}, {'end': 1048.995, 'src': 'embed', 'start': 1010.075, 'weight': 3, 'content': [{'end': 1013.798, 'text': "Where are you at? Of course, it can't be simple.", 'start': 1010.075, 'duration': 3.723}, {'end': 1015.179, 'text': 'All right, well.', 'start': 1014.538, 'duration': 0.641}, {'end': 1022.739, 'text': "What I can do is we'll find where these layers are at.", 'start': 1016.618, 'duration': 6.121}, {'end': 1029.521, 'text': "And I'm going to simply hide them just by selecting.", 'start': 1025.28, 'duration': 4.241}, {'end': 1032.241, 'text': "So for now, I'll just group them.", 'start': 1029.621, 'duration': 2.62}, {'end': 1036.962, 'text': 'What I need to do is create a selection out of just this stuff.', 'start': 1034.362, 'duration': 2.6}, {'end': 1045.664, 'text': "So that's why I'm kind of being concerned or not concerned, but we'll group that.", 'start': 1037.002, 'duration': 8.662}, {'end': 1048.995, 'text': "We're gonna group this.", 'start': 1048.114, 'duration': 0.881}], 'summary': 'Discussion on organizing and grouping layers for selection.', 'duration': 38.92, 'max_score': 1010.075, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM1010075.jpg'}], 'start': 863.023, 'title': 'Simplifying svg and photoshop layer management', 'summary': 'Discusses simplifying svg code by ungrouping unnecessary elements, reducing it greatly, and applying mixed blend mode in css. it also demonstrates photoshop layer management, including grouping, hiding, and deleting layers to efficiently organize the project.', 'chapters': [{'end': 1006.972, 'start': 863.023, 'title': 'Simplify svg code and apply mixed blend mode in css', 'summary': 'Discusses simplifying the svg code by ungrouping unnecessary elements, reducing it greatly, and applying a mixed blend mode in css, leading to a more efficient and visually appealing code.', 'duration': 143.949, 'highlights': ['The process of simplifying the SVG code greatly reduced the amount of code in the index HTML, making it a lot less.', 'Applying a mixed blend mode in CSS was mentioned, indicating a focus on improving the visual appearance and design of the code.', 'The technique of ungrouping unnecessary elements in the SVG file was emphasized to streamline the code and remove unnecessary components, such as toolbar things, resulting in a cleaner code structure.']}, {'end': 1111.986, 'start': 1010.075, 'title': 'Photoshop layer management', 'summary': 'Demonstrates the process of selecting and managing layers in photoshop, including grouping, hiding, and deleting layers to efficiently organize the project.', 'duration': 101.911, 'highlights': ['The process involves selecting layers and grouping them for easier management and organization.', 'The speaker demonstrates the tedious process of selecting and hiding specific elements within layers to refine the groupings.', 'The narrator efficiently manages layers by creating selections and grouping them, streamlining the organization of the project.']}], 'duration': 248.963, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM863023.jpg', 'highlights': ['The process of simplifying the SVG code greatly reduced the amount of code in the index HTML, making it a lot less.', 'Applying a mixed blend mode in CSS was mentioned, indicating a focus on improving the visual appearance and design of the code.', 'The technique of ungrouping unnecessary elements in the SVG file was emphasized to streamline the code and remove unnecessary components, such as toolbar things, resulting in a cleaner code structure.', 'The process involves selecting layers and grouping them for easier management and organization.', 'The speaker demonstrates the tedious process of selecting and hiding specific elements within layers to refine the groupings.', 'The narrator efficiently manages layers by creating selections and grouping them, streamlining the organization of the project.']}, {'end': 1572.686, 'segs': [{'end': 1143.142, 'src': 'embed', 'start': 1112.026, 'weight': 4, 'content': [{'end': 1115.748, 'text': 'So now the code is greatly reduced.', 'start': 1112.026, 'duration': 3.722}, {'end': 1123.391, 'text': "We could still do a little bit of setup that's gonna make our lives easier when it comes to the CSS process though.", 'start': 1116.608, 'duration': 6.783}, {'end': 1127.053, 'text': 'So we have all these paths right here.', 'start': 1123.952, 'duration': 3.101}, {'end': 1132.196, 'text': 'To make your life a little bit easier, you could rename each of these based on what is being selected.', 'start': 1127.073, 'duration': 5.123}, {'end': 1137.539, 'text': 'But really, we just want this one in its own group.', 'start': 1133.096, 'duration': 4.443}, {'end': 1143.142, 'text': "so select it all ctrl g and then we're going to rename this group to browser.", 'start': 1138.599, 'duration': 4.543}], 'summary': 'Code greatly reduced, paths renamed for easier css process.', 'duration': 31.116, 'max_score': 1112.026, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM1112026.jpg'}, {'end': 1196.112, 'src': 'embed', 'start': 1167.957, 'weight': 1, 'content': [{'end': 1170.018, 'text': 'One will be logo and the other one will be browser.', 'start': 1167.957, 'duration': 2.061}, {'end': 1175.162, 'text': "All right, so let's get this into place roughly in terms of where we actually want it to begin.", 'start': 1170.919, 'duration': 4.243}, {'end': 1180.525, 'text': "And we'll say, I guess we'll say like right around there will be pretty good.", 'start': 1175.182, 'duration': 5.343}, {'end': 1183.267, 'text': "Like that's where it will begin.", 'start': 1181.726, 'duration': 1.541}, {'end': 1196.112, 'text': "right, and then we'll um use the transition property with translate x and y to push this into place and as well as other things.", 'start': 1185.029, 'duration': 11.083}], 'summary': 'Planning to position two elements using transition property for smooth movement.', 'duration': 28.155, 'max_score': 1167.957, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM1167957.jpg'}, {'end': 1294.332, 'src': 'embed', 'start': 1265.663, 'weight': 0, 'content': [{'end': 1269.824, 'text': "Now what's gonna happen is we're not actually, I'm not actually saving this as an SVG file.", 'start': 1265.663, 'duration': 4.161}, {'end': 1270.725, 'text': 'You can if you wish.', 'start': 1269.864, 'duration': 0.861}, {'end': 1274.546, 'text': 'What I really am interested in is just the SVG code.', 'start': 1271.225, 'duration': 3.321}, {'end': 1278.867, 'text': 'All right, so this is the SVG code of the entire thing.', 'start': 1275.286, 'duration': 3.581}, {'end': 1283.148, 'text': 'A bunch of zeros and ones it looks like essentially.', 'start': 1280.087, 'duration': 3.061}, {'end': 1288.31, 'text': 'But you can see our group of ID browser right there.', 'start': 1283.929, 'duration': 4.381}, {'end': 1294.332, 'text': "And then if we search, Far enough, which I'm not sure if I can identify.", 'start': 1288.97, 'duration': 5.362}], 'summary': 'Transcript discusses extracting svg code, including id browser group.', 'duration': 28.669, 'max_score': 1265.663, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM1265663.jpg'}, {'end': 1359.262, 'src': 'embed', 'start': 1323.491, 'weight': 7, 'content': [{'end': 1324.771, 'text': "And then I'll just go..", 'start': 1323.491, 'duration': 1.28}, {'end': 1334.373, 'text': "We'll make a directory called vpnsvg and then cd into vpnsvg.", 'start': 1324.771, 'duration': 9.602}, {'end': 1338.554, 'text': 'Code period to launch Visual Studio Code, my code editor.', 'start': 1335.353, 'duration': 3.201}, {'end': 1341.974, 'text': "It's free and very popular from Microsoft.", 'start': 1338.634, 'duration': 3.34}, {'end': 1342.775, 'text': 'All right.', 'start': 1342.454, 'duration': 0.321}, {'end': 1344.435, 'text': "So let's go ahead..", 'start': 1343.035, 'duration': 1.4}, {'end': 1346.536, 'text': 'the usual stuff.', 'start': 1345.655, 'duration': 0.881}, {'end': 1350.498, 'text': "If you've been following me on index HTML, we'll do a main CSS.", 'start': 1346.576, 'duration': 3.922}, {'end': 1359.262, 'text': "We'll hit the exclamation point, hit enter, create some boilerplate type in link, hit enter and main dot CSS.", 'start': 1351.598, 'duration': 7.664}], 'summary': 'Creating a directory vpnsvg and launching visual studio code for coding.', 'duration': 35.771, 'max_score': 1323.491, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM1323491.jpg'}, {'end': 1410.401, 'src': 'embed', 'start': 1382.77, 'weight': 3, 'content': [{'end': 1385.491, 'text': "It's not too bad, but I don't want them in the HTML.", 'start': 1382.77, 'duration': 2.721}, {'end': 1388.653, 'text': "So I'm going to get rid of all that stuff.", 'start': 1385.551, 'duration': 3.102}, {'end': 1392.115, 'text': 'We can get rid of this XML stuff up there.', 'start': 1389.834, 'duration': 2.281}, {'end': 1398.853, 'text': 'And everything right now is wrapped in an SVG element within the body element.', 'start': 1394.329, 'duration': 4.524}, {'end': 1402.555, 'text': "So that's just something worth noting or remembering here.", 'start': 1399.113, 'duration': 3.442}, {'end': 1404.617, 'text': "So we'll save this.", 'start': 1403.816, 'duration': 0.801}, {'end': 1409.26, 'text': "We'll go to main and then just paste all that stuff in like that.", 'start': 1404.657, 'duration': 4.603}, {'end': 1410.401, 'text': 'All right.', 'start': 1410.121, 'duration': 0.28}], 'summary': 'Removing xml and html elements from svg within the body.', 'duration': 27.631, 'max_score': 1382.77, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM1382770.jpg'}, {'end': 1478.019, 'src': 'embed', 'start': 1443.403, 'weight': 5, 'content': [{'end': 1450.269, 'text': "And the reason we're doing height 100% is when we're going to create a CSS grid out of this.", 'start': 1443.403, 'duration': 6.866}, {'end': 1459.497, 'text': 'And if we want to center, I want to center at least the SVG graphic in the browser, we need to set the height to 100%.', 'start': 1450.989, 'duration': 8.508}, {'end': 1462.819, 'text': 'Margin zero and any padding zero.', 'start': 1459.497, 'duration': 3.322}, {'end': 1464.601, 'text': 'All right.', 'start': 1462.839, 'duration': 1.762}, {'end': 1466.863, 'text': "And then we're going to reference the body specifically.", 'start': 1464.661, 'duration': 2.202}, {'end': 1478.019, 'text': "All right, so we're gonna put in a background and I will do 282 A2C.", 'start': 1467.875, 'duration': 10.144}], 'summary': 'Setting height to 100% for css grid, with background color 282a2c.', 'duration': 34.616, 'max_score': 1443.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM1443403.jpg'}], 'start': 1112.026, 'title': 'Optimizing and creating svgs', 'summary': 'Covers optimizing the svg creation process by grouping elements, renaming paths, and exporting with specific ids, leading to reduced code and improved workflow. it also demonstrates creating an svg layout using css, focusing on aligning and justifying elements, and utilizing css grid for layout.', 'chapters': [{'end': 1288.31, 'start': 1112.026, 'title': 'Optimizing svg creation process', 'summary': 'Discusses optimizing the svg creation process by grouping elements, renaming paths for easier selection, and exporting the svg code with specific ids, ultimately reducing code and improving workflow.', 'duration': 176.284, 'highlights': ['The SVG creation process is optimized by grouping elements and renaming paths for easier selection. Grouping elements and renaming paths improves workflow and makes it easier to select specific elements, ultimately reducing code and improving the SVG creation process.', 'Exporting the SVG code with specific IDs simplifies the workflow and reduces code. Exporting the SVG code with specific IDs simplifies the workflow and reduces code, making it easier to identify and manipulate elements in the SVG file.', 'Using the transition property with translate x and y to position elements in the SVG file. Using the transition property with translate x and y allows for precise positioning of elements in the SVG file, improving the overall design and layout.', 'Scaling the SVG file and removing unnecessary elements before saving as an SVG file. Scaling the SVG file and removing unnecessary elements before saving as an SVG file ensures a clean and optimized SVG file, ready for use in web development.', 'Saving the SVG file with specific naming conventions and focusing on extracting the SVG code. Saving the SVG file with specific naming conventions and focusing on extracting the SVG code ensures a streamlined process for using the SVG file in web development.']}, {'end': 1572.686, 'start': 1288.97, 'title': 'Creating svg layout with css', 'summary': 'Demonstrates the process of creating an svg layout using css, including copying code, setting up html and css files, adjusting svg properties, and applying css grid for layout, with specific focus on aligning and justifying elements.', 'duration': 283.716, 'highlights': ["Applying CSS grid to create layout The speaker demonstrates the process of applying CSS grid to create a layout for the SVG, with specific focus on setting height to 100%, using 'margin' and 'padding' as zero, and setting up CSS grid properties.", "Adjusting SVG properties using CSS The speaker explains the process of adjusting SVG properties using CSS, such as setting a specific background color, width of 100%, and applying 'display: grid' for layout.", 'Copying and setting up HTML and CSS files The speaker explains the process of copying code, setting up HTML and CSS files, and using Visual Studio Code as the code editor, highlighting its free and popular nature.']}], 'duration': 460.66, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM1112026.jpg', 'highlights': ['Exporting the SVG code with specific IDs simplifies the workflow and reduces code.', 'Using the transition property with translate x and y allows for precise positioning of elements in the SVG file.', 'Saving the SVG file with specific naming conventions and focusing on extracting the SVG code ensures a streamlined process for using the SVG file in web development.', 'Scaling the SVG file and removing unnecessary elements before saving as an SVG file ensures a clean and optimized SVG file, ready for use in web development.', 'Grouping elements and renaming paths improves workflow and makes it easier to select specific elements, ultimately reducing code and improving the SVG creation process.', "Applying CSS grid to create layout with specific focus on setting height to 100%, using 'margin' and 'padding' as zero, and setting up CSS grid properties.", "Adjusting SVG properties using CSS, such as setting a specific background color, width of 100%, and applying 'display: grid' for layout.", 'Copying code, setting up HTML and CSS files, and using Visual Studio Code as the code editor, highlighting its free and popular nature.']}, {'end': 2078.391, 'segs': [{'end': 1632.752, 'src': 'embed', 'start': 1572.746, 'weight': 3, 'content': [{'end': 1587.575, 'text': 'So a real quick way of doing like a whole mock-up process is just to take everything in adobe xd, put it in a group and then export it as a svg file.', 'start': 1572.746, 'duration': 14.829}, {'end': 1595.678, 'text': 'all right, so svg, and then you want to put that wherever.', 'start': 1587.575, 'duration': 8.103}, {'end': 1598.079, 'text': "we'll call this bg2.", 'start': 1595.678, 'duration': 2.401}, {'end': 1600.66, 'text': 'wait, no, no, this okay.', 'start': 1598.079, 'duration': 2.581}, {'end': 1601.04, 'text': 'there we go.', 'start': 1600.66, 'duration': 0.38}, {'end': 1602.901, 'text': 'select folder export.', 'start': 1601.04, 'duration': 1.861}, {'end': 1605.976, 'text': 'Group three already exists.', 'start': 1604.534, 'duration': 1.442}, {'end': 1610.041, 'text': 'Maybe I will provide this file for you.', 'start': 1607.658, 'duration': 2.383}, {'end': 1611.804, 'text': "Although I don't understand why you would want it.", 'start': 1610.101, 'duration': 1.703}, {'end': 1615.188, 'text': "It's not really that pertinent to the tutorial and the topic of the tutorial.", 'start': 1611.864, 'duration': 3.324}, {'end': 1619.594, 'text': "Now I'm gonna open up my files here.", 'start': 1615.208, 'duration': 4.386}, {'end': 1625.762, 'text': "All right, I'm going to go back here, control B, and I'm just going to drag that SVG that was created.", 'start': 1620.575, 'duration': 5.187}, {'end': 1627.945, 'text': "It's called Group 3.", 'start': 1625.782, 'duration': 2.163}, {'end': 1628.626, 'text': "It's massive.", 'start': 1627.945, 'duration': 0.681}, {'end': 1632.752, 'text': 'This is just for the purpose of demonstrating this little technique, though.', 'start': 1629.267, 'duration': 3.485}], 'summary': 'Demonstrating a quick process of exporting adobe xd mock-up as svg file for tutorial.', 'duration': 60.006, 'max_score': 1572.746, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM1572746.jpg'}, {'end': 1732.521, 'src': 'heatmap', 'start': 1703.109, 'weight': 1, 'content': [{'end': 1710.06, 'text': "it'll be svg hover, so we'll reference our front.", 'start': 1703.109, 'duration': 6.951}, {'end': 1711.382, 'text': 'wait, is that what i called it?', 'start': 1710.06, 'duration': 1.322}, {'end': 1712.143, 'text': "no, i didn't.", 'start': 1711.382, 'duration': 0.761}, {'end': 1717.628, 'text': "it's actually logo, i believe Control F logo.", 'start': 1712.143, 'duration': 5.485}, {'end': 1719.109, 'text': 'yep, right here the logo.', 'start': 1717.628, 'duration': 1.481}, {'end': 1732.521, 'text': "And, by the way, if you ever forget what you named things or you're trying to find a name or a way to access something in the website,", 'start': 1720.05, 'duration': 12.471}], 'summary': 'Discussing naming conventions and accessing elements in the website.', 'duration': 29.412, 'max_score': 1703.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM1703109.jpg'}, {'end': 1799.781, 'src': 'embed', 'start': 1772.262, 'weight': 0, 'content': [{'end': 1775.843, 'text': "I'm going to show you a shorthand method of this.", 'start': 1772.262, 'duration': 3.581}, {'end': 1779.184, 'text': "And then all the first I'm going to show you each individual property.", 'start': 1775.903, 'duration': 3.281}, {'end': 1782.865, 'text': "So animation duration, we'll say 1.2 seconds.", 'start': 1779.464, 'duration': 3.401}, {'end': 1786.086, 'text': "We'll say animation name, got to give it a name.", 'start': 1783.425, 'duration': 2.661}, {'end': 1788.187, 'text': "So we'll just call it animate logo.", 'start': 1786.126, 'duration': 2.061}, {'end': 1795.157, 'text': "And then we'll say animation iteration count, and we'll say infinite.", 'start': 1789.673, 'duration': 5.484}, {'end': 1799.781, 'text': 'So we want this to loop forever for as long as the mouse is hovered over it.', 'start': 1795.698, 'duration': 4.083}], 'summary': "Demonstrating shorthand method for setting animation properties: duration 1.2s, name 'animate logo', iteration count infinite.", 'duration': 27.519, 'max_score': 1772.262, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM1772262.jpg'}, {'end': 1845.27, 'src': 'embed', 'start': 1817.837, 'weight': 1, 'content': [{'end': 1822.461, 'text': "So right now it won't animate because we haven't created, we haven't defined the key frames for animate logo.", 'start': 1817.837, 'duration': 4.624}, {'end': 1824.022, 'text': "So let's do that.", 'start': 1822.981, 'duration': 1.041}, {'end': 1828.306, 'text': "So at key frames, we'll say animate logo.", 'start': 1824.122, 'duration': 4.184}, {'end': 1836.454, 'text': 'And you can do multi-step animations with percentage based values, but I only want to go from and to.', 'start': 1829.968, 'duration': 6.486}, {'end': 1837.715, 'text': "So we'll just say from.", 'start': 1836.734, 'duration': 0.981}, {'end': 1845.27, 'text': 'transform translate X zero.', 'start': 1840.126, 'duration': 5.144}], 'summary': 'The logo animation lacks key frames for transformation.', 'duration': 27.433, 'max_score': 1817.837, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM1817837.jpg'}, {'end': 2015.349, 'src': 'embed', 'start': 1986.853, 'weight': 6, 'content': [{'end': 1998.839, 'text': 'So mixed blend mode, if we apply it to the logo, which I think we could apply it here to just the logo selector as well.', 'start': 1986.853, 'duration': 11.986}, {'end': 2007.224, 'text': 'And this will change, it will give it the same kind of behavior like in Photoshop layers, for instance, where you can change the blend mode.', 'start': 2000.08, 'duration': 7.144}, {'end': 2009.846, 'text': 'So we could change it to overlay.', 'start': 2007.304, 'duration': 2.542}, {'end': 2015.349, 'text': 'And look how cool that is.', 'start': 2009.866, 'duration': 5.483}], 'summary': 'Applying mixed blend mode to the logo selector can change the blend mode to overlay.', 'duration': 28.496, 'max_score': 1986.853, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM1986853.jpg'}, {'end': 2076.03, 'src': 'embed', 'start': 2046.712, 'weight': 2, 'content': [{'end': 2050.297, 'text': 'So hopefully you guys learned a lot through this.', 'start': 2046.712, 'duration': 3.585}, {'end': 2051.9, 'text': "It's really funny, funny.", 'start': 2050.378, 'duration': 1.522}, {'end': 2057.989, 'text': "It's really fun creating these, these illustrations that can then become interactive.", 'start': 2052.12, 'duration': 5.869}, {'end': 2061.074, 'text': "And I think it's a really cool way that can, that can spice up a landing page.", 'start': 2058.029, 'duration': 3.045}, {'end': 2065.518, 'text': 'All right, guys, hopefully you enjoyed that and found value in it.', 'start': 2062.056, 'duration': 3.462}, {'end': 2067.161, 'text': 'And make sure you subscribe here.', 'start': 2065.94, 'duration': 1.221}, {'end': 2076.03, 'text': "And also, don't forget today's question is do you charge per hour or per project when dealing with design or development clients?", 'start': 2067.201, 'duration': 8.829}], 'summary': 'Creating interactive illustrations can spice up a landing page and add value to design or development projects.', 'duration': 29.318, 'max_score': 2046.712, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM2046712.jpg'}], 'start': 1572.746, 'title': 'Adobe xd mock-up and svg animation', 'summary': 'Covers a quick method of creating a mock-up in adobe xd using svg files for demonstration, and also explains how to add animation to an svg logo on a landing page, resulting in an interactive and visually appealing effect.', 'chapters': [{'end': 1632.752, 'start': 1572.746, 'title': 'Quick adobe xd mock-up process', 'summary': 'Explains a quick method of creating a mock-up process in adobe xd by grouping everything and exporting it as an svg file, which is then used for demonstration.', 'duration': 60.006, 'highlights': ['The chapter demonstrates a quick method of creating mock-ups in Adobe XD by grouping everything and exporting it as an SVG file.', 'The SVG file, named Group 3, is then used for demonstration purposes.', 'The process involves exporting the grouped elements as an SVG file and using it to demonstrate a technique.']}, {'end': 2078.391, 'start': 1634.154, 'title': 'Svg animation tutorial', 'summary': 'Explains how to add an animation to an svg logo on a landing page, including setting the animation properties and defining key frames, resulting in an interactive and visually appealing effect.', 'duration': 444.237, 'highlights': ['The tutorial demonstrates adding an animation to an SVG logo on a landing page, with properties such as animation duration of 1.2 seconds and iteration count set to infinite.', 'The process involves defining key frames for the animation, including specifying the starting position, translation, and opacity for the logo.', 'The tutorial also covers applying mix blend mode to the logo, creating a Photoshop-like blend effect, and notes the option to apply it directly to the SVG ID for default behavior.', 'The presenter emphasizes the interactive and engaging nature of creating interactive illustrations for landing pages, concluding with a call to action for viewers to subscribe and participate in a discussion about client charging preferences.']}], 'duration': 505.645, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ca3ZkTV4RdM/pics/Ca3ZkTV4RdM1572746.jpg', 'highlights': ['The tutorial demonstrates adding an animation to an SVG logo on a landing page, with properties such as animation duration of 1.2 seconds and iteration count set to infinite.', 'The process involves defining key frames for the animation, including specifying the starting position, translation, and opacity for the logo.', 'The presenter emphasizes the interactive and engaging nature of creating interactive illustrations for landing pages, concluding with a call to action for viewers to subscribe and participate in a discussion about client charging preferences.', 'The chapter demonstrates a quick method of creating mock-ups in Adobe XD by grouping everything and exporting it as an SVG file.', 'The SVG file, named Group 3, is then used for demonstration purposes.', 'The process involves exporting the grouped elements as an SVG file and using it to demonstrate a technique.', 'The tutorial also covers applying mix blend mode to the logo, creating a Photoshop-like blend effect, and notes the option to apply it directly to the SVG ID for default behavior.']}], 'highlights': ['The tutorial covers creating an isometric SVG animation in Adobe Illustrator, exporting the SVG code to an HTML document, and using CSS to create a user interactive and transparent animation.', 'The process involves using 3D tools in Illustrator to create an isometric illustration, as opposed to the traditional grid method, as explained in a recent tutorial.', 'The process of simplifying the SVG code greatly reduced the amount of code in the index HTML, making it a lot less.', 'Exporting the SVG code with specific IDs simplifies the workflow and reduces code.', 'The tutorial demonstrates adding an animation to an SVG logo on a landing page, with properties such as animation duration of 1.2 seconds and iteration count set to infinite.']}