Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Konrad Pilch
2,435 PointsHow do you make this kind of graphics?
In the programmin side and in the illustrator .
4 Answers
Victor Ruiz
16,570 PointsHi Konrad,
So this kind of graphics could be made with photoshop, illustrator or sketch. The website is using css animation to make it animate and rotate. There using a png of the vector flowers if you wanted the flowers to scale down I would suggest using svgs. There are some classes on treehouse that show you how to animate using css here is a links:
(https://teamtreehouse.com/library/css-beyond-the-basics)
(https://teamtreehouse.com/library/animating-svg-with-css)
Good luck!
Victor Ruiz
16,570 PointsNot sure about IE8 but there should be a work around using webkit on your animations
Victor Ruiz
16,570 PointsI would just have javascript or jquery just in case if not a gif.
Victor Ruiz
16,570 PointsIf your able to see the animations from the page you posted on IE8 then I'm sure you can just use css animations.
Konrad Pilch
2,435 PointsI dont know them : p depending how complex is, i may use jQuery, i know the basics of JS but never build really anything although i know how it works but now im focusing more on Theam Development with WP .
Do you know anything good where i could learn about JS to do this? I want to make this site later one. And do you know what software could i use and what tools? i always think about pen-tool and shapes in photoshop, as i never used illustrator but i think illustrator is for web .
I really love this kind of graphis and looks pro , i really like the parallex effect when things move too : p
Konrad Pilch
2,435 PointsIm on Mac and not till friday at college.
Victor Ruiz
16,570 PointsYou can built the shapes in photoshop if you wanted.
Konrad Pilch
2,435 PointsDo you know how would be the best tools in photoshop to build it ? like shapes or pen tool? somehow
Victor Ruiz
16,570 PointsWell here at treehouse they don't go over to many animations with javascript but I'm sure you can find some tutorials online. I would try and do the css animations first because they help you with the end product once your doing either jquery or javascript.
Me too I'm also on a Mac :P
Victor Ruiz
16,570 PointsFor tools all you would need is inspect element on a browser and specially the javascript console that is locate within inspect element.
Konrad Pilch
2,435 PointsApple the future : p
My saying is this:
Apple will take over the world and Microsoft will drop Windows when Bill Gates will have i dont know 100 years? or 200 u know what i mean :D so then Windows will die as well and Microsoft will use Apple :D Lol heh
Ill definitely do them and id definitely check at college and ill tell you if it works :)
Thank you!
Konrad Pilch
2,435 PointsI mean tools on photoshop so i can make this kind of graphic, or illustrator .
Victor Ruiz
16,570 PointsYeah your probably right about apple. :D
For tool I would use the pen tool if you doing unique shapes. If you are doing flowers then I would use the shape tools.
Yeah let me know what happens.
Good Luck!!
Konrad Pilch
2,435 PointsThank you! Unfortunately i dont have this software and i must use them at college, but ill try and see if i can do it. Hopefuly i can find some practice online first.
Thank You !
Happy coding & designing :D
btw, i dont know when im gonna use pen tool, but when im gonna have a little bit more time, pen tool and shape tools :)
Konrad Pilch
2,435 PointsKonrad Pilch
2,435 PointsOh wow, didnt know that they have courses on that.
Thats awesome! Thank you. I know some CSS animation, but definitely not this kind of.
I though u need JS to do it to take it to the next level.
Victor Ruiz
16,570 PointsVictor Ruiz
16,570 PointsNewer browsers support the css and css3 but sometimes you would need to have a backup and use jquery or javascript. They show you the browsers that are supported by this css but most computers now supported except for older ones.
Konrad Pilch
2,435 PointsKonrad Pilch
2,435 PointsSo it wont work on IE8 ? and id need jQuery ? but the back up is like a link maybe ?