Design & Animate SVG Illustrations for Web Design
Вставка
- Опубліковано 28 сер 2024
- Today's Question: Do you charge hourly or per project? Let us know!
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: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-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!
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!
How you don't have twice as many subscribers is beyond me. You can design, illustrate, animate, and code. You, sir, are incredible.
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.
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.
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
Gary, you are making my day everyday that you uploading these SVG things :-)
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! :)
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
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.
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!!!!!!!! :)
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.
highly underrated channel
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!
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 :).
Thank you for your videos, your channel is my go-to channel to learn many new things about design and graphics. Keep this coming!
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!
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!
dis channel gold
Oh man, you just became my personal hero. This is AMAAZIIINNGG. Thank you so much for sharing🙏
Awesome video! Per project for normal projects & hourly for long-term jobs
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.
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.
"how can I select this easily"... the bane of every Illustrator user ever.
Good SVG tutorial! it is such a perfect tool for web animations. We want more!
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.
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
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.
So much skill and wit in this tutorial. Absolutely amazing. Thanks!
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
❤👍👌
Awesome! Would love to look at the answers to the question too.
what an excellent! very happy to learn it. thanks.
This was VERY helpful! Thank you!
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.
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.
I have been looking for this for a while! Thanks!
10:00 You can also use Pathfinder's 'Divide' action, that keeps both shapes and just 'cuts them out of each other'.
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.
Underrated video
usually by per project in Malaysia, thx for the video!
I prefer per project. But it really depends on the gig.
Love SVG's😉
For Small project fix price is good,
For big project hourly rate is preferable
Mind=Blown.
Thanks Gary ! I’ve been really looking for a good tutorial on this
I love love love your video's the svg in special. Keep em coming.
You're awesome as your Tutorials, stay with us
very cool tutorial!
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 :)
Damn it,you make me don't stop to learn
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 :)
YOU ROCK. Thanks for sharing.
thanks you sooooooooooooooo much for your svg tutorial
Hey man...I'm from Akron as well. I went to Buchtel High. Please get a Galley Boy for me from Swensons :).
Awesome, Great Thanks .
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!
THANK YOU!!!!!
thank you
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.
excellent tutorial Gary! I wonder to know what happend if you have an illustration with strokes? how do you prepare the archive?
Thank you! Mind blown by this!
This is awesome!
I am new to this field and would like to know, what would be better, animations using CSS or using animation libraries
Can you share JavaScript video for beginners with basic? full course for JavaScript?
Thank you so much 🖤
Amazing tips 👍❤️
Awsm work
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 tutorial! Great job!
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.
SVG! great, thank for video
amazing tutorials by my favorit teacher :)
finally i found how to do make cool animation on html :D
Cool that's work good
great movie love to watch you work THANKS!!!!!!
Excelente objeto en 3d, se puede acoplar a webs con cms,?
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.
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
Damn was looking for this for a long time.
This is very inspire , awesome !
Great tutorial. Thank you. Is there an alternative for IE? Seems like IE is ignoring any stying to the group element.
The Pathfinder tool is the most powerful thing Illustrator has to offer. You don't know Illustrator unless you know Pathfinder.
Great stuff
I learned a lot of things. thank you
Thanks!
Good one !!! :) Do people still use a lot of SVG animations on websites ?
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.
I am Designer Now😘
thanks mate
i do both.. per hour for smaller things and per project for sites from 6k upwards
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.
maybe share both the colors of the bg svg?
#33363A, #282A2C
Awesome !
thanks
Can't we use svgator as u showed in earlier videos? I guess it would be easier. Just a thought.
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 :)
Amazing videos, keep it up 🙂
good job
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!