How to Create a Loading Circle Animation in Adobe Photoshop
ฝัง
- เผยแพร่เมื่อ 25 ม.ค. 2013
- In today's tutorial, we're going to be creating a very simple 'loading circle' animation using Photoshop CS6, which you can use on your websites, or before your video projects. This effect is going to take advantage of some of Photoshop CS6's improved animation capabilities, leaving you with a silky smooth result. Make sure to check out my other Photoshop tutorials. Links below!
Tools used in this tutorial:
Custom Shapes Tool: If you're looking to create a non-standard shape, you may find it within the Customs Shapes Tool. Within the shape picker on the options bar, you can load in all shapes if you don't find what you're looking for.
Layer Styles: If you're looking to add effects to your layers, you'll likely want to use Layer Styles. Whether it's an outer glow, a few shadows, or a bevel to give it depth, the possibilities are endless!
Timeline: To create the animation, the Timeline was accessed (under the Window menu). My adding keyframes, you're able to set the starting and ending point for each object, and when played back (spacebar), you'll see the animation.
MORE FROM ICEFLOWSTUDIOS:
Subscribe!
th-cam.com/users/subscription_c...
Website!
www.iceflowstudios.com
Facebook!
/ iceflowstudios
Twitter!
/ pinsky
Howard Pinsky provides free #graphicdesign tutorials covering #CreativeCloud, Adobe #Photoshop, Lightroom, and Adobe XD to the graphic design and photography community. To date, the videos uploaded to this channel channel have been viewed over 80 million times.
No matter what you're looking to learn in Photoshop, you're bound to find it in our library of over 350 tutorials. Topics include: Text Effects in Photoshop, Photo Composition, Photo Retouching, The Basics of Photoshop, Designing in Photoshop, Special Effects, and more! While new videos will be taught using the latest version of Photoshop, you'll find videos covering Photoshop CC, Photoshop CS6, CS5, CS4, and CS3.
For more information on Adobe Photoshop, check out Adobe's website at: www.adobe.com/products/photosh...
For the written version of most of our tutorials, check out: www.iceflowstudios.com/
Unlike so many other tutorials, he speaks English and you can understand everything he says. Thumbs up for that.
The guy is articulate, gets straight to the point... Uncovers rare gems of photoshop effortlessly in what would have taken some of these TH-camrs 30 minutes. Howard Pinsky...I just subscribed
CarkodMusic lmao no need to be rude
This is exactly what I was thinking. So glad to have found this! I HATE when they drag on and on about pointless crap. Direct, simple, and to the point as ALL youtube tutorials SHOULD be.
Damm you made that shit sound beautiful...I just subscribed to both of yall channels.
" say much in few words "...huh sun szu
finally a photoshop tutorial that doesnt have any 2 minute intro and video isnt 30 minute long and learnt more than came to learn.. you deserve more subs
some ego use more than 2min, thats why i want youtube to stop beeing free
This is the first time a video uploader replied to my comment.. I didn't make a mistake when I subscribed this channel few months ago xD
EXCELLENT TEACHER! Straight to the point, no fluff, very clear, seriously, well done!
Lovely way of teaching. Crisp. Clear. To-the-point!!
A very good teacher,
Subscribed!
Wow! This is one of the finest videos tutorials I have ever watched. Thanks a million!
Howard,
Just like to thank you for all the work you have put into these tutorials. I have learned more from you then from anywhere else.
Nina
Each tutorial teaches me something tiny little fresh skill like "Contours" in gradient overlay effect can be so helpful :)
Thanks
yes thats the power of hex codes! Like the tut Howard!
Simple and straight to the point, dude you made my day, thanks a bunch.
Excellent tutorial. Well explained, quick and zipped straight to the point. Many thanks
Brilliantly simple yet effective technique ... Thanks Howard
Man you're the most generous guy ever, thanks!
Personally i find this guy's tutorials the most helpful, i myself am a 14 year old designer and tbh i really want to thank you Howard for all the help! I hope to go into university and highschool with great knowledge of this exact thing! Thanks man!
the best tutorials of ever ...God Bless you bro
¡MUCHAS GRACIAS POR EL TUTORIAL!!!
I followed this tutorial and it worked. Thanks for sharing. Never knew is was possible to do things like this.
Simply brilliant, never knew Photoshop could animate this much, it's almost as if using Flash, thanks very much !
best photoshop tutorial ever. thanks buddy
Oh wow. Thanks for the tutorial. Keep up the good work. 10/10
You make it look so simple, thanks!
This was extremely useful and so easy to understand, thanks! :)
You did well with the name change, and the tut is awesome as always.
Great video man. Keep it to the point and with explanations.
Awesome! This was a great tutorial! I'm a complete noob with CS6 so the more I learn the better :D
Very smart with the angles
Awesome Howard! Thank you.
Awesome as always Howard.
Yessss! U just Made my Day! Thx so much for this One!!
Thanks for the video! Very helpful!
Wow this is great design,&animation. Thanks.
I have subscribed to you because you were a great help. Thank you.
awesome effect
Awesome tutorial. My first animation in photoshop cs6!
Great tutorial. Its amazing how you can do this in 6.5 minutes
Very nice and clear explanation...
Thanks alot for this vid. Really good!
ooh man that is a good tutorial, I really love it and i can't wait to subscribe
Thanks Howard loved the video!!
Wow super nice, thanks
nvm I figured it out. Thanks for the tutorial it was great!
Awesome...as usual.
Woah thats awesome !
thanks howard... very enlighting...
Thanks for the tut ^^ really helped me a lot
Amazing tutorial, thanks a ton :)
I like this video and I think it,s very useful video for all . Thanks to you for upload this video
i love how he zooms in on the things that he is using and explains whats going on
thank you so much
great little video..Thanks Howard
DOPE! I didn't know you could animate with Photoshop until now :D A whole new world of editing here I see
Thanks, easy and fast!
Whoa thank you so much, Howard! This was so useful!
Nice man !!! Thank you very much
This is awesome ♥_♥ so going to use this!
sweet, thanks!
Amazing job thanks
This was a great tutorial Howard. I didn't need to create a loading circle for anything, but I'm already half-way through one :D
This is TRON Style. Very cool!
Great stuff man.. Thanx a lot bro!!!
amazing, it looks like a video. really, the new Photoshop is comprehending video editing
really nice tuto. i like it, thanks you so much.
its lovly and attractive
This was awesome !!! Thx Mr. Pinsky !!
=)
Excellent. Of course, you're fast in your delivery, so a few of will need to watch more than once. Your pal, Orson Welles.
Awesome!
Wow, you have awesome tutorials
Amazing!
Pinsky you create very good tutorials, thanks !
You the best man thanks u really helped me
Understood. Thank you for the quick reply Howard.
Very nice Clip!
That is so freakin cool!!!
wonderfull
you are awesome.
thnks bro for helping
thanks!
Hey good job Howard! I really appreciate this indepth tutorial! I'm making a game in Unity and needed to know how to animate. I'm super good in Photoshop. I never knew you could animate in P.S Thanks!
keep up Mr Howard you're doing well !!
Grt Man you ROCK as always :D I made it a video export :D M a Big Fan of yours since last 3 years :D
That's pretty slick! I'm gonna have to figure out how to adapt this to a project I have in mind. I'm trying to illustrate water flow through a piping system. Hopefully this will help.
Mantap.. Hehe
TY Sir, this helps :)
I love you thank you
Thank You .......
Nice, easy and fast to make. :)
Thanks, Howard. I only have CS3 and was having no luck rotating a gradient background in a (allbeit, primative) animated gif. Finally I remembered I had to do that as a 'gradient overlay' instead of thinking one could 'rotate' a layer made with the gradient tool. Then I could use your info of 89, 92. What I did instead, since the window in that old version is 'Animation', is dup frame set at 90, set that to 20, tween 7 frames (- generating 80, 70, 60, 50, 40 and 30 degrees positioning). Etc. Clutsy but worked! ;')
Oh thanks you!!!
applying this technique to text would look interesting..
the most important comment surely :
- Thanks for the good work and keep it going!
nc tuts!
It is, but these features are available in the Standard version, as long as your computer's GPU supports it.
great tutorial! i do wonder if having the glowing bit be thicker than the non-glowing bit would be possible ? as in it would go over he edge of the "donut"
lol you guys are funny. I must admit, though, I respectfully wish you'd choose colors by "description" rather than numbers. There's a wonderful artistry to describing a color and then finding the interplay that's missing when you rattle off color codes. Since you encourage discovery it seems contrary to spoon-feed people set values. No matter what - you're a good egg doing a great job! Happy pixels!
realy good for me thanks, and can u explain how to zoom and zoom out the image in cs6
nice video.
ty
Awesome tutorial...Howard, what are the specs on the computer you're using?
Hi! Great tutorial!
I wonder how to export/save it as a Gif? My only options seem to be mp4 or as a image sequence...