Illustrator tip: when you're cleaning up your vector file (around 15:00) you can use the shape builder tool (shift+m) to merge shapes and delete shapes quickly. Dragging it across shapes merges them and holding alt and clicking on a shape/dragging across shapes deletes them. Also, I don't know if you avoid keyboard shortcuts for simplicity in the tutorial, but control + shift + g ungroups items. Thanks for the great videos!
When the client just doesn't know what he wants exactly, then I think it's better to charge per hour. Because they will say "oh can you do this please ... can you change that a bit ... or worse, change a project direction entirely. When the client knows what they want, there is a deadline and you know the client has a reputable business, then it's better to charge based on the project. You know your work will add much value to their product, and there will not be too many iterations.
Yes. Knowing if they know what they want is on you, though. They'll often talk more confident and specific at first and you'll discover how fickle they are later when you show what you've done.
Make sure to subscribe everyone! My answer for today's question: I've always charged per project for the peace of mind from both my perspective and my client's. If I had to do more work than anticipated, I communicated with the client. I also always let them know before hand that X & Y is exactly what they're getting for $X price. If it requires more work, we'll handle a secondary payment.
Great tutorial. I managed to be an idiot and had an uppercase "L" for "Logo" so couldn't understand why my code wasn't working. Bonus for the channel is I watched the video 10+ times trying to work out where I had gone wrong lol. Anyway, all works and love this channel and content. Keep em coming and many thanks.
Thank you Gary! Amazing video! I love SVGs. I can say for one more time that you are one of the best instructors-teachers-youtubers out there! Thank you so much for your knowledge-sharing! Cheers from Greece! :)
I just made an awesome SVG, I always wanted to get my own, now that I know how to make it, thank you so much for making this happen for me.. more love from Nairobi Kenya
I am a UX designer in my full time job but I am also a freelance web designer, and I charge m freelance projects by projects as it allows the client to have piece of mind, knowing exactly how much the project will cost.
I think it should be per project, because that way the client will know how much to pay from the begining and you can gain your client's trust as they would know you can't lie to them about working extra hours. Awesome Tutorial as always!!!!!!!! :)
great video ! :) but i would optimize SVG a little bit more, all those unnecessary leftover points on rounded corners (you really need only 3) Also answer to your question: Per project, but I calculate final price for the client by estimated hours. First I start with 8h to analyze project, from analysis I add estimated hours, let's go with 100, than ... multiply this by 2 or 3! :D my estimations was always wrong :D some nasty things, or changes still come up in process. At the end don't forget to add "communication hours" I spend countless hours on meetings, phone or writing emails, this is also a time you are spending on this project, that you could spend somewhere else ... so add another 10h. Depending on your skill or your availability set your price/h ... and there you go :).
Thanks for the tutorial dude, I have seen many amazing SVG animations and always thought there was no way I could do that. But now I feel after watching this I can start experimenting with SVG animations.
OMG I thank god I found your channel Its everything I've been looking for! I want to learn how to code better, use illustrator better and learn motion graphics so stuff like AE or Animate. You're the unicorn I've been looking for lmao! Great video keep doing what your doing! In the new year I'm hoping to start a blog documenting all this all this too, inspired!
I prefer to give an estimate as to how much time (and thus money) the project will take and then charge per hour in the end, in case they want more revisions than I plan on and I'm working overtime. Thanks for the great video btw!
Phpstorm tracks the div elements no matter where you put them. Using the elm editor you have there which is likely MS VS code is hampering your performance.
A much easier way to generate less polygons with 3D extrude is to set the number of steps in the extrude settings. Saves a lot of that tedious cleanup.
Charging clients is somewhat of an art form in itself; being able to properly estimate all work and time investment on your part, given your observations of the project scope, characteristics of the company before you get started can be difficult. What that said, some clients don't want to pay hourly because they've been burned before, and other clients would prefer it rather than being locked into a total amount. In the end it depends on the situation. I prefer charging per project because you can bake in time for project management, meetings, and other things, whereas when billed hourly you may get push-back on particular line items of that nature. The bottom line is that you are a professional consultant and should be helping the client. If you think it's going to be X number of hours, then make sure you include the tasks and deliverables in a properly defined work assignment that each party agrees to. Just help the client, provide good work, and you'll be fine.... but per project is better :)
For UX work, I prefer to charge my clients on per day basis consisting of 8 hours of working per day. So while submitting a project overview, I count the expected days it would take to finish a task, with a revision limitation of up to 2 times. In that way, my client feels relaxed about getting the work rather counting hours. And I spice it up with some offers like a concessional rate if work extends for 2 weeks or more. In my opinion, UX can't be counted in hours. A straightforward task might not need too much brainstorming whereas other can take up a whole day just figuring out a solution. So it's better to give estimates for UX in days or weeks rather hours. I feel much relaxed in that way.
Holy Shit. I recognize that t-shirt! Akron is like 30 minutes south of me! Currently in a bootcamp as Case Western and your videos are helping me understand more than just basics.
Oh and as for client charging - project based with limitations to avoid dreaded "project creep" - the old "can we just..." trick. I like to clearly define what we will be delivering and anything above that is charged on either an hourly rate or a set rate to add the feature. IMHO it is often fairer to the client to set a project rate and also easier in the long run as they don't have any nasty surprises when you submit the final invoice.
To answer your question... I estimate the project and try to stick to that estimate to ensure the customer knows the cost up front. I also provide an hourly rate that this is based on so that they know about changing the project along the way. I think many of the freelancers that I've spoken to over the years work this way.
It depends on the project on how I charge. However, the majority of the time I charge by the project, and how much work they want me to do. Most of the time my clients want me to write or edit content, do everything involved with images and videos; in addition, most clients want me to do the SEO as well. Many times I do it for free to non-profit organizations that are helping people.
I charge for the consultancy hours at the beginning and throughout. Then, after we have figured out what they want, I do an estimate of the number of hours that it will take myself, which is variable depending on what they want. I don't share that with them. Then, I charge them for the project as a function of that. If there are changes to what they want, then it is adjusted accordingly. There are generally 2 milestones at least. Each time, we go over what has been done, so that the project doesn't continue on a bad path to save me and them time and money. It's more intricate than that and depends on the money they have and are willing to pay. Nonetheless, it is a function of the time spent, just not explicitly. Hope that makes sense.
Thanks for the video, btw I just had a question, as a graphic and web designer who is about to start his own business, do you (or you guys reading this) think it's a good idea to have tutorials and learning videos (maybe selling the full courses and sharing free tips and tricks videos) on your website along your regular graphic and web design service? Do you guys think that it would help your business growth?
Hello, this comment comes three years later, but I hope you have started your business. If that is the case, sharing free tips is always a good marketing strategy. I believe sharing tips and free content is good marketing in today's world where youtube has more free content than some school libraries. I don't know about the growth part, but you can definitely attract more people and organic traffic to your website than not providing free content.
Creative and cool looking design idea! You should also answer your own questions, haha. Maybe in every following video answer the question from the previous video with some sort of comment :)
What is the impact these types of animation will have on a site´s page loading speed? Is there a better and more efficient ways to build this for a non-programmer/coder like myself? I ask this because I see this video is over 2 years old and I don´t know if there are better options out there nowadays...Thanks!
If its a new client I like to charge by the hour and I always set up a 50% down until we build trust. I have been burnt so many times doing work and not getting paid.
Is Corsetro.com yours ? also how do you make that effect on the fourth section of the home page (ready, set, learn). You should put more social media in the footer, theres a bug with the effect on the fourth section too, thanks for the videos and keep the SVG tuts comin :)
couldn't you replace all those extra paths with shapes that had a linear gradient fill? I imagine that would possibly split the difference between complexity and simplicity in the amount of SVG code produced.
Hi guys, I have one question about SVG showing on a browser with css animations. I guess the animation like this tutorial should be on a certain static canvas box area or div box? So if I want to create an SVG animation which can be expanded width and height for multiple devices?
I used to charge per hour and per project, however, I have moved over to a monthly retainer fee which has different levels of custom developed web apps.
Hey Gary! I used this technique in one of my projects. The SVG I used is a little more complex than the one you used in this video. The animation looks buttery smooth 60 fps in Firefox but super choppy in Chrome. I tried using "will-change" property but it doesn't help much. Any suggestions?
Did you use "transform: translate();" for changing positions of things? You should really avoid using transform position (like top, left...) directly. (This is because most of all other stlyes will be rerendered after changing these properties, which will make it quite heavy computing wise and therefore it could start to be choppy).
I've just got my first client as a freelancer and I've given him an estimate amount and also told him that I work 5 hours a day, 5 days a week along with the hourly rate.
Boris the Blade Actually it's someone from my friend's contacts. I'm yet to make a profile on upwork and I still have to remake my portfolio as it was last updated in 2014! I recently got my master's degree in computer applications and asked my friends to ask their friends and colleagues if anybody needs any kind of service that I can provide. I think this is the best way to start off the freelancing career. Hope this helps. Good luck!
How to make such a background? (responsive of course :D). Also, how to make some skewed edges (yea, there are many examples, but they can't stack responsively)
Always per project, depending on the size of company and how much value the project will add to the company, slightly over charge them so you have leeway, you still can give the customer a 10% discount, people love to see DISCOUNT written on an invoice
Illustrator tip: when you're cleaning up your vector file (around 15:00) you can use the shape builder tool (shift+m) to merge shapes and delete shapes quickly. Dragging it across shapes merges them and holding alt and clicking on a shape/dragging across shapes deletes them.
Also, I don't know if you avoid keyboard shortcuts for simplicity in the tutorial, but control + shift + g ungroups items.
Thanks for the great videos!
Holy moly, many thanks for that tip, I'm actually around that timestamp and was wondering if there was a handy tool / technique.
God sent comment ! 🤗
When the client just doesn't know what he wants exactly, then I think it's better to charge per hour. Because they will say "oh can you do this please ... can you change that a bit ... or worse, change a project direction entirely.
When the client knows what they want, there is a deadline and you know the client has a reputable business, then it's better to charge based on the project. You know your work will add much value to their product, and there will not be too many iterations.
That answer was good!! Thanks
@@moneyisenergy Spot on!
Solid
Excellent piece of advice, thankyou very much 👌
Yes. Knowing if they know what they want is on you, though. They'll often talk more confident and specific at first and you'll discover how fickle they are later when you show what you've done.
Make sure to subscribe everyone! My answer for today's question: I've always charged per project for the peace of mind from both my perspective and my client's. If I had to do more work than anticipated, I communicated with the client. I also always let them know before hand that X & Y is exactly what they're getting for $X price. If it requires more work, we'll handle a secondary payment.
Can you give a project file for this video
More SVG! Thanks for the video!
Welcome!
Great tutorial. I managed to be an idiot and had an uppercase "L" for "Logo" so couldn't understand why my code wasn't working. Bonus for the channel is I watched the video 10+ times trying to work out where I had gone wrong lol. Anyway, all works and love this channel and content. Keep em coming and many thanks.
How you don't have twice as many subscribers is beyond me. You can design, illustrate, animate, and code. You, sir, are incredible.
Thank you Gary! Amazing video! I love SVGs. I can say for one more time that you are one of the best instructors-teachers-youtubers out there! Thank you so much for your knowledge-sharing! Cheers from Greece! :)
I just made an awesome SVG, I always wanted to get my own, now that I know how to make it, thank you so much for making this happen for me.. more love from Nairobi Kenya
I am a UX designer in my full time job but I am also a freelance web designer, and I charge m freelance projects by projects as it allows the client to have piece of mind, knowing exactly how much the project will cost.
I think it should be per project, because that way the client will know how much to pay from the begining and you can gain your client's trust as they would know you can't lie to them about working extra hours.
Awesome Tutorial as always!!!!!!!! :)
Gary, you are making my day everyday that you uploading these SVG things :-)
Thank you for your videos, your channel is my go-to channel to learn many new things about design and graphics. Keep this coming!
great video ! :)
but i would optimize SVG a little bit more, all those unnecessary leftover points on rounded corners (you really need only 3)
Also answer to your question:
Per project, but I calculate final price for the client by estimated hours. First I start with 8h to analyze project, from analysis I add estimated hours, let's go with 100, than ... multiply this by 2 or 3! :D my estimations was always wrong :D some nasty things, or changes still come up in process. At the end don't forget to add "communication hours" I spend countless hours on meetings, phone or writing emails, this is also a time you are spending on this project, that you could spend somewhere else ... so add another 10h.
Depending on your skill or your availability set your price/h ... and there you go :).
Thanks for the tutorial dude, I have seen many amazing SVG animations and always thought there was no way I could do that. But now I feel after watching this I can start experimenting with SVG animations.
OMG I thank god I found your channel Its everything I've been looking for! I want to learn how to code better, use illustrator better and learn motion graphics so stuff like AE or Animate. You're the unicorn I've been looking for lmao! Great video keep doing what your doing! In the new year I'm hoping to start a blog documenting all this all this too, inspired!
I prefer to give an estimate as to how much time (and thus money) the project will take and then charge per hour in the end, in case they want more revisions than I plan on and I'm working overtime. Thanks for the great video btw!
Phpstorm tracks the div elements no matter where you put them. Using the elm editor you have there which is likely MS VS code is hampering your performance.
A much easier way to generate less polygons with 3D extrude is to set the number of steps in the extrude settings. Saves a lot of that tedious cleanup.
Charging clients is somewhat of an art form in itself; being able to properly estimate all work and time investment on your part, given your observations of the project scope, characteristics of the company before you get started can be difficult. What that said, some clients don't want to pay hourly because they've been burned before, and other clients would prefer it rather than being locked into a total amount. In the end it depends on the situation. I prefer charging per project because you can bake in time for project management, meetings, and other things, whereas when billed hourly you may get push-back on particular line items of that nature. The bottom line is that you are a professional consultant and should be helping the client. If you think it's going to be X number of hours, then make sure you include the tasks and deliverables in a properly defined work assignment that each party agrees to. Just help the client, provide good work, and you'll be fine.... but per project is better :)
You will get payed more if per project for quick projects, choose the profitable one according to the situation
For UX work, I prefer to charge my clients on per day basis consisting of 8 hours of working per day. So while submitting a project overview, I count the expected days it would take to finish a task, with a revision limitation of up to 2 times. In that way, my client feels relaxed about getting the work rather counting hours. And I spice it up with some offers like a concessional rate if work extends for 2 weeks or more.
In my opinion, UX can't be counted in hours. A straightforward task might not need too much brainstorming whereas other can take up a whole day just figuring out a solution. So it's better to give estimates for UX in days or weeks rather hours. I feel much relaxed in that way.
Good SVG tutorial! it is such a perfect tool for web animations. We want more!
I have been looking for this for a while! Thanks!
Awesome video! Per project for normal projects & hourly for long-term jobs
Can you do one for animating animations as you scroll. Kind of like some parallax effects.
On scroll event handler on the window object + this should do the trick!
Holy Shit. I recognize that t-shirt! Akron is like 30 minutes south of me! Currently in a bootcamp as Case Western and your videos are helping me understand more than just basics.
Oh and as for client charging - project based with limitations to avoid dreaded "project creep" - the old "can we just..." trick. I like to clearly define what we will be delivering and anything above that is charged on either an hourly rate or a set rate to add the feature. IMHO it is often fairer to the client to set a project rate and also easier in the long run as they don't have any nasty surprises when you submit the final invoice.
I am new to this field and would like to know, what would be better, animations using CSS or using animation libraries
To answer your question... I estimate the project and try to stick to that estimate to ensure the customer knows the cost up front. I also provide an hourly rate that this is based on so that they know about changing the project along the way. I think many of the freelancers that I've spoken to over the years work this way.
excellent tutorial Gary! I wonder to know what happend if you have an illustration with strokes? how do you prepare the archive?
highly underrated channel
always per hours, the hard part is forcast how much actually it will takes you, great uploading video. i like your guion and content, keep doing it
usually by per project in Malaysia, thx for the video!
It depends on the project on how I charge. However, the majority of the time I charge by the project, and how much work they want me to do. Most of the time my clients want me to write or edit content, do everything involved with images and videos; in addition, most clients want me to do the SEO as well. Many times I do it for free to non-profit organizations that are helping people.
Good one !!! :) Do people still use a lot of SVG animations on websites ?
I charge for the consultancy hours at the beginning and throughout. Then, after we have figured out what they want, I do an estimate of the number of hours that it will take myself, which is variable depending on what they want. I don't share that with them. Then, I charge them for the project as a function of that. If there are changes to what they want, then it is adjusted accordingly. There are generally 2 milestones at least. Each time, we go over what has been done, so that the project doesn't continue on a bad path to save me and them time and money. It's more intricate than that and depends on the money they have and are willing to pay. Nonetheless, it is a function of the time spent, just not explicitly. Hope that makes sense.
10:00 You can also use Pathfinder's 'Divide' action, that keeps both shapes and just 'cuts them out of each other'.
Oh man, you just became my personal hero. This is AMAAZIIINNGG. Thank you so much for sharing🙏
Excelente objeto en 3d, se puede acoplar a webs con cms,?
Great tutorial. Thank you. Is there an alternative for IE? Seems like IE is ignoring any stying to the group element.
Hey man...I'm from Akron as well. I went to Buchtel High. Please get a Galley Boy for me from Swensons :).
So much skill and wit in this tutorial. Absolutely amazing. Thanks!
I love love love your video's the svg in special. Keep em coming.
what an excellent! very happy to learn it. thanks.
Is it possible not in-line paste the svg inside to html? Can i use to references the svg? But the css seems not working after. thanks
dis channel gold
Thanks for the video, btw I just had a question, as a graphic and web designer who is about to start his own business, do you (or you guys reading this) think it's a good idea to have tutorials and learning videos (maybe selling the full courses and sharing free tips and tricks videos) on your website along your regular graphic and web design service? Do you guys think that it would help your business growth?
Hello, this comment comes three years later, but I hope you have started your business. If that is the case, sharing free tips is always a good marketing strategy. I believe sharing tips and free content is good marketing in today's world where youtube has more free content than some school libraries. I don't know about the growth part, but you can definitely attract more people and organic traffic to your website than not providing free content.
This was VERY helpful! Thank you!
Can't we use svgator as u showed in earlier videos? I guess it would be easier. Just a thought.
Awesome! Would love to look at the answers to the question too.
what are the buttons that you pressed to cut it's front part? huhuhuhu
hold [Shift] and then?
Great! Is there a github repo of this work?
Can you post the code please if not I can just follow along which I agree its probably better to code this then just copy and paste.
Thank you Gary
You're awesome as your Tutorials, stay with us
Creative and cool looking design idea! You should also answer your own questions, haha. Maybe in every following video answer the question from the previous video with some sort of comment :)
Hello there 🙋♂️
That was really cool stuff , the date of video is about 5y ago ,yet still I gonna use it cause that was cool stuff to do.
Tnx
❤👍👌
For Small project fix price is good,
For big project hourly rate is preferable
What is the impact these types of animation will have on a site´s page loading speed? Is there a better and more efficient ways to build this for a non-programmer/coder like myself? I ask this because I see this video is over 2 years old and I don´t know if there are better options out there nowadays...Thanks!
If its a new client I like to charge by the hour and I always set up a 50% down until we build trust. I have been burnt so many times doing work and not getting paid.
Is Corsetro.com yours ? also how do you make that effect on the fourth section of the home page (ready, set, learn).
You should put more social media in the footer, theres a bug with the effect on the fourth section too, thanks for the videos and keep the SVG tuts comin :)
Can svg encode 3d or would it just be 2d with perspective?
Damn it,you make me don't stop to learn
Mind=Blown.
"how can I select this easily"... the bane of every Illustrator user ever.
I prefer per project. But it really depends on the gig.
Love SVG's😉
Thanks Gary ! I’ve been really looking for a good tutorial on this
Can you share JavaScript video for beginners with basic? full course for JavaScript?
Awesome tutorial! Great job!
I charge per project...
Because some of my tasks take 2 or 3 days and I don't think that would be affordable to clients to hire me :)
couldn't you replace all those extra paths with shapes that had a linear gradient fill? I imagine that would possibly split the difference between complexity and simplicity in the amount of SVG code produced.
Underrated video
What do you recommend for mac version of cmder
may I know what is the software at 2:17? Thank you very much!!!
Adobe Xd (Experience Design)
Hi guys, I have one question about SVG showing on a browser with css animations.
I guess the animation like this tutorial should be on a certain static canvas box area or div box?
So if I want to create an SVG animation which can be expanded width and height for multiple devices?
I used to charge per hour and per project, however, I have moved over to a monthly retainer fee which has different levels of custom developed web apps.
YOU ROCK. Thanks for sharing.
Thank you! Mind blown by this!
Hey Gary! I used this technique in one of my projects. The SVG I used is a little more complex than the one you used in this video. The animation looks buttery smooth 60 fps in Firefox but super choppy in Chrome. I tried using "will-change" property but it doesn't help much. Any suggestions?
Try using GreenSock (GSAP) for animation, it should be stable across all browsers
Did you use "transform: translate();" for changing positions of things? You should really avoid using transform position (like top, left...) directly. (This is because most of all other stlyes will be rerendered after changing these properties, which will make it quite heavy computing wise and therefore it could start to be choppy).
Can this be done with Affinity Designer especially the 3D stuff?
thank you for great videos. perspective a bit strange though. created without any vanishing point.
That's a trademark of isometric perspective. It's an artificial perspective by design.
Amazing tips 👍❤️
very cool tutorial!
I've just got my first client as a freelancer and I've given him an estimate amount and also told him that I work 5 hours a day, 5 days a week along with the hourly rate.
hey quick question where did you find your first customer? was it something like upwork or just straight from your portfolio website
Boris the Blade Actually it's someone from my friend's contacts. I'm yet to make a profile on upwork and I still have to remake my portfolio as it was last updated in 2014! I recently got my master's degree in computer applications and asked my friends to ask their friends and colleagues if anybody needs any kind of service that I can provide. I think this is the best way to start off the freelancing career. Hope this helps. Good luck!
amazing tutorials by my favorit teacher :)
it simple but cool animation concept.
i am trying to export svg code from Ai but it is some port not exported. please, help
How can we use this in WordPress. ?
This is awesome!
can you do success and unsuccess SVG animation or Giphy preloader thank you
thanks you sooooooooooooooo much for your svg tutorial
great movie love to watch you work THANKS!!!!!!
This is very inspire , awesome !
How to make such a background? (responsive of course :D). Also, how to make some skewed edges (yea, there are many examples, but they can't stack responsively)
thanks
maybe share both the colors of the bg svg?
#33363A, #282A2C
SVG! great, thank for video
Always per project, depending on the size of company and how much value the project will add to the company, slightly over charge them so you have leeway, you still can give the customer a 10% discount, people love to see DISCOUNT written on an invoice
Awesome, Great Thanks .
finally i found how to do make cool animation on html :D
Awsm work
i do both.. per hour for smaller things and per project for sites from 6k upwards
Damn was looking for this for a long time.