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

Design

Konrad Pilch
Konrad Pilch
2,435 Points

How do you make this kind of graphics?

In the programmin side and in the illustrator .

http://www.hetknutselschuurtje.nl/

4 Answers

Hi 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!

Konrad Pilch
Konrad Pilch
2,435 Points

Oh 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.

Newer 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
Konrad Pilch
2,435 Points

So it wont work on IE8 ? and id need jQuery ? but the back up is like a link maybe ?

Not sure about IE8 but there should be a work around using webkit on your animations

I would just have javascript or jquery just in case if not a gif.

If 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
Konrad Pilch
2,435 Points

I 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
Konrad Pilch
2,435 Points

Im on Mac and not till friday at college.

You can built the shapes in photoshop if you wanted.

Konrad Pilch
Konrad Pilch
2,435 Points

Do you know how would be the best tools in photoshop to build it ? like shapes or pen tool? somehow

Well 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

For tools all you would need is inspect element on a browser and specially the javascript console that is locate within inspect element.

Konrad Pilch
Konrad Pilch
2,435 Points

Apple 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
Konrad Pilch
2,435 Points

I mean tools on photoshop so i can make this kind of graphic, or illustrator .

Yeah 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
Konrad Pilch
2,435 Points

Thank 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 :)